/* Extrait automatiquement de main.css lignes 2011-2160 — BLOG — PAGE LISTING */
/* =============================================
   BLOG — PAGE LISTING
   ============================================= */

/* Hero */
.blog-header { background: var(--creme); padding: 5rem 0 4rem; border-bottom: 1px solid var(--border); }
.blog-header__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }

.blog-header__label {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.blog-header__label::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--gris);
}

.blog-header__title {
  font-family: var(--font-titre);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.blog-header__muted { color: var(--noir); font-style: italic; }

.blog-header__right {
  font-size: 1rem;
  color: var(--gris);
  line-height: 1.82;
  border-left: 1px solid var(--border);
  padding-left: 4rem;
}

/* Filtres */
.blog-filters { padding: 1.5rem 0; border-bottom: 1px solid var(--border); background: var(--creme); }
.blog-filters__inner { display: flex; gap: .6rem; flex-wrap: wrap; }

.blog-filter {
  background: transparent;
  border: 1px solid var(--noir);
  color: var(--noir);
  padding: .45rem 1.1rem;
  font-family: var(--font-corps);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1.4;
}
.blog-filter.active,
.blog-filter:hover { background: var(--noir); color: var(--creme); }

/* Grille */
.blog-posts { padding: 4rem 0 6rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
.blog-empty { text-align: center; padding: 4rem 0; color: var(--gris); }

/* Carte article */
.post-card[hidden] { display: none; }

.post-card a { display: block; color: inherit; }

.post-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--creme-2);
}
.post-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card[data-categorie="L'immo pour de vrai"] .post-card__img img { object-position: bottom; }
.post-card__img .post-card__macaron {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30%;
  height: auto;
  object-fit: unset;
  pointer-events: none;
  z-index: 2;
}

.post-card__body { padding: 0 .1rem; }

.post-card__meta {
  font-size: .72rem;
  color: var(--gris);
  letter-spacing: .04em;
  margin-bottom: .55rem;
  display: flex;
  gap: .5rem;
  align-items: center;
}
.post-card__cat::before { content: '·'; margin-right: .5rem; }

.post-card__title {
  font-family: var(--font-card);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.2;
  margin-bottom: .9rem;
  transition: color var(--transition);
}
.post-card:hover .post-card__title { color: var(--rouge); }

.post-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .5rem;
  margin-top: auto;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--noir);
  position: relative;
}
.post-card__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 0 center;
  transition: transform .3s ease;
}
.post-card a:hover .post-card__link::after { transform: scaleX(0.4); }
.post-card a:hover .post-card__link svg { color: var(--rouge); }