header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #000;
	color:var(--color-title);
	padding:6px 20px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	font-family:var(--font-title);
	font-size:16px;
}

header h1 {
	font-size: 23px;
	font-weight: 300;
}

header a {
	color: #fff;
	text-align: center;
}

header a:hover {
	text-decoration:none;
}

header a.login-btn {
	background:rgba(255,255,255,.18);
	border:1px solid rgba(255,255,255,.55);
	padding:6px 14px;
	border-radius:20px;
	font-weight:200
}

header a.login-btn:hover {
	background:rgba(255,255,255,.32);
	color: #fff;
}

.navbar-div + .navbar-div {
	margin-left: 35px;
}

#navbar-logo {
	justify-self: start;
	display:flex;
	align-items:center;
	gap:10px;
}

#navbar-titre {
	justify-self: center;
}

#navbar-nav {
	justify-self: end;
	display:flex;
	align-items:center;
	gap:20px;
	line-height: 1;
}

#navbar-nav .active {
	text-decoration: underline;
}

#logo-site {
	height:40px;
	width:auto;
	border-radius:6px
}

/* ############### Mobile ############### */
@media (max-width: 700px) {
	header {
		grid-template-columns: 1fr auto;
		column-gap: 14px;
		row-gap: 3px;
		padding: 8px 12px 6px;
		font-size: 14px;
	}

	#navbar-logo {
		grid-column: 1;
		grid-row: 1;
		gap: 8px;
	}

	#navbar-titre {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: center;
	}

	#navbar-titre h1 {
		margin: 0;
		line-height: 1.15;
	}

	#navbar-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
		justify-content: center;
		flex-wrap: wrap;
		column-gap: 14px;
		row-gap: 4px;
		border-top: 1px solid rgba(255, 255, 255, .18);
		padding-top: 5px;
	}

	header h1 {
		font-size: 19px;
	}

	#navbar-titre h1 {
		font-size: 16px;
	}

	header a {
		margin-left: 0;
		font-size: 13px;
	}

	header a.login-btn {
		padding: 5px 11px;
	}

	#logo-site {
		height: 30px;
	}
}


@media (max-width: 430px) {
	header {
		column-gap: 10px;
		padding: 7px 10px;
	}

	header h1 {
		font-size: 17px;
	}

	#navbar-titre h1 {
		font-size: 15px;
	}

	#navbar-logo {
		gap: 7px;
	}

	#logo-site {
		height: 26px;
	}

	#navbar-nav {
		gap: 10px;
	}

	header a {
		font-size: 12px;
	}

	header a.login-btn {
		padding: 4px 9px;
	}
}


@media (max-width: 360px) {
	header h1 {
		font-size: 15px;
	}

	#navbar-titre h1 {
		font-size: 14px;
	}

	#logo-site {
		height: 24px;
	}
}