/* ====== PAGE - FORMULAIRE DE CONTACT ====== */

.formulaire,
.formulaire_contact {
    max-width		: 600px;
    margin			: 30px auto;
    display			: flex;
    flex-direction	: column;
    gap				: 20px;
}

.formulaire_bloc,
.champ_formulaire {
	display			: flex;
	flex-direction	: column;
}

.formulaire_bloc label,
.champ_formulaire label {
	margin-bottom	: 5px;
	font-weight		: 600;
}

.formulaire_bloc input,
.formulaire_bloc textarea,
.formulaire_selection select,
.champ_formulaire input,
.champ_formulaire textarea,
.champ_formulaire select {
	padding			: 12px;
	max-width		: 100%;
	min-width		: 100%;
	border-radius	: 8px;
	border			: 2px solid #e0e0e0;
	font-family		: 'Poppins', sans-serif;
	font-size		: 15px;
	transition		: 0.3s ease;
	width			: 100%;
}

.formulaire_selection {
	position : relative;
}

.formulaire_selection select {
	appearance			: none;
	background-color	: white;
	cursor				: pointer;
}

.formulaire_selection::after {
	content			: "▾";
	position		: absolute;
	right			: 15px;
	top				: 50%;
	transform		: translateY(-50%);
	color			: #2b2b5c;
	font-size		: 18px;
	pointer-events	: none;
}

.formulaire_bloc input:focus,
.formulaire_bloc textarea:focus,
.formulaire_selection select:focus,
.champ_formulaire input:focus,
.champ_formulaire textarea:focus,
.champ_formulaire select:focus {
	border-color	: #d881c7;
	outline			: none;
	box-shadow		: 0 0 0 3px rgba(216, 129, 199, 0.2);
}

.formulaire_boutton,
.formulaire_contact button {
	background-color	: #2b2b5c;
	color				: white;
	padding				: 12px;
	border				: none;
	border-radius		: 8px;
	font-size			: 16px;
	font-weight			: 600;
	cursor				: pointer;
	transition			: 0.3s ease;
}

.formulaire_boutton:hover,
.formulaire_contact button:hover {
	background-color	: #d881c7;
	color				: #2b2b5c;
}

/* ====== CAPTCHA ====== */

.g-recaptcha {
    margin-top: 10px;
}

/* ====== MESSAGE DE RETOUR ====== */

.message_formulaire {
	margin: 20px 0;
	padding: 15px;
	border-radius: 12px;
	font-weight: 600;
	text-align: center;
}

.message_succes {
	background: #e8f5e9;
	color: #2e7d32;
}

.message_erreur {
	background: #ffebee;
	color: #c62828;
}

/* ====== RESPONSIVE - CONTACT ====== */

@media (max-width: 768px) {
	.formulaire,
	.formulaire_contact {
		padding: 0 10px;
	}
}