/*
Manutan corpo 2026
Menus
*/

.menu-level2 { padding: 4rem 0; width: 100%; border-radius: 0; flex: 1; background-color: transparent; color: var(--color-blue-dark); display: none; position: relative; z-index: 0; }
.menu-level2:after { content: ""; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
.menu-level2.show:after { animation: .3s ease-in 0s 1 forwards showSubmenu; }
.menu-level2.hide:after { animation: .3s ease-in 0s 1 forwards hideSubmenu; }
.menu-level2[data-color="cyan"]:after, header[data-color="cyan"] .bar-wrapper:after { background-color: var(--color-secondary-light-cyan); }
.menu-level2[data-color="green"]:after, header[data-color="green"] .bar-wrapper:after { background-color: var(--color-secondary-light-green); }
.menu-level2[data-color="pink"]:after, header[data-color="pink"] .bar-wrapper:after { background-color: var(--color-secondary-light-pink); }
.menu-level2[data-color="yellow"]:after, header[data-color="yellow"] .bar-wrapper:after { background-color: var(--color-secondary-light-yellow); }
header.open:not(.resp) { height: 100vh; }
header .bar-wrapper { position: relative; z-index: 1; }
header .bar-wrapper:after { content: ""; width: 100%; position: absolute; bottom: 0; left: 0; z-index: -1; }
header.hide .bar-wrapper:after { animation: .3s ease-in 0s 1 forwards hideSubmenu; }
header.open .bar-wrapper:after { animation: .3s ease-in 0s 1 forwards showSubmenu; }
header.open .top-bar .nav-link, header.open .nav-bar .nav-link { color: var(--color-blue-dark); }
header.open .top-bar, header.open .nav-bar { border-bottom: 1px solid rgba(4, 14, 7, 0.2); }
header.open .nav-bar .nav-item a:after, header.open a.caret:after { content: url("../icons/nav_angle_down_blue.svg"); }
header .dropdown-toggle::after { content: url("../icons/nav_angle_down_white.svg"); margin-left: 0.5rem; position: absolute; border: none; }
header.open .dropdown-toggle::after { content: url("../icons/nav_angle_down_blue.svg"); }
header .dropdown-menu { border-radius: var(--radius-md); }
header .dropdown-menu[data-bs-popper] { margin-top: 0; }
header .dropdown-menu-lg-end[data-bs-popper] { right: -.5rem; }
header .top-bar .dropdown-menu { z-index: 10000; }

.menu-level2 .row .col-1 { padding-right: 3rem; border-right: 1px solid rgba(4, 14, 7, 0.3); }
.menu-level2 .row .col-2 { padding-left: 3rem; }
.menu-level2 .section-title, .menu-level2 .section-subtitle { font-family: var(--font-inter-tight); font-weight: var(--font-weight-black); opacity: 0; }
.menu-level2 .section-title { font-size: var(--font-size-display-xl); margin-bottom: 4rem; animation: .5s ease-in-out 0s 1 forwards showSectionTitle; display: flex; align-items: center; align-content: flex-start; }
.menu-level2 .section-subtitle { font-size: var(--font-size-display-xs); margin-bottom: 2rem; animation: .5s ease-in-out .2s 1 forwards showSectionTitle; }
.menu-level2 p { line-height: 2rem; opacity: 0; animation: .5s ease-in-out .4s 1 forwards showSectionTitle; }
.menu-level2 .nav { opacity: 0; animation: .5s ease-in-out .4s 1 forwards showSectionTitle; }
.menu-level2.hide .section-title, .menu-level2.hide .section-subtitle, .menu-level2.hide .nav, .menu-level2.hide p, .menu-level2.hide .social-tools { animation: .3s ease-in-out 0s 1 forwards hideSectionTitle; }
.menu-level3 .nav-level3.split-2cols { column-count: 2; column-gap: var(--spacing-32); }
.menu-level2 .nav .nav-item, .menu-level3 .nav-level3 li { width: 100%; margin-bottom: 2px; }
.menu-level2 .nav .nav-link, .menu-level3 .nav-level3 .nav-link { padding: .75rem; color: var(--color-blue-dark); transform: translateX(-1rem); position: relative; border-radius: 4rem; overflow: hidden; display: flex; align-items: center; transition: all .3s; }
.menu-level3 .nav-level3.split-2cols .nav-link { padding: .5rem .5rem .5rem .75rem; }
.menu-level3 .nav-level3 .nav-link { transform: none; }
/*.menu-level2 .nav .nav-link:hover { background-color: var(--color-white); }*/
.menu-level2 .nav .nav-link:after, .menu-level3 .nav-level3 .nav-link:after { content: ""; width: 4rem; height: 100%; border-radius: 1000px; background-color: var(--color-white); position: absolute; left: -4rem; top: .0; z-index: -1 }
.menu-level3 .nav-level3 .nav-link:after { background-color: var(--color-primary-blue-light); }
.menu-level2 .nav .nav-link:hover:after, .menu-level2 .nav .nav-link.on:after, .menu-level3 .nav-level3 .nav-link:hover:after, .menu-level3 .nav-level3 .nav-link.on:after { animation: .3s ease-in-out 0s 1 forwards hoverButton; }
.menu-level2 .nav .nav-link .caret, .menu-level3 .nav-level3 .nav-link .caret {
	background-color: var(--color-white); border-radius: var(--radius-circle);
	width: 1.75rem; height: 1.75rem; padding: .5rem;
	overflow: hidden;
	display: flex;
	align-items: center; justify-content: center;
	/*position: absolute;
	right: .75rem; top: .5rem;*/
	margin-left: auto;
	transition: all .3s;
}
.menu-level3 .nav-level3 .nav-link .caret { background-color: var(--color-primary-blue-light); }
.menu-level2 .nav .nav-link .caret:after, .menu-level3 .nav-level3 .nav-link .caret:after { content: url("../icons/feather/chevron-right.svg"); /*position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.75);*/ transform: scale(.75); line-height: 0; }
.menu-level2 .nav .nav-link:hover .caret, .menu-level2 .nav .nav-link.on .caret, .menu-level3 .nav-level3 .nav-link:hover .caret, .menu-level3 .nav-level3 .nav-link.on .caret { background-color: var(--color-primary-blue); }
.menu-level2 .nav .nav-link:hover .caret:after, .menu-level2 .nav .nav-link.on .caret:after, .menu-level3 .nav-level3 .nav-link:hover .caret:after, .menu-level3 .nav-level3 .nav-link.on .caret:after { filter: invert(); animation: .3s ease-in-out 0s 1 forwards rollCaret; }
.menu-level2 .picture { width: 100%; height: 100%; border-radius: var(--radius-2xl); background-size: cover; background-position: center center; opacity: 0; animation: .5s ease-in-out 0s 1 forwards showSectionPicture; }
.menu-level2 .picture.off { display: none; }
.menu-level2.hide .picture { animation: .5s ease-in-out 0s 1 forwards hideSectionPicture; }
.menu-level2 .nav.nav-webshops { display: block; column-count: 3; column-gap: var(--spacing-16); }

header .social-tools { display: flex; gap: .5rem; opacity: 0; animation: .5s ease-in-out .6s 1 forwards showSectionTitle; }
header .social-tools .icon { display: inline-block; width: 4rem; height: 4rem; background-color: var(--color-white); border-radius: var(--radius-2xl); padding: .5rem; display: flex; align-items: center; justify-content: center; line-height: 0; }
header .social-tools .icon img { max-width: 1rem; }
.menu-resp .social-tools .icon { border: 1px solid var(--color-primary-blue-dark); }

@keyframes showSubmenu {
	0% { height: 0; }
	100% { height: 100%; }
}
@keyframes hideSubmenu {
	0% { height: 100%; }
	100% { height: 0; }
}
@keyframes rotate180 {
	0% { transform: rotate(0); }
	100% { transform: rotate(-180deg); }
}
@keyframes showSectionTitle {
	0% { opacity: 0; transform: translateY(4rem); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes hideSectionTitle {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-4rem); }
}
@keyframes showSectionPicture {
	0% { opacity: 0; transform: scale(0); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes hideSectionPicture {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0); }
}
@keyframes rollCaret {
	0% { transform: translateX(0) scale(.75); }
	49% { transform: translateX(1rem) scale(.75); }
	50% { transform: translateX(-1rem) scale(.75); }
	100% { transform: translateX(0) scale(.75); }
}
@keyframes rollCaretLeft {
	0% { transform: translate(0, -50%) scale(.75); }
	49% { transform: translate(1rem, -50%) scale(.75); }
	50% { transform: translate(-1rem, -50%) scale(.75); }
	100% { transform: translate(0, -50%) scale(.75); }
}
@keyframes hoverButton {
	0% { width: 4rem; }
	100% { width: calc(100% + 4rem); }
}

.menu-level3 {
	display: none;
	flex-direction: column;
	width: 100%; height: 100%;
	padding: var(--spacing-32);
	background-color: var(--color-white);
	border-radius: var(--radius-2xl);
	animation: .5s ease-in-out 0s 1 forwards showSectionPicture;
}
.menu-level3.on { display: block; }
.menu-level3 .nav-level3 { list-style: none; padding: 0; }
.nav-level3-wrapper { overflow-y: scroll; }
.menu-level3 li {  }



/* filtres recherche emploi */
.dropdown-menu.split-2cols { column-count: 2; column-gap: var(--spacing-32); }
.select-menu { background-color: var(--color-white); border-radius: var(--radius-xl); }
.select-menu .dropdown-menu { padding: var(--spacing-16); border-radius: var(--radius-md); border-color: var(--color-primary-blue-light); z-index: 1000; }
.select-menu .form-check { display: flex; flex-shrink: 0; }
.select-menu .form-check .form-check-input { margin-left: 0; margin-right: .5rem; }
.select-menu .form-check label { white-space: nowrap; }
.select-menu .dropdown-toggle { display: flex; flex-shrink: 0; align-items: center; padding: .375rem .375rem .375rem .75rem; --bs-btn-border-radius: var(--radius-xl) !important; }
.select-menu .dropdown-toggle::after { background-color: var(--color-primary-blue-light); border-top: 0px transparent; border: none; border-radius: var(--radius-xl); padding: .5rem; content: url('../icons/feather/chevron-down.svg'); vertical-align: initial; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; margin-left: 1.5rem; }
.select-menu .dropdown-toggle:focus { border-color: var(--color-primary-blue-dark); }
/* inversion couleurs */
.filters-bar.whiteBg .select-menu { background-color: var(--color-primary-blue-light); }
.filters-bar.whiteBg .select-menu .dropdown-toggle::after { background-color: var(--color-white); }
.filters-bar.whiteBg button.white { background-color: var(--color-primary-blue-light); }


/* menu responsive */
header.resp { overflow: auto; }
.menu-toggler { padding: .5rem; margin-left: 1rem; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.menu-resp { display: none; width: 100%; height: 100%; min-height: 100vh; background-color: var(--color-white); }
.menu-resp #navLevel1 { display: flex; flex-direction: column; }
.menu-resp #navLevel1 .nav-link { color: var(--color-primary-blue-dark); font-family: var(--font-inter-tight); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-black); border-top: 1px solid var(--color-primary-blue-light-dark); position: relative; border-radius: 0; min-height: 3.3rem; display: flex; align-items: center; }
.menu-resp #navLevel1 .nav-link:after { content: ""; background-image: url(/medias/icons/arrow_right_circle.svg); background-size: 100%; background-repeat: no-repeat; position: absolute; right: var(--bs-nav-link-padding-x); height: 2.3rem; width: 2.3rem; aspect-ratio: 1 / 1; }
.resp-slide-level2 { transform: translateX(0); animation: .3s ease-in 0s 1 forwards slideRespMenu; position: absolute; top: 0; left: 0; /*height: 100%;*/ min-height: 100vh; z-index: 100; }
@keyframes slideRespMenu {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}
.resp-slide-level2 .section-title { font-size: var(--font-size-display-sm); margin-bottom: 1rem; }
.resp-slide-level2 .section-title .button.icon-x { display: none; }
.resp-slide-level2 .resp-back-button { padding: 1rem .5rem 1rem 2.8rem; height: 3.3rem; margin-top: 2rem; margin-bottom: 2rem; display: flex; align-items: center; border-bottom: 1px solid var(--color-primary-blue-light-dark); cursor: pointer; }
.resp-slide-level2 .resp-back-button:before { content: ""; background-image: url(/medias/icons/arrow_right_circle.svg); background-size: 100%; background-repeat: no-repeat; position: absolute; left: .5rem; height: 2.3rem; width: 2.3rem; aspect-ratio: 1 / 1; transform: rotate(180deg); }
.resp-slide-level2 .section-subtitle { display: none; }
.resp-slide-level2 .a-propos { font-size: var(--font-size-text-md); line-height: var(--line-height-md); }
.menu-level2.resp-slide-level2 .nav { border-bottom: 1px solid var(--color-primary-blue-light-dark); }
.menu-level2.resp-slide-level2 .nav .nav-link { border-radius: 0; border-top: 1px solid var(--color-primary-blue-light-dark); transform: translate(0); padding-left: 0; padding-right: 0; }
.menu-level2.resp-slide-level2 .nav .nav-link:after { display: none; }
.menu-level2.resp-slide-level2 .nav .nav-link.on .caret { transform: rotate(90deg); }
.menu-level2.resp-slide-level2 .picture { display: none; }
.menu-level2.resp-slide-level2 .social-tools { margin-top: 1rem !important; display: none; }
.bar-wrapper .social-tools { display: none; }
header.open.resp .bar-wrapper .menu-resp .social-tools { display: flex; margin: 1rem; animation: none; opacity: 1; }
.resp-slide-level2 .col-level3 { display: none; }
.resp-slide-level2 .menu-level3 { animation: none; background-color: transparent; padding: 0 0 0 var(--spacing-24); border-radius: none; }
.resp-slide-level2 .menu-level3 .nav-level3.split-2cols { column-count: 1; }
.resp-slide-level2 .menu-level3 .nav-level3 .nav-link { border-top: 0; padding: .2rem; }
.resp-slide-level2 .menu-level3 .nav-level3 .nav-link.on { font-weight: var(--font-weight-bold); }
.resp-slide-level2 .menu-level3 .nav-level3 .nav-link .caret { background-color: transparent; }
.resp-slide-level2 .menu-level3 .nav-level3 .nav-link.on .caret::after { filter: none; }
.resp-slide-level2 .nav.nav-webshops { column-count: 2; }

.menu-resp .menu-personas { padding: 0 0 0 var(--spacing-24); display: none; }
.menu-resp .menu-personas .nav-personas { flex-direction: column; }
.menu-resp .menu-personas .nav-personas .nav-link { font-weight: var(--font-weight-regular) !important; border: none !important; padding: .2rem; min-height: initial !important; }
.menu-resp .menu-personas .nav-personas .nav-link:after { background-image: url(/medias/icons/feather/chevron-right.svg) !important; background-size: 50% !important; background-position: center; }
.menu-resp .nav-link.open:after { transform: rotate(90deg); }

.menu-resp .lang-menu-wrapper { margin: 0 1rem; }
#lang-menu-resp .nav-link { padding: 1rem 2rem .25rem 1rem; color: var(--color-primary-blue-dark); }
#lang-menu-resp .nav-link img { width: 1.5rem; height: 1.5rem; margin-right: .25rem; }


@media (max-width: 768px) {
	.dropdown-menu.split-2cols { column-count: 1; }
}