{# templates/components/_pwa_banner.html.twig #}
<div id="pwa-banner" style="display:none;" aria-live="polite">
    <div class="pwa-banner-inner">
        <div class="pwa-banner-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 512 512" fill="none">
                <rect x="56" y="140" width="400" height="252" rx="32" fill="#4f46e5"/>
                <rect x="56" y="196" width="400" height="56" fill="#3730a3"/>
                <rect x="90" y="156" width="72" height="52" rx="8" fill="#f59e0b"/>
                <line x1="126" y1="156" x2="126" y2="208" stroke="#b45309" stroke-width="18"/>
                <line x1="90" y1="182" x2="162" y2="182" stroke="#b45309" stroke-width="18"/>
                <text x="256" y="330" font-family="system-ui" font-size="110" font-weight="700" fill="#ffffff" text-anchor="middle">€</text>
                <circle cx="360" cy="348" r="18" fill="#ffffff" opacity="0.35"/>
                <circle cx="400" cy="348" r="18" fill="#ffffff" opacity="0.35"/>
                <circle cx="440" cy="348" r="18" fill="#ffffff" opacity="0.35"/>
            </svg>
        </div>
        <div class="pwa-banner-text">
            <p class="pwa-banner-title">Installer Budget</p>
            <p class="pwa-banner-sub">Accès rapide depuis votre écran d'accueil</p>
        </div>
        <div class="pwa-banner-actions">
            <button id="pwa-install-btn" class="pwa-btn-install">Installer</button>
            <button id="pwa-dismiss-btn" class="pwa-btn-dismiss" aria-label="Fermer">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
    </div>
</div>