/* .............................................................................
HEADER / TOP BAR
Top bar with logo, sub nav, main nav.
............................................................................. */
.topBar {position: fixed;z-index: 100;width: 100%;background: var(--color-base);}
.topBar__height {position: relative; height: var(--topbar-height);display: flex; flex-direction: column; transition: height 0.4s}
.topBar__main {flex: 0 0 auto;height: 100%;position: relative;display: flex;}
.topBar__background {position: absolute;top: 0;width: 100%;height: var(--topbar-height);background: var(--color-base);}

/* .............................................................................
Logo */
.topBar__logo {color: #fff;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.5em;padding: 0;transition: opacity 0.3s;}

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


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


/* .............................................................................
Main nav */
.navMain {--item-spacing: 1.7em;height: 100%;text-align: right;font-weight: 700;font-size: 0.9em;line-height: 1.2;}
.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;justify-content: center;position: relative;}
.navMain > ul > li > a {display: block; position: relative;color: #fff;padding: 0.5em var(--item-spacing);white-space: nowrap;text-transform: uppercase;text-transform: uppercase;}

/* WPML */
.navMain > ul > li.menu-item-object-wpml_ls_menu_item > a {color: var(--color-dark-blue);}

.navMain > ul > li:not(.btn-special) > a:not(.btn) {transition: color 0.2s;}
.navMain > ul > li.btn-special > a {padding: 1.15em 3em;}
.navMain > ul > li > a.btn {padding: 0 3em;}

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

    /* WPML hover */
    .navMain > ul > li.menu-item-object-wpml_ls_menu_item > a:hover {color: #fff;}
    .navMain > ul > li.menu-item-object-wpml_ls_menu_item.on > a {color: #fff;}

    /* Nav with children : ::before = BG */
    .navMain > ul > 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: translate(-50%, -1.5em);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-dark-blue);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;padding: 0.5em 0;}
	.navMain > ul > li > ul > li:not(:last-child) {border-bottom: 1px solid #ccf0f3;}
    .navMain > ul > li > ul > li > a {display: inline-block;padding: 0.7em 0;color: #fff;transition: color 0.2s;text-transform: uppercase;}

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

        /* Sub nav ON */
        .navMain > ul > li.on { }
		.navMain > ul > li.on > a {background-color: var(--color-green); }

        .navMain > ul > li.on > ul {opacity: 1; visibility: visible; transition: none; }
        .navMain > ul > li.on > ul::before {transform: scaleY(0.999); }
        .navMain > ul > li.on > ul > li {opacity: 1; transition-delay: 0.15s; }

/* WPML position */
.navMain ul li.btn-special {
    order: 1;
}

/* .............................................................................
Sub nav */
.subNav {--item-padding:0.3em; background: var(--color-bg-dark); color: #fff; }
.subNav > ul {font-size: 0.7em;text-transform: uppercase;list-style: none;text-align: right; margin-top: 0.15em; display: flex;}
.subNav > ul > li {display: flex;align-items: center;padding-left: 2.5em;}
.subNav > ul > li > a {display: block;padding: var(--item-padding);transition: color 0.2s;}
.subNav > ul > li:last-child > a {margin-right: calc(-1 * var(--item-padding)); }

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

	/* Lang switcher */
	.subNav__lang {font-weight: bold;color: var(--color-blue);font-size: 1.3em;list-style: none;}
    .subNav__lang:marker{display: none;}
	.subNav > ul > li.subNav__lang a:hover {color: #fff; }


/* .............................................................................
Lang for mobile */
.topBar__langMobile {display: none;}


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


/* .............................................................................
TOPBAR / Is scrolled
Reduire la hauteur du topBar. */
.topBar.isSmaller {--topbar-height: var(--topbar-height-scrolled); }
.topBar.isSmaller .topBar__logo {transform: scale(0.7);}


/* Small desktop */
@media (max-width:75rem) {
	.navMain {--item-spacing: 1.2vw; }
}


/* Mobile nav */
@media (max-width:62rem) {
    .topBar__height {display: block; }
    .topBar__main {height: 100%; }

    /* Logo */
    .topBar__logo {flex: 1 1 auto; }
    .topBar__logo a {font-size: 5em;display: inline-block;}

	/* Lang for mobile */
	.topBar__langMobile {flex:0 0 auto;display: flex;align-items: center;margin-right: 1.5em;}
	.topBar__langMobile a {font-weight: bold;color: var(--color-blue);text-transform: uppercase;}

    /* 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-color: transparent;background-color: #fff;border-radius: 50%;}
    .hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.2em;height: 2px;background-color: var(--color-base);display: block;transition: transform 0.3s, opacity 0.3s, top 0.3s, background-color 0.3s;}

		/* Hover */
		button.hamburger:hover {background: #fff;color: var(--color-base);border-color: transparent;}

        /* Les 2 barres passeront de "=" a "x" */
        .hamburger__line:nth-child(1) {top: calc(31% - 1px);}
        .hamburger__line:nth-child(2) {top: calc(48% - 1px);}
        .hamburger__line:nth-child(3) {top: calc(67% - 1px);}

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

    /* Slide mobile */
    .topBar__sSlide {position: absolute;z-index: -1;color: #fff;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-bg-dark);}
    .topBar__sSlideCtn {overflow: auto;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s; }

    /* Main nav */
    .navMain {--item-spacing: 0.7em;font-size: calc(0.7em + 2vw);text-align: left;height: auto;padding: 6vh var(--width-std-right) 4vh var(--width-std-left);}
    .navMain > ul {height: auto;display: block;}
    .navMain > ul > li {display: block;border-bottom: 1px solid var(--color-base-on-dark);}
	.navMain > ul > li > ul {position: static;display: none;text-align: left;transform: none;padding: 0;font-size: 0.8em;}
	.navMain > ul > li > ul::before {display: none;}
	.navMain > ul > li > ul > li {border: none !important;}
    .navMain > ul > li > a {color: #fff;padding: var(--item-spacing) 0;white-space: normal;display: inline-block;margin-right: 0;}
	.navMain > ul > li.btn-special {margin-top: 2em;}

	.navMain {font-size: calc(0.8em + 1.55vw);text-align: left;height: auto;}
    .navMain > ul {height: auto;display: block;}
    .navMain > ul > li,
    .navMain > ul > li.dark,
    .navMain > ul > li.navMain__hideTop {opacity: 1;visibility: visible;display: block;margin: 0;border-bottom: 1px solid #666;transition: none;}
	.navMain > ul > li.btn-special, .navMain > ul > li:last-child {border-bottom: none;}
    .navMain > ul > li > a,
    .navMain > ul > li.dark > a {padding: 1.5em 0;color: #fff;background-color: transparent;display: block;height: auto;white-space: normal;}
    .navMain > ul > li > a::before {display: none;}

		/* Nav with children has a "+" at right */
        .navMain > ul > li.hasChildren > a {position: relative;}
        .navMain > ul > li.hasChildren > a::before,
        .navMain > ul > li.hasChildren > a::after {position:absolute;display:block;content:" ";top: 50%;bottom: auto;left: auto;right: 0;transform:translateY(-50%);background:#fff;width:1em;height:1px;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);backface-visibility: hidden;}
        .navMain > ul > li.hasChildren > a::after {transform:translateY(-50%) rotate(90deg);}

        /* 2e niveau */
        .navMain > ul > li > ul {position: relative;left: auto;top: auto;margin: 0;padding: 0 0 2em 0;opacity: 1;visibility: visible;transition: none;display: none;}
        .navMain > ul > li > ul::before {display: none;}
        .navMain > ul > li > ul > li {padding: 0;}
        .navMain > ul > li > ul a, .navMain > ul > li > ul > li > a {padding: 0.5em 0;text-transform: none;}

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

    /* Infos on mobile shown in the slide zone. */
	.topBar__link {margin-top: 3em; }
	.topBar__link a {text-transform: uppercase; color: var(--color-blue); font-weight: bold; font-size: 0.8em; }

        /* Lang switcher */
        .subNav > ul > li.subNav__lang {display: inline-block;margin-top: 1em;}
    
    /*
    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 button.hamburger {background-color: #fff; }
	.topBar.onNav .hamburger__line {background-color: var(--color-base);}
    .topBar.onNav .hamburger__line:nth-child(1) {transform:rotate(45deg); top: calc(50% - 1px); }
    .topBar.onNav .hamburger__line:nth-child(2) {transform:rotate(-45deg); top: calc(50% - 1px); }
    .topBar.onNav .hamburger__line:nth-child(3) {display: none;}
}


/* Sizes */
@media (max-width:47rem) {
    .topBar__logo a {font-size: 3.8em;}
	.topBar__langMobile {font-size: 0.8em; margin-right: 1em; }
	button.hamburger {font-size: 3em; }

	.topBar.isSmaller .topBar__logo {transform: scale(0.85);}
}



/* .............................................................................
FOOTER
Footer with logo, nav, langs, social medias and copyright text.
............................................................................. */
.footer {background: var(--color-bg-base);padding: 4.5em var(--width-std-right) 2em var(--width-std-left);}
.footer__layout {display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: auto;align-items: center;}
.footer__cLogo {grid-row: 1 / 2; grid-column: 1 / 2; }
.footer__cLogo p {margin: 0;}
.footer__cNav {grid-row: 1 / 2; grid-column: 2 / 3; }
.footer__cLRS {grid-row: 1 / 2; grid-column: 3 / 4; display: flex; align-items: center; }
.footer__cCopy {grid-row: 2 / 3; grid-column: 1 / -1; }

	/* Break cols */
	@media (max-width:62rem) {
		.footer {padding: var(--base-spacing-top) var(--width-std-right) calc(0.5 * var(--base-spacing-top)) var(--width-std-left); text-align: center;}
		.footer__layout {display: block; }
		.footer__layout > * + * {margin-top: 2.5em; }
		.footer__cLRS {display: block; }
	}

	/* Sizes */
	@media (max-width:47rem) {
		.footer__layout > * + * {margin-top: 2.5em; }
		.footer__cCopy {margin-top: 2em;}
	}


/* .............................................................................
Logo */
.footer__logo {font-size: 4.3em; }
.footer__logo a {display: inline-block;transition: opacity 0.3s;}

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

	/* Size */
	@media (max-width:47rem) {
		.footer__logo {font-size: 3.3em; }
	}


/* .............................................................................
Main nav */
.footer__nav {--item-spacing: 1.3em;font-size: 0.75em;line-height: 1;}
.footer__nav > ul {list-style: none;text-align: center;}
.footer__nav > ul > li {display: inline-block;margin:0 var(--item-spacing);}
.footer__nav > ul > li > a {position: relative; text-transform: uppercase;padding: 0.2em 0;}
.footer__nav > ul > li > a::after {position:absolute; z-index:0; display:block; content:''; bottom:0; height: 1px; left:0; right:50%; background: #fff; transform: scaleX(0); transform-origin: 0% 50%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

	/* Hover */
	.footer__nav > ul > li > a:hover::after {transform: scaleX(1); }

	/* Size */
	@media (max-width:62rem) {
		.footer__nav {font-size: 0.875em; }
	}

	/* Break cols */
	@media (max-width:47rem) {
		.footer__nav {--item-spacing:1.5em; }
		.footer__nav > ul > li {display: block; margin: var(--item-spacing) 0; }
	}


/* .............................................................................
Lang nav */
.footer__navLang {flex: 1 1 auto;--item-spacing: 0.4em;font-size: 0.75em;line-height: 1;}
.footer__navLang > ul {list-style: none;}
.footer__navLang > ul > li {display: inline-block;margin:0 var(--item-spacing);}
.footer__navLang > ul > li > a {position: relative; text-transform: uppercase;padding: 0.2em 0;}
.footer__navLang > ul > li > a::after {position:absolute;z-index:0;display:block;content:'';bottom:0;height: 1px;left:0;right: 0;background: #fff;transform: scaleX(0);transform-origin: 0% 50%;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}

	/* Hover */
	.footer__navLang > ul > li > a:hover::after {transform: scaleX(1); }

	/* Spacing */
	@media (max-width:62rem) {
		.footer__navLang {--item-spacing:1.2em; font-size: 0.875em;}
	}


/* .............................................................................
Social medias */
.footer__rs { }
.footer .footer__rs .rs {display: inline-flex;font-size: 1.4em;}
.footer .footer__rs .rs li {padding: 0 1em;}
.footer .footer__rs .rs a {color: var(--color-blue); transition: color 0.3s;display: flex;align-items: baseline;}
.footer .footer__rs .rs li:not(:first-child) a .svgIcon {margin-right: 0.2em;}

	/* Hover */
	.footer .footer__rs .rs li a:hover {color: var(--color-base);}

	/* Sizes */
	@media (max-width:62rem) {
		.footer__rs {margin-top: 2.5em; }
	}


/* .............................................................................
Copyright text */
.footer__copy {font-size: 0.75em;text-align: center;color: #666;margin-top: 4em;}

	/* Size */
	@media (max-width:47rem) {
		.footer__copy {margin-top: 0;}
	}

/* Menu lang */
.navMain .wpml-ls-native {display: none;}

/* Footer lang */
.footerLang {
    margin-top: 1.5em !important;
}

.footerLang ul, .footerLang ul li {
    list-style-type: none !important;
    list-style: none !important;
    --paddingLeft: unset !important;
    --bulletSize: unset !important;
}

.footerLang ul li a {
    padding: unset !important;
    border-bottom: unset !important;
    font-weight: 700;
    color: var(--color-dark-blue);
    transition: all 0.3s;
}

.footerLang ul li a:hover {
    color: var(--color-base);
}

.footerLang ul li a span {
    vertical-align: unset !important;
}

/* Centering */
.wpml-ls-legacy-list-vertical {
    display: block !important;
}