/* Remove Alert Browser - DO NOT TOUCH */
@supports (display: grid) {
  #checkBrowserCompatibility {
    display: none !important;
  }
}

.wrappercontent{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.wrappercontent.small{max-width: 800px;}
.wrappercontent.medium{max-width: 1000px;}
.wrappercontent.large{max-width: 1400px;}

#wrappersite{
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	transition: 0.6s;
	position: relative;
}

/*-----------------*/
/* GRID AREA */
/*-----------------*/
/* AREA SITE */
#header {grid-area: header;}
#headerGrid {grid-area: headerGrid;}
#contactForm {grid-area: contactForm;}
#banner {grid-area: banner;}
#reassurances {grid-area: reassurances;}
#headerHome {grid-area: headerHome;}
#news {grid-area: news;}
#newsletter {grid-area: newsletter;}
#prestations {grid-area: prestations;}
#products {grid-area: products;}
#galleryHome {grid-area: galleryHome;}
#galleryFooter {grid-area: galleryFooter;}
#sections {grid-area: sections;}
#video {grid-area: video;}
#partenaires {grid-area: partenaires;}
#certifications {grid-area: certifications;}
#content {grid-area: content;}
#agences {grid-area: agences;}
#footer {grid-area: footer;}
#social {grid-area: social;}
#share {grid-area: share;}
#map_agence{grid-area: mapAgence;}
#cta{grid-area: cta;}
#reassurancesBis{grid-area: reassurancesBis;}

/* AREA HEADER */
#infotelfixe {grid-area: infotelfixe;}
#infotelport {grid-area: infotelport;}
#infoouverture {grid-area: infoouverture;}
#infoadresse {grid-area: infoadresse;}
#logo {grid-area: logo;}
#header-coordonnees {/* grid-area: headerCoordonnees; */}
#navprimary {grid-area: navprimary;}
#navsecondary {grid-area: navsecondary;}
#info-toogle{grid-area: infoToogle;}
#logoCoordonnees{grid-area: logoCoordonnees;}

/* AREA FOOTER */
#infotelfixeFooter {grid-area: infotelfixeFooter;}
#infotelportFooter {grid-area: infotelportFooter;}
#infoouvertureFooter {grid-area: infoouvertureFooter;}
#infoadresseFooter {grid-area: infoadresseFooter;}
#logoCoordonneesFooter{grid-area: logoCoordonneesFooter;}
#infomailFooter{grid-area: infomailFooter;}
#footerLogo {grid-area: footerlogo;}
#footerLinks{grid-area: footerLinks;}
#footerMap{grid-area: footerMap;}
#agencesFooter{grid-area: agencesFooter;}
#footermenu{grid-area: footermenu;}
#buttonsFooter{grid-area: buttonsFooter;}
#footerLogoAlt{grid-area: footerLogoAlt;}

/* AREA LEBONPRO */
#titleBP{grid-area: titleBP;}
#lebonpro{grid-area: lebonpro;}
#contentBP{grid-area: contentBP;}

/* AREA CONTACT */
#contactTitle{grid-area: contactTitle;}
#contactCoordonnees{grid-area: contactCoordonnees;}
#contactForm{grid-area: contactForm;}

/* AREA AGENCE */
#agenceTitle{grid-area: agenceTitle;}
#agenceCoordonnees{grid-area: agenceCoordonnees;}
#agenceForm{grid-area: agenceForm;}
#agenceContent{grid-area: agenceContent;}

/* AREA WOOCOMMERCE */
#blocbreadcrumb{grid-area: blocbreadcrumb;}
#backBTsinglewoo{grid-area: backBTsinglewoo;}
#backBTsingle{grid-area: backBTsingle;}
#pageTitle{grid-area: pageTitle;}
#pricesinglewoo{grid-area: pricesinglewoo;}
#tabssinglewoo{grid-area: tabssinglewoo;}
#gallerysinglewoo{grid-area: gallerysinglewoo;}
#btformsinglewoo{grid-area: btformsinglewoo;}
#shortdesc{grid-area: shortdesc;}

/*-----------------*/
/* GRID HEADER */
/*-----------------*/
#headerGrid {
	position: relative;
	display: grid;
	grid-row-gap: 30px;
	grid-column-gap: 30px;
	transition: .6s;
	grid-template-areas:
		"navsecondary logo             infoToogle  "
		"   navprimary       navprimary    navprimary        ";
	grid-template-columns: 1fr 170px 1fr;
	grid-template-rows: repeat(2,minmax(min-content,auto));
	align-items: center;
	padding: 20px 20px 0;
}
@media(max-width: 1280px){
	#headerGrid {
		grid-template-columns: 1fr 140px 1fr;
		padding: 20px 15px 0;
		grid-column-gap: 10px;
	}
}
@media(max-width: 1024px){
	#headerGrid {
		grid-template-areas:
			" navprimary  logo               infoToogle";
		grid-template-columns: 50px  1fr 50px;
		grid-column-gap: 5px;
		padding: 10px;
		justify-items: center;
		grid-row-gap: 0;
	}
}


/*-----------------*/
/* GRID FOOTER */
/*-----------------*/
#footer #footerbloc {
     align-items: center;
     justify-items: center;
     display: grid;
     grid-row-gap: 30px;
     grid-column-gap: 50px;
     transition: 0.6s;
     grid-template-areas:
		 "footerLogoAlt        footerLogoAlt"
          "footerlogo        agencesFooter"
          "footerlogo           footermenu";
     grid-template-columns: 240px 1fr    ;
     grid-template-rows: repeat(1, minmax(min-content, auto));
}
body.template-contact-php #footer #footerbloc {
	grid-template-areas: 
		"footerLogoAlt     footerLogoAlt"
		"footerlogo        footermenu";
}
@media(max-width: 1280px){
	#footer #footerbloc {
		grid-column-gap: 20px;
		grid-template-areas:
			"footerLogoAlt    footerLogoAlt"
          "footerlogo       agencesFooter"
          "footerlogo          footermenu";
		grid-template-columns: 240px  1fr  ;
	}
}
@media(max-width: 1024px){
	#footer #footerbloc {
		 grid-template-areas:
			 "footerLogoAlt     footerLogoAlt"
	 		 "footerlogo    footerlogo    "
	 		 "agencesFooter    agencesFooter";
		 grid-template-columns: 1fr 1fr;
		 grid-column-gap: 20px;
		 max-width: 700px;
	}
	body.template-contact-php #footer #footerbloc{
		grid-template-areas:
			"footerLogoAlt"
			"footerlogo";
		grid-template-columns:  1fr;
	}
}
@media(max-width: 480px){
	#footer #footerbloc {
		grid-template-areas:
			'footerLogoAlt'
			"footerlogo"
			"agencesFooter";
		grid-template-columns:  1fr;
		max-width: none;
	}
	
}


/*-----------------*/
/* GRID SITE */
/*-----------------*/
/* PAGES */
body.template_default #wrappersite{
	grid-template-areas:
		"header"
		"banner"
		"content"
		"reassurancesBis"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: min-content min-content minmax(min-content, auto) min-content;
}

/* HOME */
body.home #wrappersite{
	grid-template-areas:
		"header"
		"headerHome"
		"content"
		"reassurances"
		
		"sections"
		
		"reassurancesBis"
		"news"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: min-content repeat(10, minmax(min-content, auto));
}


/* PAGES PARENT */
body.template-parent-page-php #wrappersite{
	grid-template-areas:
		"header"
		"banner"
		"content"
		"prestations"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: min-content min-content minmax(min-content, auto) min-content;
}

/* PAGES CONTACT */
body.template-contact-php #wrappersite {
    grid-template-areas:
		"header"
		"banner"
		"content"
		"footerMap"
		"footer";
	grid-template-columns: 1fr ;
	grid-template-rows: min-content min-content minmax(min-content, auto) min-content;
}

/* PAGE - AGENCE SINGLE */
body.single.agences #wrappersite{
	grid-template-areas:
		"header"
		"banner"
		"content"
		"mapAgence"
		"footer"
	;
	grid-template-columns: 1fr;
	grid-template-rows:  min-content min-content  minmax(max-content, auto)  min-content;
}


/*-----------------*/
/* GRID PAGE LE BON PRO */
/*-----------------*/
body.template-rating-php #gridLBP{
	grid-template-areas:
		"titleBP    titleBP"
		"lebonpro  	contentBP";
	grid-template-columns: 1fr 3fr;
	grid-template-rows: repeat(1, minmax(min-content, auto));
	grid-gap: 30px;
}

@media(max-width:767px){
	body.template-rating-php #gridLBP{
		grid-template-areas:
			"titleBP"
			"lebonpro"
			"contentBP";
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, minmax(min-content, auto));
	}
}


/*-----------------*/
/* GRID PAGE CONTACT */
/*-----------------*/
<div class="wrappercontent">
					<div id="contactTitle">
				<div id="pageTitle" class="title tac">
					<h1>
						<small>Contact</small>
						N'hésitez pas à nous contacter					</h1>
				</div>
			</div>
					
		<div id="contactCoordonnees">
			

 
        
      

                                    <div id="listwidgetagence" class="">
                    <div class="itemlistwidgetagence"><div class="list_infoagence"><div class="list_logoagence"></div>
                        <strong class="title_list_infoagence">Siège social</strong>
                        <p class="adress_list_infoagence">65 rue de la Semm <br>68000 Colmar</p>
                        <p class="tel_list_infoagence"><a href="tel:03 89 22 94 99">03 89 22 94 99</a></p><div class="list_contentagence tc_content"></div></div></div><div class="itemlistwidgetagence"><div class="list_infoagence"><div class="list_logoagence"></div>
                        <strong class="title_list_infoagence">Agence du Haut-Rhin</strong>
                        <p class="adress_list_infoagence">65 rue de la Semm <br>68000 Colmar</p>
                        <p class="tel_list_infoagence"><a href="tel:03 89 22 94 99">03 89 22 94 99</a></p><div class="list_contentagence tc_content"></div></div></div><div class="itemlistwidgetagence"><div class="list_infoagence"><div class="list_logoagence"></div>
                        <strong class="title_list_infoagence">Agence du Bas-Rhin</strong>
                        <p class="adress_list_infoagence">2 rue Icare <br>67960 Entzheim</p>
                        <p class="tel_list_infoagence"><a href="tel:03 88 11 25 00">03 88 11 25 00</a></p><div class="list_contentagence tc_content"></div></div></div>                </div>
                    
        
            

   

			<div id="recruitContact">
				<div class="title tac">
					<h2>Rejoignez l'une de nos agences !</h2>
				</div>
				
				<a href="/offre-emplois/" class="recruitmentButton button buttonIcon">
					<span>Sovia Constructions recrute</span>
				</a>
			</div>
			
			
		</div>
		<div id="contactForm">
			

<div id="wrapperForm">
	
	<div class="mention">Les champs marqués d'un <span class="alert-color">*</span> sont obligatoires</div>
	<div class="cekome_form"><form method="POST" action="/contactez-nous/" enctype="multipart/form-data"><div class="wrap-fieldset"><input type="hidden" name="sendmail" value="contact"><div class="blc blc_text"><label class="nom">Nom</label><span class="required notranslate">*</span><input class="nom ckformfields" type="text" name="nom" value="" placeholder=""><div data-lastpass-icon-root="" style="position: relative !important; height: 0px !important; width: 0px !important; display: initial !important; float: left !important;"></div></div><div class="blc blc_text"><label class="prenom">Prénom</label><span class="required notranslate">*</span><input class="prenom ckformfields" type="text" name="prenom" value="" placeholder=""></div><div class="blc blc_email"><label class="">Email</label><span class="required notranslate">*</span><input class=" ckformfields" type="text" name="email" value="" placeholder=""></div><div class="blc blc_text"><label class="">Téléphone</label><span class="required notranslate">*</span><input class=" ckformfields" type="text" name="tel" value="" placeholder=""></div><div class="blc blc_text blc_wide"><label class="wide">Localisation</label><span class="required notranslate">*</span><input class="wide ckformfields" type="text" name="localisation" value="" placeholder=""></div><div class="blc blc_textarea"><label class="">Message</label><span class="required notranslate">*</span><textarea class=" ckformfields" rows="10" name="message" placeholder=""></textarea></div><div class="blc blc_checkbox"><p class="chkbx"><input class="contactNewsletter" type="checkbox" name="contactNewsletter" value="1"><label class="contactNewsletter">Vous acceptez de recevoir notre newsletter et d'être contacté par sms</label></p></div><div class="blc blc_infotel blc_wide"><div class="descinfotel">Nous ne pouvons pas vous appeler à des fins commerciales sans votre accord préalable. <a href="https://www.sovia-constructions.fr/mentions-legales/#demarchage-telephonique" target="_blank" rel="noopener">En savoir plus</a></div></div><div class="blc blc_checkbox formconsenttel_chk"><p class="chkbx"><input class="consenttel_chk" type="checkbox" name="consent_tel" id="consenttel-contact" value="1"><label class="consenttel_lab" for="consenttel-contact">J’accepte d’être contacté(e) par téléphone par SOVIA CONSTRUCTIONS à des fins commerciales.</label></p></div><div class="blc blc_checkbox formprivacy_chk"><p class="chkbx"><input class="privacyform_chk" type="checkbox" name="privacy_policy" value="1"><label class="privacyform_lab">J’ai lu et j'accepte la <a class="privacy-policy-link" href="https://www.sovia-constructions.fr/politique-confidentialite/" rel="privacy-policy">Politique de confidentialité</a> de ce site</label><span class="required notranslate privacyreq">*</span></p></div><input type="hidden" name="cptval" id="cptval-contact" value="ne pas remplir"><div id="cptchk-contact"><div class="blc blc_captcha"><div id="cptchkbx-contact" style="-webkit-transition: all ease 0.5s; transition: all ease 0.5s; border-radius:2px; outline: 1px solid #fff; font-family:Arial, Helvetica, sans-serif; outline-offset: -3px; width:25px; height:25px; cursor:pointer; font-size:15px; line-height:22px; font-weight:bold; border:2px solid #aaa; background:#fff; margin-right:5px; float:left; color:#fff; text-align:center;">X</div> <label class="norobo">Je ne suis pas un robot</label> <span class="required notranslate">*</span></div></div><span><input type="text" name="login" id="login-contact" value="" style="display:none !important"></span><span><input type="text" name="datesendmail" id="datesendmail-contact" value="20261027072505" style="display:none !important"></span>
						<noscript><div class='msgcpt'><small><strong>Important : </strong>Merci d'activer <u>javascript</u> sur votre navigateur afin de permettre l\'envoi de ce formulaire</small></div></noscript>
						<script>
							document.getElementById('login-contact').setAttribute('style', 'display:none !important');
							document.getElementById('datesendmail-contact').setAttribute('style', 'display:none !important');
							function cptvalsnd(){
								document.getElementById('cptchkbx-contact').style.backgroundColor='#0c0';
								document.getElementById('cptval-contact').value = 'R3RxdzFuR2tpUFJwSE4rSEYvT0pKSUpDcUo4eUNNR1lYZ3BDUWJZY0V5Y3A3MUp3TUdhRXkxZXNsRCtJby9iaw==';
							}
							var captcha = document.getElementById('cptchk-contact');
							captcha.innerHTML = "<div class='blc blc_captcha'><div id='cptchkbx-contact' style='-webkit-transition: all ease 0.5s; transition: all ease 0.5s; border-radius:2px; outline: 1px solid #fff; font-family:Arial, Helvetica, sans-serif; outline-offset: -3px; width:25px; height:25px; cursor:pointer; font-size:15px; line-height:22px; font-weight:bold; border:2px solid #aaa; background:#fff; margin-right:5px; float:left; color:#fff; text-align:center;' >X<\/div> <label class='norobo'>Je ne suis pas un robot<\/label> <span class='required notranslate'>*<\/span><\/div>";
							captcha.addEventListener('click', cptvalsnd);
						</script>
					<input type="submit" class="button cf_submit" value="Envoyer"></div></form><div style="clear:both;"></div></div>
	
	<script>
		$( ".cekome_form .btnextprev" ).click(function( event ) {
			event.preventDefault();
			var error = '';

			if ($(this).hasClass('nextform')) {
				var siblingsFields = $(this).siblings('.blc');

				siblingsFields.each(function() {
					var siblingsField = $(this).children();
					var required = false;

					siblingsField.each(function() {
						if ($(this).hasClass('required')) {
							required = true;
						}
						if ($(this).hasClass('ckformfields') && $(this).val() == '' && required) {
							error = "Un ou plusieurs champs obligatoires n'ont pas été remplis";
						}
					});
				})
			}

			// S'il s'agit de passer à l'étape suivante
			if ($(this).hasClass('nextform')) {
				if (error != '') {
					$('body').append('<div class="ckformerror">' + error + '</div>');
					var animationDuration = $('.ckformerror').css('animation-duration').replace('s', '')*1000;
					setTimeout(function() {
						$('.ckformerror').remove();
					}, animationDuration);
				}
				else {
					animContactBox($(this));
				}
			}
			// S'il s'agit de passer à l'étape précédente
			else {
				animContactBox($(this));
			}
		});

		function animContactBox(element) {
			$(".cekome_form fieldset").hide(400);
			var formove = $(element).data( "showform" );
			$('#'+formove).show(400);
		}

		$('.cekome_form input[type=text]:not(.cf_inputcaptcha), .cekome_form textarea').on('focus blur', function (e) {
			$(this).parents('.blc').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
		}).trigger('blur');
	</script>

</div>
		</div>
	</div>

/*-----------------*/
/* GRID PAGE WOOCOMMERCE */
/*-----------------*/
#gridsinglewoo{
	grid-template-areas:
		"blocbreadcrumb             	blocbreadcrumb"
		"backBTsingle					backBTsingle"
		"pageTitle						pageTitle"
		"gallerysinglewoo           	shortdesc"
		"gallerysinglewoo				tabssinglewoo"
		"gallerysinglewoo           	pricesinglewoo"
		"gallerysinglewoo 				btformsinglewoo";
	grid-template-columns: 1fr 2fr;
	grid-template-rows: repeat(7,minmax(min-content,auto));
	grid-column-gap: 80px;
}
@media(max-width:1024px){
	#gridsinglewoo{
		grid-column-gap: 40px;
	}
}
@media(max-width:767px){
	#gridsinglewoo{
		grid-template-areas:
			"backBTsingle"
			"pageTitle"
			"shortdesc"
			"gallerysinglewoo"
			"tabssinglewoo"
			"pricesinglewoo"
			"btformsinglewoo";
		grid-template-columns: 1fr;
		grid-template-rows:  repeat(7, minmax(min-content, auto));
	}
}

/*-----------------*/
/* GRID PAGE AGENCE SINGLE */
/*-----------------*/
body.single.agences #content .wrappercontent{
	grid-template-areas:
		"agenceTitle        		agenceTitle"
		"agenceCoordonnees          agenceCoordonnees"
		"agenceContent          agenceForm";
	grid-template-columns:  1fr 1fr;
	grid-template-rows: repeat(3, minmax(min-content, auto));
	grid-column-gap: 60px;
	display: grid;
	align-items: center;
}

@media(max-width:1024px){
	body.single.agences #content .wrappercontent{
		grid-template-areas:
			"agenceTitle"
			"agenceCoordonnees"
			"agenceContent"
			"agenceForm";
		grid-template-columns: 1fr;
		grid-template-rows:  repeat(4, minmax(min-content, auto));
	}
}