:root{
	--main-color:#2980b9;
	--main-light-color:#70a1ff;
	--main-color-secondary:rgb(13, 74, 136);
	--main-dark-color:#002e6e;
	--overlay-dark:rgba(30,80,130,0.9);
	--border-default:white;
	--text-color:white;
	--text-select:#bdc3c7;
	--background-color:rgb(30,30,30);
	--background-overlay:rgba(0,0,0,0.2);
	--background-overlay-hover:rgba(255,255,255,0.2);
	--map-point-color:red;
	--map-point-dark-color:darkred;
}

main{
	flex:1;
	z-index: 9;
}

a{
	outline-style: none;
	text-decoration: none;
	color:var(--text-color);
}

body {
	background-color: var(--background-color);
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	color:var(--text-color);
	display:flex;
	min-height: 100vh;
	flex-direction: column;
}

nav {
	z-index: 15;
	font-family: "Montserrat", sans-serif;
	height: auto;
	min-width: 256px;
	display:flex;
	justify-content: space-between;
	position: sticky;
	top:51px;
	border-bottom: 1px solid var(--border-default);
	overflow-y: visible;
	transition:.1s;
	background-color: var(--main-color-secondary);
}

footer {
	align-self: flex-end;
	display: flex;
	padding: 0px 5%;
	width:100vw;
	box-sizing: border-box;
	z-index: 9;
	flex-wrap: wrap;
	background: linear-gradient(-4deg, rgb(20,20,20),rgb(40,40,40), rgba(0,0,0,0));
	border-top:1px solid var(--border-default);
	font-family: 'PT Sans', sans-serif;
	margin-top: 20px;
}

footer > div{
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	width:220px;
	flex-grow:1;
	font-size: 16px;
	padding:5px 0px 20px 0px;
}

footer > div:hover {
	background-color:rgba(0,0,0,0.1);
}

footer > div > div{
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	flex-grow: 1;
}

footer > div > div:first-child{
	font-size: 20px;
	justify-content: center;
}

footer > div > div > div {
	display:flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: row-reverse;
	height:auto;
}

footer > div > div > div > div {
	margin:5px;
	padding-left: 10px;
	width:65%;
	overflow-x:hidden;
	pointer-events: none;
}

footer > div > div > div > div > a{
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
}

footer > div > div > div > div:hover + i{
	opacity:1;
}

footer > div > div > div > div::before{
	content: "";
	position: absolute;
	display: block;
	height:0px;
	width:2px;
	opacity: 0;
	transform: translateX(-10px);
	background-color: var(--text-color);
	transition: 0.5s;
}

footer > div > div > div > div:hover::before{
	height: 20px;
	opacity: 1;
}

footer > div > div > div > i{
	opacity:0.2;
	width:35%;
	text-align: right;
	padding-right: 10px;
	transition: 0.2s;
	max-height:28px;
}

footer > div > div > div > img{
	display:block;
	opacity:0.2;
	width:35%;
	height:70%;
	object-fit: contain;
	object-position: calc(100% - 8px) 0px;
	max-height:1.5em;
	transition: 0.2s;
}

footer > div > div > div:hover > img{
	opacity:1;
}

footer > div > h2{
	margin:0px 10%;
	padding:6px 0px;
	height:60px;
	display: flex;
	align-items:center;
	justify-content: center;
	text-align:center;
	position:relative;
	cursor: default;
}

footer > div > div > div > p {
	padding:0px 10px;
}

#header-html{
	position: sticky;
	top:0px;
	width:100%;
	z-index:10;
}

#header-1{
	position: relative;
	display: flex;
	padding: 5px 0px;
	left:0px;
	right:0px;
	font-size: 40px;
	background-color: var(--main-dark-color);
	z-index: 5;
	font-family: "Montserrat", sans-serif;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-bottom: 1px solid var(--border-default);
	text-shadow: 2px 2px 2px black;
	white-space: nowrap;
	cursor: default;
	z-index: 20;
	overflow: hidden;
}

#header-1>a{
	color: var(--main-light-color);
}

#header-1>a:hover{
	color:var(--text-color);
}

#header-1::before{
	position:relative;
	content:"11010011 10010101 10111101 10010001 01011101 10110101 |";
	margin-right: 20px;
}

#header-1::after{
	position:relative;
	content:"| 01101101 11011010 11101010 10110110 10011010 11001001";
	margin-left: 20px;
}

.milieu{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 5px;
	box-sizing: border-box;
}

.menu-bar{
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	z-index: 50;
	flex-grow:1;
	pointer-events: all;
	flex-wrap: wrap;
}

.menu-bar > div{
	position: relative;
	margin: 7px 0px;
	width: 150px;
	font-size:1em;
	color: var(--text-color);
	text-align: center;
	transition: 0.2s linear;
	cursor: pointer;
	flex-grow:0;
}

.menu-bar > div > a{
	display: block;
	height:30px;
	line-height: 30px;
	width:100%;
}

.menu-bar > div:nth-child(2):hover ,.menu-bar > div:nth-child(3):hover{
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.menu-bar > div:hover{
	background-color:var(--main-color);
	border-radius: 40px;
	color:var(--text-select);
	font-size:17px;
}

.menu-bar > div:hover > .sub-menu{
	display: flex;
	flex-direction: column;
}

.menu-bar > span{
	position: absolute;
	flex-basis: 0;
	height:0px;
}

.sub-menu{
	position: absolute;
	width:150px;
	display: none;
	top:30px;
	left:0px;
	right:0px;
	font-size:16px;
	transition: none;
	background-color:var(--main-color);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	z-index: 80;
}

.sub-menu > div{
	border-bottom:2px solid var(--border-default);
}

.sub-menu > div:last-child{
	border-bottom:none;
}

.sub-menu > div > a{
	display: inline-block;
	padding:8px 5px;
	height:100%;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.sub-menu > div:hover > a{
	font-size:17px;
	color:var(--text-select);
}

.nav-menu{
	background-color:var(--main-color-secondary);
}

.s{
	display:inline-block;
	padding-bottom:7px;
	padding-top:6px;
	padding-left:20px;
	margin:10px;
	margin-left:-13px;
	width: 200px;
	border:none;
	border-right:6px solid var(--border-default);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	outline-style: none;
	appearance: none;
	background-color: var(--main-color);
	color:var(--text-color);
}

.s::-webkit-search-cancel-button{
	-webkit-appearance: none;
}

.s::placeholder{
	color:rgba(255,255,255,0.6);;
}

.recherche {
	position: relative;
	height: 30px;
	width: 30px;
	border-radius: 100%;
	text-align: center;
	line-height: 30px;
	vertical-align: middle;
	color: var(--text-color);
	cursor:default;
	background-color: var(--main-color);
}

.recherche > i{
	line-height: 30px;
}

.but {
	text-align: center;
	display: inline-block;
	width: 40px;
	height: 40px;
	background-color: #f1f1f1;
	margin: 5px;
	margin-bottom: 10px;
	border-radius: 100%;
	box-shadow: 0 5px 15px -5px #00000070;
	color:var(--main-color);
}

.but i {
	line-height: 40px;
	font-size: 22px;
	transition: 0.2s linear;
}

.but:hover>i {
	transform: scale(1.2);
}

.burger{
	display: none;
	transition:0.2s linear;
}

.nav-menu{
	max-width: 100vw !important;
}

@keyframes burger-anim{
	0%{
		left:0px;
	}
	100%{
		left:70vw;
	}
}

/* Juste pour le menu-bar*/
@media(max-width: 1410px)
{
	.menu-bar > span{
		position: relative;
		flex-basis: 100%;
		height:0px;
	}
}

@media(max-width: 992px)
{
	nav{
		position: relative;
		top:0px;
		height:calc(100vh - 61px);
		background-color: var(--main-color-secondary);
		width:calc(100% - 52px);
		pointer-events: auto;
	}

	nav:hover{
		left:0px;
	}

	nav::after{
		content:"";
		position: absolute;
		left:100%;
		border-right: 2px solid var(--border-default);
		height: 100%;
		background-color: blue;
	}

	#header-1{
		position: relative;
		height:50px;
	}

	#header-1::before{
		content:"11010011 10010101 10111101 10010001 01011101 10110101 01101101 11011010 11101010 10110110 10011010 11001001 11101010 10110110 10011010 11001001 11010011 10010101 10111101 10010001 01011101 10110101 11010011 10010101 10111101 10010001 10110110 10011010 11001001 11010011 10010101 10111101 10010001 01011101 10110101 11010011 10010101";
		position: absolute;
		font-size:8px;
		top:0px;
	}

	#header-1::after{
		content:"01101101 11011010 11101010 10110110 10011010 11001001 11010011 10010101 10111101 10010001 01011101 10110101 11010011 10010101 10111101 10010001 01011101 10110101 01101101 11011010 11101010 10110110 10011010 11001001 11001001 11101010 10110110 10011010 11001001 11010011 10010101 10111101 10110110 10011010 11001001 11010011 10010101";
		position: absolute;
		font-size:8px;
		bottom:0px;
	}

	.nav-menu{
		position: fixed;
		display: flex;
		width:calc(70vw + 52px);
		min-width: 310px;
		max-width: 200px !important;
		left:-260px;
		height:calc(100vh - 61px);
		z-index: 21;
		top:61px;
		border:none;
		box-sizing: border-box;
		transition:0.3s;
		pointer-events: none;
		background-color:rgba(0,0,0,0);
	}

	/* Pour tester avec le hover à la place du click */
	/*
	.nav-menu:hover{
		left:0px;
		max-width:100vw;
	}

	.nav-menu:hover .burger{
		background-color: #003e7e;
	} 
	*/

	.burger{
		position: absolute;
		display: block;
		right:2px;
		height:50px;
		width:50px;
		background-color: var(--main-color);
		border: none;
		padding:0px;
		cursor: pointer;
		z-index: 22;
		border-right:2px solid var(--border-default);
		border-bottom:2px solid var(--border-default);
		border-bottom-right-radius: 5px;
		pointer-events: auto;
		transition:0.4s linear;
		outline-style: none;
	}

	.burger > *{
		width:100%;
		height: 100%;
	}

	.burger > i::before{
		position: relative;
		color: var(--text-color);
		top: 4px;
		display: block;
		font-size: 40px;
	}

	.milieu{
		display: none;
	}

	.menu-bar{
		position:absolute;
		width:100%;
		height: 100%;
		min-height:min-content;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		display:flex;
		overflow-y: scroll;
		top:0px;
	}

	.menu-bar > div{
		position: relative;
		box-sizing: border-box;
		padding:3px;
		margin:1px 0px;
		width:calc(100% - 8px);
		border-right: 4px solid var(--border-default);
		border-top:1px solid var(--border-default);
		background-color: var(--main-dark-color);
	}

	.menu-bar > div > a{
		text-align: left;
		padding-left: 10px;
		border-radius: 0px;
		border-bottom: 2px solid var(--border-default);
		margin-bottom: 2px;
		box-sizing:border-box;
	}

	.menu-bar > div:hover{
		background-color: var(--main-dark-color);
		border-radius: 0px;
		color:var(--text-select);
		font-size:16px;
	}

	.menu-bar > span{
		display: none;
	}

	.sub-menu{
		position: relative;
		width:200px;
		display: block;
		top:0px;
		left:20px;
		font-size:16px;
		background-color:rgba(0,0,0,0.1);
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
		z-index: 80;
	}

	.sub-menu > div{
		border-bottom:2px solid var(--border-default);
		border-bottom: none;
	}

	.sub-menu > div:last-child{
		border-bottom:none;
	}

	.sub-menu > div > a{
		display: inline-block;
		padding:8px 5px;
		height:100%;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.sub-menu > div:hover > a{
		font-size:16px;
		color:var(--text-select);
	}
}
