:root{
  --content-max: 1100px;
  --gap: 14px;
  --card-bg: #121212;
  --card-bd:#121212;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #1d4ed8;
  --ctrl-bg:#121212;
  --ctrl-bd:#121212;
}

html, body { margin:0; font-family: Georgia, "Times New Roman", Times, serif; background:#2f2f2f; color:var(--text); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Bannière: hauteur constante = 25% de la hauteur écran */
.home-hero{
  width:100%;
  height:25vh;        /* fallback */
  height:25dvh;       /* viewport dynamique moderne */
  max-height:25vh;
  max-height:25dvh;
  overflow:hidden;
}
.home-hero img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.home-hero__img{
  display:none;
  width:100%;
  background-image: url("../../assets/image/bannière.jpg");
  background-repeat:no-repeat; background-position:center; background-size:cover;
}

/* Filtres */
.filter-bar{ position:sticky; top:0; z-index:5; background:#2f2f2f; }
.filter-bar__row, .filters{
  inline-size:100%; max-inline-size:var(--content-max);
  margin-inline:auto; padding:10px 12px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.f-input, .f-select{
  background:var(--ctrl-bg); color:var(--text);
  border:1px solid var(--ctrl-bd); border-radius:10px;
  outline:none; font-size:14px;
}
.f-input{ padding:10px 12px; min-inline-size:280px; flex:1 1 280px; }
.f-select{ padding:10px 12px; }

/* Grille articles */
.home{
  inline-size:100%; max-inline-size:var(--content-max);
  margin-inline:auto; padding:18px 12px 24px; display:grid; gap:var(--gap);
}
.grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1200px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } }

/* Cartes */
.card{
  display:grid; grid-template-rows: auto 1fr;
  background:var(--card-bg); border:1px solid var(--card-bd);
  border-radius:12px; overflow:hidden; text-decoration:none; color:inherit;
}
.card__body{ padding:10px 12px; display:grid; gap:6px; }
.card__title{ margin:0; font-size:18px; line-height:1.3; }
.card__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--muted);
}
.card__date{ display:inline-flex; align-items:center; gap:6px; }
.card__cat{ display:inline-flex; align-items:center; gap:6px; }
.card__cat svg{ width:16px; height:16px; color:var(--accent); display:inline-block; }

.empty{ color:var(--muted); text-align:center; margin:18px 0; }

/* Empêche #articles-grid d’être une grille en plus de .cards */
#articles-grid{ display:block !important; }

/* Grilles rendues par JS */
.cards{ display:grid; gap:var(--gap); grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1200px){ .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

/* Médias des cartes: 10x15 horizontal = 3/2. Image entière. */
.card__media{
  width:100%;
  aspect-ratio:3/2;            /* <- avant 2/3 (trop vertical) */
  background:#111827;
  display:block;
  overflow:hidden;
}
.card__img{
  width:100%;
  height:100%;
  object-fit:contain;           /* <- avant cover, ça rognait */
  object-position:center;
  display:block;
  background:#111827;           /* bandes si nécessaires */
}

/* Fallback en background si pas d’<img> */
.card__cover{
  width:100%;
  aspect-ratio:3/2;            /* même ratio */
  background:#111827;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;     /* voir toute l’image */
}