/**
 * Formulaire de contact CFDT ASNR.
 */

.asnr-contact {
	--asnr-orange-lisible: var(--wp--preset--color--accent-2, #C24A12);
	--asnr-texte: var(--wp--preset--color--contrast, #555554);
	--asnr-secondaire: var(--wp--preset--color--accent-5, #6B6B6A);
	--asnr-erreur: #B32D2E;
	max-width: 40rem;
	color: var(--asnr-texte);
}

.asnr-contact__champ {
	margin-bottom: 1.25rem;
}

.asnr-contact__champ label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.asnr-contact__requis {
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--asnr-secondaire);
}

.asnr-contact__champ input,
.asnr-contact__champ textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--asnr-secondaire);
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var(--asnr-texte);
}

.asnr-contact__champ input:focus-visible,
.asnr-contact__champ textarea:focus-visible {
	outline: 3px solid var(--asnr-orange-lisible);
	outline-offset: 2px;
}

/* --- Erreurs ---------------------------------------------------------- */

.asnr-contact__champ--erreur input,
.asnr-contact__champ--erreur textarea {
	border: 2px solid var(--asnr-erreur);
}

.asnr-contact__erreur {
	display: block;
	margin-top: 0.35rem;
	color: var(--asnr-erreur);
	font-size: 0.9rem;
	font-weight: 700;
}

/* Le message d'erreur ne repose pas uniquement sur la couleur : un symbole
   le precede, conformement au critere RGAA 3.1. */
.asnr-contact__erreur::before {
	content: "\26A0";
	margin-right: 0.35rem;
}

.asnr-contact__erreurs {
	border-left: 4px solid var(--asnr-erreur);
	background: #fdf0f0;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.asnr-contact__erreurs ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.asnr-contact__erreurs a {
	color: var(--asnr-erreur);
}

/* --- Succes ----------------------------------------------------------- */

.asnr-contact__succes {
	border-left: 4px solid #1a7f37;
	background: #f0f7f1;
	padding: 1rem 1.25rem;
	font-weight: 700;
}

/* --- Divers ----------------------------------------------------------- */

.asnr-contact__mentions {
	font-size: 0.85rem;
	color: var(--asnr-secondaire);
	margin: 1.5rem 0;
}

/* Piege a robots : retire de l'affichage sans utiliser display:none, que
   certains automates savent detecter. */
.asnr-contact__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.asnr-contact .asnr-bouton {
	display: inline-block;
	background: var(--asnr-orange-lisible);
	color: #fff;
	border: 0;
	padding: 0.7rem 1.8rem;
	font-family: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9rem;
	cursor: pointer;
}

.asnr-contact .asnr-bouton:hover,
.asnr-contact .asnr-bouton:focus-visible {
	background: var(--asnr-texte);
}