/* =============================================================
   pp-forms.css
   Habillage des formulaires Contact Form 7.

   Charge apres pp-tokens.css : toutes les valeurs passent par les
   variables du projet, avec une valeur de repli pour que le fichier
   reste lisible isolement et ne casse pas si un token est renomme.

   Les selecteurs sont imbriques sous .wpcf7 pour atteindre une
   specificite suffisante face aux styles de boutons d'Elementor,
   responsables du rose parasite sur le bouton d'envoi.
   ============================================================= */

/* -------------------------------------------------------------
   1. Variables locales
   Repli sur les tokens du projet. Si un nom differe dans
   pp-tokens.css, seule cette section est a corriger.
   ------------------------------------------------------------- */

.wpcf7 {
	--pp-form-ink: var(--pp-navy, #14213d);
	--pp-form-muted: var(--pp-navy-soft, #4a587a);
	--pp-form-accent: var(--pp-blue-bright, #2c7ad1);
	--pp-form-surface: var(--pp-cream, #f5f1ea);
	--pp-form-border: #d9dde6;
	--pp-form-error: #b3261e;
	--pp-form-radius: var(--pp-radius, 12px);
	--pp-form-gap: 1.5rem;
}

/* -------------------------------------------------------------
   2. Structure
   ------------------------------------------------------------- */

.wpcf7 {
	max-width: 46rem;
	color: var(--pp-form-ink);
}

.wpcf7 form > p {
	margin-block: 0 var(--pp-form-gap);
}

/* Rangee de deux champs, activee par la classe pp-form__row
   posee dans le modele du formulaire. */
.wpcf7 .pp-form__row {
	display: grid;
	gap: var(--pp-form-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.wpcf7 .pp-form__row {
		grid-template-columns: 1fr;
	}
}

.wpcf7 .pp-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* -------------------------------------------------------------
   3. Libelles
   Le text-decoration est neutralise explicitement : il provient
   d'une regle trop large heritee ailleurs dans la cascade.
   ------------------------------------------------------------- */

.wpcf7 label,
.wpcf7 .pp-form__label {
	display: block;
	margin-block-end: 0.5rem;
	color: var(--pp-form-ink);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.wpcf7 .pp-form__hint {
	display: block;
	color: var(--pp-form-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

/* Asterisque des champs obligatoires. */
.wpcf7 .pp-form__req {
	color: var(--pp-form-accent);
	margin-inline-start: 0.15em;
}

/* -------------------------------------------------------------
   4. Champs
   ------------------------------------------------------------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.875rem 1rem;
	border: 1px solid var(--pp-form-border);
	border-radius: var(--pp-form-radius);
	background-color: #fff;
	color: var(--pp-form-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7 textarea {
	min-height: 12rem;
	resize: vertical;
}

.wpcf7 select {
	appearance: none;
	padding-inline-end: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.wpcf7 ::placeholder {
	color: var(--pp-form-muted);
	opacity: 0.7;
}

.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
	border-color: var(--pp-form-muted);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--pp-form-accent);
	box-shadow: 0 0 0 3px rgb(44 122 209 / 0.18);
}

/* Focus clavier visible, y compris sur les navigateurs qui
   masquent l'outline par defaut. */
.wpcf7 :focus-visible {
	outline: 2px solid var(--pp-form-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------
   5. Cases a cocher et boutons radio
   ------------------------------------------------------------- */

.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-radio .wpcf7-list-item,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0 0 0.5rem;
}

.wpcf7 .wpcf7-list-item-label {
	color: var(--pp-form-ink);
	font-weight: 400;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	margin-inline-end: 0.5rem;
	accent-color: var(--pp-form-accent);
	vertical-align: -0.15em;
}

/* -------------------------------------------------------------
   6. Bouton d'envoi
   Selecteur volontairement specifique : les styles de boutons
   d'Elementor s'appliquent sinon au input[type=submit].
   ------------------------------------------------------------- */

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit,
.wpcf7 button[type="submit"] {
	display: inline-block;
	padding: 0.875rem 2.25rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--pp-form-accent);
	background-image: none;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover,
.wpcf7 button[type="submit"]:hover {
	background-color: var(--pp-form-ink);
	color: #fff;
}

.wpcf7 input[type="submit"]:active,
.wpcf7 .wpcf7-submit:active {
	transform: translateY(1px);
}

.wpcf7 input[type="submit"]:disabled,
.wpcf7 .wpcf7-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Ligne du bouton, pour l'aligner et menager l'espace au-dessus. */
.wpcf7 .pp-form__actions {
	margin-block-start: 2rem;
}

/* -------------------------------------------------------------
   7. Messages de validation
   ------------------------------------------------------------- */

.wpcf7 .wpcf7-not-valid {
	border-color: var(--pp-form-error);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-block-start: 0.375rem;
	color: var(--pp-form-error);
	font-size: 0.875rem;
	font-weight: 500;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--pp-form-border);
	border-radius: var(--pp-form-radius);
	background-color: var(--pp-form-surface);
	color: var(--pp-form-ink);
	font-size: 0.9375rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--pp-form-error);
	color: var(--pp-form-error);
	background-color: #fdf3f2;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--pp-form-accent);
	background-color: #eef4fc;
}

/* -------------------------------------------------------------
   8. Indicateur de chargement
   ------------------------------------------------------------- */

.wpcf7 .wpcf7-spinner {
	margin-inline-start: 0.75rem;
	background-color: var(--pp-form-muted);
}

/* -------------------------------------------------------------
   9. Mouvement reduit
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wpcf7 input,
	.wpcf7 select,
	.wpcf7 textarea,
	.wpcf7 .wpcf7-submit,
	.wpcf7 input[type="submit"] {
		transition: none;
	}
}