@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; font-weight: 300; font-style: normal;}
a{text-decoration:none;color:$link-color;@include animation;}
a:hover{ color: $orange;}
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; text-transform: uppercase;
	@include resp(600){font-size: 30px;}
}
h2{color:$titre2;font-size:20px;}

@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*/
#page-contact-plan #center-column-1{
	@include flex; @include flex-justify(space-between);
	@include resp(800){flex-wrap: wrap;}
}
#page-contact-plan{
	 padding-bottom: 40px;
}
.form-content{
	width: 100%; max-width: 48%;
	@include resp(800){max-width: 100%;}
}
.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: $marron; 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%; max-width: 48%; margin:0 auto; padding-top: 40px;
	@include resp(800){max-width: 100%;}
}
.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;display: none;}
#diapo-inner{ 
	width:50%; margin: 0 auto;
	@include resp(1280){width: 60%;}
	@include resp(1060){width: 70%;}
	@include resp(900){width: 80%;}
	@include resp(768){width: 100%;}
}
.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{}

#logo-mn{
	@include flex; @include flex-justify(end); position: relative;
	@include resp(980){ @include flex-justify(center);}
	@include resp(600){padding-top: 30px;}
	#logo{
		position: absolute; z-index: 900; left: 0; top: 20px; @include bg($path,'bg_logo.png','bottom','center','no-repeat');
		@include resp(980){position: inherit; top: 50px;}
		@include resp(600){position: inherit; top: 0;}
		img{max-width: 100%; height: auto;}
	}
	.mn {
		padding: 15px 0;
		@include resp(980){display: none;}
		ul{ 
		@include no-marge; @include flex; @include flex-justify(center);
			li{
				list-style: none;
				a {
					@include flex; @include flex-align(center); @include flex-justify(center); color: $marron; height: 100px; font-size: 26px; padding: 0 30px; position: relative; z-index: 0; overflow: hidden; text-transform: capitalize;
					@include resp(1152){padding: 0 15px;}
					@include resp(1024){width: 170px; padding: 0 10px;}
					&:hover{
						color: $blanc;
					}
					&::before{
						content: ''; width: 95px; height: 59px;
					}
					span{
						display: block; text-align: right; width: 100%;
					}
					&::after{
						content: ""; position: absolute; background: $orange; 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::after{ transform: scaleX(1); width: 100%;}
				}
				@for $i from 1 through 5{
					&:nth-child(#{$i}) a::before{
						@include bg($path,'mn/mn#{$i}.png','left','center','no-repeat');
					}
					&:nth-child(#{$i}) a:hover::before{
						@include bg($path,'mn/mn_#{$i}.png','left','center','no-repeat');
					}
				}
			}
		}
	}
}

#flash{ position: relative;}

#coord{
	background: $bleu; padding: 15px 0;
	.coordonnee{
		@include flex; @include flex-justify(space-between);
		@include resp(768){ @include flex-align(center);}
		@include resp(533){@include flex-direction(column);}
		.telephone{
			@include flex; @include flex-justify(space-between);
			@include resp(768){@include flex-direction(column);}
			.tel,.mob{
				min-height: 26px; @include flex; @include flex-align(center); padding-left: 40px;
				a{
					color: $marron; font-size: 26px;
					&:hover{color: $blanc;}
				}
			}
			.tel{
				margin-right: 35px; @include bg($path,'picto_tel.png','left','center','no-repeat');
				@include resp(768){margin: 0 0 10px 0;}
			}
			.mob{
				 @include bg($path,'picto_mob.png','left','center','no-repeat');
			}
		}
		.adr{
			@include bg($path,'picto_adr.png','left','center','no-repeat'); font-size: 26px; color: $marron; padding-left: 40px;
			@include resp(533){margin-top: 10px;}
			@include resp(360){font-size: 22px;}
			@include resp(320){font-size: 19px;}
		}
	}
}

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

.ttl{
	@include bg($path,'bg_ttl.png','bottom','center','no-repeat'); padding-bottom: 40px;
}

#corps{}

#bloc-cont{
	padding-top: 100px; padding-bottom: 30px;
	@include resp(980){padding-top: 70px;}
	@include resp(640){padding-top: 50px;}
	#cont{
		background: $gris; position: relative; padding: 60px 0 100px 0;
		@include resp(980){padding: 30px 0;}
		&::before{
			content: ''; position: absolute; z-index: 1; top: -80px; width: 0; height: 0; border-style: solid; border-width: 80px 1920px 0 0; border-color: transparent $gris transparent transparent;
		}
		.cont-inter{
			@include flex; @include flex-justify(end); position: relative;
			@include resp(768){display: inherit;}
			&::before{
				content: ''; @include bg($path,'bg_lampe.png','bottom','center','no-repeat'); position: absolute; z-index: 1; top: -160px; width: 222px; height: 588px; left: 0;
				@include resp(980){display: none;}
			}
			.bloc-texte{
				width: 100%; max-width: 1140px; @include flex; @include flex-justify(space-between);
				@include resp(1280){max-width: 1040px;}
				@include resp(1152){max-width: 920px;}
				@include resp(1060){max-width: 830px;}
				@include resp(1024){max-width: 800px;}
				@include resp(980){max-width: 100%;}
				@include resp(768){display: inherit;}
				@include resp(533){ @include flex; flex-wrap: wrap;}
				.ph{
					order: 2;
					@include resp(768){float: right; padding-left: 30px; padding-bottom: 10px; width: 45%;}
					@include resp(533){float: none; padding: 0; width: 100%;}
					img{
						height: auto; border: 10px $blanc solid;
						@include resp(768){max-width: 100%;}
					}
				}
				.txt{
					order: 1; width: 100%; padding-right: 60px; text-align: right;
					@include resp(1152){padding-right: 30px;}
					@include resp(768){padding: 0; width: 100%; text-align: left;}
					@include resp(533){padding-bottom: 20px;}
					h2{
						@include flex; @include flex-justify(end); @include flex-align(center); font-size: 28px; text-transform: uppercase; @include bg($path,'picto_h2.png','right','center','no-repeat'); color: $orange; min-height: 64px; padding-right: 70px; margin-bottom: 50px;
						@include resp(1152){margin-bottom: 20px;}
						@include resp(768){ @include flex-justify(start);}
						@include resp(720){ font-size: 25px;}
						@include resp(533){@include bg($path,'picto_h2.png','left','center','no-repeat'); padding: 0 0 0 70px;}
					}
					ul{
						margin: 0; padding: 0 20px 0 0;
						@include resp(768){padding: 0 0 0 20px;}
						li{
							list-style: none; @include bg($path,'picto_liste.png','right','8px','no-repeat'); padding-right: 20px;
							@include resp(768){padding: 0 0 0 20px; @include bg($path,'picto_liste3.png','left','8px','no-repeat');}
							ul{
								margin: 0; padding: 20px 20px 0 0;
								@include resp(768){padding: 20px 0 0 20px;}
								li{
									list-style: none; @include bg($path,'picto_liste2.png','right','8px','no-repeat'); padding-right: 20px;
									@include resp(768){padding: 0 0 0 20px; @include bg($path,'picto_liste2.png','left','8px','no-repeat');}
								}
							}
						}
					}
				}
			}
		}
	}
}

.gal{
	@include bg($path,'bg_ph.png','top','center','no-repeat'); padding-top: 45px; padding-bottom: 30px;
	ul{
		@include flex; @include flex-justify(center); @include no-marge;
		li{
			list-style: none; width: 100%; max-width: 33.3333%; padding: 0 10px;
			@include resp(720){padding: 0 5px;}
			@include resp(360){padding: 0 2px;}
			img{max-width: 100%; height: auto;}
		}
	}
}

/*AUTRES*/
.texte{
	padding-top: 30px; padding-bottom: 30px;
}

/*FOOTER*/
#footer { background: $orange; padding: 30px 0;}
#foot { 
	@include flex; @include flex-justify(space-between); @include flex-align(center);
	@include resp(980){@include flex-justify(center);}
	.menu {
		@include resp(980){display: none;}
		ul { 
			@include no-marge; @include flex;
			li { 
				list-style: none; position: relative; z-index: 0; margin: 0 10px; 
				&:before{ 
					content: ""; position: absolute; background: $marron; 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;
					&:hover{ color: $marron;};
				}		
			}
		}
	}
	.com{}
}