/* =====================================================================
   Hierotext - page de contact (lot 20, 08/11/2026)
   Même charte que la page de commande (Verdana, texte bleu nuit, sable,
   boutons #d48411). Tout est limité au bloc .hx-contact.
   ===================================================================== */

.hx-contact {
	--hx-accent: #d48411;
	--hx-accent-fonce: #a8680d;
	--hx-sable: #faebd7;
	--hx-trait: #dccbb0;
	--hx-texte: #0000a0;
	--hx-gris: #5d5d6e;
	--hx-vert: #1a7917;
	--hx-rouge: #b3261e;
	--hx-rayon: 8px;
	max-width: 680px;
	margin: 3.5em auto 5em auto;
	padding: 0 20px;
	color: var(--hx-texte);
	line-height: 1.5;
	text-align: left;
}
.hx-contact *, .hx-contact *::before, .hx-contact *::after { box-sizing: border-box; }

.hx-contact h1 {
	margin: 0 0 .6em 0;
	font-size: 1.6em;
	font-weight: normal;
	text-align: left;
}
.hx-contact p { margin: 0 0 .8em 0; }
.hx-contact .hx-intro { margin-bottom: 1.6em; }

.hx-contact-carte {
	padding: 1.6em;
	border: 1px solid var(--hx-trait);
	border-radius: var(--hx-rayon);
	background: var(--hx-sable);
}

.hx-contact-rangee { display: flex; gap: 1em; }
.hx-contact-rangee .hx-champ { flex: 1 1 0; min-width: 0; }

.hx-champ { margin-bottom: 1.1em; }
.hx-champ label { display: block; margin-bottom: .3em; font-weight: bold; }
.hx-contact .hx-champ input,
.hx-contact .hx-champ textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: .6em .7em;
	border: 1px solid var(--hx-trait);
	border-radius: 6px;
	background: #fff;
	color: #000;
	font: inherit;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	box-shadow: none;
}
.hx-contact .hx-champ textarea { min-height: 11em; resize: vertical; }
.hx-contact .hx-champ input:focus,
.hx-contact .hx-champ textarea:focus {
	outline: 2px solid var(--hx-accent);
	outline-offset: 0;
	border-color: var(--hx-accent);
}
.hx-champ.hx-erreur input,
.hx-champ.hx-erreur textarea { border-color: var(--hx-rouge); background: #fff6f5; }
.hx-champ-msg { margin-top: .3em; color: var(--hx-rouge); font-size: .92em; }

.hx-contact-note { color: var(--hx-gris); font-size: .9em; }

.hx-contact-alerte {
	margin-bottom: 1.2em;
	padding: .8em 1em;
	border-radius: 6px;
	border: 1px solid var(--hx-rouge);
	background: #fdecea;
	color: var(--hx-rouge);
}

.hx-contact-captcha { margin-bottom: 1.2em; }

.hx-contact .hx-envoyer {
	display: inline-block;
	margin: 0;
	padding: .7em 2.2em;
	border: 0;
	border-radius: 6px;
	background: var(--hx-accent);
	color: #fff;
	font: inherit;
	font-weight: bold;
	cursor: pointer;
}
.hx-contact .hx-envoyer:hover,
.hx-contact .hx-envoyer:focus-visible { background: var(--hx-accent-fonce); }

/* Champ piège : invisible pour les visiteurs, rempli par les robots */
.hx-contact-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Message envoyé */
.hx-contact-ok { border-color: var(--hx-vert); background: #f1f8f0; }
.hx-contact-ok .hx-ok-titre { color: var(--hx-vert); font-weight: bold; font-size: 1.1em; }
.hx-contact-recap {
	margin: 1em 0;
	padding: .8em 1em;
	border-radius: 6px;
	background: #fff;
	color: #000;
	overflow-wrap: anywhere;
}
.hx-contact-recap dt { font-weight: bold; color: var(--hx-texte); }
.hx-contact-recap dd { margin: 0 0 .7em 0; }
.hx-contact-recap dd:last-child { margin-bottom: 0; }

/* Smartphone */
@media screen and (max-width: 889.98px) {
	.hx-contact { margin-top: 1.2em; margin-bottom: 2.5em; padding: 0 14px; }
	.hx-contact h1 { font-size: 1.35em; }
	.hx-contact-carte { padding: 1.1em; }
	.hx-contact .hx-champ input,
	.hx-contact .hx-champ textarea { font-size: 16px; } /* évite le zoom automatique sur iPhone */
}
@media screen and (max-width: 600px) {
	.hx-contact-rangee { display: block; }
	.hx-contact .hx-envoyer { display: block; width: 100%; padding: .9em 1em; }
}