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


/* .............................................................................
Logo */
.topBar__logo {font-size: 5em;margin-left: 0.2em; color: var(--color-orange);flex: 0 0 auto;transform-origin: 0% 50%;transition: transform 0.4s, color 0.5s;}
.topBar__logo a {position: relative;display: block;will-change: opacity;transition: opacity 0.3s;}
.topBar__logo .svgIcon {opacity: 1; transition: opacity 0.4s;}

	/* Default: logo with text visible. Will change to "no text" when scrolled. */
	.topBar__logo .svgIcon--logoCoalitionNoText {position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;}

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


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


/* .............................................................................
Slide mobile */
.topBar__sSlide {height: 100%;display: block;flex: 1 1 auto;}
.topBar__sSlideIn {height: 100%;}
.topBar__sSlideCtn {height: 100%;position: relative;}


/* .............................................................................
Main nav */
.topBar__navMain {height: var(--topbar-nav-height);position: absolute;z-index: 3;bottom: calc(-1 * var(--topbar-nav-height) / 2);right: 0;transition: height 0.4s, bottom 0.4s;}
.navMain {--item-spacing-v: 1px;--item-spacing-h: 2em;height: 100%;background: var(--color-orange);list-style: none;display: flex;justify-content: flex-end;}
.navMain > li {height: 100%;position: relative;display: block;flex: 0 0 auto;}
.navMain > li > a {font-size: 0.95em;height: 100%;color: #fff;position: relative;display: flex;align-items: center;white-space: nowrap;padding: calc(0.2em + var(--item-spacing-v)) var(--item-spacing-h) var(--item-spacing-v) var(--item-spacing-h);transition: background-color 0.3s;}

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

    /* Arrow for links with a sub nav */
    .navMain > li.hasChildren > a::after {font-size: 0.8em;position:absolute;z-index: 5;display:block;content:'';top:calc(100% - 1px);left: 50%;border: 0 solid transparent;border-top-color: var(--color-green);opacity: 0;transform: translate(-50%, 0%);transition: border 0.3s, opacity 0.3s;}
    .navMain > li.hasChildren.on > a::after {opacity: 1;border-width: 1em;}

    /* Nav with children : ::before = BG */
    .navMain > li > ul {position: absolute;z-index: 3;left: 50%;width: 22em;top: 100%;opacity: 0;visibility: hidden;margin: 0;padding: 1.5em 2em;line-height: 1.2;text-transform: none;text-align: center;transform: translateX(-50%);transition: opacity 0s 0.3s, visibility 0s 0.3s;}
    .navMain > li > ul::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: #f5f5f5;transform: scaleY(0);transform-origin: 50% 0%;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
    .navMain > li > ul li {display: block; opacity: 0; transition: opacity 0.15s; }
    .navMain > li > ul a {display: inline-block;padding: 0.7em 0;color: var(--color-green);transition: color 0.2s;}

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

        /* Sub nav ON */
        .navMain > li.on { }
		.navMain > li.on > a {background-color: var(--color-green); }
        
        .navMain > li.on > ul {opacity: 1; visibility: visible; transition: none; }
        .navMain > li.on > ul::before {transform: scaleY(0.999); }
        .navMain > li.on > ul li {opacity: 1; transition-delay: 0.15s; }


/* .............................................................................
Simili panel */
.navMain__similiPanel {opacity: 0;visibility: hidden;position: fixed;z-index: -1;top: var(--topbar-height);left: 0;right: 0;transition: opacity 0s 0.3s, visibility 0s 0.3s, top 0.4s;}
.navMain__similiPanel::before {position:absolute;display:block;content:'';z-index: -1;top:0;bottom:0;left:0;right:0;background-color: #f5f5f5;transform: scaleY(0);transform-origin: 50% 0%;transition: transform 0.3s;}

.tBSimiliPanel {--espacementV: 1px;--espacementH: 2.5%;padding: 8vh 4% 6vh var(--width-std-left);}
.tBSimiliPanel__in {display: flex;align-items: flex-start;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.tBSimiliPanel__in > * {flex: 1 1 auto;padding: var(--espacementV) var(--espacementH);}
.tBSimiliPanel__cNav {flex:0 0 auto;width: 35%; opacity: 0; transition: opacity 0.3s; }
.tBSimiliPanel__cNav .listPanel {max-width: 12em;}
.tBSimiliPanel__cBox {width:50%; opacity: 0; transform: translateY(2rem); transition: opacity 0.3s, transform 0.3s; }
.tBSimiliPanel__head {margin-bottom: 3em; }
.tBSimiliPanel__head h3 {text-transform: none; }

    /* On */
    .navMain > li.on .navMain__similiPanel {opacity: 1; visibility: visible; transition: opacity 0s, visibility 0s, top 0.4s; }
    .navMain > li.on .navMain__similiPanel::before {transform: scaleY(0.999); }
    .navMain > li.on .tBSimiliPanel__cNav {opacity: 1; transition: opacity 0.3s 0.15s; }
    .navMain > li.on .tBSimiliPanel__cBox {opacity: 1; transform: translateY(0); transition: opacity 0.5s 0.3s, transform 0.5s 0.3s; }
    .navMain > li.on .tBSimiliPanel__cBox + .tBSimiliPanel__cBox {transition-delay: 0.45s; }

/* Mobile subnav (pour remplacer le similipanel) */
.navMain__mobileSubNav {display: none; }


/* .............................................................................
Sub nav */
.topBar__navSub {--item-spacing-v: 1em;--item-spacing-h: 1em;font-size: 0.95em;padding-right: 2em;height: 100%;padding-bottom: calc(var(--topbar-nav-height) / 2);display: flex;align-items: center;justify-content: flex-end;}
.topBar__navSub > * {margin: 0; }

.subNav {position: relative;color: var(--color-green);list-style: none;margin-right: calc(2 * var(--item-spacing-h));}
.subNav::after {position:absolute;z-index:0;display:block;content:'';background-color: currentColor;top:var(--item-spacing-v);bottom:var(--item-spacing-v);right: calc(-1 * var(--item-spacing-h));width: 1px;}
.subNav > li {display: inline-block;}
.subNav > li > a {display: inline-block;padding: var(--item-spacing-v) var(--item-spacing-h);transition: color 0.2s;}
.subNav > li > a:hover {color: var(--color-orange); }

.langNav {--item-spacing-h: 0.7em;color: var(--color-green);list-style: none;}
.langNav > li {display: inline-block;}
.langNav > li > a {display: inline-block;padding: var(--item-spacing-v) var(--item-spacing-h);transition: color 0.2s;}
.langNav > li > a:hover {color: var(--color-orange); }

	/* Active lang */
	.langNav > li.active {position: relative; }
	.langNav > li.active::before {position:absolute; z-index:0; display:block; content:''; background-color: var(--color-green); bottom:calc(var(--item-spacing-v) - 0.3em); height: 2px; left:var(--item-spacing-h); right:var(--item-spacing-h); }

.topBar__btnMembres {margin-left:calc(2 * var(--item-spacing-h)); margin-right: calc(-1 * var(--item-spacing-h)); }
.topBar__btnMembres > a {padding: var(--item-spacing-v) var(--item-spacing-h); }

.topBar__rs {display: none; }


/* .............................................................................
TOPBAR "IS SCROLLED"
Reduire la hauteur du topBar. */
.topBar.isSmaller:not(.isNotSmaller) { }
.topBar.isSmaller:not(.isNotSmaller) .topBar__size {height: var(--topbar-height-scrolled);}
.topBar.isSmaller:not(.isNotSmaller) .topBar__logo {transform: scale(0.75) translateY(10%);}
.topBar.isSmaller:not(.isNotSmaller) .topBar__logo .svgIcon {opacity: 0; }
.topBar.isSmaller:not(.isNotSmaller) .topBar__logo .svgIcon--logoCoalitionNoText {opacity: 1; }
.topBar.isSmaller:not(.isNotSmaller) .topBar__navMain {height: var(--topbar-height-scrolled);bottom: 0;}
.topBar.isSmaller:not(.isNotSmaller) .navMain__similiPanel {top: var(--topbar-height-scrolled);}


/* .............................................................................
Mobile nav */
@media (max-width:62rem) {
    /* Logo */
    .topBar__logo,
    .topBar.isSmaller:not(.isNotSmaller) .topBar__logo {font-size: 3.1em;flex: 1 1 auto;margin-left: 0.2em;transform: scale(1);display: flex;align-items: center;justify-content: flex-start;}
    .topBar__logo .svgIcon,
    .topBar.isSmaller:not(.isNotSmaller) .topBar__logo .svgIcon {opacity: 1; }
    .topBar__logo .svgIcon--logoCoalitionNoText,
    .topBar.isSmaller:not(.isNotSmaller) .topBar__logo .svgIcon--logoCoalitionNoText {opacity: 0; }

    /* Toggle */
    .topBar__toggle {display: flex;align-items: center;flex: 0 0 auto;z-index: 7;overflow: hidden;height: 100%;}
    button.hamburger {font-size: 7em;display: block;position: relative;margin-right: -0.3em;}
    button.btnIcon.hamburger::before {transform: scale(1);}
    .hamburger__line {display: block;position: absolute;left: 22%;right: 45%;top: 0;margin: 0;height: 3px;background-color: #fff;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(38% - 1px);transform-origin: 0% 50%;}
        .hamburger__line:nth-child(4) {top: calc(62% - 1px);transform-origin: 0% 50%;left: 33%;}

    /* Slide mobile 
    .topBar__main::after is the orange BG that animates on slide open. */
    .topBar__main::after {position:absolute; z-index:-2; display:block;content:'';background: var(--color-orange);top:calc(var(--topbar-height) / 2);right:2em;width: 250vmax;height: 250vmax;border-radius: 250vmax;transform: translate(50%, -50%) scale(0); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
    .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 0s 0.5s, opacity 0.2s;}
    .topBar__sSlideIn {padding-top: var(--topbar-height);position: relative;height: 100%;background: var(--color-orange);}
    .topBar__sSlideCtn {display: flex;flex-direction: column;overflow: auto;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;}

    /* Main nav */
    .topBar__navMain,
    .topBar.isSmaller:not(.isNotSmaller) .topBar__navMain {flex: 0 0 auto;height: auto;position: static;bottom: 0;}
    .navMain {--item-spacing-v: 1.4em;--item-spacing-h: 1px;font-size: calc(0.9em + 1.3vw);height: auto;padding: 3vh var(--width-std-right) 0 var(--width-std-left);display: block;}
    .navMain > li {height: auto;}
    .navMain > li:not(:first-child) {border-top: 1px solid #fff;}
    .navMain > li > a {height: auto;white-space: normal;display: block;}

        /* Hover */
        .navMain > li > a:hover {background-color: transparent; }

        /* +/- for links with a sub nav */
        .navMain > li.hasChildren > a {padding-right: 2em;}
        .navMain > li.hasChildren > a::before,
        .navMain > li.hasChildren > a::after {position:absolute;z-index: 2;display:block;content:" ";left: auto;right: 0;top:50%;transform:translateY(-50%);background: #fff;width: 1em;height: 2px;transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);backface-visibility: hidden;font-size: 1em;border: none;opacity: 1;}
        .navMain > li.hasChildren > a::after {transform: translateY(-50%) rotate(90deg);}

        /* Nav with children */
        .navMain > li > ul {font-size: 0.95em;width: auto;text-align: left;position: relative;left: auto;top: auto;margin: 0;padding: 0 0 1.5em 0;transform: none;opacity: 1;visibility: visible;transition: none;display: none;}
        .navMain > li > ul::before {display: none;}
        .navMain > li > ul a {padding: 0.5em 0;color: #fff;}

            /* Hover */
            .navMain > li > ul a:hover {color: #fff; }

            /* Sub nav ON */
            .navMain > li.on { }
            .navMain > li.on > a {background-color: transparent; }
            .navMain > li.on > a::after {transform:translateY(-50%) rotate(180deg);}

    /* Subnav on mobile shown in the slide zone. */
    .topBar__navSub {--item-spacing-h: 1px;flex: 1 0 auto;display: flex;flex-wrap: wrap;align-items: flex-start;align-content: space-between;justify-content: space-between;padding: 0;background: #fff;height: auto;padding: 2em var(--width-std-right) 2em var(--width-std-left);}
    .subNav {--item-spacing-v: 0.9em;width: 100%;margin: 0 0 var(--item-spacing-v) 0;}
    .subNav::after {left: 0;right: auto;width: 3em;top: auto;bottom: calc(-1 * var(--item-spacing-v));height: 1px;}
    .subNav > li {display: block;}

    .langNav {--item-spacing-h: 0.7em; order: 10; width: 50%; margin-left: calc(-1 * var(--item-spacing-h)); }

    .topBar__btnMembres {margin: 0;width: 100%;}

    .topBar__rs {display: block;order: 11;}
    
    /* Deactivate simili panel and activate mobile subnav */
    .navMain__similiPanel {display: none; }
    .navMain__mobileSubNav {display: block; }
    
    /*
    TOPBAR ON
    Show the mobile menu.
    Hamburger icon transforms to "x" on click. */
    .topBar.onNav .topBar__logo {color: #fff;}

    .topBar.onNav .topBar__main::after {transform: translate(50%, -50%) scale(1); }
    .topBar.onNav .topBar__sSlide {transform: translate3d(0, 101vh, 0);opacity: 1;transition: transform 0s, opacity 0.2s 0.3s;}
    .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 top: boxes to find a job, blog tags and newsletter subscription.
Footer bottom: address, logo, social medias and buttons.
............................................................................. */
.footer { }
.footer__top {display: flex; }
.footer__top > * {flex:0 0 auto; width: 33.33%; }

	/* Break cols */
	@media (max-width:62rem) {
		.footer__top {display: block; }
		.footer__top > * {width: 100%; }
	}

/* Footer box */
.iFooterBox {position: relative; }
.iFooterBox__ctn {position: absolute;z-index: 2;top: 50%;left: 0;right: 0;transform: translateY(-50%);text-align: center;padding: 5%;}
.iFooterBox__img {position: relative; height: 100%; }
.iFooterBox__img * {height: 100%; width: 100%; object-fit: cover;}
.iFooterBox__img::before {position:absolute; z-index:1; display:block; content:''; top:0; bottom:0; left:0; right:0; background: #000; opacity: 0.25; }

/* Blog with tags box */
.iFooterBlog {background: var(--color-orange); display: flex; align-items: center; justify-content: center; }
.iFooterBlog__ctn {text-align: center;margin: 8%;width: 100%;max-width: 22em;}

/* Bottom */
.footer__bottom {--width-logo:12em;background: var(--color-green);padding: 3% 4%;display: flex;align-items: center;}
.footer__cLogo {order:1; flex:0 0 auto; width: var(--width-logo); text-align: center; }
.footer__cAddress {order:0;flex:1 1 auto;width: calc(50% - var(--width-logo) / 2);font-size: 0.9em;line-height: 1.4;padding-right: 7%;}
.footer__cBtns {order:2;flex:1 1 auto;width: calc(50% - var(--width-logo) / 2);text-align: right;padding-left: 5%;margin-right: -1.4%;}
.footer__cBtns > .btn {margin: 4% 3.5%; }
.footer__logo {font-size: var(--width-logo);}
.footer__logo + .rs {margin-top: 0.5em; }

	/* Logo link */
	.footer__logo a {display: block;transition: opacity 0.3s;}
	.footer__logo a:hover {opacity: 0.7; }

    /*
	ANIMATE */
	@media (min-width:62.01rem) {
		.animate .iFooterBox__ctnAppear {opacity: 0; transform: translateY(2rem); }
		.iFooterBox__ctnAppear {opacity: 1; transform: translateY(0); transition: opacity 1s, transform 1s; transition-delay: 0s; }
        
		.animate .iFooterBlog__ctnAppear {opacity: 0; transform: translateY(2rem); }
		.iFooterBlog__ctnAppear {opacity: 1; transform: translateY(0); transition: opacity 1s, transform 1s; transition-delay: 0.2s; }

		.animate .iFooterBox:last-child .iFooterBox__ctnAppear {opacity: 0; transform: translateY(2rem); }
		.iFooterBox:last-child .iFooterBox__ctnAppear {opacity: 1; transform: translateY(0); transition: opacity 1s, transform 1s; transition-delay: 0.4s; }
	}

	/* Make it fit in tablet */
	@media (max-width:62rem) {
		.footer__bottom {--width-logo:10em; padding-top: 6%; padding-bottom: 6%; }
	}

	/* Break cols */
	@media (max-width:47rem) {
		.footer__bottom {--width-logo: 14em;display: block;padding: 15% var(--width-std-right) 15% var(--width-std-left);}
		.footer__cLogo {margin: 0 auto;}
		.footer__cAddress {font-size: 1em;width: 100%;text-align: center;margin-top: 10%;padding: 0;}
		.footer__cBtns {width: 100%;text-align: center;margin-top: 10%;margin-right: 0;padding: 0;}

		.footer .rs {font-size: 4em; }
		.footer .rs li a {margin: 0.05em; }
	}