/* Top navbar: Bootstrap 3 navbar-inverse metrics (50px high, #222 background, 15px link padding), so that the
   Bootstrap 5 navbar keeps the same size and colours. Remove when the redesign restyles the navbar. */
.ja-top-navbar {
	--bs-navbar-padding-y: 0;
	--bs-navbar-nav-link-padding-x: 15px;
	--bs-navbar-color: #9d9d9d;
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: #fff;
	min-height: 50px;
	margin-bottom: 20px;
	background-color: #222;
	border-bottom: 1px solid #080808;
}
.ja-top-navbar .navbar-nav {
	--bs-nav-link-padding-y: 10px; /* folded menu (below 768px) */
	margin-top: 0; /* default_2012.css: ul { margin: 10px 0 20px 55px } */
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.ja-top-navbar .navbar-nav {
		--bs-nav-link-padding-y: 15px;
	}
}
.ja-top-navbar .nav-link {
	line-height: 20px;
}
.ja-top-navbar .navbar-text {
	padding-top: 15px;
	padding-bottom: 15px;
}
.ja-top-navbar .navbar-text a {
	color: rgba(var(--bs-link-color-rgb), 1); /* Bootstrap 3 kept the link colour ("Deconnexion") */
}

/* Main menu: retain the red site identity while using Bootstrap's native components. */
.main-navigation {
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #ffcf27;
    --bs-navbar-active-color: #ffcf27;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .7);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    padding: 0;
    margin-top: 20px;
    min-height: 39px;
    border-radius: 8px;
    background: #bf0b0b url(../images/menu_2012_background.png) repeat-x;
    box-shadow: 0 5px 7px #495864;
    z-index: 999;
}
.main-navigation .navbar-nav,
.main-navigation .main-navigation-submenu { margin: 0; list-style: none; }
.main-navigation .navbar-nav { padding: 0; width: 100%; }
.main-navigation .nav-item { margin: 0; position: relative; }
.main-navigation .navbar-nav .nav-link {
    color: #fff;
    font-family: 'Oleo Script', sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 23px;
    padding: 8px 18px;
    text-decoration: none;
    white-space: nowrap;
}
.main-navigation .nav-link:hover,
.main-navigation .nav-link:focus-visible,
.main-navigation .current > .nav-link,
.main-navigation .nav-link.show { color: #ffcf27; }
.main-navigation .main-navigation-split { display: flex; flex-wrap: wrap; align-items: center; }
.main-navigation .main-navigation-split > a { padding-right: 4px; }
.main-navigation .main-navigation-split > .dropdown-toggle-split { padding-left: 8px; padding-right: 12px; }
.main-navigation .main-navigation-submenu {
    --bs-dropdown-bg: #444;
    --bs-dropdown-color: #fff;
    --bs-dropdown-link-color: #fff;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #333;
    --bs-dropdown-link-active-color: #ffcf27;
    --bs-dropdown-link-active-bg: #333;
    min-width: 17rem;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 0;
    border: 1px solid #555;
    border-radius: 0 0 5px 5px;
}
.main-navigation .dropdown-item {
    padding: 10px 16px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 20px;
    white-space: normal;
    border-bottom: 1px solid #555;
}
.main-navigation .dropdown-item:hover,
.main-navigation .dropdown-item:focus { color: #fff; background: #333; }
.main-navigation .nav-link:focus-visible,
.main-navigation .dropdown-item:focus-visible,
.main-navigation .navbar-toggler:focus-visible { outline: 2px solid #ffcf27; outline-offset: -3px; }
.main-navigation .navbar-toggler { color: #fff; margin: 4px 10px; font-size: 16px; }
.main-navigation .navbar-toggler-icon { width: 1.2em; height: 1.2em; margin-right: 5px; }
.main-navigation-sakura { float: left; margin-right: 5px; }
@media (min-width: 768px) {
    .main-navigation { float: right; }
    .main-navigation .main-navigation-submenu { position: absolute; }
    .main-navigation .current::after {
        content: '';
        position: absolute;
        left: calc(50% - 6px);
        bottom: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #bf0b0b;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .main-navigation .navbar-nav .nav-link { padding-left: 12px; padding-right: 12px; }
    .main-navigation .main-navigation-split > a { padding-right: 4px; }
    .main-navigation .main-navigation-split > .dropdown-toggle-split { padding-left: 8px; }
}
@media (max-width: 767.98px) {
    /* The mobile panel is one scrolling list; no dropdown or nested scroll hides its entries. */
    .main-navigation { width: 100%; z-index: 1050; }
    .main-navigation .offcanvas {
        --bs-offcanvas-width: min(100vw, 420px);
        color: #fff;
        background: #333;
    }
    .main-navigation .offcanvas-header { padding: 8px 12px 8px 16px; background: #bf0b0b; }
    .main-navigation .offcanvas-title { margin: 0; color: #fff; font-family: 'Oleo Script', sans-serif; font-size: 22px; line-height: 28px; }
    .main-navigation .btn-close { width: 44px; height: 44px; box-sizing: border-box; margin: 0 0 0 auto; padding: 12px; background-size: 16px; opacity: 1; }
    .main-navigation .offcanvas-body { padding: 0 0 20px; overscroll-behavior: contain; }
    .main-navigation .main-navigation-section-title { margin: 0; padding: 18px 16px 8px; color: #ffcf27; font-family: 'Oleo Script', sans-serif; font-size: 20px; line-height: 26px; }
    .main-navigation .main-navigation-split { display: block; }
    .main-navigation .dropdown-item { min-height: 44px; padding: 12px 16px; font-size: 14px; }
    .main-navigation .navbar-nav > .nav-item > a.nav-link { padding: 12px 16px; background: #bf0b0b; }
    .main-navigation .navbar-nav .nav-link { text-align: left; }
    .main-navigation .main-navigation-submenu { display: block; position: static; width: 100%; min-width: 0; max-width: none; max-height: none; overflow: visible; border: 0; border-radius: 0; }
}