#contact{
	a:link, a:visited, a:hover, a:active{
	  color: #000;
	  border-bottom: 1px solid transparent;
	  text-decoration: none;
	}

	a.link:hover{
	  border-bottom: 1px solid black;
	}

	.brand a:hover{
		border-bottom: 1px solid transparent;	
	}

	/*
	|--------------------
	| Contenu de la page
	|--------------------
	*/
	.content{
		display: flex;
		justify-content: space-between;

		/*
		|----------------------------------
		| Zone de gauche sur l'illustration
		|----------------------------------
		*/
		.illustration{
			flex: 1;
			height: 640px;
			max-width: 450px;

			.wrapper{
				max-width: 430px;
				height:510px;
				background: url('/img/app/contact.jpg') no-repeat bottom center;
				background-size: cover;
				position: relative;

				.coordonnees{
					position: absolute;
					bottom: -130px;

					left:0;
					display: flex;
					flex-direction:column;

					.line{
						margin:0;
						padding:0;
						line-height: 1.5rem;
						@extend .absara-regular;

						&.brand{
							@extend .absara-bold;
						}
					}
				}
			}
		}


		/*
		|----------------------------------
		| Zone de droite sur le formulaire
		|----------------------------------
		*/
		.formulaire{
			flex: 1;
			max-width: 788px;
			margin-left: 20px;

			.inputs{
				border: 1px solid black;
				margin-bottom: 20px;
				width: 100%;
				
				input{height: 43px;}
				textarea{height:165px; padding-top: 10px;}
				
				input, textarea{
					display: block;
					resize : none;
					margin: 0;
					border:none;
					width: 100%;
					font-size: 1rem;
					border-bottom: 1px solid black;
					padding-left: 10px;
					@extend .din-regular;					
				}
				
				textarea{
					border-bottom: none;
				}
			}

			.abonnement{
				display: flex;

				.checkBox, .label-checkbox{
					cursor: pointer;
				}

				.checkBox{
					height: 15px;
					width: 15px;
					border: 1px solid black;
					margin-right: 10px;
					margin-top: 2px;

					&.selected{
						background-color: $black;
					}
				}

				.label-checkbox{@extend .din-bold;}
			}

			/*
			|--------------------------------------------------------------------------
			| Les champs d'erreur
			|--------------------------------------------------------------------------
			*/
			.field{
				position: relative;

				@extend .din-regular;
	
				.errorMessage,label.error{
					@extend .din-regular;
					display: inline;
					position: absolute;
					z-index:5;
					top:0;
					right:0;
					height:36px;
					line-height:40px;
					padding-right:25px;
					text-align: right;

					color: rgba(195,29,45,1);
				}
			}			

			.buttons{
				position: relative;
				width: 100%;
				height:45px;

				.fa{
					margin-right: 10px;
					color: #FFF;
				}

				.my-button{
					@extend .din-bold;
					font-size: 1rem;
					display: block;
					margin-top: 20px;
					width: 100%;
					border: none;
					height:45px;
					position: absolute;
					top: 0;
					left: 0;

					&.button-submit{
						background-color:#000;
						color:#FFF;
						cursor: pointer;
						
						&.disabled{
							background-color:#AAA;
							cursor: text;
						}

						&.available:hover{
							background-color: #FFF;
							border: 1px solid black;
							color:#000;

							.fa{
								color: #000;
							}
						}
					}

					&.button-message{
						opacity: 0;
						transition: opacity 0.5s ease;
						
						&.visible{
							opacity: 1;
						}
					}

					&.button-success{background-color: $green;}
					&.button-fail{background-color: $red;color: $white;}
				}
			}
		}
	}
}


@media screen and (max-width: 650px){
	#contact{
		.content{
			flex-direction: column;

			.illustration{
				margin-bottom: 30px;
				max-width: 100%;
				
				.wrapper{margin: 0 auto;}
			}

			.formulaire{
				margin-left: 0px;
			}
		}
	}
}