/* .............................................................................
HEADER / TOP BAR
Top bar with logo, main nav, members access button.
............................................................................. */
.topBar {position: fixed;z-index: 100;width: 100%;background: transparent;}
.topBar__height {position: relative; height: var(--topbar-height); transition: height 0.4s}
.topBar__main {padding: 0 2em 0 1em;height: 100%;position: relative;display: flex;align-items: stretch;gap: 1em;background-color: var(--color-white);}


/* .............................................................................
Logo */
.topBar__logo {position: relative;z-index: 3;align-self: center;width: 20em;margin: 0;display: block;flex: 0 0 auto;transform-origin: 0% 50%;transition: transform 0.4s;}
.topBar__logo a {display: block;padding: 0;transition: opacity 0.3s;}

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


/* .............................................................................
Toggle */
.topBar__toggle {display: none;}


/* .............................................................................
Slide mobile */
.topBar__sSlide {display: block;flex: 1 1 auto;}
.topBar__sSlideIn {height: 100%;}
.topBar__sSlideCtn {height: 100%; display: flex; align-items: center;}
.topBar__sSlideNav {flex:1 1 auto; }
.topBar__sSlideNavMembers {flex:0 0 auto; }


/* .............................................................................
Main nav */
.navMain {--item-spacing: 2em;height: 100%;font-weight: 500;font-size: 0.85em;text-transform: uppercase;line-height: 1.2;text-decoration: none; margin-right: var(--item-spacing);}
.navMain > ul {height: 100%;list-style: none;display: flex;justify-content: flex-end;}
.navMain > ul > li {position: relative;display: block;flex: 0 0 auto;}
.navMain > ul > li > a {color: var(--color-base);position: relative;display: flex;align-items: center;height: 100%;padding: 0 var(--item-spacing);white-space: nowrap; transition: color 0.3s;}
.navMain > ul > li > a::after {position:absolute; z-index:1; display:block; content:''; bottom:0; height: 0.7em; left:0; right:0; background-color: var(--color-blue); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.3s;}

    /* Medium desktop- */
	@media (max-width:102rem) {
        .navMain {--item-spacing: 1.5vw; }
    }

    /* Hover + sub nav ON */
    .navMain > ul > li > a:hover,
    .navMain > ul > li.hover > a {color: var(--color-blue); }
    .navMain > ul > li > a:hover::after,
    .navMain > ul > li.hover > a::after {transform: scaleY(0.999); }

    /* 2e LEVEL / Nav : ::before = BG */
    .navMain > ul > li > ul {position: absolute;z-index: 3;left: 0;width: 12em;box-sizing: content-box;top: 100%;opacity: 0;visibility: hidden;margin: 0;padding: calc(0.75 * var(--item-spacing)) var(--item-spacing);line-height: 1.2;color: var(--color-white);transition: opacity 0s 0.3s, visibility 0s 0.3s;}
    .navMain > ul > li > ul::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: var(--color-blue-light);transform: scaleY(0);transform-origin: 50% 0%;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
    .navMain > ul > li > ul > li {display: block; opacity: 0; transition: opacity 0.15s; }
    .navMain > ul > li > ul > li > a {display: block;text-transform: none;padding: 0.5em 0;transition: color 0.2s;}
	.navMain > ul > li > ul > li > a:hover {color: var(--color-base);}

        /* Sub nav ON */
		.navMain > ul > li.hover { }
		.navMain > ul > li.hover > a::before {transform: scaleX(0.999); }
		.navMain > ul > li.hover > a + ul {opacity: 1;visibility: visible;transition: none;}
		.navMain > ul > li.hover > a + ul::before {transform: scaleY(0.999); }
		.navMain > ul > li.hover > a + ul > li {opacity: 1; transition-delay: 0.15s; }


/* .............................................................................
TOPBAR "IS SCROLLED"
Reduire la hauteur du topBar. */
.topBar.isSmaller { }
.topBar.isSmaller .topBar__height {height: var(--topbar-height-scrolled);}
.topBar.isSmaller .topBar__logo {transform: scale(0.75);}


/* Mobile nav */
@media (max-width:62rem) {
    .topBar__main {justify-content: space-between;padding: 0 1em;}

    /* Logo */
    .topBar__logo,
    .topBar.isSmaller .topBar__logo {background: transparent;transform: scale(1);width: 14em;}

    /* Toggle */
    .topBar__toggle {display: flex;align-items: center;flex: 0 0 auto;z-index: 7; }
    button.hamburger {font-size: 3.5em;display: block;position: relative;border-radius: 0;margin-right: -0.1em;}
    .hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.2em;height: 2px;background-color: var(--color-green);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%; }

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

    /* Slide mobile */
    .topBar__sSlide {position: absolute;z-index: -1;color: var(--color-base);text-align: left;left: 0;right: 0;top: -101vh;height: 100vh;height: var(--vh, 100vh);margin: 0;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__sSlideIn {padding-top: var(--topbar-height);position: relative;height: 100%;background: var(--color-white);}
    .topBar__sSlideCtn {display: flex;flex-direction: column;overflow: auto;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;height: 100%;padding: 6vh 0;}
    .topBar__sSlideNav {flex: 1 1 auto;}
    .topBar__sSlideNavMembers {flex:0 0 auto; }

    /* Main nav */
    .navMain {--item-spacing: 0.25em;font-size: calc(1em + 3vw);text-align: center;padding: 0 var(--width-std-right) 1em var(--width-std-left);margin-right: 0;height: auto;}
    .navMain > ul {height: auto;display: block;}
    .navMain > ul > li {opacity: 1;visibility: visible;display: block;margin: 0;transition: none;}
    .navMain > ul > li > a,
	.navMain > ul > li.hover > a {color: var(--color-base);padding: var(--item-spacing) 0;height: auto;white-space: normal;display: inline-block;}
    .navMain > ul > li > a:hover {color: var(--color-base);}
    .navMain > ul > li > a::after {display: none; }
    .navMain__lang {font-size: 0.5em; padding-top: 1.5em; }

		/* 2e LEVEL / Nav */
		.navMain > ul > li > ul,
		.navMain > ul > li.hover > ul {font-size: 1rem;position: static;left: auto;width: 100%;box-sizing: border-box;top:auto;opacity: 0;visibility: visible;height: 0;overflow: hidden;padding: 0;color: var(--color-base);}
		.navMain > ul > li > ul::before {display: none; }
		.navMain > ul > li > ul > li,
		.navMain > ul > li.hover > ul > li > li {border-bottom: 0; opacity: 1; transition: none; }
		.navMain > ul > li > ul > li:last-child {padding-bottom: 1em; }
		.navMain > ul > li > ul > li > a {/*padding: 0.3em 0;*/text-transform: uppercase;}
		.navMain > ul > li > ul > li > a:hover {color: var(--color-blue); }

			/* Sub nav ON */
			.navMain > ul > li.clicked > a {color:var(--color-blue); }
			.navMain > ul > li.clicked > ul {opacity: 1; height: auto; transition: opacity 0.5s, visibility 0.3s; }

    /*
    TOPBAR ON
    Show the mobile menu.
    Hamburger icon transforms to "x" on click. */
    .topBar.onNav .topBar__sSlide {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__sSlideCtn {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 avec logo en BG, liens, bouton, reseaux sociaux, copyright.
............................................................................. */
.footer {background: #000;}
.footer__layout {display: grid;grid-template-columns: 20% 0.55fr auto 0.1fr;gap: 1em;padding: 6.3em var(--width-std-right) 2.3em var(--width-std-left);overflow: hidden;position: relative;}
.footer__layout > * {position: relative; z-index: 1;}

	/* 3 cols layout */
	@media (max-width:62rem) {
        .footer__layout {grid-template-columns: 28% auto 1fr;padding-top: 3em;padding-bottom: 2.5em;}
    }

	/* 1 col layout */
	@media (max-width:46rem) {
		.footer__layout {display: block;padding-top: 3em;padding-bottom: 2em;text-align: center;}
	}


/* .............................................................................
Logo BG */
.footer__cLogoBG {grid-row: 1 / 2; grid-column: 1 / 2; position: relative; }
.footer__logoBG {position: absolute;z-index: 0;top: -0.15em;left: calc(-1 * var(--width-std) - 0.05em);color: #fff;opacity: 0.15;font-size: 24em;}

    /* At bottom left */
    @media (max-width:62rem) {
        .footer__cLogoBG {position: static; }
        .footer__logoBG {top: auto; bottom: -0.2em; }
    }

    /* Smaller */
    @media (max-width:46rem) {
        .footer__logoBG {font-size: min(95vw, 30em);left: calc(-1 * var(--width-std-left) - 0.03em);bottom: -0.25em;}
    }


/* .............................................................................
Liens en 2 colonnes */
.footer__cLinks {grid-row: 1 / 2;grid-column: 2 / 3;display: flex;justify-content: space-between;gap: 1em;}
.footer__cLinks > * {margin: 0;flex: 0 1 auto;}
.footer__cLinks .listFooter {margin-top: 0.9em;}

    /* Stacked lists */
    @media (max-width:62rem) {
        .footer__cLinks {grid-row: 1 / 3;grid-column: 2 / 3; display: block;}
        .footer__cLinks .listFooter {margin-top: 0.9em;}
        .footer__cLinks .listFooter + * {margin-top: 0; }
    }

    /* 1 col layout */
    @media (max-width:46rem) {
        .footer__cLinks .listFooter {margin-top: 0;}
    }


/* .............................................................................
Bouton pour members access. */
.footer__cMembers {grid-row: 1 / 2;grid-column: 3 / 4; text-align: center;}
.footer__cMembers .btn__label {font-size: 1em; }

    /* At right */
    @media (max-width:62rem) {
        .footer__cMembers {grid-row: 1 / 2;grid-column: 3 / 4; text-align: right;}
    }

    /* 1 col layout */
    @media (max-width:46rem) {
        .footer__cMembers {margin-top: 2.5em;text-align: center;}
    }


/* .............................................................................
Reseaux sociaux */
.footer__cRS {grid-row: 1 / 2;grid-column: 4 / 5; justify-self: flex-end; }
.footer__rs.rs {--spacing:0px; font-size: 3.5em; }

    /* At right */
    @media (max-width:62rem) {
        .footer__cRS {grid-row: 2 / 3;grid-column: 3 / 4;text-align: right;margin-top: auto;}
    }

    /* 1 col layout */
    @media (max-width:46rem) {
        .footer__cRS {margin-top: 1.5em;text-align: center;display: flex;justify-content: center;}
    }


/* .............................................................................
Copyright et liens */
.footer__cBottomBar {grid-row: 2 / 3;grid-column: 2 / 5;padding-top: 5em;}
.iFooterCopy {font-size: 0.85em; font-weight: 500; color: #808080;}

    /* Under all the elements */
    @media (max-width:62rem) {
        .footer__cBottomBar {grid-row: 3 / 4;grid-column: 2 / 4;padding-top: 4em;}
    }

    /* 1 col layout */
    @media (max-width:46rem) {
        .footer__cBottomBar {padding-top: 0; margin-top: 2.5em; }
        .iFooterCopy {font-size: 0.7em; }
    }