/* Header */
.header {
    display: flex;
    background-color: #FFF;
    justify-content: center;
}

.header-container {
    display: grid;
    justify-content: space-between;
    width: 100%;
}

.header__toggle-container {
    display: flex;
    align-items: center;
}

.header__logo-container {
    align-items: center;
    display: flex;
}

.header__profile-container .icon-container {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-around;
}

/* Navigation */
.header a {
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
    color: #373330;
    font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", sans-serif;
}

nav ul {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: flex-end;
}

nav li {
    list-style-type: none;
}

@media screen and (max-width: 639px) {
    .header {
       border-bottom: 1px solid var(--Filets-filets-primaire, rgba(0, 0, 0, 0.20));
       height: 52px;
       padding: 3px 0;
   }

   .header-container {
       grid-template-columns: 56px auto 56px;
       grid-template-areas: "header__toggle-container header__logo-container--mobile header__profile-container"
           "header__menu-container header__menu-container header__menu-container";
           max-width: 1288px;
   }

   .header__toggle-container {
       grid-area: header__toggle-container;
       padding: 17px 16px;
   }

   .menuToggle .menuToggle__hamburger {
       display: flex;
       flex-direction: column;
       gap: 6px;
       align-items: center;
   }

   .menuToggle .menuToggle__hamburger span {
       display: block;
       width: 20px;
       height: 2px;
       background-color: #1224B8;
       border-radius: 1px;
       z-index: 1;
   }

   .menuToggle__icon-close {
       display: none;
   }

   .menuToggle.open .menuToggle__hamburger {
       display: none;
   }

   .menuToggle.open .menuToggle__icon-close {
       display: flex;
   }

   .header__logo-container--mobile {
       grid-area: header__logo-container--mobile;
       display: flex;
       justify-content: center;
       align-items: center
   }

   .header__logo-container--mobile .logo {
       padding-top: 8px;
   }

   .header__profile-container {
       grid-area: header__profile-container;
       pad: 0 16px;
       display: none;
   }

   .header__menu-container {
       grid-area: header__menu-container;
       position: absolute;
       top: 58px;
       width: 100%;
       height: calc(100% - 58px);
       z-index: 1;
       display: none;
       justify-content: center;
       background-color: #fff;
       border-top: 1px solid var(--Filets-filets-primaire, rgba(0, 0, 0, 0.20));
   }

   .header__menu-container.toggle {
       display: flex;
   }

   .header__menu-container ul {
       flex-direction: column;
       gap: 24px;
       padding: 32px 16px;
       margin: 0;
   }

   .header__logo-container--desktop {
       display: none !important
   }


   /* Navigation */

   .menuToggle:hover {
       background-color: lightgrey;
   }
}

@media screen and (min-width: 640px) {
   .header {
       padding: 16px 32px;
       max-width: 1288px;
       margin: auto;
   }

   /* Header */
   .header-container {
       grid-template-columns: auto auto;
       grid-template-rows: min-content;
       grid-template-areas: "header__logo-container--desktop header__menu-container";
   }

   .header__toggle-container,
   .header__logo-container--mobile,
   .header__profile-container {
       display: none !important;
   }

   .header__logo-container--desktop {
       grid-area: header__logo-container--desktop;
   }

   .header__menu-container {
       grid-area: header__menu-container;
   }
}