@import 'config';
@import 'mixin';

/* ----------------------------------
/* ------------ ENTETE ----------
------------------------------------- */

*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{background:$bg-body;@include no-marge;@include full-size;}
div,td{
	@include general-font($primary-color,$primary-size,$primary-lineheight,$primary-font); @include animation;
	@include resp(980){font-size: 16px;}
	@include resp(480){font-size: 14px;}
}
a{text-decoration:none;color:$link-color;@include animation;}
a:hover{ color: $noir;}
img{ border:none;display:block;margin:0 auto;}
p{padding:10px 0;margin:0;}

h1,h2,h3,h4{font-weight:normal;@include no-marge;}
h1{
	display: inline-block; color:$titre1;font-size:30px; line-height: 30px; text-transform: uppercase; @include font-face('OpenSans-Bold'); text-align: center; background: $blanc; padding: 0 80px;
	@include resp(640){padding: 0 20px;}
	@include resp(480){font-size: 25px; line-height: 25px;margin: 0 20px;}
	@include resp(360){font-size: 22px; line-height: 22px;padding: 0 30px;}
}
h2{
	color:$titre2;font-size:24px; line-height: 24px; text-transform: uppercase; @include font-face('OpenSans-Bold');
	@include resp(480){font-size: 22px;}
	@include resp(480){font-size: 18px;}
	@include resp(480){font-size: 16px;}
}

@include menu-nav;
@include photos;

.center {text-align: center;}

.clear{ clear: both; line-height: 0;}
.clearfix:after{ content:""; display:table; clear:both;}
.container{@include container($container-size,$container-marge);}
#pageweb{width: 100%; overflow: hidden;}

/*CONTACT*/
.form-group{ margin:0 0 10px 0;}
.form-group label, .form-group input.form-input, textarea.form-textarea{ width:99%; display:block; margin:0 auto;}
input[type="text"],textarea,select{ padding:8px 5px; margin:8px 0; display:inline-block; border:1px solid $gris; border-radius:4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.btn-form{ margin:10px 0 0 0;}
.btn-submit-1, .btn-submit-2{  background: $noir; border-color: $noir; -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15); box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15); color: $blanc; text-decoration: none; width:200px; padding: 10px 16px; font-size: 15px; border:1px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; margin:10px 0 0 0; cursor:pointer; text-transform:capitalize;}
/*PLAN D'ACCES*/
.map-google{ width:100%; margin:0 auto;}
.map-google iframe{ margin:0; padding:0; border:none; width:100%; height: 500px;}
/*REALISATIONS*/
#diapo-container{}
p.titre-diapo{ text-transform:uppercase; font-weight:bold;}
#diapo-container ul, #diapo-container ul li{ margin:0; padding:0; list-style:none;}
#diapo-container .nav-diapo ul li { border-bottom:1px solid #eee;}
#diapo-container .nav-diapo ul li:first-child{ border-top:1px solid #eee;}
#diapo-container .nav-diapo ul li a{ display:block; padding:10px 0 10px 5px; text-transform:uppercase;}
#diapo-container .nav-diapo ul li.link-play a, #diapo-container .nav-diapo ul li a:hover{ background:#1b9bff; color:#fff;}
#diapo-container .nav-diapo ul li a:hover{ opacity:0.8;}
#diapo-container .nav-diapo ul{ padding-left:5px;}
.nav-diapo{ width:28%; float:left;}
#diapo-inner{ width:70%; float:right;}
.nav-diapo .link-disable{ cursor:not-allowed; opacity:0.4;}
@media screen and (max-width: 767px){
	#smartnav{ display:block;}
	#nav{ display:none;}
	}

#smartnav { 
	@include resp(980){
			display: block;
		}
	display:none;
}

/*TOP*/
#top{}

#coord{
	padding: 10px 0;
	.bloc-coord{
		@include flex; @include flex-align(center); @include flex-justify(space-between);
		@include resp(640){@include flex-direction(column);}
		.adr{
			@include resp(980){max-width: 100%;}
			p{
				font-size: 16px;padding-left: 55px; text-transform: uppercase; @include bg($path,'picto_adr.png','center','left','no-repeat');
				@include resp(480){font-size: 14px; padding: 45px 0 10px 0; text-align: center; @include bg($path,'picto_adr.png','center','top','no-repeat');}
				@include resp(320){font-size: 13px;}
			} 
		}
		.bloc-contact{
			@include flex; @include flex-align(center); @include flex-justify(space-between); width: 100%; max-width: 550px;
			@include resp(980){@include flex-direction(column); @include flex-align(end); max-width: 260px;}
			.mail{
				p{
					padding-right: 55px; @include bg($path,'picto_mail.png','center','right','no-repeat'); 
					a{
						color: $noir;
						&:hover{color: $orange;}
					}
				}
			}
			.tel{
				p{
					padding-right: 55px; @include bg($path,'picto_tel.png','center','right','no-repeat'); 
					a{
						color: $noir; font-size: 24px; @include font-face('OpenSans-Bold');
						&:hover{color: $orange;}
					}
				}
			}
		}
	}
}

#logo-mn{
	background: $bleu;
	@include resp(640){background: $gris;}
	.bloc-logo-mn{
		@include flex; @include flex-justify(space-between);
		@include resp(980){@include flex-align(center);}
		#logo{
			position: relative; z-index: 900; margin-bottom: -70px;
			@include resp(640){margin: 0 auto;text-align: center; padding: 20px 0 0 0;}
			img{max-width: 100%; height: auto;}
		}
		.mn {
			padding: 20px 0;
			@include resp(980){display: none;}
			ul{ 
				@include no-marge; @include flex;
				li{
					list-style: none; position: relative; z-index: 0; border-right: 1px $gris dashed;
					&:last-child { border-right: none;};
					&:before { 
						content: ""; position: absolute; background: $orange; width: 100%; height: 100%; z-index: -1; left:0; right:0; top: 0; bottom: 0; transform: scale(0); transition-duration: 0.3s;-moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;} &:hover:before { transform: scale(1); width: 100%;
					}
					a {
						display: block; color: $blanc; font-size: 16px; text-transform: uppercase; padding: 10px 20px;
						@include resp(1152){padding: 10px; font-size: 14px;}
						@include resp(1060){font-size: 12px;}
						&:hover { color: $bleu;}
					}
				}
			}
		}
	}
}

/*CENTRAL*/
#central{
	@include resp(360){padding-top: 30px;}
}

#bloc-ttl{
	.ttl{
		position: relative; margin-top: 65px; text-align: center; @include bg($path,'bg_h1.png','center','center','repeat-x');
		@include resp(360){margin-top: 100px;}
		&::before{
			content: ''; @include bg($path,'picto_ttl.png','top','center','no-repeat'); position: absolute; z-index: 800; top: -110px; left: 0; right: 0; margin: 0 auto; width: 285px; height: 79px;
		}
	}
}

#corps{
	padding: 70px 0;
	@include resp(980){padding: 40px 0;}
}

#cont1{
	@include flex; @include flex-align(center); @include flex-justify(space-between); padding-bottom: 70px;
	@include resp(1060){display: inherit;}
	@include resp(980){padding-bottom: 40px;}
	@include resp(640){@include flex; flex-wrap: wrap;}
	.txt1{
		width: 100%; max-width: 40%; order: 1;
		@include resp(1280){max-width: 50%; padding-right: 30px;}
		@include resp(1060){max-width: 100%; padding: 0;}
		@include resp(640){padding-bottom: 30px;}
		h2{
			color: $bleu; padding-bottom: 30px; margin-bottom: 20px; position: relative;
			&::before{
				content: ''; position: absolute; z-index: 1; border-bottom: 1px $bleu dashed; width: 90px; left: 0; bottom: 0;
			}
		}
		p:first-child{
			@include resp(1060){@include no-marge;}
		}
	}
	.ph1{
		width: 100%; max-width: 50%; order: 2;
		@include resp(1060){float: right; padding-left: 30px; padding-bottom: 20px; max-width: 40%;}
		@include resp(640){max-width: 100%; padding: 0; float: none;}
		img{max-width: 100%; height: auto;}
	}
}

#cont2{
	@include bg($path,'bg_cont2.jpg','top','center','no-repeat'); padding: 60px 0;
	@include resp(1060){background-size: cover;}
	@include resp(980){background: $bleu;}
	@include resp(640){padding: 40px 0;}
	.bloc-cont2{
		@include flex; @include flex-justify(space-between);
		@include resp(1060){@include flex-align(center);}
		@include resp(980){ @include flex-direction(column); text-align: center;}
		.txt2 > div{
			color:$blanc;
		}
		.txt2{
			color: $blanc; width: 100%; max-width: 40%; padding-left: 30px; order: 2;
			@include resp(1060){max-width: 50%;}
			@include resp(980){max-width: 100%; padding-bottom: 30px; padding-left: 0; order: 1;}
			h2{
				color: $orange; padding-bottom: 30px; margin-bottom: 20px; position: relative;
				&::before{
					content: ''; position: absolute; z-index: 1; border-bottom: 1px $orange dashed; width: 90px; left: 0; bottom: 0;
					@include resp(980){right: 0; margin: 0 auto;}
				}
			}
		}
		.ph2{
			width: 100%; max-width: 60%; order: 1;
			@include resp(1060){max-width: 50%;}
			@include resp(980){max-width: 100%; order: 2;}
			ul{
				padding: 160px 0 0 0; margin: 0; @include flex; @include flex-justify(space-between);
				@include resp(1060){@include no-marge;}
				li{
					list-style: none; width: 100%; max-width: 33.3333%; padding: 0 15px;
					@include resp(1060){padding: 0 5px;}
					@include resp(360){padding: 0 3px;}
					img{
						max-width: 100%; height: auto; border: 5px $orange solid;
						@include resp(360){border: 2px $orange solid;}
					}
				}
			}
		}
	}
}

#cont3{
	@include flex; @include flex-align(center); @include flex-justify(space-between);
	@include resp(1060){display: inherit; padding-top: 70px;}
	@include resp(980){padding-top: 40px;}
	@include resp(640){@include flex; flex-wrap: wrap;}
	.txt3{
		width: 100%; max-width: 40%; order: 1;
		@include resp(1280){max-width: 50%; padding-right: 30px;}
		@include resp(1060){max-width: 100%; padding: 0;}
		@include resp(640){padding-bottom: 30px;}
		p:first-child{
			@include resp(1060){@include no-marge;}
		}
		h2{
			color: $bleu; padding-bottom: 30px; margin-bottom: 20px; position: relative;
			&::before{
				content: ''; position: absolute; z-index: 1; border-bottom: 1px $bleu dashed; width: 90px; left: 0; bottom: 0;
			}
		}
	}
	.ph3{
		width: 100%; max-width: 50%; order: 2;
		@include resp(1060){float: right; padding-left: 30px; padding-bottom: 20px; max-width: 40%;}
		@include resp(640){float: none; padding: 0; max-width: 100%;}
		img{max-width: 100%; height: auto;}
	}
}

#cont4{
	background: $bleu; padding: 70px 0; margin-bottom: 60px;
	@include resp(980){padding: 40px 0; margin-bottom: 30px;}
	@include resp(640){padding: 30px 0;}
	.bloc-cont4{
		ul{
			@include no-marge; @include flex; @include flex-justify(center);
			@include resp(533){flex-wrap: wrap;}
			li{
				list-style: none; width: 100%; max-width: 20%; padding: 0 10px;
				@include resp(980){padding: 0 5px;}
				@include resp(533){max-width: 33.33333%; padding: 3px;}
				img{
					max-width: 100%; height: auto; border: 5px $orange solid;
					@include resp(360){border: 2px $orange solid;}
				}
			}
		}
	}
}

/*FOOTER*/
#footer { 
	background: $noir; padding: 70px 0;
	@include resp(980){padding: 40px 0;}
	@include resp(640){padding: 30px 0;}
}
#foot { 
	text-align: center;
	.menu {
		padding-bottom: 40px;
		@include resp(980){display: none;}
		ul { 
			@include no-marge; @include flex; @include flex-justify(center);
			li { 
				list-style: none; position: relative; z-index: 0; margin: 0 10px; 
				&:before{ 
					content: ""; position: absolute; background: $orange; width: 100%; height: 2px; z-index: -1; left:0; right:0; bottom: -5px; transform: scale(0); transition-duration: 0.3s;-moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
					&:hover::before{ transform: scale(1); width: 100%;
				}
				a { 
					display: block; color: $blanc; text-transform: uppercase; font-size: 16px;
					&:hover{ color: $orange;}
				}		
			}
		}
	}
	.com{
		@include flex; @include flex-justify(center);
	}
}