.blog-section { padding-top: 1.4rem; }

.blog-tools {
  display: grid;
  gap: 1.2rem;
  margin: 2rem 0 1.4rem;
  padding: 1.25rem;
  border: var(--bordure-fr);
  background: rgba(255, 255, 255, .2);
}

.blog-search { max-width: 38rem; }
.blog-search label {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--terre);
}

.blog-search input {
  width: 100%;
  min-height: 2.9rem;
  padding: .7rem .85rem;
  border: 1px solid var(--encre-25);
  border-radius: 2px;
  background: var(--papier);
  color: var(--encre);
  font: inherit;
}

.blog-search input:focus {
  outline: 2px solid var(--brique);
  outline-offset: 2px;
}

.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-filter {
  padding: .48rem .75rem;
  border: 1px solid var(--encre-25);
  border-radius: 2px;
  background: transparent;
  color: var(--encre);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  cursor: pointer;
}

.blog-filter:hover { border-color: var(--brique); color: var(--brique); }
.blog-filter.is-active { background: var(--foret); border-color: var(--foret); color: var(--papier); }

.blog-results-head { min-height: 1.6rem; margin-bottom: .7rem; }
.blog-count { margin: 0; color: var(--encre-70); font-size: .88rem; }
.blog-card-meta { color: var(--encre-70); font-family: var(--mono); font-size: .7rem; }
.blog-empty { padding: 3rem 1rem; text-align: center; border-top: var(--bordure-fr); border-bottom: var(--bordure-fr); }
.blog-empty h2 { margin-bottom: .4rem; font-size: 1.35rem; }
.blog-empty p { margin: 0; color: var(--encre-70); }
.blog-more-wrap { display: flex; justify-content: center; padding-top: 2rem; }
.blog-more { border-color: var(--encre-25); color: var(--encre); cursor: pointer; }

.subcard h2 { margin: 0; font-size: 1.26rem; color: var(--encre); }
[data-blog-card][hidden] { display: none; }

@media (max-width: 640px) {
  .blog-tools { margin-top: 1.4rem; padding: 1rem; }
  .blog-filter { flex: 1 0 auto; }
}