/* Habillage KAPT du formulaire Contact Form 7.
 *
 * Pourquoi un fichier CSS a part, ecrit a la main, et pas des classes Tailwind ?
 * Le contenu d'un formulaire Contact Form 7 vit dans la BASE DE DONNEES (le client
 * le modifie depuis Contact > Formulaires), pas dans un fichier du theme. Tailwind
 * n'analyse que les fichiers du theme : toute classe utilitaire ecrite dans le
 * formulaire serait absente du CSS compile, et le formulaire s'afficherait nu.
 * Les couleurs proviennent quand meme des memes variables que le reste du site
 * (definies dans assets/css/kapt.css), il n'y a donc aucune valeur dupliquee.
 *
 * Charge uniquement sur les pages qui contiennent un formulaire (voir
 * kapt_assets_formulaire() dans functions.php).
 * Les classes kapt-cf7-* sont posees par le contenu du formulaire, decrit dans
 * docs/formulaire-contact-form-7.md.
 */

.kapt-cf7 {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Deux champs cote a cote a partir de la tablette, empiles sur telephone. */
.kapt-cf7-duo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.kapt-cf7-duo {
		grid-template-columns: 1fr 1fr;
	}
}

.kapt-cf7-champ,
.kapt-cf7-bloc {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.kapt-cf7-champ > label,
.kapt-cf7-intitule {
	font-weight: 500;
	font-size: 0.875rem;
	color: hsl(var(--kapt-slate));
}

.kapt-cf7-etoile {
	color: hsl(var(--kapt-crimson));
}

/* Champs de saisie. */
.kapt-cf7 input[type="text"],
.kapt-cf7 input[type="email"],
.kapt-cf7 input[type="tel"],
.kapt-cf7 select,
.kapt-cf7 textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.625rem 0.75rem;
	font: inherit;
	font-size: 0.9375rem;
	color: hsl(var(--kapt-slate));
	background-color: #fff;
	border: 1px solid hsl(var(--kapt-silver) / 0.6);
	border-radius: calc(var(--radius) - 2px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kapt-cf7 textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.kapt-cf7 input::placeholder,
.kapt-cf7 textarea::placeholder {
	color: hsl(var(--muted-foreground));
}

.kapt-cf7 input[type="text"]:focus,
.kapt-cf7 input[type="email"]:focus,
.kapt-cf7 input[type="tel"]:focus,
.kapt-cf7 select:focus,
.kapt-cf7 textarea:focus {
	outline: none;
	border-color: hsl(var(--kapt-crimson));
	box-shadow: 0 0 0 3px hsl(var(--kapt-crimson) / 0.12);
}

/* Cases a cocher : « Personnalisation attendue » et consentement RGPD. */
.kapt-cf7 .wpcf7-checkbox .wpcf7-list-item,
.kapt-cf7 .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.kapt-cf7-cases .wpcf7-checkbox {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.kapt-cf7-cases .wpcf7-checkbox {
		grid-template-columns: 1fr 1fr;
	}
}

.kapt-cf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: calc(var(--radius) - 4px);
	font-size: 0.875rem;
	color: hsl(var(--kapt-graphite));
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.kapt-cf7 .wpcf7-list-item label:hover {
	background-color: hsl(var(--kapt-silver) / 0.25);
}

.kapt-cf7 input[type="checkbox"] {
	margin: 0.15rem 0 0;
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	accent-color: hsl(var(--kapt-crimson));
	cursor: pointer;
}

/* Consentement RGPD : meme traitement que les autres cases, plus le lien vers la
   politique de confidentialite en rouge KAPT. */
.kapt-cf7-rgpd .wpcf7-list-item label {
	align-items: flex-start;
	border: 1px solid hsl(var(--kapt-silver) / 0.6);
	background-color: hsl(var(--kapt-pearl) / 0.6);
}

.kapt-cf7-rgpd a,
.kapt-cf7 .wpcf7-list-item a {
	color: hsl(var(--kapt-crimson));
	text-decoration: underline;
}

/* Question anti-robot : le libelle est genere par Contact Form 7 lui-meme. */
.kapt-cf7-antirobot label {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.875rem;
	color: hsl(var(--kapt-slate));
}

.kapt-cf7-antirobot input[type="text"] {
	max-width: 12rem;
}

/* Bouton d'envoi : degrade rouge de la maquette, avec l'icone « envoyer ». */
.kapt-cf7 input[type="submit"] {
	width: 100%;
	padding: 0.875rem 3rem 0.875rem 1.5rem;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	background-color: hsl(var(--kapt-crimson));
	background-image: var(--gradient-crimson),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: center center, right 1.25rem center;
	background-size: auto, 1.25rem 1.25rem;
	border: 0;
	border-radius: calc(var(--radius) - 2px);
	cursor: pointer;
	transition: box-shadow 0.3s ease, background-position 0.3s ease;
}

.kapt-cf7 input[type="submit"]:hover {
	box-shadow: var(--shadow-glow);
	background-position: center center, right 1rem center;
}

.kapt-cf7 input[type="submit"]:disabled {
	cursor: progress;
	opacity: 0.7;
}

/* Etat « envoi en cours » (l'animation native de Contact Form 7). */
.kapt-cf7 .wpcf7-spinner {
	margin: 0 auto;
}

/* Messages : erreurs de champ, message global, confirmation. */
.kapt-cf7 .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	color: hsl(var(--destructive));
}

.kapt-cf7 .wpcf7-not-valid {
	border-color: hsl(var(--destructive));
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1rem;
	font-size: 0.9375rem;
	border-width: 1px;
	border-style: solid;
	border-radius: calc(var(--radius) - 2px);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	color: hsl(var(--destructive));
	border-color: hsl(var(--destructive) / 0.4);
	background-color: hsl(var(--destructive) / 0.06);
}

.wpcf7 form.sent .wpcf7-response-output {
	color: hsl(142 60% 26%);
	border-color: hsl(142 60% 26% / 0.35);
	background-color: hsl(142 60% 26% / 0.07);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	color: hsl(var(--kapt-slate));
	border-color: hsl(var(--kapt-silver));
	background-color: hsl(var(--kapt-pearl));
}