/*
 * Bandeau d'installation PWA + instructions iOS — voir install-banner.js.
 * Auto-suffisant (variable --mavipro-pwa-accent posée en inline par le
 * JS, valeurs de repli sinon) : ne dépend d'aucune classe de body,
 * s'affiche par-dessus le Swiper plein écran de la Capsule.
 */

.mavipro-pwa-banner {
	--mavipro-pwa-accent: #22D3EE;
	--mavipro-pwa-accent-text: #0F1115;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
	display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
	padding: .9rem 1.1rem; padding-bottom: max(.9rem, env(safe-area-inset-bottom));
	background: rgba(15, 17, 21, 0.92); backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-family: 'Inter', system-ui, sans-serif; color: #F5F1EA; font-size: .85rem;
}
.mavipro-pwa-banner__text { flex: 1; min-width: 200px; }
.mavipro-pwa-banner__btn {
	font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .85rem;
	background: var(--mavipro-pwa-accent); color: var(--mavipro-pwa-accent-text); border: none; border-radius: 100px;
	padding: .55rem 1.1rem; cursor: pointer; flex: none;
}
.mavipro-pwa-banner__close {
	background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #A9A296;
	width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: none; font-size: .8rem;
}

.mavipro-pwa-ios-modal {
	position: fixed; inset: 0; z-index: 1000; background: rgba(4, 7, 14, 0.75); backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center; padding: 24px;
}
.mavipro-pwa-ios-modal__card {
	position: relative; max-width: 320px; background: #15181F; border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px; padding: 2rem 1.6rem 1.6rem; text-align: center;
	font-family: 'Inter', system-ui, sans-serif; color: #F5F1EA; font-size: .92rem; line-height: 1.5;
}
.mavipro-pwa-ios-modal__icon { font-size: 1.8rem; margin-bottom: .6rem; }
.mavipro-pwa-ios-modal__close {
	position: absolute; top: .7rem; right: .7rem; width: 28px; height: 28px; border-radius: 50%;
	background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #A9A296; cursor: pointer; font-size: .75rem;
}

@media (max-width: 480px) {
	.mavipro-pwa-banner { font-size: .8rem; }
}

/*
 * Bouton persistant (Étape 6, prompt-captao-capsules.md) : remplace le
 * bandeau une fois fermé ou après une action d'installation — reste
 * cliquable à tout moment, faute de pouvoir détecter fiablement une
 * désinstallation (voir install-banner.js).
 *
 * Retour propriétaire, 28 août 2026 : n'est plus une pastille flottante
 * en position:fixed visible sur TOUTES les faces (confusion — l'icône
 * "installer" apparaissait par-dessus Services, Photos, Contact...).
 * install-banner.js l'insère maintenant directement dans .id__actions
 * de la face Identité (à gauche du bouton partager, #idShareBtn) : un
 * élément normal du flux, qui suit donc le Swiper comme le reste de
 * cette face et n'existe visuellement que là. Même gabarit que
 * .id__share (cercle 52px) pour s'aligner proprement à côté de lui.
 */
.mavipro-pwa-mini-btn {
	flex: none; width: 52px; height: 52px; border-radius: 50%; padding: 0;
	display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-line);
	color: var(--text-color); cursor: pointer; font-size: 1.15rem; line-height: 1;
}
.mavipro-pwa-mini-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Repli défensif : si .id__actions est introuvable pour une raison
   quelconque (gabarit modifié plus tard...), le bouton reste au moins
   accessible plutôt que silencieusement perdu dans le flux du document. */
.mavipro-pwa-mini-btn--floating {
	position: fixed; left: 1.1rem; bottom: max(1.1rem, env(safe-area-inset-bottom));
	z-index: 998; background: rgba(15, 17, 21, 0.75); backdrop-filter: blur(8px);
	border-color: var(--accent, #22D3EE); color: #F5F1EA;
}