/* .............................................................................
HEADER / TOP BAR
Top bar with logo, main nav.
............................................................................. */
.topBar {position: fixed;z-index: 100;width: 100%;background: #fff;}
.topBar__height {position: relative; height: var(--topbar-height); transition: height 0.4s}
.topBar__main {height: 100%;display: flex;align-items: stretch;}

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

/* Logo */
.topBar__logo {position: relative;z-index: 3;align-self: center;margin: 0;display: block;flex: 0 0 auto;transform-origin: 0% 50%;transition: transform 0.4s;}
.topBar__logo a {display: block;font-size: 4.2em;font-size: min(4.1em, 4vw);padding-top: 0.17em;transition: opacity 0.3s;}

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

/* Logo B Corp */
.topBar__logoSecondary{
    align-self: center;
    margin-left: 2em;
    transform-origin: 0% 50%;
    transition: all 0.4s;
}
@media (max-width: 600px){
    .topBar__logoSecondary{
        margin-left: 1em;
    }
    .topBar__logoSecondary .svgIcon--logoBCorp, 
    .topBar__logoSecondary .svgIcon--logoBCorp svg{
        width: 0.5em;
    }
}

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

/* Main nav */
.navMain {--item-spacing: 1.2em;height: 100%;text-align: right;font-weight: 700;font-size: 1.3em;line-height: 1.2;text-decoration: none;}
.navMain > ul {height: 100%;list-style: none;display: flex;justify-content: flex-end;}
.navMain > ul > li {flex: 0 0 auto;display: flex;align-items: center;padding: 0 var(--item-spacing);}
.navMain > ul > li > a {color: var(--color-blue);position: relative;display: block;padding: 0.4em;white-space: nowrap;transition: color 0.2s;}
.navMain > ul > li:last-child > a {margin-right: calc(-1 * var(--item-spacing));}

    /* Hover */
    .navMain > ul > li > a:hover {color: var(--color-pink); }

    /* Spacing */
    @media (max-width:93rem) {
        .navMain {--item-spacing: 0.5vw; }
    }

/* Reseaux sociaux */
.topBar__rs {display: none; }

/* Retour au site principal */
.topBar__mainSite {font-size: 1.1em;height: 100%;margin-left: 7%;display: flex;align-items: center;}
.topBar__mainSite a {display: inline-block;color: var(--color-blue-pale);font-weight: 700;font-size: 1.1em;line-height: 1.2;text-decoration: none;padding: 0.4em;transition: color 0.2s;}

	/* Hover */
	.topBar__mainSite a:hover {color: var(--color-blue); }

/* Lang */
.topBar__lang {flex:0 0 auto; display: flex; align-items: center; margin-left: 4%; }
.topBar__lang a {display: block;flex:0 0 auto;font-size: 0.8em;font-weight: bold;border: 1px solid var(--color-blue);width: 1.5em;height: 1.5em;line-height: 1.65;border-radius: 50%;padding: 0.35em;box-sizing: content-box;text-align: center; transition: background 0.2s, color 0.2s;}

	/* Hover */
	.topBar__lang a:hover {background-color: var(--color-blue); color: #fff; }


/*
TOPBAR "IS SCROLLED"
Reduire la hauteur du topBar. */
.topBar.isSmaller { }
.topBar.isSmaller .topBar__height {height: var(--topbar-height-scrolled);}
.topBar.isSmaller .topBar__logo,
.topBar.isSmaller .topBar__logoSecondary {transform: scale(0.7);}
.topBar.isSmaller .topBar__logoSecondary{
    margin-left: -2em;
}


/* Spacings */
@media (max-width:100rem) {
    .topBar__lang {margin-left: 2%; }
    .topBar__mainSite {margin-left: calc(-7.5em + 11vw);}
}


/* Smallest possible "main site" link */
@media (max-width: 75rem) {
    .topBar__mainSite {width: min-content; }
}


/* Mobile nav */
@media (max-width:62rem) {
    /* Toggle */
    .topBar__toggle {width: 4em;display: flex;align-items: center;flex: 0 0 auto;z-index: 7;}
    button.hamburger {font-size: 3em;display: block;position: relative;border-radius: 50%;background: var(--color-gray);}
    .hamburger__line {display: block;position: absolute;left: 0;right: 0;top: 0;margin: 0 0.28em;height: 3px;background-color: var(--color-blue-pale);border-radius: 0.1em;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(37% - 1px); transform-origin: 0% 50%; }
        .hamburger__line:nth-child(4) {top:calc(63% - 1px); transform-origin: 0% 50%; }

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

    /* Logo */
    .topBar__logo {flex:1 1 auto; display: flex; justify-content: center; transform-origin: 50% 50%; }
    .topBar__logo a {font-size: 3.8em;flex:0 0 auto;}

    /* 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: #fff;}
    .topBar__sSlideCtn {display: flex;flex-direction: column;overflow: auto;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;height: 100%;}

    /* Main nav */
    .navMain {--item-spacing: 4vh;flex: 1 1 auto;font-size: calc(0.8em + 2vw);text-align: center;height: auto;width: 100%;padding: 3vh var(--width-std-right) 3vh var(--width-std-left);}
    .navMain > ul {height: auto;display: block;}
    .navMain > ul > li {opacity: 1;visibility: visible;display: block;padding: 0;margin: 0;transition: none; border-bottom: 1px solid var(--color-blue);}
    .navMain > ul > li > a,
    .navMain > ul > li:last-child > a {padding: var(--item-spacing) 0;height: auto;white-space: normal;display: inline-block;margin-right: 0;}

	/* Reseaux sociaux */
	.topBar__rs {display: block;flex:1 1 auto;padding: 2vh 0;}

	/* Retour au site principal */
	.topBar__mainSite {flex:1 1 auto;display: block;height: auto;margin: 0;padding: 2vh var(--width-std-right) 2vh var(--width-std-left);width: auto;}
	.topBar__mainSite a {font-size: 1.5em;text-align: center;}

	/* Lang */
	.topBar__lang {width: 4em;margin-left: 0;justify-content: flex-end;}


    /*
    TOPBAR "IS SCROLLED"
    Reduire la hauteur du topBar. */
    .topBar.isSmaller .topBar__logo {transform: scale(0.8);}


    /*
    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;}
}

/* Ajustements */
@media (max-width:47rem) {
    .topBar__logo a {font-size: 3.2em;font-size: calc(1.4em + 5vw);}
}

@media (max-width: 480px){
    /* Width des 2 elements sur les sides du logo */
    .topBar__toggle {width: 3em; }
	.topBar__lang {width: 3em;}
}



/* .............................................................................
FOOTER
Footer with logo, social networks, address, copyright and link.
............................................................................. */
.footer {background: var(--color-blue);margin-bottom: var(--width-std-gap);position: relative;}
.footer__top {text-align: center;padding-top: 3em;padding-bottom: 1.5em; position: relative;}
.footer__logo {font-size: 4.8em;display: flex;justify-content: center;}
.footer__logoSecondary{
    color: var(--color-base-on-dark);
    position: absolute;
    top: calc(50% + .75em);
    right: 0;
    transform: translateY(-50%);
}
.footer__logoSecondary .svgIcon--logoBCorp, 
.footer__logoSecondary .svgIcon--logoBCorp svg{
    width: 0.8em;
    fill: #fff;
}
.footer__rs {margin: 2em 4em 0; justify-content: center;}
.footer__address {font-size: 0.85em; }
.footer__bottom {position: relative; display: flex; padding: 1.5em 0; }
.footer__bottom::before {position:absolute; z-index:0; display:block; content:''; top:0; height: 1px; left:0; right:0; background-color: #fff; opacity: 0.3; }
.footer__bottom > * {display: block; flex:0 0 auto; margin: 0; }
.footer__mainSite {order: 2; }
.footer__copy {flex:1 1 auto; font-size: 0.85em; font-weight: 300; }
.footer__year {display: inline-block; margin-right: 3em; }
.footer__btnToTop {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.footer__btnToTop button .svgIcon svg {color: var(--color-blue-pale);transition: color 0.3s;}
.footer__btnToTop button:hover .svgIcon svg {color: var(--color-blue);}

/* Main site link */
.footer__mainSite a {color: var(--color-blue-pale);font-weight: 700;line-height: 1.2;text-decoration: none;transition: color 0.2s;}
.footer__mainSite a:hover {color: #fff; }

    /* Break cols */
    @media (max-width:62rem) {
        .footer {margin-left: calc(-1 * var(--width-std-left));margin-right: calc(-1 * var(--width-std-right));margin-bottom: 4em;}
        .footer__logo {font-size: min(4.3em, 15vw);}
        .footer__rs{
            margin-left: 0;
            margin-right: 0;
        }
        .footer__logoSecondary{
            position: static;
            margin: 1em auto 0;
            transform: none;
        }
        .footer__logoSecondary .svgIcon{
            margin: 0 auto;
        }
        .footer__bottom {display: block; text-align: center; padding-bottom: 4em; }
        .footer__copy {margin-top: 1.5em; }
        .footer__year {display: block; margin: 0; }
    }

    /* Spacing */
    @media (max-width:47rem) {
        .footer {margin-bottom: 3em;}
    }

/* Recaptcha */
.grecaptcha-badge {visibility: hidden;}