/* ==========================================================================
   PAGES/BLOG.CSS — Liste d'articles et fiche article
   ========================================================================== */

/* === FILTRES PAR RUBRIQUE ================================================= */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-6);
  padding-bottom: var(--e-6);
  border-bottom: var(--filet);
}
.filtre {
  min-height: 40px;
  padding: 0 var(--e-4);
  background: transparent;
  border: var(--filet);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .05em;
  color: var(--gris-texte);
  cursor: pointer;
  transition: background-color var(--d-instant) var(--ease),
              color var(--d-instant) var(--ease),
              border-color var(--d-instant) var(--ease);
}
.filtre:hover { color: var(--noir); border-color: var(--noir); }
.filtre[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }


/* === ARTICLE A LA UNE ===================================================== */

.une { padding-block: var(--e-8); border-bottom: var(--filet); align-items: center; }
.une-photo { --ratio: 4 / 3; }
.une-titre { font-size: var(--t-xl); margin-block: var(--e-5); max-width: 18ch; }
.une-extrait { color: var(--gris-texte); font-size: var(--t-m); max-width: 48ch; }
.une-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}
.une-meta .rubrique { color: var(--accent); }


/* === GRILLE D'ARTICLES ==================================================== */

.articles {
  display: grid;
  gap: var(--e-8) var(--grille-gap);
  padding-block: var(--e-8);
}
@media (min-width: 700px)  { .articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .articles { grid-template-columns: repeat(3, 1fr); } }

/* Carte d'article : aucun cadre, aucune ombre. L'image, le filet de
   métadonnées et le titre suffisent. */
.article { position: relative; display: flex; flex-direction: column; }
.article-photo { --ratio: 3 / 2; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-5);
  padding-bottom: var(--e-3);
  border-bottom: var(--filet);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}
.article-meta .rubrique { color: var(--accent); }
.article-titre {
  margin-top: var(--e-4);
  font-size: var(--t-l);
  letter-spacing: -0.025em;
  transition: color var(--d-instant) var(--ease);
}
/* Lien étiré : toute la carte est cliquable, pas seulement le titre. */
.article-titre a::after { content: ""; position: absolute; inset: 0; }
.article:hover .article-titre { color: var(--accent); }
.article-extrait { margin-top: var(--e-3); font-size: var(--t-s); color: var(--gris-texte); }

.article-vide {
  grid-column: 1 / -1;
  padding-block: var(--e-8);
  font-family: var(--f-mono);
  font-size: var(--t-s);
  color: var(--gris-texte);
}


/* === PAGINATION =========================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-6);
  border-top: var(--filet);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}


/* === INSCRIPTION ========================================================== */

.inscription { align-items: center; }
.inscription h2 { font-size: var(--t-xl); max-width: 16ch; }
.inscription p { margin-top: var(--e-5); color: var(--gris-texte); max-width: 44ch; }
.inscription-form { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: flex-end; }
.inscription-form .champ { flex: 1 1 260px; margin-bottom: 0; }