✨ Feature: Pages projets complètes + Optimisation images (Stories 3.4-3.6)

Story 3.4 - Page projet individuelle:
- Breadcrumb, header avec badges technologies
- Boutons "Voir en ligne" / "GitHub"
- Sections: Contexte, Solution, Travail d'équipe
- Galerie screenshots, sidebar durée
- Navigation retour + CTA contact

Story 3.5 - Projets secondaires:
- Section "Autres projets" sur /projets
- Template project-card-compact.php
- Format liste avec lien externe direct

Story 3.6 - Optimisation images:
- Fonction projectImage() avec <picture> WebP + fallback JPG
- Dimensions explicites (400x225, 800x450, 1200x675)
- Lazy loading configurable

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

templates/project-card.php

@@ -15,15 +15,14 @@ $maxTechs = 4;
     <a href="/projet/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="block">
         <!-- Thumbnail -->
         <div class="aspect-video overflow-hidden rounded-t-lg bg-surface-alt">
-            <img
-                src="/assets/img/projects/<?= htmlspecialchars($thumbnail, ENT_QUOTES, 'UTF-8') ?>"
-                alt="Aperçu du projet <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>"
-                width="400"
-                height="225"
-                loading="lazy"
-                class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-                onerror="this.src='/assets/img/projects/default-project.webp'; this.onerror=null;"
-            >
+            <?= projectImage(
+                $thumbnail,
+                "Aperçu du projet " . $title,
+                400,
+                225,
+                true,
+                "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+            ) ?>
         </div>
 
         <!-- Contenu -->