/* .............................................................................
HEADER / TOP BAR
Top bar with logo and main nav.
The main nav can have a subnav (ul), and one item has a special subnav (panelProduits).
............................................................................. */
.topBar {--link-color: var(--color-beige); position: fixed;z-index: 100;width: 100%;background: transparent;}
.topBar::before {position:absolute;z-index:0;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: var(--color-beige);transform-origin: 50% 0%;transform: scaleY(0);transition: transform 0.4s;}
.topBar__height {position: relative; height: var(--topbar-height); transition: height 0.4s}
.topBar__layout {padding-right: calc(0.44 * var(--topbar-height));height: 100%;position: relative;display: flex;align-items: center;gap: 1em;}


/* .............................................................................
Logo */
.topBar__cLogo {position: relative;z-index: 3;flex: 0 1 auto;align-self: stretch;transform-origin: 0% 50%;transition: transform 0.4s;}
.topBar__cLogo::before {position:absolute;z-index: -1;display:block;content:'';top: calc(-0.3 * var(--topbar-height));bottom: calc(-0.2 * var(--topbar-height));left: -20%;right: 0;background: var(--color-beige);border-radius: 0% 50% 50% 50%;transform-origin: 0% 0%;transition: transform 0.2s var(--ease-cubic);}
.topBar__logo {height: 100%;display: flex;align-items: center;position:relative;width: min(50vw, 14em);padding: 0 calc(0.5 * var(--topbar-height)) 0 calc(0.3 * var(--topbar-height));margin-top: -0.2em;box-sizing: content-box;}
.topBar__logo a {will-change: opacity;display: block; transition: opacity 0.3s;}

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


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


/* .............................................................................
Slide mobile */
.topBar__cSlide {display: block;flex: 1 1 auto;}
.topBar__slide {height: 100%;}
.topBar__slideCtn {height: 100%;display: flex;gap: 1.5em;}
.topBar__slideNav {flex: 1 1 auto;}
.topBar__slideLang {flex: 0 0 auto;}
.topBar__slideTomate {display: none; }


/* .............................................................................
Main nav
li a::before = BG arrondi.
li a::after = underline pour le "active". */
.navTB {--item-spacing: clamp(0.5em, 1.3vw, 1.5em);height: 100%;font-size: 1em;font-weight: 700;line-height: 1.2;list-style: none;display: flex;justify-content: flex-end;align-items: center;}
.navTB > li {display: block;flex: 0 0 auto;}
.navTB > li > a {color: var(--link-color); position: relative;z-index: 2;display: block;margin: 0;padding: 0.4em var(--item-spacing);white-space: nowrap;transition: color 0.3s;}
.navTB > li > a::before {position:absolute;z-index:-1;display:block;content:'';top:0;bottom:0;left:0;right:0;width: 100%;height: 100%;background: var(--color-beige);border-radius: 1em;transform: none;opacity: 0;transition: opacity 0.3s, background-color 0.3s;}

    /* Active menu item */
    .navTB > li.active > a {position: relative; }
    .navTB > li.active > a::after {position:absolute;z-index:0;display:block;content:'';bottom:0;height: 0.15em;left: var(--item-spacing);right: var(--item-spacing);background-color: currentColor;transition: opacity 0.3s }

	/* Hover */
    .navTB > li > a:hover,
	.navTB > li.hover > a {color:var(--color-red); }
    .navTB > li > a:hover::before,
	.navTB > li.hover > a::before {opacity: 1; }
    .navTB > li > a:hover::after,
	.navTB > li.hover > a::after {opacity: 0; }

	/* 2e LEVEL of nav */
	.navTB > li:has(> a + ul) {position: relative; }

	/* Sub nav container : ::before = BG */
    .navTB > li > ul {position: absolute;z-index: 3;top: 100%;left: -5em;right: -5em;list-style: none;box-sizing: content-box;text-align: center;opacity: 0;visibility: hidden;margin: 0;padding: calc(1.5 * var(--item-spacing)) var(--item-spacing);line-height: 1.1;transition: opacity 0s 0.3s, visibility 0s 0.3s;}
    .navTB > li > ul::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom:0;left:0;right:0;border-radius: var(--radius);background-color: var(--color-beige);transform: scaleY(0);transform-origin: 50% 0%;transition: transform 0.3s var(--ease-cubic);}
    .navTB > li > ul > li {display: block; opacity: 0; transition: opacity 0.15s; }
    .navTB > li > ul > li > a {display: block;color: var(--color-green);padding: 0.4em 0;transition: color 0.2s;}
	.navTB > li > ul > li > a:hover {color: var(--color-red);}

        /* Sub nav ON */
		.navTB > li.hover { }
		.navTB > li.hover > a + ul {opacity: 1;visibility: visible;transition: none;}
		.navTB > li.hover > a + ul::before {transform: scaleY(0.999); }
		.navTB > li.hover > a + ul > li {opacity: 1; transition-delay: 0.15s; }


	/*
	ALT :
	Lang. */
	.navTB--lang {--item-spacing: 0.35em; }
    .navTB--lang > li > a::before {display: none; }

        /* Hover */
        .navTB--lang > li > a:hover,
        .navTB--lang > li.hover > a {color:var(--color-green-light); }
        .navTB--lang > li > a:hover::after,
        .navTB--lang > li.hover > a::after {opacity: 1; }



/* .............................................................................
Panel produits
Dans la main nav, mais complètement différent d'un sous-menu standard.
::before = BG
Only for desktop, the mobile version is a list of links */
@media (min-width:62.01rem) {
    .panelProduits {--padding-inside-items: 1.1em;position: absolute;z-index: 0;top: 0;bottom: auto;left: 0;right: 0;padding: calc(1.3 * var(--topbar-height))  var(--width-std-right) calc(1 * var(--topbar-height)) var(--width-std-left);opacity: 0;visibility: hidden;transition: opacity 0s 0.3s, visibility 0s 0.3s;}
    .panelProduits::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom: 0;left:0;right:0; background-color: var(--color-beige);transform: scaleY(0);transform-origin: 50% 0%;transition: transform 0.4s var(--ease-cubic);}
    .panelProduits__layout {display: flex;align-items: center;gap: 2%; opacity: 0;transition: opacity 0.3s;}
    .panelProduits__item {width: 100%;flex: 1 1 auto;text-decoration: none;position: relative;display: grid;grid-template-columns: var(--padding-inside-items) 1fr var(--padding-inside-items);grid-template-rows: 1fr auto auto;}
    .panelProduits__item > * {grid-column: 2 / 3; }
    .panelProduits__item::before {z-index: -1; grid-column: 2 / 3;grid-row: 1 / 4;display:block;content:'';background-color: var(--color-white);border-radius: 50%;aspect-ratio: 1; transform: scale(0.75); transition: transform 0.3s var(--ease-cubic);}
    .panelProduits__image {grid-row: 1 / 4;}
    .panelProduits__nom {z-index: 2;grid-column: 1 / 3;grid-row: 2 / 3;color: var(--color-red);margin-bottom: -1.5em;}
    .panelProduits__btn {z-index: 3;grid-row: 3 / 4;justify-self: center;transform: translateY(50%);opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;}
    .panelProduits__nom > * {font-size: 2.5em;line-height: 1;min-height: 2em;}

        /* Hover: show the button and grow the white round background. */
        .panelProduits__item:hover .panelProduits__btn {opacity: 1;visibility: visible;}
        .panelProduits__item:hover::before {transform: none;}
        
        /* Lien qui fait ouvrir ce panel a une couleur différente */
        .navTB > li > a:has(+ .panelProduits)::before {background-color: var(--color-red); }

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

            /* Lien qui fait ouvrir le panel */
            .navTB > li.hover > a:has(+ .panelProduits) {color:var(--color-beige); }

            /* Changer la couleur des liens du menu principal quand un panel est ouvert.*/
            .topBar:has(.navTB > li.hover > a + .panelProduits) {--link-color: var(--color-green); }
}

/* The panel transform to a normal list of links */
@media (max-width:62rem) {
    .panelProduits {width: fit-content;margin: 0 auto;padding-bottom: 5vh;border-bottom: 1px solid currentColor;margin-bottom: 5vh;}
    .panelProduits__layout {display: flex;flex-direction: column;align-items: center;}
    .panelProduits__item {padding: 0.4em;transition: color 0.3s;}
    .panelProduits__item:hover {color: var(--color-red); }
    .panelProduits__image {display: none; }
    .panelProduits__btn {display: none; }
    .panelProduits__nom > * {font-size: 1em; font-weight: 400; text-wrap: nowrap; white-space: nowrap; }
    .panelProduits__nom > * br {display: none; }

    /* Bigger text only for this panel and the "Produits" link */ 
    .navTB > li:has(.panelProduits) {font-size: 1.2em; }
}


/* .............................................................................
TOPBAR / Scrolled
Reduire la hauteur du topBar.
Ajuster certaines couleurs. */
.topBar.isSmaller {--link-color: var(--color-green); }
.topBar.isSmaller::before {transform: scaleY(1); }
.topBar.isSmaller .topBar__height {height: var(--topbar-height-scrolled);}
.topBar.isSmaller .topBar__cLogo {transform: scale(0.7);}
.topBar.isSmaller .topBar__cLogo::before {transform: scale(0);transition-duration: 0.6s;transition-delay: 0.1s;}
.topBar.isSmaller .navTB > li > a::before {background-color: var(--color-red); }
.topBar.isSmaller .navTB > li > a:hover,
.topBar.isSmaller .navTB > li.hover > a {color:var(--color-beige); }
.topBar.isSmaller .navTB--lang > li > a:hover,
.topBar.isSmaller .navTB--lang > li.hover > a {color:var(--color-green); }

	/* Logo scaling + panel spacing */
	@media (max-width:62rem) {
        .topBar.isSmaller { }
        .topBar.isSmaller .topBar__layout {padding-bottom: calc(0.12 * var(--topbar-height-scrolled));}
		.topBar.isSmaller .topBar__cLogo {transform: scale(1);}
        .topBar.isSmaller .topBar__cSlide::after {top: calc(100% - (0.5 * var(--topbar-height-scrolled)));height: calc(1.5 * var(--topbar-height-scrolled));}
        .topBar.isSmaller .topBar__slide {padding-top: var(--topbar-height-scrolled); }
	}



/* Mobile nav */
@media (max-width:62rem) {
    .topBar {--link-color: var(--color-green); }
    .topBar::before {display: none; }
    .topBar__layout {position: relative;padding: 0 var(--width-std-right) calc(0.12 * var(--topbar-height)) var(--width-std-left);display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;gap: 0; transition: padding 0.4s;}

    /* Logo */
    .topBar__cLogo {position: static;grid-column: 2 / 3;grid-row: 1 / 2;transform-origin: 50% 50%;}
    .topBar__cLogo::before {display: none; }
    .topBar__logo {padding: 0; }

    /* Toggle */
    .topBar__cToggle {grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; display: flex;align-items: center; z-index: 7; }
    button.hamburger {display: block;margin-top: -0.15em;margin-right: -0.25em;}
    button.hamburger::before {display: none; }
    .hamburger__line {position: absolute;left: 0;right: 0;top: 0;margin: 0 0.25em;height: 2px;background-color: var(--color-green);display: block;transition: transform 0.3s var(--ease-cubic), 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(34% - 1px);transform-origin: 0% 50%; margin-left: 0.15em; }
        .hamburger__line:nth-child(4) {top: calc(66% - 1px);transform-origin: 0% 50%; margin-left: 0.35em; }

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

    /* Slide mobile */
    .topBar__cSlide {position: absolute;z-index: -1;color: var(--color-base);text-align: left;left: 0;right: 0;top: calc(-1 * (100dvh + 1px));height: 100dvh; margin: 0;transform: none;transition: transform 0.5s var(--ease-cubic);}
    .topBar__cSlide::after {position:absolute;z-index: -1;display:block;content:'';top: calc(100% - (0.5 * var(--topbar-height)));height: calc(1.5 * var(--topbar-height));left: -7vw;right: -7vw;background-color: var(--color-beige);border-radius: 0 0 50% 50%;transition: top 0.4s, height 0.4s;}
    .topBar__slide {padding-top: var(--topbar-height);position: relative;height: 100%;background: var(--color-beige);}
    .topBar__slideCtn {display: flex;gap: 2em;flex-direction: column;overflow: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;opacity: 0;transition: opacity 0.5s;height: 100%;padding: 1vh 0 0 0;}
    .topBar__slideNav {flex: 1 0 auto;}
    .topBar__slideLang {flex:0 0 auto; }
    .topBar__slideTomate {flex:0 0 auto;display: block;margin: 0 auto;overflow: hidden;width: min(100%, 30em);}


    /* Navs */
    .navTB {--item-spacing: 0.4em;font-size: calc(0.6em + 2vw);text-align: center;padding: 0 var(--width-std-right) 0 var(--width-std-left);height: auto;display: block;margin: 0;}
    .navTB > li { }
    .navTB > li > a,
	.navTB > li > a:hover,
	.navTB > li.hover > a,
	.topBar.isSmaller .navTB > li > a:hover,
	.topBar.isSmaller .navTB > li.hover > a {display: inline-block;color: var(--link-color);}
    .navTB > li > a::before {display: none; }

        /* 2e LEVEL of nav */
        /* Liens avec sous-menu présent *
        .navTB > li > a:has(+ ul) {margin-right: calc(-1 * 1.2em);}

        /* Sub nav container */
        .navTB > li > ul,
		.navTB > 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;}
        .navTB > li > ul::before {display: none;}
        .navTB > li > ul > li,
		.navTB > li.hover > a + ul > li {opacity: 1;transition: none;}
		.navTB > li > ul > li:last-child {padding-bottom: 1em;}
        .navTB > li > ul > li > a {display: inline-block;font-weight: 400;}
        .navTB > li > ul > li > a:hover {color: var(--color-green);}
        
            /* Active, hide underline */
            .navTB > li.active > a::after {opacity: 0; }

			/* Click = open submenu */
			.navTB > li.clicked > a + ul {height: auto;opacity: 1;transition-duration: 1s;pointer-events: auto;}
        
        /* Lang */
        .navTB--lang {display: flex;justify-content: center;align-items: center;gap: var(--item-spacing);}
        .navTB--lang > li > a {display: block; }
        
            /* Active, show underline */
            .navTB--lang > li.active > a::after {opacity: 1; }

            /* Hover */
            .navTB--lang > li > a:hover,
            .navTB--lang > li.hover > a {color: var(--link-color);}
    
    /* Tomate en bas */
    .topBar__tomate {padding: 0 14%;margin-bottom: -54%;}

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