.loisir {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 500px;
    padding: 0 15%;
    margin: 3% 0;
}

.arc {
    width: 28%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.459), 
        rgba(0, 0, 0, 0.205)
          ),url(../image/arc.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    transition: 0.8s;
    box-shadow: 4px 4px 4px 4px #e0dbdb;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.arc:hover{
  background: linear-gradient(
    rgba(0, 0, 0, 0.74), 
    rgba(0, 0, 0, 0.425)
          ),url(../image/arc.jpeg);
          background-size: cover;
    background-repeat: no-repeat;
    background-position: 60%;    
}

.voyager {
    width: 28%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.459), 
        rgba(0, 0, 0, 0.205)
          ),url(../image/voyager.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40%;
    border-radius: 15px;
    transition: 0.8s;
    box-shadow: 4px 4px 4px 4px #e0dbdb;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.voyager:hover{
  background: linear-gradient(
    rgba(0, 0, 0, 0.74), 
    rgba(0, 0, 0, 0.425)
      ),url(../image/voyager.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
}

.cinema {
    width: 28%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.459), 
        rgba(0, 0, 0, 0.205)
          ),url(../image/cinema.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:20%;
    border-radius: 15px;
    transition: 0.8s;
    box-shadow: 4px 4px 4px 4px #e0dbdb;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.cinema:hover{
  background: linear-gradient(
    rgba(0, 0, 0, 0.74), 
    rgba(0, 0, 0, 0.425)
      ),url(../image/cinema.jpeg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 30%;
}


.rallye {
  width: 28%;
  background: linear-gradient(
      rgba(0, 0, 0, 0.459), 
      rgba(0, 0, 0, 0.205)
        ),url(../image/rallye.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 30%;
  border-radius: 15px;
  transition: 0.8s;
  box-shadow: 4px 4px 4px 4px #e0dbdb;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.rallye:hover{
background: linear-gradient(
  rgba(0, 0, 0, 0.74), 
  rgba(0, 0, 0, 0.425)
        ),url(../image/rallye.jpeg);
        background-size: cover;
  background-repeat: no-repeat;
  background-position: 40%;    
}

.marche {
  width: 28%;
  background: linear-gradient(
      rgba(0, 0, 0, 0.459), 
      rgba(0, 0, 0, 0.205)
        ),url(../image/rando.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 15px;
  transition: 0.8s;
  box-shadow: 4px 4px 4px 4px #e0dbdb;
  display: flex;
    flex-direction: column;
    justify-content: end;
}
.marche:hover{
background: linear-gradient(
  rgba(0, 0, 0, 0.74), 
  rgba(0, 0, 0, 0.425)
    ),url(../image/rando.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 60%;
}

.pirate {
  width: 28%;
  background: linear-gradient(
      rgba(0, 0, 0, 0.459), 
      rgba(0, 0, 0, 0.205)
        ),url("../image/pirate.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:80%;
  border-radius: 15px;
  transition: 0.8s;
  box-shadow: 4px 4px 4px 4px #e0dbdb;
  display: flex;
    flex-direction: column;
    justify-content: end;
}

.pirate:hover{
background: linear-gradient(
  rgba(0, 0, 0, 0.74), 
  rgba(0, 0, 0, 0.425)
    ),url(../image/pirate.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 88%;
}


.title_block{
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  margin-left: 3%;
}

.text_block{
  font-size: 18px;
  display: none;
  color: #fff;
  margin-left: 3%;
  transition: 0.8s;
}

.arc:hover .text_block{
  display: inline;
}

.voyager:hover .text_block{
  display: inline;
}

.cinema:hover .text_block{
  display: inline;
}

.rallye:hover .text_block{
  display: inline;
}

.marche:hover .text_block{
  display: inline;
}

.pirate:hover .text_block{
  display: inline;
}