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

/*Reset CSS*/

{
margin: 0px;
padding: 0px;
}

/*BLOC INTEGRALITE PAGE*/
body {
	margin-top:0px;
    } 	

div#global { 
  width:*; /*taille_page*/
  height:auto; /*taille_page*/
  margin-left: auto; /*centrage page*/
  margin-right: auto; /*centrage page*/
  background-color:#FFFFFF;
  }	
  
  

/*HEADER*/

/*Barre Supérieure*/
div#top {
    width:*;
	height:42px;
	line-height:36px;
	margin-left: auto; /*centrage page*/
    margin-right: auto; /*centrage page*/
	border-bottom: 1px solid #D8DDE9;
	/*background-color: #fcfcfd;*/
    /*background-color: rgba(245, 246, 247, 0.4);*/
	}
	
	
/*Barre Menu (logo, navigation  + menu déroulant, page active, lang)*/ 
div#menu{
     margin-left: auto;/*alignement menu au centre*/
     margin-right: auto;/*alignement menu au centre*/
     width:1000px;/*largeur menu*/
	 height:42px;
	 /*border: 1px solid #000000;*/
	 /*display: -webkit-flex;/*flexbox alignement barre navigation au centre*/
    display: flex;
    /*-webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
	/*padding-left:300px;*/
	 }

 /*case logo*/	
div#logo {/
	width:150px;
	height:42px;
	display:block;
	margin-top:6px;
	
    }

/*Case langue*/
div#menuDroit { 
    width:50px;
	height:42px;
	margin-right:0px;
	margin-top:0px;
	float:right;
	text-align:center;
	/*border: 1px solid #FF0000;*/
    }
	
.Lang {
    font-family: 'open-sans', sans-serif;
	font-size:0.6em;
	font-style:normal;
	font-weight: 600;
	color: #a4a7ae;
	text-decoration: none;
	letter-spacing: 0.1em;
    padding: 0 0.1em 0 0.1em; /*espace qui sépare le texte de la bordure de la case de chaque côté :Hor/Dro/Bas/Gau*/
	float: right;
	line-height:20px;
	}		
	
/*Case page active*/
div#pageActive {
    width:375px;
	height: 42px;
	/*border: 1px solid #e28c35;*/
    }
	
	
div#TitrepageActive {
    margin-left: auto;/*alignement menu au centre*/
    margin-right: 120px;/*alignement menu au centre*/
    width:220px;
	height: 42px;
	/*border: 1px solid #e28c35;*/
	text-align:right;
	/*background-color: rgba(148, 152, 165, 0.09);*/
    }
	
.pageactive {
    font-family: roboto, sans-serif;
    font-weight: 600;
    font-style: normal;
	font-size: 1.8em; /*taille texte etiquettes menu + menu deroulant, taille réelle de la font à l'écran*/
	color: rgba(253, 116, 102, 0.3); /*#a4a7ae;  /*couleur texte étiquettes*/
	/*color: #fd7466;*/
    text-decoration: none;
	letter-spacing: 0.08em;
	line-height:42px;
	width:220px;
	/*border: 1px solid #e28c35;
	/*margin: 3px;*/
    }	

/*barre navigation : rubriques*/
div#navigation { 
	width:425px;
	height:42px;
	padding-left:0px;
    /*display: -webkit-flex;/*flexbox alignement barre navigation au centre*/
    /*display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;*/
	/*border: 1px solid #e28c35;*/
    }
	
/*menu*/
nav ul{
    margin: 0px;/*espacement entre div top et menu nav*/
	padding:0px;
    list-style-type: none;
    }

nav li{ /*cases étiquettes menu*/
    float: left;
    width: auto;/*100% divisé par le nombre d'éléments de menu, largeur etiquette menu*/
    /*text-align: center;/*Centre le texte dans les éléments de menu*/
	height:42px;
	line-height:42px;
	/*padding: 0 0 0 0; /*espace qui sépare le texte de la bordure de la case de chaque côté :Hau/Dro/Bas/Gau, espace entre etiquettes menu*/
	/*border: 1px solid #ffffff;*/
    }
	
nav li:hover{ /*survol cases menu*/
    /*background-color: #f7f8f9;*/
	}	

nav a{ /*texte étiquettes menu*/
    font-family: roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 0.88em; /*taille texte etiquettes menu + menu deroulant, taille réelle de la font à l'écran*/
	color: #778889; /*#a4a7ae;  /*couleur texte étiquettes*/
    text-decoration: none;
    padding : 8px 10px 0 8px;/*espacement gauche texte étiquettes menu déroulant*/
	letter-spacing: 0.09em;
	margin: 3px;
    }
	
nav a:hover{ /*texte étiquettes menu survolées*/
    color: #778889; /*#686E7D; /*#FA2E24;/* couleur étiquettes survolées*/
    }	
	
nav li li a{ /*texte étiquettes menu déroulant*/
    font-family: roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 0.82em; /*taille texte etiquettes menu + menu deroulant, taille réelle de la font à l'écran*/
	color: #778889; /*#a4a7ae;  /*couleur texte étiquettes*/
    text-decoration: none;
    padding : 8px 25px 0 3px;/*espacement gauche texte étiquettes menu déroulant*/
	letter-spacing: 0.08em;
	margin: 3px;
    }
	
nav li li a:hover{ /*texte étiquettes menu déroulant survolées*/
	color: #fd7466; /*#a4a7ae;  /*couleur texte étiquettes*/
    }	
	
nav ul li{
    position: relative;
    }


nav ul::after{/*Evite que le menu n'ait une hauteur nulle*/
    content: "";
    display: table;
    clear: both;
    }
	
.navOn { /*étiquettes menu sur page active*/
	color: #fd7466!important; /* #FF6141 !important; /*!important; : pour ne pas recouvrir */
	/*border-bottom: 2px solid #FF6141;*/
	}		
		
.navOnContact { /*étiquette contact sur page active*/
	color: #FF9F00 !important; /*!important; : pour ne pas recouvrir fbbf30 */
	/*border-bottom: 2px solid #FF6141;*/
	}

/*fin menu*/

/*Menu déroulant*/
.sous{
    display: none;
	border-top: 1px solid #D8DDE9; /*#f2f5f7; /*#DEE3ED;/*superposition filet haut*/
    background-color: #FFFFFF;/*recouvre la page*/
    position: absolute;/*pour se caler avec le menu parent*/
    /*width: 140px;/*largeur menu déroulant*/
    z-index: 1000;
	text-align:left;
	/*height:24px;
	line-height:24px;*/
    }

nav > ul li:hover .sous{
    display:block;
	margin:0px;/* espacement en hauteur entre menu nav et menu déroulant, permet de faire coller le menu nav avec le menu deroulant*/
    }

.sous li{
    float: none;
    width: auto;
    text-align: left;
	/*border-bottom: 1px solid #D8DDE9;/*séparation horizontale etiquettes menu déroulant*/
	border-left: 1px solid #D8DDE9;/*contour menu déroulant*/
	border-right: 1px solid #D8DDE9;/*contour menu déroulant*/
	height:26px;/*hauteur cases menu déroulant*/
	line-height:26px;
	background-color: #fff;
	/*background-color: rgba(148, 152, 165, 0.05);*/
	padding : 0px 10px 0px 6px ;/*espacement gauche texte étiquettes menu déroulant*/
    }

.sous li:hover{
    /*background-color: #fcfcfc;*/
    }

.sous a{ 
   	border-bottom: none;
}

.sous a:hover{
    border-bottom: none;
    }
	
.sousnav{ /*texte étiquettes sous-menu déroulant*/
    font-family: roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 0.70em; /*taille texte etiquettes sous-menu deroulant, taille réelle de la font à l'écran*/
	color: #778889; /*#a4a7ae;  /*couleur texte étiquettes*/
    text-decoration: none;
	letter-spacing: 0.08em;
	padding : 0 10px 0 10px;
   }
   
.sousnav:hover{
    font-family: roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 0.70em;
	color: #fd7466; /*#a4a7ae;  /*couleur texte étiquettes*/
	padding : 0 10px 0 10px ;/*espacement gauche texte étiquettes menu déroulant*/
   }   	
/*fin menu déroulant*/

/*FIN HEADER*/



/*MAIN*/

/* PAGE ACCUEIL*/

div#page { 
    margin-left: auto;/*alignement menu au centre*/
    margin-right: auto;/*alignement menu au centre*/
    width:1000px;
	height:800px;
	text-align:center;
	/*border: 1px solid #D8DDE9;/*filet bas Accueil*/
	}
	
div#pageDroite{
    float:right;
    width:auto;
	height:800px;
	border: 1px solid #D8DDE9;	
	}
	
	
	
div#colDroite {
		float: right;
		width: 460px;
		height:800px;
		padding-top:0px;
		/*border: 1px solid #547ED9;*/
        /*display: flex;
		-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
          box-sizing: border-box;*/
		}	
		
div#texteDroite {
		float: right;
		width: 460px;
		height:410px;
		/*padding-top:0px;*/
		/*border: 1px solid #ED2E29;*/
		}		
		
.paragraphe {
       width: 460px;
	   height: auto;
       font-family: 'open-sans', sans-serif;
       font-weight: 400;
       font-style: normal;
	   font-size: 0.97em;
	   color: #778889;
	   text-decoration: none;
	   letter-spacing: 0.03em;
	   line-height: 1.5em;
	   text-align: justify;
	   margin-left:0px;
        margin-right:0px;
        padding-left:0px;
        padding-right:0px;
		padding-top:0px;
	   /*border: 1px solid #EFE600;*/
	   }
	   
/* positionnement texte paragraphe*/	   		
.absolu{position: absolute;}		

.relatif{
  position: relative;
}
.haut{
  top: 30px;/*Elément décalé de 30px vers le bas p/r à une origine*/
}
.top{
  top: 35px;/*Elément décalé de 50px vers le bas p/r à une origine*/
}
.gauche{
  left: 100px;/*Element décalé de 150px vers la droite p/r à une origine*/
}
.droite{
  right: 30px;/*Element décalé de 30px vers la gauchr p/r à une origine*/
}	
.bas{
  bottom:20px;}
	
		
		
div#imgDroite {
        float: right;
        width:460px;
		height: 320px;
		margin-left:0px;
        margin-right:0px;
        padding-left:0px;
        padding-right:0px;
		padding-top:0px;
		border: 1px solid #A774CD;
       }		
		
div#colMid {
		overflow: hidden;
		width:auto;
		height:800px;
		margin-left:0em;
        margin-right:0em;
        padding-left:1em;
        padding-right:1em;
		padding-top:0em;
		/*padding: 0px 15px 0px 0px; /*ecartement haut entre illustration et filet bas nav*/
		border: 1px solid #000000;
		}				
		
		
div#colGauche {
		float: left;
		width: 500px;
		height:800px;
		margin-left:0px;
        margin-right:0px;
        padding-left:0px;
        padding-right:0px;
		padding-top:50px;
		/*display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
		/*border: 1px solid #000000;*/
		}		
	
	
	
.centrageHorizontal { /*alignement horizontal*/
    text-align: center;
	}
	
.centrageVertical { /*flexbox / alignement vertical*/
    height: 750px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    }	
		
	
/* FIN PAGE ACCUEIL*/	
	

/* PAGES GALERIES*/
			
div#colonne1 {
		float: left;
		width: 46px;
		height:800px;
		padding: 1px 0;
		}
		
div#colonne2 {
		float: right;
		width: 46px;
		height:800px;
		padding: 1px 0;
		}
		
div#centre {
		overflow: hidden;
		width:auto;
		height:800px;
		padding: 10px 0px; /*ecartement haut entre illustration et filet bas nav*/
		display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
		}
		
/* FIN PAGES GALERIES */	   		
	
/*FIN MAIN*/	

		
/*DIAPORAMA*/

main{ /*largeur du fond déroulant visible*/
    width: 100%;
    margin: auto;
    }

.diapo{ /*Conteneur principal de tout le diaporama*/
    position: relative;
    overflow: hidden;
    }

.elements{ /*englobe ensemble des diapo ; Conteneur des "diapos"*/
    display: flex;
    transition: ;
	text-align:center; /* legende au milieu sous la diapo*/
    }

.element{ /* chacune des diapos*/
    flex: 1 0 100%;
    position: relative;
	/*background-color:#A0A0A4;*/
    }

.element > img{
    width: inherit;
	size:auto; /* conserve la taille de la diapo*/
    }
	
#nav-droite{ /*bouton fleche vers la droite + fonction JS*/
	width:30px;
    height:30px;
    margin-top:400px;/*ajustement vers le bas de l'icone fleche*/
    background-image:url(../images/flecheDroite15icone.jpg);
	float:right;
	cursor: pointer;
    }
	
#nav-gauche{ /*bouton fleche vers la gauche + fonction JS*/
    width:30px;
    height:30px;
    margin-top:400px;/*ajustement vers le bas de l'icone fleche*/
	background-image:url(../images/flecheGauche15icone.jpg);
	float:left;
	cursor: pointer;
    }	

.legende { /* legende diapo */
	 font-family: 'lato', sans-serif;
     font-weight: 400;
     font-style: normal;
	 font-size: 0.7em;
	 color:#646A75;
	 line-height: 17px;
	 text-align: center;
	 letter-spacing: 0.03em
	 }
	 
.legendePhoto { /* legende photo */
    font-family: 'open-sans', sans-serif;
     font-weight: 600;
     font-style: normal;
	 font-size: 0.52em;
	 color: #535C70; 
	 line-height: 10px;
	 text-align: center;
	 letter-spacing: 0.01em;
	 }	 

/*FIN DIAPORAMA*/


/*FORMULAIRE CONTACT*/

div#pageformulaire { 
    width:1000px;
	height:800px;
	/*background-color: #F9ECAE;*/
	/*background-image:url(../images/MaquetteContact12.jpg);*/
    }
	
div#imageFormulaire {
    width:1000px;
	height:700px;
	/*border: 1px solid #d8dce6;*/
	background-image:url(../images/MaquetteContact21.jpg);
    }	


div#Formulaire { /* bloc formulaire*/
    width: 500px;
	height: 500px;
	/*background-color: rgba(219, 219, 219, 0.3);*/
	/*background-color: #FFFFFF;*/
	float: left; /*alignement à gauche-droite*/
	margin-left:200px;
	margin-top:30px; /* alignement en hauteur*/
	padding: 25px 10px 15px 20px; /*espacement_intérieur_haut_droit_bas_gauche_formulaire*/
	/*border: 1px solid #FFFFFF;*/
	/*border-radius: 0.3em;*/
	}
	
   
form div + div {
    margin-top: 20px;/*écart_horizontal_champs*/
    }

label { /*étiquettes champs texte*/
	font-family: open-sans, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size:0.9em;
	color: #778889!important;/*#434D62;*/
	text-decoration: none;
	letter-spacing: 0.07em; /* Pour être sûrs que toutes les étiquettes ont la même taille et sont correctement alignées */
    display: inline-block;
    width: 70px; /* largeur étiquettes*/
    text-align: right;/*justification alignement texte étiquettes*/
    }

input, textarea {  /*champs texte, cases saisie*/

    font-family: 'lato', sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 1.1em;
	color: #535D73;
	text-decoration: none;
	line-height: 1.3em;
	letter-spacing: 0.04em;
    width: 400px; /* Pour que tous les champs texte aient la même dimension */
	height:40px;
	-webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
    -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
    box-sizing: border-box;
	outline: none;
    border: 1px solid #D8DDE9;/*contour cases saisie*/
	/*border: 1px solid #rgba(119, 136, 137, 0.09);*/
    /*border-radius: 0.3em;*/
	/* Pour harmoniser le look & feel des bordures des champs texte */
	background-color:#FFFFFF;
    }
	
textarea {
    vertical-align: top; /* Pour aligner les champs texte multiligne avec leur étiquette */
    height: 300px; /* hauteur zone message */
    }
	
input:focus, textarea:focus { /* Pour souligner légèrement les éléments actifs, surbrillance bordure */
    outline: none !important;
	/*border:none;*/
    /*border: 1px solid #979ca8!important; /*couleur bordure active*/
	box-shadow: 0em 0em 0.03em 0.03em #8e929c;/*contour dégradé cases saisie actives*/
    }

.button {
   width:80px; 
   height: 30px;
   font-family: open-sans, sans-serif;
  font-weight: 400;
    font-style: normal;
	font-size:0.9em;
	color: #FFFFFF!important;/*#434D62;*/
	text-decoration: none;
	letter-spacing: 0.07em; 
   background-color: #8f939f;
   float:right; /*espacement coté gauche*/
   margin-right:26px; /*espacement coté gauche*/
   margin-top: 8px; /*écart bouton champ message*/
   border:none;
   border-radius: 0.3em;
   /*box-shadow: none !important;/*désactive contour dégradé cases actives*/
   cursor: pointer;
   }
   
.button:hover {
  /*border: 1px solid #d8dce6!important;*/
  color:#FFFFFF;
  background-color:#FF6C3B;
  border:none;
   }
   
.reset {   
   width:70px; 
   height:auto;
   font-family: 'Lato', sans-serif;
   font-size:65%;
   font-style: normal;
   font-weight: normal;
   color: #6B758B;
   letter-spacing: 0.06em;
   background-color:#FFFFFF; /*#3E3E3D;*/
   float:right; /*espacement coté gauche*/
   margin-right:250px; /*espacement avec bouton envoi*/
   margin-top: 8px; /*écart bouton champ message*/
   border: 1px solid #D0D3D8;
   border-radius: 0.3em;
   /*box-shadow: none !important;/*désactive contour dégradé cases actives*/
   cursor: pointer;
   }
   
/* FIN FORMULAIRE CONTACT  */


/*FOOTER*/

div#footer {
   width:*;
   height:100px;
   /*background-color:#f2f5f7;*/
   /*background-color: rgba(148, 152, 165, 0.05);*/
   border-top: 1px solid #D8DDE9;
   }