/***********************SECTION REGIONS**********************/

.section-region {
  background-image: url(../img/filivao1.svg);
  background-position: 0% center, center, center;
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  padding-bottom: 30px;
  margin-top: 100px;
}

#regions-container {
  display: grid;
  grid-template-columns: repeat(3, 360px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin: 20px auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 1120px;
}

@keyframes fadeIn {
  from {
    opacity: 0.2;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fadeIn {
  animation: fadeIn ease-in 1s;
}

.region-ouest {
  grid-area: 1 / 1 / 2 / 2;
}

.region-nord {
  grid-area: 2 / 1 / 3 / 2;
}

.region-hauteterre {
  grid-area: 1 / 2 / 3 / 3;
}

.region-sud {
  grid-area: 1 / 3 / 2 / 4;
}

.region-est {
  grid-area: 2 / 3 / 3 / 4;
}

/***********************************DEBUT MEDIA QUERIE******************************/
@media screen and (max-width: 375px) {
  #regions-container {
    display: block;
  }

  .region-ouest,
  .region-sud,
  .region-hauteterre,
  .region-nord,
  .region-est {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
  }

  .card-hauteterre {
    height: 360px !important;
    background-image: url('<?= URL ?>public/assets/img/regions/hauteterre_mada360.png') !important;
  }

  .card-hauteterre img:first-child {
    display: none;
  }
}

@media screen and (min-width: 376px) and (max-width: 768px) {

  #regions-container {
    display: block;
  }

  .region-ouest,
  .region-sud,
  .region-hauteterre,
  .region-nord,
  .region-est {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
  }

  .card-hauteterre {
    height: 360px !important;
    background-image: url('<?= URL ?>public/assets/img/regions/hauteterre_mada360.png') !important;
  }

  .card-hauteterre img:first-child {
    display: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 1119px) {
  #regions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 10px;

  }

  .region-ouest,
  .region-hauteterre,
  .region-nord {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

  }

  .region-est {
    position: relative;
    top: -380px;
    left: 190px;
  }
}

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

.image-overlay img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s, opacity 0.4s;
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
}

.image-overlay:hover img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.card-nord .nord-content,
.card-sud .sud-content,
.card-ouest .ouest-content,
.card-est .est-content {
  display: flex;
  flex-direction: column;
  height: 160px;
  align-items: flex-start;
  padding: 30px 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-nord .nord-titre,
.card-sud .sud-titre,
.card-ouest .ouest-titre,
.card-est .est-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-nord .nord-details,
.card-sud .sud-details,
.card-ouest .ouest-details,
.card-est .est-details {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: -26px;
  margin-right: -9px;
}

.card-nord .picto-map,
.card-sud .picto-map,
.card-ouest .picto-map,
.card-est .picto-map,
.card-hauteterre .picto-map {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 13px;
  left: 0;
}

.card-nord .details-ville,
.card-sud .details-ville,
.card-ouest .details-ville,
.card-est .details-ville,
.card-hauteterre .details-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-nord .picto-CTA,
.card-sud .picto-CTA,
.card-ouest .picto-CTA,
.card-est .picto-CTA,
.card-hauteterre .picto-CTA {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -5px;
  left: 271px;
  transition: transform 0.5s ease-in-out;
  /* Transition fluide */
}

.card-nord .picto-CTA:hover,
.card-sud .picto-CTA:hover,
.card-ouest .picto-CTA:hover,
.card-est .picto-CTA:hover,
.card-hauteterre .picto-CTA:hover {
  transform: rotate(360deg);
  /* Rotation complète */
}


/********************** LISTE REGION DE MADAGASCAR*************************/
.card-nord,
.card-est,
.card-nord,
.card-ouest,
.card-sud {
  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;
}

/********************** HAUTE TERRE EXCEPTION*************************/
.card-hauteterre {
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 740px;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
}

.card-hauteterre .hauteterre-content {
  display: flex;
  flex-direction: column;
  height: 740px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 36px 24px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background: linear-gradient(180deg, rgba(7, 11, 27, 0) 0%, rgba(7, 11, 50, 0.627) 100%);
  
}

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

.card-hauteterre .hauteterre-details {
  position: relative;
  height: 66px;
  margin-right: -9px;
}