/* ╔═════════════════════════════════════════════════════╗
 *  🖥️ ==> HEADER CSS                                  
 * ╚═════════════════════════════════════════════════════╝ */

/* -------------------------------------------------------
 * 🛠️ HEADER navigation
 * ------------------------------------------------------- */
header {
  width: 100%;
  z-index: 1000;
  position: fixed;
}

header .header-nav {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

header .header-nav #logo img {
  width: 272px;
  height: 82px;
  margin: 34px 0 0 40px;
}
#menu {
  display: none;
}

#menu1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
#menu2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-left: 40px;
}

/* -------------------------------------------------------
 * 🛠️ Style de base pour le menu burger
 * ------------------------------------------------------- */
header .burger {
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 112px;
  cursor: pointer;
  gap: 6px;
  z-index: 1100;
}
header .burger span {
  display: block;
  width: 45px;
  height: 8px;
  background: var(--site-color);
  transition: all 350ms ease-out;
  border-radius: 4px;
}

/* -------------------------------------------------------
 * 🛠️ base des span burger
 * ------------------------------------------------------- */
.burger span:nth-child(1) {
  transform: translate(4px, 0px);
}

.burger span:nth-child(2) {
  transform: translate(-4px, 0px);
}

.burger span:nth-child(3) {
  width: 35px;
  transform: translate(6px, 0px);
}

/* -------------------------------------------------------
 * 🛠️ .openmenu
 * ------------------------------------------------------- */
html.openmenu {
  position: relative;
  z-index: 999 !important;
  overflow: hidden;
}
html.openmenu .header-nav #logo {
  position: relative;
  z-index: 1100;
}

/* -------------------------------------------------------
 * 🛠️ Animation pour la croix lorsque actif
 * ------------------------------------------------------- */
html.openmenu .burger span:nth-child(1) {
  transform: rotate(45deg) translate(11px, 8px);
  width: 55px;
}

html.openmenu .burger span:nth-child(2) {
  opacity: 0;
}

html.openmenu .burger span:nth-child(3) {
  width: 55px;
  transform: rotate(-45deg) translate(11px, -9px);
}

html.openmenu #menu {
  display: flex;
  flex-direction: column;
  gap: 100px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100vh;
  background: var(--site-color) !important;
  padding: 20px;
  z-index: 1050;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

html.openmenu #menu1,
html.openmenu #menu2 {
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ===> 🖥️ MEDIA QUERY : Max-width 1920px
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1920px) {
  /* 🛠️ HEADER navigation */
  header .header-nav {
    height: 5.833vw;
  }
  nav {
    gap: 1.041vw;
  }

  header .header-nav #logo img {
    width: 14.166vw;
    height: 4.27vw;
    margin: 1.77vw 0 0 2.083vw;
  }
  #menu1 {
    gap: 3.125vw;
  }
  #menu2 {
    gap: 1.041vw;
    margin-left: 2.083vw;
  }
  /* 🛠️ Style de base pour le menu burger */
  header .burger {
    width: 5.729vw;
    height: 5.833vw;
    gap: 0.312vw;
  }
  header .burger span {
    width: 2.343vw;
    height: 0.416vw;
    border-radius: 0.208vw;
  }
  /* 🛠️ base des span burger */
  .burger span:nth-child(1) {
    transform: translate(0.208vw, 0px);
  }

  .burger span:nth-child(2) {
    transform: translate(-0.208vw, 0px);
  }

  .burger span:nth-child(3) {
    width: 1.822vw;
    transform: translate(0.312vw, 0px);
  }
  /* 🛠️ Animation pour la croix lorsque actif */
  html.openmenu .burger span:nth-child(1) {
    transform: rotate(45deg) translate(0.572vw, 0.419vw);
    width: 2.864vw;
  }

  html.openmenu .burger span:nth-child(3) {
    width: 2.864vw;
    transform: rotate(-45deg) translate(0.572vw, -0.468vw);
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ===> 🖥️ MEDIA QUERY : Max-width 1000px
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1000px) {
  header .header-nav {
    height: 66px;
  }

  header .header-nav #logo img {
    opacity: 0;
  }

  /* 🛠️ Style de base pour le menu burger */
  header .burger {
    width: 71px;
    height: 66px;
    gap: 3px;
  }
  header .burger span {
    width: 24px;
    height: 4px;
    border-radius: 2px;
  }
  /* 🛠️ base des span burger */
  .burger span:nth-child(1) {
    transform: translate(4px, 0px);
  }

  .burger span:nth-child(2) {
    transform: translate(-4px, 0px);
  }

  .burger span:nth-child(3) {
    width: 20px;
    transform: translate(3px, 0px);
  }
  /* 🛠️ Animation pour la croix lorsque actif */
  html.openmenu .burger span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 4px);
    width: 33px;
  }

  html.openmenu .burger span:nth-child(3) {
    width: 33px;
    transform: rotate(-45deg) translate(5px, -4px);
  }
}