header {
  display: flex;
  column-gap: 1.4em;
  align-items: center;
  padding: 1em 0;
  justify-content: space-around;
  margin: auto;
  width: 100%;
  max-width: 1440px;
}

header :is(.header-gauche, .header-droit) {
  display: flex;
  align-items: center;
}

header a {
  display: inline-block;
  text-decoration: none;
  color: var(--bleu-anssi);
}

header nav,
.utilisateur-courant {
  display: flex;
  column-gap: 0.4em;
  align-items: center;
}

header nav {
  font-size: 0.9em;
}

header nav .utilisateur-courant {
  margin-left: 6px;
  margin-right: 6px;
}

header .sandwich,
header nav .bouton-fermer {
  display: none;
}

header nav a {
  padding: 0.3em 0.85em;
  color: var(--systeme-design-etat-bleu);
}

:is(header nav a:not(.bouton), .logo-anssi, .logo-mss):hover {
  background-color: var(--systeme-design-etat-gris-survol);
}

:is(header nav a, .logo-anssi, .logo-mss):active {
  background-color: var(--systeme-design-etat-gris-actif);
}

.marianne,
.devise {
  width: 45%;
  background-repeat: no-repeat;
  background-size: contain;
}

.marianne {
  height: 0.75em;
  background-image: url(../images/marianne.svg);
}

.devise {
  height: 1.38em;
  background-image: url(../images/devise.svg);
}

.republique-francaise {
  padding: 0.36em 0;
  line-height: 1.075em;
  color: #000;
  font-size: 0.7em;
  font-weight: bold;
}

.logo-anssi {
  width: 4.05em;
  height: 4.05em;
  margin: 0 0.4em;
  padding: 0.3em 0.85em;
  background-image: url(../images/logo_anssi.png);
  background-origin: content-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.logo-mss {
  width: 10.49em;
  height: 3.7em;
  margin-right: auto;
  padding: 0.3em 0.85em;
  background-image: url(../images/logo_mss.svg);
  background-origin: content-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.utilisateur-courant {
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
}