/* Block */
.navigation {
  left: calc(50% - 31px)
}

.header {
  margin-top: 40px;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
}

.hero {
  padding: 0 8vw;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero .cta svg {
  transform: scaleX(-100%);
}

.hero_ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
}

.hero_presentation {
  display: flex;
  gap: 30px;
}

.hero_leftside, .hero_rightside {
  width: 50%;
}

.hero_leftside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  aspect-ratio: 0.88 / 1;
}

.hero_rightside {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hero_globalinfo, .hero_detailsinfo {
  padding: 50px 45px;
  background-color: #F4F4F4;
  border-radius: 20px;
}

.hero_date {
  color: #3345E5;
  line-height: 110%;
  margin-bottom: 10px;
  font-size: 16px;
}

.hero_title {
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 10px;
}

.hero_title svg {
  height: 35px;
  width: 35px;
  transform: translateY(5px);
}

.hero_description {
  font-size: 16px;
}

.hero_detailsinfo {
  height: 100%;
}

.hero_subtitle {
  font-weight: 350;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.hero_subtitle span {
  width: 30px;
  height: 1px;
  background-color: #0E0E0E;
  display: block;
}

.hero_subdescription, .hero_subdescription strong {
  color: #616161;
  font-size: 16px;
  margin-bottom: 40px;
}

.hero_mission {
  color: #3345E5;
  font-size: 16px;
  margin-bottom: 15px;
  display: block;
}

img.separator {
  width: 84vw;
  height: auto;
  margin: 30px 8vw;
  border-radius: 20px;
  aspect-ratio: 1.8 / 1;
  object-fit: cover;
}

.projet_info {
  display: flex;
  flex-direction: column;
  margin: 0 8vw;
}

.info_title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 30px;
  margin-bottom: 15px;
}

.info_description {
  line-height: 130%;
  font-size: 16px;
  max-width: 75%;
  margin-bottom: 60px;
}

.projet_info .info_imgs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.projet_info .info_imgs img {
  height: 475px;
  object-fit: cover;
  border-radius: 20px;
}

.projet_info.equal2 .info_imgs img {
  width: calc(50% - 15px);
  aspect-ratio: 1.25 / 1;
}

.projet_info.largeleft2 .info_imgs img:nth-child(1) {
  width: calc(60% - 15px);
}

.projet_info.largeleft2 .info_imgs img:nth-child(2) {
  width: calc(40% - 15px);
}

.projet_info.largeright2 .info_imgs img:nth-child(1) {
  width: calc(40% - 15px);
}

.projet_info.largeright2 .info_imgs img:nth-child(2) {
  width: calc(60% - 15px);
}

.projet_info.big3 .info_imgs img {
  width: calc(33% - 20px);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  padding: 30px 4vw;
  background-color: rgba(84, 84, 84, 0.1);
}

.footer span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (width <= 1080px)  {
  .hero_presentation {
    flex-direction: column;
  }

  .hero_leftside, .hero_rightside {
    width: 100%;
  }

  .info_description {
    max-width: 85%;
  }
}

@media (width <= 830px)  {
  .navigation {
    bottom: inherit;
    top: 0;
    padding-top: 20px;
    padding-bottom: 0;
    transform: scale(0.8) translateY(-50px);
  }

  .projet_info .info_imgs img {
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
  }

  .header {
    flex-direction: column;
  }

  .header a {
    position: fixed;
    bottom: 20px;
    z-index: 99;
  }
}

@media (width <= 720px)  {
.footer {
    flex-direction: column;
    gap: 15px;
    padding-bottom: 80px;
  }

  .footer span {
    flex-direction: column;
  }
}

@media (width <= 600px)  {
  .hero {
    padding: 0 6vw;
  }

  .hero_ctas {
    flex-direction: column;
    gap: 10px;
  }

  .hero_ctas .cta {
    width: 100%;
  }

  .hero_presentation {
    gap: 10px;
  }

  .hero_rightside {
    gap: 10px;
  }

  .hero_globalinfo, .hero_detailsinfo {
    padding: 35px 30px;
  }

  .hero_description, .hero_subdescription strong,  .hero_detailsinfo * {
    font-size: 14px;
  }

  .hero_leftside img {
    aspect-ratio: 1/0.8;
  }

  img.separator {
    width: 88vw;
    margin: 30px 6vw;
    margin-bottom: 5px;
  }

  .projet_info {
    margin: 0 6vw;
  }

  .info_title {
    margin-top: 20px;
    font-size: 16px;
  }

  .info_description {
    max-width: 100%;
    margin-bottom: 30px;
    font-size: 14px;
  }

  .projet_info .info_imgs {
    gap: 10px;
    margin-bottom: 10px;
    flex-direction: column;
  }

  .projet_info.equal2 .info_imgs img, .projet_info.largeleft2 .info_imgs img:nth-child(1), .projet_info.largeleft2 .info_imgs img:nth-child(2), .projet_info.largeright2 .info_imgs img:nth-child(1), .projet_info.largeright2 .info_imgs img:nth-child(2) {
    width: 100%;
    height: auto;
    aspect-ratio: 1.25 / 1;
  }

  .projet_info.big3 .info_imgs {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .projet_info.big3 .info_imgs img:nth-child(3), .projet_info.big3 .info_imgs img:nth-child(1), .projet_info.big3 .info_imgs img:nth-child(2) {
    width: 100%;
  }
}