/* ==========================================================================
   Navigation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Liens de navigation génériques
   -------------------------------------------------------------------------- */

nav a,
nav > ul > li > span {
	color: var(--black);
	font-weight: 600;
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   Listes de navigation
   -------------------------------------------------------------------------- */

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

section.header-nav nav > ul,
#block-pf-main-menu > ul {
	display: flex;
	gap: var(--sp1);
	list-style: none;
}


/* --------------------------------------------------------------------------
   Menu principal
   -------------------------------------------------------------------------- */

#block-pf-mainmenu-home {
	z-index: 2;
}

#block-pf-mainmenu-home li > *,
#block-pf-main-menu li > * {
	font-weight: 400;
	text-transform: uppercase;
}

nav > ul > li {
	position: relative;
	padding-block: var(--sp1);
	padding-inline: var(--sp0-5);
}
/*
nav > ul > li:hover,
nav > ul > li:focus-within {
	background: var(--white);
}
*/
nav > ul > li > a,
nav > ul > li > span {
	position: relative;
	display: inline-block;
	padding-block-end: var(--sp0-25);
}


/* --------------------------------------------------------------------------
   Soulignement animé du premier niveau
   -------------------------------------------------------------------------- */

nav > ul > li > a::after,
nav > ul > li > span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--pf-color-light);
	transition: width 0.2s ease;
}

nav > ul > li:hover > a::after,
nav > ul > li:hover > span::after,
nav > ul > li:focus-within > a::after,
nav > ul > li:focus-within > span::after {
	width: 100%;
}


/* --------------------------------------------------------------------------
   Sous-menus
   -------------------------------------------------------------------------- */

nav > ul > li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 260px;
	margin: 0;
	padding-block: var(--sp0-75) var(--sp0-5);
	border-radius: 10px;
	background: var(--pf-color-dark); /*var(--pf-color-light);*/
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
nav > ul > li:last-child > ul {
	right: 0;
	left: auto;
}
nav > ul > li:hover > ul,
nav > ul > li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

nav > ul > li > ul > li {
	margin-block-start: 0;
	padding-block: var(--sp0-5);
	padding-inline: var(--sp1);
	text-wrap: nowrap;
}

nav > ul > li > ul a,
nav > ul > li > ul span {
	color: #fff;/*var(--pf-color-dark);*/
	transition: color 0.15s ease;
}

nav > ul > li > ul > li:hover > a,
nav > ul > li > ul > li:focus-within > a,
nav > ul > li > ul > li:hover > span,
nav > ul > li > ul > li:focus-within > span {
	color: var(--pf-color-medium);
}

nav > ul > li > ul > li > a.is-active {
	color: var(--pf-color-medium);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Navigation secondaire
   -------------------------------------------------------------------------- */

#block-pf-navigationsecondaire > ul {
	display: flex;
	gap: var(--sp0-75);
	list-style: none;
}

#block-pf-navigationsecondaire > ul li {
	padding-block: var(--sp0-25);
	padding-inline: var(--sp1);
	border-radius: 50px;
	background: var(--pf-color-light);
	transition: background-color 0.15s ease;
}

#block-pf-navigationsecondaire > ul li:hover,
#block-pf-navigationsecondaire > ul li:focus-within {
	background: var(--pf-color-medium);
}

#block-pf-navigationsecondaire > ul li a {
	color: var(--lighter-black);
	font-size: 0.8125rem;
	font-weight: 600;
	transition: color 0.15s ease;
}

#block-pf-navigationsecondaire > ul li:hover a,
#block-pf-navigationsecondaire > ul li:focus-within a {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Navigation footer below
   -------------------------------------------------------------------------- */

.region.region--footer-below nav > ul {
	display: flex;
	justify-content: center;
}