@charset "UTF-8";

/*##################################################*/
/*#################### GENERAL #####################*/
/*##################################################*/

body, html {height: 100%;width: 100%;margin: 0;padding: 0;font-family: OpenSansLight, Arial, Helvetica, sans-serif;font-weight:normal;font-style:normal;color: #000;text-align:center;}

@media screen and (max-width: 699px) {
	body, html {-moz-text-size-adjust:none;-webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
}
section, footer { margin:0; padding:0; overflow:hidden;  position:relative;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
 
@media screen and (max-width: 1349px) {
section, footer { width:100%; }	
}
@media screen and (min-width: 1350px) {
section, footer { width:88%; }
}

h1 { font-weight:bold; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; }
h2 { font-weight:normal; text-transform:uppercase; font-family: "Times New Roman", Times, serif; }
h3 { font-weight:bold; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; }
p { font-weight:normal; font-family: OpenSansLight, Arial, Helvetica, sans-serif; }
a { cursor:pointer; color:#000; text-decoration:none;  }
span.after {background:#fff; display:block; width:15%; height:1px; margin:0 auto;}
span.after2 {background:#392819; display:block; width:15%; height:1px; margin:0 auto;}
h1 span, h2 span, h3 span { font-weight:normal; }

@media screen and (max-width: 699px) { /*mobile*/
body { font-size:1rem; }
h1 { font-size:1.5rem;  }
h2 { font-size:1.4rem;  }
h3 { font-size:1.5rem; }
p  { font-size:1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { /*tablette*/
body { font-size:1.3rem; }
h1 { font-size:5rem;  }
h2 { font-size:1.8rem;  }
h3 { font-size:3rem; }
p { font-size:1.3rem; }
}
@media screen and (min-width: 1350px) { /*desktop*/
body { font-size:1.3rem; }
h1 { font-size:5rem;  }
h2 { font-size:1.8rem;  }
h3 { font-size:3rem; }
p { font-size:1.3rem; }
}

/*##################################################*/
/*#################### HEADER ######################*/
/*##################################################*/
@media screen and (max-width: 1349px) {
#header { width:100%; height:100%; position:fixed; top:0; right:-100%; margin:0; padding:0; z-index:50; overflow:auto; background-color:#FFF; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; font-weight:normal; 
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-webkit-transition:right 1s ease; -moz-transition:right 1s ease; -o-transition:right 1s ease; transition:right 1s ease; }
#burger { display:block; cursor:pointer; width:5rem; height:5rem; position:fixed; top:0; right:0; z-index:70; }
#burger img { width:2rem; height:2rem; margin:1.5rem; }
#burger img+img { width:1.5rem; height:1.5rem; margin:1.75rem; }
#burger1 { display:block; }
#burger2 { display:none; }
#header ul { display:block; width:100%; margin:0; padding:0; }
#header li { display:block; width:100%; margin:0.5rem 0; }
#header li a, #agencements span:first-child { color:#333; display:block; width:40%; padding:0.5rem 0; margin:0 auto; text-decoration:none; cursor:pointer; }
#header li a:hover, #header li span:hover { color:#ff9933; }
#header li.selected span, #header li span+span { display:block; width:2rem; height:1px; margin:0.5rem auto 0 auto; }
#header li.selected { padding-bottom:0;}
#header li.selected a { color:#ff9933; }
#header li.selected span { background:#ff9933; }
li#agencements { padding-bottom:0;}
#header li.parentferme span+span { background:#fff; margin:0 auto; }
#header li.parentouvert span+span { background:#333; }
#header ul li ul { display:block; width:100%; margin:0; padding:0; }
#header ul li ul li { display:block; widh:100%; margin:0.5rem 0; padding:0.5rem 0; }
#header ul li ul li a { color:#999; }
#header li img {width:10rem; height:auto; }
}
@media screen and (max-width: 699px) {
#header { font-size:1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) {
#header { font-size:1.3rem; }
}
@media screen and (min-width: 1350px) {
#header { width:12%; height:100%; position:fixed; top:0; margin:0; padding:0; z-index:50; background-color:#FFF; text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; font-weight:normal; font-size:1rem;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-webkit-transition:right 1s ease; -moz-transition:right 1s ease; -o-transition:right 1s ease; transition:right 1s ease; }
#burger, #burger img { display:none; }
#header ul { display:block; width:100%; margin:0; padding:0; }
#header li { display:block; widh:100%; margin:0.5rem 1rem; padding:0.5rem 0; }
#header li a, #header li span { color:#333; display:block; text-decoration:none; cursor:pointer; }
#header li a:hover, #header li span:hover { color:#ff9933; }
#header li.selected span, #header li span+span { display:block; width:2rem; height:1px; margin:0.5rem auto 0 auto; }
#header li.selected { padding-bottom:0;}
#header li.selected a { color:#ff9933; }
#header li.selected span { background:#ff9933; }
li#agencements { padding-bottom:0;}
#header li.parentferme span+span { background:#fff; }
#header li.parentouvert span+span { background:#333; }
#header ul li ul { display:block; width:100%; margin:0; padding:1rem 0 0 0; }
#header ul li ul li { display:block; widh:100%; margin:0.5rem 0; padding:0.5rem 0; }
#header ul li ul li a { color:#999; }
#header li img { width:100%; height:auto; }
.right-20 { right:-20%; }
.right-0 { right:0; }
}
@media screen and (min-width: 2000px) {
#header li img { width:50%; height:auto; }	
}
/*##################################################*/
/*#################### LAYOUT ######################*/
/*##################################################*/
/*****IMG100 IMG50*****/
.img100 img { width:100%;height:auto;display:block; float:left; }
.img50 img { width:50%;height:auto;display:block; float:left; }

/*****SECTION 100% *****/
@media screen and (min-width: 1350px) { 
.section100 { width:100%; }
}

/*****BACKGROUND-COLOR******/
.bg666666 { background-color:#666666; }
.bgebebeb { background-color:#ebebeb; }
.texture-creme { background-image:url(../images/texture-creme.png); color:#392819;  }

/*****TITRE1*****/
.titre1 {-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center;background-color:#392819;color:white;}

#down { display:block; width:100%; height:5rem; position:absolute; bottom:0; left:0; text-align:center; }
#down img { width:3rem; height:3rem; padding:0rem 1rem 2rem 1rem; cursor:pointer; }

@media screen and (max-width: 699px) { 
	.titre1 { padding-left:5%; padding-right:5%;  }
	#down img { width:2rem; height:2rem; padding:1.5rem; cursor:pointer; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: portrait) { 
	.titre1 { padding-left:12.5%; padding-right:12.5%; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: landscape) { 
	.titre1 { padding-left:20%; padding-right:20%;  }
}
@media screen and (min-width: 1350px) { 
	.titre1 { padding-left:20%; padding-right:20%;  }
}

/*****ECART 1*****/
@media screen and (max-width: 699px) { 
	.ecart1, .ecart11 { padding-left:5%; padding-right:5%; }
	.ecart1 p, .ecart11 p {line-height: 1.5rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: portrait) { 
	.ecart1 { padding-left:12.5%; padding-right:12.5%; }
	.ecart1 p {line-height: 2rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) and (orientation: landscape) { 
	.ecart1 { padding-left:20%; padding-right:20%; }
	.ecart1 p {line-height: 2rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.ecart11 { padding-left:20%; padding-right:20%; }
	.ecart11 p {line-height: 2rem; }
}
@media screen and (min-width: 1350px) { 
	.ecart1, .ecart11 { padding-left:20%; padding-right:20%; }
	.ecart1 p, .ecart11 p {line-height: 2rem; }
}

/*##################################################*/
/*#################### SPECIFIC ####################*/
/*##################################################*/

@media screen and (max-width: 699px) { 
	.atelier { background-image:url(../images/atelier/gabarit-full_small.jpg);  }
	.savoir-faire { background-image:url(../images/savoir-faire/fond_small.jpg);  }
	.coordonnees { background-image:url(../images/atelier/gabarit-full_small.jpg); }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.atelier { background-image:url(../images/atelier/gabarit-full_medium.jpg); }
	.savoir-faire { background-image:url(../images/savoir-faire/fond_medium.jpg); }
	.coordonnees { background-image:url(../images/atelier/gabarit-full_medium.jpg); }
}
@media screen and (min-width: 1350px) and (max-width: 1999px) { 
	.atelier { background-image:url(../images/atelier/gabarit-full_big.jpg); }
	.savoir-faire { background-image:url(../images/savoir-faire/fond_big.jpg); }
	.coordonnees { background-image:url(../images/atelier/gabarit-full_big.jpg); }
}
@media screen and (min-width: 2000px) { 
	.atelier { background-image:url(../images/atelier/gabarit-full_full.jpg); }
	.savoir-faire { background-image:url(../images/savoir-faire/fond_full.jpg); }
	.coordonnees { background-image:url(../images/atelier/gabarit-full_full.jpg); }
}

/*****EMOTION****/
#emotion, #emotion2 { width:100%; position:absolute; top:0; left:0;color:white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#emotion h3, #emotion2 h3 { font-weight:normal;}

/*****COORDONNEES*****/
.coordonnees {-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center;background-color:#392819;color:white;}
.adresse { font-weight:normal; font-family: RobotoCondensed, Arial, Helvetica, sans-serif; font-size:1.8rem; }
.adresse a { color:white; }
#down2 { cursor:pointer; }

@media screen and (max-width: 699px) { 
.adresse { font-size:1.4rem; }
}

/*****LEGACY*****/
#legacy { cursor:pointer; }
#lightbox { width:100%; height:100%; background-color:#fff; position:fixed; top:0; left:0; text-align:center; z-index:70; overflow:auto;  color:#392819; display:none;  padding-top:5rem; padding-bottom:5rem; }
#lightbox p { margin:0 auto; text-align:left; }
#lightbox a { color:#392819; }
#fermer { width:5rem; height:5rem; position:absolute; top:0; right:0; background-image:url(../images/close-noir.svg); -webkit-background-size:1.5rem;-moz-background-size:1.5rem;-o-background-size:1.5rem;background-size:1.5rem; background-position:center; background-repeat:no-repeat; cursor:pointer; }


/*****CONTACTFORM*****/
#contact-form { position:relative; }
#contact-form label { display:none; }
#contact-form input, #contact-form textarea, #contact-form button { width:100%;	padding:0.8rem; margin: 0 0 1rem 0;	font-family: OpenSansLight, Arial, Helvetica, sans-serif; font-weight:normal;font-style:normal;font-size: 1.3rem;color:#392819;border:1px solid #ebebeb; border-radius: 0px;outline: none;background-color:white;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

#contact-form input, #contact-form button { height:3.5rem; }
#contact-form input[type="file"] { padding:0rem; height:3.5rem; -webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box; width:calc(100% - 2px); }

#contact-form span.bloc { display:block; position:relative;}
input#fake1, input#fake2, input#fake3 { padding:0rem 1rem; height:3.5rem; position:absolute; top:0; left:0; z-index:1; background-image:url(../images/next-noir.svg); -webkit-background-size:2rem;-moz-background-size:2rem;-o-background-size:2rem;background-size:2rem; background-position:calc(100% - 1rem) center; background-repeat:no-repeat; }
input#fichier1, input#fichier2, input#fichier3 { position:relative; z-index:2; opacity:0; cursor:pointer; }

#contact-form button { padding:0.8rem; margin:0;text-transform:uppercase; text-align:left;	border-radius: 0px;  border:1px solid #333;background:#392819; color:#fff;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition:background 0.5s ease, border 0.5s ease; -moz-transition:background 0.5s ease, border 0.5s ease; -o-transition:background 0.5s ease, border 0.5s ease; transition:background 0.5s ease, border 0.5s ease;}
#contact-form button:hover { border:1px solid #ff9933; background:#ff9933; color:white; }

#contact-form input.error,#contact-form textarea.error { color:#ff9933; }
#contact-form .displaynone { display:none; }
#contact-form .tip { display:none; }

#contact-form input[type=checkbox] { width:auto!important; height:auto!important; vertical-align:middle;border:1px solid #ebebeb!important; }
#contact-form input[type=checkbox]+span { display:inline-block; font-family: OpenSansLight, Arial, Helvetica, sans-serif; font-weight:normal;font-style:normal;font-size: 1.3rem; color:#392819; text-align:left!important; }
#contact-form input[type=checkbox]+span a { font-weight:normal; color:#ff9933; }
#contact-form input[type=checkbox]+span a:hover { text-decoration:underline; }
#contact-form input[type=checkbox].error+label.error+span, #contact-form  input[type=checkbox].error+label.error+span #rgpd { AAbackground-color:#ff9933!important; color:#ff9933!important; }

@media screen and (max-width: 699px) { 
#contact-form input, #contact-form textarea, #contact-form button { font-size:1rem; }
input#fake1, input#fake2, input#fake3 { -webkit-background-size:1.5rem;-moz-background-size:1.5rem;-o-background-size:1.5rem;background-size:1.5rem; background-position:calc(100% - 0.5rem) center;}
#contact-form input[type=checkbox] { margin:1rem 1rem 1rem 0rem!important; padding:0!important; vertical-align:top; }
#contact-form input[type=checkbox]+span,#contact-form input[type=checkbox].error+label.error+span { margin-bottom:1rem; width:18rem;font-size:1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#contact-form input[type=checkbox] { margin:1rem 1rem 1rem 0rem!important; padding:0!important; vertical-align:top; }
#contact-form input[type=checkbox]+span,#contact-form input[type=checkbox].error+label.error+span { margin-bottom:1rem; width:25rem; }
}
@media screen and (min-width: 1350px) {
#contact-form input[type=checkbox] { margin:1rem 0.8rem 1rem 0!important; padding:0!important; }
#contact-form input[type=checkbox]+span,#contact-form input[type=checkbox].error+label.error+span { margin-bottom:2rem; width:37rem; }
}

/****SUCCESS ERROR WAIT*****/
#success, #error, #wait { display:none; position:fixed; top:0; left:0; height:100%; width:100%; z-index:98; color:#fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#success,#error { background-color:#ff9933;}
#wait { background-color:#ffac59; }
#success p, #error p, #wait p { position:absolute; top:25%; left:0; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#fermer-success, #fermer-error { width:5rem; height:5rem; position:fixed; top:0; right:0; background-image:url(../images/close-blanc.svg); -webkit-background-size:1.5rem;-moz-background-size:1.5rem;-o-background-size:1.5rem;background-size:1.5rem; background-position:center; background-repeat:no-repeat; cursor:pointer;z-index:99; }

@media screen and (max-width: 699px) { 
	#success p, #error p, #wait p { padding-left:5%; padding-right:5%; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	#success p, #error p, #wait p { padding-left:12.5%; padding-right:12.5%; }
}
@media screen and (min-width: 1350px) { 
	#success p, #error p, #wait p { padding-left:20%; padding-right:20%; }
}

/*##################################################*/
/*#################### FOOTER ######################*/
/*##################################################*/
/*****NAV*****/
#nav { height:5rem; background-color:#FFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#nav div { position:absolute; top:0; height:5rem; overflow:hidden; }
#nav a {display:block;}
#nav p { text-transform:uppercase; font-family: RobotoCondensed, Arial, Helvetica, sans-serif;  }
#nav .prev { left:0; text-align:left; }
#nav .next { right:0; text-align:right; }
#nav .prev .fleche { float:left; }
#nav .next .fleche { float:right;  }

#nav .fleche { display:block; width:5rem; height:5rem; margin:0; padding:0; float:right;  } 
#nav .prev img, #nav .next img { width:2rem; height:2rem; margin:1.5rem; display:block; }
#nav .fleche img+img { display:none;}

@media screen and (max-width: 699px) { 
#nav .next { width:100%;  }
#nav .prev { display:none;  }
#nav p { font-size:1rem; padding:2rem; }
#nav .next img { width:2rem; height:2rem; margin:1.5rem 1rem 1.5rem 2rem; display:block; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#nav div { width:50%;  }
#nav p { font-size:1.3rem; padding:1.6rem; }
}
@media screen and (min-width: 1350px) { 
#nav div { width:40%; } 
#nav p { font-size:1rem; padding:1.8rem; }

#nav a:hover { color:#ff9933;}
#nav a:hover .fleche img { display:none; }
#nav a:hover .fleche img+img { display:block; }
}

/*****FOOTER*****/
@media screen and (max-width: 699px) { 
footer { height:6rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
footer { height:4rem; }
}
@media screen and (min-width: 1350px) { 
footer { height:4rem; }
}
footer { background-color:#ebebeb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
footer p { padding:1.4em 0; font-size:1rem;}

/*##################################################*/
/*#################### CORRECTIFS ##################*/
/*##################################################*/

/*****EFFET APPARITION AU SCROLL*****/
@media screen and (min-width: 1350px) { 
.apparition p, .apparition img { -webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease; }
#nav a, #header li a, #header li span {-webkit-transition:color 0.5s ease;-moz-transition:color 0.5s ease;-o-transition:color 0.5s ease;transition:color 0.5s ease; }
}


/****MYDEVICE****/
#mydevice {display:none;}
@media screen and (max-width: 699px) { #mydevice { float:left;} }
@media screen and (min-width: 700px) and (max-width: 1349px) { #mydevice {float:right;} }
@media screen and (min-width: 1350px) { #mydevice {float:none;} }
@media screen and (max-width: 1999px) { #mydevice { position:relative;} }
@media screen and (min-width: 2000px) { #mydevice { position:absolute;} }
img {vertical-align: bottom; }