@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.box-epreuve {
  margin-left: 2vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  justify-items: center;
}

.sub-epv-text {
  text-align: center;
  font-size: 1.1rem;
  color: #504f4f;
  max-width: 70%;
  margin-top: 0;
  font-weight: 500;
}

.site-test-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  column-gap: 0;
  animation: slideFromTop 0.5s ease-in-out forwards;
}

.epreuve-ville-text {
  text-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
}

.img-epreuve {
  width: 55px;
  height: fit-content;
  border-radius: 50%;
}

.site-epreuve-text {
  font-size: 1.1rem;
  font-weight: 450;
}

.text-epreuve {
  font-size: 1.2rem;
  font-weight: 500;
  margin-left: 10px;
}

/* Add this CSS to your existing stylesheet or in a separate CSS file */
.box-epreuve:hover .box-info {
  display: block;
}

.box-info {
  position: absolute;
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  min-width: 20vw;
  max-width: 40vw;
  min-height: 5vh;
  left: 15vw;
  animation: fadeIn 0.4s ease-in-out;
  border-radius: 7px;
  border: 1px solid rgb(203, 201, 201);
  box-shadow: 0 0 10px;

  /* Adjust the width as needed for desktop */
}

.img-site-epreuve-site {
  width: 60px;
  height: fit-content;
  margin-right: 10px;
  border-radius: 15%;
}

.site-epreuve {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.info-text {
  margin: 0;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .box-epreuve {
    margin-left: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
  }
  .box-info {
    display: none;
    position: fixed;
    top: 35vh; /* Center vertically */
    left: 50vw; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the modal */
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    animation: fadeIn 0.4s ease-in-out;
    width: 80vw; /* Adjust the width as needed for mobile */
    max-width: 100vw; /* Set a maximum width for smaller screens */
    z-index: 1000; /* Ensure it's above other content */
  }

  /* Add this CSS to your existing stylesheet or in a separate CSS file */
  .box-epreuve:focus .box-info {
    display: block;
  }

  .box-epreuve:focus html {
    backdrop-filter: blur(500px);
  }

  .img-epreuve {
    width: 50px;
    height: auto;
    border-radius: 50%;
  }

  .epreuve-ville-text {
    font-size: 1.4rem;
    font-weight: 650;
  }

  .text-epreuve {
    font-size: 1.05rem;
    font-weight: 500;
    margin-left: 10px;
  }

  .img-site-epreuve-site {
    width: 70px;
    height: auto;
    margin-right: 10px;
    border-radius: 15%;
  }
}