/*--------------------------------------------------------------OVERLAY---*/

.overlay{
  pointer-events: none;

  position: fixed;
  inset: 0;
    
  background-color: rgb(0,0,0,0);
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.3s ease-in, background-color 0.3s ease-in;
}

.overlay.show{
  pointer-events: auto;
  background-color: rgb(0,0,0,0.05);
  backdrop-filter: blur(2px);

}

/*--------------------------------------------------------------NAVBAR---*/
.navbar{
  position: absolute;
  z-index: 1;
  inset: 0 0 auto 0;
  transition: box-shadow 0.4s ease;
}

.navbar::before{
  content:"";
  position: absolute;
  inset:0;
  background: linear-gradient(270deg, var(--clr-peau) 0%, var(--clr-beige) 30%, var(--clr-beige) 70%, var(--clr-peau) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.navbar.nav-bg{
  box-shadow: 0 0 5px #2E414450;
}

.navbar.nav-bg::before{
  opacity: 1;
}

/*--------------------------------------------------------------NAVBOX---*/

.navbox{
  overflow: hidden;
  display: grid;
  grid-template: clamp(3.75rem, 3.4524rem + 1.1905vw, 4.375rem) auto / auto 1fr;
  grid-template-areas:
    "a b"
    "c c";
  max-width: calc(var(--container-max-width) + (var(--padd-default)*2));
  margin: 0 auto;
}

/*--------------------------------------------------------------LOGO---*/

.logo{
  display: flex;
  align-items: center;
  gap:0.3rem;
  padding: 0 calc(var(--padd-default) - 6px) ;
}

.logo svg{
  height: clamp(2.8421rem, 2.4812rem + 1.4436vw, 3.6rem);
  width: auto;

  --color-logo-m:var(--clr-accent-jaune);
  --color-logo-e:var(--clr-accent-orange);
  --color-logo-t:var(--clr-accent-brun);
  --color-logo-a:var(--clr-accent-bleu);
}

.logo svg #logo-m{translate: 0 0; transition: translate 0.3s ease;}
.logo svg #logo-e{translate: 0 0; transition: translate 0.3s ease;}
.logo svg #logo-t{translate: 0 0; transition: translate 0.3s ease;}
.logo svg #logo-a{translate: 0 0; transition: translate 0.3s ease;}

.logo:hover svg #logo-m{translate: 0 -2px;}
.logo:hover svg #logo-e{translate: 2px 0;}
.logo:hover svg #logo-t{translate: -2px 0;}
.logo:hover svg #logo-a{translate: 0 2px;}

.signature{
  font-size: var(--font-size-xlarge);
  font-weight: 600;
  text-box: trim-both ex alphabetic;
}



.logo:hover{
  color: var(--clr-bleu-fonce);
}

/*--------------------------------------------------------------BURGER---*/

.burger-button .sr-only{
  display: none;
}

.burger-button{
  display: none;
  flex-grow: 1;
  justify-items: end;
  padding: var(--btn-vp-default) var(--padd-default);
}

.burger-icone{
  height: 25px;
  width: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bar{
  min-height: 3px;
  background-color: var(--clr-bleu-fonce);
  transition: 0.2s ease-in-out;
}

.burger-button:hover{
  cursor: pointer;}

.burger-button:hover .bar {
    background-color: var(--clr-orange-intense);}

.close > :nth-child(1) {
  transform: translateY(10.9px) rotate(45deg);}

.close > :nth-child(2) {
  transform: scaleX(0);}

.close > :nth-child(3) {
  transform: translateY(-10.9px) rotate(-45deg);}


/*---------------------------------------------------------NAV-MENU---*/

.navmenu{
  display: flex;
  justify-content: end;
}

.navmenu ul{
  list-style: none;
  display: flex;
}


/*-------------------------------------------------------------ITEM---*/


.navmenu li{
    display: flex;
}

.navmenu a{
    display: flex;
    align-items: center;
    padding: var(--btn-vp-default) var(--btn-hp-default);
    text-box: trim-both cap alphabetic;
}



/*--------------------------------------------------------------MOBILE---*/
/*--------------------------------------------------------------MOBILE---*/
/*--------------------------------------------------------------MOBILE---*/
/*--------------------------------------------------------------MOBILE---*/
/*--------------------------------------------------------------MOBILE---*/



@media (max-width: 767px){


.active{
  color: var(--clr-accent-orange);
}


/*--------------------------------------------------------------BURGER---*/

.burger-button{
  display: block;
}

/*--------------------------------------------------------------NAV-MENU---*/

.navmenu{
  grid-area: c;
  flex-direction: column;
  width: 100%;
}

.navmenu ul{

  padding: var(--btn-vp-default) var(--padd-default);
  flex-direction: column;
}


.navmenu[data-menu-state="closed"]{
  overflow: hidden;
  max-height: 0dvh;
  transition: max-height 0.4s ease-out;
}

.navmenu[data-menu-state="open"]{
  max-height: 50dvh;
  transition: max-height 0.4s ease-in;
}


/*--------------------------------------------------------------ITEM---*/

.navmenu a{
  padding: var(--btn-vp-default) 2rem;
  flex-grow: 1;
  border-top: 1px solid #E2D2CF;
  border-left: 3px solid transparent;
  transition: background-color 0.4s ease, border 0.2s ease;
}

.navmenu a:hover{
    background-color: var(--clr-beige);
    border-left: 3px solid var(--clr-orange-intense);
}

.navmenu[data-menu-state="closed"] li:nth-child(n){
  opacity: 0; 
  translate:-10px -5px;
  transition: opacity 1s ease, translate 1s ease;
}

.navmenu[data-menu-state="open"] li:nth-child(1){opacity: 1; translate:0;transition: opacity 0.2s ease 0.2s, translate 0.2s ease 0.2s;}
.navmenu[data-menu-state="open"] li:nth-child(2){opacity: 1; translate:0;transition: opacity 0.2s ease 0.3s, translate 0.2s ease 0.3s;}
.navmenu[data-menu-state="open"] li:nth-child(3){opacity: 1; translate:0;transition: opacity 0.2s ease 0.4s, translate 0.2s ease 0.4s;}
.navmenu[data-menu-state="open"] li:nth-child(4){opacity: 1; translate:0;transition: opacity 0.2s ease 0.5s, translate 0.2s ease 0.5s;}

/*--------------------------------------------------------------PAS DE TRANSITION AU REDIMENSIONNEMENT---*/


.no-transition .navmenu {
    transition: none !important;
}

}