/* ==========================================================================
   Yellow — habillage Contact Form 7
   Porté sous .ylw, comme le reste. CF7 enveloppe chaque champ dans un
   <span class="wpcf7-form-control-wrap"> qui casse la mise en page tant
   qu'on ne le passe pas en bloc.
   ========================================================================== */

.ylw .wpcf7 { margin: 0; }
.ylw .wpcf7 form { display: flex; flex-direction: column; gap: var(--ylw-s-4); }

/* le conteneur que CF7 ajoute autour de chaque champ */
.ylw .wpcf7-form-control-wrap { display: block; width: 100%; }

/* les contrôles héritent du style du design system */
.ylw .wpcf7 input[type="text"],
.ylw .wpcf7 input[type="email"],
.ylw .wpcf7 input[type="tel"],
.ylw .wpcf7 select,
.ylw .wpcf7 textarea {
	font-family: var(--ylw-body);
	font-size: 15px;
	padding: 12px 14px;
	min-height: 46px;
	background: var(--ylw-canvas);
	border: 1px solid var(--ylw-line-2);
	border-radius: var(--ylw-r-md);
	color: var(--ylw-ink);
	width: 100%;
	min-width: 0;
	transition: border-color 180ms ease;
}
.ylw .wpcf7 textarea { resize: vertical; min-height: 86px; }

@media (hover: hover) and (pointer: fine) {
	.ylw .wpcf7 input[type="text"]:hover,
	.ylw .wpcf7 input[type="email"]:hover,
	.ylw .wpcf7 select:hover,
	.ylw .wpcf7 textarea:hover { border-color: var(--ylw-accent-deep); }
}

/* case de consentement */
.ylw .field-consent { flex-direction: row; align-items: flex-start; gap: var(--ylw-s-3); font-size: 14px; color: var(--ylw-ink-3); line-height: 1.5; }
.ylw .field-consent .wpcf7-form-control-wrap { display: inline-block; width: auto; flex: 0 0 auto; }
.ylw .field-consent input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin-top: 2px; accent-color: var(--ylw-accent-deep); }
.ylw .field-consent .wpcf7-list-item { margin: 0; }

/* bouton : CF7 rend un <input type="submit"> */
.ylw .wpcf7 input[type="submit"] { -webkit-appearance: none; appearance: none; width: auto; }

/* états de validation — rouge choisi pour rester lisible sur le fond crème */
.ylw .wpcf7 .wpcf7-not-valid { border-color: #B3261E; }
.ylw .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #B3261E; }

/* message de retour */
.ylw .wpcf7 form .wpcf7-response-output {
	margin: var(--ylw-s-3) 0 0;
	padding: 12px 16px;
	border-width: 1px;
	border-radius: var(--ylw-r-md);
	font-size: 14px;
	line-height: 1.5;
}
.ylw .wpcf7 form.sent .wpcf7-response-output { border-color: var(--ylw-accent-deep); background: var(--ylw-tint-1); color: var(--ylw-ink); }
.ylw .wpcf7 form.invalid .wpcf7-response-output,
.ylw .wpcf7 form.unaccepted .wpcf7-response-output,
.ylw .wpcf7 form.failed .wpcf7-response-output { border-color: #B3261E; background: #FDEDEC; color: #8C1D16; }

/* le spinner de CF7 */
.ylw .wpcf7-spinner { margin: 0 0 0 var(--ylw-s-3); }

@media (prefers-reduced-motion: reduce) {
	.ylw .wpcf7 input, .ylw .wpcf7 select, .ylw .wpcf7 textarea { transition: none; }
}