@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 */ }


/******************************************************************
******************************************************************
/* TAILLES TEXTES ADAPTATIFS À AJUSTER SELON LES POLICES UTLISÉES */
/* TAILLES TEXTES ADAPTATIFS À AJUSTER SELON LES POLICES UTLISÉES */
/* TAILLES TEXTES ADAPTATIFS À AJUSTER SELON LES POLICES UTLISÉES */
/******************************************************************
******************************************************************/

body { font-size:1.5vw; 
font-family: 'Martel Sans', sans-serif;


}  


/************************************************************************************************************************************
/************************************************************************************************************************************
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
/************************************************************************************************************************************
************************************************************************************************************************************/


.desktop {display: block;}
	
.mobile {display: none;}
	


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




/****************** BODY ****************************/

body#accueil{
	
	background-image: url(images/Backgroundimage.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

body {
	
	background-color: white;
}


/****************** HEADER  ****************************/

header {
	background-color: white;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10001;
	height: 15%;
}

header figure {
	position: relative;
	
	
	
}

header figure a {
	position: absolute;
	top: 1vh;
	left: 1vh;
	width: 5%;
}


header figure a img {
	width: 5%;
	min-width: 100px;
}



header nav {
	float: right;
	padding: 3vh 3vw 2vh 0;
	
}

header nav ul {
	list-style-type: none;
	word-spacing: 10px;
	font-weight:900 ;
	
}

header nav ul li {
	display: inline; /* menu horiz*/
	text-decoration: none;
}


header nav ul li a {
	text-decoration: none;
	display: inline-block;
	color: #FC4732;
}

header nav ul li a:hover {
	text-decoration: underline;
}



/****************** DIV#WRAPPER ****************************/

div.wrapper {

	width: 60%;
	margin: 0 auto 0 auto;
	padding: 200px 0;
}


div.wrapper  h2 {
	font-weight: 200;
	font-size: 80%;
	color: #FC4732;
	
}

div.wrapper  h1 {
	font-weight: 900;
	font-size: 170%;
	color: #FC4732;
	margin: 0 0 2vh 0;
	
}

div.wrapper.accueil   {
	
}

div.wrapper.accueil  h1 {
	margin: 2vh 0 0 0;
	color:#FC4732;
	font-size: 210%;
	font-weight: 900;
	position: absolute;
	z-index: 100;
	
}

div.wrapper.accueil  h2 {
	margin: 2vh 0 0 0;
	color:#FC4732;
	font-size: 140%;
	font-weight: 500;
	position: absolute;
	z-index: 100;
	padding: 8vh 0 0 0;
	
}

figure.animationaccueil {
	position: fixed;
	top: 34%;
	right: 20%;
	width: 60%;
}


figure.animationaccueil video {}

div.wrapper section  {
	
	width: 60%;
}

div.wrapper section h2 {
	font-weight: 200;
	font-size: 90%;
	color: #FC4732;
	margin: 0 0 1vh 0;
}

div.wrapper section h1 {
	font-weight: 900;
	font-size: 230%;
	color: #FC4732;
	margin: 0 0 2vh 0;
}

div.wrapper section article {
	
}


div.wrapper section article p {
	font-size: 75%;
	line-height: 140%;
	margin: 0 0 2vh 0;
	
	
}

div.wrapper section article p.credits {
	font-size: 60%;
	font-weight: 700; 
	margin: 1vh 0 4vh 0;
	
}



div.wrapper  aside.texte p {
	font-size: 65%;
	line-height: 105%;
	margin: 0 0 2vh 0;
	font-weight: 300;

}

div.wrapper figure {
	
}

div.wrapper figure img {
	display: block;
	margin: 0 auto 0 auto;
}

div.wrapper figure img figcaption {
	font-size: 40%;
}


div.wrapper a.retourauprojet {
	text-decoration: none;
	
}


div.wrapper a.retourauprojet:hover {
   text-decoration: underline;
	cursor: pointer;
	color: #FC4732;
}

div.wrapper a.retourauprojet p {
	display: block;
	margin: 60px auto 0 auto;
	text-align: center;
	color: #FC4732;
	font-weight: 800;
	font-size: 80%;
}


/************************ BOITE GRAPHISME ***********************/



div.boite.conteneur-flex {
	flex-wrap:wrap;
}

.conteneur-flex { display: flex; }





.image {
  display: block;
  width: 100%;
  height: auto;
}

figure.col33.container img{
	
	display: block;
}




/*********************OVERLAY PHOTO BOITE ******************************/


.container {
  position: relative;
}

.container:hover .overlay {
  opacity: 1;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color:rgba(124,247,217,0.95) ;
  cursor: pointer;
}


.overlay p {
  color: white;
  font-size: 100%;
	font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}






/****************** FOOTER ****************************/

footer {
	
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 5vh;
	
}


footer p {
	background-color: white;
	width: 60%;
	color: #F6DBDB;
	font-size: 40%;
	text-align: center;
	display: block;
	margin: 0 auto 0 auto;
	padding: 2.5vh 0 2vh 0;
}


footer aside.medias {
	position: absolute;
	bottom: 0.5vh;
	right: 2vh;
	padding: 0.5vh 0 0 0;
	
	
}

footer aside.medias a {
	text-decoration: none;
	color: #FC4732;
	
}



footer aside.medias a i:hoover {
	color: #CBCBCB;
	
}

footer aside.medias a i {
	text-decoration: none;
	
}

/****************** FORMULAIRE CONTACT ****************************/



form {
	margin: 3vh 0 0 0;
}



form label {
	display: block;
	font-size: 70%;
	color: #FC4732;
	padding: 0.5vh 0 1vh 0;
	font-weight: 700;
	
}



form input {
	width: 100%;
	border-radius: 12px;
	font-size: 70%;
	font-weight: 500;
	padding: 0.5vh 0.5vh;
	border: none;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);
}



form textarea {
	width: 100%;
	border-radius: 12px;
	font-size: 70%;
	font-weight: 400;
	padding: 0.5vh 0.5vh;
	border: none;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);

}


form input#submitButton {
	display: block;
	width: 30%;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);
	color: white;
	margin: 2vh 0 0 0;
	background-color:#FC4732;  
	text-decoration: none;
	cursor: pointer;
	border: none;
	font-size: 80%;
	padding: 1vh 0 1vh 0;
	border-radius: 12px;
}




form p {
	padding: 3vh 0 0 0;
	color: #FC4732;
	font-size: 20%;
	
}






/************************** DESCRIPTION ****************************/



aside.description  {
	position: fixed;
	left: -80vw;
	top: 15%;
	z-index: 1000000;
	background-color: #FC4732;
	width: 80vw;
	height: 80%;
	
}

aside.description i {
	position: absolute;
	top: 8px;
	right: 8px;
	color: white;
	cursor: pointer;
	
	
}

i.description {
color: #FC4732;
position: fixed;
bottom: 5%;
left:1vw;
font-size: 130%;
cursor: pointer;	
}



aside.description div.textedescription  {
	width: 40%;
	margin: 20vh 4vw 4vh 4vw;
	float: right;
	
}

aside.description div.textedescription h3 {
	color: white;
	font-weight: 900;
	font-size: 230%;
}

aside.description div.textedescription p {
	padding: 4vh 0 0 0;
	color: white;
	font-size: 70%;
	line-height: 140%;
	text-align: justify;
}

aside.description figure.description {
 	float: left;
	width: 50%;
	height: 100%;
	
}

aside.description figure.description img {
	width: 70%;
	display: block;
	margin: 20% auto 0 auto;
}


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


/* ici je cache la classe .cache */

.cache {display:none;}


aside.description section {
	display: none;
}

.rotate {
	transform: rotate(180deg);
}



/****************** FOTORAMA ****************************/

div.fotorama {
	margin:0 auto 0 auto;
	display: block;
}

.fotorama__wrap {
    margin: 0 auto;
}

/**************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
*************************************************************/


@media screen and (max-width: 680px) { 
    
    /* ne pas modifier */
    body { font-size:16px; } 
    h1 { font-size:48px; }
    h2 { font-size:36px; }
    h3 { font-size:24px; }
    h4 { font-size:20px; }
    h5 { font-size:18px; }
    h6 { font-size:16px; }
    /* ne pas modifier */
    
    /* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
	
	
	
	.desktop {display: none;}
	
	.mobile {display: block;}
	

    body {
        background-color: white;
    }
    
	
	
	/****************** BODY ****************************/

body#accueil{
	
	background-image: none;
	
}

body {
	
	background-color: white;
}


/****************** HEADER  ****************************/

header {
	background-color: white;

}



header figure a {
	position: absolute;
	top: 1vh;
	left: 1vh;
	width: 5%;
}


header figure a img {
	width: 5%;
	min-width: 50px;
}

header nav.mobile i {
	position: fixed;
	top: 2vh;
	right: 2vh;
	color: #FC4732;
	font-size: 180%;
	
	}
	
	
	header nav.mobile ul {
	background-color: rgba(255,255,255,0.85);
	padding-left: 2vh;
	}

header nav {
	float: right;
	padding: 6vh 4vw 2vh 0;
	
}

header nav ul {
	word-spacing: 0;
	
	
}

header nav ul li {
	display: block; 
	text-decoration: none;
	padding: 0 0 1vh 0;
}


/****************** DIV#WRAPPER ****************************/

div.wrapper {

	width: 90%;
	margin: 0 auto 0 auto;
	padding: 150px 0;
}


div.wrapper  h2 {
	font-weight: 200;
	font-size: 80%;
	color: #FC4732;
	
}

div.wrapper  h1 {
	font-weight: 900;
	font-size: 170%;
	color: #FC4732;
	margin: 0 0 2vh 0;
	
}

div.wrapper.accueil   {
	
}

div.wrapper.accueil  h1 {
	margin: 40vh 0 0 1vw;
	color:#FC4732;
	font-size: 190%;
	font-weight: 900;
	position: absolute;
	z-index: 100;
	
}

div.wrapper.accueil  h2 {
	margin: 40vh 0 0 1vw;
	color:#FC4732;
	font-size: 110%;
	font-weight: 500;
	position: absolute;
	z-index: 100;
	padding: 6vh 0 0 0;
	
}

figure.animationaccueil {
	position: fixed;
	top: 34%;
	right: 20%;
	width: 60%;
}


figure.animationaccueil video {
	position:fixed;
	top: 12%;
	left:-45%;
	width: 150%;
	
	}

div.wrapper section  {
	
	width: 90%;
}

div.wrapper section h2 {
	font-weight: 200;
	font-size: 110%;
	color: #FC4732;
}

div.wrapper section h1 {
	font-weight: 900;
	font-size: 250%;
	color: #FC4732;
	margin: 2vh 0 2vh 0;
}

div.wrapper section article {
	
}


div.wrapper section article p {
	font-size: 90%;
	line-height: 160%;
	margin: 0 0 2vh 0;
	
	
}

div.wrapper section article p.credits {
	font-size: 80%;
	font-weight: 700; 
	margin: 1vh 0 4vh 0;
	
}

div.galleriegraphisme.mobile p
	{
		margin: 0 2vh 4vh 0;
		font-size: 170%;
		font-weight: 800;
		color: #FC4732;
	}

div.wrapper  aside.texte p {
	font-size: 65%;
	line-height: 105%;
	margin: 0 0 2vh 0;
	font-weight: 300;

}

div.wrapper figure {
	
}

div.wrapper figure img {
	display: block;
	margin: 0 auto 0 auto;
}

div.wrapper figure img figcaption {
	font-size: 40%;
}


div.wrapper a.retourauprojet {
	text-decoration: none;
	
}


div.wrapper a.retourauprojet:hover {
   text-decoration: underline;
	cursor: pointer;
	color: #FC4732;
}

div.wrapper a.retourauprojet p {
	display: block;
	margin: 60px auto 0 auto;
	text-align: center;
	color: #FC4732;
	font-weight: 800;
	font-size: 110%;
}




/****************** FOOTER ****************************/

footer {
	
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 10vh;
	background-color: white;
	
}


footer p {
	background-color: white;
	width: 60%;
	color: #F6DBDB;
	font-size: 40%;
	text-align: center;
	display: block;
	margin: 2vh auto 0 auto;
	padding: 2.5vh 0 2vh 0;
}


footer aside.medias {
	position: absolute;
	bottom: 2vh;
	right: 2vh;
	padding: 0.5vh 0 0 0;
	font-size: 140%;
	
	
}

footer aside.medias a {
	text-decoration: none;
	color: #FC4732;
	margin: 0 1vh 0 0 ;
	
}



footer aside.medias a i:hoover {
	color: #CBCBCB;
	
}

footer aside.medias a i {
	text-decoration: none;
	
}

/****************** FORMULAIRE CONTACT ****************************/



form {
	margin: 3vh 0 0 0;
	width: 100%;
}



form label {
	display: block;
	font-size: 80%;
	color: #FC4732;
	padding: 1vh 0 1.5vh 0;
	font-weight: 700;
	
}



form input {
	width: 100%;
	border-radius: 12px;
	font-size: 80%;
	font-weight: 500;
	padding: 0.5vh 0.5vh;
	border: none;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);
}



form textarea {
	width: 100%;
	border-radius: 12px;
	font-size: 80%;
	font-weight: 400;
	padding: 0.5vh 0.5vh;
	border: none;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);

}


form input#submitButton {
	display: block;
	width: 40%;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);
	color: white;
	margin: 2vh 0 0 0;
	background-color:#FC4732;  
	text-decoration: none;
	cursor: pointer;
	border: none;
	font-size: 90%;
	padding: 1vh 0 1vh 0;
	border-radius: 12px;
}




form p {
	padding: 3vh 0 0 0;
	color: #FC4732;
	font-size: 30%;
	
}






/************************** DESCRIPTION ****************************/



aside.description  {
	position: fixed;
	left: -80vw;
	top: 0;
	z-index: 1000000;
	background-color: #FC4732;
	width: 80vw;
	height: 100%;
	
}

aside.description i {
	position: absolute;
	top: 8px;
	right: 8px;
	color: white;
	cursor: pointer;
	font-size: 150%;
	
	
}

i.description {
color: #FC4732;
position: fixed;
bottom: 4vh;
left:2vw;
font-size: 160%;
cursor: pointer;
z-index: 1;
background-color: white;
}



aside.description div.textedescription  {
	width: 85%;
	margin: 4vh 4vw 4vh 4vw;
	float: none;
	
}

aside.description div.textedescription h3 {
	color: white;
	font-weight: 900;
	font-size: 150%;
}

aside.description div.textedescription p {
	padding: 4vh 0 0 0;
	color: white;
	font-size: 70%;
	line-height: 130%;
	text-align: justify;
}

aside.description figure.description {
 	float: none;
	width: 80%;
	height: 100%;
	display: block;
	margin: 0 auto 0 auto;
	
}

aside.description figure.description img {
	width: 70%;
	display: block;
	margin: 5% auto 0 auto;
}


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


/* ici je cache la classe .cache */

.cache {display:none;}


aside.description section {
	display: none;
}

.rotate {
	transform: rotate(180deg);
}

header nav.mobile ul {
display:none; 
}

/****************** FOTORAMA ****************************/

div.fotorama {
	margin:0 auto 0 auto;
	display: block;
}

.fotorama__wrap {
    margin: 0 auto;
}
    
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}



/******************************************************************
******************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
******************************************************************
******************************************************************/


@media screen and (min-width:681px) and (max-width: 1024px) { 
    
    /* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
	

	
	.desktop {display: none;}
	
	.mobile {display: block;}
	
	
	

    body {
        background-color: white;
    }
	
	body#accueil{
	
	background-image: none;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}
	
	header nav.mobile i {
	position: fixed;
	top: 4vh;
	right: 4vh;
	color: #FC4732;
	font-size: 250%;
	
	}
	
	
	header nav.mobile ul {
	background-color: rgba(255,255,255,0.85);
	padding-left: 2vh;
	}
	
	
header nav {
	float: right;
	padding: 10vh 4vw 2vh 0;
	
}

header nav ul {
	word-spacing: 0;
	
	
}

header nav ul li {
	display: block; 
	text-decoration: none;
	padding: 0 0 1vh 0;
}


/****************** DIV#WRAPPER ****************************/

div.wrapper {

	width: 70%;
	margin: 0 auto 0 auto;
	padding: 150px 0;
}


div.wrapper  h2 {
	font-weight: 200;
	font-size: 80%;
	color: #FC4732;
	
}

div.wrapper  h1 {
	font-weight: 900;
	font-size: 170%;
	color: #FC4732;
	margin: 0 0 2vh 0;
	
}

div.wrapper.accueil   {
	
}

div.wrapper.accueil  h1 {
	margin: 4vh 0 0 1vw;
	color:#FC4732;
	font-size: 220%;
	font-weight: 900;
	position: absolute;
	z-index: 100;
	
}

div.wrapper.accueil  h2 {
	margin: 4vh 0 0 1vw;
	color:#FC4732;
	font-size: 150%;
	font-weight: 500;
	position: absolute;
	z-index: 100;
	padding: 6vh 0 0 0;
	
}

figure.animationaccueil {
	position: fixed;
	top: 34%;
	right: 20%;
	width: 60%;
}


figure.animationaccueil video {
	position:fixed;
	top: 25%;
	left:5%;
	width: 80%;
	
	}

div.wrapper section  {
	
	width: 90%;
}

div.wrapper section h2 {
	font-weight: 200;
	font-size: 110%;
	color: #FC4732;
}

div.wrapper section h1 {
	font-weight: 900;
	font-size: 250%;
	color: #FC4732;
	margin: 2vh 0 2vh 0;
}

div.wrapper section article {
	
}


div.wrapper section article p {
	font-size: 90%;
	line-height: 160%;
	margin: 0 0 2vh 0;
	
	
}

div.wrapper section article p.credits {
	font-size: 80%;
	font-weight: 700; 
	margin: 1vh 0 4vh 0;
	
}

div.galleriegraphisme.mobile p
	{
		margin: 0 2vh 4vh 0;
		font-size: 170%;
		font-weight: 800;
		color: #FC4732;
	}

div.wrapper  aside.texte p {
	font-size: 65%;
	line-height: 105%;
	margin: 0 0 2vh 0;
	font-weight: 300;

}

div.wrapper figure {
	
}

div.wrapper figure img {
	display: block;
	margin: 0 auto 0 auto;
}

div.wrapper figure img figcaption {
	font-size: 40%;
}


div.wrapper a.retourauprojet {
	text-decoration: none;
	
}


div.wrapper a.retourauprojet:hover {
   text-decoration: underline;
	cursor: pointer;
	color: #FC4732;
}

div.wrapper a.retourauprojet p {
	display: block;
	margin: 60px auto 0 auto;
	text-align: center;
	color: #FC4732;
	font-weight: 800;
	font-size: 110%;
}

	
	
	
	
	

/****************** FORMULAIRE CONTACT ****************************/



form {
	margin: 3vh 0 0 0;
}



form label {
	display: block;
	font-size: 90%;
	color: #FC4732;
	padding: 0.5vh 0 1vh 0;
	font-weight: 700;
	
}



form input {
	width: 100%;
	border-radius: 12px;
	font-size: 90%;
	font-weight: 500;
	padding: 0.5vh 0.5vh;
	border: none;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);
}



form textarea {
	width: 100%;
	border-radius: 12px;
	font-size: 90%;
	font-weight: 400;
	padding: 0.5vh 0.5vh;
	border: none;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);

}


form input#submitButton {
	display: block;
	width: 40%;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.19);
	color: white;
	margin: 2vh 0 0 0;
	background-color:#FC4732;  
	text-decoration: none;
	cursor: pointer;
	border: none;
	font-size: 90%;
	padding: 1vh 0 1vh 0;
	border-radius: 12px;
}




form p {
	padding: 3vh 0 0 0;
	color: #FC4732;
	font-size: 30%;
	
}
	
	/************************** DESCRIPTION ****************************/



aside.description  {
	position: fixed;
	left: -80vw;
	top: 0;
	z-index: 1000000;
	background-color: #FC4732;
	width: 80vw;
	height: 100%;
	
}

aside.description i {
	position: absolute;
	top: 8px;
	right: 8px;
	color: white;
	cursor: pointer;
	font-size: 200%;
	
	
}

i.description {
color: #FC4732;
position: fixed;
bottom: 4vh;
left:2vw;
font-size: 200%;
cursor: pointer;
z-index: 1;
background-color: white;
}



aside.description div.textedescription  {
	width: 85%;
	margin: 8vh 4vw 4vh 4vw;
	float: none;
	
}

aside.description div.textedescription h3 {
	color: white;
	font-weight: 900;
	font-size: 200%;
	
}

aside.description div.textedescription p {
	padding: 4vh 0 0 0;
	color: white;
	font-size: 110%;
	line-height: 130%;
	text-align: justify;
}

aside.description figure.description {
 	float: none;
	width: 80%;
	height: 100%;
	display: block;
	margin: 0 auto 0 auto;
	
}

aside.description figure.description img {
	width: 70%;
	display: block;
	margin: 5% auto 0 auto;
}

/****************** FOOTER ****************************/

footer {
	
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 10vh;
	background-color: white;
	
}


footer p {
	background-color: white;
	width: 60%;
	color: #F6DBDB;
	font-size: 40%;
	text-align: center;
	display: block;
	margin: 2vh auto 0 auto;
	padding: 2.5vh 0 2vh 0;
}


footer aside.medias {
	position: absolute;
	bottom: 2vh;
	right: 2vh;
	padding: 0.5vh 0 0 0;
	font-size: 140%;
	
	
}

footer aside.medias a {
	text-decoration: none;
	color: #FC4732;
	margin: 0 1vh 0 0 ;
	
}



footer aside.medias a i:hoover {
	color: #CBCBCB;
	
}

footer aside.medias a i {
	text-decoration: none;
	
}

    
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}