@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(320){font-size: 14px;}
}
a{text-decoration:none;color:$link-color;@include animation;}
a:hover{ color: $gris;}
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{
	color:$titre1;font-size:35px; line-height: 30px; text-align: center; @include font-face('Lato-Regular');
	@include resp(640){ font-size: 30px;}
	@include resp(360){ font-size: 25px; line-height: 25px;}
}
h2{
	color:$titre2;font-size:25px; text-transform: uppercase; @include font-face('Lato'); font-weight: bold;
	@include resp(640){ font-size: 20px;}
	@include resp(360){ font-size: 18px;}
}

@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: 50px auto 0 auto;}
.map-google iframe{ margin:0; padding:0; border:none; width:100%; height:600px;}
/*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{}

#head1{
	background: $noir; padding: 10px 0;
	.head-coord{
		display: flex; justify-content: space-between; align-items: center;
		@include resp(640){flex-direction: column; justify-content: center;}
		.adr,.tel{
			height: 37px; display: flex; align-items: center;padding-left: 45px; 
		}
		.adr{
			@include bg($path,'picto_adr.png','left','center','no-repeat'); @include font-face('Lato'); font-weight: 300; color: $blanc; font-size: 18px;
		}
		.tel{
			@include bg($path,'picto_tel.png','left','center','no-repeat');
			@include resp(640){
				@include bg($path,'picto_tel.png','right','center','no-repeat'); padding-left: 0; padding-right: 45px; margin-top: 15px;
			}
			a{
				@include font-face('Lato'); font-weight: bold; color: $blanc; font-size: 22px;
				&:hover{color: $rouge;}
			}
		}
	}
}

#head2{
	@include resp(900){display: none;}
	.mn {
		ul{ 
			@include no-marge; display: flex; justify-content: center;
			li{
				list-style: none; position: relative; z-index: 0;
				&:before { 
					content: ""; position: absolute; background: $noir; width: 100%; height: 100%; z-index: -1; left:0; right:0; top: 0; bottom: 0; transform-origin: 100% 0; transform: scaleY(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: scaleY(1); width: 100%;
				}
				a {
					display: block; font-size: 18px; color: $noir; text-transform: uppercase; padding: 30px;
					@include resp(1152){padding: 30px 15px;}
					@include resp(1024){font-size: 16px;}
					&:hover { color: $blanc;}
				}
			}
		}
	}
}

#head3{
	position: relative;
	.head3-link{
		position: absolute; z-index: 900; left: 0; top: 0; right: 0; bottom: 0;
		@include resp(900){position: inherit;}
		.head3-inter{
			display: flex; justify-content: center; align-items: center; height: 100%;
			@include resp(900){padding: 30px 10px;}
			#logo{
				img{max-width: 100%; height: auto;}
			}
		}
	}
	#flash{
		position: relative;
	}
}

/*CENTRAL*/
#central{
	padding: 70px 0;
	@include resp(900){padding: 50px 0;}
}

.ttl{
	@include bg($path,'bg_h1.jpg','bottom','center','no-repeat'); padding-bottom: 85px;
	@include resp(640){background-size: 100%; padding-bottom: 50px;}
	@include resp(533){background-size: 130%; padding-bottom: 60px;}
	@include resp(480){background-size: 150%;}
	@include resp(360){background-size: 190%;}
	@include resp(320){background-size: 230%;}
}

#corps{
	padding-top: 50px;
}
#cont1{
	background: $noir; padding: 50px 0;
	.cont1-inter{
		.txt1 > div{color: $blanc;}
		.txt1{
			color: $blanc; text-align: center;
		}
		.ph1{
			padding-top: 50px; max-width: 800px; margin: 0 auto;
			ul{
				@include no-marge; display: flex; justify-content: space-between; flex-wrap: wrap;
				li{
					list-style: none; width: 100%; max-width: 33.33333%; padding: 0 30px;
					@include resp(720){padding: 0 5px;}
					@include resp(320){padding: 10px 0; max-width: 100%;}
					img{max-width: 100%; height: auto; border-radius: 50%;}
				}
			}
		}
	}
}

#cont2{
	padding-top: 70px; padding-bottom: 70px;
	@include resp(900){ padding-bottom: 50px; padding-top: 50px;}
	.ph2{
		max-width: 800px; margin: 0 auto;
		ul{
			@include no-marge; display: flex; justify-content: space-between; flex-wrap: wrap;
			li{
				list-style: none; width: 100%; max-width: 33.33333%; padding: 0 30px;
				@include resp(720){padding: 0 5px;}
				@include resp(320){padding: 10px 0; max-width: 100%;}
				img{max-width: 100%; height: auto; border-radius: 50%;}
			}
		}
	}
	.txt2{
		text-align: center; padding-top: 30px;
		h2{
			padding-bottom: 30px;
		}
	}
}

#cont3{
	@include bg($path,'ph1.jpg','left','center','no-repeat');
	@include resp(900){ background: none;}
	.cont3-bg{
		display: none;
		@include resp(900){ display: block; min-height: 520px; @include bg($path,'ph1.jpg','left','center','no-repeat'); background-size: 100%;}
		@include resp(800){  min-height: 470px;}
		@include resp(720){  min-height: 420px;}
		@include resp(640){  min-height: 380px;}
		@include resp(533){  min-height: 310px;}
		@include resp(480){  min-height: 280px;}
		@include resp(360){  min-height: 210px;}
		@include resp(320){  min-height: 190px;}
	}
	.cont3-inter{
		display: flex; justify-content: flex-end; min-height: 600px;
		@include resp(900){ min-height: 100%; justify-content: center; padding: 0;}
		.txt3 > div{color: $blanc;}
		.txt3{
			background: $gris; color: $blanc; max-width: 576px; position: relative; padding-left: 70px; display: flex; justify-content: center; flex-direction: column;
			@include resp(1152){max-width: 50%;}
			@include resp(900){max-width: 100%; padding: 50px 10px; text-align: center;}
			&::after{
				content: ''; background: $gris; position: absolute; z-index: 1; top: 0; height: 100%; width: 100%; left: 100%;
			}
			h2{
				color: $blanc; padding-bottom: 30px;
			}
		}
	}
}

#cont33{
	@include bg($path,'ph2.jpg','left','center','no-repeat');
	@include resp(900){ background: none;}
	.cont33-bg{
		display: none;
		@include resp(900){ display: block; min-height: 520px; @include bg($path,'ph2.jpg','left','center','no-repeat'); background-size: 100%;}
		@include resp(800){  min-height: 470px;}
		@include resp(720){  min-height: 420px;}
		@include resp(640){  min-height: 380px;}
		@include resp(533){  min-height: 310px;}
		@include resp(480){  min-height: 280px;}
		@include resp(360){  min-height: 210px;}
		@include resp(320){  min-height: 190px;}
	}
	.cont33-inter{
		display: flex; justify-content: flex-end; min-height: 600px;
		@include resp(900){ min-height: 100%; justify-content: center; padding: 0;}
		.txt33 > div{color: $blanc;}
		.txt33{
			background: $gris; color: $blanc; max-width: 576px; position: relative; padding-left: 70px; display: flex; justify-content: center; flex-direction: column;
			@include resp(1152){max-width: 50%;}
			@include resp(900){max-width: 100%; padding: 50px 10px; text-align: center;}
			&::after{
				content: ''; background: $gris; position: absolute; z-index: 1; top: 0; height: 100%; width: 100%; left: 100%;
			}
			h2{
				color: $blanc; padding-bottom: 30px;
			}
		}
	}
}

#cont4{
	padding-top: 70px;
	@include resp(900){padding-top: 50px;}
	ul{
		@include no-marge; display: flex; justify-content: space-between; flex-wrap: wrap;
		li{
			list-style: none; width: 100%; max-width: 33.33333%; padding: 0 15px;
			@include resp(720){padding: 0 5px;}
			@include resp(480){ max-width: 100%; padding: 5px 0;}
			img{max-width: 100%; height: auto;}
		}
	}
}

/*FOOTER*/
#footer { background: $rouge; padding: 50px 0;}
#foot { 
	text-align: center;
	.menu {
		@include resp(900){display: none;}
		ul{ 
			@include no-marge; display: flex; justify-content: center;
			li{
				list-style: none; position: relative; z-index: 0; border-left: 1px $blanc solid; &:last-child { border-right: 1px $blanc solid;};
				&:before { 
					content: ""; position: absolute; background: $blanc; width: 100%; height: 100%; z-index: -1; left:0; right:0; top: 0; bottom: 0; transform-origin: 0 100%; transform: scaleX(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: scaleX(1); width: 100%;
				}
				a {
					display: block; color: $blanc; text-transform: uppercase; padding: 10px 15px;
					@include resp(1152){padding: 10px;}
					@include resp(1060){font-size: 14px;}
					&:hover { color: $noir;}
				}
			}
		}
	}
	.com{
		display: flex; justify-content: center; padding-top: 40px;
		@include resp(900){padding: 0;}
	}
}