@charset "UTF-8";
/*
@import 'responsive';

.element {
  // Styles par défaut

  @include mobile {
    // Styles spécifiques pour mobile
    font-size: 14px;
    padding: 10px;
  }
}
 */
/*
@import 'responsive';

.element {
  // Styles par défaut

  @include tablet {
    // Styles spécifiques pour tablette
    font-size: 16px;
    padding: 15px;
  }
}
 */
/*
@import 'responsive';

.element {
  // Styles par défaut

  @include breakpoint(768px, 1200px) {
    // Styles pour les écrans entre 768px et 1200px
    font-size: 17px;
    padding: 18px;
  }
}
 */
/*
@import 'responsive';

.element {
  // Styles par défaut

  @include mobile {
    // Styles spécifiques pour mobile
    font-size: 14px;
    padding: 10px;
  }
}
 */
/*
@import 'responsive';

.element {
  // Styles par défaut

  @include tablet {
    // Styles spécifiques pour tablette
    font-size: 16px;
    padding: 15px;
  }
}
 */
/*
@import 'responsive';

.element {
  // Styles par défaut

  @include breakpoint(768px, 1200px) {
    // Styles pour les écrans entre 768px et 1200px
    font-size: 17px;
    padding: 18px;
  }
}
 */
.bloc-blog-all-posts-container {
  margin: 0 0 150px 0;
}

.bloc-blog-all-posts-title {
  text-align: center;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  margin-bottom: 50px;
}

.bloc-blog-all-posts-posts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 50px 40px;
  /* 40px est l'espace horizontal entre les éléments */
}

.bloc-blog-all-posts-posts .bloc-blog-post-slider {
  width: calc(33.33% - 33.33px);
  /* 
    Explication du calcul:
    - On veut 3 colonnes donc chaque élément fait 33.33% de large
    - Il y a 2 espaces de 40px entre les 3 colonnes, soit 80px au total
    - 80px ÷ 3 = 26.67px à soustraire par élément
    - On arrondit à 33.33px pour avoir une largeur totale exacte de 100%
    */
}

@media (max-width: 580px) {
  .bloc-blog-all-posts-posts .bloc-blog-post-slider {
    width: 100% !important;
    margin-bottom: 30px !important;
  }
}

.bloc-blog-all-posts-load-more {
  text-align: center;
  margin-top: 75px;
}

.btnLoadMorePosts {
  color: #000;
  text-decoration: underline;
}

.btnLoadMorePosts.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.bloc-blog-all-posts-end-msg {
  color: #888;
  font-size: 1.1em;
  margin-top: 1.5em;
  text-align: center;
}
/*# sourceMappingURL=bloc-all-posts.css.map */