/** SOMMAIRE */
/**
- Reset CSS
- Imports
- General
- Header
- Left
- Right
- - about
- - resume
- - works
- - contact





/**************/
/** Reset CSS */
/**************/
html{
    box-sizing: border-box;
}
html, body{
    width: 100vw;
    height: 100vh;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/**************/
/**  Imports  */
/**************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');



/**************/
/**  General  */
/**************/
body{
	font-family: 'Poppins', sans-serif;
}
html, #indexMainContainer{
	background: rgb(38, 38, 45);
}
#indexMainHeader, #leftSection, #leftSectionBackground{
	border-radius: 5px;
}
#rightSection, #about, #resume, #works, #contact{
	border-radius: 0 5px 5px 0;
}
#indexMainHeader, #leftSection, #about, #resume, #works, #contact, .modal{
	background-color: #31313a;
}
#indexMainContainer{
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(224, 224, 225);
}
#indexContainer{
	display: flex;
	align-items: center;
	justify-content: center;
}
#mobileDecalUnderNavbar{
	min-height: 110px;
}
.bold{
	font-weight: bold;
}




/**************/
/**   Header  */
/**************/
#topHeaderMobile{
	display: none;
	align-items: center;
	margin-bottom: 3px;
}
#topHeaderMobile > section:nth-child(1){
	width: 35px;
	padding: 10px;
	margin: 0 10px 0 0;
	display: flex;
	align-items: center;
}
#topHeaderMobile > section:nth-child(1) > img{
	width: 35px;
	border-radius: 50%;
}
#topHeaderMobile > section:nth-child(2) > section:nth-child(1){
	margin-bottom: 5px;
	font-size: 0.8em;
}
#topHeaderMobile > section:nth-child(2) > section:nth-child(2){
	color: orange;
	font-size: 0.6em;
}
#topHeaderMobile, #indexHeaderNav{
	border-radius: 5px;
	background-color: #31313a;
}

#indexMainHeader{
	width: max-content;
	margin-right: 10px;
	background: rgb(38, 38, 45);
}
#indexMainHeader > section > ul > li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 70px;
	padding: 10px;
	font-size: 0.7em;
}
#indexMainHeader > section > ul > li::after{
	content: '';
	width: 70px;
	height: 1px;
	background: radial-gradient(ellipse at right, rgba(197, 202, 213, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
	position: relative;
	top: 20px;
	right: -10px;
}
#indexMainHeader > section > ul > li > svg{
	fill: rgb(224, 224, 225);
	margin-bottom: 10px;
}
#indexMainHeader > section > ul > li:hover > svg{
	fill: orange;
}
#indexMainHeader > section > ul > li:hover{
	color : orange;
}










/**************/
/**    Left   */
/**************/
#leftSection{
	width: 480px;
	height: 630px;
}
#leftSectionBackground{
	width: 100%;
	height: 315px;
	overflow: hidden;
	background-image: url(./Ressources/images/leftSectionBackground.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
#leftSectionBackground::before{
	content: '';
	position: relative;
	background-color: #31313a;
	transform: rotate(12deg);
	width: 100%;
	height: 70%;
	display: block;
	top: 90%;
	left: -28%;
}
#leftSectionBackground::after{
	content: '';
	position: relative;
	background-color: #31313a;
	transform: rotate(168deg);
	width: 100%;
	height: 70%;
	display: block;
	top: 19%;
	left: 30%;
}
#leftSectionBackground > img{
	width: 175%;
}
#roundProfil{
	display: flex;
	justify-content: center;
	margin-top: -75px;
}
#roundProfil > img{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border-style: solid;
	border-width: 3px;
	border-color: rgb(47, 47, 53);
	z-index: 1;
}
#nameAndTitle > p{
	display: flex;
	justify-content: center;
}
#nameAndTitle > p:nth-child(1){
	font-size: 2em;
	margin: 20px 0 10px 0;
}
#nameAndTitle > p:nth-child(2){
	color: orange;
	min-height: 16px;
}
#linksRS > ul{
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

#leftSectionBtn > section > section{
	display: flex;
	width: 480px;
	height: 80px;
	justify-content: space-around;
	align-items: center;
	align-items: center;
	margin-top: -70px;
}
#leftSectionBtn > section > section > section{
	width: 50%;
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: center;
}
#leftSectionBtn::before{
	content: '';
	width: 480px;
	height: 1px;
	background: radial-gradient(ellipse at top, rgba(197, 202, 213, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
	position: relative;
	margin: 40px 0 0 0px;
	display: block;
}
#leftSectionBtn > section > section > section > a{
	text-decoration: none;
	color: rgb(224, 224, 225);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#leftSectionBtn > section{
	height: 80px;
}
#leftSectionBtn > section::before{
	content: '';
	width: 1px;
	height: 70px;
	background: radial-gradient(ellipse at top, rgba(197, 202, 213, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(197, 202, 213, 0) 100%);
	position: relative;
	margin: 0px 0 0 240px;
	display: block;
}






/**************/
/**   Right   */
/**************/
#rightSection, #about, #resume, #works, #contact{
	width: 700px;
	height: 600px;
}
.rightSectionBloc{
	padding: 30px;
}
/* .rightSectionBloc:nth-child(1) > .rightSectionBlocTitleFixed{
	position: fixed;
	background-color: #31313a;
	height: 82px;
	width: 670px;
	margin: -30px;
	display: flex;
	align-items: center;
	padding: 0 0 0 30px;
} */
.rightSectionBloc > .rightSectionBlocTitle::after{
	content: '';
	margin: 30px 0 0 -15px;
	height: 1px;
	background: radial-gradient(ellipse at left, rgba(197, 202, 213, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
	position: relative;
	display: block;
}
/* .rightSectionBloc > .rightSectionBlocTitleFixed::after{
	content: '';
	margin: 78px 0 0 -171px;
	width: 650px;
	height: 1px;
	background: radial-gradient(ellipse at left, rgba(197, 202, 213, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
	position: relative;
	display: block;
} */
.rightSectionBloc > .rightSectionBlocTitle > p{
	font-size: 20px;
	font-weight: bold;
}
.rightSectionBloc > .rightSectionBlocTitle > p > span/* ,
.rightSectionBloc > .rightSectionBlocTitleFixed > p > span */{
	color: orange;
}
.rightSectionBloc > .rightSectionBlocContent{
	margin-top: 40px;
	padding: 0 0 0 20px;
}

#about, #resume, #works{
	max-height: 600px;
	overflow: scroll;
	scrollbar-width: thin;
	scrollbar-color: rgb(224, 224, 225) rgba(224, 224, 225, 0);
}






/**************/
/**   about   */
/**************/
#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2)
{
	margin-top: 30px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(1){
	line-height: 1.4em;
}
#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(1),
#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > ul > li > span,
#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > ul > li > span > a,
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(2) > section:nth-child(3),
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(2) > section:nth-child(4){
	color: #aaaaaa;
}
#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > ul > li{
	margin-bottom: 10px;
}
#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > ul > li > span > a{
	text-decoration: none;
}
#about_logos > section{
	margin-top: 15px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
#about_logos > section > section.subfoxIMG > a,
#about_logos > section > section.cybermalveillanceIMG > a{
	width: 200px;
	display: block;
	margin: 15px 40px;
}
#about_logos > section > section.subfoxIMG > a > img,
#about_logos > section > section.cybermalveillanceIMG > a > img{
	width: 100%;
}



/**************/
/**   resume  */
/**************/
#resume > .rightSectionBloc > .rightSectionBlocContent > ul{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #aaaaaa;
	padding: 10px 0;
	margin-bottom: 10px;
}
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li{
	display: flex;
	margin: 15px 0 0px 0;
	word-wrap: break-word;
}
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(1),
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(1) > img{
	height: 30px;
	margin-left: -7.5px;
}
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(2){
	padding-left: 30px;
	max-width: 85%;
}
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(2) > section{
	margin-bottom: 13px;
}
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(2) > section:nth-child(1){
	border-style: solid;
	border-width: 1px;
	border-color: orange;
	border-radius: 5px;
	padding: 4px;
	width: max-content;
	color: orange;
}
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(2) > section:nth-child(2){
	font-size: 1.5em;
}
#resume > .rightSectionBloc > .rightSectionBlocContent > ul > li > section:nth-child(2) > section:nth-child(4){
	text-align: justify;
}

#resume > .rightSectionBloc:nth-child(3) > .rightSectionBlocContent{
	display: flex;
	justify-content: space-around;
}
#competences > section > section:nth-child(2), #qualites > section > section:nth-child(2){
	display: flex;
	justify-content: center;
}
#competences > section > section:nth-child(2) > ul > li, #qualites > section > section:nth-child(2) > ul > li{
	height: 50px;
}
#competences > section > section:nth-child(2) > ul > li > section:nth-child(1){
	margin-bottom: 8px;
}
#qualites > section > section:nth-child(2) > ul > li > section:nth-child(1){
	margin-bottom: 4px;
}
#competences > section > section:nth-child(2) > ul > li > section:nth-child(2) > section:nth-child(1){
	width: 250px;
	height: 4px;
	background-color: #aaaaaa;
}
#competences > section > section:nth-child(2) > ul > li > section:nth-child(2) > section:nth-child(2){
	height: 4px;
	margin-top: -4px;
	background-color: orange;
}
#qualites > section > section:nth-child(2) > ul > li > section:nth-child(2){
	display: flex;
	flex-direction: row;
}
#qualites > section > section:nth-child(2) > ul > li > section:nth-child(2) > section:nth-child(1n){
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: #aaaaaa;
	margin-right: 5px;
}
#qualites > section > section:nth-child(2) > ul > li > section:nth-child(2) > section.qualiteActive{
	background-color: orange;
}
#competAndQualite{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#competAndQualite > section{
	width: 350px;
}
#competAndQualite > section#competences > section.rightSectionBloc{
	width: 315px;
}
#competAndQualite > section#competences > section.rightSectionBloc > section.rightSectionBlocTitle::after{
	width: 350px;
}






/**************/
/**   works   */
/**************/
#works > .rightSectionBloc > .rightSectionBlocTitle > section{
	display: flex;
	justify-content: center;
}
#works > .rightSectionBloc > .rightSectionBlocTitle > section > ul{
	display: flex;
	flex-direction: row;
	width: 50%;
	justify-content: space-around;
}
#works > .rightSectionBloc > .rightSectionBlocTitle > section > ul > li{
	color: #aaaaaa;
	border-style: solid;
	border-width: 1px;
	border-color: #31313a;
	border-radius: 5px;
	padding: 4px;
}
#works > .rightSectionBloc > .rightSectionBlocTitle > section > ul > li:hover{
	color:#aaaaaa;
	border-color: #aaaaaa;
}
#works > .rightSectionBloc > .rightSectionBlocContent > section{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#works > .rightSectionBloc > .rightSectionBlocContent > section > article{
	margin-bottom: 45px;
}
#works > .rightSectionBloc > .rightSectionBlocContent > section > article > section:nth-child(odd){
	margin: 0 22.5px;
}
#works > .rightSectionBloc > .rightSectionBlocContent > section > article > section:nth-child(1){
	width: 250px;
	height: 140px;
}
#works > .rightSectionBloc > .rightSectionBlocContent > section > article > section:nth-child(1) > img{
	width: 250px;
	height: 140px;
}




/**************/
/**  contact  */
/**************/
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section{
	padding: 40px 0px;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul{
	display: flex;
	flex-direction: column;
	align-items: center;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li{
	margin-bottom: 20px;
	width: 320px;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li > a{
	display: flex;
	text-decoration: none;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li > a > section:nth-child(2) > p{
	color: white;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li:hover > a > section:nth-child(2) > p{
	color: orange;
}
/* #contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li:nth-child(1):hover > section:nth-child(2) > p{
	text-decoration: underline;
	text-decoration-color: green;
	text-underline-offset: 3px;
	color: green;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li:nth-child(2):hover > section:nth-child(2) > p{
	text-decoration: underline;
	text-decoration-color: cornflowerblue;
	text-underline-offset: 3px;
	color: cornflowerblue;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li:nth-child(3):hover > section:nth-child(2) > p{
	text-decoration: underline;
	text-decoration-color: red;
	text-underline-offset: 3px;
	color: red;
} */
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li > a > section:nth-child(1){
	margin-right: 20px;
}
#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li > a > section:nth-child(2){
	display: flex;
	align-items: center;
}



.mentionsLegalesLink{
	top: -25px;
	position: relative;
	height: 25px;
	text-align: center;
}
.mentionsLegalesLink > section > p{
	color: white;
}
.mentionsLegalesLink > section > p > span{
	cursor: pointer;
}
.modalContainer{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	filter: blur(1);
	background-color: rgba(10, 10, 10, 0.5);
	color: white;
	display: none;
}
.modalContainer a{
	text-decoration: none;
	color: #aaaaaa;
}
.closeModalBtn{
	cursor: pointer;
}
.modal{
	width: 60vw;
	height: 85vh;
	z-index: 99;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	overflow-x: hidden;
}
.modal > section{
	width: calc(60vw - 60px);
}
.modalHeader{
	display: flex;
	height: 50px;
	padding: 35px 30px 10px 30px;
	background-color: #31313a;
	border-radius: 10px 0;
}
.modalHeader > section:nth-child(1){
	width: calc(100% - 50px);
	font-size: 20px;
	font-weight: bold;
}
.modalHeader > section:nth-child(1)::after{
	content: '';
	margin: 30px 0 0 0;
	height: 1px;
	background: radial-gradient(ellipse at left, rgba(197, 202, 213, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
	position: relative;
	display: block;
	width: calc(100% + 50px);
}
.modalHeader > section:nth-child(1) > span{
	color: orange;
}
.modalHeader > section:nth-child(2){
	width: 50px;
	display: flex;
	justify-content: flex-end;
}
.modalBody{
	padding: 0 30px 30px 30px;
	height: calc(100% - 50px);
	overflow-y: scroll;
}
.mentionsLegalesElement > section:nth-child(1){
	margin: 40px 0 20px 0;
	font-weight: bold;
}
.mentionsLegalesElement > section:nth-child(2) > p{
	color: #aaaaaa;
	line-height: 1.5em;
	text-align: justify;
}
.mentionsLegalesElement > section:nth-child(2) > p .bold,
.mentionsLegalesElement > section:nth-child(2) > p .bold > a{
	color: #dddddd
}

@media only screen and (min-width : 768px) and (max-width : 1350px) {
    #about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > ul:nth-child(1){
		margin-right: 40px;
	}
	#resume > .rightSectionBloc:nth-child(1), #resume > .rightSectionBloc:nth-child(2){
		padding-left: 60px;
	}
}
/* smartphone */
@media only screen and (min-width : 321px) and (max-width : 1350px) {
	#indexContainer{
		overflow: scroll;
		flex-direction: column;
		margin-top: 168px;
	}
	#indexMainContainer{
		flex-direction: column;
	}
	#indexMainHeader{
		position: fixed;
		top: 10px;
		margin-right: 0 !important;
	}
	#indexHeaderNav > ul{
		display: flex;
		justify-content: space-around;
		width: 95vw;
	}
	#indexMainHeader > section > ul > li::after{
		background: none;
	}
	#about, #resume, #works, #contact{
		border-radius: 5px;
	}
	.rightSectionBlocContent{
		padding: 0 !important;
	}


	#leftSection{
		width: 95vw;
		margin-bottom: 10px;
		height: 900px;
		margin-top: 110px;
	}
	#leftSectionBackground{
		height: 590px;
	}
	#leftSectionBtn::before{
		width: 95%;
	}
	#leftSectionBtn > section > section{
		width: 95vw;
	}
	#leftSectionBtn > section::before{
		margin: 0px 0 0 50%;
	}
	#rightSection, #about, #resume, #works, #contact{
		width: 95vw;
	}



	#about, #resume, #works, #contact{
		display: block;
		margin-bottom: 10px;
		max-height: none;
		height: auto;
	}
	#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2){
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > ul{
		width: 280px;
		margin: 0 25px;
	}
	#about > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > ul{
		margin: 0;
	}
	#resume{
		background-color: rgb(38, 38, 45);
	}
	#resume > .rightSectionBloc{
		margin-bottom: 10px;
	}
	#resume > .rightSectionBloc, #competAndQualite{
		background-color: #31313a;
	}
	#contact > .rightSectionBloc > .rightSectionBlocContent > section:nth-child(2) > section > ul > li{
		display: flex;
		justify-content: center;
	}
	.modal{
		width: 85vw;
	}
	.modal > section{
		width: calc(85vw - 60px);
	}
	.mentionsLegalesLink{
		bottom: auto;
		position: relative;
		height: 25px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}