/* .............................................................................
HEADER / TOP BAR
Top bar is a side bar, with logo, nav, name and logout.
............................................................................. */
.topBar {position: sticky;top: 0;background-color: var(--color-base);}
.topBar__main {display: flex;flex-direction: column;height: 100vh;overflow: auto;padding: 1.5em 3em 3em var(--width-std-left);}


/* .............................................................................
LOGO */
.topBar__cLogo {flex:0 0 auto; }
.topBar__logo { }
.topBar__tag {font-weight: bold;}


/* .............................................................................
SLIDE MOBILE */
.topBar__cSlide {flex:1 1 auto;width: 14em;}
.topBar__slideIn { height: 100%;}
.topBar__slideCtn {display: flex; flex-direction: column;height: 100%;padding-top: 3em;gap: 3em;}


/* .............................................................................
NAV */
.topBar__navMain {flex: 1 1 auto;}
.navMain { }
.navMain ul {list-style: none; }
.navMain ul > li { }
.navMain ul > li > a {display: inline-block;padding: 0.35em 0;font-size: 1.35em;line-height: 1.1;font-weight: 300;color: var(--color-white);transition: color 0.2s;}
.navMain ul > li > a:hover {color: var(--color-orange); }

	/* Active */
	.navMain ul > li.active {position: relative; }
	.navMain ul > li.active::before {position:absolute;z-index:0;display:block;content:'';top: 1.3em;height: 1px;left:calc(-1 * var(--width-std));width: calc(0.7 * var(--width-std));background-color: var(--color-orange);}
	.navMain ul > li.active a {color: var(--color-orange); }


/* .............................................................................
BOTTOM */
.topBar__acces {flex:0 0 auto;}
.topBar__name {position: relative; padding-top: 1.25em; }
.topBar__name::before {position:absolute; z-index:0; display:block; content:''; top:0; height: 1px; left:0; width: 2.5em; background-color: var(--color-gray); }
.topBar__logout {font-weight: 300; text-transform: none; display: inline-block; margin-top: 0; padding: 0.5em 0; }


/* .............................................................................
TOGGLE */
.topBar__cToggle {display: none;}


/* Mobile nav */
@media (max-width:62rem) {
	.topBar {position: fixed; z-index: 100; width: 100%; }
	.topBar__main {flex-direction: row; align-items: center; height: var(--topbar-height);  padding: 0 var(--width-std); }

    /* Logo */
	.topBar__cLogo {flex: 1 1 auto;display: flex;align-items: center;gap: 1em;}
    .topBar__logo { }
	.topBar__tag {margin: 0;}

    /* Slide mobile */
    .topBar__cSlide {position: absolute;z-index: -1;left: 0;right: 0;top: -101vh;height: var(--vh, 100vh);margin: 0;width: auto;pointer-events: none;transform: translate3d(0, 0, 0);opacity: 0;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.5s;}
    .topBar__slideIn {padding-top: var(--topbar-height);position: relative;background-color: var(--color-base);}
    .topBar__slideCtn {display: flex;flex-direction: column;overflow: auto;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;padding: 3em var(--width-std-right) var(--width-std) var(--width-std-left);gap: 3em;}

    /* Main nav */
	.topBar__navMain { }
	.navMain {font-size: calc(1em + 1vw); }

    /* Toggle */
    .topBar__cToggle {display: flex;align-items: center;flex: 0 0 auto;z-index: 7; }
    button.hamburger {font-size: 3.5em;display: block;position: relative;margin-right: -0.2em;box-shadow: none;}
	button.hamburger::before {display:none;}
    .hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.2em;height: 2px;background-color: var(--color-orange);display: block;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 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%; }
        .hamburger__line:nth-child(4) {top:calc(68% - 1px); transform-origin: 0% 50%; }

	/* Bottom */
	.topBar__acces { }
	.topBar__name { }
	.topBar__logout { }

    /*
    TOPBAR ON
    Show the mobile menu.
    Hamburger icon transforms to "x" on click. */
    .topBar.onNav .topBar__cSlide {pointer-events: auto;transform: translate3d(0, 101vh, 0);opacity: 1;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;}
    .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;}
}



/* .............................................................................
FOOTER
Footer with copyright infos.
............................................................................. */
.footer { }
.footer__in {position: relative; font-size: 0.7em; padding: 1em 0; }
.footer__in::before {position:absolute; z-index:0; display:block; content:''; top:0; height: 1px; left:0; width: 2.5em; background-color: var(--color-gray); }