Semantic HTML: home page card grid — <ul>/<li>/<figure>/<nav> refactor

Replace presentational divs in index.php and main.css with elements that
carry correct semantic meaning, fixing multiple WCAG 2.1 AA issues:

index.php:
- <div class="cards-container"> → <ul class="cards-container"> (list of navigable items)
- <a class="card-link"><div class="card">…</div></a> → <li class="card"><a> (block link
  is the <a>, <li> is the container; removes the redundant .card div wrapper)
- <div class="card__media"> → <figure class="card__media"> when wrapping an <img>;
  gradient placeholder stays as <div> (presentational, aria-hidden)
- Improved alt text: "Couverture — [title] par [authors]" instead of bare title
- Removed <div class="card__info"> wrapper; caption is now a bare <p class="card__caption">
  directly inside the <a>
- <div class="filter-info"> → <p class="filter-info" role="status"> (live-region
  semantics; announces filter state to screen readers)
- ✕ symbol in clear-filter link wrapped in <span aria-hidden="true">
- Gradient placeholder div gets aria-hidden="true" (decorative; caption below carries text)
- Empty-state <p style="…"> → <li class="cards-empty"> (removes inline style)
- <div class="pagination-wrap"> → <nav class="pagination-wrap" aria-label="Pagination">
  with <ul>/<li> children; page-info <span> → <li aria-current="page">

main.css:
- .cards-container: add list-style:none; margin:0; padding:0 (reset <ul> defaults)
- Remove .card-link rule; replace with .card > a (block flex link, no separate class)
- .card__media: add margin:0 to reset <figure> default margin
- Remove .card__info rules; rename .authors to .card__caption with same styles
- Add .cards-empty rule (removes last inline style from index.php)
- .pagination-wrap: restructured for <nav>/<ul>; inner <ul> carries the flex layout
- prefers-reduced-motion: add .card__media--gradient guard

WCAG criteria addressed: 1.1.1 (alt text), 1.3.1 (info & relationships via semantic
list/figure), 2.4.1 (filter-info now live region), role="status" on filter banner.

public/assets/main.css

@@ -22,6 +22,9 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 @media (min-width: 1400px) {
@@ -36,13 +39,7 @@
   }
 }
 
-/* Each card = media thumbnail + text below */
-.card-link {
-  text-decoration: none;
-  color: inherit;
-  display: block;
-}
-
+/* Each card = list item containing a block <a> link */
 .card {
   display: flex;
   flex-direction: column;
@@ -52,12 +49,22 @@
   overflow: hidden;
 }
 
+.card > a {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* card__media is a <figure> (with image) or <div> (gradient placeholder) */
 .card__media {
   width: 100%;
   aspect-ratio: 4/3;
   overflow: hidden;
   background: #e8e8e8;
   position: relative;
+  margin: 0; /* reset <figure> default margin */
 }
 
 .card__media img,
@@ -120,26 +127,22 @@
   font-style: italic;
 }
 
-.card__info {
+/* Card caption — <p> directly inside the <a>, below the media */
+.card__caption {
   padding: 0.55rem 0.5rem 0.65rem;
   font-size: 0.88rem;
   line-height: 1.35;
   color: var(--black);
-}
-
-.card__info .authors {
   margin: 0;
   font-weight: 400;
 }
 
-.card__info .title {
-  margin: 0;
-  font-weight: 400;
-  color: var(--text-muted);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+/* Empty-state message shown when no cards exist */
+.cards-empty {
+  padding: 2rem;
+  color: #6b6b6b;
+  font-size: 0.9rem;
+  list-style: none;
 }
 
 /* Filter info */
@@ -169,14 +172,19 @@
 
 /* Pagination */
 .pagination-wrap {
+  border-top: 1px solid var(--border-color);
+  background: var(--white);
+  flex-shrink: 0;
+}
+
+.pagination-wrap ul {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem;
-  border-top: 1px solid var(--border-color);
-  background: var(--white);
-  flex-shrink: 0;
+  list-style: none;
+  margin: 0;
 }
 
 .pagination-btn {
@@ -226,4 +234,7 @@
   .card:hover .card__media video {
     transform: none;
   }
+  .card__media--gradient {
+    transition: none;
+  }
 }