/**
 * @file
 * The header components.
 *
 * It includes styles for the header itself and their
 * component as the logotype or the main menu.
 */


/**
 * Main menu
 */

.header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.header__logo {
  display: flex;
  width: 183px;
  height: 112px;
  justify-content: flex-end;
  align-items: center;
}

.header__menus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.region-primary-menu ul {
  list-style: none;
  margin:0;
  padding:0 16px;
  display: flex;
  flex-direction: column;
  gap : 5px;
}



.menu--menu-secondaire ul {
  list-style: none;
  margin:0;
  padding:0;
}


.header__menus li {
  display: inline-block;
  vertical-align: middle;
}
.header__primary-menu {
  z-index: 100;
  position: fixed;
  top: 152px;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: var(--color-white);
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all ease-in-out 0.3s;
  opacity: 0;
  border-bottom: 1px solid #E5EBF4;
}
.header__primary-menu.is-active {
  opacity: 1;
  width: 100vw;
}
.header__primary-menu .menu__link {
  font-weight: 700;
  color:#000;
  padding-bottom:0.25rem;
  transition:all 0.25s;
}

.header__primary-menu .menu__link {
  font-family: var(--font-figtree);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.header ul.menu a.is-active {
  font-weight: 700;
}

.header__secondary-menu {
  width: 100%;
  background-color: var(--color-secondary--1);
  padding: 10px 12px;
}
.header__secondary-menu li {
  position: relative;
  /*padding:0 0.75rem;*/
  line-height:1;
}

.header__secondary-menu ul.menu a.is-active {
  color: var(--color-white);
}




@media screen and (max-width: 750px){
  .header__secondary-menu a {
    margin: 0;
    padding: 0 0.5rem;
  }
}
.header__secondary-menu .menu .menu__link:before {
  content:'';
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.header__secondary-menu .menu__item .menu__link {
  display: none;
}
.header__secondary-menu .menu .link-converter:before {
  background-image: url('../images/menu/converter.svg');
  width: 25px;
  height: 25px;
}
.header__secondary-menu .menu .link-payment:before {

  background-image: url('../images/menu/payment.svg');
  width:24px;
  height:24px;
}

.menu__item .link-linkedin {
  display: none;
}
.header__secondary-menu .menu .link-linkedin {
  overflow: hidden;
  width:43px;
  height:19px;
  background-image: url('../images/menu/linkedin.svg');
  background-size: 19px;
  background-repeat: no-repeat;
  background-position: center;
  text-indent:-999rem;
}
.header__secondary-menu .menu .link-en,
.header__secondary-menu .menu .link-fr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.header__secondary-menu .menu .link-en:before,
.header__secondary-menu .menu .link-fr:before {
  content:'';
  display: block;

  background-image: url('../images/menu/user.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width:24px;
  height:24px;
}

.header__primary-menu li {
  padding:.5rem 0;
}
.header__secondary-menu a {
  display: block;
}

/* Sélecteur de langue */

.block-language {
  background-color: var(--color-primary--1);
  display: flex;
  padding: 5px 6px;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
}

.block-language ul {
  margin: 0;
}

.block-language li {
  display: flex;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
}

.block-language li:has(a.is-active) {
  border-radius: 20px;
  background-color: var(--color-white);
}

.block-language li .language-link {
  font-size: 18px;
  text-transform: uppercase;
}

.block-language li .language-link.is-active {
  color: var(--color-primary--1);
}

@media all and (min-width:1024px) {

}


.header__secondary-menu .menu__link,
.header__secondary-menu .language-link {
  font-weight: 600;
  color:var(--color-white);
  font-size: 16px;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.header__primary-menu .menu__link:after {
  content:'';
  display: block;
  background-color:#006A44;
  width: 0%;
  height:1px;
  transition:all 0.25s;
}
.header__primary-menu .menu__link:hover:after,
.header__primary-menu .menu__link.is-active:after,
.page-node-type-produit .header__primary-menu .menu__item:nth-child(3) .menu__link:after,
.path-taxonomy .header__primary-menu .menu__item:nth-child(3) .menu__link:after {
  width:100%;
}

.region-secondary-menu,
.region-secondary-menu .menu,
.region-secondary-menu .links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  gap: 0px;
}


.header-container {
  position: sticky;
  background-color: var(--color-white);
  width: 100%;
  left:0;
  top:0;
  z-index:3;
}



@media screen and (min-width:1024px) {

  .path-node .header-container {
    border-bottom: 1px solid #EAEAEA;
  }
  .header__primary-menu {
    display: block;
  }
  .region-secondary-menu {
    padding:0;
    justify-content: flex-end;
    gap: 24px;
  }
  .region-secondary-menu .menu {
    gap: 24px;
  }

  .header__primary-menu li {
    padding:0 0 0 1rem;
  }


  .header__secondary-menu {
    padding: 10px 88px;
  }

  .header__secondary-menu .menu__link:hover,
  .header .language-link:hover {
    text-decoration: underline;
  }

  .header__secondary-menu .menu__item .menu__link {
    display: flex;
  }


}



/**
 * Site Main Nav RESPONSIVE
 */

.menu-toggle {
  position: absolute;

  line-height:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-secondary--1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 80px;
  right: 24px;
}
.menu-toggle__button {
  width: 18px;
  height: 12px;
  padding: 0;
  line-height:0;
  text-indent: -999em;
  background-color: transparent;
  border: none;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .menu-toggle,
  .menu-toggle__button {
    display:none;
    margin:0;
  }
  .menu-toggle {
    margin:0;
  }
}


/**
 * Button bar  animation
 */
.menu-toggle__bar {
  position: absolute;
  width:18px;
  height:2px;
  background-color:var(--color-white);
  border-radius: 25%;
  top: 50%;
  display: block;
  -webkit-transition: all ease .25s;
  -o-transition: all ease .25s;
  transition: all ease .25s;
}
.menu-toggle__bar:first-child {
  top: 0%;
}
.menu-toggle__bar:last-child {
  top: 100%;
}
.is-active .menu-toggle__bar {
  opacity: 0; /* The central bar is not visible if button is active */
}
.is-active .menu-toggle__bar:first-child,
.is-active .menu-toggle__bar:last-child {
  /* If the button is active, the burger icon is turning into a cross icon */
  top: 45%;
  opacity: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.is-active .menu-toggle__bar:last-child {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/**
  * Temporary secondary menu fix
  **/

html:lang(en) .header__secondary-menu .menu  .menu__item:has(.link-fr) {
  display: none;
}

html:lang(fr) .header__secondary-menu .menu  .menu__item:has(.link-en) {
  display: none;
}


@media all and (min-width:1024px) {
  .header__menus {
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    height: 112px;
    overflow: visible;
    justify-content: flex-end;
  }

  .header__logo {
    position: absolute;
    bottom: -18px;
    left: 45px;
    width: 252px;
    height: 162px;
  }


  .header__primary-menu {
    all: unset;
    position: relative;
    height: fit-content;
    padding: 0;
    flex-direction: column-reverse;
    margin-top: 0;
    opacity: 1;
  }

  .region-primary-menu ul {
    flex-direction: row;
    justify-content: flex-end;
  }

  .path-frontpage .header-container {
    background-color: transparent;
  }

  .path-frontpage .region-primary-menu ul {
    display: flex;
    height: 68px;
    padding: 16px 31px;
    align-items: center;
    gap: 24px;
    border-radius: 15px;
    background: rgba(0, 9, 38, 0.65);
    backdrop-filter: blur(2px);
  }

  .path-frontpage .header__primary-menu .menu__link {
    color: var(--color-white);
  }

  .header__primary-menu .menu__link::after {
    display: none;
  }
}