@media screen and (max-width: 1247px) {
  header {
    width: 100vw;
    max-width: 90%;
    column-gap: unset;
    justify-content: space-between;
  }

  header nav:not(.visible) {
    display: none;
  }

  header .sandwich {
    background-color: transparent;
    background-image: url('../images/icone_sandwich.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    border: none;
    display: flex;
    margin: 8px;
  }

  body:has(header nav.visible) {
    overflow: hidden;
  }

  header nav.visible {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #fff;
    height: 100vh;
    width: 100vw;
    flex-direction: column;
    row-gap: 16px;
  }

  header nav.visible .bouton-fermer {
    display: block;
    align-self: flex-end;
    margin: 1em 5% 1em 0;
    width: fit-content;
    border: 0;
    color: var(--systeme-design-etat-bleu);
    cursor: pointer;
  }

  header nav.visible .bouton-fermer::after {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.2em;
    margin-left: 0.3em;

    background-color: var(--systeme-design-etat-bleu);
    -webkit-mask: url(../images/icone_fermer.svg) no-repeat center;
    mask: url(../images/icone_fermer.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;

    transform: translateY(0.3em);
  }

  header nav.visible a[href^='mailto:'] {
    order: 4;
  }

  header nav.visible a {
    padding: 0.3em 0 8px;
    border-bottom: 1px var(--liseres) solid;
  }

  header nav.visible > :is(a, .utilisateur-courant) {
    width: 90%;
  }

  header nav.visible .utilisateur-courant {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }
}

@media screen and (max-width: 1247px) and (min-width: 768px) {
  header nav.visible .bouton-fermer {
    margin-top: 3em;
  }
}

@media screen and (max-width: 767px) {
  header {
    align-items: flex-start;
    justify-content: space-between;
  }

  header :is(.logo-anssi, .logo-mss) {
    display: none;
  }
}