.wrapper_header {
  display: grid;
  row-gap: 8px;
  grid-template-areas:
    "headertop"
    "headermenu"
  ;
}

.headertop {
  grid-area: headertop;
  /* background-color: #FFDDAA; */
  padding:8px 10px 8px 10px;
  color:#fff;
  background-color:transparent;
  min-height: 100px;
}
.headertop.client {
  background-color:var(--color-base-n2);
  /* border: 4px solid var(--color-base-n1); */
}
.headertop.gestion {
  background-color:var(--color-base-n1);
  /* border: 4px solid var(--color-base-n1); */
}
.headertop.tutoclient {
  background-color:var(--color-base-n2);
  /* border: 4px solid var(--color-base-n1); */
}
.headertop.tuto {
  background-color:var(--color-base-n2);
  /* border: 4px solid var(--color-base-n1); */
}

.headermenu {
  grid-area: headermenu;
  padding-bottom: 20px;
  justify-self: center;
  position: relative;
  color:#fff;
  width: 100%;
}

.headerdisplayetroit {
  display:none;
}
.headerdisplaylarge {
  display:block;
}
.wrapper_headermenu {
  display: grid;
  /* grid-template-columns: auto auto auto 1fr auto auto auto; */
  grid-template-columns: auto 1fr auto auto auto;
  /* column-gap: 20px; */
  justify-content: start;
  /* margin-left:20px; */
}

@media only screen and (max-width: 740px){
  .headerdisplayetroit {
    display:block;
  }
  .headerdisplaylarge {
    display:none;
  }
  /* .wrapper_headermenu {
    margin-left:0px;
  } */
}

.wrapper_headermenu_col {
  position: relative;
}

.wrapper_mainmenu {
  display: grid;
  grid-template-columns: repeat(8, auto);
  justify-content: start;
  background-color:var(--color-menu-n1);
  color: #fff;
}
/* @media only screen and (max-width: 400px){
  .wrapper_mainmenu {
    grid-template-columns: 1fr;
  }
} */

.wrapper_mainmenu_col {
  position: relative;
}

.wrapper_menu {
  display: grid;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr;
  background-color: #fff;
  padding: 42px 34px 42px 34px;
}

.wrapper_menu_col1 {
  position: relative;
  text-align: left;
}

.wrapper_menu_col2 {
  position: relative;
  text-align: left;
}

.wrapper_menu_col_img {
  position: relative;
  text-align: center;
  align-self: center;
  min-width: 380px;
}

.wrapper_menuclient {
  display: grid;
  column-gap: 10px;
  grid-template-columns: 1fr;
  background-color: #fff;
  padding: 10px 10px 10px 10px;
}

.wrapper_menuclient_col1 {
  position: relative;
  text-align: left;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav li {
  margin-left: 10px;
  margin-right: 10px;
}