/*
 * blocks/mobile-app.css — page guest "Application" (installation PWA).
 * Hero : réutilise le composant partagé .section-split (variante claire,
 * déjà utilisée sur about-us/security-center) avec une vraie photo dans
 * .section-split__media — .mobile-app-split ne fait qu'ajuster la marge du
 * h1 (le composant partagé ne stylise que h2), aucune règle de
 * section-split.css n'est redéfinie. + icônes de la grille "Comment
 * l'installer" + split d'installation #installer (panneau blanc Android /
 * panneau couleur site iPhone, données via data-pwa-os, pilotées par
 * pwa-install.js).
 */

/* ============ Hero — h1 (page complète) au lieu du h2 par défaut du composant ============ */

.mobile-app-split .section-split__text h1 { color: var(--ink); margin-top: var(--s4); }

/* Deux CTA hero ne tiennent pas sur une ligne en dessous de la bascule menu
   hamburger (téléphone + tablette) : on garde le principal et on cache le
   secondaire, comme la règle .hero__actions .btn--outline existante à 480px
   ailleurs sur le guest — ici étendue à 1020px car propre à cette page. */
@media (max-width: 1020px) {
	.mobile-app-split .hero__actions .btn--outline { display: none; }
}

.mobile-app__icon {
	width: 2.2rem;
	height: 2.2rem;
	color: var(--teal);
}

/* ============ Split installation — panneau blanc (Android) / couleur site (iPhone) ============ */

.mobile-app-install-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
}

.mobile-app-install-split__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--s16) clamp(1.5rem, 6vw, 5rem);
}

.mobile-app-install-split__panel--light {
	background: #fff;
	color: var(--ink);
}

.mobile-app-install-split__panel--brand {
	background: var(--signal);
	color: var(--ink);
}

.mobile-app-install-split__panel--brand h2 { color: var(--ink); }
.mobile-app-install-split__panel--brand p { color: var(--ink-2); }

.mobile-app__os-icon {
	width: 2.2rem;
	height: 2.2rem;
	padding: var(--s4);
	border-radius: 50%;
	box-sizing: content-box;
}

.mobile-app__os-icon--android {
	color: var(--teal);
	background: var(--teal-soft);
}

.mobile-app-install-split__panel--brand .mobile-app__os-icon--ios {
	color: var(--ink);
	background: rgba(16,23,19,.1);
}

.mobile-app__os-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.mobile-app__os-hint {
	font-size: .85rem;
	color: var(--muted);
}

.mobile-app__os-installed .mobile-app__icon {
	color: inherit;
}

.mobile-app__steps {
	list-style: disc;
	padding-left: 1.2rem;
	color: var(--muted);
}

.mobile-app-install-split__panel--brand .mobile-app__steps {
	color: var(--ink-2);
}

.mobile-app__steps li {
	padding-left: var(--s2);
	margin-bottom: var(--s2);
}

@media (max-width: 900px) {
	.mobile-app-install-split { grid-template-columns: 1fr; min-height: 0; }
}