/* PJ Contact — styles du formulaire de contact.
 * Hérite de la charte commune .pj-calc-* (source : pj-calculettes/assets/style.css,
 * doc : pjcourtage-hub/charte-visuelle.md). Préfixe propre .pj-contact-* pour
 * les éléments spécifiques au formulaire.
 */

.pj-contact-form {
	/* Redéclaration des variables de charte : le bouton hérité
	 * .pj-calc-btn-primary les consomme et n'est PAS dans le scope .pj-calc
	 * (même raison que .pj-calc-lead-modal dans pj-calculettes). */
	--pj-bleu:       #3550a0;
	--pj-bleu-hover: #4159a0;
	--pj-orange:     #ff6c00;
	--pj-texte:      #2c3e50;
	--pj-mute:       #6b7c85;
	--pj-gris-input: #50646e;
	--pj-gris-bord:  #d4e8ee;
	--pj-gris-fond:  #fafcfd;
	--pj-fond:       #ffffff;

	font-family: 'Lato', Helvetica, Arial, sans-serif;
	color: var(--pj-texte);
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.5;
	box-sizing: border-box;

	/* Carte à fond clair : le formulaire reste lisible quel que soit le fond
	 * de la section Divi hôte (image business-coach, couleur, dégradé). Sans
	 * cette surface, nos textes foncés (labels, RGPD) passent directement sur
	 * le fond de section et deviennent illisibles. */
	background: var(--pj-fond);
	border: 1px solid var(--pj-gris-bord);
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(53, 80, 160, 0.10);
	padding: 1.5rem;
}
.pj-contact-form *, .pj-contact-form *::before, .pj-contact-form *::after { box-sizing: border-box; }

.pj-contact-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}
.pj-contact-row > label {
	font-size: 0.95rem;
	color: var(--pj-texte);
	font-weight: 700;
}
.pj-contact-required { color: var(--pj-orange); }

/* FIX CRITIQUE (.claude-rules §8) : couleur + fond explicites sur les champs.
 * L'héritage CSS Divi rend le texte saisi illisible — on ne dépend PAS du thème. */
.pj-contact-input,
.pj-contact-textarea {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--pj-gris-input);
	border-radius: 6px;
	background: var(--pj-gris-fond);   /* fond clair explicite (contraste sur la carte) */
	color: var(--pj-texte);            /* texte foncé explicite */
	-webkit-appearance: none;
	appearance: none;
}
.pj-contact-input::placeholder,
.pj-contact-textarea::placeholder { color: var(--pj-mute); }
.pj-contact-input:focus,
.pj-contact-textarea:focus {
	outline: none;
	border-color: var(--pj-bleu);
	box-shadow: 0 0 0 3px rgba(53, 80, 160, 0.15);
}
.pj-contact-textarea { resize: vertical; min-height: 140px; }

/* Consentement RGPD : case + libellé sur une ligne. */
.pj-contact-rgpd > label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.92rem;
}
.pj-contact-rgpd input { margin-top: 0.2rem; flex: 0 0 auto; }

/* Honeypot : caché hors-viewport. JAMAIS display:none ni visibility:hidden
 * (détectables par certains bots / gérés différemment par l'autofill). */
.pj-contact-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Actions */
.pj-contact-actions { margin-top: 0.5rem; }
.pj-contact-submit { width: 100%; }
@media (min-width: 480px) {
	.pj-contact-submit { width: auto; min-width: 220px; }
}

/* Messages de feedback (succès / erreur). */
.pj-contact-msg {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.95rem;
}
.pj-contact-msg[data-niveau="success"] {
	background: #e8f5ec;
	color: #1b7a4a;
	border: 1px solid #1b7a4a;
}
.pj-contact-msg[data-niveau="error"] {
	background: #fdeaea;
	color: #c70307;
	border: 1px solid #c70307;
}

/* Champ invalide (validation JS). */
.pj-contact-input.pj-contact-invalid,
.pj-contact-textarea.pj-contact-invalid {
	border-color: #c70307;
	box-shadow: 0 0 0 3px rgba(199, 3, 7, 0.12);
}