/* .............................................................................
HEADER / TOP BAR
Top bar with logo, sub nav, main nav.
............................................................................. */
.topBar {position: fixed;z-index: 100;width: 100%;background: transparent;}
.topBar__height {position: relative; height: var(--topbar-height);display: flex; flex-direction: column; transition: height 0.4s}
.topBar__top {flex: 0 0 auto;height: 24%;display: flex;align-items: center;justify-content: flex-end;}
.topBar__main {flex: 0 0 auto;height: 76%;position: relative;display: flex;background-color: #fff;}
.topBar__mobileInfos {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: 5.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;}
.navMain > ul > li > a {display: block;color: var(--color-base);padding: 0.5em var(--item-spacing);white-space: nowrap;text-transform: uppercase; 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-red); }


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

	/* Lang switcher */
	.subNav__lang {font-weight: bold;color: var(--color-red);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__top {display: none; }
    .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-red);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;}
    .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: transparent;color: var(--color-base);border-color: transparent;}

        /* Les 2 barres passeront de "=" a "x" */
        .hamburger__line:nth-child(1) {top: calc(41% - 1px);}
        .hamburger__line:nth-child(2) {top: calc(59% - 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;}
    .navMain > ul > li > a,
    .navMain > ul > li:last-child > a {color: #fff;padding: var(--item-spacing) 0;white-space: normal;display: inline-block;margin-right: 0;}

    /* Infos on mobile shown in the slide zone. */
    .topBar__mobileInfos {display: block;flex: 0 0 auto; padding: 3vh var(--width-std-right) 3vh var(--width-std-left);}
	.topBar__link {margin-top: 3em; }
	.topBar__link a {text-transform: uppercase; color: var(--color-red); 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: var(--color-bg-dark); }
	.topBar.onNav .hamburger__line {background-color: #fff;}
    .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); }
}


/* 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 text, buttons, social medias and to top button.
............................................................................. */
.footer {position: relative;text-align: center;}
.footer > * + * {margin-top: 4em;}
.footer__ctn { }
.footer__ctn p {max-width: 30em; margin-left: auto; margin-right: auto; }
.footer__btns { }
.footer__rs { }
.footer__mainSite { }
.footer__toTop {position: absolute;margin: 0;right: 4vw;bottom: var(--base-spacing-bottom);}
.footer__law ul, .footer__1 ul {display:flex; flex-wrap: wrap; list-style: none; justify-content: center; gap: 1em; font-size: 0.8em;}
.footer__1 ul {color: blue;}

	/*
	ANIMATE */
	.footer.animate {opacity: 0; }
	.footer {opacity: 1; transition: opacity 1s; transition-delay: 0s; }

.grecaptcha-badge{display: none;}