/* ============================================================
   AVENUE BELMONT — CHRONIQUES (archive.php)
   Index du blog + archives de catégorie.
   ============================================================ */

/* ── En-tête ── */
.ab-archive__header {
  text-align: center;
}
.ab-archive__header h1 {
  /* Pleine largeur (.container, pas .container--narrow) : le clamp est
     recalculé pour tenir sur une seule ligne à toutes les largeurs, y
     compris sur mobile où le conteneur reprend toute la largeur d'écran.
     Le plancher est volontairement bas (0.95rem) : sur les tout petits
     écrans (≤360px), c'est le vw qui fait le travail, pas le plancher. */
  font-size: clamp(0.95rem, 4.5vw, 3.2rem);
  white-space: nowrap;
  margin-bottom: 0;
}
.ab-archive__desc {
  max-width: 560px;
  margin: var(--space-4) auto 0;
  color: var(--color-text-muted);
}
/* Rapproche les tags de catégorie du titre : on réduit uniquement le
   padding bas de l'en-tête (le haut reste inchangé, sous le header fixe). */
.ab-archive__header.section--sm {
  padding-bottom: clamp(var(--space-3), 2vw, var(--space-5));
}

/* ── Filtres par catégorie ── */
.ab-archive__filters {
  border-top: 1px solid var(--color-grey-200, #eee);
  border-bottom: 1px solid var(--color-grey-200, #eee);
  padding-block: var(--space-3);
}
.ab-archive__filters-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ab-archive__filters-list::-webkit-scrollbar { display: none; }

.ab-archive__filter {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-xs, 0.8rem);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: #f7eef0;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 8px 16px;
  transition: background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
}
.ab-archive__filter:hover {
  background: #f0dfe3;
}
.ab-archive__filter.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ── Article "à la une" ──
   Texte à gauche (titre en haut, résumé + auteur/date + trait en bas),
   image à droite. L'image (avec son aspect-ratio) fixe la hauteur de la
   ligne de grille ; le texte s'étire (stretch, comportement par défaut de
   CSS Grid) sur exactement cette hauteur — jamais plus, jamais moins. */
.ab-archive__featured {
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
}
.ab-archive__featured-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
}
.ab-archive__featured-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.ab-archive__featured-cat {
  margin-bottom: var(--space-2);
}
.ab-archive__featured-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.3;
  /* Réduit volontairement par rapport au H2 par défaut du site : dans la
     colonne étroite de la vedette, la taille standard passait sur 4 lignes.
     Calibré pour tenir sur ~3 lignes. */
  font-size: clamp(1.2rem, 2vw, 1.85rem);
}
.ab-archive__featured-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ab-archive__featured-excerpt {
  margin: 0;
  /* Plafonné en nombre de lignes : même si l'extrait est plus long, la
     ligne "auteur – date" et le trait de séparation qui suivent restent
     toujours visibles, jamais poussés hors de la section. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ab-archive__featured-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs, 0.8rem);
  color: var(--color-grey-600);
}
.ab-archive__featured-sep { color: var(--color-grey-400); }
.ab-archive__featured-rule {
  width: 88%;
  height: 1px;
  background: var(--color-grey-200, #eee);
}

.ab-archive__featured-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-grey-100);
}
.ab-archive__featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ab-archive__featured-link:hover .ab-archive__featured-img {
  transform: scale(1.03);
}
.ab-archive__featured-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-grey-100);
}

/* ── Grille de cartes ── */
.ab-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-8), 3vw, var(--space-10)) clamp(var(--space-5), 2.5vw, var(--space-8));
}

.ab-post-card__link {
  display: block;
}
.ab-post-card__img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-grey-100);
  margin-bottom: var(--space-4);
}
.ab-post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ab-post-card__link:hover .ab-post-card__img {
  transform: scale(1.04);
}
.ab-post-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-grey-100);
}
.ab-post-card__cat {
  display: block;
  margin-bottom: var(--space-2);
}
.ab-post-card__title {
  font-size: var(--text-lg, 1.15rem);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast, 0.2s ease);
}
.ab-post-card__link:hover .ab-post-card__title {
  color: var(--color-primary-mid);
}
.ab-post-card__excerpt {
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}
.ab-post-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs, 0.78rem);
  color: var(--color-grey-500);
}
.ab-post-card__sep { color: var(--color-grey-400); }

/* ── État vide ── */
.ab-archive__empty {
  text-align: center;
  padding-block: var(--space-10);
}

/* ── Pagination ── */
.ab-archive__pagination {
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
}
.ab-archive__pagination .pagination,
.ab-archive__pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.ab-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  border: 1px solid var(--color-grey-200, #eee);
}
.ab-archive__pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.ab-archive__pagination .page-numbers:not(.current):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ab-archive__pagination .page-numbers.dots {
  border-color: transparent;
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .ab-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  .ab-archive__featured-link {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 700px) {
  /* Liste de filtres scrollable : centrée, elle "mange" le début du
     premier pill au chargement (le navigateur centre une ligne flex plus
     large que son conteneur, donc scrollLeft:0 ne correspond pas au vrai
     début du contenu). Alignée à gauche, le scroll part logiquement du
     premier pill. */
  .ab-archive__filters-list {
    justify-content: flex-start;
  }

  /* Sur mobile, mieux vaut un titre plus grand sur deux lignes qu'un
     titre riquiqui pour tenir sur une seule (priorité inversée par
     rapport au desktop, qui reste sur une ligne). */
  .ab-archive__header h1 {
    font-size: clamp(1.6rem, 9vw, 2.6rem);
    white-space: normal;
    line-height: 1.15;
  }
}

@media (max-width: 560px) {
  .ab-posts-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ab-archive__filter {
    font-size: 0.75rem;
    padding: 7px 13px;
  }
  .ab-archive__pagination .page-numbers {
    min-width: 40px;
    height: 40px;
  }
}