/* ═══════════════════════════════════════════════════════════════════════════
 *  SYPHAX — Interface Progressive Web App
 *  Namespace `pwa-*`, exclusif comme les autres (`g-*`, `admin-*`, `pp-*`,
 *  `te-*`, `el-*`, `ca-*`). Couche transverse : ces composants apparaissent
 *  dans tous les espaces et ne doivent hériter d'aucun style de zone.
 * ═══════════════════════════════════════════════════════════════════════════ */

.pwa-bandeau {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2147483000;                 /* au-dessus des modales des zones */
    margin: 0 auto;
    max-width: 460px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #FFFFFF;
    color: #1E293B;
    border: 1px solid #E2E8F0;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .18);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity .22s ease, transform .22s ease;
}
.pwa-bandeau.pwa-visible { opacity: 1; transform: translateY(0); }

.pwa-bandeau__icone {
    flex: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #EFF6FF;
    overflow: hidden;
}
.pwa-bandeau__icone img { width: 30px; height: 30px; display: block; }

.pwa-bandeau__corps { flex: 1; min-width: 0; }
.pwa-bandeau__titre { font-weight: 700; margin: 0 0 2px; font-size: 14px; }
.pwa-bandeau__texte { margin: 0; font-size: 12.8px; color: #475569; }

.pwa-bandeau__actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 10px;
}

.pwa-btn {
    appearance: none;
    /* 40 px : cible tactile confortable sans dominer un bandeau compact */
    min-height: 40px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #1E293B;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.pwa-btn:hover { background: #F8FAFC; }
.pwa-btn:focus-visible { outline: 3px solid rgba(30, 58, 138, .35); outline-offset: 2px; }
.pwa-btn--principal {
    background: var(--pwa-accent, #1E3A8A);
    border-color: var(--pwa-accent, #1E3A8A);
    color: #FFFFFF;
}
.pwa-btn--principal:hover { filter: brightness(1.08); background: var(--pwa-accent, #1E3A8A); }

.pwa-bandeau__fermer {
    flex: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: #94A3B8;
    /* Cible tactile réelle de 32 px, sans alourdir visuellement le bandeau */
    width: 32px; height: 32px;
    margin: -4px -6px 0 0;
    border-radius: 8px;
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.pwa-bandeau__fermer:hover { background: #F1F5F9; color: #475569; }
.pwa-bandeau__fermer:focus-visible { outline: 3px solid rgba(30, 58, 138, .35); outline-offset: 1px; }

/* ── Bandeau hors connexion ───────────────────────────────────────────────
   Ancré en haut : l'information doit rester visible même quand l'utilisateur
   fait défiler la page, sans masquer les actions du bas d'écran. */
.pwa-reseau {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 2147483001;
    padding: calc(7px + env(safe-area-inset-top)) 14px 7px;
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: #7F1D1D;
    color: #FFFFFF;
    transform: translateY(-100%);
    transition: transform .22s ease, background-color .22s ease;
}
.pwa-reseau.pwa-visible { transform: translateY(0); }
.pwa-reseau--retabli { background: #166534; }

/* ── Aide à l'installation sur iOS ───────────────────────────────────────
   Safari n'expose pas beforeinstallprompt : l'ajout à l'écran d'accueil est
   manuel, il faut donc montrer le geste. */
.pwa-ios-etapes {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    font-size: 12.5px;
    color: #475569;
}
.pwa-ios-etapes ol { margin: 0; padding-left: 18px; }
.pwa-ios-etapes li { margin-bottom: 3px; }
.pwa-ios-etapes li:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .pwa-bandeau { max-width: none; }
    .pwa-bandeau__actions .pwa-btn { flex: 1; }
}

/* Les animations sont décoratives : on les retire pour qui les refuse. */
@media (prefers-reduced-motion: reduce) {
    .pwa-bandeau, .pwa-reseau { transition: none; }
}

@media print {
    .pwa-bandeau, .pwa-reseau { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  Bloc « Notifications sur cet appareil » (page de compte, tous espaces)
 *
 *  Servi aux sept espaces : aucune variable de zone (--g-*, --pp-*, --te-*…)
 *  ici, elles n'existent pas partout. On s'aligne sur --pwa-accent, posee par
 *  la page, avec un repli neutre.
 * ═══════════════════════════════════════════════════════════════════════════ */
.pwa-notifs {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 16px;
    background: #F8FAFC;
}
.pwa-notifs__entete { display: flex; gap: 12px; align-items: flex-start; }
.pwa-notifs__icone {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pwa-accent, #1E3A8A);
    color: #fff; font-size: 17px;
}
.pwa-notifs__titre { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.pwa-notifs__texte { margin: 0; font-size: 13px; color: #475569; }
.pwa-notifs__aide  { margin: 10px 0 0; font-size: 12.5px; color: #64748B; line-height: 1.5; }
.pwa-notifs__compte {
    margin: 12px 0 0; padding-top: 10px;
    border-top: 1px solid #E2E8F0;
    font-size: 12.5px; color: #64748B;
}
.pwa-notifs__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

@media (max-width: 480px) {
    .pwa-notifs__actions .pwa-btn { flex: 1; justify-content: center; }
}