/* VARIABLES */

:root {
	--menu-color-line: #000;
	--menu-background-color: transparent;
}


/* BURGER MENU */

.btn-menu {
	cursor: pointer;
	background: var(--menu-background-color);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	position: relative;
}

.ligne {
	width: 30px;
	height: 3px;
	background: var(--menu-color-line);
	border-radius: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.1s ease-in-out;
}

.ligne::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background: var(--menu-color-line);
	bottom: 10px;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
}

.ligne::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background: var(--menu-color-line);
	top: 10px;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
}

.btn-menu.active .ligne::before {
	transform: translateY(10px) rotate(-45deg);
}

.btn-menu.active .ligne {
	background: transparent;
}

.btn-menu.active .ligne::after {
	transform: translateY(-10px) rotate(45deg);
}


/* MENU */

.sidebar-menu {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.sidebar-nav {
	display: none;
}

.sidebar-nav ul {
	column-count: 2;
}

.sidebar-nav ul li a {
	font-size: 13px;
	line-height: 25px;
}


/* MEDIA QUERIES */

@media screen and (min-width: 768px) {
	.btn-menu {
		display: none;
	}
	.sidebar-nav {
		display: block !important;
	}
	.sidebar-nav ul {
		column-count: 1;
	}
	.sidebar-nav ul li a {
		font-size: 11px;
	}
}