/*
 * Habillage du formulaire de contact (Contact Form 7).
 *
 * theme.css est le CSS Tailwind compilé de la maquette, copié tel quel depuis repo-source/dist/ :
 * on n'y écrit jamais rien à la main, il serait écrasé au prochain rafraîchissement du build.
 * Ce fichier séparé est chargé après lui.
 *
 * L'extension produit son propre balisage (<input class="wpcf7-form-control wpcf7-text">…) : elle
 * ne peut pas porter les longues chaînes de classes Tailwind de la maquette. Les règles ci-dessous
 * reproduisent donc, en CSS, l'apparence exacte des champs de repo-source/src/components/ui/
 * (input.tsx, textarea.tsx, select.tsx) — mesurée sur le rendu réel de la maquette :
 * hauteur 40 px, coins arrondis calc(--radius - 2px) = 14 px, bordure 1 px hsl(--input),
 * fond blanc, texte hsl(--foreground), remplissage 8 px / 12 px, corps 16 px puis 14 px dès 768 px.
 *
 * Tout est préfixé par .wpcf7 : aucune règle ne peut déborder sur le reste de la page.
 */

/* Le conteneur que l'extension pose autour de chaque champ est un <span> : il faut le passer en
   bloc pour que le champ occupe toute la largeur sans hériter de l'interligne d'une ligne de texte. */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.25rem;
	color: hsl(var(--foreground));
	background-color: hsl(var(--background));
	border: 1px solid hsl(var(--input));
	border-radius: calc(var(--radius) - 2px);
	box-shadow: none;
}

/* Champs sur une ligne : hauteur fixe et corps de texte « text-base md:text-sm » de la maquette. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"] {
	height: 2.5rem;
	font-size: 1rem;
}

@media (min-width: 768px) {
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"],
	.wpcf7 input[type="date"],
	.wpcf7 input[type="number"] {
		font-size: 0.875rem;
	}
}

/* La liste déroulante de la maquette est un composant sur mesure : on redonne à la liste native
   la même hauteur, le même corps de texte et le même chevron, dessiné à droite. */
.wpcf7 select {
	height: 2.5rem;
	font-size: 0.875rem;
	padding-right: 2.25rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a3538' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem 1rem;
}

.wpcf7 textarea {
	font-size: 0.875rem;
	min-height: 5rem;
	resize: vertical;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: hsl(var(--muted-foreground));
	opacity: 1;
}

/* Liseré de mise au point identique à celui de la maquette (ring-2 + ring-offset-2). */
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* Champ refusé à la validation. Le sélecteur nomme la balise pour peser plus lourd que la règle
   d'apparence ci-dessus, qui cible input[type="…"] : sans cela, seule la liste déroulante rougirait. */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
	border-color: hsl(var(--destructive));
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: hsl(var(--destructive));
}

/* Message de retour après envoi : l'extension l'affiche encadré de bleu, on le remet aux couleurs
   du thème (le sélecteur reprend celui de l'extension pour le surcharger sans !important). */
.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	border: 1px solid hsl(var(--primary));
	border-radius: calc(var(--radius) - 2px);
	color: hsl(var(--primary));
	background-color: hsl(var(--muted));
}

/* Envoi réussi : l'extension encadre son message de vert vif, on le ramène au vert du thème.
   Le sélecteur reprend exactement le sien (form.sent) pour le surcharger sans !important. */
.wpcf7 form.sent .wpcf7-response-output {
	border-color: hsl(var(--primary));
	color: hsl(var(--primary));
	background-color: hsl(var(--muted));
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: hsl(var(--destructive));
	color: hsl(var(--destructive));
	background-color: hsl(var(--background));
}

/*
 * Champ piège anti-robot (« honeypot »).
 *
 * Le gabarit livré du formulaire (docs/livraison/formulaire-cf7-onglet-formulaire.txt) contient un
 * champ texte supplémentaire, `freeva_piege`, qu'aucun visiteur ne doit voir ni atteindre : un
 * robot qui remplit tous les champs du formulaire le remplit aussi, et l'envoi est alors refusé
 * comme pourriel (freeva_formulaire_piege(), functions.php).
 *
 * Pourquoi ce masquage-là, et pas `display: none` :
 * 1. Il faut que le champ reste un champ *rendu*. Beaucoup de robots ne lisent que le HTML et ne
 *    verront rien ; les plus évolués pilotent un vrai navigateur et sautent les champs dont
 *    `offsetParent` est nul — ce qui est exactement le cas avec `display: none` ou
 *    `visibility: hidden`. Sorti du cadre par un positionnement absolu, le champ reste « rendu »
 *    pour eux : le piège fonctionne sur les deux familles de robots.
 * 2. `position: absolute` le retire du flux : il ne peut décaler ni le champ au-dessus ni le
 *    bouton en dessous, à aucune largeur d'écran.
 * 3. Le masquage vit ici, dans la feuille du thème, et non en style en ligne dans le gabarit :
 *    le client ne peut pas le casser en recollant le gabarit, et un robot qui ne charge pas la
 *    feuille de style n'a aucun indice que ce champ est un piège.
 *
 * L'invisibilité à l'œil ne suffit pas : le champ doit aussi sortir du parcours clavier
 * (`tabindex="-1"`) et de l'arbre d'accessibilité (`aria-hidden="true"`) — les deux sont portés
 * par le gabarit. `pointer-events: none` ferme le dernier chemin qui restait, le clic.
 */
.wpcf7 .freeva-piege {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Le champ hérite sinon de l'apparence des champs visibles ci-dessus (hauteur 2,5 rem,
   largeur 100 %) : on le ramène à la taille de son conteneur, qui ne laisse rien dépasser. */
.wpcf7 .freeva-piege input[type="text"] {
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	border: 0;
}