:root {
	--colorBody: #f5f5f5;
	--colorCvContainer: white;
	--color1: 	rgba(140, 14, 3, 1); 		/* Rouge plus clair */
	--color1Tr: rgba(140, 14, 3, 0.8); 		/* Rouge plus clair + transparent */
	--color2: 	rgba(191, 187, 184, 1); 	/* Gris */
	--color2Tr: rgba(191, 187, 184, 0.8); 	/* Gris + transparent*/
	--color3: 	rgba(64, 1, 1, 1); 			/* Rouge bordeaux */
	--color3Tr: rgba(64, 1, 1, 0.7); 		/* Rouge bordeaux + transparent */
	--colorLogo: invert(19%) sepia(22%) saturate(7456%) hue-rotate(348deg) brightness(81%) contrast(115%); /* RGB dans ce site : https://codepen.io/sosuke/pen/Pjoqqp */
	--colorCvContainerShadow: var(--color3);
	--colorColonne1: var(--color3Tr);
		--colorPicBorder: var(--color2);
		--colorColonne1H3: var(--color1);
		--colorColonne1H4: var(--color2);
		--colorColonne1Txt: white;
	--colorHeader: var(--color2Tr);
		--colorHeaderH1: var(--color3);
		--colorHeaderH2: var(--color1);
		--colorHeaderTxt: var(--color1);
		--colorHeaderTxtLink: var(--color3);
	--colorH3: var(--color3);
	--colorH4: var(--color1);
	
	--marginStd: 20px;
	--borderR: 30px;
	
	--impressionZoom: 67%;
}


body {
	font-family: Helvetica, sans-serif;
	line-height: 1.5;
	background: var(--colorBody);
	padding: 20px;
	max-width: 1000px;
	margin: auto;
}

h3 { /* Catégories */
	display: flex;
	font-size: 20px;
	font-variant-caps: small-caps;
	margin-bottom: -15px;
}

h4 { /* Date - Fonction */
	display: flex;
	color: var(--colorH4);
	font-size: 18px;
	margin: 10px 0 0 0;
}

h5 { /* Entreprise - Lieu */
	display: flex;
	font-size: 16px;
	font-weight: lighter;
	margin: 0 0 0 1px;
}


.cvContainer {
	background: var(--colorCvContainer);
	border-radius: var(--borderR);
	box-shadow: 0 5px 20px var(--colorCvContainerShadow);
	display: grid;
	grid-template-columns: 28% 72%;
	grid-template-areas: "colonne1" "colonne2";
	margin-bottom: var(--marginStd);
}

.colonne1 {
	border-radius: var(--borderR) 0 0 var(--borderR);
	background-color: var(--colorColonne1);
	color: var(--colorColonne1Txt);
	
	h3 {
		color: var(--colorColonne1H3);
	}
	h4 {
		color: var(--colorColonne1H4);
	}
}

#profilPicture {
	margin:var(--marginStd);
}
.me-picture {
	display:block;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	margin: auto;
	border: 5px solid var(--colorPicBorder);

}

.colonne2 {
	display: grid;
	grid-template-areas: "header" "content";
	margin-bottom: var(--marginStd);
	
	h3 {
		color: var(--colorH3);
	}
	
	h3:before, h3:after {
		content: "";
		background: var(--colorH3);
		height: 3px;
		margin-top: 0.7em;
	}
	h3:before {
		flex: 0 0 20px;
		margin-right: 10px;
	}
	h3:after {
		flex: 1;
		margin-left: 10px;
	}
}

.header{
	grid-area: header;
	border-radius: 0 var(--borderR) 0 0;
	background-color: var(--colorHeader);
	color: var(--colorHeaderTxt);
	
	h1 {
		font-size: 32px;
		font-variant-caps: small-caps;
		color: var(--colorHeaderH1);
		margin: 0;
		text-align: left;
	}
	h2 {
		font-size: 26px;
		font-variant-caps: small-caps;
		color: var(--colorHeaderH2);
		margin: 0 0 5px;
	}
	a:link {
		color: var(--colorHeaderTxt);

	}
	a:visited {
		color: var(--colorHeaderTxt);
		text-decoration: none;
	}
	a:hover {
		color: var(--colorHeaderTxtLink);
		text-decoration: underline;
	}
	a:active {
		color: var(--colorHeaderTxtLink);
		text-decoration: none;
	}
}

.content {
	grid-area: content;
	margin: 0 var(--marginStd) 0 var(--marginStd);
}


#name {
	margin: var(--marginStd) 0 0 var(--marginStd);
}

#contactDetails {
	display: block;
	gap: 10px;
	margin-left: var(--marginStd);
}
#contactDetails ul {
	list-style: none;
	padding: 20px;
	columns: 2;
}
#contactDetails li {
	display: flex;
	gap: 10px;
	margin-bottom: 5px;
}
#contactDetails img {
	width: 28px;
	height: 28px;
	filter: var(--colorLogo);
}


#experiences h5, #divers h5, #formations h5, #certifications h5, #diplome h5 {
	font-weight: bold;
}
#experiences ul, #divers ul, #formations ul, #certifications ul, #diplome ul, #hobbies ul {
	margin: 0 0 0 -30px;
	list-style: none;
}
#experiences li:before, #divers li:before {
	content: "└ ";
	color: var(--colorH3);
}
#formations li:before, #certifications li:before {
	content: "└ ";
	color: var(--colorH3);
}
#hobbies li:before {
	content: "⮻ ";
}

#experiences .jobsTags h6 {
	display: flex;
	font-size: 12px;
	font-weight: lighter;
	font-style: italic;
	margin: 5px 0 0 20px;
}

#about p {
	margin-top: 15px;
	text-align: justify;
}


footer {
	text-align: center;
	margin-top: 50px;
	font-size: 0.9em;
	color: var(--colorH2);
}

/* PDF - Présence d'un bouton d'impression ou exportation PDF */
footer .pdf-download-Bt {
	padding: 10px 15px;
	margin-top: 10px;
	text-decoration: none;
	background-color: var(--color2);
	border-radius: 10px;
	color: var(--color1);
}
footer .pdf-download-Bt:hover {
	background-color: var(--color1);
	color: var(--color2);
	text-decoration: underline;
	cursor:pointer;
}

footer .copyright {
	margin-top: 10px;
}


/* Impression via le module CTRL+P */
@media print {
	html {
		zoom: var(--impressionZoom);

		.me-picture {
		border: 5px solid var(--color3);
		}
	}
	
    body {
        margin: 0;
        padding: 0;
        background: white;
		color: black;
		
		h3 {
			color: var(--color3) !important;
			text-decoration: underline;
			flex: 0 !important;
			margin: 0 0 -15px !important;
		}
		h3:before, h3:after {
			color: var(--color3) !important;
			text-decoration: underline;
			flex: 0 !important;
			margin: 0 0 -15px !important;
		}
    }

	.header {
		color: var(--colorHeaderTxt);
		
		a {
		text-decoration: none;
		}
	}
	
	.colonne1 {
		color: black;
		
		h4 {
			color: var(--color1) !important;
		}
		#skills h5 {
			color: var(--color3) !important;
		}
	}
	
    .cvContainer {
        box-shadow: none;
		padding: 0;
    }


    footer {
		display: none;
    }
	
	@page {
		size: A4 portrait;		
    }
}


/* Pour les plateformes mobiles */
@media screen and (max-width: 768px) {
	body {
		display: flex;
	}
	
	.cvContainer {
		display: flex;
	}

	footer {
		display: none;
    }
}