.slider {
width: 30vh;
height: 70vh;
  position: relative;
  left: calc(50% - 15vh - 20px);
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  border: 20px solid var(--noir);
}
.slides { 
  display: flex;
  flex-shrink: 0;
  transition: all 0.5s;
  margin-left: calc(-30vh + 1px);


}
.slides .slide {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vh;
  height: 70vh;
}



.buttons .btn-prev,
.buttons .btn-next {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  border-radius: 50%;
  cursor: pointer;
  z-index: 30;
  padding: 0px;
  margin: 0px;


}
.buttons .btn-prev{
  left: calc(50% - 25vh);
}
.buttons .btn-next{
  right: calc(50% - 25vh);
}

.flechebtn {
  font-size: 40px;
  position: relative;
  top: -5px; /* remonte le texte */
}


.btn-prev, .btn-next {
  color: var(--noir);
  background-color:var(--jaune) ;
  border: 4px solid var(--noir);
  transition: .3s;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  border-radius: 5px;


}
.btn-prev:hover, 
.btn-next:hover {
  border-color: var(--noir);
  color: var(--jaune);
  background-color:var(--noir) ;


}