/* .............................................................................
HEADER / TOP BAR
Top bar with logo, main nav, sub navs and 2 buttons at right.
............................................................................. */
.topBar {position: fixed;z-index: 100;width: 100%;background: transparent;}
.topBar__height {position: relative; height: var(--topbar-height); transition: height 0.4s}
.topBar__main {height: 100%;background-color: var(--color-white);position: relative;display: grid;grid-template-columns: 1fr auto 1fr;gap: 1em;align-items: start;}


/* .............................................................................
Logo */
.topBar__logo {grid-column: 1 / 2;grid-row: 1 / 2;position: relative;z-index: 3;align-self: center;margin: 0;margin-left: var(--width-std);display: flex;justify-content: flex-start;}
.topBar__logo a { }
.topBar__logoFull {width: 9em; background-color: var(--color-white);transition: transform 0.4s, opacity 0.4s, visibility 0.4s; }
.topBar__logoFull a {display: block;padding: 0.7em 1.2em;transition: opacity 0.3s; }
.topBar__logoSimple {position: absolute; top: 0;height: var(--topbar-height);left: 0;width: 5.5em;display: flex;align-items: center;opacity: 0;visibility: hidden; transform: translateY(-50%); transition: transform 0.4s, opacity 0.4s, visibility 0.4s; }
.topBar__logoSimple a {display: block; padding: 0.5em 0; transition: opacity 0.3s; }

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

    /*
    STATE / Is scrolled
    Afficher la version plus simple du logo. */
    .topBar.isScrolled .topBar__logoFull {opacity: 0; transform: translateY(-101%); visibility: hidden;}
    .topBar.isScrolled .topBar__logoSimple {opacity: 1; transform: none; visibility: visible;}


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


/* .............................................................................
Slide mobile */
.topBar__sSlide {grid-column: 2 / 3;grid-row: 1 / 2;height: var(--topbar-height);}
.topBar__sSlideIn {height: 100%;}
.topBar__sSlideCtn {height: 100%; }
.topBar__sSlideNav { }
.topBar__sSlideNavButtons {display: none;}


/* .............................................................................
Main nav */
.navMain {--item-spacing: 1.6em;height: 100%;font-weight: 700;font-size: 1em;line-height: 1.2;text-decoration: none;}
.navMain > ul {height: 100%;list-style: none;display: flex;}
.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;}

    /* Hover + sub nav ON */
    .navMain > ul > li > a:hover,
    .navMain > ul > li.active > a,
    .navMain > ul > li.hover > a {color: var(--color-pink); }

    /* 2e LEVEL / Nav : ::before = BG */
    .navMain > ul > li > ul {position: absolute;z-index: 3;top: 100%;left: -5em;right: -5em;box-sizing: content-box;text-align: center;opacity: 0;visibility: hidden;margin: 0;padding: var(--item-spacing);line-height: 1.1;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-white);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;color: var(--color-base);padding: 0.4em 0;transition: color 0.2s;}
	.navMain > ul > li > ul > li > a:hover, .navMain > ul > li > ul > li.active > a {color: var(--color-pink);}

        /* Sub nav ON */
		.navMain > ul > li.hover { }
		.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; }


/* .............................................................................
Buttons at right */
.topBar__buttons {grid-column: 3 / 4;grid-row: 1 / 2;height: var(--topbar-height);display: flex;justify-content: flex-end;align-items: stretch;}
.topBar__buttons > * {display: block;flex:0 0 auto;height: 100%;}


/* Mobile nav */
@media (max-width:62rem) {
    .topBar__main {display: flex;justify-content: space-between;gap: 0;align-items: center;}

    /* Logo */
    .topBar__logo {flex: 0 0 auto;align-self: flex-start;}
    .topBar__logoFull,
    .topBar.isScrolled .topBar__logoFull {opacity: 0; transform: translateY(-101%); visibility: hidden;}
    .topBar__logoSimple,
    .topBar.isScrolled .topBar__logoSimple {opacity: 1; transform: none; visibility: visible;}

    /* Toggle */
    .topBar__toggle {display: flex;align-items: center;flex: 0 0 auto;z-index: 7;margin-right: var(--width-std-right);}
    button.hamburger {appearance: none;font-size: 2.5em;border: none;color: var(--color-base);background: transparent;font-weight: normal;text-decoration: none;text-align: left;line-height: 1;display: block;vertical-align: middle;position: relative;padding: 0;width: 1em;height: 1em;border-radius: 0;}
    .hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0;height: 1px;background-color: var(--color-base);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;height: 100%;padding-top: 4vh;border-top:1px solid var(--color-green-dark); overflow: auto;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;}
    .topBar__sSlideNav {flex: 1 1 auto;}
    .topBar__sSlideNavButtons {flex:0 0 auto;display: flex;}
    .topBar__sSlideNavButtons .btn {flex:0 0 auto;width: 50%;text-align: center;}
    .topBar__sSlideNavButtons .btn__label {padding: 1.75em 0;}

    /* Main nav */
    .navMain {--item-spacing: 0.6em;font-size: calc(1em + 2.8vw);text-align: left;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;border-bottom: 1px solid var(--color-green);}
    .navMain > ul > li > a,
	.navMain > ul > li.hover > a {color: var(--color-base);padding: var(--item-spacing) 0;height: auto;white-space: normal;display: block;}
    .navMain > ul > li:not(.hasChildren) > a:hover {color: var(--color-pink);}

        /* Has children = has sub nav */
		.navMain > ul > li.hasChildren { }
		.navMain > ul > li.hasChildren > a {position: relative;padding-right: 2em; }
		.navMain > ul > li.hasChildren > a::after {position: absolute;display: block;content: '';top: 0;bottom: 0;right: 0;width: 1.25em;background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: center center;background-size: 100%;transform-origin: 50% 50%;transition: transform 0.3s;}

		/* 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);text-align: left;}
		.navMain > ul > li > ul::before {display: none; }
		.navMain > ul > li > ul > li,
		.navMain > ul > li.hover > ul > li > li {opacity: 1; transition: none; margin-left: 2em; }
		.navMain > ul > li > ul > li:last-child {padding-bottom: calc(2 * var(--item-spacing)); }
		.navMain > ul > li > ul > li > a {padding: 0.4em 0;}
		.navMain > ul > li > ul > li > a:hover {color: var(--color-pink); }

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

    /* Buttons at right */
    .topBar__buttons {display: none; }
    .topBar__buttons > * { }

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

/* Spacings and stacked buttons */
@media (max-width:46rem) {
    .topBar__sSlideNavButtons {flex-wrap: wrap;}
    .topBar__sSlideNavButtons .btn {width: 100%;}
    .topBar__sSlideNavButtons .btn:first-child {order: 2;}
    .topBar__sSlideNavButtons .btn__label {padding: 3.5vh 0;}
}






/* .............................................................................
FOOTER
Footer with logo, nav, alerte-emploi, logos side, medias, copyright.
............................................................................. */
.footer {background-color: var(--color-green-dark);padding-top: var(--base-spacing-top);padding-bottom: calc(0.5 * var(--base-spacing-bottom)); }
.footer__layout {display: grid;grid-template-columns: repeat(12, minmax(0, 1fr));gap: 4em var(--grid-gap);align-items: center;}
.footer__cLogoPret {grid-column: 1 / span 2; grid-row: 1 / 2; }
.footer__cNav {grid-column: 3 / span 10;grid-row: 1 / 2;text-align: right;}
.footer__cAlerteEmploi {grid-column: 1 / span 10;grid-row: 2 / 3; }
.footer__cLogosSide {grid-column: 11 / span 2;grid-row: 2 / 3;height: 100%;}
.footer__cBottom {grid-column: 1 / -1;grid-row: 3 / 4; }

.footer__logoPret {max-width: 10em;}
.footer__alerteEmploi {max-width: 37em;}
.footer__alerteEmploi h3 {color: var(--color-white); }
.footer__alerteEmploi h3 + * {margin-top: 2em; }
.footer__logos {color: var(--color-white);height: 100%;display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;gap: 2em 0;}
.footer__logos > * {font-size: 5em;display: block;transition: color 0.3s;}
.footer__bottom {display: flex;flex-wrap: wrap;gap: 0.3em;}
.footer__rs {flex:1 1 auto;width: 100%; }
.footer__links {flex:1 1 auto;order: 10; }
.footer__copyright {flex:0 1 auto;/*width: 28em;*/font-size: 0.8em;color: var(--color-white); }

    /* Footer logo hover */
    .footer__logos > a:hover {color: var(--color-green);}

.navFooter {list-style: none;display: flex;gap: 3%;justify-content: flex-end; }
.navFooter li {font-size: 1.3em; }
.navFooter li a {display: inline-block; color: var(--color-green-vivid);transition: color 0.3s; }
.navFooter li a:hover {color: var(--color-white); }

.navFooterSmall {list-style: none;display: flex;gap: 3%; }
.navFooterSmall li {font-size: 0.8em; }
.navFooterSmall li a {display: inline-block; color: var(--color-white);transition: color 0.3s; }
.navFooterSmall li a:hover {color: var(--color-base-on-dark); }

    @media (max-width: 69rem) {
        .navFooter {gap: 2%;}
    }

	/* Stacked */
	@media (max-width:62rem) {
		.footer__layout {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(0.65 * var(--base-spacing)) var(--grid-gap); }
		.footer__cLogoPret {grid-column: 1 / -1;grid-row: 1 / 2; }
		.footer__cNav {grid-column: 1 / -1;grid-row: 2 / 3; }
		.footer__cAlerteEmploi {grid-column: 1 / span 3; grid-row: 3 / 4; }
		.footer__cLogosSide {grid-column: 4 / 5; grid-row: 3 / 4; }
		.footer__cBottom {grid-column: 1 / -1; grid-row: 4 / 5; }

		.footer__alerteEmploi {max-width: 28em; }

		.navFooter {justify-content: flex-start; }
		.navFooter li {font-size: 1em; }

		.navFooterSmall {gap: 1.5em;}
	}

	/* Spacings */
	@media (max-width:46rem) {
		.footer__layout > * {grid-column: 1 / -1;grid-row: auto; }
		.footer__cNav {text-align: left; }
		.footer__cLogosSide {height: auto; }

		.footer__logoPret {max-width: 7em;}
		.footer__logos {align-items: center;gap: calc(0.5 * var(--base-spacing)); }
		.footer__bottom {gap: 0.5em 2em;}
		.footer__links {order: 0;}
		.footer__copyright {width: auto;}

		.navFooter {display: block; }
		.navFooter li a {padding: 0.25em 0; }
	}