/*rgb(237,189,66) jaune #FFD700
 #E6007E magenta
rgb(61,160,248) cyan #00AEEF
rgb(129,213,83) vert 
rgb(18,36,79)  bleu nuit
*/

/*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: "Open Sans", "Calibri Light", Arial, sans-serif;
text-transform:uppercase;
font-size :175%;
text-align: center;
color:#E6007E ;
margin-bottom : 30px
}

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


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

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:#E6007E  ;
border-radius: 20px;
cursor: pointer;
display: inline-block;
}

.bouton_principal:hover{
background:#FF2DAF;
}

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

.menu-trigger {
  display: none;
  color: white;
  background: rgb(18,36,79);
  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: rgb(15,36,82) ;
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:#E6007E;
}

.Navigation	a{
display:block;
text-decoration:none;
padding-left:20px;
padding-right:20px;
height : 60px;
line-height : 60px;
text-align: center ;  
color:white;
-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:#E6007E ;
}

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

#Contenu1, #Contenu2{
cursor: pointer;	
}


.Niveau2{
background: rgb(18,36,79) ;
color:white;
z-index :10;
}

.Niveau2 a{
width:300px;
}
	#Niveau2_1{
	position:absolute;
	left:0;
	}

.Niveau2 a{
color:white
}

#lien_linkedin, #lien_instagram{
display: inline;
}




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

.item{
background-size : cover;
height: 90vh;
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:rgba(18,36,79,0.7);
}

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

.text_contenu_carousel h1{
text-align:center;
color : white
}

.text_contenu_carousel p{
color:white;
}


.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:  #E6007E  ;
}

.bouton_carousel:hover{
background:  #FF2DAF  ;
}


/*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 : 60%;
}

.image_droite{
width : 30%;
}

.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:rgb(18,36,79);
}

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

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