/* vert pomme #B9CAB2 rgb(181,107,175)
vert foncé #1C6B65 rgb(28,107,101)
*/

/*informations générales----------------------------------------*/

@font-face{
	font-family:"roboto";
	src:url(fonts/RobotoRegular.woff);
}

body{
margin:0;
text-align: center;
}

*{
font-family: "Open Sans", "Calibri Light", Arial, sans-serif;
}

.ContenuPadding{
width : 1000px ;
padding-top: 50px;
padding-bottom: 50px;
margin-right : auto;
margin-left:auto;
text-align: justify;
}

.ContenuSansPadding{
min-width:1000px;
}


h1{
font-family: "Noteworthy", "Open Sans", "Calibri Light", Arial, sans-serif;
text-transform:uppercase;
font-size :175%;
text-align: center;
color:#1C6B65 ;
margin-bottom : 30px
}

h2{
font-size :150%;
text-align: left;
color:#1C6B65 ;
}


h3{
font-size:150%;
color:black;
text-align: justify;
}

strong{
font-size:125%;
padding-left : 15px;
color : #1C6B65
}

p{
font-size:125%;
text-align: justify;
color:rgb(90,90,90);
}

/*p*/.texte_medium{
font-size:115%;
}

a:hover{
text-decoration:none;
}

.bouton_principal{
font-size: 90%;
text-transform: uppercase;
width: 30%;
text-align: center;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-o-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out;
color: white;
background:#1C6B65 ;
border-radius: 20px;
cursor: pointer;
display: inline-block;
}

.bouton_principal:hover{
background:#B9CAB2 ;
}

.puce{
width :10px ;
margin-bottom : 3px;
}


/* Header-------------------------------------------------------------------------*/
#logo_header{
z-index:10000;
height:50px;
position:absolute;
top:5px;
left:0px;
}

.menu-trigger {
  display: none;
  color: white;
  background: white;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 60px;
  cursor: pointer;
}

#padding_header{
width:1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}

#logo_header_responsive{
z-index:10000;
height:50px;
position:relative;
top:5px;
}

#icone_menu_responsive{
height : 20px;
width:20px;
top:20px;
position:absolute;
left:15px;
}


#header{
font-size:90%;
text-transform:uppercase;
text-align: right;
width: 100%;
margin-left:auto;
margin-right:auto;
background: white ;
z-index: 1000;
}


.Navigation{
text-align: center;
margin-bottom:0;
}

.Navigation, .Navigation ul{
margin:0;
padding:0;
list-style-type: none;
}

.Navigation li{
display:inline-block;
position:relative;
margin-left : 0px;
margin-right : 0px;
}

.Navigation li:hover{
color:#1C6B65;
}

.Navigation	a{
display:block;
text-decoration:none;
padding-left:20px;
padding-right:20px;
height : 60px;
line-height : 60px;
text-align: center ;  
color:#1C6B65;
-webkit-transition : all 0.3s ease-in-out ;
-o-transition :  all 0.3s ease-in-out ;
-ms-transition :  all 0.3s ease-in-out ;
-moz-transition : all 0.3s ease-in-out ;
-webkit-transition : all 0.3s ease-in-out ;
}

.Navigation a:hover{
color:#B9CAB2 ;
}

.Navigation ul{
display:none;
position : absolute;
}



#lien_linkedin, #lien_instagram{
display: inline;
}




/*carousel_index-----------------------------------------------------------------------*/

.item{
background-size : cover;
height: 80vh;
position:relative;
min-width:1000px;
}

#item1{
background: url("images/carousel/carousel1.jpg") center no-repeat ; 
}

#item2{
background: url("images/carousel/carousel2.jpg") center no-repeat ; 
}

#item3{
background: url("images/carousel/carousel3.jpg") center no-repeat ; 
}

.contenu_carousel{
width:50%;
height:90vH;
margin-left : 15%;
background-color : rgba(255,255,255,0.8);
}

.text_contenu_carousel{
width : 90%;
height:90vh;
margin:auto;
padding-top:25%
}

.text_contenu_carousel h1{
text-align:center;
color : #1C6B65 
}

.text_contenu_carousel p{
color:rgb(90,90,90);
}


.bouton_carousel{
text-transform:uppercase;
text-align: center ;
padding : 10px;
padding-right : 20px;
padding-left : 20px;
-o-transition :  background 0.3s ease-in-out ;
-ms-transition :  background 0.3s ease-in-out ;
-moz-transition : background 0.3s ease-in-out ;
-webkit-transition : background 0.3s ease-in-out ;
color : white ;	
cursor: pointer;
display:inline-block;
border-radius: 20px;
margin-top:40px;
width:50%;
margin-left:50%;
transform: translate(-50%,0);
background:  #1C6B65  ;
}

.bouton_carousel:hover{
background:#B9CAB2;
}


/*Index responsive--------------------------------------------------------------------------*/
#accueil_index {
  background: url("images/carousel/index_responsive.jpg") center no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
  min-width: 1000px;
  display: none;
}

#contenu_accueil_index {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 100%;
}

#contenu_accueil_index h1 {
  text-align: center;
  font-size: 350%;
  color: white;
}



/*image_gauche_texte_droite---------------------------------------*/
.image_gauche_texte_droite{
display:flex; 
flex-wrap: wrap; 
justify-content: space-between;
}

.image_gauche{
width : 30%;
}

.texte_droite{
width : 60%;
}

/*texte_gauche_image_droite-----------------------------------*/
.texte_gauche_image_droite{
display:flex; 
flex-wrap: wrap; 
justify-content: space-between;
}

.texte_gauche{
width : 50%;
}

.image_droite{
width : 40%;
padding : 3%
}

.image_droite p {
color : white;
padding-left : 15px;
}

.image_droite_responsive{
width : 30%;
display:none;
}



/*image en fond sur la totalite de l'ecran---------------------*/
.contenu_sur_image_fond{
background: rgba(0, 0, 0, 0.6);
padding-top: 150px;
padding-bottom:150px;
padding-left: 30%;
padding-right: 30%;	
} 

/*page divisée en 3--------------------------------------------*/
.division_page {
  width: 32%;
}
 

/*Formulaire de contact---------------------------------------*/
.InfoContact {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  height: 30px;
  border: 0px;
  border-bottom: 1px solid rgb(200, 200, 200);
}

.message_contact {
  width: 100%;
  height: 200px;
  margin-top: 30px;
  margin-bottom: 5px;
  border: 1px solid rgb(150, 150, 150);
}


/*footer-------------------------------------------------------*/

footer{
padding:15px;
background:#1C6B65;
}

footer p {
text-align: left;
color:rgb(230,230,230);
}

footer h2{
color : #B9CAB2;
}

.item_footer:nth-child(1){
width:25%;
}
.item_footer:nth-child(2){
width:50%;
}
.item_footer:nth-child(3){
width:25%;
}