Phase 3: HTMX & Alpine.js integration, router refactoring, and UI modernization

- Modernized the frontend with HTMX for server-driven UI and Alpine.js for client state.
- Refactored anime, player, and recommendation logic into modular routers.
- Updated README.md to reflect the latest project state and technologies (v2.4).
- Added Plyr.io for an improved streaming experience.
- Improved project structure with componentized templates.
- Added Playwright and Vitest configuration for frontend testing.

templates/components/player_embed.html

@@ -0,0 +1,77 @@
+<div class="player-embed-box" 
+     x-data="{ 
+        initPlayer() {
+            if (!this.$refs.player) return;
+            const player = new Plyr(this.$refs.player, {
+                captions: { active: true, update: true, language: 'auto' },
+                speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] }
+            });
+            console.log('Plyr initialized');
+        } 
+     }"
+     x-init="initPlayer()">
+    
+    {% if is_iframe %}
+        <div class="iframe-container">
+            <iframe src="{{ video_url }}" 
+                    allowfullscreen 
+                    webkitallowfullscreen 
+                    mozallowfullscreen></iframe>
+        </div>
+        <div class="player-info-hint">
+            💡 Lecteur externe utilisé. Les contrôles dépendent de l'hébergeur.
+        </div>
+    {% else %}
+        <div class="video-wrapper">
+            <video x-ref="player" playsinline controls preload="metadata">
+                <source src="{{ video_url }}" type="video/mp4">
+            </video>
+        </div>
+    {% endif %}
+    
+    <div class="player-footer-actions">
+        <a href="{{ video_url }}" class="btn btn-sm btn-secondary" target="_blank">
+            <i class="fas fa-external-link-alt"></i> Ouvrir sur l'hébergeur
+        </a>
+    </div>
+</div>
+
+<style>
+.player-embed-box {
+    margin: 20px 0;
+    padding: 15px;
+    background: #000;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+.iframe-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+    height: 0;
+    overflow: hidden;
+}
+.iframe-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+.video-wrapper {
+    max-width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+}
+.player-info-hint {
+    font-size: 0.8rem;
+    color: #888;
+    margin-top: 10px;
+    text-align: center;
+}
+.player-footer-actions {
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+}
+</style>