.engagements {
  width: 50vw;
  background: var(--color-4);
  color: var(--color-3);
  padding: 1em;
  margin-bottom: 1em;
  left: 0;
}

.contentEngagement {
  text-align: justify;
  margin-bottom: 2em;
}

.contentEngagement ul li {
  list-style-type: disc;
}

.engagements ol li {
  list-style-type: decimal;
}

.certificats {
  right: 0;
  margin-top: 1em;
  width: 50vw;
  background: var(--color-2);
  color: var(--color-3);
  padding: 1em;
}

.listMetiers {
  margin-top: 2em;
}

.metier {
  display: flex;
  flex-direction: row;
  color: #F5F5F5;
  margin-bottom: 2em;
  justify-content: center;

}

.metier ul li {
  list-style-type: disc;
}

.metier ol li {
  list-style-type: decimal;
}



.texte-metier {
  padding: 2em;
  max-width: 40%;
  background: linear-gradient(94.91deg, #004380 0%, #009FA0 100%);
}

.image-metier {
  max-width: 35%;
}

.metier:nth-child(even) .texte-metier {
  order: 2;
  background: linear-gradient(94.91deg, #009FA0 0%, #004380 100%);
}

.listGalerie {
  max-width: 100%;
}

.listGalerie img {
  box-shadow: 3px 3px 5px var(--color-5);
}

.visuIMG {
  width: 15vw;
  height: 15vh;
  align-self: center;
}

.galerieButton {
  display: inline-block;
  background-color: var(--color-2);
  color: #fff;
  padding: 0.8em 1.5em;
  border-radius: 5px;
  text-decoration: none;
  max-width: 8vw;
  text-align: center;
  max-height: 1em;
  align-self: center;
}

/** Slider certificat **/
.slider {
  position: relative;
  width: 100%;
  /* overflow: hidden; */
}

.slides {
  display: flex;
  width: 100%;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  /* text-align: center; */
  /* padding: 20px; */
  color: #fff;
}

.slide p {
  margin-top: 1em;
  font-size: 1em;
}

.prev,
.next {
  /* position: absolute; */
  font-size: 24px;
  color: #fff;
  /* background-color: rgba(0, 0, 0, 0.5); */
  padding: 16px;
  cursor: pointer;
  z-index: 2;
  align-self: center;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

@media screen and (max-width:1200px){
  .certificats .slide{
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .engageCertif {
    flex-direction: column;
  }

  .engagements {
    width: auto;
  }

  .certificats {
    width: auto;
  }

  .metier {
    position: relative;
    padding: 10px;
  }

  .texte-metier {
    position: relative;
    z-index: 1;
    max-width: 100%;
  }

  .texte-metier p {
    width: 100%;
  }

  .image-metier {
    display: none;
  }

  .metier:nth-child(even) .image-metier {
    left: 0;
    clip-path: polygon(0% 0%, 0% 100%, 35% calc(100%), 35% calc(0%));
  }

  .listGalerie {
    flex-direction: column;
    align-items: center;
  }

  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .visuIMG {
    width: 100%;
  }

  .galerieButton {
    max-width: 28vw;
  }
}