/* .............................................................................
TOP BAR
Top bar with logo, nav, language switcher and contact button.
............................................................................. */
.topBar {position: fixed;z-index: 10;width: 100%;}
.topBar::before {position:absolute;z-index:0;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: var(--color-white);transform-origin: 50% 0%;transform: scaleY(0);transition: transform 0.4s;}
.topBar__height {position: relative; height: var(--topbar-height); transition: height 0.4s}
.topBar__layout {height: 100%;padding: 0 2.2em;display: flex;align-items: center;gap: 2em;}


/* .............................................................................
Logo */
.topBar__cLogo {position: relative;z-index: 3;flex: 0 1 auto;}
.topBar__logo {width: min(58vw, 21em);transform-origin: 0% 50%;transform: translateY(-24%);transition: transform 0.4s;}
.topBar__logo a {display: block; transition: opacity 0.3s;will-change: opacity;}

    /* Hover logo */
    .topBar__logo a:hover {opacity: 0.6; }


/* .............................................................................
Toggle */
.topBar__cToggle {display: none;}
button.hamburger {display: block; background: none; margin-right: -0.25em;}
button.hamburger::before {display: none; }
.hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.25em;height: 2px;background-color: var(--color-red);display: block;transition: transform 0.3s var(--ease-cubic), opacity 0.3s, top 0.3s;}

	/* Les barres centrales formeront le "X" */
	.hamburger__line:nth-child(2),
	.hamburger__line:nth-child(3) {top: calc(50% - 1px); }

	/* Barre du haut et du bas */
	.hamburger__line:nth-child(1) {top: calc(32% - 1px);transform-origin: 0% 50%; margin-left: 0.15em; }
	.hamburger__line:nth-child(4) {top: calc(68% - 1px);transform-origin: 0% 50%; margin-left: 0.35em; }

	/* Hover mobile toggle */
	.hamburger:hover {cursor: pointer;}


/* .............................................................................
Slide mobile */
.topBar__cSlide {display: block;flex: 1 1 auto;}
.topBar__slide { }
.topBar__slideCtn {display: flex;align-items: center;gap: 1.7em;}
.topBar__slideNav {flex: 1 1 auto;}
.topBar__slideLang {flex: 0 0 auto;}
.topBar__slideBtn { }


/* .............................................................................
Main nav */
.navTB {--item-spacing: clamp(0.5em, 1.1vw, 1.7em);font-size: 1.1em;font-weight: 700;line-height: 1.2;list-style: none;display: flex;justify-content: center;align-items: center;}
.navTB > li {display: block;flex: 0 0 auto;}
.navTB > li > a {color: var(--color-base);position: relative;z-index: 2;display: block;margin: 0;padding: 0.4em var(--item-spacing);white-space: nowrap;transition: color 0.3s;}

	/* Active */
	.navTB > li > a.active {color:var(--color-red); }

	/* Hover */
    .navTB > li > a:hover,
	.navTB > li.hover > a {color:var(--color-red); }

	/*
	ALT :
	Lang. */
	.navTB--lang {--item-spacing: 0.5em; }


/* .............................................................................
TOPBAR / Scrolled
Reduire la hauteur du topBar.
Réduire le logo et ajuster l'alignement pour que ça soit centré dans la barre. */
.topBar.isSmaller { }
.topBar.isSmaller::before {transform: scaleY(1); }
.topBar.isSmaller .topBar__height {height: var(--topbar-height-scrolled);}
.topBar.isSmaller .topBar__logo {transform: translateY(-8%) scale(0.9);}


/* .............................................................................
ANIMATE
Animation on page load. */
.topBar__layout {transform: translateY(-100%); transition: transform 1s var(--ease-cubic); }
.pageLoaded .topBar__layout {transform: none; }


/* .............................................................................
Mobile nav */
@media (max-width:62rem) {
	/* Logo */
    .topBar__cLogo {flex:1 1 auto; }
	.topBar__logo {transform: translateY(-8%);}

    /* Toggle */
    .topBar__cToggle {display: block;z-index: 7;}

    /* Slide mobile */
    .topBar__cSlide {position: absolute;z-index: -1;color: var(--color-base);text-align: center;left: 0;right: 0;top: calc(-1 * (100dvh + 1px));height: 100dvh;margin: 0;transform: none;transition: transform 0.5s var(--ease-cubic);}
    .topBar__slide {padding-top: var(--topbar-height);height: 100%;background: var(--color-white);}
    .topBar__slideCtn {--spacing: clamp(1rem, 4.5vh, 2.5rem);display: flex;gap: var(--spacing);flex-direction: column;overflow: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;padding: 5vh 0;height: 100%;}
	.topBar__slideCtn > * {flex:0 1 auto; }
    .topBar__slideNav {margin-top:auto;margin-bottom: var(--spacing);}
    .topBar__slideLang {order:9;margin-bottom:auto;}

	/* Main nav */
	.navTB {--item-spacing:calc(0.5 * var(--spacing));font-size: calc(1.5em + 1.5vw);flex-direction: column;gap: 0;}
	.navTB > li { }
	.navTB > li > a {padding: var(--item-spacing); }
	.navTB--lang {--item-spacing: 0.5em;font-size: 1.2em;flex-direction: row;}

    /*
    TOPBAR ON
    Show the mobile menu.
    Hamburger icon transforms to "x" on click. */
    .topBar.onNav .topBar__cSlide {transform: translateY(calc(1 * (100dvh + 1px)));transition: transform 0.5s var(--ease-cubic);}
    .topBar.onNav .topBar__slideCtn {opacity: 1; transition-delay: 0.3s;}
    
    .topBar.onNav .hamburger__line:nth-child(2) {transform:rotate(45deg); transition-delay: 0.1s;}
    .topBar.onNav .hamburger__line:nth-child(3) {transform:rotate(-45deg); transition-delay: 0.1s;}

    .topBar.onNav .hamburger__line:nth-child(1) {top: calc(50% - 1px); opacity: 0;}
    .topBar.onNav .hamburger__line:nth-child(4) {top: calc(50% - 1px); opacity: 0;}
}

/* Spacings */
@media (max-width:46rem) {
	.topBar__layout {padding: 0 1.5em; }
	.topBar__logo {margin-left: -0.3em; }
}