.elementor-1302 .elementor-element.elementor-element-fae0e31{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-1302 .elementor-element.elementor-element-6317f1bf{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-1302 .elementor-element.elementor-element-2b3515ce{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 200px 0px 200px;text-align:left;}.elementor-1302 .elementor-element.elementor-element-2b3515ce .entry-title a{font-size:18px;}@media(max-width:767px){.elementor-1302 .elementor-element.elementor-element-2b3515ce{margin:0px 10px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;padding:0px 0px 0px 0px;}}/* Start custom CSS for aux_recent_posts, class: .elementor-element-2b3515ce *//*
  ComApo — Listing blog Phlox / Auxin
  Widget : Grid & Carousel Posts (aux_recent_posts)

  POURQUOI ÇA NE MARCHAIT PAS
  - L’ancien CSS exigeait la classe .lb-blog-listing (souvent oubliée)
  - Il ciblaient Elementor Posts / Happy Addons, pas Auxin
  - Markup réel : .column-entry, .aux-read-more-text, etc.

  INSTALLATION (choisir 1 méthode)
  A) Apparence → Personnaliser → CSS additionnel : coller TOUT ce fichier
  B) Widget → Avancé → CSS personnalisé : coller la version « .elementor-1302 .elementor-element.elementor-element-2b3515ce »
     (voir commentaires en bas) OU coller ce fichier tel quel (méthode A plus simple)

  READ MORE
  Le widget Auxin n’a PAS de champ texte : seulement Read More / Auteur / Aucun.
  Le français « Lire l’article » est forcé en CSS ci-dessous.
*/

/* ═══════════════════════════════════════════
   Scope : widget Auxin (pas besoin de classe extra)
═══════════════════════════════════════════ */
.elementor-widget-aux_recent_posts,
.lb-blog-listing {
  --lb-gold: #E6D800;
  --lb-gold-dark: #B89E00;
  --lb-navy: #0A0A0A;
  --lb-bg: #FAF9F2;
  --lb-border: #EAE8DC;
  --lb-muted: #6B6B70;
  --lb-shadow: 0 8px 28px rgba(10, 10, 10, 0.08);
  --lb-shadow-hover: 0 16px 40px rgba(10, 10, 10, 0.14);
  --lb-r: 16px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.elementor-widget-aux_recent_posts .aux-row,
.lb-blog-listing .aux-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 1.5rem 0 !important;
  justify-content: flex-start !important;
}

/* Colonnes : s’étirent pour égaliser la hauteur des cartes */
.elementor-widget-aux_recent_posts .aux-col,
.lb-blog-listing .aux-col {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}

/* 1 seul article : plus de carte coincée à 25 % à gauche */
.elementor-widget-aux_recent_posts .aux-row.aux-total-1 .aux-col,
.elementor-widget-aux_recent_posts .aux-row:has(> .aux-col:only-child) .aux-col {
  width: 100% !important;
  max-width: 420px !important;
  flex: 0 0 auto !important;
}

/* 2 articles : cartes plus lisibles */
.elementor-widget-aux_recent_posts .aux-row.aux-total-2 .aux-col {
  width: 50% !important;
  max-width: 420px !important;
}

.elementor-widget-aux_recent_posts .widget-container,
.elementor-widget-aux_recent_posts .aux-widget-recent-posts {
  padding-top: 1.75rem !important;
  padding-bottom: 2.5rem !important;
}

/* Carte */
.elementor-widget-aux_recent_posts .column-entry,
.lb-blog-listing .column-entry {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background: #fff !important;
  border: 1px solid var(--lb-border) !important;
  border-radius: var(--lb-r) !important;
  overflow: hidden !important;
  box-shadow: var(--lb-shadow) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.elementor-widget-aux_recent_posts .aux-col:hover .column-entry,
.lb-blog-listing .aux-col:hover .column-entry {
  transform: translateY(-4px);
  box-shadow: var(--lb-shadow-hover) !important;
  border-color: rgba(230, 216, 0, 0.55) !important;
}

/* Image (force 16:9 même si le widget sort du 370×370) */
.elementor-widget-aux_recent_posts .entry-media,
.lb-blog-listing .entry-media {
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--lb-bg);
}

.elementor-widget-aux_recent_posts .aux-media-image,
.elementor-widget-aux_recent_posts .entry-media a,
.lb-blog-listing .aux-media-image,
.lb-blog-listing .entry-media a {
  display: block !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.elementor-widget-aux_recent_posts .entry-media img,
.lb-blog-listing .entry-media img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Corps texte */
.elementor-widget-aux_recent_posts .entry-main,
.lb-blog-listing .entry-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 1.25rem 1.35rem 1.4rem !important;
  text-align: left !important;
  background: #fff !important;
}

.elementor-widget-aux_recent_posts .entry-header,
.lb-blog-listing .entry-header {
  margin: 0 0 0.65rem !important;
}

.elementor-widget-aux_recent_posts .entry-title,
.lb-blog-listing .entry-title {
  margin: 0 !important;
  min-height: calc(1.3em * 2) !important;
}

.elementor-widget-aux_recent_posts .entry-title a,
.lb-blog-listing .entry-title a {
  margin: 0 !important;
  font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  color: var(--lb-navy) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden !important;
}

.elementor-widget-aux_recent_posts .entry-title a:hover,
.lb-blog-listing .entry-title a:hover {
  color: var(--lb-gold-dark) !important;
}

.elementor-widget-aux_recent_posts .entry-format,
.lb-blog-listing .entry-format {
  display: none !important;
}

.elementor-widget-aux_recent_posts .entry-content,
.lb-blog-listing .entry-content {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-height: calc(1.65em * 3) !important;
}

.elementor-widget-aux_recent_posts .entry-content p,
.lb-blog-listing .entry-content p {
  margin: 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  color: var(--lb-muted) !important;
  text-align: justify !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden !important;
}

.elementor-widget-aux_recent_posts .entry-meta,
.lb-blog-listing .entry-meta {
  margin-top: auto !important;
  padding-top: 1rem !important;
  border: none !important;
  flex-shrink: 0 !important;
}

/* Bouton Lire l’article (remplace “Read More”) */
.elementor-widget-aux_recent_posts .aux-read-more,
.lb-blog-listing .aux-read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 1.15rem !important;
  font-size: 0 !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: var(--lb-navy) !important;
  background: var(--lb-gold) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(230, 216, 0, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.elementor-widget-aux_recent_posts .aux-read-more:hover,
.lb-blog-listing .aux-read-more:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(230, 216, 0, 0.38) !important;
  color: var(--lb-navy) !important;
}

.elementor-widget-aux_recent_posts .aux-read-more-text,
.lb-blog-listing .aux-read-more-text {
  font-size: 0 !important;
  color: transparent !important;
}

.elementor-widget-aux_recent_posts .aux-read-more-text::after,
.lb-blog-listing .aux-read-more-text::after {
  content: "Lire l'article";
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--lb-navy) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 767px) {
  .elementor-widget-aux_recent_posts .entry-main,
  .lb-blog-listing .entry-main {
    padding: 1.1rem 1.1rem 1.25rem !important;
  }

  .elementor-widget-aux_recent_posts .aux-col:hover .column-entry,
  .lb-blog-listing .aux-col:hover .column-entry {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-aux_recent_posts .column-entry,
  .elementor-widget-aux_recent_posts .aux-read-more {
    transition: none !important;
  }
}

/*
  Si tu colles dans CSS personnalisé DU WIDGET Elementor,
  remplace .elementor-widget-aux_recent_posts par .elementor-1302 .elementor-element.elementor-element-2b3515ce, ex. :

  .elementor-1302 .elementor-element.elementor-element-2b3515ce .column-entry { ... }
  .elementor-1302 .elementor-element.elementor-element-2b3515ce .aux-read-more-text::after { content: "Lire l'article"; ... }

  Sinon, méthode A (CSS additionnel du site) = plus simple, tout ce fichier.
*//* End custom CSS */