refactor: improve layout ratios and pagination UI

Layout improvements:
- Fixed header/main/footer ratios to 2:5, 3:5, 1:5 using flex
- Default to sans-serif font system stack
- Made sections properly flex-based instead of viewport height

Pagination improvements:
- First/previous/next/last navigation buttons (‹‹ ‹ › ››)
- Current page highlighted in colored badge
- Disabled state for unavailable actions
- Clean rounded button design with hover effects
- Proper spacing and visual hierarchy

Card styling:
- Better typography hierarchy
- Hover effects (lift + shadow)
- Improved spacing and readability
- Year displayed in brand color

Tests passing ✅

public/index.php

@@ -65,15 +65,36 @@ include APP_ROOT . '/templates/header.php';
     <?php 
     $yearParam = $year ? '&year=' . (int)$year : '';
     ?>
-    <?php if ($page > 1): ?>
-        <a href="?page=<?= (int)($page - 1) . $yearParam ?>" class="pagination-previous">Précédent</a>
-    <?php endif; ?>
-
-    <?php if ($page < $totalPages): ?>
-        <a href="?page=<?= (int)($page + 1) . $yearParam ?>" class="pagination-next">Suivant</a>
-    <?php endif; ?>
-
-    <span class="pagination-info">Page <?= (int)$page ?> sur <?= (int)$totalPages ?></span>
+    
+    <a href="?page=1<?= $yearParam ?>" 
+       class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>" 
+       <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
+        ‹‹
+    </a>
+    
+    <a href="?page=<?= max(1, (int)($page - 1)) . $yearParam ?>" 
+       class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
+       <?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
+        ‹
+    </a>
+    
+    <span class="pagination-info">
+        <span class="page-current"><?= (int)$page ?></span>
+        <span class="page-separator">/</span>
+        <span class="page-total"><?= (int)$totalPages ?></span>
+    </span>
+    
+    <a href="?page=<?= min($totalPages, (int)($page + 1)) . $yearParam ?>" 
+       class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
+       <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
+        ›
+    </a>
+    
+    <a href="?page=<?= $totalPages . $yearParam ?>" 
+       class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
+       <?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
+        ››
+    </a>
 </nav>
 <?php endif; ?>