/**

 * L'Atelier de la Source – Styles blog

 * Reproduit l'apparence de latelierdelasource.com/nos-articles/

 * Fichier : /wp-content/themes/Divi-Community/assets/blog.css

 */



/* ══════════════════════════════════════════════════════════════

   GRILLE DES ARTICLES

   La classe .articles-liste-sobre est appliquée sur le module

   Divi Blog de la page /notre-blog/

══════════════════════════════════════════════════════════════ */



/* Conteneur principal : grille 3 colonnes */

.articles-liste-sobre .et_pb_ajax_pagination_container {

  display              : grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap                  : 30px !important;

  padding              : 0 !important;

}



/* ── Carte article ───────────────────────────────────────────── */

.articles-liste-sobre .et_pb_post {

  background   : #ffffff !important;

  border       : 1px solid #d8d8d8 !important;

  border-radius: 10px !important;

  box-shadow   : 6px 6px 18px rgba(0,0,0,.12) !important;

  overflow     : hidden !important;

  padding      : 0 !important;

  margin       : 0 !important;

  width        : 100% !important;

  float        : none !important;

  display      : flex !important;

  flex-direction: column !important;

  transition   : transform .3s ease, box-shadow .3s ease !important;

}



.articles-liste-sobre .et_pb_post:hover {

  transform : translateY(-4px) !important;

  box-shadow: 8px 12px 28px rgba(0,0,0,.18) !important;

}



/* ── Image featured ──────────────────────────────────────────── */

.articles-liste-sobre .entry-featured-image-url {

  display  : block !important;

  overflow : hidden !important;

  position : relative !important;

  width    : 100% !important;

  aspect-ratio: 16 / 10 !important;

  flex-shrink: 0 !important;

}



.articles-liste-sobre .entry-featured-image-url img {

  width     : 100% !important;

  height    : 100% !important;

  object-fit: cover !important;

  object-position: center !important;

  display   : block !important;

  transition: transform .4s ease !important;

}



.articles-liste-sobre .et_pb_post:hover .entry-featured-image-url img {

  transform: scale(1.04) !important;

}



/* ── Overlay hover sur l'image ───────────────────────────────── */

.articles-liste-sobre .entry-featured-image-url::after {

  content    : '';

  position   : absolute;

  inset      : 0;

  background : rgba(35, 94, 117, 0);

  transition : background .3s ease;

}

.articles-liste-sobre .et_pb_post:hover .entry-featured-image-url::after {

  background : rgba(35, 94, 117, 0.15);

}



/* ── Corps de la carte ───────────────────────────────────────── */

.articles-liste-sobre .et_pb_post .et_pb_post_meta_wrapper,

.articles-liste-sobre .et_pb_post > *:not(.entry-featured-image-url) {

  padding-left : 20px !important;

  padding-right: 20px !important;

}



/* ── Titre ───────────────────────────────────────────────────── */

.articles-liste-sobre .et_pb_post .entry-title {

  font-size    : 17px !important;

  font-weight  : 700 !important;

  line-height  : 1.35 !important;

  margin       : 16px 20px 8px !important;

  padding      : 0 !important;

}



.articles-liste-sobre .et_pb_post .entry-title a {

  color          : #235e75 !important;

  text-decoration: none !important;

  transition     : color .2s !important;

}



.articles-liste-sobre .et_pb_post .entry-title a:hover {

  color: #449aae !important;

}



/* ── Meta (date, catégorie) ──────────────────────────────────── */

.articles-liste-sobre .et_pb_post .post-meta {

  font-size    : 11px !important;

  color        : #999 !important;

  margin       : 0 20px 10px !important;

  padding      : 0 !important;

  letter-spacing: .04em !important;

  text-transform: uppercase !important;

}



.articles-liste-sobre .et_pb_post .post-meta a {

  color: #449aae !important;

  text-decoration: none !important;

}



/* ── Extrait ─────────────────────────────────────────────────── */

.articles-liste-sobre .et_pb_post .post-content {

  font-size  : 13.5px !important;

  color      : #555 !important;

  line-height: 1.65 !important;

  margin     : 0 20px 16px !important;

  padding    : 0 !important;

  flex       : 1 !important;

}



.articles-liste-sobre .et_pb_post .post-content p {

  margin: 0 !important;

}



/* ── Bouton "Lire plus" ──────────────────────────────────────── */

.articles-liste-sobre .et_pb_post .more-link,

.articles-liste-sobre .et_pb_post .et_pb_more_button {

  display      : inline-flex !important;

  align-items  : center !important;

  gap          : 6px !important;

  margin       : 0 20px 20px !important;

  padding      : 9px 18px !important;

  background   : #449aae !important;

  color        : #fff !important;

  font-size    : 12px !important;

  font-weight  : 700 !important;

  letter-spacing: .06em !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  border-radius: 6px !important;

  transition   : background .2s !important;

  align-self   : flex-start !important;

}



.articles-liste-sobre .et_pb_post .more-link:hover,

.articles-liste-sobre .et_pb_post .et_pb_more_button:hover {

  background: #235e75 !important;

  color     : #fff !important;

}



/* Masquer la flèche Divi native après le bouton */

.articles-liste-sobre .et_pb_post .et_pb_more_button::after {

  display: none !important;

}



/* ── Pagination ──────────────────────────────────────────────── */

.articles-liste-sobre .et_pb_posts_nav {

  grid-column: 1 / -1 !important;

  text-align : center !important;

  padding    : 20px 0 10px !important;

}



/* ══════════════════════════════════════════════════════════════

   RESPONSIVE

══════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

  .articles-liste-sobre .et_pb_ajax_pagination_container {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 20px !important;

  }

}



@media (max-width: 600px) {

  .articles-liste-sobre .et_pb_ajax_pagination_container {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

}