/* Navigation 2026 : barre horizontale sur ordinateur (≥ 1200 px, souris).
   En dessous, ou sur écran tactile, le panneau latéral d'origine reste en place. */

.vo2-nav { display: none; }

@media (min-width: 1200px) and (hover: hover) {
	body.vo2-nav-on header.site-header .left-nav { display: none; }
	body.vo2-nav-on header.site-header .header-sections { flex-wrap: nowrap; gap: 32px; }
	body.vo2-nav-on header.site-header .site-branding { order: 1; flex: 0 0 auto; text-align: left; }
	body.vo2-nav-on header.site-header .site-branding .site-logo { height: 46px; width: auto; }
	body.vo2-nav-on header.site-header .tools { order: 3; flex: 0 0 auto; width: auto; }

	.vo2-nav {
		display: flex;
		order: 2;
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
	}
	.vo2-nav ul,
	.vo2-nav li { list-style: none; margin: 0; padding: 0; }
	.vo2-nav .vo2-nav__list { display: flex; align-items: center; gap: 6px; }
	.vo2-nav .vo2-nav__list > li { position: relative; }

	.vo2-nav .vo2-nav__list > li > a {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 10px 12px;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.2;
		color: #0a0a0a;
		text-decoration: none;
		white-space: nowrap;
		position: relative;
		transition: color .15s ease-out;
	}
	/* trait sous l'élément survolé ou actif */
	.vo2-nav .vo2-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: 2px;
		height: 2px;
		background: #004D71;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .2s cubic-bezier(.2, .7, .2, 1);
	}
	.vo2-nav .vo2-nav__list > li:hover > a,
	.vo2-nav .vo2-nav__list > li:focus-within > a,
	.vo2-nav .vo2-nav__list > li.current-menu-item > a,
	.vo2-nav .vo2-nav__list > li.current-menu-ancestor > a,
	.vo2-nav .vo2-nav__list > li.current-menu-parent > a { color: #004D71; }
	.vo2-nav .vo2-nav__list > li:hover > a::after,
	.vo2-nav .vo2-nav__list > li:focus-within > a::after,
	.vo2-nav .vo2-nav__list > li.current-menu-item > a::after,
	.vo2-nav .vo2-nav__list > li.current-menu-ancestor > a::after,
	.vo2-nav .vo2-nav__list > li.current-menu-parent > a::after { transform: scaleX(1); }

	/* chevron des entrées à sous-menu */
	.vo2-nav .menu-item-has-children > a::before {
		content: "";
		order: 2;
		width: 6px;
		height: 6px;
		margin-top: -3px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease-out, margin .2s ease-out;
	}
	.vo2-nav .menu-item-has-children:hover > a::before,
	.vo2-nav .menu-item-has-children:focus-within > a::before { transform: rotate(-135deg); margin-top: 3px; }

	/* sous-menu */
	.vo2-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		min-width: 260px;
		padding: 8px;
		margin-top: 10px;
		background: #fff;
		border: 1px solid #E1E9EE;
		border-radius: 10px;
		box-shadow: 0 14px 34px rgba(0, 45, 66, .12), 0 2px 6px rgba(0, 45, 66, .06);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s;
	}
	/* pont invisible entre l'intitulé et le sous-menu, pour ne pas le perdre en descendant la souris */
	.vo2-nav .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}
	.vo2-nav .menu-item-has-children:hover > .sub-menu,
	.vo2-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}
	.vo2-nav .sub-menu a {
		display: block;
		padding: 10px 14px;
		border-radius: 6px;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.35;
		color: #1D2A30;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color .12s ease-out, color .12s ease-out;
	}
	.vo2-nav .sub-menu a:hover,
	.vo2-nav .sub-menu a:focus-visible { background: #EEF5F8; color: #004D71; }
	.vo2-nav .sub-menu .current-menu-item > a { color: #004D71; font-weight: 600; }

	.vo2-nav a:focus-visible { outline: 2px solid #004D71; outline-offset: 2px; border-radius: 6px; }
}

/* écrans de 1200 à 1359 px : barre plus compacte pour laisser respirer le logo */
@media (min-width: 1200px) and (max-width: 1359px) and (hover: hover) {
	body.vo2-nav-on header.site-header .header-sections { gap: 24px; }
	body.vo2-nav-on header.site-header .site-branding .site-logo { height: 40px; }
	.vo2-nav .vo2-nav__list { gap: 0; }
	.vo2-nav .vo2-nav__list > li > a { padding: 10px 10px; font-size: 16px; gap: 6px; }
	.vo2-nav .vo2-nav__list > li > a::after { left: 10px; right: 10px; }
}

@media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: reduce) {
	.vo2-nav *,
	.vo2-nav *::before,
	.vo2-nav *::after { transition: none !important; }
}