/* .............................................................................
HEADER / TOP BAR
Top bar with logo, main nav, sub nav, search and panels.
............................................................................. */
.topBar {position: fixed;z-index: 100;width: 100%;}
.topBar__height {height: var(--topbar-height);transition: height 0.4s;position: relative;}
.topBar__main {background: #fff;height: 100%;display: flex;justify-content: space-between;border-bottom: 1px solid var(--color-brown);}


/* .............................................................................
Logo */
.topBar__logo {flex: 0 0 auto;transform-origin: 0% 50%;transition: transform 0.4s;will-change: transform;}
.topBar__logo a {height: 100%;display: flex;align-items: center;box-sizing: content-box;width: 9em;padding: 0 1em;will-change: opacity;transition: opacity 0.3s;}

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


/* .............................................................................
Sub nav */
.topBar__navSub {flex: 0 1 auto;display: flex;}
.topBar__navSub > * {flex:0 1 auto;}

.navSub {list-style: none;font-size: 0.95em;display: flex;transition: transform 0.4s, opacity 0.4s;}
.navSub li {display: block; display: flex; border-left: 1px solid var(--color-brown);}
.navSub li a {display: block;display: flex;align-items: center;padding: 0.1em 2.3em; transition: background-color 0.3s, color 0.3s;}
.navSub li a:hover {background-color: var(--color-brown); color: #fff;}

/* Bouton programmation par-dessus la ligne noire */
.topBar__navSub .btn {margin-bottom: -1px; }


/* .............................................................................
Slide mobile */
.topBar__sSlide {position: absolute;z-index: -2;top: 100%;height: var(--topbar-height);right: 0;transition: transform 0.4s, opacity 0.4s, z-index 0s 0.4s;}
.topBar__sSlideIn {height: 100%;}
.topBar__sSlideCtn {height: 100%;position: relative;}


/* .............................................................................
Main nav */
.topBar__navMain {height: 100%;}

.navMain {--margin-items: 1.5em;--padding-items: 0.5em;--padding-item-arrow: 0.8em;--arrow-size: 1.5em;--arrow-position: -1.7em;--position-line: 68%;--line-height: 3px;height: 100%;list-style: none;font-size: 1.05em;display: flex;padding-right: calc(0.6 * calc(var(--margin-items) + var(--padding-items)));}
.navMain > li {position: relative;flex:0 0 auto;display: flex;margin: 0 var(--margin-items);}
.navMain > li > a {position: relative;display: flex;align-items: center;padding: 0.1em var(--padding-items);transition: padding 0.4s;}
.navMain > li > a::before {position:absolute;z-index:1;display:block;content:'';top: var(--position-line);height: var(--line-height);left:var(--padding-items);right:var(--padding-items);background-color: var(--color-green);transform: scaleX(0);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.navMain > li > a:hover::before {transform: scaleX(0.999);}
.navMain > li.navMain__programmation {display: none; }

	/* 2e LEVEL / Arrow a droite */
	.navMain > li.hasChildren { }
	.navMain > li.hasChildren > a {padding-right: calc(var(--padding-items) + var(--padding-item-arrow));}
	.navMain > li.hasChildren > a::after {position:absolute;z-index:2;display:block;content:'';top: 50%;height: var(--arrow-size);right:calc(var(--arrow-position) + var(--padding-items) + var(--padding-item-arrow));width: var(--arrow-size);background-image: url(../img/icons/icon-nav.svg);background-size: var(--arrow-size);background-position: 50% 50%;transform: translateY(-50%);}

		/* Fix pour que la barre verte s'etire jusqu'en dessous de la fleche */
		.navMain > li.hasChildren > a::before {right: calc(var(--padding-items) + var(--padding-item-arrow) + var(--arrow-position) + 0.25em);}

	/* 2e LEVEL / Nav */
	.navMain > li > ul {position: absolute;z-index: 3;left: calc(-1 * var(--margin-items));width: 16em;box-sizing: content-box;top: calc(var(--position-line) + var(--line-height));opacity: 0;visibility: hidden;margin: 0;padding: 1.7em calc(var(--margin-items) + var(--padding-items)) 2.2em calc(var(--margin-items) + var(--padding-items));line-height: 1.2;color: #fff;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: var(--color-green);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; border-bottom: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; transition: opacity 0.15s; }
    .navMain > li > ul > li > a {display: block;padding: 0.5em 0;transition: color 0.2s;}
	.navMain > li > ul > li > a:hover {color: var(--color-base);}

	/* Fix sur le dernier sous menu sinon il sort de l'ecran a droite. */
	.navMain > li:last-child > ul {left: auto;right: calc(-1 * var(--margin-items));}

        /* Sub nav ON */
		.navMain > li.hover { }
		.navMain > li.hover > a::before {transform: scaleX(0.999); }

		/* Seulement si pas de panel associer a l'item */
		.navMain > li.hover > a:not(.jsTopBar__triggerPanel) + ul {opacity: 1;visibility: visible;transition: none;}
		.navMain > li.hover > a:not(.jsTopBar__triggerPanel) + ul::before {transform: scaleY(0.999); }
		.navMain > li.hover > a:not(.jsTopBar__triggerPanel) + ul > li {opacity: 1; transition-delay: 0.15s; }
	
	/* Size */
	@media (max-width:75rem) {
		.navMain {font-size: 0.95em; }
	}


/* .............................................................................
Sub nav on mobile */
.topBar__navSubMobile {display: none; }

.navSubMobile {--padding-items:0.5em; list-style: none; }
.navSubMobile li { }
.navSubMobile li a {display: inline-block; padding: var(--padding-items) 0; transition: color 0.2s; }
.navSubMobile li a:hover {color: var(--color-green); }


/* .............................................................................
Social medias on mobile */
.topBar__rsMobile {display: none; }


/* .............................................................................
Search icon on mobile */
.topBar__searchMobile {display: none; }
.topBar__searchMobile .tBSearchBtn__btnIcon::before {background-color: var(--color-light-gray);}


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

.topBar__toggle .hamburger {display: block;font-size: var(--topbar-height);}
.topBar__toggle .hamburger::before {border-radius: 0;background-color: var(--color-green);}
.topBar__toggle .hamburger:hover::before {transform: scale(1); }
.hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.31em;height: 3px;background-color: #fff;display: block;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, top 0.3s, right 0.3s;}

	/* Les barres centrales formeront le "X" */
	.hamburger__line:nth-child(2),
	.hamburger__line:nth-child(3) {top: calc(50% - 1px);right: 0.1em;}

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

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


/* .............................................................................
Search button */
.tBSearchBtn {height: 100%;border-left: 1px solid var(--color-brown);}
.tBSearchBtn .tBSearchBtn__btnIcon {height: 100%;font-size: 4em;}
.tBSearchBtn .tBSearchBtn__btnIcon::before {border-radius: 0; }
.tBSearchBtn__iconLoupe,
.tBSearchBtn__iconClose {transition: opacity 0.3s, visibility 0.3s; }
.tBSearchBtn__iconLoupe {opacity: 1; visibility: visible; }
.tBSearchBtn__iconClose {opacity: 0; visibility: hidden; }

	/* Hover + active */
	.tBSearchBtn .tBSearchBtn__btnIcon:hover,
	.topBar.onRecherche .tBSearchBtn .tBSearchBtn__btnIcon {color: #fff; }
	.tBSearchBtn .tBSearchBtn__btnIcon:hover::before,
	.topBar.onRecherche .tBSearchBtn .tBSearchBtn__btnIcon::before {transform: scale(1); background-color: var(--color-base); }

	.topBar.onRecherche .tBSearchBtn__iconLoupe {opacity: 0; visibility: hidden; }
	.topBar.onRecherche .tBSearchBtn__iconClose {opacity: 1; visibility: visible; }


/* .............................................................................
PANEL / Rechercher */
.topBar__panelRecherche {position: absolute;z-index: -1;left: 0;right: 0;top: 100%;overflow: hidden;transform: translate(0, -101%);opacity: 0;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.5s, height 0.4s;}
.topBar__panelRechercheIn {background: var(--color-brown);position: relative;height: 100%;}
.topBar__panelRechercheInAppear {opacity: 0;transition: opacity 0.5s;transition-delay:0s;height: 100%;}

/* Panel content */
.pRecherche {padding: 2.5em 12%; }

	/* Smaller */
	@media (max-width:62rem) {
		.pRecherche {padding: 2.5em var(--width-std);}
	}

	@media (max-width:46rem) {
		.pRecherche {padding: 1.5em 1.5em;}
	}


/* .............................................................................
PANEL / St-John */
.topBar__panelStJohn {position: absolute;z-index: -3;left: 0;right: 0;top: 100%;overflow: hidden;transform: translate(0, -101%);opacity: 0;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.5s, z-index 0s;}
.topBar__panelStJohnIn {background: #fff;position: relative;height: 100%;}
.topBar__panelStJohnInAppear {opacity: 0;transition: opacity 0.5s;transition-delay:0s;height: 100%;}

/* Panel content */
.pMegaMenu { }
.pMegaMenu__layout {display: flex; min-height: 26em; }
.pMegaMenu__cSide {flex:0 0 auto; width: 22%; background: var(--color-green); display: flex; align-items: center; justify-content: center; }
.pMegaMenu__cCtn {flex:1 1 auto; width: 100%; margin-top: var(--topbar-height); border-top: 1px solid var(--color-brown); display: flex; padding: calc(0.7 * var(--topbar-height)) var(--width-std) calc(0.7 * var(--topbar-height)) var(--width-std); transition: margin 0.4s;}

.pMegaMenu__infos {flex:0 0 auto; max-width: 9em; font-size: 0.9em; box-sizing: content-box; padding: 2em; }
.pMegaMenu__logo {margin-bottom: 2em; width: 90%; }
.pMegaMenu__nav {flex:0 0 auto;width: 18em;padding-right: 2em;}
.pMegaMenu__note {flex: 1 1 auto; width: 100%;}

/* Positionner le menu vis-a-vis l'item de menu qui l'a ouvert. */
.pMegaMenu__nav {margin-left: var(--megamenu-nav-position, 0);}


/* .............................................................................
TOPBAR / Is scrolled
Le main nav prend la place du sub nav. */
.topBar.isScrolled {--topbar-height: var(--topbar-height-scrolled); }
.topBar.isScrolled .topBar__sSlide {z-index: 2;transform: translate(-16.4em, -101%);transition: transform 0.4s, opacity 0.4s, z-index 0s;}
.topBar.isScrolled .topBar__navMain .navMain {--margin-items: 0.7em;--padding-items: 0.7em;}
.topBar.isScrolled .topBar__navSub .navSub {transform: translateY(-101%);opacity: 0;}
.topBar.isScrolled .pMegaMenu__cCtn {margin-top: -1px; }


/* .............................................................................
TOPBAR / On recherche
Afficher le panel de recherche. */
.topBar.onRecherche .topBar__panelRecherche {transform: translate(0, 0);opacity: 1;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s, height 0.4s;}
.topBar.onRecherche .topBar__panelRechercheInAppear {opacity: 1; transition-delay: 0.3s; }

/* Recherche en-dessous du panel St-John */
.topBar.isScrolled .topBar__panelRecherche {z-index: -4;}


/* .............................................................................
TOPBAR / On St-John
Afficher le panel de St-John. */
.topBar.onStJohn .topBar__panelStJohn {transform: translate(0, 0);opacity: 1;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s, z-index 0s;}
.topBar.onStJohn .topBar__panelStJohnInAppear {opacity: 1; transition-delay: 0.3s; }
.navMain > li > a.onStJohn::before {transform: scaleX(0.999); }


/* .............................................................................
Mobile nav */
@media (max-width:62rem) {
	.topBar {color: #fff; }
	.topBar__main {border:0;background-color: var(--color-gray); }
    
    /* Logo */
    .topBar__logo,
    .topBar.isScrolled .topBar__logo {flex: 1 1 auto;}

	/* Sub nav */
	.topBar__navSub {display: none; }

	/* Slide mobile */
	.topBar__sSlide,
	.topBar.isScrolled .topBar__sSlide {position: absolute;z-index: -1;left: 0;right: 0;top: -101vh;height: var(--vh, 100vh);margin: 0;transform: translate(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-brown);}
    .topBar__sSlideCtn {overflow: auto;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;height: 100%;}

	/* Main nav */
	.topBar__navMain,
	.topBar.isScrolled .topBar__navMain {transform: none;height: auto;padding: 2.5em var(--width-std);}

	.navMain,
	.topBar.isScrolled .topBar__navMain .navMain {--padding-items:0.5em; height: auto;font-size: 2em;display: block;padding: 0;}
	.navMain > li {display: block;margin: 0;}
	.navMain > li > a {display: block; padding: var(--padding-items) 0; transition: color 0.2s; }
	.navMain > li > a::before {display: none; }
	.navMain > li > a:hover {color: var(--color-green); }
	.navMain > li.navMain__programmation {display: block; }
	
		/* 2e LEVEL / Arrow a droite */
		.navMain > li.hasChildren {--arrow-size:1em;--arrow-position:0.5em;padding-right: 0;}
		.navMain > li.hasChildren > a {padding-right: calc(var(--arrow-size) + var(--arrow-position)); }
		.navMain > li.hasChildren > a::after {background-image: url(../img/icons/icon-nav-on-dark.svg); right: 0; }

		/* 2e LEVEL / Nav */
		.navMain > li > ul,
		.navMain > li.hover > ul,
		.navMain > li.hover > a:not(.jsTopBar__triggerPanel) + 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;}
		.navMain > li > ul::before {display: none; }
		.navMain > li > ul > li,
		.navMain > li.hover > ul > li,
		.navMain > li.hover > a:not(.jsTopBar__triggerPanel) + ul > li {border-bottom: 0; opacity: 1; transition: none; }
		.navMain > li > ul > li:last-child {padding-bottom: 1em; }
		.navMain > li > ul > li > a { }
		.navMain > li > ul > li > a:hover {color: var(--color-green); }

			/* Sub nav ON */
			.navMain > li.clicked > ul,
			.navMain > li.clicked > a:not(.jsTopBar__triggerPanel) + ul {opacity: 1; height: auto; transition: opacity 0.5s, visibility 0.3s; }

	/* Sub nav on mobile */
	.topBar__navSubMobile {display: block; padding: 2em var(--width-std); border-top: 1px solid #6e6b68; }

	/* Social medias on mobile */
	.topBar__rsMobile {display: block;padding: 1.5em var(--width-std);border-top: 1px solid #6e6b68;}
	.topBar__rsMobile .rs {--spacing: 0.4em;justify-content: flex-end;margin-right: calc(-1 * var(--spacing));}

	/* Search icon on mobile */
	.topBar__searchMobile {display: block; }
	.tBSearchBtn {border-left: 0; }

	/* Toggle */
    .topBar__toggle {display: block;flex: 0 0 auto;z-index: 7;}

    
    /*
    TOPBAR ON
    Show the mobile menu.
    Hamburger icon transforms to "x" on click. */
    .topBar.onNav .topBar__sSlide {transform: translate(0, 101vh);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);right: 0;transition-delay: 0.1s;}
    .topBar.onNav .hamburger__line:nth-child(3) {transform:rotate(-45deg);right: 0;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;}
}

/* Sizes */
@media (max-width:46rem) {
	.navMain,
	.topBar.isScrolled .topBar__navMain .navMain {font-size: 1.6em; }
	.topBar__navMain,
	.topBar.isScrolled .topBar__navMain {padding-top: 2em; padding-bottom: 2em;}
	.topBar__rsMobile {padding-top: 1em; padding-bottom: 1em;}
	.topBar__navSubMobile {padding-top: 1.5em; padding-bottom: 1.5em;}
}



/* .............................................................................
FOOTER
Footer avec reseaux sociaux, infolettre, liens, infos de contact, copyright.
............................................................................. */
.footer {--width-infolettre: 20vw;--padding-top: 5rem;--gap-top: 2.5rem;background: var(--color-brown);}
.footer__layout {display: grid;grid-template-columns: auto auto 1fr auto;}

	/* 4k */
	@media (min-width:110rem) {
		.footer {--width-infolettre: 22rem;}
	}

	/* 1 col layout */
	@media (max-width:62rem) {
		.footer {--width-infolettre: 100%;--padding-top: 1px;--gap-top: 2rem;}
		.footer__layout {display: block;}
	}


/* .............................................................................
Reseaux sociaux */
.footer__cRS {grid-row: 1 / 3;grid-column: 1 / 2;width: var(--width-side-bar);border-right: 1px solid rgba(255,255,255,0.25);padding-top: var(--padding-top);text-align: center;}
.footer__rsTitle {font-size: 0.95em;font-weight: 300;writing-mode: vertical-rl;display: inline-block;}
.footer__rs.rs {--spacing:0.5em;margin-top: 1em;}

	/* At top instead of at left */
	@media (max-width:62rem) {
		.footer__cRS {width: 100%;border-right: 0;border-bottom: 1px solid rgba(255,255,255,0.25);padding: 0.5em var(--width-std);display: flex;align-items: center;text-align: left;}
		.footer__cRS > * {flex:1 1 auto; }
		.footer__rsTitle {writing-mode: horizontal-tb; font-size: 1em; margin: 0; }
		.footer__rs.rs {flex:0 0 auto;margin: 0 calc(-1 * var(--spacing)) 0 0;flex-direction: row;}
	}


/* .............................................................................
Infolettre */
.footer__cInfolettre {grid-row: 1 / 2;grid-column: 2 / 3;box-sizing: content-box;width: var(--width-infolettre);padding-top: var(--padding-top);padding-left: var(--width-std-left);padding-right: var(--width-side-bar);}

.iBoxInfolettre { }
.iBoxInfolettre__gap {min-height: var(--gap-top); }
.iBoxInfolettre form {margin-top: 1em; }

	/* Full width */
	@media (max-width:62rem) {
		.footer__cInfolettre {box-sizing: border-box; padding: 2em var(--width-std); }
	}


/* .............................................................................
Liens en 2 colonnes */
.footer__cLinks {grid-row: 1 / 2;grid-column: 3 / 4;padding-top: var(--padding-top);padding-right: var(--width-side-bar);margin-top: var(--gap-top);display: flex;}
.footer__cLinks > * {margin: 0;flex: 1 1 auto;}
.footer__cLinks > * + * {padding-left: 2em;}

	/* Full width */
	@media (max-width:62rem) {
		.footer__cLinks {padding: 2em var(--width-std); border-top: 1px solid rgba(255,255,255,0.25); margin-top: 0; }
	}

	/* Coller les bords */
	@media (max-width:46rem) {
		.footer__cLinks {
    justify-content: space-between;
}
		.footer__cLinks > * {flex: 0 1 auto;}
	}


/* .............................................................................
Infos de contact */
.footer__cContact {grid-row: 1 / 2;grid-column: 4 / 5;padding-top: var(--padding-top);margin-top: var(--gap-top);margin-right: var(--width-std-right);}

.iFooterContact { }
.iFooterContact__btn { }
.iFooterContact__infos {margin-top: 2.5em; }
.iFooterContact__info {margin-top: 2em; }
.iFooterContact__info h4 {color: var(--color-green); }
.iFooterContact__info h4 + * {margin-top: 0.1em; }

	/* Button over infos */
	@media (max-width:62rem) {
		.footer__cContact {padding: 0; margin: 0; }

		.iFooterContact__btn {padding: 2em var(--width-std); text-align: center; }
		.iFooterContact__infos {margin-top: 0; padding: 2em var(--width-std); border-top: 1px solid rgba(255,255,255,0.25); display: flex; }
		.iFooterContact__infos > * {flex:1 1 auto; }
		.iFooterContact__info {margin-top: 0; }
	}

	/* 1 col infos */
	@media (max-width:22rem) {
		.iFooterContact__infos {display: block; }
		.iFooterContact__infos > * + * {margin-top: 1.5em; }
	}


/* .............................................................................
Copyright et liens */
.footer__cBottomBar {position: relative;grid-row: 2 / 3;grid-column: 2 / 5;padding: 2.5em 0;margin-top: 2.5em;margin-right: var(--width-side-bar);border-top: 1px solid rgba(255,255,255,0.25);}

.iFooterCopy {display: flex; align-items: center; font-size: 0.75em; font-weight: 300; color: #999; }
.iFooterCopy > * {margin-top: 0;}
.iFooterCopy > *:not(:last-child) {padding-right: var(--width-side-bar);}
.iFooterCopy__infolettreWidth {padding-left: var(--width-std-left);min-width: var(--width-infolettre);box-sizing: content-box;}
.iFooterCopy a {color: #999; transition: color 0.2s;}
.iFooterCopy a:hover {color: var(--color-green);}

.iTopBtn {position: absolute; top: 0; right: 0; transform: translate(50%, -50%); }

	/* Full width */
	@media (max-width:62rem) {
		.footer__cBottomBar {margin: 0;padding: 3em var(--width-std) 2em var(--width-std);}

		.iFooterCopy__infolettreWidth {padding-left: 0; min-width: 0; flex:1 1 auto; }

		.iTopBtn {transform: translate(0, -50%); right: 3%; }
	}

	/* 1 col centered */
	@media (max-width:46rem) {
		.footer__cBottomBar {padding-top: 2em; padding-bottom: 2em; }
		.iFooterCopy {display: block; text-align: center; }
		.iFooterCopy > *,
		.iFooterCopy > *:not(:last-child) {padding: 0.5em 0; }
	}