/*! CSS Header commun **/

.post-header {
  display:flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.post-header_titre {
  width: 100%;
}

.post-header_titre h2 {
  margin-bottom:25px;
}

.post-header_tags {
  display:flex;
  gap:15px;
}

.post-header_img {
  display: flex;
  align-items: center;
  width:300px;
}

.post-header_img img {
  width: 100%;
  height: 100%;
  max-height:200px;
  object-fit: contain;
  object-position: right;
}

.common-bloc_nextProject {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin:0 0 15px 0;
  padding-bottom:5px;
  border-bottom: 1px #D0D8D7 solid;

  opacity: 0%;
  animation: 1s ease-out 2.25s fade_top-short forwards;
}

.common-bloc_nextProject a {
  text-decoration: none;
}

.common-btns_nextProject {
  display: flex;
  align-items: center;
}

.common-titre_nextProject {
  margin-bottom: 5px;
}

.common-titre_nextProject p:first-child  {
  position: relative;
  overflow: hidden;
  font-family: 'Expletus Sans', cursive;
  font-size: 2rem;
  font-weight: 600;
  color: #502F4C;
  margin:0;

  opacity: 0%;
  animation: 1s ease-out 2.25s fade_top-short forwards;
}

.common-titre_nextProject p:last-child {
  position: relative;
  overflow: hidden;
  font-size: 1.5rem;
  color: #33A699;
  font-style: italic;
  margin:0;

  opacity: 0%;
  animation: 1s ease-out 2.25s fade_top-short forwards;
}

.common-btns_nextProject svg g path:first-child {
  transform: translateX(0%);
  transition: all .7s cubic-bezier(.77,0,.175,1);
}

.common-bloc_nextProject a:hover .common-fleche_previousProject {
  transform: translateX(-20%);
  transition: all .7s cubic-bezier(.77,0,.175,1) .2s;
}

.common-bloc_nextProject a:hover .common-fleche_nextProject {
  transform: translateX(20%);
  transition: all .7s cubic-bezier(.77,0,.175,1) .2s;
}

.common-titre_nextProject p:first-child::after {
  content: "";
  height: 2px;
  width: 100%;
  border-radius: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #502F4C;
  transform: translateX(-120%);
  transition: all .7s cubic-bezier(.77,0,.175,1);
}

.common-bloc_nextProject a:hover p:first-child::after {
  transform: translateX(0%);
  transition: all .7s cubic-bezier(.77,0,.175,1);
}

@media screen and (max-width: 960px) {
  .post-header {
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }

  .post-header_tags {
    /* margin-bottom:25px; */
    overflow-x:scroll;
    scrollbar-width: none;
  }

  .post-header_img {
    /* width:150px; */
    display:none;
  }
  
  /* .post-header_img img {
    max-height:100px;
    object-position: left;
  } */
}

@media screen and (max-width: 550px) {
  .common-bloc_nextProject {
    flex-direction: column;
    align-items: center;
  }

  .common-bloc_nextProject a {
    width:100%;
  }

  .common-btns_nextProject {
    justify-content: center;
  }
}

/*! CSS Contenu VIDEO **/

figure {
  margin:0;
}

figure:hover {
  cursor: pointer;
}

/* .post-contenu {
  margin-top: 50px;
  padding-top:30px;
  border-top: 1px solid #D0D8D7;
} */

.common-bloc_titre span {
  opacity: 0%;
  animation :1s ease-out 2.8s fade_top forwards;
}

.common-bloc_titre img {
  transform: scale(0%);
  animation :1s ease-out 2.8s scale forwards;
}

.common-bloc_titre hr {
  margin: 50px auto 30px auto;
  width:0%;
  border:none;
  border-top: 1px solid #D0D8D7;
  animation :1s ease-out 2.8s widthHr forwards;
}

.post-contenu_video {
  margin:0 auto 75px!important;
  max-width: 75%;
  box-shadow: 0px 0px 6px 0px rgba(1, 49, 52, 0.25);
}


@media screen and (max-width: 960px) {
  .post-contenu_video {
    margin:0 auto 50px;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .post-contenu_video_bloc  {
    flex-direction: column;
  }
}
/*! CSS List des <h4> "MISSIONS effectuées"  **/
.post-contenu_h4 {
  opacity: 0%;
  transform: translate(-50%, 0%);
  animation: 1s ease-out 2.9s fade_left-short forwards;
}

/*! CSS List des <li> MISSIONS **/
  .post-contenu_ul-animation {
    opacity: 0%;
    transform: translate(-50%, 0%);
    animation: 1s ease-out 3.1s fade_left-short forwards;
  }

  .post-contenu_ul {
    padding-bottom: 30px;
    margin: 0 0 50px!important;
    border-bottom : 1px solid #D0D8D7;
  }
  

  .post-contenu_ul li {
    /* list-style-image: url("https://www.systemuicons.com/images/icons/check.svg"); */
    list-style:none;
    margin:0 0 15px 15px!important;
    font-size: 2.3rem!important;
    /* color:#07393C; */
    font-weight: 300;
    font-style: italic;
  }

  .post-contenu_ul li:last-child {
    margin:0 0 0 15px;
  }

  .post-contenu_ul li:before {
    content:url("data:image/svg+xml;charset=UTF-8,<svg height='21' viewBox='0 0 21 21' width='30' xmlns='http://www.w3.org/2000/svg'><path d='m.5 5.5 3 3 8.028-8' fill='none' stroke='green' stroke-linecap='round' stroke-linejoin='round' transform='translate(0 7), scale(1.3)'/></svg>");
  }

  .post-contenu_ul li strong {
    color:#07393C;
    font-weight: 400;
  }

@media screen and (max-width: 768px) { 
  .post-contenu_ul li {
    margin:0 0 15px 0!important;
  }

  .post-contenu_ul li:last-child {
    margin:0;
  }
}

/*! CSS TEMPLATE charte graphique COLOR !*/

.post-contenu_color  {
  width:100%;
}

.post-contenu_color-rond div {
  height:75px;
  width:75px;
  border-radius: 100%;
  margin: auto;
}

@keyframes widthHr {
  0% {  width: 0%; }
  100% {  width: 100%; }
}


/*! CSS Titre H3  **/
.post-contenu_h3 {
  opacity: 0%;
  transform: translate(0%, -50%);
  animation: 1s ease-out 3.2s fade_top-short forwards;
}

/*! CSS Texte p contenu intro MARGIN_BOTTOM !*/
.post-margin_bottom {
  max-width: 1300px;
  margin: 42px auto 100px auto;
  opacity: 0%;
  transform: translate(0%, -50%);
  animation: 1s ease-out 3.5s fade_top-short forwards;
}