/* .............................................................................
TOP BAR
Top bar avec logo, navigation, recherche et langue.
Plusieurs des items du menu principal ouvrent un panel.
Le menu mobile est complètement séparé du menu desktop car il est très différent.
............................................................................. */
.topBar {position: fixed;z-index: 100;width: 100%;}
.topBar__height {position: relative; height: var(--topbar-height); will-change: height, transform; transition: height 0.4s, transform 0.4s; }
.topBar__layout {padding:0 calc(0.6 * var(--width-std));height: 100%;display: flex;position: relative;z-index: 1;background: var(--color-gray-light);}
.topBar__layout::after {position:absolute; z-index:0; display:block; content:''; top: 100%; height: 1px; left: 0; right: 0; background:var(--color-gray); }

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


/* .............................................................................
Notice */
.topBar__notice {padding: 0 calc(0.6 * var(--width-std));background: var(--color-gray-dark);height: var(--topbar-notice-height);overflow: hidden;will-change:height;transition: height 0.4s, transform 0.4s;}
.iNotice {height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.iNotice__text {grid-column: 2 / 3; grid-row: 1 / 2; font-size: 0.85em; font-weight: 700; line-height: 1.1; text-transform: uppercase; text-align: center; padding: 0.5em 1em 0.2em 1em; display: block; transition: color 0.2s; }
.iNotice__text .svgIcon {display: inline-block; font-size: 3em; vertical-align: middle; margin: -0.3em 0 -0.2em 0; }
.iNotice__close {grid-column: 3 / 4; grid-row: 1 / 2; text-align: right; }
.iNotice__close .btnIcon {font-size: 2.7em;margin-right: -0.3em;}

	/* Si le texte est un lien (ça devrait) */
	a.iNotice__text:hover {color: var(--color-orange);}

	/* Hidden */
	.topBar.hideNotice {--topbar-notice-height:0px; }

	/* Notice après la barre principale, et ne plus afficher le bouton "close" */
	@media (max-width:62rem) {
		.topBar__height {display: flex;flex-direction: column;}
		.topBar__notice {flex: 1 1 auto;order: 2;z-index: 0;overflow: visible;}
		.iNotice {padding-top: 1.7em;height: var(--topbar-notice-height);grid-template-columns: 1fr; }
		.iNotice__text {grid-column: 1 / -1; padding-left: 0; padding-right: 0; font-size: 1em; text-wrap: balance; text-align: left; display: flex; align-items: center; gap: 0.5em; justify-content: space-between;}
		.iNotice__text .svgIcon {display: block; }
		.iNotice__close {display: none; }
		.topBar.hideNotice .topBar__notice {overflow: hidden; }
	}

	/* Spacing puisque la hauteur de la topbar est réduite. */
	@media (max-width:46rem) {
		.iNotice {padding-top: 1.1em; }
	}


/* .............................................................................
Logo */
.topBar__cLogo {position: relative;z-index: 3;flex: 0 1 auto;align-self:flex-start; }
.topBar__logo {background: var(--color-white); width: calc(15em + 2vw); transform-origin: top left; will-change: transform; transition: transform 0.4s; }
.topBar__logo a {padding: 8% 8%; will-change: opacity;display: block; transition: opacity 0.3s;}

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

	/* Prendre l'espace disponible pour que les boutons s'affichent à droite complètement. */
	@media (max-width:62rem) {
		.topBar__cLogo {flex-grow: 1; }
		.topBar__logo {width: min(50vw, calc(14em + 2vw));}
	}
	
	@media (max-width:46rem) {
		.topBar__logo {width: min(55vw, calc(11em + 6vw));}
	}


/* .............................................................................
Main nav */
.topBar__cNav {flex:1 1 auto;height: 100%;}
.topBar__nav {height: 100%; }

.navTB {--nav-item-spacing: clamp(1em, 1.8vw, 2.5em);list-style: none;height: 100%;font-size: 0.85em;font-weight: 700;line-height: 1.2;text-transform: uppercase;display: flex;justify-content: flex-end;}
.navTB > li {display: block;flex: 0 0 auto;}
.navTB > li > a {height: 100%; display: flex;align-items: center;padding: 0 var(--nav-item-spacing);white-space: nowrap;transition: color 0.2s;}

	/* Active + hover */
	.navTB > li.hover > a,
	.navTB > li > a:hover {color: var(--color-orange);}

	/* Accent est le gros lien orange "Produits" */
	.navTB > li.navTB__accent {margin-left: var(--nav-item-spacing); }
	.navTB > li.navTB__accent > a {background: var(--color-orange);color: var(--color-white);padding: 0 calc(2 * var(--nav-item-spacing));font-size: 1.2em; }
	.navTB > li.navTB__accent.hover > a,
	.navTB > li.navTB__accent > a:hover {color: var(--color-white); }

	/* Desktop nav hidden */
	@media (max-width:62rem) {
		.topBar__cNav {display: none;}
	}


/* .............................................................................
Search */
.topBar__cSearch { }
.topBar__search {height: 100%; }
.topBar__search > .btnIcon {font-size: var(--topbar-height);transition: background-color 0.2s, color 0.2s, opacity 0.2s, font-size 0.4s;}
.topBar__search > .btnIcon .svgIcon {transition: opacity 0.3s; }
.topBar__search > .btnIcon .svgIcon--close {opacity: 0; }

.panelSearch {position: absolute;z-index: 0;top: 100%;bottom: auto;height: calc(100dvh - var(--topbar-height) - var(--topbar-notice-height));left: 0;right: 0;padding: 0;opacity: 0;visibility: hidden;transition: opacity 0s 0.3s, visibility 0s 0.3s;}
.panelSearch::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom: -1px;left:0;right:0;background-color: var(--color-orange);transform: scaleY(0);transform-origin: 50% 0%;transition: transform 0.4s var(--ease-cubic);}
.panelSearch__layout {height: 100%;overflow: auto;padding: calc(2 * var(--topbar-height)) var(--width-narrow);opacity: 0;transition: opacity 0.3s;display: grid;grid-template-columns: 1fr auto;grid-template-rows: auto 1fr;gap: 3em min(var(--width-narrow), 9%);overscroll-behavior: contain;align-content: start;align-items: start;}
.panelSearch__cSearch {grid-column: 1 / 2;grid-row: 1 / 2;}
.panelSearch__cResults {grid-column: 1 / 2;grid-row: 2 / 3;}
.panelSearch__cSide {grid-column: 2 / 3;grid-row: 1 / 3;position: sticky;top: 0;}

	/* Open the panel, animations */
	.topBar__search.clicked > button + .panelSearch {opacity: 1;visibility: visible;transition: none;}
	.topBar__search.clicked > button + .panelSearch::before {transform: scaleY(0.999); }
	.topBar__search.clicked > button + .panelSearch .panelSearch__layout {opacity: 1; transition-delay: 0.15s; }

	.topBar__search.clicked > .btnIcon .svgIcon {opacity: 0;}
	.topBar__search.clicked > .btnIcon .svgIcon--close {opacity: 1;}

.panelSearch__search { }
.panelSearch__filters { }
.panelSearch__filtersTitle {margin-bottom: 1em; }
.panelSearch__results { }
.panelSearch__resultsQty {margin-bottom: 1em; }
.panelSearch__items { }

	/* Ne pas afficher les filtres */
	@media (max-width:62rem) {
		.panelSearch {height: calc(100dvh - var(--topbar-height));}
		.panelSearch__layout {grid-template-columns: 1fr;gap: 3em;padding: calc(1 * var(--topbar-height)) var(--width-narrow);}
		.panelSearch__layout > * {grid-column: 1 / 2; grid-row: auto; }
		.panelSearch__cSide {display: none; }
	}


/* .............................................................................
Language switcher */
.topBar__cLang { }
.topBar__lang { }
.topBar__lang .btnIcon {font-size: var(--topbar-height);transition: background-color 0.2s, color 0.2s, opacity 0.2s, font-size 0.4s;}

	/* Hide */
	@media (max-width:35rem) {
		.topBar__cLang {display: none; }
	}


/* .............................................................................
Panel
Dans la main nav, gros panel slide down quand on hover sur certains liens.
::before = BG. */
.panelTB {position: absolute;z-index: 0;top: 100%;bottom: auto;left: 0;right: 0;padding: 0;opacity: 0;visibility: hidden;transition: opacity 0s 0.3s, visibility 0s 0.3s;}
.panelTB::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom: 1px;left:0;right:0;background-color: var(--color-gray-light);transform: scaleY(0);transform-origin: 50% 0%;transition: transform 0.4s var(--ease-cubic);}
.panelTB__layout {border-bottom: 1px solid var(--color-gray); display: flex;gap: 0; opacity: 0;transition: opacity 0.3s;}

	/* Open the panel, animations */
	.navTB > li.hover > a + .panelTB {opacity: 1;visibility: visible;transition: none;}
	.navTB > li.hover > a + .panelTB::before {transform: scaleY(0.999); }
	.navTB > li.hover > a + .panelTB .panelTB__layout {opacity: 1; transition-delay: 0.15s; }

/* Side */
.panelTB__cSide {flex:0 0 auto;width: min(45em, 30%);padding: calc(1.2 * var(--topbar-height)) var(--width-std) calc(0.7 * var(--topbar-height)) var(--width-std);position: relative;background: var(--color-orange);display: flex;flex-direction: column;gap: calc(0.5 * var(--topbar-height));color: var(--color-white); transition: padding 0.4s;}
.panelTB__cSide::before {position:absolute;z-index:1;display:block;content:'';inset:0;background-image: url('../../img/texture-bois-blanc-rotated.webp');background-size: cover;background-position: center;background-repeat: repeat-x;opacity: 1;mix-blend-mode: multiply;}
.panelTB__cSide > * {position: relative; z-index: 2;}
.panelTB__sideNav {flex:1 1 auto; display: flex; align-items: center; }
.panelTB__sideBtn { }
.panelTB__sideBtn .btn {width: 100%; }

/* Main = navs */
.panelTB__cMain {flex:1 1 auto; width: 100%; padding: calc(1.3 * var(--topbar-height)) var(--width-std) 0 var(--width-std); display: flex; flex-direction: column; gap: 3em; transition: padding 0.4s;}
.panelTB__mainNavs {display: flex; gap: 3%; }
.panelTB__mainNav {flex:1 1 auto; width: 25%; display: flex; flex-direction: column; gap: 1em; }
.panelTB__mainUnderNav {border-top: 1px solid var(--color-gray); text-align: right; padding: 1em 0; }
.panelTB__previewer {display: grid; grid-template-columns: 24% 1fr; grid-template-rows: 1fr auto; gap: 3em 3%; }
.panelTB__previewerNav {grid-column: 1 / 2; grid-row: 1 / 2; display: flex; flex-direction: column; gap: 1em; }
.panelTB__previewerImages {grid-column: 2 / 3; grid-row: 1 / 2; display: grid; grid-template-columns: 1fr; }
.panelTB__previewerImage {grid-column: 1 / -1; grid-row: 1 / -1; opacity: 0; will-change: opacity; transition: opacity 0.5s; }
.panelTB__previewerBtns {grid-column: 1 / 3; grid-row: 2 / 3; border-top: 1px solid var(--color-gray); text-align: right; padding: 1em 0; display: grid; grid-template-columns: 100%; }
.panelTB__previewerBtn {grid-column: 1 / -1; grid-row: 1 / -1; opacity: 0; visibility: hidden; will-change: opacity; transition: opacity 0.3s, visibility 0.3s; }

	/* Active */
	.panelTB__previewerImage.active {opacity: 1; }
	.panelTB__previewerBtn.active {opacity: 1; visibility: visible; }


/* .............................................................................
TOPBAR / Scrolled
Reduire la hauteur du topBar. */
.topBar.isSmaller { }
.topBar.isSmaller .topBar__height {--topbar-height: var(--topbar-height-scrolled);}
.topBar.isSmaller .topBar__height:has(.topBar__notice) {transform: translateY(calc(-1 * var(--topbar-notice-height))); }
.topBar.isSmaller .topBar__logo {transform: scale(0.8);}
.topBar.isSmaller .panelSearch {height: calc(100dvh - var(--topbar-height));}

	/* Modifier le hide de la notice. */
	@media (max-width:62rem) {
		.topBar.isSmaller .topBar__height:has(.topBar__notice) {transform: none; }
		.topBar.isSmaller .topBar__notice {transform: translateY(calc(-1 * var(--topbar-notice-height))); }
		.topBar.isSmaller .topBar__logo {transform: scale(0.9);}
	}


/* .............................................................................
Toggle */
.topBar__cToggle {display: none;}
.hamburger.btnIcon {font-size: var(--topbar-height);transition: background-color 0.2s, color 0.2s, opacity 0.2s, font-size 0.4s;}
.hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.2em;height: 2px;background-color: var(--color-white);display: block;transition: transform 0.3s var(--ease-cubic), opacity 0.3s, top 0.3s;}

	/* Hover */
	.hamburger.btnIcon:hover {background-color: var(--color-orange); color: var(--color-white); }

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

	/* Afficher le toggle. */
	@media (max-width:62rem) {
		.topBar__cToggle {display: block;}

		/*
		TOPBAR ON
		Hamburger icon transforms to "x" on click. */
		.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;}
	}


/* .............................................................................
Slide mobile
La navigation mobile est complètement séparée de celle sur desktop. */
.topBar__cSlide {display: none; position: absolute;z-index: -1;color: var(--color-base);left: 0;right: 0;top: calc(-1 * (100dvh + 1px));height: 100dvh;margin: 0;transform: none;transition: transform 0.5s var(--ease-cubic);}
.topBar__slide {padding-top: var(--topbar-height);height: 100%;background: var(--color-gray-light);}
.topBar__slideCtn {--spacing: clamp(1rem, 7vh, 3.5rem);display: grid;grid-template-columns: var(--width-std-left) 1fr auto var(--width-std-right);grid-template-rows: auto 1fr auto;overflow: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;padding-top: 5vh;height: 100%;}
.topBar__slideCtn > * {grid-column: 2 / 4; grid-row: auto; margin-bottom: var(--spacing); }

.topBar__slideNav {margin-bottom: calc(var(--spacing) - 1em);}
.topBar__slideToutBtn {display: flex; align-items: center; justify-content: center; }
.topBar__slideToutBtn .btn {font-size: 1.2em; }
.topBar__slideToutBtn .btn__label {padding: 1.1em 0; }
.topBar__slideLinks {grid-column: 2 / 3; margin-bottom: 1em; }
.topBar__slideLang {grid-column: 3 / 4; margin-bottom: 1em; align-self: center; }
.topBar__slideRessources {grid-column: 1 / -1; background: var(--color-white); padding: 1em var(--width-std);text-align: center;font-size: 0.75em;margin-bottom: 0; }
.topBar__slideContactBtn {grid-column: 1 / -1;margin-bottom: 0;background: var(--color-orange);position: relative;padding: 1.2em var(--width-std);text-align: center;}
.topBar__slideContactBtn::before {position:absolute;z-index:0;display:block;content:'';inset:0;background-image: url('../../img/texture-bois-blanc-rotated.webp');background-size: cover;background-position: center;background-repeat: repeat-x;opacity: 1;mix-blend-mode: multiply;}

/* Nav mobile */
.navTBMobile {list-style: none;font-size: calc(0.75em + 3vw);font-weight: 700;text-transform: uppercase;overflow: hidden;}
.navTBMobile > li { }
.navTBMobile > li > a {display: block;padding: 0.7em 0;}
.navTBMobile > li > a:hover,
.navTBMobile > li.hover > a { }

	/* 2e LEVEL of nav */
	/* Liens avec sous-menu présent */
	.navTBMobile > li > a:has(+ ul) {display: flex;justify-content: space-between;gap: 0.5em; }
	.navTBMobile > li > a:has(+ ul) > .svgIcon {font-size: 2em;margin: -0.3em -0.2em -0.2em 0;transition: transform 0.4s, color 0.4s;}

	/* Sub nav container */
	.navTBMobile > li > ul,
	.navTBMobile > li.hover > a + ul {height: 0;opacity: 0;transition: opacity 0s;position: relative;top: auto;bottom: auto;left: auto;right: auto;box-sizing: border-box;visibility: visible;padding: 0;pointer-events: none;}
	.navTBMobile > li > ul > li,
	.navTBMobile > li.hover > a + ul > li {opacity: 1;transition: none;}
	.navTBMobile > li > ul > li:last-child {padding-bottom: 0.7em;}
	.navTBMobile > li > ul > li > a {display: inline-block;font-size: 0.75em;font-weight: 400;text-transform: none;padding: 0.3em 0; transition: color 0.2s;}
	.navTBMobile > li > ul > li > a:hover {color: var(--color-orange);}
	
	/* Click = open submenu */
	.navTBMobile > li.clicked > a > .svgIcon {color: var(--color-orange); transform: rotate(180deg); }
	.navTBMobile > li.clicked > a + ul {height: auto;opacity: 1;transition-duration: 1s;pointer-events: auto;}

	/*
	ALT :
	Smaller. */
	.navTBMobile--sm { }
	.navTBMobile--sm > li {font-size: 0.75em;}
	.navTBMobile--sm > li > a {padding: 0.4em 0; }
        

	/* Show the mobile menu only on mobile. */
	@media (max-width:62rem) {
		.topBar__cSlide {display: block; }

		/*
		TOPBAR ON
		Show the mobile menu. */
		.topBar.onNav .topBar__cSlide {transform: translateY(calc(1 * (100dvh + 1px)));transition: transform 0.5s var(--ease-cubic);}
		.topBar.onNav .topBar__slideCtn {opacity: 1; transition-delay: 0.3s;}
	}