/* .............................................................................
HEADER / TOP BAR
Top bar with logo and 2 navs.
............................................................................. */
.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 var(--width-std-right) 0 var(--width-std-left);height: 100%;position: relative;display: flex;align-items: stretch;gap: 1em;background-color: var(--color-white);}


/* .............................................................................
Logo */
.topBar__logo {flex: 0 1 auto;font-size: 3.25em;position: relative;z-index: 3;align-self: center;transform-origin: 0% 50%;transition: transform 0.4s;}
.topBar__logo a {display: block;color: var(--color-blue); transition: color 0.3s;}

    /* Hover logo */
    .topBar__logo a:hover {color: var(--color-purple); }


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


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


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

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

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


/* .............................................................................
Bouton offres */
.topBar__offres {display: none; }


/* .............................................................................
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 {height: 65%;justify-content: space-between;}

    /* Logo */
    .topBar__logo,
    .topBar.isSmaller .topBar__logo {background: transparent;transform: scale(1);font-size: 3.25em;}

    /* Toggle */
    .topBar__toggle {display: flex;align-items: center;flex: 0 0 auto;z-index: 7; }
    button.hamburger {display: block;}
    .hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.25em;height: 2px;background-color: var(--color-base-on-dark);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(36% - 1px);transform-origin: 0% 50%;}
        .hamburger__line:nth-child(4) {top: calc(64% - 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;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;height: 100%;padding: 4vh 0;}
    .topBar__sSlideNav {flex:1 1 auto; }
    .topBar__sSlideBottom {flex:0 0 auto;display: block;padding: 0 var(--width-std-right) 0 var(--width-std-left);}

    /* Navs */
    .navMain {--item-spacing: 0.4em;font-size: calc(1em + 2vw);text-align: left;padding: 0 var(--width-std-right) 1em var(--width-std-left);height: auto;}
    .navMain > ul {height: auto;display: block;margin: 0;}
    .navMain > ul > li {opacity: 1;visibility: visible;transition: none;}
    .navMain > ul > li > a {margin: 0;padding: var(--item-spacing) 0;white-space: normal;display: inline-block;}

	/* Offres */
	.topBar__offres {display: block; height: 35%;}
	.topBar__offres .linkOffres {height: 100%;}


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

/* Size */
@media (max-width:46rem) {
    /* Logo */
    .topBar__logo,
    .topBar.isSmaller .topBar__logo {font-size: 2.5em;}
}



/* .............................................................................
FOOTER
Footer with banner link, contact infos, logo, social medias, etc.
............................................................................. */
.footer {position: relative;z-index: 2; }

.fOffres { }
.fOffres__link {display: grid;grid-template-columns: 1fr auto 1fr;grid-template-rows: auto;justify-items: start;background: var(--color-blue);transition: background-color 0.3s;}
.fOffres__imgIQ {grid-column: 1 / 2;grid-row: 1 / 2; }
.fOffres__imgIQ .svgIcon,
.fOffres__imgIQ .svgIcon > svg {height: 100%;width: auto;}
.fOffres__ctn {grid-column: 2 / 3;grid-row: 1 / 2; text-align: center; padding-top: calc(0.75 * var(--base-spacing-top));padding-bottom: calc(0.75 * var(--base-spacing-bottom));}

	/* Hover */
	.fOffres__link:hover {background-color: var(--color-purple);}

	/* 
	ANIMATE */
	.js .fOffres.jsAnimateClass .fOffres__ctn {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .fOffres.jsAnimateClass.animate .fOffres__ctn {opacity: 1; transform: none; }

	/* Spacing */
	@media (max-width:62rem) {
		.fOffres__ctn {padding-top: 2em;padding-bottom: 2em;max-width: 28em;}
	}

	/* Stacked */
	@media (max-width:46rem) {
		.fOffres__link {grid-template-columns: 1fr;justify-items: stretch;}
		.fOffres__imgIQ {grid-column: 1 / 2;grid-row: 2 / 3; }
		.fOffres__imgIQ .svgIcon,
		.fOffres__imgIQ .svgIcon > svg {height: auto;width: 15vw; }
		.fOffres__ctn {grid-column: 1 / 2;grid-row: 1 / 2;padding-top: calc(0.75 * var(--base-spacing-top));padding-bottom: calc(0.5 * var(--base-spacing-bottom));max-width: none;}
	}


/* Contact */
.fContact {padding-top: calc(0.6 * var(--base-spacing-top));padding-bottom: calc(0.6 * var(--base-spacing-bottom));}
.fContact__layout {padding-left: calc(1.5 * var(--width-std));padding-right: calc(1.5 * var(--width-std));display: flex;align-items: flex-end;}
.fContact__ctn {flex:1 1 auto;margin-right: 5%;}
.fContact__ctn p {max-width: 25em;}
.fContact__btn {flex:0 0 auto; width: auto; }

	/* 
	ANIMATE */
	.js .fContact.jsAnimateClass .fContact__ctn {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .fContact.jsAnimateClass.animate .fContact__ctn {opacity: 1; transform: none; }
	
	.js .fContact.jsAnimateClass .fContact__btn {opacity: 0; transition: opacity 1s; transition-delay: 0.3s; }
	.js .fContact.jsAnimateClass.animate .fContact__btn {opacity: 1; }

	/* Stacked */
	@media (max-width:62rem) {
		.fContact { }
		.fContact__layout {padding-left: 0;padding-right: 0;display: block; }
		.fContact__ctn {text-align: center;margin: 0; }
		.fContact__ctn p {margin-left: auto;margin-right: auto; }
		.fContact__btn {text-align: center; margin-top: 2em; }
	}

	/* Spacing */
	@media (max-width:46rem) {
		.fContact {padding-top: calc(0.75 * var(--base-spacing-top));padding-bottom: calc(0.75 * var(--base-spacing-bottom)); }
	}


/* Infos at bottom */
.fInfos {padding-top: 2em;padding-bottom: 1.4em;}
.fInfos__layout {display: grid;grid-template-columns: 1fr auto 1fr;grid-template-rows: auto auto;gap: 1em 2em;}
.fInfos__logo {grid-column: 1 / 2;grid-row: 1 / 2;display: flex;}
.fInfos__rs {grid-column: 2 / 3;grid-row: 1 / 2;text-align: center;}
.fInfos__infolettre {grid-column: 3 / 4;grid-row: 1 / 2;margin-top: 0.6em;text-align: right;padding-left: 4em;}
.fInfos__share {grid-column: 3 / 4;grid-row: 2 / 3;justify-self: end;}
.fInfos__copy {grid-column: 1 / 2;grid-row: 2 / 3; color: var(--color-black);}

.fInfos__logo .svgIcon {font-size: 3.5em;}
.fInfos__logo a {display: block; }

	/* Stacked */
	@media (max-width:62rem) {
		.fInfos {padding-top: calc(0.75 * var(--base-spacing-top));padding-bottom: calc(0.35 * var(--base-spacing-bottom));}
		.fInfos__layout {grid-template-columns: 1fr;grid-template-rows: auto;justify-items: center;gap: calc(0.5 * var(--base-spacing-top)) 0;text-align: center;}
		.fInfos__layout > * {grid-column: 1 / 2;grid-row: auto;justify-self: auto;margin: 0;}
		.fInfos__rs {font-size: 1.25em;}
		.fInfos__infolettre {font-size: 1.25em;text-align: center;padding: 0;width: 80%;max-width: 18em;}
		.fInfos__share {font-size: 1.25em;}
		.fInfos__copy {margin-top: calc(-0.25 * var(--base-spacing-top));}
	}