.js-slider{
    display: flex;
    position: relative;
    width: 800px;
    height: 500px;
    overflow: hidden;
    border-radius: 30px;
    z-index: 10000;
}

.js-photos{
    position: relative;
    display: flex;
    width: max-content;
    left: -800px;
    transition: left 0.3s ease;

}

.js-photo{
    flex-shrink: 0;
    position: relative;
    width: 800px;
    height: 500px;
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-banque {
    background-image: url(../slider/banque-sli.jpg);
    background-position: center;
    background-size: cover;
}

.img-mh {
    background-image: url(../slider/maison-hantee-sli.jpg);
    background-position: center;
    background-size: cover;
}

.img-prison {
    background-image: url(../slider/prison-sli.jpg);
    background-position: center;
    background-size: cover;
}



.btnG {
    padding: 10px 20px; 
    background-color: #E0E3F6; 
    color: #903FC9; 
    border: 2px solid #903FC9;
    border-radius: 2rem; 
    font-size: 1.7rem;
    cursor: pointer; 
    transition: 0.3s ease, color 0.3s ease; 
    position: absolute;
    z-index: 98;
    left: 22%;
    transform: translateY(-50%);
    top: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  .btnG:hover {
    background-color: #1E2236;
    color: #E0E3F6; 
  }
  

  .btnG:focus {
    outline: none; 
    box-shadow: 0 0 10px rgba(144, 63, 201, 0.5); 
  }
  

  .btnG:active {
    background-color: #903FC9;
    color: #E0E3F6;
    top: 61%;
  }
  

  

.btnD {
    padding: 10px 20px;
    background-color: #E0E3F6;
    color: #903FC9; 
    border: 2px solid #903FC9; 
    border-radius: 2rem; 
    font-size: 1.7rem; 
    cursor: pointer; 
    transition: 0.3s ease, color 0.3s ease; /* Transitions douces */
    position: absolute;
    z-index: 98;
    right: 22%;
    transform: translateY(-50%);
    top: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .btnD:hover {
    background-color: #46116b; 
    color: #E0E3F6;
  }
  

  .btnD:focus {
    outline: none; 
    box-shadow: 0 0 10px rgba(144, 63, 201, 0.5); 
  }
  
  /* État actif */
  .btnD:active {
    background-color: #903FC9; 
    color: #E0E3F6;
    top: 61%;

  }
  

  .fleche{
    width: 2.7rem;
  }