/* ═══════════════════════════════════════════════════════════════════════════
   15 — DEMANDER UN DEVIS

   LA bande pétrole de l'accueil (`.fmt-section--petrole` + `.fmt-invert`) :
   pétrole uni, pleine largeur, sans photographie ni voile (décision du client).
   Promesse et coordonnées à gauche en ivoire, formulaire à droite dans une
   carte claire en surface relevée, et le sillage du kit au pied de la bande —
   le seul de la page.

   `.fmt-section`, `.fmt-invert`, `.fmt-btn` et `.fmt-sillage` viennent de
   style.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * L'accroche et la navigation pointent toutes deux `#devis` : la bande ne doit
 * pas s'arrêter collée sous la barre de navigation.
 *
 * Le pied de la bande est rallongé d'un pas : le sillage s'y loge, sous le
 * contenu, sans qu'aucun texte ne se pose jamais dessus.
 */
.fmt-devis {
	position: relative;
	padding-block-end: calc(var(--bande-y) + var(--space-24));
	scroll-margin-block-start: var(--fmt-nav-h);
}

.fmt-devis > *,
.fmt-devis .wp-block-group > * {
	margin-block: 0;
}

/* Le sillage : la grande courbe du creux du M, ivoire à 10 % sur le pétrole
   (`.fmt-invert .fmt-sillage`). Posé au pied de la bande, sur toute sa
   largeur, rembourrages compris. */
.fmt-devis .fmt-devis__sillage {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
}

/* ─── Grille ─────────────────────────────────────────────────────────────── */

/*
 * Une seule colonne jusqu'à 1024 px. En dessous, la colonne de texte tombe
 * sous 300 px face aux 400 px du formulaire : le titre s'y briserait en cinq
 * lignes. Empilé, l'ensemble se lit sans effort. Au-delà, le texte est centré
 * sur la hauteur du formulaire, comme celui de l'accroche sur son visuel.
 */
.fmt-devis .fmt-devis__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-48);
}

@media (min-width: 1024px) {
	.fmt-devis .fmt-devis__grille {
		grid-template-columns: minmax(0, 1fr) 400px;
		align-items: center;
		gap: var(--space-48);
	}
}

@media (min-width: 1180px) {
	.fmt-devis .fmt-devis__grille {
		grid-template-columns: minmax(0, 1fr) 480px;
		gap: var(--space-64);
	}
}

/* ─── Colonne de gauche ──────────────────────────────────────────────────── */

.fmt-devis .fmt-devis__texte {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

/* Le sur-titre et le titre passent en ivoire par `.fmt-invert`. La prise de
   parole pétrole de la page : le titre monte au palier `h1` (56 px). */
.fmt-devis .fmt-devis__titre {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

/* Ivoire à 64 % sur pétrole : 5,36:1. */
.fmt-devis .fmt-devis__accroche {
	max-inline-size: 30rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--lh-lead);
	color: var(--text-on-inverse-muted);
	text-wrap: pretty;
}

/* Trois lignes de contact, séparées de l'accroche par l'espace seul — plus de
   filet. La liste reste une liste ; seules les puces et le retrait
   disparaissent. L'adresse électronique reçoit le soulignement ivoire des
   liens de texte courant sur pétrole (style.css). */
.fmt-devis .fmt-devis__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-block-start: var(--space-8);
	padding-inline-start: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-ui);
	color: var(--text-on-inverse-muted);
}

/* ─── La carte du formulaire ─────────────────────────────────────────────── */

/* Elle est à l'intérieur de `.fmt-invert` : sans ses couleurs explicites, elle
   hériterait de l'ivoire de la bande et le formulaire serait illisible.
   Carte claire, rayon 4 px, sans trait ni ombre : c'est le contraste de la
   surface relevée sur le pétrole qui la détache. */
.fmt-devis .fmt-devis__carte {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-4);
	padding: clamp(var(--space-24), 3vw, var(--space-32));
	background: var(--surface-raised);
	color: var(--text-body);
}

.fmt-devis .fmt-devis__formulaire {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.fmt-devis .fmt-devis__champ {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* Produit et volume tiennent sur une ligne dès que la carte le permet : ce
   sont deux choix courts. Sous 300 px de carte, ils s'empilent plutôt que de
   tronquer « Gel musc tahara ». */
.fmt-devis .fmt-devis__paire {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-16) var(--space-12);
}

/* Libellé du `Field` du kit : capitales espacées, pétrole. */
.fmt-devis .fmt-devis__etiquette {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--petrole);
}

/*
 * Les champs, rayon 4 px, 46 px de haut comme les boutons.
 *
 * EXCEPTION ADMISE (DESIGN-SYSTEM-FRAGRANCES.md § 1) : les champs de
 * formulaire sont les seuls contenants de la section qui gardent un contour.
 * Sans lui, un champ posé sur la carte ne s'identifie plus comme champ
 * (WCAG 1.4.11, contraste des composants d'interface). Le filet est donc en
 * pétrole à 64 % — 4,08:1 sur le fond du champ, 3,88:1 contre la carte,
 * au-dessus des 3:1 exigés ; le voile de 18 % du kit n'en tiendrait que
 * 1,4:1. Il passe en
 * pétrole plein au survol et au focus ; le halo cuivre du focus clavier
 * (style.css) s'y ajoute.
 *
 * 16 px de corps : en dessous, Safari sur iPhone agrandit la page au focus.
 */
.fmt-devis .fmt-devis__saisie {
	inline-size: 100%;
	block-size: 46px;
	padding: 0 var(--space-12);
	border: var(--hairline) solid var(--border-champ);
	border-radius: var(--radius-4);
	background: var(--ivoire-clair);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-ui);
	color: var(--text-body);
	transition: border-color var(--dur-quick) var(--ease-soft);
}

/* Placer le chevron à 16 px du bord, avec une zone libre pour le texte. */
.fmt-devis .fmt-devis__saisie--choix {
	appearance: none;
	padding-inline-end: var(--space-32);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23143c40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-16) center;
	background-size: 16px 16px;
}

.fmt-devis .fmt-devis__saisie::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

/* Survol et focus : le contour du champ (exception admise ci-dessus) passe
   en pétrole plein. */
.fmt-devis .fmt-devis__saisie:hover,
.fmt-devis .fmt-devis__saisie:focus {
	border-color: var(--petrole);
}

/* La maquette bloque le redimensionnement du champ « Votre projet ». On le
   laisse s'agrandir verticalement : un revendeur qui décrit trois senteurs et
   deux conditionnements ne doit pas écrire dans une fenêtre de trois lignes. */
.fmt-devis .fmt-devis__saisie--long {
	block-size: auto;
	min-block-size: 46px;
	padding: var(--space-12);
	line-height: var(--lh-body);
	resize: vertical;
}

/*
 * Le bouton principal en pétrole plein. Il est dans `.fmt-invert`, qui passe
 * l'action principale en ivoire — invisible sur la carte claire : on la
 * rétablit ici. Le filet d'un pixel de `.fmt-btn` prend la couleur du fond du
 * bouton, comme partout dans style.css : ce n'est pas un contour visible.
 */
.fmt-devis .fmt-devis__carte .fmt-devis__envoi {
	inline-size: 100%;
	margin-block-start: var(--space-8);
	background: var(--petrole);
	border-color: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-devis .fmt-devis__carte .fmt-devis__envoi:hover {
	background: var(--petrole-survol);
	border-color: var(--petrole-survol);
	color: var(--text-on-inverse);
}

.fmt-devis .fmt-devis__carte .fmt-devis__envoi:active {
	background: var(--petrole-appui);
	border-color: var(--petrole-appui);
}

/* Texte discret sur la surface relevée : 6,05:1.

   La mention est par ailleurs un enfant du `<form>`, qui n'est pas un groupe :
   la neutralisation des marges de flux déclarée en tête de feuille ne l'atteint
   pas, d'où la marge écrite en toutes lettres. */
.fmt-devis .fmt-devis__mention {
	margin: var(--space-4) 0 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--lh-caption);
	color: var(--text-muted);
	text-align: center;
	text-wrap: pretty;
}

.fmt-devis .fmt-devis__retour {
	margin: 0 0 var(--space-16);
	padding: var(--space-12) var(--space-16);
	border-radius: var(--radius-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-body);
}

.fmt-devis .fmt-devis__retour--succes {
	background: rgba(32, 100, 76, 0.12);
	color: var(--petrole);
}

.fmt-devis .fmt-devis__retour--erreur {
	background: rgba(162, 65, 45, 0.12);
	color: #713326;
}