feat: frontend modernization with HTMX, Alpine.js and Plyr (Phase 3)

- Integrated HTMX for server-driven UI updates and fragments
- Adopted Alpine.js for global reactive state and tab management
- Replaced legacy player with Plyr.io for premium streaming experience
- Implemented real-time download polling via HTMX
- Added server-sent Toast notification system
- Fixed navigation and authentication scoping issues

templates/components/anime_card.html

@@ -0,0 +1,43 @@
+{% macro anime_card(anime, in_watchlist=False) %}
+<div class="anime-card" id="anime-{{ anime.url | hash }}">
+    <div class="anime-poster">
+        <img src="{{ anime.cover_image or anime.metadata.poster_image or '/static/img/no-poster.png' }}" 
+             alt="{{ anime.title }}" 
+             loading="lazy">
+        <div class="anime-overlay">
+            <button class="btn-play" 
+                    hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
+                    hx-target="#player-container"
+                    hx-swap="innerHTML">
+                <i class="fas fa-play"></i>
+            </button>
+        </div>
+        {% if anime.metadata and anime.metadata.rating %}
+        <div class="anime-rating">{{ anime.metadata.rating }}</div>
+        {% endif %}
+    </div>
+    <div class="anime-info">
+        <h3 class="anime-title" title="{{ anime.title }}">{{ anime.title }}</h3>
+        <div class="anime-meta">
+            <span class="badge badge-provider">{{ anime.provider_id or 'unknown' }}</span>
+            {% if anime.metadata and anime.metadata.status %}
+            <span class="badge badge-status">{{ anime.metadata.status }}</span>
+            {% endif %}
+        </div>
+        
+        <div class="anime-actions">
+            {% if not in_watchlist %}
+            <button class="btn btn-sm btn-outline"
+                    hx-post="/api/watchlist"
+                    hx-vals='{"anime_url": "{{ anime.url }}", "anime_title": "{{ anime.title }}", "provider_id": "{{ anime.provider_id }}"}'
+                    hx-swap="none"
+                    hx-on::after-request="this.remove()">
+                <i class="fas fa-plus"></i> Watchlist
+            </button>
+            {% else %}
+            <span class="text-muted small"><i class="fas fa-check"></i> Dans la watchlist</span>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endmacro %}