/* =====================================================
   Contact
===================================================== */

.contact-layout{
	display:grid;
	grid-template-columns:minmax(0,2fr) 340px;
	gap:var(--space-16);
	align-items:start;
	padding-block:var(--space-16);
}

.contact-content{
	min-width:0;
}

.contact-sidebar{
	position:sticky;
	top:calc(var(--header-height) + var(--space-8));
	display:flex;
	flex-direction:column;
	gap:var(--space-8);
}

.contact-card{
	margin: 3rem auto 1rem;
	padding: 3rem;
	background:var(--color-lightbrown);
	border-radius:var(--radius);
}

.contact-card h3{
	margin-bottom:var(--space-6);
	margin-bottom: 1rem;
	color: var(--color-white);
}

.contact-details{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:var(--space-8);
}

.contact-details li{
	margin:0;
}

.contact-details strong{
	margin-bottom:var(--space-2);
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--color-crown);
}

.contact-details a{
	text-decoration:none;
	color:inherit;
	transition:color .2s;
}

.contact-details a:hover{
	color:var(--color-crown);
}

.contact-card .button{
	width:100%;
	justify-content:center;
}

/* =====================================================
   Contact Form 7
===================================================== */

.wpcf7{
	margin-top:var(--space-12);
}

.wpcf7 p{
	margin-bottom:var(--space-8);
}

.wpcf7 label{
	display:block;
	font-weight:600;
	margin-bottom:var(--space-2);
}

.wpcf7 input:not([type="submit"]),
.wpcf7 textarea{
	width:100%;
}

.wpcf7 textarea{
	min-height:180px;
	resize:vertical;
}

.wpcf7-submit{
	width:100%;
}

.wpcf7-spinner{
	display:none;
}

.wpcf7 form.sent .wpcf7-response-output{
	margin-top:var(--space-8);
	padding:var(--space-6);
	border:none;
	border-radius:var(--radius);
	background:#e8f7ea;
	color:#205c2c;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{
	margin-top:var(--space-8);
	padding:var(--space-6);
	border:none;
	border-radius:var(--radius);
	background:#fdecec;
	color:#842029;
}


/* =====================================================
   Formulaire de contact
   -----------------------------------------------------
   L'apparence des champs vient de forms.css, comme celle
   des pré-inscriptions. On ne décrit ici que ce qui est
   propre au contact : la largeur des champs, les messages
   de résultat et le piège à robots.
===================================================== */

.contact-form{
	margin-top:var(--space-32);
}

.contact-form h2{
	margin-top:0;
}

/*
| Les champs occupent toute la largeur de leur colonne : celle de la
| grille .form-row pour le nom et l'email, celle du bloc entier pour le
| sujet et le message. Sans box-sizing, le rembourrage intérieur s'ajoute
| à la largeur et fait déborder le champ de sa colonne.
*/
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
	width:100%;
	box-sizing:border-box;
}

/*
| Champ leurre : invisible pour un humain, remplissable par un robot.
| Ni display:none ni visibility:hidden, que certains robots détectent —
| le champ est bien rendu, simplement hors de l'écran.
*/
.contact-form__trap{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.contact-form__notice{
	margin-bottom:var(--space-24);
	padding:var(--space-16);
	border-left:4px solid var(--color-primary);
	background:rgba(255,255,255,.04);
}

.contact-form__notice--success{
	border-left-color:var(--color-success,#4caf6d);
}

.contact-form__notice--error{
	border-left-color:var(--color-danger);
}

/*
| Un champ refusé par le serveur se signale par sa bordure, sans compter
| sur un message qu'il faudrait aller chercher plus haut dans la page.
*/
.contact-form [aria-invalid="true"]{
	border-color:var(--color-danger);
	box-shadow:0 0 0 3px rgba(166,23,26,.12);
}

.contact-form__hint{
	margin:var(--space-6) 0 0;
	color:var(--color-danger);
	font-size:var(--fs-sm);
}

.contact-form__legal{
	margin:0;
	color:var(--color-textdarker);
	font-size:var(--fs-sm);
}

@media (max-width:768px){

	.contact-form__legal{
		text-align:left;
	}

}

/* =====================================================
   Responsive
===================================================== */

@media (max-width:1024px){

	.contact-layout{
		grid-template-columns:1fr;
	}

	.contact-sidebar{
		position:static;
		order:-1;
	}

}

@media (max-width:768px){

	.contact-layout{
		gap:var(--space-10);
		padding-block:var(--space-10);
	}

	.contact-card{
		padding:var(--space-6);
	}

}