body{
	background-color: white; /* Fond blanc pour toute la page */
	margin: 0; 
}

main{
	display: flex; /*permet de rendre flexible les élements*/
	flex-direction: row; /*alignement horizontal*/
}
/*********** Style pour le nav bar***************/

header{
	background-color: white;
	margin: 10px;
	padding: 3em;
	display: flex; /*permet de rendre flexible les élements*/
	flex-direction: row;  /* Alignement horizontal*/    
	justify-content: space-between; /* Alignement aux extremité*/    
	box-shadow: 0px 12px 0px 0px #88A779 ; /* ombre de la nav*/
}
header ul{	
	display: flex; /*permet de rendre flexible les élements*/
}
header ul li a{
	text-decoration: none; /*enlever le soulignement*/
	color: #88A779;
	font-size: 15px;

}
header li{
	display: inline; /*afficher les éléments sur la ligne*/
	margin-left: 10px;
}

header h1 {
	font-size: 50px;
}
/***************PAGE ACCUEIL*************************/
aside{
	display: flex; /*permet de rendre flexible les élements*/
	flex-direction: column; /* allignement verticale */
	align-items: center;  /* Centre les éléments horizontalement */
	background-color:white;
	width: 50%;
	height: 50%;
	margin-top: 15px; /* Espace au-dessus de la section */
	min-height: 50vh; /*hauteur minimal de la fenètre*/
	color: black;
}
 aside hr{
	width: 50%;
}
aside img{
	width: 290px;
	height: 380px;
	padding: 1em; /*espace autour de l''image*/
}

aside #pdp{
	border-radius: 50px;
	border: solid;
	border-color: #88A779;
}

aside ul li{
	list-style: none; /*Supprimer les points de la liste*/
	display: flex;    /*permet de rendre flexible les élements*/
}

aside ul li img{
	width: 50px;
	height: 50px;
}
aside ul{
	display: flex; /*permet de rendre flexible les élements*/
	flex-direction: column;  /* Aigner de manière verticale*/
	padding: 1em; /*Espcement autour de la liste*/
}

#b2{
	text-align: center; /*mettre le texte au centre*/
	margin-top: auto;
	margin-bottom: auto;
	font-size: 25px;
	background-color:#88A779;
	margin-top: 15px;
	min-height: 50vh;
	color: white;
}
#b2 h1{
	text-align: center; /*mettre le texte au centre*/
	font-size: 100px;
}
#b2 h2{
	text-align: center; /*mettre le texte au centre*/
	font-size: 50 px;
}

/* Bas de page*/
footer{
	display: flex;   /*permet de rendre flexible les élements*/
	justify-content: space-around; /*espacement uniforme*/ 
	background-color: #88A779;
	margin-top: 10px;
	padding: 3em;  /* espacement interne*/
	top: 0;
	left: 0;
	box-shadow: 10px 10px 0px 10px #88A779 ;
}
footer p {
	background-color: white;
	border-radius: 10px;
	text-align: justify; /*texte jusitié*/
	margin-right: 150px;
	font-size: 20px;
	color: black;
}
#c {
	border-radius: 10px;
	background-color: white;
}
footer h3 a {
	align-items:center ;
	text-decoration: none; /*Enlevez le soulignement*/
	color: black;
}


/******************** Page contact,formulaire*****************************/

#bloc2{
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;  /*Flexibilté du site*/
    justify-content: center;  /* centre horizontalement*/
    align-items: center;
    height: 100vh;
}

form{
	display: flex; /*Flexibilté du site*/
	flex-direction: column;  /* centre horizontalement*/
	align-items: center;
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 50px;
}

        /* Style du conteneur du formulaire */
.formulaire {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

        
.formulaire h2 {
	text-align: center;
     color: #333;
}

        /* Style des champs de formulaire */
input[type="text"], input[type="email"], input[type="password"], textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;  /* Inclut la bordure et le padding dans la largeur totale */
    font-size: 14px;
    background-color: #f9f9f9;
}
/*Style des espace du formulaire quand ils sont sélectionnés*/
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: #5c6bc0;
    background-color: #fff;
}

button {
    background-color: #88A779;
    color: #fff;
    padding: 12px 20px;  /* Espacement interne pour agrandir le bouton */
    border: none;  /* Supprime la bordure */
    border-radius: 4px;
    width: 100%;
    cursor: pointer; /* le curseur devient une main*/
    font-size: 16px;
}

label {
    font-size: 14px;
    color: #555;
 }

        /* Espacement général */
.form-group {
     margin-bottom: 15px;
}


/******************* PAge video*******************/
#b3{
	border-radius: 20px;
	margin-top: 40px;
	display: flex;  /*flexibilité du contenue*/
	background-color:#88A779;
	width: 75%;
	height: 75%;
	margin-left:auto;
	margin-right:auto;
	flex-direction: column; /*Alignement vertical*/
}

#b4{
	border-radius: 25px;
	background-color:white;
	width: 50%;
	height: 100%;
	margin-left: auto;
	margin-right:auto ;
	margin-top: 15px;
	margin-bottom: 15px;
	min-height: 50vh;
	color:black;
	display: flex; /*flexibilité du contenue*/
	flex-direction: column; /*Alignement vertical*/
}

iframe, video{
	margin-right: auto;
	margin-left: auto;
	width: 75%;
}

#b4 img{
	margin-right: auto;
	margin-left: auto;
	width: 60%;
	height: 50%;
	display: flex;  /*flexibilité du contenue*/
	flex-direction: column; /*Alignement vertical*/
}
#b4 h1 {
	text-align: center;  /*Centrer le texte*/
	font-size: 50px;
}
#b4 h2{
	text-align: center;  /*Centrer le texte*/
	font-size: 20px;

}
/******************* Page Futurs jobs**************** */

#b5{
	border-radius: 20px;
	display: flex;  /*flexibilité du contenue*/
	background-color:#88A779;
	width: 75%;
	height: 75%;
	margin-left:auto;
	margin-right:auto;
	margin-top: 15px;
	flex-direction: column; /*Alignement vertical*/
}
#b5 h1{
	text-align: center; /*Centrer le texte*/
	color: white;
	font-size: 50px;
}
#b5 h2 {
	color: white;
	font-size: 30px;
	margin-left: 10px;
	margin-right: 10px;
}
#b5 p{
	color: white;
	font-size: 20px;
	text-align: justify; /*Le texte est justifié*/
	margin-left: 15px;
	margin-right: 15px;

}

/*************** projects******************/
section{
	display: flex;  /*flexibilité du contenue*/
	align-items: center; /*Centrer le texte*/
	justify-content: center; /* aligner le contenue*/
	flex-direction: column; /*Alignement vertical*/
}
.project{
	display: flex;  /*flexibilité du contenue*/
	margin-top: 80px;
	flex-wrap: nowrap; /*Empêche le retour à la ligne et réduit les espaces blanc*/
	align-items: center;/* Centre les éléments*/
	margin-left:auto;
	margin-right:auto;
}
.project img{
	width: 400px;
    height: 200px;
}
#b6{
	display: flex;  /*flexibilité du contenue*/
	background-color:#88A779;
	height: 90%;
	margin-left:auto;
	margin-right:auto;
	margin:10px;
	color: white;
}