/*VOUS POUVAIS CONSULTER UN LIEN PDF QUE J'AI MIS DANS LE FOOTER QUI SE NOMME "FOR MR FOURNERIE"
POUR SAVOIR DIRECTEMENT OU SE TROUVE L'IMAGE CLIQUABLE...
J'AI MIS DEDANS TOUT LES ELEMENTS IMPORTANT QU'IL FAUT SAVOIR ET QU'IL  FALLAIT METTRE DANS LE SITE.  */



html,body{
	background-color: #eed6c2;
	min-height: 100%;
	font-family: "DMSerif", sans-serif; 
	
	
}
/* MENU DU SITE WED*/

header{
	
	background-color:#C49D83;
	height:	90px;
	margin: 0px auto;
	border: 2px solid #713b00;
	border-radius: 20px;
	padding: 10px;
	display: flex;
	align-items: center;

}

header h1{
	text-transform:uppercase;
	font-size: 30px;
	color: #713b00;
	margin: 0;
	
}

header nav{
	margin: 10px;
	padding: 20px;

}

header nav ul{
	margin:0;
	padding:0;
	height:100%;
}

header nav ul li{
	list-style: none;
	display:inline-block;
	height: 80px;
	width: 100px;
}

header nav ul li a{
	color:black;
	text-decoration:none;
	width:100%;
	height:100%;
	line-height:50px;
	display: flex;
	align-items: center;
}

header nav ul li a:hover{
	text-decoration: underline #ab514b;
}

            /* PAGE CV */
main{
	width: 100%;
	display: flex;
	gap:10px;
}
/*COTE GAUCHE DU CV*/
aside{
	
	width: 30%;
	margin: 10px;
	border: 2px solid #713b00;
	border-radius: 20px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	
}
/*PHOTO D'IDENTITE DU CV */
aside img{
	width: 150px;
	margin: auto;
	border: 4px solid #ab514b;
	border-radius: 20px;
	
}

aside h2{
	text-align: center;
	font-family: cursive;
	color: #713b00;
}

aside dt{
	color:#ab514b;
	padding: 10px;
	font-size: 15pt;
}
aside dd{
	text-align: justify;
	font-size: 14pt;
	padding: 10px;
}
/*LES LISTES DU MENU*/
aside ul{
	list-style: none;
}
aside ul li{
	font-size: 14pt;
}
/*LES LISTES DES LANGUAGES */
aside ol{
	list-style: none;
}
aside ol li{
	font-size: 14pt;
}
/*COTER DROIT CV*/
.article-cv{
    padding-right: 90px;
    width: 70%;    
}
.article-cv h1{
	text-align: center;
	text-transform: uppercase;
	color: #ab514b;
	font-size: 3em;
}

.article-cv h3{
	text-align: center;
	position: relative;
	top: -50px;
	font-family: cursive;
	font-size: 40px;
	color: #713b00;
}
/*TEXTE DE DESCRIPTION */
.description{
	text-align: center;
	text-align: justify;
	position: relative;
	top: -50px;
	font-size: 17px;
	margin: 10px;

}

.article-cv h4{
	text-align: center;
	font-size: 20px;
	color: #ab514b;
	text-decoration: underline;
}
/*BACCALAUREAT*/
.article-cv ul li{
	font-size: 14pt;
}
.article-cv p{
	font-size: 14pt;
}
.ba h5{
	text-align: center;
	text-decoration: underline;
	color: #ab514b;
	font-size: 17px;
}
/*CONCERNANT LE BA MMI */
.ba dt{
	text-decoration: underline;
	color: #ab514b;
	font-size: 14pt;
	padding: 10px;
}
.ba dd{
	text-align: justify;
	font-size: 14pt;
}

.article-cv h5{
	font-size: 17px;

}

             /* PAGE PASSION*/
/*LA PHOTOGRAPHIE*/
.passion h1{
	text-align: center;
	color: #ab514b;
	font-size: 30pt;
	font-family: cursive;
}
.passion p{
	color:#624243;
	text-align: center;
	margin: 10px 20px;
	font-size: 19px;
	font-family: agbalumo;
}
.passion img{
	width: 284px;
	height: 210px;

}
.passion img:hover{
	transform: translateY(-9px);

}
.firstpic{
	margin-right: auto;
	margin-left: auto;
	width: fit-content;

}
.passiontwo img{
	width: 284px;
	height: 210px;

}
.secondpic{
	margin-right: auto;
	margin-left: auto;
	width: fit-content;
}


hr{
	margin: 30px;
}
/*LE CINEMA */
.cinema a{
	text-decoration: none;
	color:#ce5872;
	display: flex;
	align-items: center;
	font-size: 16pt;

}
.cinema a:hover{
	background-color:#ffffeb;
}
.cinema img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	height: 600px;
	margin-top: 30px;
	border-radius: 20px;
}
.cinema video{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	width: 500px;
	height: 315px;

}


             /* PAGE JOBS*/

.diff-jobs{
	text-align: center;
	text-align: justify;
}
.diff-jobs p{
	text-align: center;
	color: #5d2d02;
}

.diff-jobs dt{
	text-align: center;
	text-decoration: underline;
	font-size: 25pt;
	color: #66242f;
}

.diff-jobs dd{
	margin: 0 35px;
	color: #b8594b;
	font-size: 20px;
	padding: 15px;
	font-family: agbalumo;

}
/*PARTIE DEVELOPPEMENT*/
.developer{
	border: 4px solid #713b00;
	border-left-style: dotted;
	border-right-style: dotted;  
	border-radius: 20px;
	padding: 10px;
	margin: 30px 15px;

}
/* PARTIE  WEB DESIGNER */
.designer{
	border: 4px dashed #ed885d;
	border-right-style: solid;
	border-left-style: solid; 
	border-radius: 20px;
	padding: 10px;
	margin: 30px 15px;
}
/*PARTIE REALISATEUR*/
.filmaker{
	border: 4px double white;
	border-left: hidden;
	border-right: hidden;
	border-radius: 20px;
	padding: 10px;
	margin: 30px 15px;
}

               /* PAGE VIDEO */
.video h2{
	text-align: center;
	font-family: cursive;
	color: #ab514b;
	font-size: 30pt;

}
.video p{
	text-align: center;
	font-family: agbalumo;
	font-size: 16pt;
	color: #781e30;
}
/*MA VIDEO EN ANGLAIS*/
.video video{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 550px;
	height: 315px;
	border: 5px dashed white;
	border-radius: 20px;

}
/* LA VIDEO YOUTUBE*/
iframe{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 5px dashed yellow;
	border-radius: 20px;
	width: 550px;
	height: 315px;

}

           /*LE FORMULAIRE */

.formulaire{
	border: 2px solid #ab514b;
	border-radius: 20px;
	margin: 100px;
}

.formulaire h3{
	text-align: center;
	font-family: cursive;
	color: #ab514b;
	font-size: 25pt;
}
.formulaire p{
	text-align: center;
}
.formulaire input{
	text-align: center;
}
.formulaire input{
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.formulaire textarea{
	text-align: center;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}

           /*FOOTER DU SITEWEB*/
footer{
	display: flex;
	width: 100%;
	bottom: 0;
	position: relative;
	color: black;
	background-color:#C49D83 ;
	padding: 0px;
	margin: 0px auto;
    box-sizing: border-box;
    border: 2px solid #d2945e;
    border-radius: 20px;
}
footer h5{
	color: #713b00;
}
footer address{
	color: #713b00;
}
footer ul{
	list-style: none;
}
footer a{
	text-decoration: none;
	color: #ab514b;
}
footer a:hover{
	text-decoration: underline;
}

footer address{
	position: absolute;
	right: 10px;
    top:5px;

}
footer address a{
	display: block;
	
}
/*LES LOGOS DE VALIDATION HTMML/CSS*/
footer img{
	border:0;
	width:50px;
	height:20px;
	position: absolute;
	right: 80px;
	bottom: 5px;
}