/* ── Responsive mobile/tablette des 24 LP (2026-07-27) ──────────────────
   Correctif mutualisé, chargé une seule fois par page-lp.php, après le
   <style> propre à chaque LP (post meta _lp_style_css) - gagne sur la
   cascade à specificite egale grace a l'ordre de chargement, sans avoir
   besoin de selecteurs plus specifiques que l'existant. Portee strictement
   limitee aux 24 LP (fichier charge uniquement par page-lp.php) : aucun
   impact sur le site principal.

   Cause racine no1, la plus severe (voir RAPPORT_RESPONSIVE.md) :
   .hero .split ne se repliait jamais en une colonne sur mobile pour les
   tunnels brochure et jpo, malgre une media query @media(max-width:900px)
   deja presente dans le CSS de la LP - cette regle est ecrite AVANT la
   declaration de base (non conditionnelle) du meme selecteur plus bas
   dans le meme fichier, qui la neutralise silencieusement (cascade a
   specificite egale, la regle la plus tardive dans le fichier l'emporte,
   qu'elle soit ou non dans une media query). Consequence en cascade :
   une colonne de la grille reste large de plusieurs centaines de pixels,
   pousse le document au-dela de la largeur de l'ecran, et TOUT element en
   position fixed (bandeau tarteaucitron, badge reCAPTCHA) se positionne
   alors par rapport a ce bloc de mise en page elargi au lieu du vrai
   viewport visuel - d'ou le defilement horizontal, l'en-tete tronque et
   le badge reCAPTCHA qui semble flotter loin a droite. Reaffirme ici avec
   !important, a la fois pour garantir la victoire sur la cascade quel que
   soit l'ordre de chargement futur, et parce que c'est deja la convention
   du reste de la feuille de style tarteaucitron pour ce type de garantie.
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.t-jpo .hero .split,
	.t-brochure .hero .split,
	.t-visio .duo,
	.t-visio .steps,
	.t-candidature .process {
		grid-template-columns: 1fr !important;
	}
}

/* Garde-fou generique : empeche tout defilement horizontal residuel, quelle
   qu'en soit la cause (marge negative, element mal contraint...). Le
   contenu doit se replier, jamais deborder silencieusement. */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

@media (max-width: 768px) {
	/* ── En-tete compact : logo + telephone ne se coupent jamais ────── */
	header.site .bar {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	header.site .bar > a:first-child {
		min-width: 0;
		flex: 0 1 auto;
	}
	header.site img {
		height: 26px;
		max-width: 100%;
	}
	header.site .tel {
		font-size: 12.5px;
		white-space: nowrap;
		flex: 0 0 auto;
	}

	/* ── Visuel .cover (brochure) : ne depasse jamais la largeur dispo ── */
	.t-brochure .cover {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
	}

	/* ── Dateboard (jpo) : le grand chiffre du jour reste dans les clous ── */
	.t-jpo .dateboard .d {
		font-size: clamp(44px, 16vw, 76px);
	}

	/* ── Formulaire pleine largeur, cibles tactiles, pas de zoom iOS ─── */
	form.lead input,
	form.lead select,
	form.lead textarea {
		width: 100%;
		font-size: 16px !important;
		min-height: 44px;
		box-sizing: border-box;
	}
	form.lead .row {
		grid-template-columns: 1fr;
	}
	.formcard .btn,
	form.lead + p .btn,
	.formcard button[type="submit"],
	.formcard input[type="submit"] {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}

	/* ── Cibles tactiles generiques ≥44px ─────────────────────────── */
	.btn {
		min-height: 44px;
	}
	.crossnav a {
		padding: 12px 18px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.faq summary {
		min-height: 44px;
		align-items: center;
	}

	/* ── Eyebrows mono : letter-spacing reduit s'il cause un debordement ── */
	.eyebrow {
		letter-spacing: 0.08em;
	}

	/* ── Metrics : pas de bordure gauche fantome une fois empile ─────── */
	.metrics {
		grid-template-columns: 1fr !important;
	}
	.metrics > div {
		border-left: none !important;
		border-top: 1px solid var(--line);
	}
	.metrics > div:first-child {
		border-top: none !important;
	}

	/* ── Badge reCAPTCHA v3 : ne recouvre jamais le formulaire ───────── */
	.formcard,
	#lp-form {
		margin-bottom: 76px;
	}
}

@media (max-width: 480px) {
	/* Sous 480px, le visuel .cover n'apporte plus assez comparé a la place
	   qu'il prend en tete de page (avant le H1 et le formulaire) : passe
	   sous le contenu principal plutot qu'au-dessus, choix documente dans
	   RAPPORT_CHOIX.md. Toujours visible (pas masque), juste reordonne. */
	.t-brochure .hero .split {
		display: flex !important;
		flex-direction: column-reverse !important;
	}
}