.burgermenu {
  position: relative;
  border: none;
  background: none;
  width: 60px;
  height: 60px;
  padding: 0;
  cursor: pointer;
  outline:0;
}

/* Container central invisible */
.burgermenu span {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  transform: translateY(-50%);
}

/* Traits visibles */
.burgermenu span::before,
.burgermenu span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform 0.25s cubic-bezier(0.19,1,0.22,1);
}

body.int .burgermenu span::before,
body.int .burgermenu span::after {
  background: #000;
}

body.int.modal-open .burgermenu span::before,
body.int.modal-open .burgermenu span::after {
  background: #fff;
}

.burgermenu span::before { top: -5px; }
.burgermenu span::after  { top:  5px; }

/* Hover → les barres s'écartent un peu plus */
.burgermenu:hover span::before {
  transform: translateY(-2px); /* décale un peu plus vers le haut */
}
.burgermenu:hover span::after {
  transform: translateY(2px);  /* décale un peu plus vers le bas */
}

/* Etat ouvert : croix */
.burgermenu.opened span::before {
  transform: translateY(5px) rotate(45deg);
}
.burgermenu.opened span::after {
  transform: translateY(-5px) rotate(-45deg);
}