.button {
  margin-bottom: 10em;
  margin-top: 10em;
      display:flex;
    justify-content:center;
    align-items:center;
}

.anglais,
.francais {
  color: #d20101;
  font-family: 'regular';
  font-size: 1.2rem;
  padding: 10px 20px;
  margin: 5px;

  background: transparent;
  border: 3px solid #d20101;
  cursor: pointer;

  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
}



.ang,
.fr {
  display: none;
}

.visible {
  display: block;
}






*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.a {
position: relative;
  height: 4600px;
}

.a img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.b {
position: relative;
  height: 4600px;
}

.b img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.c img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.c {
position: relative;
  height: 4600px;
}

.d img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.d {
position: relative;
  height: 4600px;
}

.e img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.e {
position: relative;
  height: 4600px;
}

.f img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.f {
position: relative;
  height: 4600px;
}

.g img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.g {
position: relative;
  height: 4360px;
}



.fou {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 100;
  transform: rotate(90deg);
  cursor: pointer;
}

.fou path {
    animation: swim 2s infinite alternate;
}
@keyframes swim {
    100% {
    d: path("m 9,47.4 h 1.2 c 0,0 2.3,-5.3 9.1,-11 v -2.1 c 0,0 -5.5,2.6 -8.2,5.3 0,-7 -2.9,-9.7 0.1,-20.7 C 13.8,9.4 11.1,6.2 11.1,0 10.2,0 9.3,0 8.4,0 c 0,6.2 2,9.6 -0.1,19 -3,13.4 0,13.5 0,20.5 0,0 -2.2,-2.5 -8.3,-5.3 v 2 c 0,0.1 6.8,5.8 9,11.2 z")
    }
}


.folle path {
    animation: swim 2s infinite alternate;
}

.folle {
  display: block;
  margin-left: auto;
  margin-right: 50px;
  margin-bottom: 50px;
  transform: rotate(-90deg);
  width: fit-content;
}