header {
	display: flex;
	background-color: var(--bs-dark);
	height: 5rem;
}

/* Langue menu */
lang-menu {
	position: relative;
	display: flex;
	align-items: center;
	align-self: center;
	
	margin: 0 1rem;
	height: 100%;
}

    lang-menu > img {
    	border-radius: .25rem;
    	object-fit: contain;
    	
    	width: 3rem;
    }

lang-menu-items {
	position: absolute;
	display: flex;
	flex-direction: column;

    transition: max-height .5s;
	background-color: var(--bs-dark);
	overflow: hidden;

	top: 5rem;
	left: -1rem;
	max-height: 0;
	z-index: 2;
}

	lang-menu:hover lang-menu-items {
	    max-height: 100vh;
	}

	lang-menu-items > form {
		display: inline-block;
	}

		lang-menu-items > form > input[type="submit"] {
			border: none;

            transition: border .2s;
			background: none;
			color: var(--bs-light);
		
			padding: .5rem 1rem;
		}

			lang-menu-items > form:hover > input[type="submit"] {
				color: var(--bs-primary);
			}
		

		lang-menu:hover lang-menu-items > form > input[type="submit"] {
			border-bottom: solid .2rem var(--bs-gray-dark);
		}

nav {
	position: relative;
}

	nav > * {
		display: inline-block;
		margin: 0;
		padding: 0 2rem;
		line-height: 4rem;
	}

	nav > #nav-selector {
		position: absolute;

		transition: opacity .4s, clip-path .2s;
		background-color: var(--bs-gray);
		/* background-image: url('/assets/images/nav-selector.jpg'); */
		background-position: center;
		background-size: cover;
		opacity: 0;

		height: 100%;
		width: 100%;
		bottom: 0;
		left: 0;
	}

		nav:hover > #nav-selector {
			opacity: 1;
		}

	nav > a.nav-main {
		font-size: 1.4rem;
	}

	nav > a {
		transition: outline .2s;
		border: solid .25rem transparent;
		color: var(--bs-light);
		font-weight: bold;
		
		z-index: 1;
	}

		nav > a:hover {
			text-shadow: .2rem .2rem var(--bs-dark);
			color: var(--bs-light);
		}

		nav > a.current-page {
			border-bottom-color: var(--bs-light);
	    }
	
/* Short nav */
nav-short > label {
	border: solid .25rem transparent;
	line-height: 4.5rem;
	padding: 0 2rem;
	margin: 0;
}

	nav-short:hover > label {
		border-bottom-color: var(--bs-light);
	}

nav-short > div {
	position: absolute;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .2s;
	background-color: var(--bs-gray);

	left: 0;
	top: 5rem;
	width: 100%;
	z-index: 5;
}

	nav-short:hover > div {
		transform: scaleY(1);
	}

	nav-short > div > a {
		display: inline-block;
		color: var(--bs-light);
		background-color: var(--bs-dark);
		padding: 1rem 2rem;
		margin-top: .2rem;
	}

		nav-short > div > a:hover {
			background-color: var(--bs-gray);
			color: var(--bs-light);
		}

.header-avatar {
	object-fit: cover;
	border-radius: 2rem;
	height: 3rem;
}

/* Profil */
profil-menu:hover profil-menu-label > span {
	text-overflow: ellipsis;

	max-width: 10rem;
	padding-right: 1rem;
}

profil-menu-label > span  {
	transition: max-width .5s, padding-right 1s;
	color: var(--bs-primary);
	font-weight: bold;
	overflow: hidden;

	max-width: 0;
}

	profil-menu-label > img {
		border-radius: 2rem;
		border: .2rem solid var(--bs-gray);
		height: 3rem;
	}

/* Profil - Options */
profil-menu > profil-menu-items {
	position: absolute;
	top: 4.8rem;

	border-radius: .2rem 0 0 .75rem;
	background-color: var(--bs-gray-dark);
	transition: max-height .4s;
	overflow: hidden;
	
    right: 0;
	max-height: 0;

	z-index: 1;
}

	profil-menu:hover > profil-menu-items {
		border: .15rem solid var(--bs-gray-dark);
		border-right: none;
		max-height: 10rem;
	}

profil-menu-items > a {
	display: inline-block;
	background-color: var(--bs-dark);
	color: var(--bs-light);

	margin-top: .1rem;
	padding: .6rem 1rem;
	padding-right: 2rem;
}

	profil-menu-items > a:hover {
		background-color: var(--bs-gray-dark);
		color: var(--bs-light);
	}