✨ 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-compact.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Carte projet compacte (projets secondaires)
+ * @param array $project Données du projet
+ */
+
+$title = $project['title'] ?? 'Sans titre';
+$context = $project['context'] ?? '';
+$url = $project['url'] ?? null;
+$technologies = $project['technologies'] ?? [];
+$maxTechs = 3;
+
+// Tronquer la description à ~100 caractères
+$shortContext = strlen($context) > 100
+    ? substr($context, 0, 100) . '...'
+    : $context;
+?>
+
+<article class="card hover:border-primary/30 transition-colors">
+    <div class="card-body flex flex-col sm:flex-row sm:items-center gap-4">
+        <!-- Titre et description -->
+        <div class="flex-grow min-w-0">
+            <?php if ($url): ?>
+                <a href="<?= htmlspecialchars($url, ENT_QUOTES, 'UTF-8') ?>"
+                   target="_blank"
+                   rel="noopener"
+                   class="text-lg font-semibold text-text-primary hover:text-primary transition-colors inline-flex items-center gap-2">
+                    <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
+                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                    </svg>
+                </a>
+            <?php else: ?>
+                <h3 class="text-lg font-semibold text-text-primary">
+                    <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
+                </h3>
+            <?php endif; ?>
+
+            <?php if ($shortContext): ?>
+                <p class="text-text-secondary text-sm mt-1 truncate">
+                    <?= htmlspecialchars($shortContext, ENT_QUOTES, 'UTF-8') ?>
+                </p>
+            <?php endif; ?>
+        </div>
+
+        <!-- Technologies -->
+        <div class="flex flex-wrap gap-2 sm:flex-shrink-0">
+            <?php foreach (array_slice($technologies, 0, $maxTechs) as $tech): ?>
+                <span class="badge text-xs"><?= htmlspecialchars($tech, ENT_QUOTES, 'UTF-8') ?></span>
+            <?php endforeach; ?>
+
+            <?php if (count($technologies) > $maxTechs): ?>
+                <span class="badge badge-muted text-xs">+<?= count($technologies) - $maxTechs ?></span>
+            <?php endif; ?>
+        </div>
+    </div>
+</article>