/* ======================================
   PRE-HEADER
====================================== */
.pre-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background-color: var(--color-tertiary--dark);
}

.region-preheader > nav > ul {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
}

.region-preheader > nav > ul > li > a {
  color: #FFF !important;
  font-family: var(--font-poppins);
  font-size: 14px;
  font-weight: 400;
}

/* ======================================
   HEADER
====================================== */
.region-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1437px;
}

/* ======================================
   MENU
====================================== */
.sf-menu {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 30px !important;
  padding-right: 0 !important;
}

ul.sf-menu a,
ul.sf-menu span.nolink {
  padding: 0 !important;
}

.block-superfish > .sf-menu > .sf-depth-1 > a {
  color: #27222B;
  font-family: var(--font-poppins);
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  margin: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.block-superfish > .sf-menu > .sf-depth-1 > a:hover {
  opacity: 0.9;
}

.region-header > nav > ul > li a {
  border-radius: 32px;
  padding: 12px 24px;
  border: 3px solid var(--color-secondary--1);
  cursor: pointer;

  color: var(--color-tertiary--dark) !important;
  font-family: var(--font-poppins);
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;

  transition:
    background-color 0.35s ease,
    color 0.25s ease,
    border-color 0.35s ease,
    transform 0.25s ease,
    box-shadow 0.35s ease;
}

.region-header > nav > ul > li a:hover {
  background-color: var(--color-secondary--1);
  color: var(--color-white) !important;
}

@media screen and (max-width: 999px) {

  .sf-menu {
    align-items: baseline;
    padding-left: 24px!important;
    padding-top: 25px!important;
  }

}

/* ======================================
   DESKTOP (999px+)
====================================== */
@media screen and (min-width: 999px) {
  .region-header {
    flex-direction: row;
    max-width: 1400px;
    width: calc(100% - 3rem);
    margin: 0 auto;
    padding: 0.5rem 0;
    z-index: 5;
  }

  .sf-menu {
    flex-direction: row !important;
    gap: 50px !important;
    padding-right: 25px !important;
  }

  .region-header > nav > ul > li {
    margin-bottom: 1em;
  }

  .pre-header {
    padding-right: 17%;
  }

  .region-preheader > nav > ul {
    flex-direction: row;
    align-items: center;
    gap: 35px;
  }
}


/* ======================================
   Fix hover menu
====================================== */


/* liens du menu principal */
#superfish-main > li > a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--color-primary--1), var(--color-primary--1));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 2px !important;
  transition: background-size 0.3s ease;
}

#superfish-main > li > a:hover,
#superfish-main > li > a:focus {
  background-size: 100% 2px;
}

/* liens menu preheader */
#block-preheader .menu > li > a {
  color: inherit;
  text-decoration: none;

  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;

  padding-bottom: 2px;
  transition: background-size 0.3s ease;
}

#block-preheader .menu > li > a:hover,
#block-preheader .menu > li > a:focus {
  background-size: 100% 1px;
}