/* .............................................................................
TOP BAR
Top bar with logo, main nav, toggle, buttons, mega menu.
............................................................................. */
.topBar {--subMenuHeight: 0px;--subMenuHeight: 20em;position: fixed;z-index: 100;width: 100%;}
.topBar::before {position:absolute;z-index: -1;display:block;content:'';top: -1px;height: 0px;left: -1px;right: -1px;background: var(--color-white);border-bottom-left-radius: var(--radius);border-bottom-right-radius: var(--radius);box-shadow: inset 0 0 0 1px var(--color-gray);transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.topBar__height {position: relative; height: var(--topbar-height); transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.topBar__layout {position: relative;padding: 0 1.75em;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 2em;}

	/* Follow standard width */
	@media (max-width:46rem) {
		.topBar__layout {padding: 0 var(--width-std-right) 0 var(--width-std-left); }
	}


/* .............................................................................
Logo */
.topBar__cLogo {position: relative;z-index: 3; flex: 0 1 auto; width: min(35vw, 20em); }
.topBar__logo {width: 100%;transform-origin: 0% 50%;transition: transform 0.4s;}
.topBar__logo a {will-change: opacity;display: block;color: currentColor;transition: opacity 0.2s, color 1s;}

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

	/* Logo size */
	@media (max-width:46rem) {
		.topBar__cLogo {width: min(50vw, 15em); }
	}


/* .............................................................................
Nav */
.topBar__cNav {opacity: 1; visibility: visible; transition: opacity 0.5s, visibility 0.5s; }

	/* Hide on mobile */
	@media (max-width:62rem) {
		.topBar__cNav {display: none; }
	}

.navMain { }
.navMain > ul {list-style: none;display: flex;gap: calc(-1.5em + 3.5vw);}
.navMain > ul > li {display: block;position: relative;z-index: 1;}

/* Lien avec texte doublé dans le ::before pour que ça ne jump pas au hover */
.navMain > ul > li > a {position: relative;color: currentColor;font-size: 1em;font-weight: 500;white-space: nowrap;padding: 0.5em;margin: 0 -0.5em;transition: color 0.4s;display: grid;grid-template-columns: auto;grid-template-rows: auto;text-align: center;}
.navMain > ul > li > a::before {grid-column: 1 / 2; grid-row: 1 / 2; content: attr(data-text); font-weight: 700; opacity: 0; visibility: hidden; }

/* Texte avec ligne en hover */
.navMain > ul > li > a span {grid-column: 1 / 2; grid-row: 1 / 2; position: relative;display: block; padding: 0.4em 0; }
.navMain > ul > li > a span::before {position:absolute; z-index:0; display:block; content:''; bottom:0; height: 1px; left:0; right:0; background: currentColor; transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}

	/* Liens avec sous-menu présent */
	.navMain > ul > li > a:has(+ *) { }
	.navMain > ul > li > a:has(+ *)::before,
	.navMain > ul > li > a:has(+ *) span {padding-right: 1em;}
	.navMain > ul > li > a:has(+ *) span::after {--size: 1.4em;position:absolute;z-index:0;display:block;content:'';top: 0.2em;right: -0.4em;width: var(--size);height: var(--size);background: url(../../img/icons/icon-arrow-down.svg) no-repeat center center;background-size: var(--size);transform: none;transition: filter 0.4s;}
	.onDark .navMain > ul > li > a:has(+ *) span::after {filter: invert(1); }

	/* Hover */
	.navMain > ul > li.hover {z-index: 2; }
	.navMain > ul > li > a:hover,
	.navMain > ul > li.hover > a {font-weight: 700; }
	.navMain > ul > li > a:hover span::before,
	.navMain > ul > li.hover > a span::before {transform: none; }

/* Sous-menu */
.navMain > ul > li > ul {list-style: none;position: absolute;left: 0; top: 100%; padding: 3em 0;opacity: 0;visibility: hidden;transition: opacity 0.2s, visibility 0.2s;}
.navMain > ul > li > ul::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom:0;left: -100vw;right: -100vw;}
.navMain > ul > li > ul > li { }
.navMain > ul > li > ul > li > a {display: inline-block;color: var(--color-base);font-size: 2.25em;font-weight: 500;white-space: nowrap;padding: 0.2em 0; transition: opacity 0.2s; }

	/* Sous-menu ouvert = afficher le background de la topbar + afficher le sous menu */
	.topBar:has(.navMain > ul > li.hover)::before {height: calc(var(--topbar-height) + var(--subMenuHeight)); }
	.navMain > ul > li > a:hover + ul,
	.navMain > ul > li.hover > ul {opacity: 1;visibility: visible; transition: opacity 0.4s 0.2s, visibility 0.4s 0.2s; }

	/* Hover */
	.navMain > ul ul > li > a:hover {opacity: 0.5; }

/* Sous-menu avec colonnes */
.navSubCols {position: absolute;left: 0;right: 0;top: calc(0.5 * var(--topbar-height) + 1.4em);padding: 4em var(--width-std-right) 4em var(--width-std-left);color: var(--color-base);display: flex;align-items: flex-start;justify-content: center;gap: 3vw;opacity: 0;visibility: hidden;transition: opacity 0.2s, visibility 0.2s, top 0.4s;}
.navSubCols::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom:0;left: -100vw;right: -100vw;}
.navSubCols__c {flex:0 1 auto; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; }
.navSubCols__icon {grid-column: 1 / 2; grid-row: 1 / 2; font-size: 4em; }
.navSubCols__title {grid-column: 2 / 3; grid-row: 1 / 2; }
.navSubCols__nav {grid-column: 2 / 3; grid-row: 2 / 3; }

.navSubCols ul {list-style: none; }
.navSubCols ul > li { }
.navSubCols ul > li > a {display: inline-block;color: var(--color-base);font-size: 1.7em;font-weight: 500;padding: 0.3em 0; transition: opacity 0.2s; }

	/* Relative to the topbar instead of the menu item. */
	.navMain > ul > li:has(.navSubCols) {position: static; }

	/* Sous-menu ouvert = afficher le background de la topbar + afficher le sous menu */
	.navMain > ul > li > a:hover + .navSubCols,
	.navMain > ul > li.hover > .navSubCols {opacity: 1;visibility: visible; transition: opacity 0.4s 0.2s, visibility 0.4s 0.2s, top 0.4s; }


/* .............................................................................
Right */
.topBar__cRight {position: relative; z-index: 7; flex: 0 1 auto;width: auto;display: flex;align-items: center;justify-content: flex-end;gap: 1em;}
.topBar__lang {position: absolute; right: 100%; margin-right: 1em; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.topBar__toggle {display: flex;align-items: center;flex: 0 0 auto; }
.topBar__boutique { }
.topBar__boutique .btn {text-align: center; }

	/* Smaller padding */
	@media (max-width:124.99rem) {
		.topBar__boutique .btn__label {padding-left: 1em; padding-right: 1em; }
	}

	/* Remove boutique button */
	@media (max-width:93rem) {
		.topBar__cRight {width: auto; }
		.topBar__boutique {display: none; }
	}

	/* Lang button now looks like a classic link */
	@media (max-width:46rem) {
		.topBar__lang {margin-right: 0.5em; }
		.topBar__lang .btn {color: var(--color-base);background: none;border:none;font-size: 0.85em;}
		.topBar__lang .btn__label {padding: 1em 0.5em; }
	}

/* Hamburger toggle */
button.hamburger {--spacingLines:13%; display: block; font-size: 3.274em;}
.hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.3em;height: 2px;background-color: currentColor;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((50% - var(--spacingLines)) - 1px);transform-origin: 0% 50%;}
	.hamburger__line:nth-child(4) {top: calc((50% + var(--spacingLines)) - 1px);transform-origin: 0% 50%;}

	/* Follow btnIcon size */
	@media (max-width:46rem) {
		button.hamburger {font-size: 3em;}
	}


/* .............................................................................
Megamenu */
.topBar__cMegaMenu {position: absolute;z-index: 1;color: var(--color-base);text-align: left;left: 0;right: 0;top: 0;height: 100dvh;pointer-events: none;visibility: hidden;transition: visibility 0.5s;}

.panelMega {height: 100%; background: var(--color-white); transform: translateX(-101vw); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.panelMega__layout {height: 100%;display: flex;overflow: auto;align-items: flex-start;}
.panelMega__cNav {min-height: 100%;flex:1 1 auto;position: relative;padding: calc(10vh + var(--topbar-height)) 5vw 5vw var(--width-std-left);}
.panelMega__cNav::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background: var(--color-beige); border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); transform: translateX(-101%); transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
.panelMega__cNav > * {opacity: 0; transition: opacity 1s; }
.panelMega__cContact {flex:0 0 auto;width: 38%;padding: calc(10vh + var(--topbar-height)) var(--width-std-right) 5vw 5vw;}
.panelMega__cContact > * {max-width: 20em; margin-left: auto;margin-right: auto; opacity: 0; transition: opacity 1s; }
.panelMega__boutique {display: none; }
.panelMega__contact { }
.panelMega__rs {margin-top: min(10vh, 3.5em); }
.panelMega .iLinksIWL .iLinksIWL__item {color: var(--color-base);}

	/* Stacked mega panel */
	@media (max-width:62rem) {
		.panelMega {padding-top: var(--topbar-height);border-bottom-left-radius: var(--radius);border-bottom-right-radius: var(--radius);transform: translateY(-101dvh);}
		.panelMega__layout {display: block; }
		.panelMega__cNav {padding: 0 var(--width-std-right) 1em var(--width-std-left);min-height: 0;}
		.panelMega__cNav::before {display: none; }
		.panelMega__cContact {width: 100%;padding: 0 var(--width-std-right) 1em var(--width-std-left);}
		.panelMega__cContact > * {max-width: none; }
		.panelMega__boutique {margin-top: 0.5em;display: block;}
		.panelMega__contact {padding-top: 1.5em;}
		.panelMega__contact .iLinksIWL {font-size: 0.8em; }
		.panelMega__rs {margin-top: 1em;}
	}

/* Nav */
.navPanel {width: min(100%, 35em); }
.navPanel > ul {list-style: none; }
.navPanel > ul > li { }
.navPanel > ul > li > a {position: relative;display: block;color: currentColor;font-size: 2.25em;font-weight: 700;letter-spacing: -0.05em;padding: 0.5em 0;transition: opacity 0.2s;}

	/* Liens avec sous-menu présent */
	.navPanel > ul > li > a:has(+ ul) {padding-right: 1.5em;}
	.navPanel > ul > li > a:has(+ ul)::after {--size:1.5em;position:absolute;z-index:0;display:block;content:'';top: 0.25em;right:0;width: var(--size);height: var(--size);background: url(../../img/icons/icon-arrow-right.svg) no-repeat center center;background-size: var(--size);transform: none; transition: transform 0.3s;}

.navPanel > ul ul {list-style: none;height: 0;opacity: 0;transition: opacity 0s;}
.navPanel > ul ul > li { }
.navPanel > ul ul > li:last-child {padding-bottom: 1.5em; }
.navPanel > ul ul > li > a {position: relative; display: inline-block; color: currentColor; font-size: 1.6em;font-weight: 400; padding: 0.2em 0; transition: opacity 0.2s; }

	/* Hover */
	.navPanel > ul > li > a:hover,
	.navPanel > ul ul > li > a:hover {opacity: 0.5; }

	/* Click = open submenu */
	.navPanel > ul > li.clicked ul {height: auto; opacity: 1; transition-duration: 1s; }
	.navPanel > ul > li.clicked > a:has(+ ul)::after {transform: rotate(90deg); }

	/* Spacing */
	@media (max-width:62rem) {
		.navPanel {width: 100%;padding-top: 2.5vh;padding-bottom: 1em;border-bottom: 1px solid var(--color-gray);}
	}

	/* Smaller */
	@media (max-width:46rem) {
		.navPanel > ul > li > a {font-size: 1.5em; }
		.navPanel > ul ul > li > a {font-size: 1.3em; }
	}


/* .............................................................................
TOPBAR / Is scrolled
Reduire la hauteur du topBar. */
.topBar.isSmaller { }
.topBar.isSmaller:not(.onNav)::before {transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);height: var(--topbar-height-scrolled);}
.topBar.isSmaller .topBar__height {height: var(--topbar-height-scrolled);}
.topBar.isSmaller .topBar__logo {transform: scale(0.75);}
.topBar.isSmaller:has(.navMain > ul > li.hover)::before {height: calc(var(--topbar-height-scrolled) + var(--subMenuHeight)); }
.topBar.isSmaller .navSubCols {position: absolute;left: 0; right: 0; top: calc(0.5 * var(--topbar-height-scrolled) + 1.4em);}

	/* Logo scaling + panel spacing */
	@media (max-width:62rem) {
		.topBar.isSmaller .topBar__logo {transform: scale(0.85);}
		.topBar.isSmaller .panelMega {padding-top: var(--topbar-height-scrolled); }
	}


/* .............................................................................
TOPBAR / On nav
Show the panel.
Hamburger icon transforms to "x" on click. */
.topBar.onNav .topBar__cNav {opacity: 0; visibility: hidden; }
.topBar.onNav .topBar__cMegaMenu {pointer-events: auto; visibility: visible; transition-delay: 0s; }
.topBar.onNav .panelMega {transform: none; }
.topBar.onNav .panelMega__cNav::before {transform: none; transition-delay: 0s; }
.topBar.onNav .panelMega__cNav > * {opacity: 1; transition-delay:0.6s; }
.topBar.onNav .panelMega__cContact > * {opacity: 1; transition-delay:0.5s; }
.topBar.onNav .topBar__lang {opacity: 1; visibility: visible; transition: opacity 0.5s, visibility 0.5s; transition-delay: 0.4s; }

.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;}

	/* Same reduced delay */
	@media (max-width:62rem) {
		.topBar.onNav .panelMega__cNav > * {transition-delay: 0.2s; }
		.topBar.onNav .panelMega__cContact > * {transition-delay: 0.2s; }
		.topBar.onNav .topBar__lang {transition-delay: 0.2s; }
	}


/* .............................................................................
ANIMATE
Animation on page load. */
.topBar__layout {transform: translateY(-100%); transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
.pageLoaded .topBar__layout {transform: none; }