﻿	/* !!!! Style à changer !!!! */

	/*  - Couleur Form */
	.case svg{fill: #0302e8;}
	.contact_form{border-bottom-color : #000; color: #000;}
	#envoyer{color:#000;}
	::placeholder{color: initial;}
	/* - Couleur Form hover */
	.case:hover svg{fill: #0302e8;}
	.case:hover .contact_form{border-bottom-color : #0302e8; color: #0302e8;}
	#envoyer:hover{background-color: #0302e8 !important;}

	#captcha{display: flex;justify-content: center;}


	/* !!!! Formulaire CSS !!!! */
	input[type=checkbox], input[type=radio]{margin: 15px; width: 50px !important; height: 50px !important;}
	#contact_page input, #contact textarea{width:100%;padding-bottom: 5px; padding-top: 5px;}
	.case{position: relative;}
	.case svg{height: 37px; width: 23px; position: absolute;transition: all 0.4s; padding-top: 14px; box-sizing: border-box !important;  left: 0;}
	.clear{clear: both;}
	#contact_page{width: 450px; margin: 0 auto;}
	#envoyer{margin-top:15px; padding:15px !important; cursor:pointer; border:0px !important; border-radius: 30px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; outline: none; transition: all 0.3s;}
	.adr-code{display: flex;align-content: flex-end; justify-content: space-between;}
	#contact_page #ville{width: 245px;}
	#contact_page #code_postal{ width:200px;}
	#contact_page .flexpage_form {width: 100%; color: #000;display: flex; align-items: center;}
	#contact_page .flexpage_form p{
		width: 100%;
	}

	.flexpage_form p{color:rgba(0,0,0,0.7) !important; font-size: 11px !important; line-height: 14px; margin-left: 10px;}
	.text-loi p{color:rgba(0,0,0,0.4) !important; font-size: 13px !important; line-height: 18px; text-align: center !important; font-family: Arial,Helvetica,sans-serif;}
	#formulaire{font-family: Arial,Helvetica,sans-serif;}
	.contact_form{border:0px; border-radius: 0px !important; border-bottom: 1px solid;outline: none;transition: all 0.3s;font-size: 14px;line-height: 23px;margin-bottom: 10px;min-height: 30px;margin-top: 10px;padding-left: 32px;width: 450px;}
	#envoyer{border-style:outset; background-color: rgba(0,0,0,0.13) !important; font-size: 16px;margin-bottom: 20px;}
	#envoyer:hover{color: #fff;}
	#devis #formulaire input[type="checkbox"]{width: 31px !important; background: none; margin: 0px;}
	#formulaire #captcha{display: flex; justify-content: center; width: 100%;}
	#formulaire .checkbox {
		--background: #fff;
		--border: #000;
		--border-active: #0302e8;
		--tick: #000;
		--border-hover: #0302e8;
		position: relative;
	}
	#formulaire .checkbox input,
	#formulaire .checkbox svg {
		width: 31px !important;
		height: 31px !important;
		display: block;
	}
	#formulaire .checkbox input {
		-webkit-appearance: none;
		-moz-appearance: none;
		position: relative;
		outline: none;
		background: var(--background);
		border: none;
		margin: 0;
		padding: 0;
		cursor: pointer;
		border-radius: 4px;
		transition: box-shadow .3s;
		box-shadow: inset 0 0 0 var(--s, 2.5px) var(--b, var(--border));
	}
	#formulaire .checkbox input:hover {
		--s: 2.5px;
		--b: var(--border-hover);
	}
	#formulaire .checkbox input:checked {
		--b: var(--border-active);
	}
	#formulaire .checkbox svg {
		pointer-events: none;
		fill: none;
		stroke-width: 2.5px !important;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke: var(--stroke, var(--border-active));
		position: absolute;
		top: 0;
		left: 0;
		width: 31px;
		height: 31px;
		-webkit-transform: scale(var(--scale, 1)) translateZ(0);
		transform: scale(var(--scale, 1)) translateZ(0);
	}
	#formulaire .checkbox.path input:checked {
		--s: 2.5px;
		transition-delay: .4s;
	}
	#formulaire .checkbox.path input:checked + svg {
		--a: 16.1 86.12;
		--o: 102.22;
	}
	#formulaire .checkbox.path svg {
		stroke-dasharray: var(--a, 86.12);
		stroke-dashoffset: var(--o, 86.12);
		transition: stroke-dasharray .6s, stroke-dashoffset .6s;
	}
	#formulaire .checkbox.bounce {
		--stroke: var(--tick);
	}
	#formulaire .checkbox.bounce input:checked {
		--s: 11px;
	}
	#formulaire .checkbox.bounce input:checked + svg {
		-webkit-animation: bounce .4s linear forwards .2s;
		animation: bounce .4s linear forwards .2s;
	}
	#formulaire .checkbox.bounce svg {
		--scale: 0;
	}

	@-webkit-keyframes bounce {
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
		}
		75% {
			-webkit-transform: scale(0.9);
			transform: scale(0.9);
		}
		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	@keyframes bounce {
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
		}
		75% {
			-webkit-transform: scale(0.9);
			transform: scale(0.9);
		}
		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
	input{background-color: transparent !important;}
	textarea{background-color: transparent !important;}
	
	/* !!!! Reset style form HTML5 !!!! */
	textarea{padding: 5px 0px; max-width: 100%; min-width: 100%; font-family:inherit;}
	::placeholder {color: rgba(0,0,0,0.35);}
	input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active
	{-webkit-box-shadow: 0 0 0 30px white inset !important;}

	.contact_txt{
		border:solid 2px rgba(0,0,0,0.1);
		padding: 20px;
		border-radius: 0px;
		text-align: center !important;
		margin-bottom: 15px;
	}
	.contact_txt p{text-align: center !important; margin-bottom: 0px !important;}
	.contact_txt h2{
		text-align: center !important;
		margin-bottom: 15px !important;
		margin-top: 0px !important;
	}
	.contact_txt h2:after{display: none !important;}

	.encart-contact{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.encart-contact>div{
		width: 100%;
		max-width: 500px;
		margin: 20px auto;
	}

	/* !!!! Responsive Form !!!! */
	@media all and (max-width:525px){
		.clear-appear{clear: both;}
		#contact_page{width: 95%;}
		#contact_page input, #contact_page textarea{width:100%;}
		.adr-code{
			flex-direction: column;
		}
		#contact_page #ville{width: 100%;}#contact_page #code_postal{width:100%;}
	}