/***************Menu***************/

menu-custom {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
	display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    background-color: hsla(230, 23%, 10%, 0.9);
	transition: all .35s ease;
	z-index: 100;
	--anim-delay: .2s;
}

/***************La liste des liens***************/

menu-custom ul {
    min-width: 22vw;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

/***************Chaque lien dans la liste***************/

menu-custom li {
	opacity: 0;
	border: 0;
	transform: translateY(-100%);
	transition: all var(--anim-delay) ease-out;
}

menu-custom li + li {
    border-top: 1px solid hsla(330, 3%, 85%, 0.5);
}

menu-custom li a {
    display: block;
	padding: 10px;
	color: var(--blanc);
    font-size: 1.7em;
    font-weight: bold;
    line-height: min(4em , 20vh);
	letter-spacing: 2px;
    text-decoration: none;
	transition: all .35s ease;
}

menu-custom li a:hover {
	background-color: hsla(330, 3%, 85%, 0.03);
}

menu-custom li:first-child a {
	border-radius: 10px 10px 0 0;
}

menu-custom li:last-child a {
	border-radius: 0 0 10px 10px;
}

/***************Spécifique au lien de la page actuelle***************/

[aria-current="page"] {
	color: var(--rouge);
}

/***************Quand menu visible***************/

.menu-open {
    overflow: hidden;
}

.menu-open header-custom h3 {
	opacity: 0;
	visibility: hidden;
}

.menu-open menu-custom {
    visibility: visible;
    opacity: 1;
    backdrop-filter: blur(8px);
}

/***************Animation d'ouverture en cascade***************/

.menu-open menu-custom li {
	opacity: 1;
	transform: translateY(0);
}

.menu-open menu-custom li:nth-child(2) {
	transition-delay: var(--anim-delay);
}

.menu-open menu-custom li:nth-child(3) {
	transition-delay: calc(var(--anim-delay) * 2);
}

.menu-open menu-custom li:last-child {
	transition-delay: calc(var(--anim-delay) * 3);
}