@charset "UTF-8";
/* CSS Document */



/******************************************************************
******************************************************************
NE PAS MODIFIER / CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER NORMALIZE.CSS
******************************************************************
******************************************************************/

/*retire les padding et margin */
aside, section, article, footer, header, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li, figure { padding:0; margin:0; }

/******************************************************************
******************************************************************
CSS PRÉDÉFINIES
******************************************************************
******************************************************************/

/* les images ne seront jamais plus grandes que le contenant <figure> qui les contient */
img { max-width:100%; height: auto;}

/* ajoutez cette classe si il n'y a qu'une seule image */
/* dans le <figure> et qu'un espace fin apparait sous l'image */
/* par exemple <img class="no-border-down" src="..." */
img.no-border-down { display:block;} 

/* dans le cas où le float est requis */
div.pousse { clear:both; width:0; height:0; overflow:hidden;}

/* polices par défaut */
body { font-family: Helvetica, Arial, sans-serif; }

/* retire le gras par défaut des titres */
h1, h2, h3, h4, h5, h6 { font-weight: 400;}

/******************************************************************
******************************************************************
COLONNES FLEX
******************************************************************
******************************************************************/

/* CONTENEUR */
.conteneur-flex { display:flex; } /* ceci rendra automatiquement les éléments de ce conteneur sur la même ligne */

/* GRILLE 2 COLONNES */
.col50 { width: 50%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* GRILLE 3  COLONNES */
.col33 { width: 33.3333333%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* GRILLE 4 COLONNES */
.col25 { width: 25%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* GRILLE 5  COLONNES */
.col20 { width: 20%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }

/* COMPLEMENT DE GRILLE */
.col80 { width: 80%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }
.col75 { width: 75%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }
.col66 { width: 66.6666666%; box-sizing: border-box; /* ceci signifie que la largeur totale de l'objet incluera les padding/margin/border */ }


@font-face {
	font-family: 'Recoleta-Medium';
	src: url('fonts/recoleta-medium.eot');
	src: url('fonts/recoleta-medium.eot?#iefix') format('embedded-opentype'),
             url('fonts/recoleta-medium.woff2') format('woff2'),
	     url('fonts/recoleta-medium.woff') format('woff'),
	     url('fonts/recoleta-medium.ttf') format('truetype'),
	     url('fonts/recoleta-medium.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Recoleta-Regular';
	src: url('fonts/recoleta-regular.eot');
	src: url('fonts/recoleta-regular.eot?#iefix') format('embedded-opentype'),
             url('fonts/recoleta-regular.woff2') format('woff2'),
	     url('fonts/recoleta-regular.woff') format('woff'),
	     url('fonts/recoleta-regular.ttf') format('truetype'),
	     url('fonts/recoleta-regular.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Recoleta-SemiBold';
	src: url('fonts/recoleta-semibold.eot');
	src: url('fonts/recoleta-semibold.eot?#iefix') format('embedded-opentype'),
             url('fonts/recoleta-semibold.woff2') format('woff2'),
	     url('fonts/recoleta-semibold.woff') format('woff'),
	     url('fonts/recoleta-semibold.ttf') format('truetype'),
	     url('fonts/recoleta-semibold.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Recoleta-Light';
	src: url('fonts/recoleta-light.eot');
	src: url('fonts/recoleta-light.eot?#iefix') format('embedded-opentype'),
             url('fonts/recoleta-light.woff2') format('woff2'),
	     url('fonts/recoleta-light.woff') format('woff'),
	     url('fonts/recoleta-light.ttf') format('truetype'),
	     url('fonts/recoleta-light.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}



/******************************************************************
******************************************************************
NE PAS MODIFIER
CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER CSS/NORMALIZE.CSS
******************************************************************
******************************************************************/

p, h1, h2, h3, h4, h5, h6, ul, li, figure {
	padding:0;
	margin:0;
}

/******************************************************************
******************************************************************
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
******************************************************************
******************************************************************/

	.containerMobile{display:none;}


/*#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100px; 
  min-height: 100px;
  z-index:1000000;
}*/


body, html{
			
			height: 100%;
			min-height: 100%;
		}

body{
	
	
	
	font-size: 1.5vw;
}

	

i.closemain{
	
	
	color: #e42940;
	font-size: 40px;
	position: fixed;
	top: 70px;
	right:100px;
	z-index: 400000;

}

i.closemain:hover{
	
	cursor: pointer;

}








div.superduper{
	
	
	
	height: 100vh;
	width:100vw;
	position: relative;
}
	
section{
	
	height: 100vh;
	width: 100vw;
	/*position: absolute;*/
	top: 0;
	left:0;
	position: absolute;
	
	
}


section.options{
	
	
	background-color: #f3767f;
	position: fixed;
	top:0;
	right: 0;
	z-index: 300000;
	display: none;
	width: 100%;
	
}

/*section.options i.close{
	
	
	color: white;
	position: absolute;
	top: 70px;
	right:100px;
	font-size: 40px;

	
	
	
}*/


section.options figure i:hover{
	
	cursor: pointer;
	
	
}



section.options nav{
	
	
	text-align: center;
	padding: 100px 0 0 100px;
	box-sizing: border-box;
	
	
}


section.options nav i{
	
		color: #e42940;
	font-size: 20px;


}

section.options nav i:hover{
	cursor: pointer;
}



section.options nav i:hover{
	cursor: pointer;
}



section.options nav a:hover{
	
	color: #fffe50;
}

section.options nav ul{
	
	
	text-align: left;
	
}

section.options nav ul li{
	font-size:600%;
	display:block;
	padding: 2px 0 2px 0;
	font-family: 'Recoleta-Medium';
	font-weight: normal;
	font-style: normal;
	
	
}

section.options nav ul li a{
	

	text-decoration: none;
	list-style-type: none;
	color: #e42940;
	
}


section.acceuil{
	
	background-color: white;
	z-index: 100;
	background-image: url(images/ordi_vrai.gif);
	background-size: cover;
	
	
	
	
	
}

section.acceuil i{
	
	
	color: #1f2380;
	font-size: 50px;
	position: absolute;
	bottom: 80px;
	left:80px;
	text-align: center;

}

section.acceuil i:hover{
	
	cursor: pointer;

}





/*.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
	z-index: 600000;
    left: 0;
    overflow: hidden;
	

	
}

.fullscreen-bg video {
	
 width: 100%;
	height: 100%;
}


*/















section.acceuil h1{
	
	
	
	color: #e42940;
	font-family: 'Recoleta-SemiBold';
	font-weight: normal;
	font-style: normal;
	font-size: 500%;
	text-align: center;
	padding: 300px 0 40px 0;

}

section.acceuil article{
	
	
	
	text-align: center;
	
}

section.acceuil article p{
	
	display: inline;
	color: #e42940;
	font-family: 'Recoleta-Regular';
	font-weight: normal;
	font-style: normal;
	font-size: 150%;
	padding: 50px;
	
}

section.acceuil article p a{
	
	text-decoration: none;
		color: #e42940;
	
}

section.acceuil div{
	
	text-decoration: none;
	color: #f3767f;
	padding: 50px 0 0 0;
	font-size: 120%;
	text-align: center;
	font-family: 'Recoleta-Light';
	
}






/*************popup*********************/




section.popup{
	
	background-color: white;
	position: fixed;
	top:0;
	left:0;
	z-index: 100000;
	height: 100vh;

}

section.popup i.close{
	

	color: #1f2380;
	font-size: 40px;
	position:absolute;
	top: 70px;
	right:100px;
	z-index: 100000;
	
}

section.popup i:hover{
	
	cursor: pointer;
	
	
}


section.popup div.fotorama {
	
width: 70%;
	height: 100vh;
}



section.popup article{
	width: 30%;
	box-sizing: border-box;
	position: absolute;
	top: 190px;
	right: 5px;

	
}


section.popup article h1{
	
	color: #1f2380;
	text-align: center;
	padding: 20px 0 20px 0;
	font-family: 'Recoleta-SemiBold';
	font-weight: normal;
	font-style: normal;
	
	
}

section.popup article h2{
	
	color: #1f2380;
	opacity: 0.8;
	text-align: center;
	padding: 0 20% 0 20%;
	font-family: 'Recoleta-Medium';
	font-weight: normal;
	font-style: normal;
	
	
}


section.popup article p{
	
	color: #575756;
	text-align: left;
	padding: 50px 20% 0 20%;
	font-family: 'Recoleta-Light';
	font-weight: normal;
	font-style: normal;
	line-height: 140%;
	font-size: 100%;
	
	
	
}



section.popup fotorama {
	

	
	
}





/*************popup*********************/








section.realisations{
	padding: 200px 0 200px 0;
	box-sizing: border-box;
	height: auto;
	width: 100%;
	background-color: white;
	z-index: 100;
	position: relative;

	
	
}






div.container2col{
	
	display: none;
	
	
	
}



div.container div img{
	
	width: 100%;
	height: auto;
	display: block;
	margin: 0 0 20px 0;
	
	
	
}


div.container div img:hover{
	
	box-shadow: 0 10px 40px 0 rgba(150,150,150,0.5);
	
	
	
}



div.container{
	
	width: 80vw;
	margin: 0 auto;
	
}

div.container div{
	
	padding: 0 10px 0 10px;
	box-sizing: border-box;
}



















section.profil{
	
	background-color: #fffe50;
	display:none;
	z-index: 200000;
	
	
}



section.profil i.close{
	
	
	color: #e42940;
	font-size: 40px;
	position: absolute;
	top: 70px;
	right:100px;

}


section.profil i:hover{
	
	cursor: pointer;

}


section.profil figure img {
	
	width: 100%;
	height: auto;
	
}

section.profil figure {
	
	padding: 100px 0 20px 20px;
	box-sizing: border-box;
	width: 50%;
	float: left;
}

section.profil figure img{
width: 100%;
	height: auto;

}



section.profil article {
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 0 1vw;
	
}


section.profil article h1{
	
	font-family: 'Recoleta-Medium';
	font-weight: normal;
	font-style: normal;
	font-size: 45px;
	color: #e42940;
	text-align: center;
	padding: 100px 0 0 0;
	box-sizing: border-box;
	
}


section.profil article p{
		
		font-family: 'Recoleta-Regular';
		font-weight: normal;
		font-style: normal;
		font-size:110%; 
		line-height:150%;
		column-count: 1;
		column-gap: 60px;
		text-align: left;
		padding: 12px 10% 12px 10%;
		color: #e42940;
}


section.profil article p a{
	
	font-family: 'Recoleta-SemiBold';
	font-weight: normal;
	font-style: normal;
	
	
}

















section.formulaire{
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(images/ordi_vrai.jpg);
	background-position: center;
	z-index: 200000;
	display: none;


	
	
}


section.formulaire div.fondblanc{
	
	text-align: center;
	background-color: white;
	margin: 0 20% 0 20%;
	padding: 5% 0 0 0;
	box-sizing: border-box;
	height: 100%;
	
	
	
}


section.formulaire div.fondblanc article {
	
	text-align: center;
	
	
}


section.formulaire div.fondblanc article p {
	
	font-family: 'Recoleta-Regular';
		font-weight: normal;
		font-style: normal;
		font-size:100%; 
		line-height:112%;
		column-count: 1;
		column-gap: 60px;
		text-align: center;
	padding: 20px 20% 0 20%;
		color: #1f2380;
	
}



section.formulaire div.fondblanc article form  {
	
	
	
}

section.formulaire div.fondblanc article input.value{
	
	display:block;
	
}


section.formulaire div.fondblanc article label {
	
	display: block;
	font-family: 'Recoleta-SemiBold';
	font-size:15px;
	font-weight: normal;
	font-style: normal;
	color: #1f2380;
	padding: 20px 0 5px 0;
	
}

section.formulaire div.fondblanc article input {
	

	
	
}

 
     section.formulaire div.fondblanc article p a {
	
		color: #e42940;
	
}









section.formulaire div.fondblanc h1{
	
	font-family: 'Recoleta-Medium';
	font-weight: normal;
	font-style: normal;
	font-size: 400%;
	color: #1f2380;
	text-align: center;
	
	
	
}

section.formulaire div.fondblanc article input[type=button], input[type=submit]{
	
	
  padding: 10px;
text-align: center;
  border: none;
	background-color: #1f2380;
  border-radius: 4px;
	color: white;
  cursor: pointer;
	display: block;
	width: 100%;
font-family: 'Recoleta-SemiBold';
	font-size:20px;
	font-weight: normal;
	font-style: normal;
	

	
	
	
}



/******************************************************************
******************************************************************
SCENARIO JQUERY
******************************************************************
******************************************************************/




section.acceuil div{
	display: none;
	
}

section.biere1{
	
	
	display: none;
}



section.insta{
	
	
	display: none;
}


section.demo{
	
	
	display: none;
}


section.assoiffes{
	
	
	display: none;
}


section.ridm{
	
	
	display: none;
}

section.typo{
	
	
	display: none;
}

section.bikini{
	
	
	display: none;
}


section.radio{
	
	
	display: none;
}




section.bracar{
	
	
	display: none;
}


section.livre{
	
	
	display: none;
}



section.expo{
	
	
	display: none;
}



section.style{
	
	
	display: none;
}



section.oeil{
	
	
	display: none;
}

section.mural{
	
	
	display: none;
}

section.maniac{
	
	
	display: none;
}

section.biscuit{
	
	
	display: none;
}

section.rupture{
	
	
	display: none;
}



section.bixi{
	
	
	display: none;
}


section.typomanie{
	
	
	display: none;
}




















 
/************* MOBILE *****************/


@media screen and (max-width: 680px) { 

	div.container3col div.conteneur-flex{
		display: block;
	}
	
	.col33 {
		
		
		width: 100%;
	}
	
	
	

section.options nav{
	
	
	padding: 200px 0 0 5%;
	
}



section.options nav ul{
	
	
	text-align: left;
	
}

section.options nav ul li{
	font-size:900%;
	display:block;
	padding: 4px 0 4px 0;
	font-family: 'Recoleta-Medium';
	font-weight: normal;
	font-style: normal;
	
	
}

	
	

	section.acceuil{
	
	background-color: white;
	z-index: 100;
	background-image: url(images/telephone.gif);
	background-size: cover;
		
	
	
	
	
	
}
	
	
	






section.acceuil h1{
	
	
	
	color: #e42940;
	font-family: 'Recoleta-SemiBold';
	font-weight: normal;
	font-style: normal;
	font-size: 900%;
	text-align: center;
	padding: 280px 0 70px 0;

}

section.acceuil article{
	
	
	
	text-align: center;
	
}

section.acceuil article p{
	
	color: #e42940;
	font-family: 'Recoleta-Regular';
	font-weight: normal;
	font-style: normal;
	font-size: 400%;
	padding: 5px;
	
}








section.profil{
	
	background-color: #fffe50;
	display:none;
	z-index: 200000;
	width: 100%;
	height: auto;
	padding: 0;
	
	
}



/*section.profil i.close{
	
	
	color: #e42940;
	font-size: 40px;
	position: absolute;
	top: 70px;
	right:100px;

}


section.profil i:hover{
	
	cursor: pointer;

}
*/

section.profil figure img {
	
	width: 100%;
	height: auto;
	
}

section.profil figure {
	
	padding: 50px 0px 0px 0px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 0 0;
	float:none;
	text-align: center;
}

section.profil figure img{
width: 100%;
	height: auto;

}



section.profil article {
	width: 100%;
	float:none;
	box-sizing: border-box;
	padding: 0 0 0 0;
	
}


section.profil article h1{
	
	font-family: 'Recoleta-Medium';
	font-weight: normal;
	font-style: normal;
	font-size: 30px;
	color: #e42940;
	text-align: center;
	padding: 20px 0 0 0;
	box-sizing: border-box;
	
}


section.profil article p{
		
		font-family: 'Recoleta-Regular';
		font-weight: normal;
		font-style: normal;
		font-size:18px; 
		line-height:120%;
		column-count: 1;
		column-gap: 60px;
		text-align: left;
		padding: 12px 10% 12px 10%;
		color: #e42940;
}


section.profil article p a{
	
	font-family: 'Recoleta-SemiBold';
	font-weight: normal;
	font-style: normal;
	font-size:110%; 
		line-height:5px;
	
	
	
}

















section.formulaire div.fondblanc{
	
	text-align: center;
	background-color: white;
	margin: 10%;
	padding: 5% 0 0 0;
	box-sizing: border-box;
	height: 100%;
	
	
	
}




section.formulaire div.fondblanc article p {
	
	font-family: 'Recoleta-Regular';
		font-weight: normal;
		font-style: normal;
		font-size:15px; 
		line-height:112%;
		column-count: 1;
		column-gap: 60px;
		text-align: center;
		padding: 20px 5% 0 5%;
		color: #1f2380;
	
}





section.formulaire div.fondblanc h1{
	
	font-size: 50px;
	line-height: 50px;
	margin: 80px 0 0 0;

}




	
i.closemain{
	
	
	color: #e42940;
	font-size: 30px;
	position: fixed;
	top: 70px;
	right:15px;

}

i.closemain:hover{
	
	cursor: pointer;

}



	
	
	
	
	
	
	.container3col, .container2col{display: none;}
	
	
	
	.containerMobile{
		display:block;
	}
	
	
	
	
	.containerMobile figure, .containerMobile video {margin: 0 0 30px 0;}
	
	
	
	
	.containerMobile figure figcaption {font-size: 14px;
	margin: 0 0 10px 0}
	
	
	.containerMobile figure figcaption p {font-size: 15px;
	color:  #575756;
	text-align: left;
	font-family: 'Recoleta-Light';
	font-weight: normal;
	font-style: normal;
	line-height:18px;
	
	}
	
	
	.containerMobile figure figcaption h1 {
	font-size: 25px;
	color: #1f2380;
	text-align: left;
	font-family: 'Recoleta-SemiBold';
	font-weight: normal;
	font-style: normal;
	
	}
	
	.containerMobile figure figcaption h2 {
	color: #1f2380;
	opacity: 0.5;
	text-align: left;
	font-family: 'Recoleta-Medium';
	font-weight: normal;
	font-style: normal;
		line-height: 30px;
		font-size: 18px;
	
	}
	
	
	
	
	.containerMobile article{
		
margin: 80px 0 0 0;
		
	
	}
	
	
	
	
.containerMobile article p {
		
	font-size: 30px;
	color: #e42940;
	text-align: left;
	font-family: 'Recoleta-SemiBold';
	font-weight: normal;
	font-style: normal;
		
	
	}
	
	
	
section.acceuil i{
	
	
display: none;

}



	
	



	
	
	section.formulaire div.fondblanc article input[type=button], input[type=submit]{
	
	
  padding: 5px;
text-align: center;
		
  border: none;
	background-color: #1f2380;
  border-radius: 4px;
	color: white;
  cursor: pointer;
	display: block;
		margin: 10px 0 0 0;
	font-family: 'Recoleta-SemiBold';
	font-size:15px;
	font-weight: normal;
	font-style: normal;
		width: 100%;
	
}

	
	
	
	

section.formulaire{
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: none;
	background-color: white;
	background-position: center;
	z-index: 200000;
	display: none;


	
	
}






section.formulaire div.fondblanc{
	
	text-align: center;
	background-color: white;
	margin: 10%;
	padding: 5% 0 0 0;
	box-sizing: border-box;
	height: 100%;
	
	
	
}




section.formulaire div.fondblanc article p {
	
	font-family: 'Recoleta-Regular';
		font-weight: normal;
		font-style: normal;
		font-size:15px; 
		line-height:112%;
		column-count: 1;
		column-gap: 60px;
		text-align: center;
		padding: 20px 5% 0 5%;
		color: #1f2380;
	
}





section.formulaire div.fondblanc h1{
	
	font-size: 50px;
	line-height: 50px;
	margin: 80px 0 0 0;

}

	section.acceuil div{
	
	display: none;
		position: fixed;
		left: 10000px;
	
}



	
	
	
	
	/*myVideo{
		
		display: none;
	}
	
	
	
	
	
	
	
	#myVideo{
		
		
		display: none;
	}
	
	*/
	
	
	
	
	
	/*.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
	z-index: 600000;
    left: 0;
    overflow: hidden;
		width: 100vw;
		height: 100vh;

	
}
*/


/*.fullscreen-bg video {
	
 	min-width: 100%; 
  min-height: 100%;

	 transform:rotate(90deg);
	
}
	*/

	
	
	
	
	
	
	
	
	
	
}


@media screen and (min-width:681px) and (max-width: 1024px) { 

	div.container3col{
		display: none;
	}

	div.container2col{
		display: block;
	}
	
	
	
i.closemain{
	
	
	color: #e42940;
	font-size: 30px;
	position: fixed;
	top: 70px;
	right:15px;

}

i.closemain:hover{
	
	cursor: pointer;

}




	
	
	


	
	
	
	
	
	
	
	
	
	
	
	
	
}


/************* EXTRAS *****************/

div.pousse {
clear:both;
width:0;
height:0;
overflow:0;
}