/* NO ARTICLE IS SELECTED */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imgTop {
  text-align: center;
  width: 80%;
}
.imgTop img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.titleContentArticles {
  position: relative;
}
.titleContentArticles img {
  width: 100%;
}
.titleContentArticles .textOnImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  width: 100%;
}
.titleContentArticles .textOnImg h1 {
  font-size: 3rem;
}
.titleContentArticles h2 {
  text-align: center;
  padding-top: 5%;
}

.articlesContent {
  /* background-image: url(../img/global/backgroundleft.png); */
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.articlesContent h2 {
  font-size: 1.5rem;
  color: #768698;
}

div {
  word-wrap: break-word;
}

.cardBody hr {
  margin: 5% 0;
}

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 5%;
  padding-top: 0;
}
.cards:first-child {
  padding-top: 100px;
}

.card {
  display: flex;
  flex-direction: column;
  width: 45%;
  padding-bottom: 10%;
  cursor: pointer;
}
.card:hover img {
  opacity: 50%;
}
.card:hover p,
.card:hover h5,
.card:hover hr {
  color: grey;
}
.card img {
  border-radius: 5px;
  width: 100%;
  height: 500px;
  object-fit: cover;
}
.card .cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* WHEN ARTICLE IS SELECTED */
.navArticle {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}
.navArticle h2 {
  color: #768698;
}
.navArticle div {
  min-width: 20%;
  text-align: center;
}
.navArticle span {
  min-width: 20%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.previousArticle span {
  min-width: 40%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.previousArticle a {
  color: #c28788;
  text-decoration: none;
}
.previousArticle a:visited {
  text-decoration: none;
  color: #c28788;
}
.previousArticle svg {
  fill: #c28788;
  color: #c28788;
}

.headArticleDetail {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bottomArticle {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 5% 0;
}
.bottomArticle p {
  font-weight: bolder;
}

.cardArticle {
  display: flex;
  width: 80%;
  margin: auto;
  margin-top: 50px;
  border-radius: 0.25rem;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card__cover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card__cover .retourDiv {
  display: flex;
  align-items: center;
}
.card__cover a {
  text-decoration: none;
  font-size: x-large;
  color: #c28788;
}
.card__cover img {
  max-width: 100%;
  min-width: 100%;
  height: auto;
}

.card__content {
  padding: 0 1.5rem;
  min-width: 100%;
}
.card__content p,
.card__content ul,
.card__content ol,
.card__content li,
.card__content span {
  font-size: 14px !important;
}
.card__content h2 {
  color: #c28788;
}
.card__content h5 {
  text-align: center;
  padding-bottom: 1.5rem;
}

.buttonDiv {
  text-align: center;
}
.buttonDiv:first-child {
  padding: 100px;
}

.buttonDiv2 {
  padding-bottom: 50px;
}

.relatedArticleBloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.relatedArticleBloc h2 {
  color: #768698;
}
.relatedArticleBloc .relatedArticle {
  display: flex;
  width: 80%;
  min-height: 40vh;
  justify-content: space-around;
  position: relative;
  margin-bottom: 5%;
}
.relatedArticleBloc .relatedArticle .relatedArticleItemImg {
  height: 200px;
  width: 100%;
  height: 200px;
}
.relatedArticleBloc .relatedArticle .relatedArticleItemImg img {
  border-radius: 5px;
  width: 100%;
  object-fit: cover;
  height: 200px;
}
.relatedArticleBloc .relatedArticle .relatedArticleItemHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.relatedArticleBloc .relatedArticle .relatedArticleItemHeader h3 {
  color: #768698;
}
.relatedArticleBloc .relatedArticle .backgroundRelatedArticles {
  z-index: -1;
  position: absolute;
  min-height: 30vh;
  background-color: #F3EEE4;
  width: 100%;
  bottom: 0;
  border-radius: 10px;
}
.relatedArticleBloc .relatedArticle .relatedArticleItem {
  display: flex;
  flex-direction: column;
  width: 25%;
  align-items: center;
  justify-content: flex-start;
}
.relatedArticleBloc .relatedArticle .relatedArticleItem:hover {
  cursor: pointer;
}
.relatedArticleBloc .relatedArticle .relatedArticleItem:hover img {
  opacity: 80%;
}
.relatedArticleBloc .relatedArticle .relatedArticleItem .relatedArticleItemText {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 15px 0;
}
.relatedArticleBloc .relatedArticle .relatedArticleItem .relatedArticleItemText hr {
  margin: 15px 0;
}

@media (max-width: 800px) {
  .card {
    max-width: 80%;
    min-width: 80%;
    margin: 2% 0 !important;
    flex-direction: column;
  }

  .navArticle {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .navArticle span {
    padding-bottom: 5%;
  }
  .navArticle div {
    display: flex;
  }
  .navArticle hr {
    display: none;
  }

  .cardLeft {
    flex: 0 1 auto;
    max-width: 100%;
  }
  .cardLeft img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .cardRight {
    flex: 0 0 auto;
  }

  .cardArticle {
    width: 80%;
    flex-direction: column;
  }
}
/* SMALL SCREEN */
@media only screen and (max-width: 600px) {
  .navArticle div {
    justify-content: center;
  }

  .articlesContent {
    background-image: none;
  }
  .articlesContent .searchBar {
    margin-bottom: 15%;
  }

  .cards {
    flex-direction: column;
    align-items: center;
  }
  .cards .card img {
    max-height: 200px;
  }

  .relatedArticleBloc h2 {
    margin: 15% 0;
  }
  .relatedArticleBloc .relatedArticle {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .relatedArticleBloc .relatedArticle .relatedArticleItem {
    width: 100%;
  }
  .relatedArticleBloc .relatedArticle .relatedArticleItem .relatedArticleItemText {
    padding: 20% 0;
    width: 60%;
  }
  .relatedArticleBloc .relatedArticle .relatedArticleItem .relatedArticleItemHeader,
.relatedArticleBloc .relatedArticle .relatedArticleItem .relatedArticleItemContent {
    justify-content: space-around;
  }
  .relatedArticleBloc .relatedArticle .backgroundRelatedArticles {
    min-height: 100%;
    width: 80%;
    bottom: 1%;
  }
}

/*# sourceMappingURL=articles.css.map */