/* ===========================================================
   Corrections de responsivité mobile partagées par les 3 outils
   (.cvgen-root, .facgen-root, .lgen-root). Chargé après les CSS
   propres à chaque outil pour pouvoir les surcharger proprement.
   =========================================================== */

/* Empêche le zoom automatique iOS Safari au focus d'un champ
   (déclenché par un font-size < 16px). */
@media (max-width: 900px) {
	.cvgen-root input[type="text"],
	.cvgen-root input[type="email"],
	.cvgen-root textarea,
	.facgen-root input[type="text"],
	.facgen-root input[type="number"],
	.facgen-root input[type="date"],
	.facgen-root textarea,
	.lgen-root input[type="text"],
	.lgen-root textarea {
		font-size: 16px;
	}
}

/* Tablette / grand mobile : on resserre les marges et on désactive
   le "sticky" de l'aperçu (il n'a de sens qu'à côté du formulaire ;
   une fois les colonnes empilées, il resterait collé en haut de
   l'écran pendant tout le défilement du formulaire, ce qui gêne
   plus qu'il n'aide). */
@media (max-width: 900px) {
	.cvgen-root, .facgen-root, .lgen-root {
		padding: 18px 16px;
		border-radius: 12px;
	}
	.cvgen-panel--preview,
	.facgen-panel--preview,
	.lgen-panel--preview {
		position: static;
	}
	.cvgen-preview-wrap,
	.facgen-preview-wrap,
	.lgen-preview-wrap {
		max-height: 70vh;
	}
	.cvgen-panel--form,
	.facgen-panel--form,
	.lgen-panel--form {
		padding: 18px;
	}
}

/* Petit mobile : boutons pleine largeur et faciles à toucher,
   navigation qui ne déborde jamais, photo/logo qui ne s'écrase pas. */
@media (max-width: 560px) {
	.cvgen-root h2, .lgen-root h2 { font-size: 1.1rem; }
	.facgen-root h2 { font-size: 1rem; }

	.cvgen-nav, .lgen-nav {
		flex-wrap: wrap;
		gap: 10px;
	}
	.cvgen-nav .cvgen-btn, .lgen-nav .lgen-btn {
		flex: 1 1 45%;
		min-height: 46px;
		text-align: center;
	}

	.cvgen-photo-upload, .facgen-logo-upload {
		flex-wrap: wrap;
	}

	.cvgen-btn, .facgen-btn, .lgen-btn {
		min-height: 44px; /* cible tactile confortable */
	}

	/* Étape "Choisissez votre design" (CV) : vignettes un peu plus
	   grandes pour rester lisibles et faciles à toucher. */
	.cvgen-template-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}

	/* Facture : le tableau de lignes en grille fixe (désignation /
	   qté / prix / montant / suppression) est illisible sur un petit
	   écran — on l'empile en 2 colonnes : désignation sur toute la
	   largeur, puis qté+prix, puis montant+suppression. */
	.facgen-table-header { display: none; }
	.facgen-lines .facgen-line-row {
		grid-template-columns: 1fr 1fr;
		gap: 6px 10px;
		padding: 10px;
		border: 1px solid var(--facgen-border, #e2e8f0);
		border-radius: 8px;
	}
	.facgen-lines .facgen-line-row > *:first-child {
		grid-column: 1 / -1;
	}
	.facgen-line-amount { align-self: center; }
	.facgen-line-remove { justify-self: end; align-self: center; }

	/* Lettres : la grille de recherche/catégories reste lisible en
	   pleine largeur, et la liste de modèles garde une hauteur
	   raisonnable pour ne pas noyer le reste du formulaire. */
	.lgen-letter-grid { max-height: 340px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.lgen-category-tabs { gap: 6px; }
	.lgen-category-tab { padding: 5px 10px; font-size: 0.75rem; }
}