/* Definis la police pour l'ensemble du texte */
@font-face{
	font-family: "policetexte";
	src: url("police/inter/Inter-VariableFont_slnt,wght.ttf") format("truetype");
	
}
/* Définie la police pour les titres */
@font-face{
	font-family: "policetitre";
	src: url("police/dm-serif-display/DMSerifDisplay-Regular.ttf") format("truetype");
}



/* Style pour le fond de site */
body{
	background-color: #fffcf3;
	margin: 0px;
}



/* Definis le style de l'en-tête */
header{
	color: #fae791;
	background-image: url(image/banniere.png);
	background-size: contain;
	padding-bottom: 10px;
	background-repeat: no-repeat;
	background-position: top;
}
/* DPermet d'adapter l'en-tête en fonction de l taille de l'écran */
@media(max-width:1500px){
  header{
    background-size: 100% 260px;
  }
}
header h1{
	margin: 0px;
	padding-bottom: 10px;
	font-size: 59pt;
	font-family: policetitre;
	text-transform: uppercase;
	display: flex;
	justify-content: center;
}
header nav{
	display: flex;
	justify-content: center;
}
header nav a{
	color: #fae791;
	text-decoration: none;
	font-family: policetexte;
	text-transform: uppercase;
	font-size: 18.5pt;
	transition: font-size 0.5s ease;
	padding-right: 60px;
	padding-left: 60px;
	margin-bottom: 100px;
}
header nav a:hover{
	font-size: 25pt;
}



/* Defini le style de la page home */
#pg_home{
	display: flex;
	justify-content: center;
}



/* Définie le style de la page cv */
#cv{
	display: flex;
	flex-direction: row-reverse;
}
#contenu_principal{
	display: flex;
	flex-direction: column;
	margin: 20px;
}
/* Style de la partie nom, prenom et recherche */
#titre_presentation{
	line-height: 0.5;
}
#titre_presentation h2{
	text-transform: uppercase;
	font-family: policetitre;
	font-size: 47.6pt;
	color: #e96faf;
}
#titre_presentation h3{
	text-transform: uppercase;
	font-family: policetexte;
	font-size: 14.2pt;
	color: #d1419c;
	font-weight: 300;
}
/* Style de la partie education et work */
#education_work{
	color: #2d3582;
	font-family: policetexte;
	padding-right: 30px;
}
#education_work hr{
	color: #d1419c;
}
#education_work a{
	text-decoration: none;
	color: #2d3582;
}
#education_work h3{
	font-family: policetexte;
	font-size: 18.5pt;
	color: #e96faf;
	text-transform: uppercase;
}
#education_work h4{
	font-family: policetexte;
	font-size: 15.8pt;
	color: #e96faf;
	line-height: 0.5;
}
#education_work .liste_titre{
	padding: 0;
	list-style-type: none;
}



/* Style de la partie sur le coté */
aside{
	background-image: url(image/aside.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff3fd;
	padding-bottom: 10px;
	font-family: policetexte;
	display: flex;
	flex-direction: column;
	padding: 10px;
	margin-top: 60px;
	width: 600px;
}
aside h3{
	font-size: 16.5pt;
	text-transform: uppercase;
	line-height: 0.3;
	padding-bottom: 0;
	padding-top: 10px;
}
aside hr{
	color: #fff3fd;
	width: 240px;
	margin: 0;
}
aside ul{
	list-style-type: none;
}
#photoprofil{
	padding-top: 60px;
	align-self: center;
	width: 75%;
	border-radius: 10% 30% 10% 40%;
}
/* Style de la partie contact */
.contact{
	display: flex;
  align-items: center;
  margin-right: 20px; 
}
.contact img{
	width: 10%;
  margin-right: 10px;
}
/* Style de la partie skill */
.skill{
	padding: 5px;
	font-weight: 500;
	font-size: 16pt;
	line-height: 0.8;
}
/* Style pour les logos */
.logo{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-right: 40px;
	padding-left: 40px;
}
.logo img{
  width: 15%;
}
/* Style pour la partie langue */
#lang{
	padding: 5px;
}



/* Definie le style de la page video */
#videopg{
	margin: 20px;
	display: flex;
	justify-content: space-around;
}
#videopg video{
	width: 80%;
	border-radius: 20px;
	border: 5px solid #d1419c;
}



/* Definie le style de la page jobs */
#jobs h2{
	font-size: 52pt;
	font-family: policetitre;
	color: #d1419c;
	background-color: #fae791;
	width: 70%;
	padding-left: 10px;
}
#jobs p{
	color: #2d3582;
	font-size: 14pt;
	font-family: policetexte;
	padding: 10px;
	text-align: justify;
}
#jobs img{
	margin-right: 5px;
	width: 348px;
	height: 320px;
	float: left;
	border-radius: 50%;
	shape-outside: margin-box;
}
/* Applique un fond à la partie community manager */
#community_manager{
	max-width: 1100px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.3);
	margin-top: 20px;
	padding-top: 3px;
}
/* Applique un fond à la partie web designer */
#web_designer{
	max-width: 1100px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.3);
	margin-top: 20px;
	padding-top: 3px;
	padding-bottom: 60px;
}
/* Applique un fond à la partie graphic designer */
#graphic_designer{
	max-width: 1100px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.3);
	margin-top: 20px;
	padding-top: 3px;
	margin-bottom: 40px;
}



/* Definie le style de la page form */
#form{
  background-color: #fffae8;
  max-width: 900px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.3);
	margin-top: 20px;
	padding-top: 3px;
	margin-bottom: 40px;
}
#form p {
  margin: 10px;
  font-family: policetexte;
  font-size: 16px;
  color: #2d3582;
}
/* Applique un style au texte du formulaire */
input[type="text"] {
  width: 100%;
  padding: 10px;
  background-color: #fffcf3;
  border-radius: 5px;
  font-family: policetexte;
  font-size: 14px;
  color: #2d3582;
  border: 3px solid #fffae8;
	box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.3);
}
/* Applique un style au menu déroulant du formulaire */
select {
	border: 3px solid #fffae8;
	box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.3);
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  font-family: policetexte;
  font-size: 14px;
  background-color: #fffcf3;
  color: #2d3582;
}
/* Applique un style au case à cocher du formulaire */
input[type="radio"] {
  margin-right: 10px;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-bottom: 0;
  border: 3px solid #e96faf;
  border-radius: 5px;
}
input[type="radio"]:checked {
  background-color: #e96faf; /* Couleur de fond lorsque cochée */
}
input[type="submit"], input[type="reset"] {
  background-color: #e96faf;
  color: #2d3582;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-family: policetexte;
  font-size: 16px;
  cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
  background-color: #fa2193;
}



/* Définis un style à la réponse php */
.php {
	font-family: policetexte;
	background-color: #fffcf3;
	color: #2d3582;
	text-align: center;
	max-width: 1100px;
	margin: 300px;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.3);
	margin-top: 60px;
	margin-bottom: 10px;
}



/* Définis la place du bouton pour retourner en haut */
#vers_le_haut {
  position: fixed;
  width: 25px;
  height: 25px;
  bottom: 120px;
  right: 20px;
}
#vers_le_haut img {
  width: 25px;
}



/* Definie le style du pied de page */
footer{
	background-image: url(image/pied.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	font-size: 12pt;
	font-family: policetexte;
	color: #fae791;
	font-weight: 300;
	padding-bottom: 0;
	height: 600px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
/* Applique un style à la vidéo youtube */
footer iframe{
	width: 168px;
	height: 94px;
	padding-bottom: 15px;
	padding-right: 30px;
	border: 0;
}
footer a{
	color: #fae791;
	text-decoration: none;
	padding-bottom: 15px;
}
footer img{
	width: 10%;
	padding-left: 30px;
	padding-bottom: 15px;
}
footer a:hover{
	text-decoration: underline;
}