:root {
  --nav-height: 2rem;
  --logo-size: 4rem;
  --separator-width: 2px;
}

/* BODY */

body {
  margin: 0;
  padding-top: calc(var(--logo-size) + .5rem);
}

/* HEADER */

header {
  position: fixed;
  inset: 0 0 auto 0;

  z-index: 50;

  min-height: var(--nav-height);

  background: var(--accent-color);

  box-shadow:
    0 4px 20px rgba(0,0,0,.35);

  overflow: visible;
}

/* LOGO */

header .logo {
  position: absolute;

  top: 0;
  left: .4rem;

  width: var(--logo-size);
  height: var(--logo-size);

  z-index: 51;
}

header .logo a {
  display: block;

  width: 100%;
  height: 100%;
}

header button {
  margin-left:auto;
  transform: scale(0.5);
}

header .logo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  box-sizing: border-box;

  border-radius: .5rem;
  padding: .2rem;
  box-shadow:
    0 6px 18px rgba(0,0,0,.35);
}

/* NAV */

header nav {
  display: flex;
  flex-wrap: wrap;

  align-items: stretch;

  min-height: var(--nav-height);

  /* espace réservé au logo */
  padding-left: calc(var(--logo-size) + 1rem);

  overflow: visible;
}

/* LINKS */

header nav > a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: var(--nav-height);

  padding-inline: 1.5rem;

  color: white;
  text-decoration: none;

  font-size: 1rem;
  font-weight: 800;

  white-space: nowrap;

  transition:
    color .16s ease,
    background-color .16s ease;
}

/* HOVER */

header nav > a:hover {
  color: var(--highlight-bg);
}

/* ACTIVE */

header nav > a.active { color: #444; }

/* OBLIQUE SEPARATORS */

header nav > a:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 0;
  right: calc(var(--separator-width) / -2);

  width: var(--separator-width);
  height: 100%;

  background: var(--bg-light);

  transform: skewX(-24deg);

  pointer-events: none;

  z-index: 5;
}

/* espace pour le séparateur */

header nav > a:not(:last-child) {
  margin-right: calc(var(--separator-width) / 2);
}

/* MOBILE */

@media (max-width: 700px) {

  :root {
    --nav-height: 2.2rem;
    --logo-size: 3.2rem;
  }

  header nav {
    padding-left:
      calc(var(--logo-size) + .5rem);
  }

  header nav > a {
    flex: 1 1 auto;

    min-width: max-content;

    font-size: .95rem;

    padding-inline: 1rem;
  }
}