header.top {
  position: fixed;
  left: 0;
  right: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 4%;
  padding-right: 4%;
  background: white;
  z-index: 100;
}

header.top h1 {
  text-transform: uppercase
}

/* ------------------------------------------------ */
#menu-s {
  display: none
}

#menu {
  display: inline-block;

}

#menu ul {
  display: inline-block;
}

#menu .category {
  margin: 0;
}

#menu li {
  margin-top: 0.5rem;
  display: inline-block;
}

#menu li a {
  color: currentColor;
  text-decoration: none;
}

#menu li::after {
  content: " • "
}

#menu li:last-child::after {
  content: ""
}

#page-size {
  color: black;
  color: black;
  position: fixed;
  bottom: 5px;
  font-size: .8rem
}

#page-size::before {
  content: "Page actuelle: "
}

/* ----------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1010px) {
  #menu-s {
    margin-top: 0.5rem;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #adadad;
  }

  #menu-s:hover {
    cursor: pointer;
    color: #adadad
  }

  #menu-list {
    height: 0;
    overflow: hidden;
    transition: height 300ms ease-in-out
  }

  #menu li::before {
    content: " ↳  "
  }

  #menu-list.show {
    height: 100%
  }

  #menu ul {
    display: block
  }

  #menu li {
    display: block;
    margin: 0;
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  #menu li::after,
  #menu li:last-child::after {
    content: ""
  }