@font-face{
	font-family: "dimis";
	src: url("../fonts/dimis.ttf") format("truetype");
}
*{
	font-family: sans-serif;
}
body{
	--first-color: #1a1a1a;
	--second-color: #0078D7;
	--page-content-margin: 7vw;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--first-color);
	color: white;
	margin: 0;
}
body a{
	text-decoration: none;
	transition: background-color 0.5s, color 0.5s, background-image 0.5s, text-shadow 0.5s;
	color: white;
}
body header{
	margin-bottom: 20px;
}
body header a{
	display: inline-block;
}
body header>*:nth-last-child(2n+1){
	background-color: var(--second-color);
}
body header div a.icon-navigation{
	display: none;
}
body header>div:first-of-type>a:first-of-type{
	font-family: "dimis", sans-serif;
	font-weight: normal;
	font-size: 27px;
	padding: 8px;
	margin-left: var(--page-content-margin);
	white-space: nowrap;
}
body header>div:first-of-type:nth-last-child(2n)>a:first-of-type{
	color: white;
}
body header>div:first-of-type:nth-last-child(2n+1)>a:first-of-type{
	color: var(--first-color);
}
body header>div:first-of-type>a:first-of-type:hover{
	text-shadow: 0 0 10px white;
}
/*body header>div:first-of-type:nth-last-child(2n)>a:first-of-type:hover{
	background-color: var(--second-color);
	border-bottom: 1px dashed var(--first-color);
}*/
body header>div:first-of-type:nth-last-child(2n+1)>a:first-of-type:hover{
	background-color: var(--first-color);
	border-bottom: 1px dashed var(--second-color);
	padding: 8px 8px 7px;
}
body header div:first-of-type div{
	float: right;
	margin: 8px var(--page-content-margin) 8px 0;
}
body header div:first-of-type div a{
	padding: 8px;
	height: 18px;
	width: 18px;
	display: inline-block;
	margin: 0;
}
body header div:first-of-type div a.fa-linkedin:hover{
	background-color: #0077b5; /* Couleur du logo Linked'In */
}
body header div:first-of-type div a.icon-facebook:hover{
	background-color: #3b5999; /* Couleur du logo Facebook */
}
body header nav{
	white-space: nowrap;
	padding: 0;
}
body header nav a{
	padding: 16px;
	font-size: 16px;
}
body header nav a#active{
	padding: 15px 16px;
	transition: background-color 0.5s, color 0.5s, background-image 0.5s, text-shadow 0.5s, border 0.5s;
}
body header nav a:hover{
	padding: 15px 16px;
}
body header nav:nth-last-of-type(2n) a#active{
	background-color: var(--second-color);
	border-top: 1px dashed white;
	border-bottom: 1px dashed white;
}
body header nav:nth-last-of-type(2n+1) a#active{
	background-color: var(--first-color);
	border-top: 1px dashed var(--second-color);
	border-bottom: 1px dashed var(--second-color);
}
body header nav:nth-last-of-type(2n) a:hover,
body header nav:nth-last-of-type(2n) a#active:hover{
	background-color: var(--second-color);
	border-top: 1px dashed var(--first-color);
	border-bottom: 1px dashed var(--first-color);
}
body header nav:nth-last-of-type(2n+1) a:hover,
body header nav:nth-last-of-type(2n+1) a#active:hover{
	background-color: var(--first-color);
	border-top: 1px dashed var(--second-color);
	border-bottom: 1px dashed var(--second-color);
	text-shadow: 0 0 10px white;
}
body main,
body footer div{
	margin: 0 var(--page-content-margin);
}
body header nav a:first-of-type{
	margin-left: var(--page-content-margin);
}
body header nav a:last-of-type{
	margin-right: var(--page-content-margin);
}





@media all and (max-width: 1104px) {
	body header>div:first-of-type>a:first-of-type{
		margin-left: 0;
	}
	body header div:first-of-type div{
		margin-right: 0;
	}
	body main,
	body footer div,
	body header nav,
	body header nav a:first-of-type,
	body header nav a:last-of-type{
		margin: 0;
	}
}
@media screen and (max-width: 950px),
			 handheld and (max-width: 950px),
			 all and (max-device-width: 480px) {
	body header>div{
		background-color: var(--second-color);
		transition: background-color 0.5s;
	}
	body header div a.icon-navigation{
		display: initial;
		float: right;
		margin: 8px 8px 8px 0;
		padding: 8px;
		height: 18px;
		width: 18px;
	}
	body header div a:hover{
		border: none !important;
		padding: 8px !important;
	}
	/*body header div div a{
		transition: box-shadow 0.5s;
	}
	body header div div a:hover{ /* liens vers réseaux sociaux (Facebook et Linked'In) *//*
		box-shadow: 0 0 0 10px var(--first-color);
	}*/
	body header nav{
		background-color: transparent !important;
		display: none;
		width: 100%;
		border-bottom: 2px solid var(--second-color);
	}
	body header nav a{
		display: block;
		transition: background-color 0.5s;
		border-top: none !important;
	}
	body header nav a:last-of-type{
		border-bottom: none !important;
	}
	body header nav a#active{
		text-decoration: underline;
	}
	body header nav a:hover{
		border-top: none !important;
		background-color: var(--second-color) !important;
		padding: 16px;
		text-shadow: none !important;
	}
	body header>div,
	body header nav a:not(:last-of-type){
		border-bottom: 1px dashed var(--second-color);
	}
	body header:target>div{
		background-color: transparent;
	}
	body header div a.nav-button-close,
	body header:target div a.nav-button-open{
		display: none;
	}
	body header:target nav,
	body header:target div a.nav-button-close{
		display: block;
	}
	body main div h1{
		text-align: center;
	}
}