/**
 * ABS Mondial Export — bandeau « Installer l'application » (PWA).
 *
 * Règle absolue : le bandeau est masqué par `[hidden] { display:none }`.
 * On n'utilise JAMAIS `left:-9999px` (technique obsolète qui débordait le
 * document en arabe et provoquait une page blanche — incident du 14/10/2026).
 *
 * Placement : en bas, à gauche sur ordinateur (la bulle WhatsApp est en bas à
 * droite), au-dessus de la bulle sur mobile. Le bandeau RGPD occupe le même
 * coin : le script attend qu'il soit refermé avant d'afficher celui-ci.
 *
 * @package abs-mondial-tools
 */

.amt-pwa[hidden] {
	display: none !important;
}

.amt-pwa {
	position: fixed;
	z-index: 9995;
	left: 24px;
	bottom: 24px;
	box-sizing: border-box;
	max-width: 420px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #ffffff;
	color: #0b0b0d;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(11, 31, 58, 0.18);
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.875rem;
	line-height: 1.35;
	text-align: start;
}

.amt-pwa__logo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #ffffff;
}

.amt-pwa__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.amt-pwa__title {
	color: #0b1f3a;
	font-size: 0.9375rem;
	font-weight: 700;
}

.amt-pwa__desc,
.amt-pwa__hint {
	color: #4b5563;
}

/*
 * 2.5.3 — Le visiteur a touché « Installer » alors que son navigateur ne
 * propose pas l'installation en un geste (Firefox Android, Opera…). La marche
 * à suivre est alors encadrée en doré : elle devient la réponse au bouton au
 * lieu d'être une phrase ignorée (demande de Nizar du 14/10/2026).
 */
.amt-pwa[data-emphasis="1"] .amt-pwa__hint {
	border-inline-start: 3px solid #c9a227;
	background: #fffbeb;
	padding: 4px 8px;
	border-radius: 6px;
	color: #0b1f3a;
}

.amt-pwa__go {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding: 9px 16px;
	background: #c9a227;
	color: #0b1f3a;
	border: 0;
	border-radius: 10px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.amt-pwa__go:hover,
.amt-pwa__go:focus-visible {
	background: #e2c766;
}

.amt-pwa__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #4b5563;
	border: 0;
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.amt-pwa__close:hover,
.amt-pwa__close:focus-visible {
	background: #f3f4f6;
	color: #0b1f3a;
}

/* Mobile : pleine largeur, posé AU-DESSUS de la bulle WhatsApp (56 px + 14 px). */
@media (max-width: 600px) {
	.amt-pwa {
		left: 16px;
		right: 16px;
		max-width: none;
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
		/* 2.5.3 : le bouton est désormais toujours affiché — on autorise le
		   passage à la ligne pour qu'il reste entier sur un écran étroit. */
		flex-wrap: wrap;
	}
}

/* Apparition douce, désactivée si l'utilisateur préfère moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
	.amt-pwa {
		animation: amt-pwa-in 0.28s ease-out both;
	}
}

@keyframes amt-pwa-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}