SYTEME DE DESIGN

<h3>CONTACT</h3>
	<form id="form-contact">
		<label for="name">Votre nom (obligatoire)</label>
		<input id="name" name="name" type="text" placeholder="ex.: Jean-Bernard MARTINEZ" required>
		<label for="email">Votre adresse de messagerie (obligatoire)</label>
		<input type="email" id="email" name="email" type="text" pattern="[a-z0-9_]+@[a-z0-9_]+[.][a-z]+" placeholder="ex.: votrenom@votresite.com" required>
		<label for="phone">Téléphone (obligatoire)</label>
		<input id="phone" name="phone" type="tel" pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}|+33 [1-9]{1} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}" placeholder="ex.: 06 00 00 00 00 ou 33+ 6 00 00 00 00" minlength="10" maxlength="17" required>		
		<label for="objet">Objet</label>
		<input id="objet" name="objet" type="text">
		<label for="message">Votre message</label>
		<textarea id="message" name="message" spellcheck="true"></textarea>
		<input type="submit" value="ENVOYER">
	</form>

#form-contact {
	display: flex;
	flex-direction: column;
	max-width: calc(500px - 4rem); 
	margin: 1rem auto;
	padding: 1rem;
	border: 1px solid var(--color-1);
	border-radius: 10px;
}

#form-contact input {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#form-contact h3, #form-contact label {
	text-align: center;
}

#form-contact input, #form-contact textarea, #form-contact select {
	margin-bottom: 1rem;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right 1px;
	padding-left: 5px;
	padding-right: 40px;
	color: #000;
	border: 1px solid var(--color-1);
	border-radius: 10px;
}

#form-contact input[name="name"] {
	background-image: url("../img/account-circle_gris.svg");
}
#form-contact input[name="name"]:hover {
	background-image: url("../img/account-circle.svg");
}

#form-contact input[type="email"] {
	background-image: url("../img/email_gris.svg");
}
#form-contact input[type="email"]:hover {
	background-image: url("../img/email.svg");
}

#form-contact input[type="date"] {
	background-image: url("../img/calendar_gris.svg");
}
#form-contact input[type="date"]:hover {
	background-image: url("../img/calendar.svg");
}

#form-contact input[type="time"] {
	background-image: url("../img/query_builder_gris.svg");
}
#form-contact input[type="time"]:hover {
	background-image: url("../img/query_builder.svg");
}

#form-contact input[name="objet"] {
	background-image: url("../img/edit_gris.svg");
}
#form-contact input[name="objet"]:hover {
	background-image: url("../img/edit.svg");
}

#form-contact input[type="tel"] {
	background-image: url("../img/phone_gris.svg");
}
#form-contact input[type="tel"]:hover {
	background-image: url("../img/phone.svg");
}

#form-contact input[name="phone"] {
	background-image: url("../img/phone_gris.svg");
}
#form-contact input[name="phone"]:hover {
	background-image: url("../img/phone.svg");
}

input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: 0.25;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="time"]:hover::-webkit-calendar-picker-indicator {
	opacity: 1;
}

#form-contact input[type="submit"] {
	width: 50%;
	margin: 0;
	padding: 2px 0 0;
	margin: 0 auto;
}

#form-contact input[type="submit"]:hover {
	background-color: var(--color-2);
	color: var(--color-5);
}

#form-contact textarea {
	background-image: url("../img/message_gris.svg");
}
#form-contact textarea:hover {
	background-image: url("../img/message.svg");
}

#form-contact select {
    background-image: url("../img/arrow_drop_down_gris.svg");
	background-position: right -8px;
	background-size: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#form-contact select:hover {
    background-image: url("../img/arrow_drop_down.svg");
}