/**
 * Bloc de demande de devis des archives ville / département / région.
 *
 * Rendu par template-parts/piscinistes/devis-form.php, juste sous le hero.
 *
 * Contrainte de conception : ce bloc est placé AVANT la liste de piscinistes, il repousse donc
 * les fiches vers le bas. La mise en deux colonnes sur desktop (accroche à gauche, formulaire à
 * droite) sert précisément à limiter sa hauteur — empilées, les deux parties feraient le double.
 *
 * ⚠️ Le formulaire lui-même est rendu par le plugin externe [mnp_form] : son DOM et sa hauteur
 * ne sont pas sous notre contrôle. On ne stylise donc que le conteneur, sans présumer de sa
 * structure interne. `.dv-devis-form` ne fixe aucune hauteur pour ne pas tronquer un formulaire
 * multi-étapes.
 */

.dv-devis-section {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	padding: var(--space-xl) var(--space-md);
	/* Compense le header pour que l'ancre #devis ne passe pas sous la barre fixe. */
	scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.dv-devis-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
}

@media (min-width: 900px) {
	.dv-devis-inner {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--space-xl);
	}
}

.dv-devis-title {
	font-family: var(--font-family-heading);
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	line-height: 1.25;
	color: var(--bg-white);
	margin: 0 0 var(--space-sm);
}

.dv-devis-text {
	font-family: var(--font-family-primary);
	font-size: 0.975rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

.dv-devis-form {
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-lg);
}

/* Le plugin peut sortir un formulaire large ; on borne sans jamais rogner en hauteur. */
.dv-devis-form :is(input, select, textarea) {
	max-width: 100%;
}

/*
 * Compactage mobile (2026-07-29).
 *
 * En dessous de 900 px le bloc s'empile : accroche puis formulaire. Chaque pixel gagné sur
 * l'accroche fait remonter le formulaire — donc la conversion — vers le haut de l'écran. On
 * réduit les espacements et la taille du texte d'accroche, sans jamais toucher au formulaire
 * lui-même : ses champs restent à taille pleine (16 px minimum sur mobile, sinon iOS zoome
 * automatiquement au focus et casse la mise en page).
 */
@media (max-width: 899px) {
	.dv-devis-section {
		padding: var(--space-lg) var(--space-md);
	}

	.dv-devis-inner {
		gap: var(--space-md);
	}

	/*
	 * Titre resserré : sur les pages département et région, dont le hero est plus riche
	 * (fil d'Ariane interne, statistiques, bouton vers la liste), ces quelques dizaines de
	 * pixels décident si le premier champ du formulaire entre ou non dans l'écran.
	 */
	.dv-devis-title {
		font-size: 1.15rem;
		margin-bottom: 0.4rem;
	}

	.dv-devis-text {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.dv-devis-form {
		padding: var(--space-md);
	}
}

/**
 * CTA de l'empty-state — remonte vers le formulaire du haut.
 *
 * Remplace le second [mnp_form] qui y était posé : une seule instance du shortcode par page,
 * sinon les identifiants HTML du plugin sont dupliqués.
 */
.empty-state-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	padding: 0.75rem 1.5rem;
	background: var(--primary);
	color: var(--bg-white);
	font-family: var(--font-family-primary);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: background 0.2s ease;
}

.empty-state-cta:hover,
.empty-state-cta:focus {
	background: var(--primary-dark);
	color: var(--bg-white);
}