/***********************SECTION THEMATIQUE**********************/
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-overlay img {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: opacity 0.8s ease-in-out;
  animation: none;
  /* Par défaut, aucune animation */
}

.image-overlay:hover img {
  animation: tiltZoom 4s ease-in-out infinite;
  -webkit-animation: tiltZoom 4s ease-in-out infinite;
}

/* Animation avec zoom et inclinaison */
@keyframes tiltZoom {
  0% {
    transform: scale(1) rotate(0deg);
    /* Position initiale */
  }

  50% {
    transform: scale(1.1) rotate(3deg);
    /* Zoom et inclinaison */
  }

  100% {
    transform: scale(1) rotate(0deg);
    /* Retour à la position initiale */
  }
}

.thematique {
  background-image: url(../img/theme/baobab-fili.png);
  background-repeat: no-repeat;

}

.card-thematique {
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 360px;
  align-items: flex-start;
  gap: 10px;
  padding: 200px 0px 0px;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
  transition: transform 1s ease-in-out;
  -webkit-transition: transform 1s ease-in-out;
  -moz-transition: transform 1s ease-in-out;
  -ms-transition: transform 1s ease-in-out;
  -o-transition: transform 1s ease-in-out;
}


.card-thematique .thematique-content {
  display: flex;
  flex-direction: column;
  height: 160px;
  align-items: flex-start;
  padding: 70px 24px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background: linear-gradient(180deg, rgba(7, 11, 27, 0) 0%, rgb(7.04, 11.34, 26.61) 100%);
}

.card-thematique .thematique-titre {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Poppins", Helvetica;
  font-weight: 700;
  color: var(--blanctexte);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 28px;
  text-align: left;
}

.card-thematique .thematique-details {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: -26px;
  margin-right: -9px;
}

.card-thematique .picto-map-thematique {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 13px;
  left: 0;
}

.card-thematique .thematique-ville {
  position: absolute;
  width: 239px;
  height: 24px;
  top: 12px;
  left: 31px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: var(--blanctexte);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  text-indent: 0!important;
}

.card-thematique .picto-CTA-thematique {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -5px;
  left: 271px;
  transition: transform 0.5s ease-in-out;
  /* Transition fluide */
}

.card-thematique .picto-CTA-thematique:hover {
  transform: rotate(360deg);
  /* Rotation complète */
}


@media screen and (max-width: 375px) {
  /* .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: 98% !important;
  } */

  .card-thematique {
    width: 100% !important;
  }

  .card-thematique .thematique-content {
    padding: 70px 8px 40px !important;
  }
}

@media screen and (max-width: 400px) {
  .card-thematique {
    width: 100% !important;
  }

  .card-thematique .thematique-content {
    padding: 70px 14px 40px !important;
  }
}