feat: initial project

src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="min-h-screen bg-[#080c10] text-[#c8d8e8] font-mono">
+    <RouterView v-slot="{ Component, route }">
+      <keep-alive include="CatalogView">
+        <component :is="Component" :key="route.path" />
+      </keep-alive>
+    </RouterView>
+    <ToastContainer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToastContainer from '@/components/ToastContainer.vue'
+</script>

src/api/fankai.ts

@@ -0,0 +1,80 @@
+const BASE = '/api'
+
+export interface Production {
+    id: number
+    name: string
+    description: string
+    kaieur: string
+    cover: string | null
+    background: string | null
+    banner: string | null
+    status: string
+    torrents: string | null
+    multi: number
+    link: string
+    episodes_count: number
+}
+
+export interface Episode {
+    id: number
+    serie_id: number
+    season_id: number
+    name: string
+    number: number
+    cover: string | null
+    duration: string
+    description: string
+    episodes: string
+    path_jap: string | null
+    path_fr: string | null
+}
+
+export interface Season {
+    id: number
+    serie_id: number
+    name: string
+    number: number
+    cover: string | null
+    episodes: Episode[]
+}
+
+export interface ProductionDetail extends Production {
+    seasons: Season[]
+    episodes: Episode[]
+}
+
+export interface Torrent {
+    name: string
+    url: string
+}
+
+// Parse "Nom@url|Nom@url" → Torrent[]
+export function parseTorrents(raw: string | null): Torrent[] {
+    if (!raw) return []
+    return raw.split('|').flatMap(item => {
+        const parts = item.split('@')
+        if (parts.length !== 2) return []
+        return [{ name: parts[0] as string, url: parts[1] as string }]
+    })
+}
+
+// Préfixe les images relatives
+export function imageUrl(path: string | null): string | null {
+    if (!path) return null
+    const encoded = encodeURIComponent(`https://api.fankai.fr${path}`)
+    return `https://fankai.fr/_next/image?url=${encoded}&w=640&q=100`
+}
+
+export async function fetchProductions(): Promise<Production[]> {
+    const res = await fetch(`${BASE}/productions`)
+    if (!res.ok) throw new Error('Erreur chargement catalogue')
+    const data = await res.json()
+    return data.pageProps.data
+}
+
+export async function fetchProduction(id: number, name: string): Promise<ProductionDetail> {
+    const res = await fetch(`${BASE}/productions/${id}?name=${encodeURIComponent(name)}`)
+    if (!res.ok) throw new Error('Erreur chargement production')
+    const data = await res.json()
+    return data.pageProps.data
+}

src/assets/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/components/EpisodeRow.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="bg-[#0d1219] flex gap-4 p-3 hover:bg-[#121920] transition-colors">
+    <div class="w-24 flex-shrink-0">
+      <img
+          v-if="ep.cover"
+          :src="imageUrl(ep.cover)"
+          :alt="ep.name"
+          class="w-full aspect-video object-cover"
+      />
+      <div v-else class="w-full aspect-video bg-[#121920]"></div>
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2 mb-1">
+        <span class="text-[10px] text-[#e8513a]">FILM {{ ep.number }}</span>
+        <span class="text-sm font-bold text-white truncate">{{ ep.name }}</span>
+      </div>
+      <div class="text-[10px] text-[#5a7a94] mb-1">
+        Épisodes {{ ep.episodes }} · {{ ep.duration }}
+      </div>
+      <p class="text-xs text-[#5a7a94] leading-relaxed line-clamp-2">{{ ep.description }}</p>
+    </div>
+
+    <div class="flex-shrink-0 flex items-center">
+      <a
+        v-if="ep.path_fr"
+        :href="`https://fankai.fr/productions/${productionId}?episode=${ep.number}`"
+        target="_blank"
+        title="Streamable sur fankai.fr"
+        class="text-[10px] text-[#3ae87a] border border-[#3ae87a] px-2 py-1 tracking-widest hover:bg-[#3ae87a]/10 transition-colors"
+        @click.stop
+      >
+        ▶ STREAM
+      </a>
+      <div
+          v-else
+          class="text-[10px] text-[#1e2d3d] border border-[#1e2d3d] px-2 py-1 tracking-widest"
+      >
+        BIENTÔT
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { imageUrl, type Episode } from '@/api/fankai'
+
+defineProps<{
+  ep: Episode
+  productionId: number
+}>()
+</script>

src/components/ToastContainer.vue

@@ -0,0 +1,36 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed top-4 right-4 z-50 flex flex-col gap-2">
+      <TransitionGroup name="toast">
+        <div
+            v-for="t in toasts"
+            :key="t.id"
+            @click="remove(t.id)"
+            :class="{
+            'border-[#3ae87a] text-[#3ae87a]': t.type === 'success',
+            'border-[#e8513a] text-[#e8513a]': t.type === 'error',
+            'border-[#3a8fe8] text-[#3a8fe8]': t.type === 'info',
+          }"
+            class="bg-[#0d1219] border px-4 py-3 text-xs tracking-wider cursor-pointer flex items-center gap-3 min-w-64"
+        >
+          <span v-if="t.type === 'success'">✓</span>
+          <span v-else-if="t.type === 'error'">✕</span>
+          <span v-else>·</span>
+          {{ t.message }}
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '@/composables/useToast'
+const { toasts, remove } = useToast()
+</script>
+
+<style scoped>
+.toast-enter-active { transition: all 0.2s ease; }
+.toast-leave-active { transition: all 0.2s ease; }
+.toast-enter-from { opacity: 0; transform: translateX(20px); }
+.toast-leave-to   { opacity: 0; transform: translateX(20px); }
+</style>

src/composables/useToast.ts

@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+
+interface Toast {
+    id: number
+    message: string
+    type: 'success' | 'error' | 'info'
+}
+
+const toasts = ref<Toast[]>([])
+let nextId = 0
+
+export function useToast() {
+    function add(message: string, type: Toast['type'] = 'info', duration = 3000) {
+        const id = nextId++
+        toasts.value.push({ id, message, type })
+        setTimeout(() => remove(id), duration)
+    }
+
+    function remove(id: number) {
+        const idx = toasts.value.findIndex(t => t.id === id)
+        if (idx !== -1) toasts.value.splice(idx, 1)
+    }
+
+    return { toasts, add, remove }
+}

src/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import App from '@/App.vue'
+import '@/assets/main.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,52 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/auth',
+            component: () => import('@/views/AuthView.vue'),
+            meta: { public: true }
+        },
+        {
+            path: '/',
+            name: 'catalog',
+            component: () => import('@/views/CatalogView.vue')
+        },
+        {
+            path: '/series/:id',
+            component: () => import('@/views/SerieView.vue')
+        },
+        {
+            path: '/downloads',
+            component: () => import('@/views/DownloadsView.vue')
+        },
+        {
+            path: '/settings',
+            component: () => import('@/views/SettingsView.vue')
+        }
+    ],
+    scrollBehavior(to, _from, savedPosition) {
+        if (savedPosition) return savedPosition
+        return { top: 0 }
+    }
+})
+
+router.beforeEach(async (to) => {
+    const auth = useAuthStore()
+
+    if (auth.loading) {
+        await auth.checkStatus()
+    }
+
+    if (!to.meta.public && !auth.loggedIn) {
+        return '/auth'
+    }
+
+    if (to.path === '/auth' && auth.loggedIn) {
+        return '/'
+    }
+})
+
+export default router

src/stores/auth.ts

@@ -0,0 +1,57 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAuthStore = defineStore('auth', () => {
+    const loggedIn = ref(false)
+    const setup = ref(false)
+    const loading = ref(true)
+
+    async function checkStatus() {
+        try {
+            const res = await fetch('/api/auth/status')
+            const data = await res.json()
+            setup.value = data.setup
+            loggedIn.value = data.loggedIn
+        } catch {
+            loggedIn.value = false
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function login(username: string, password: string): Promise<string | null> {
+        const res = await fetch('/api/auth/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username, password })
+        })
+        const data = await res.json()
+        if (res.ok) {
+            loggedIn.value = true
+            return null
+        }
+        return data.error
+    }
+
+    async function setupAccount(username: string, password: string): Promise<string | null> {
+        const res = await fetch('/api/auth/setup', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username, password })
+        })
+        const data = await res.json()
+        if (res.ok) {
+            loggedIn.value = true
+            setup.value = true
+            return null
+        }
+        return data.error
+    }
+
+    async function logout() {
+        await fetch('/api/auth/logout', { method: 'POST' })
+        loggedIn.value = false
+    }
+
+    return { loggedIn, setup, loading, checkStatus, login, setupAccount, logout }
+})

src/stores/catalog.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import {
+    fetchProductions,
+    fetchProduction,
+    type Production,
+    type ProductionDetail
+} from '@/api/fankai'
+
+export const useCatalogStore = defineStore('catalog', () => {
+    const productions = ref<Production[]>([])
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+    async function loadProductions() {
+        if (productions.value.length > 0) return
+        loading.value = true
+        error.value = null
+        try {
+            productions.value = await fetchProductions()
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Erreur inconnue'
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function loadProduction(id: number, name: string): Promise<ProductionDetail> {
+        return await fetchProduction(id, name)
+    }
+
+    return { productions, loading, error, loadProductions, loadProduction }
+})

src/stores/series.ts

@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface TorrentRef {
+    torrent_raw: string
+    torrent_url: string | null
+    magnet: string | null
+    type: string
+}
+
+export interface Episode {
+    id: number
+    episode_number: number
+    display_episode: number | null
+    title: string
+    plot: string | null
+    aired: string | null
+    duration: number | null
+    thumb_image: string | null
+    has_thumbnail: boolean
+    season_id: number
+    available: boolean
+    torrent: TorrentRef | null  // non-null seulement si type=episode
+}
+
+export interface Season {
+    id: number
+    season_number: number
+    title: string
+    plot: string | null
+    poster_image: string | null
+    episode_count: number
+    premiered: string | null
+    episodes: Episode[]
+    torrent: TorrentRef | null
+}
+
+export interface Serie {
+    id: number
+    title: string
+    sort_title: string
+    plot: string | null
+    poster_image: string | null
+    fanart_image: string | null
+    year: number | null
+    status: string | null
+    torrent_count: number
+    has_torrents: boolean
+}
+
+export interface SerieDetail {
+    serie: Serie
+    seasons: Season[]
+    torrents_integrale: { raw: string; torrent_url: string | null; magnet: string | null }[]
+}
+
+export const useSeriesStore = defineStore('series', () => {
+    const series = ref<Serie[]>([])
+    const currentSerie = ref<SerieDetail | null>(null)
+    const loadingSeries = ref(false)
+    const loadingDetail = ref(false)
+    const error = ref<string | null>(null)
+
+    async function fetchSeries() {
+        loadingSeries.value = true
+        error.value = null
+        try {
+            const res = await fetch('/api/series')
+            if (!res.ok) throw new Error(`Erreur ${res.status}`)
+            const data = await res.json()
+            series.value = data.series
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Erreur inconnue'
+        } finally {
+            loadingSeries.value = false
+        }
+    }
+
+    async function fetchSerieDetail(id: number) {
+        loadingDetail.value = true
+        error.value = null
+        currentSerie.value = null
+        try {
+            const res = await fetch(`/api/series/${id}`)
+            if (!res.ok) throw new Error(`Erreur ${res.status}`)
+            currentSerie.value = await res.json()
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Erreur inconnue'
+        } finally {
+            loadingDetail.value = false
+        }
+    }
+
+    async function download(torrent_url: string | null, magnet: string | null): Promise<{ success: boolean; error?: string }> {
+        try {
+            const res = await fetch('/api/download', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ torrent_url, magnet })
+            })
+            const data = await res.json()
+            if (res.ok) return { success: true }
+            return { success: false, error: data.error }
+        } catch (err) {
+            return { success: false, error: err instanceof Error ? err.message : 'Erreur inconnue' }
+        }
+    }
+
+    return {
+        series, currentSerie,
+        loadingSeries, loadingDetail, error,
+        fetchSeries, fetchSerieDetail, download
+    }
+})

src/views/AuthView.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="min-h-screen bg-[#080c10] flex items-center justify-center px-4">
+    <div class="w-full max-w-sm">
+      <!-- Logo -->
+      <div class="flex items-baseline gap-1 mb-8 justify-center">
+        <span class="font-sans text-3xl font-black text-white tracking-tight">Fank</span>
+        <span class="font-sans text-3xl font-black text-[#e8513a] tracking-tight">Arr</span>
+      </div>
+
+      <!-- Card -->
+      <div class="bg-[#0d1219] border border-[#1e2d3d] p-8">
+        <div class="text-[10px] text-[#e8513a] tracking-widest mb-1">
+          {{ isSetup ? 'PREMIÈRE CONNEXION' : 'CONNEXION' }}
+        </div>
+        <h1 class="text-lg font-black text-white font-sans mb-6">
+          {{ isSetup ? 'Créer un compte' : 'Bon retour' }}
+        </h1>
+
+        <!-- Form -->
+        <div class="flex flex-col gap-4">
+          <div>
+            <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">IDENTIFIANT</label>
+            <input
+                v-model="username"
+                type="text"
+                placeholder="admin"
+                class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"
+                @keyup.enter="submit"
+            />
+          </div>
+
+          <div>
+            <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">MOT DE PASSE</label>
+            <input
+                v-model="password"
+                type="password"
+                placeholder="••••••••"
+                class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"
+                @keyup.enter="submit"
+            />
+          </div>
+
+          <div v-if="isSetup">
+            <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">CONFIRMER</label>
+            <input
+                v-model="confirm"
+                type="password"
+                placeholder="••••••••"
+                class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"
+                @keyup.enter="submit"
+            />
+          </div>
+
+          <!-- Error -->
+          <div v-if="error" class="text-[#e8513a] text-xs">{{ error }}</div>
+
+          <!-- Submit -->
+          <button
+              @click="submit"
+              :disabled="submitting"
+              class="w-full bg-[#e8513a] text-white py-2.5 text-xs tracking-widest font-bold hover:opacity-85 transition-opacity disabled:opacity-50 cursor-pointer mt-2"
+          >
+            {{ submitting ? '...' : isSetup ? 'CRÉER LE COMPTE' : 'SE CONNECTER' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const auth = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+const confirm = ref('')
+const error = ref<string | null>(null)
+const submitting = ref(false)
+
+const isSetup = computed(() => !auth.setup)
+
+async function submit() {
+  error.value = null
+
+  if (!username.value || !password.value) {
+    error.value = 'Tous les champs sont requis'
+    return
+  }
+
+  if (isSetup.value && password.value !== confirm.value) {
+    error.value = 'Les mots de passe ne correspondent pas'
+    return
+  }
+
+  submitting.value = true
+
+  const err = isSetup.value
+      ? await auth.setupAccount(username.value, password.value)
+      : await auth.login(username.value, password.value)
+
+  submitting.value = false
+
+  if (err) {
+    error.value = err
+    return
+  }
+
+  await router.push('/')
+}
+</script>

src/views/CatalogView.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="min-h-screen bg-zinc-950 text-zinc-100">
+
+    <!-- Header -->
+    <header class="sticky top-0 z-50 bg-zinc-950/90 backdrop-blur border-b border-white/5">
+      <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+        <span class="text-2xl font-serif tracking-tight">
+          <span class="text-zinc-100">Fan</span><span class="text-orange-500">karr</span>
+        </span>
+        <div class="flex items-center gap-2">
+          <router-link to="/downloads"
+                       class="p-2 rounded-lg text-zinc-500 hover:text-zinc-100 hover:bg-white/5 transition relative">
+            <svg width="18" height="18" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+            </svg>
+            <!-- Badge si téléchargements actifs -->
+            <span v-if="activeDownloads > 0"
+                  class="absolute top-1 right-1 w-2 h-2 bg-[#e8513a] rounded-full"/>
+          </router-link>
+          <router-link
+              to="/settings"
+              class="p-2 rounded-lg text-zinc-500 hover:text-zinc-100 hover:bg-white/5 transition"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+            </svg>
+          </router-link>
+          <button
+              class="p-2 rounded-lg text-zinc-500 hover:text-zinc-100 hover:bg-white/5 transition"
+              @click="handleLogout"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Search + Filters -->
+      <div class="max-w-7xl mx-auto px-6 pb-3 flex flex-wrap items-center gap-3">
+        <div class="relative flex-1 min-w-48 max-w-sm">
+          <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-600 pointer-events-none" width="15" height="15" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+          </svg>
+          <input
+              v-model="search"
+              type="text"
+              placeholder="Rechercher…"
+              class="w-full bg-white/5 border border-white/[0.08] rounded-lg pl-9 pr-4 py-2 text-sm placeholder-zinc-600 outline-none focus:border-orange-500/50 transition"
+          />
+        </div>
+        <div class="flex gap-1">
+          <button
+              v-for="f in filters"
+              :key="f.value"
+              class="px-3 py-1.5 rounded-lg text-xs font-medium border transition"
+              :class="activeFilter === f.value
+              ? 'bg-orange-500 border-orange-500 text-white'
+              : 'bg-transparent border-white/[0.08] text-zinc-500 hover:text-zinc-100 hover:border-white/20'"
+              @click="activeFilter = f.value"
+          >{{ f.label }}</button>
+        </div>
+        <span class="text-xs text-zinc-600 ml-auto">{{ filtered.length }} série{{ filtered.length > 1 ? 's' : '' }}</span>
+      </div>
+    </header>
+
+    <!-- Main -->
+    <main class="max-w-7xl mx-auto px-6 py-8">
+
+      <!-- Loading -->
+      <div v-if="store.loadingSeries" class="flex flex-col items-center justify-center gap-4 min-h-96 text-zinc-600">
+        <div class="w-8 h-8 border-2 border-white/10 border-t-orange-500 rounded-full animate-spin" />
+        <p class="text-sm">Chargement du catalogue…</p>
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="store.error" class="flex flex-col items-center justify-center gap-4 min-h-96 text-orange-400">
+        <svg width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+          <circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>
+        </svg>
+        <p class="text-sm">{{ store.error }}</p>
+        <button class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm hover:bg-orange-600 transition" @click="store.fetchSeries()">
+          Réessayer
+        </button>
+      </div>
+
+      <!-- Empty -->
+      <div v-else-if="filtered.length === 0" class="flex flex-col items-center justify-center gap-3 min-h-96 text-zinc-600">
+        <p class="text-sm">Aucune série trouvée</p>
+      </div>
+
+      <!-- Grid -->
+      <div v-else class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-5">
+        <router-link
+            v-for="serie in filtered"
+            :key="serie.id"
+            :to="`/series/${serie.id}`"
+            class="group flex flex-col gap-2 transition-transform duration-200 hover:-translate-y-1"
+            :class="{ 'opacity-40': !serie.has_torrents }"
+        >
+          <!-- Poster -->
+          <div class="relative aspect-[2/3] rounded-xl overflow-hidden bg-zinc-900 border border-white/5">
+            <img
+                v-if="serie.poster_image"
+                :src="serie.poster_image"
+                :alt="serie.title"
+                loading="lazy"
+                class="w-full h-full object-cover"
+            />
+            <div v-else class="w-full h-full flex items-center justify-center text-zinc-700">
+              <svg width="28" height="28" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <rect x="2" y="2" width="20" height="20" rx="2"/>
+                <path d="m9 9 6 6M15 9l-6 6"/>
+              </svg>
+            </div>
+
+            <!-- Badge torrents dispo -->
+            <div v-if="serie.has_torrents" class="absolute top-2 right-2 bg-orange-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full leading-none">
+              {{ serie.torrent_count }}
+            </div>
+
+            <!-- Overlay hover -->
+            <div class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+              <span class="text-xs text-white border border-white/40 px-3 py-1.5 rounded-md">Voir</span>
+            </div>
+          </div>
+
+          <!-- Info -->
+          <div>
+            <p class="text-xs font-medium truncate leading-snug">{{ serie.title }}</p>
+            <div class="flex items-center gap-1.5 mt-0.5">
+              <span v-if="serie.year" class="text-[11px] text-zinc-600">{{ serie.year }}</span>
+              <span
+                  v-if="serie.status"
+                  class="text-[10px] px-1.5 py-0.5 rounded"
+                  :class="serie.status.toLowerCase() === 'continuing'
+                  ? 'bg-green-500/10 text-green-400'
+                  : 'bg-white/5 text-zinc-600'"
+              >{{ serie.status }}</span>
+            </div>
+          </div>
+        </router-link>
+      </div>
+
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useSeriesStore } from '@/stores/series'
+import { useAuthStore } from '@/stores/auth'
+
+defineOptions({ name: 'CatalogView' })
+
+const store = useSeriesStore()
+const auth = useAuthStore()
+const router = useRouter()
+
+const search = ref('')
+const activeFilter = ref('all')
+
+const filters = [
+  { label: 'Toutes', value: 'all' },
+  { label: 'Disponibles', value: 'available' },
+  { label: 'Sans torrent', value: 'unavailable' },
+]
+
+const filtered = computed(() => {
+  let list = store.series
+  if (activeFilter.value === 'available') list = list.filter(s => s.has_torrents)
+  if (activeFilter.value === 'unavailable') list = list.filter(s => !s.has_torrents)
+  if (search.value.trim()) {
+    const q = search.value.toLowerCase()
+    list = list.filter(s => s.title.toLowerCase().includes(q))
+  }
+  return list
+})
+
+async function handleLogout() {
+  await auth.logout()
+  router.push('/auth')
+}
+
+onMounted(() => {
+  if (store.series.length === 0) store.fetchSeries()
+})
+</script>

src/views/DownloadsView.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="max-w-4xl mx-auto px-8 py-8">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-8">
+      <div class="flex items-center gap-4">
+        <button @click="$router.push('/')"
+                class="text-[#5a7a94] text-xs tracking-widest hover:text-[#e8513a] transition-colors cursor-pointer">
+          ← CATALOGUE
+        </button>
+        <h1 class="text-xl font-black text-white font-sans">Téléchargements</h1>
+      </div>
+      <div class="flex items-center gap-3">
+        <!-- Indicateur de polling -->
+        <div class="flex items-center gap-2 text-[10px] text-[#5a7a94] tracking-widest">
+          <div class="w-1.5 h-1.5 rounded-full" :class="polling ? 'bg-green-500 animate-pulse' : 'bg-[#1e2d3d]'"/>
+          {{ polling ? 'EN DIRECT' : 'PAUSE' }}
+        </div>
+        <button @click="togglePolling"
+                class="border border-[#1e2d3d] text-[#5a7a94] px-4 py-1.5 text-xs tracking-widest hover:border-[#e8513a] hover:text-[#e8513a] transition-colors cursor-pointer">
+          {{ polling ? 'PAUSE' : 'REPRENDRE' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Résumé -->
+    <div class="grid grid-cols-4 gap-3 mb-6">
+      <div v-for="stat in stats" :key="stat.label" class="bg-[#0d1219] border border-[#1e2d3d] p-4">
+        <div class="text-[10px] text-[#5a7a94] tracking-widest mb-1">{{ stat.label }}</div>
+        <div class="text-lg font-bold text-white">{{ stat.value }}</div>
+      </div>
+    </div>
+
+    <!-- Pas de clients -->
+    <div v-if="noClients" class="flex flex-col items-center justify-center gap-3 min-h-64 text-[#5a7a94]">
+      <p class="text-sm">Aucun client torrent configuré</p>
+      <router-link to="/settings"
+                   class="text-[10px] tracking-widest text-[#e8513a] hover:opacity-75 transition-opacity">
+        CONFIGURER →
+      </router-link>
+    </div>
+
+    <!-- Loading -->
+    <div v-else-if="loading && torrents.length === 0" class="flex items-center justify-center gap-3 min-h-64 text-[#5a7a94]">
+      <div class="w-5 h-5 border-2 border-white/10 border-t-[#e8513a] rounded-full animate-spin"/>
+      <span class="text-sm">Chargement...</span>
+    </div>
+
+    <!-- Vide -->
+    <div v-else-if="!loading && torrents.length === 0" class="flex flex-col items-center justify-center gap-3 min-h-64 text-[#5a7a94]">
+      <p class="text-sm">Aucun téléchargement en cours</p>
+      <p class="text-[11px]">Les torrents lancés depuis Fankarr apparaîtront ici</p>
+    </div>
+
+    <!-- Liste torrents -->
+    <div v-else class="flex flex-col gap-2">
+      <div v-for="t in torrents" :key="t.hash"
+           class="bg-[#0d1219] border border-[#1e2d3d] p-4">
+
+        <!-- Ligne principale -->
+        <div class="flex items-start justify-between gap-4 mb-3">
+          <div class="flex-1 min-w-0">
+            <p class="text-sm text-white font-medium truncate">{{ t.name }}</p>
+            <div class="flex items-center gap-3 mt-1">
+              <!-- Badge état -->
+              <span class="text-[10px] tracking-widest px-2 py-0.5 border"
+                    :class="stateBadge(t.state).class">
+                {{ stateBadge(t.state).label }}
+              </span>
+              <!-- Client -->
+              <span class="text-[10px] text-[#5a7a94]">{{ t.client_name }}</span>
+            </div>
+          </div>
+
+          <!-- Infos droite -->
+          <div class="text-right shrink-0">
+            <p class="text-sm font-bold text-white">{{ t.progress }}%</p>
+            <p class="text-[10px] text-[#5a7a94] mt-0.5">
+              {{ formatSize(t.downloaded) }} / {{ formatSize(t.size) }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Barre de progression -->
+        <div class="h-1 bg-[#1e2d3d] rounded-full overflow-hidden mb-2">
+          <div class="h-full rounded-full transition-all duration-500"
+               :class="t.state === 'seeding' ? 'bg-green-500' :
+                      t.state === 'error'   ? 'bg-red-500'   :
+                      t.state === 'paused'  ? 'bg-[#5a7a94]' : 'bg-[#e8513a]'"
+               :style="{ width: `${t.progress}%` }"/>
+        </div>
+
+        <!-- Infos bas -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-4 text-[10px] text-[#5a7a94]">
+            <span v-if="t.state === 'downloading'">
+              ↓ {{ formatSpeed(t.speed) }}
+            </span>
+            <span v-if="t.state === 'downloading' && t.eta > 0">
+              ETA {{ formatEta(t.eta) }}
+            </span>
+            <span v-if="t.state === 'seeding'" class="text-green-500">
+              ✓ Complété
+            </span>
+          </div>
+
+          <!-- Bouton organiser si complété -->
+          <button v-if="t.state === 'seeding'"
+                  @click="organize(t)"
+                  :disabled="organizing[t.hash]"
+                  class="text-[10px] tracking-widest px-3 py-1 border transition-colors cursor-pointer"
+                  :class="organized[t.hash]
+                ? 'border-green-500/40 text-green-500'
+                : 'border-[#1e2d3d] text-[#5a7a94] hover:border-[#e8513a] hover:text-[#e8513a]'">
+            {{ organized[t.hash] ? 'ORGANISÉ ✓' : organizing[t.hash] ? '...' : 'ORGANISER' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useToast } from '@/composables/useToast'
+
+const { add: toast } = useToast()
+
+const torrents   = ref<any[]>([])
+const loading    = ref(true)
+const polling    = ref(true)
+const noClients  = ref(false)
+const organizing = ref<Record<string, boolean>>({})
+const organized  = ref<Record<string, boolean>>({})
+
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+// ── Stats ──────────────────────────────────────────────────────
+const stats = computed(() => [
+  { label: 'EN COURS',  value: torrents.value.filter(t => t.state === 'downloading').length },
+  { label: 'COMPLÉTÉS', value: torrents.value.filter(t => t.state === 'seeding').length },
+  { label: 'EN PAUSE',  value: torrents.value.filter(t => t.state === 'paused').length },
+  { label: 'ERREURS',   value: torrents.value.filter(t => t.state === 'error').length },
+])
+
+// ── Fetch ──────────────────────────────────────────────────────
+async function fetchTorrents() {
+  try {
+    const res = await fetch('/api/downloads', { credentials: 'include' })
+    if (res.status === 503) { noClients.value = true; return }
+    if (!res.ok) return
+    torrents.value  = await res.json()
+    noClients.value = false
+  } catch {
+    // silencieux en polling
+  } finally {
+    loading.value = false
+  }
+}
+
+function startPolling() {
+  fetchTorrents()
+  pollInterval = setInterval(fetchTorrents, 3000)
+}
+
+function stopPolling() {
+  if (pollInterval) { clearInterval(pollInterval); pollInterval = null }
+}
+
+function togglePolling() {
+  polling.value = !polling.value
+  if (polling.value) startPolling()
+  else stopPolling()
+}
+
+onMounted(startPolling)
+onUnmounted(stopPolling)
+
+// ── Organiser ──────────────────────────────────────────────────
+async function organize(torrent: any) {
+  organizing.value[torrent.hash] = true
+  try {
+    const res = await fetch('/api/organize', {
+      method : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ hash: torrent.hash, save_path: torrent.save_path, name: torrent.name })
+    })
+    if (res.ok) {
+      organized.value[torrent.hash] = true
+      toast(`${torrent.name} organisé ✓`, 'success')
+    } else {
+      const { error } = await res.json()
+      toast(error ?? 'Erreur lors de l\'organisation', 'error')
+    }
+  } catch {
+    toast('Impossible de contacter le serveur', 'error')
+  } finally {
+    organizing.value[torrent.hash] = false
+  }
+}
+
+// ── Helpers affichage ──────────────────────────────────────────
+function stateBadge(state: string) {
+  const map: Record<string, { label: string; class: string }> = {
+    downloading: { label: 'TÉLÉCHARGEMENT', class: 'border-[#e8513a]/40 text-[#e8513a]' },
+    seeding    : { label: 'COMPLÉTÉ',       class: 'border-green-500/40 text-green-500' },
+    paused     : { label: 'EN PAUSE',       class: 'border-[#5a7a94]/40 text-[#5a7a94]' },
+    checking   : { label: 'VÉRIFICATION',   class: 'border-yellow-500/40 text-yellow-500' },
+    error      : { label: 'ERREUR',         class: 'border-red-500/40 text-red-500' },
+    unknown    : { label: 'INCONNU',        class: 'border-[#1e2d3d] text-[#5a7a94]' },
+  }
+  return map[state] ?? map.unknown
+}
+
+function formatSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`
+}
+
+function formatSpeed(bps: number): string {
+  return `${formatSize(bps)}/s`
+}
+
+function formatEta(seconds: number): string {
+  if (seconds < 0 || seconds > 86400 * 7) return '∞'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+  if (h > 0) return `${h}h${m.toString().padStart(2, '0')}m`
+  if (m > 0) return `${m}m${s.toString().padStart(2, '0')}s`
+  return `${s}s`
+}
+</script>

src/views/ProductionView.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="max-w-5xl mx-auto px-8 py-8">
+    <!-- Back -->
+    <button
+        @click="$router.push('/')"
+        class="text-[#5a7a94] text-xs tracking-widest hover:text-[#e8513a] transition-colors mb-8 cursor-pointer"
+    >
+      ← CATALOGUE
+    </button>
+
+    <!-- Loading -->
+    <div v-if="loading" class="text-[#5a7a94] text-sm tracking-widest py-20 text-center">
+      CHARGEMENT...
+    </div>
+
+    <template v-else-if="production">
+      <!-- Hero -->
+      <div class="flex gap-8 mb-10">
+        <!-- Poster -->
+        <div class="w-40 flex-shrink-0">
+          <img
+              v-if="production.cover"
+              :src="imageUrl(production.cover)"
+              :alt="production.name"
+              class="w-full object-cover"
+          />
+          <div v-else class="w-full aspect-[2/3] bg-[#0d1219] flex items-center justify-center text-5xl">🎌</div>
+        </div>
+
+        <!-- Info -->
+        <div class="flex-1">
+          <div class="text-[10px] text-[#e8513a] tracking-widest mb-2">FANKAI</div>
+          <h1 class="text-3xl font-black text-white font-sans mb-4">{{ production.name }}</h1>
+
+          <!-- Badges -->
+          <div class="flex flex-wrap gap-2 mb-4">
+            <span class="text-[10px] border border-[#1e2d3d] text-[#5a7a94] px-2 py-1 tracking-wider">
+              {{ production.status.toUpperCase() }}
+            </span>
+            <span class="text-[10px] border border-[#3a8fe8] text-[#3a8fe8] bg-[#3a8fe8]/10 px-2 py-1 tracking-wider">
+              {{ production.episodes_count }} FILMS
+            </span>
+            <span class="text-[10px] border border-[#1e2d3d] text-[#5a7a94] px-2 py-1 tracking-wider">
+              PAR {{ production.kaieur.toUpperCase() }}
+            </span>
+          </div>
+
+          <p class="text-sm text-[#5a7a94] leading-relaxed mb-6">{{ production.description }}</p>
+
+          <!-- Torrents globaux -->
+          <div v-if="torrents.length > 0">
+            <div class="text-[10px] text-[#5a7a94] tracking-widest mb-2">TORRENTS</div>
+            <div class="flex flex-col gap-2">
+              <a
+                v-for="t in torrents"
+                :key="t.url"
+                :href="t.url"
+                target="_blank"
+                class="flex items-center justify-between bg-[#0d1219] border border-[#1e2d3d] hover:border-[#e8513a] px-4 py-2.5 transition-colors group"
+              >
+                <span class="text-sm text-white">{{ t.name }}</span>
+                <span class="text-[10px] text-[#e8513a] tracking-widest group-hover:text-white transition-colors">
+                    NYAA ↗
+                </span>
+              </a>
+            </div>
+          </div>
+
+          <!-- Lien wiki -->
+          <a
+            v-if="production.link"
+            :href="production.link"
+            target="_blank"
+            class="inline-block mt-4 text-[10px] text-[#5a7a94] hover:text-[#3a8fe8] tracking-widest transition-colors"
+          >
+            GUIDE DES ÉPISODES ↗
+          </a>
+        </div>
+      </div>
+
+      <!-- Saisons -->
+      <!-- Saisons -->
+      <div v-if="production.seasons.length > 0" class="space-y-6">
+        <div v-for="season in production.seasons" :key="season.id">
+          <div class="flex items-center gap-4 mb-3">
+            <div class="text-[10px] text-[#5a7a94] tracking-widest">SAISON {{ season.number }}</div>
+            <div class="text-sm font-bold text-white">{{ season.name }}</div>
+            <div class="flex-1 h-px bg-[#1e2d3d]"></div>
+          </div>
+          <div class="grid grid-cols-1 gap-px bg-[#1e2d3d]">
+            <div v-for="ep in season.episodes" :key="ep.id">
+              <EpisodeRow :ep="ep" :production-id="production.id" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Episodes sans saison -->
+      <div v-else-if="production.episodes.length > 0">
+        <div class="flex items-center gap-4 mb-3">
+          <div class="text-sm font-bold text-white">ÉPISODES</div>
+          <div class="flex-1 h-px bg-[#1e2d3d]"></div>
+        </div>
+        <div class="grid grid-cols-1 gap-px bg-[#1e2d3d]">
+          <div v-for="ep in production.episodes" :key="ep.id">
+            <EpisodeRow :ep="ep" :production-id="production.id" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useCatalogStore } from '@/stores/catalog'
+import { imageUrl, parseTorrents, type ProductionDetail } from '@/api/fankai'
+import EpisodeRow from "@/components/EpisodeRow.vue";
+
+const route = useRoute()
+const store = useCatalogStore()
+
+const production = ref<ProductionDetail | null>(null)
+const loading = ref(true)
+
+const torrents = computed(() => parseTorrents(production.value?.torrents ?? null))
+
+onMounted(async () => {
+  const id = Number(route.params.id)
+  const name = route.query.name as string ?? ''
+  production.value = await store.loadProduction(id, name)
+  loading.value = false
+})
+</script>

src/views/SerieView.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="min-h-screen bg-zinc-950 text-zinc-100">
+
+    <!-- Back -->
+    <div class="max-w-7xl mx-auto px-6 pt-6">
+      <router-link to="/" class="inline-flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-100 transition">
+        <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path d="M19 12H5M12 5l-7 7 7 7"/>
+        </svg>
+        Catalogue
+      </router-link>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="store.loadingDetail" class="flex flex-col items-center justify-center gap-4 min-h-96 text-zinc-600">
+      <div class="w-8 h-8 border-2 border-white/10 border-t-orange-500 rounded-full animate-spin" />
+      <p class="text-sm">Chargement…</p>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="store.error" class="flex flex-col items-center justify-center gap-4 min-h-96 text-orange-400">
+      <p class="text-sm">{{ store.error }}</p>
+      <button class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm" @click="load">Réessayer</button>
+    </div>
+
+    <template v-else-if="data">
+      <!-- Hero -->
+      <div class="relative">
+        <div v-if="data.serie.fanart_image" class="absolute inset-0 h-72 overflow-hidden pointer-events-none">
+          <img :src="data.serie.fanart_image" class="w-full h-full object-cover opacity-20" alt="fanart image"/>
+          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950" />
+        </div>
+
+        <div class="relative max-w-7xl mx-auto px-6 pt-8 pb-10 flex gap-8">
+          <!-- Poster -->
+          <div class="shrink-0 w-36 rounded-xl overflow-hidden border border-white/10 shadow-2xl hidden sm:block">
+            <img v-if="data.serie.poster_image" :src="data.serie.poster_image" class="w-full h-full object-cover" alt="poster image"/>
+            <div v-else class="w-full aspect-[2/3] bg-zinc-900 flex items-center justify-center text-zinc-700">
+              <svg width="28" height="28" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <rect x="2" y="2" width="20" height="20" rx="2"/><path d="m9 9 6 6M15 9l-6 6"/>
+              </svg>
+            </div>
+          </div>
+
+          <!-- Info -->
+          <div class="flex flex-col gap-3 justify-end min-w-0">
+            <h1 class="text-3xl font-bold tracking-tight">{{ data.serie.title }}</h1>
+            <div class="flex flex-wrap items-center gap-2">
+              <span v-if="data.serie.year" class="text-sm text-zinc-400">{{ data.serie.year }}</span>
+              <span
+                  v-if="data.serie.status"
+                  class="text-xs px-2 py-0.5 rounded-full font-medium border"
+                  :class="data.serie.status.toLowerCase() === 'continuing'
+                  ? 'bg-green-500/15 text-green-400 border-green-500/20'
+                  : 'bg-white/5 text-zinc-500 border-white/10'"
+              >{{ data.serie.status }}</span>
+            </div>
+            <p v-if="data.serie.plot" class="text-sm text-zinc-400 leading-relaxed max-w-2xl line-clamp-3">
+              {{ data.serie.plot }}
+            </p>
+
+            <!-- Boutons hero : intégrale, pack_saison promu, pack_episodes -->
+            <div class="flex flex-wrap gap-2 mt-1">
+              <button
+                  v-for="(t, i) in data.torrents_integrale"
+                  :key="i"
+                  class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
+                  :class="t.label === 'Intégrale'
+                  ? 'bg-orange-500 hover:bg-orange-600 text-white'
+                  : 'bg-orange-500/10 hover:bg-orange-500/20 text-orange-400 border border-orange-500/20'"
+                  :disabled="downloading === `integrale-${i}`"
+                  @click="download(`integrale-${i}`, t.torrent_url, t.magnet)"
+              >
+                <DownloadIcon :spinning="downloading === `integrale-${i}`" />
+                {{ t.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Seasons -->
+      <div class="max-w-7xl mx-auto px-6 pb-16 flex flex-col gap-6">
+        <div
+            v-for="season in data.seasons"
+            :key="season.id"
+            class="bg-zinc-900/50 border border-white/5 rounded-2xl overflow-hidden"
+        >
+          <!-- Season header -->
+          <div class="flex items-center justify-between px-5 py-4 border-b border-white/5">
+            <div class="flex items-center gap-3">
+              <button class="text-zinc-500 hover:text-zinc-100 transition" @click="toggleSeason(season.id)">
+                <svg
+                    width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
+                    class="transition-transform duration-200"
+                    :class="collapsedSeasons.has(season.id) ? '' : 'rotate-180'"
+                >
+                  <path d="M18 15l-6-6-6 6"/>
+                </svg>
+              </button>
+              <div>
+                <h2 class="font-semibold text-sm">
+                  {{ season.season_number === 0 ? 'Spéciaux' : `Saison ${season.season_number}` }}
+                  <span v-if="season.title && season.title !== `Saison ${season.season_number}`" class="text-zinc-500 font-normal ml-1">
+                    — {{ season.title }}
+                  </span>
+                </h2>
+                <p class="text-xs text-zinc-600 mt-0.5">
+                  {{ season.episodes.length }} épisode{{ season.episodes.length > 1 ? 's' : '' }}
+                  · {{ seasonAvailableCount(season) }}/{{ season.episodes.length }} dispo
+                </p>
+              </div>
+            </div>
+
+            <!-- Bouton pack_saison sur le header -->
+            <button
+                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border transition"
+                :class="season.torrent
+                ? 'bg-orange-500/10 hover:bg-orange-500/20 text-orange-400 border-orange-500/20'
+                : 'bg-white/[0.03] text-zinc-600 border-white/8 cursor-not-allowed'"
+                :disabled="!season.torrent || downloading === `season-${season.id}`"
+                @click="season.torrent && download(`season-${season.id}`, season.torrent.torrent_url, season.torrent.magnet)"
+            >
+              <DownloadIcon :spinning="downloading === `season-${season.id}`" :size="12" />
+              Saison entière
+            </button>
+          </div>
+
+          <!-- Episodes -->
+          <div v-if="!collapsedSeasons.has(season.id)" class="divide-y divide-white/[0.04]">
+            <div
+                v-for="ep in season.episodes"
+                :key="ep.id"
+                class="flex items-center gap-4 px-5 py-3 hover:bg-white/[0.02] transition"
+            >
+              <!-- Thumbnail -->
+              <div class="shrink-0 w-24 aspect-video rounded-lg overflow-hidden bg-zinc-800 hidden sm:block">
+                <img v-if="ep.thumb_image" :src="ep.thumb_image" class="w-full h-full object-cover" loading="lazy" alt="thumb image"/>
+                <div v-else class="w-full h-full flex items-center justify-center text-zinc-700 text-xs font-mono">
+                  {{ season.season_number === 0 ? 'SP' : `E${ep.episode_number}` }}
+                </div>
+              </div>
+
+              <!-- Info -->
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2">
+                  <span class="text-xs text-zinc-600 shrink-0 font-mono">
+                    {{ season.season_number === 0 ? 'SP' : `E${String(ep.episode_number).padStart(2,'0')}` }}
+                  </span>
+                  <span class="text-sm font-medium truncate">{{ ep.title || `Épisode ${ep.episode_number}` }}</span>
+                </div>
+                <div class="flex items-center gap-3 mt-0.5">
+                  <span v-if="ep.aired" class="text-xs text-zinc-600">{{ formatDate(ep.aired) }}</span>
+                  <span v-if="ep.duration" class="text-xs text-zinc-600">{{ ep.duration }} min</span>
+                </div>
+              </div>
+
+              <!-- Bouton épisode (type episode uniquement) -->
+              <div class="shrink-0">
+                <!-- Badge dispo/indispo basé sur available (episode résolu dans un torrent) -->
+                <span
+                    class="inline-block text-[10px] px-2 py-0.5 rounded-full border mr-2"
+                    :class="ep.available
+                    ? 'bg-green-500/10 text-green-400 border-green-500/20'
+                    : 'bg-white/5 text-zinc-600 border-white/8'"
+                >
+                  {{ ep.available ? 'dispo' : 'indispo' }}
+                </span>
+
+                <!-- Bouton download — visible seulement si type=episode, sinon grisé -->
+                <button
+                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border transition"
+                    :class="ep.torrent
+                    ? 'bg-orange-500/10 hover:bg-orange-500/20 text-orange-400 border-orange-500/20'
+                    : 'bg-white/[0.03] text-zinc-600 border-white/8 cursor-not-allowed'"
+                    :disabled="!ep.torrent || downloading === `ep-${ep.id}`"
+                    @click="ep.torrent && download(`ep-${ep.id}`, ep.torrent.torrent_url, ep.torrent.magnet)"
+                >
+                  <DownloadIcon :spinning="downloading === `ep-${ep.id}`" :size="12" />
+                  Ep.
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Toast -->
+    <Transition name="toast">
+      <div
+          v-if="toast"
+          class="fixed bottom-6 right-6 flex items-center gap-3 px-4 py-3 rounded-xl shadow-2xl text-sm font-medium z-50"
+          :class="toast.type === 'success'
+          ? 'bg-zinc-800 border border-green-500/30 text-green-400'
+          : 'bg-zinc-800 border border-red-500/30 text-red-400'"
+      >
+        <svg v-if="toast.type === 'success'" width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+          <path d="M20 6 9 17l-5-5"/>
+        </svg>
+        <svg v-else width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+          <circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>
+        </svg>
+        {{ toast.message }}
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, defineComponent, h } from 'vue'
+import { useRoute } from 'vue-router'
+import { useSeriesStore } from '@/stores/series'
+import type { Season } from '@/stores/series'
+
+// ── Composant icône download ──────────────────────────────────
+const DownloadIcon = defineComponent({
+  props: { spinning: Boolean, size: { type: Number, default: 14 } },
+  setup(props) {
+    return () => props.spinning
+        ? h('div', { class: `w-${props.size === 12 ? '3' : '3.5'} h-${props.size === 12 ? '3' : '3.5'} border border-current/30 border-t-current rounded-full animate-spin` })
+        : h('svg', { width: props.size, height: props.size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' }, [
+          h('path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3' })
+        ])
+  }
+})
+
+// ── Setup ─────────────────────────────────────────────────────
+const route = useRoute()
+const store = useSeriesStore()
+
+const collapsedSeasons = ref<Set<number>>(new Set())
+const downloading = ref<string | null>(null)
+const toast = ref<{ type: 'success' | 'error'; message: string } | null>(null)
+
+const data = computed(() => store.currentSerie)
+
+function seasonAvailableCount(season: Season) {
+  return season.episodes.filter(e => e.available).length
+}
+
+function toggleSeason(id: number) {
+  if (collapsedSeasons.value.has(id)) collapsedSeasons.value.delete(id)
+  else collapsedSeasons.value.add(id)
+}
+
+function formatDate(d: string) {
+  if (!d) return ''
+  return new Date(d).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function showToast(type: 'success' | 'error', message: string) {
+  toast.value = { type, message }
+  setTimeout(() => { toast.value = null }, 3500)
+}
+
+async function download(key: string, torrent_url: string | null, magnet: string | null) {
+  downloading.value = key
+  const result = await store.download(torrent_url, magnet)
+  downloading.value = null
+  if (result.success) showToast('success', 'Ajouté à qBittorrent !')
+  else showToast('error', result.error ?? 'Erreur inconnue')
+}
+
+function load() {
+  store.fetchSerieDetail(Number(route.params.id))
+}
+
+onMounted(load)
+</script>
+
+<style scoped>
+.toast-enter-active, .toast-leave-active { transition: all 0.25s ease; }
+.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(6px); }
+</style>

src/views/SettingsView.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="max-w-2xl mx-auto px-8 py-8">
+    <!-- Header -->
+    <div class="flex items-center gap-4 mb-8">
+      <button
+          @click="$router.push('/')"
+          class="text-[#5a7a94] text-xs tracking-widest hover:text-[#e8513a] transition-colors cursor-pointer">
+        ← CATALOGUE
+      </button>
+      <h1 class="text-xl font-black text-white font-sans">Paramètres</h1>
+    </div>
+
+    <!-- Bannière données manquantes -->
+    <div v-if="torrentsStatus.empty" class="border border-[#e8513a]/40 bg-[#e8513a]/5 p-4 mb-6 flex items-center justify-between gap-4">
+      <div>
+        <div class="text-[10px] text-[#e8513a] tracking-widest mb-1">DONNÉES MANQUANTES</div>
+        <p class="text-sm text-[#a0b4c4]">
+          {{ torrentsStatus.exists ? 'Le fichier de torrents est vide.' : 'Aucun fichier de torrents trouvé.' }}
+          Téléchargez les données pour utiliser Fankarr.
+        </p>
+      </div>
+      <button @click="update" :disabled="updating"
+              class="bg-[#e8513a] text-white px-5 py-2.5 text-xs tracking-widest hover:opacity-85 transition-opacity disabled:opacity-50 cursor-pointer whitespace-nowrap">
+        {{ updating ? 'TÉLÉCHARGEMENT...' : 'TÉLÉCHARGER' }}
+      </button>
+    </div>
+
+    <!-- Données torrents -->
+    <div class="bg-[#0d1219] border border-[#1e2d3d] p-6 mb-4">
+      <div class="text-[10px] text-[#e8513a] tracking-widest mb-1">DONNÉES</div>
+      <h2 class="text-sm font-bold text-white mb-1">Torrents Fankai</h2>
+      <p class="text-[11px] text-[#5a7a94] mb-5">
+        {{ torrentsStatus.empty ? 'Aucune donnée chargée' : `${torrentsStatus.count} torrents chargés` }}
+      </p>
+      <button @click="update" :disabled="updating"
+              class="bg-[#e8513a] text-white px-6 py-2.5 text-xs tracking-widest hover:opacity-85 transition-opacity disabled:opacity-50 cursor-pointer">
+        {{ updating ? 'MISE À JOUR...' : 'METTRE À JOUR' }}
+      </button>
+    </div>
+
+    <!-- Clients torrent -->
+    <div class="bg-[#0d1219] border border-[#1e2d3d] p-6 mb-4">
+      <div class="text-[10px] text-[#e8513a] tracking-widest mb-1">TÉLÉCHARGEMENT</div>
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-sm font-bold text-white">Clients torrent</h2>
+        <button @click="openAddModal"
+                class="border border-[#1e2d3d] text-[#5a7a94] px-4 py-1.5 text-xs tracking-widest hover:border-[#e8513a] hover:text-[#e8513a] transition-colors cursor-pointer">
+          + AJOUTER
+        </button>
+      </div>
+
+      <div v-if="clients.length === 0" class="text-[11px] text-[#5a7a94]">
+        Aucun client configuré
+      </div>
+      <div v-else class="flex flex-col gap-2">
+        <div v-for="client in clients" :key="client.uuid"
+             class="flex items-center justify-between border border-[#1e2d3d] px-4 py-3">
+          <div class="flex items-center gap-3">
+            <div class="w-2 h-2 rounded-full"
+                 :class="healthStatus[client.uuid] === true  ? 'bg-green-500' :
+                        healthStatus[client.uuid] === false ? 'bg-red-500'   : 'bg-[#1e2d3d]'"/>
+            <div>
+              <p class="text-sm text-white font-medium">{{ client.name }}</p>
+              <p class="text-[10px] text-[#5a7a94] tracking-widest mt-0.5">{{ clientLabel(client.type) }}</p>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <button @click="testClient(client.uuid)"
+                    class="text-[10px] text-[#5a7a94] tracking-widest hover:text-[#3a8fe8] transition-colors cursor-pointer px-2 py-1">
+              TESTER
+            </button>
+            <button @click="deleteClient(client.uuid)"
+                    class="text-[10px] text-[#5a7a94] tracking-widest hover:text-[#e8513a] transition-colors cursor-pointer px-2 py-1">
+              SUPPRIMER
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Médias & Organisation -->
+    <div class="bg-[#0d1219] border border-[#1e2d3d] p-6 mb-4">
+      <div class="text-[10px] text-[#e8513a] tracking-widest mb-1">MÉDIAS</div>
+      <h2 class="text-sm font-bold text-white mb-6">Organisation</h2>
+
+      <div class="flex flex-col gap-5">
+
+        <!-- Dossier complétion -->
+        <div>
+          <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">DOSSIER COMPLÉTION</label>
+          <input v-model="form.completePath"
+                 class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"
+                 placeholder="/downloads/complete"/>
+          <p class="text-[10px] text-[#5a7a94] mt-1.5">Dossier de complétion de qBittorrent (monté dans Docker)</p>
+        </div>
+
+        <!-- Dossier Jellyfin -->
+        <div>
+          <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">DOSSIER JELLYFIN</label>
+          <input v-model="form.mediaPath"
+                 class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"
+                 placeholder="/media/Kai"/>
+          <p class="text-[10px] text-[#5a7a94] mt-1.5">Dossier racine de la bibliothèque Fankai dans Jellyfin</p>
+        </div>
+
+        <!-- Mode organisation -->
+        <div>
+          <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-2">MODE</label>
+          <div class="flex gap-2">
+            <button @click="form.organizeMode = 'hardlink'"
+                    class="px-5 py-2 text-xs tracking-widest border transition-colors cursor-pointer"
+                    :class="form.organizeMode === 'hardlink'
+                  ? 'border-[#e8513a] text-[#e8513a] bg-[#e8513a]/5'
+                  : 'border-[#1e2d3d] text-[#5a7a94] hover:border-[#5a7a94]'">
+              HARDLINK
+            </button>
+            <button @click="form.organizeMode = 'move'"
+                    class="px-5 py-2 text-xs tracking-widest border transition-colors cursor-pointer"
+                    :class="form.organizeMode === 'move'
+                  ? 'border-[#e8513a] text-[#e8513a] bg-[#e8513a]/5'
+                  : 'border-[#1e2d3d] text-[#5a7a94] hover:border-[#5a7a94]'">
+              MOVE
+            </button>
+          </div>
+          <p class="text-[10px] text-[#5a7a94] mt-1.5">
+            <span class="text-white">Hardlink recommandé</span> — le fichier reste dans qBittorrent pour le ratio
+          </p>
+        </div>
+
+        <div class="pt-1">
+          <button type="button" @click="save" :disabled="saving"
+                  class="bg-[#e8513a] text-white px-6 py-2.5 text-xs tracking-widest hover:opacity-85 transition-opacity disabled:opacity-50 cursor-pointer">
+            {{ saving ? '...' : 'SAUVEGARDER' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Compte -->
+    <div class="bg-[#0d1219] border border-[#1e2d3d] p-6">
+      <div class="text-[10px] text-[#e8513a] tracking-widest mb-1">COMPTE</div>
+      <h2 class="text-sm font-bold text-white mb-6">Session</h2>
+      <button type="button" @click="logout"
+              class="border border-[#1e2d3d] text-[#5a7a94] px-6 py-2.5 text-xs tracking-widest hover:border-[#e8513a] hover:text-[#e8513a] transition-colors cursor-pointer">
+        SE DÉCONNECTER
+      </button>
+    </div>
+
+    <!-- Modal ajout client -->
+    <div v-if="modal.open" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
+      <div class="bg-[#0d1219] border border-[#1e2d3d] w-full max-w-md p-6">
+        <div class="flex items-center justify-between mb-6">
+          <h3 class="text-sm font-bold text-white">Ajouter un client</h3>
+          <button @click="closeModal" class="text-[#5a7a94] hover:text-white transition-colors cursor-pointer">✕</button>
+        </div>
+
+        <div class="mb-4">
+          <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">NOM</label>
+          <input v-model="modal.name" placeholder="Mon qBittorrent"
+                 class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"/>
+        </div>
+
+        <div class="mb-4">
+          <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">TYPE</label>
+          <select v-model="modal.type" @change="onTypeChange"
+                  class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors cursor-pointer">
+            <option value="">Choisir un type...</option>
+            <option v-for="def in availableClients" :key="def.id" :value="def.id">{{ def.label }}</option>
+          </select>
+        </div>
+
+        <div v-if="currentDefinition" class="flex flex-col gap-3 mb-6">
+          <div v-for="field in currentDefinition.fields" :key="field.key">
+            <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">{{ field.label.toUpperCase() }}</label>
+            <input
+                v-model="modal.config[field.key]"
+                :type="field.type === 'password' ? 'password' : 'text'"
+                :placeholder="field.placeholder ?? ''"
+                class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"/>
+          </div>
+        </div>
+
+        <div class="flex gap-3">
+          <button @click="saveClient" :disabled="modal.saving || !modal.tested"
+                  class="bg-[#e8513a] text-white px-6 py-2.5 text-xs tracking-widest hover:opacity-85 transition-opacity disabled:opacity-50 cursor-pointer">
+            {{ modal.saving ? '...' : 'ENREGISTRER' }}
+          </button>
+          <button @click="testNewClient" :disabled="modal.testing || !modal.type"
+                  class="border border-[#1e2d3d] text-[#5a7a94] px-6 py-2.5 text-xs tracking-widest hover:border-[#3a8fe8] hover:text-[#3a8fe8] transition-colors disabled:opacity-50 cursor-pointer">
+            {{ modal.testing ? '...' : modal.tested ? 'TESTÉ ✓' : 'TESTER' }}
+          </button>
+        </div>
+        <p v-if="!modal.tested && modal.type" class="text-[10px] text-[#5a7a94] mt-3">
+          Testez la connexion avant d'enregistrer
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useToast } from '@/composables/useToast'
+
+const router = useRouter()
+const auth   = useAuthStore()
+const { add: toast } = useToast()
+
+// ── State ──────────────────────────────────────────────────────
+const form = ref({
+  mediaPath   : '/media/Kai',
+  completePath: '/downloads/complete',
+  organizeMode: 'hardlink' as 'hardlink' | 'move',
+})
+
+const saving   = ref(false)
+const updating = ref(false)
+const torrentsStatus = ref({ exists: false, count: 0, empty: true })
+
+const clients          = ref<any[]>([])
+const availableClients = ref<any[]>([])
+const healthStatus     = ref<Record<string, boolean | null>>({})
+
+const modal = ref({
+  open   : false,
+  name   : '',
+  type   : '',
+  config : {} as Record<string, string>,
+  testing: false,
+  saving : false,
+  tested : false,
+})
+
+// ── Computed ───────────────────────────────────────────────────
+const currentDefinition = computed(() =>
+    availableClients.value.find(d => d.id === modal.value.type) ?? null
+)
+
+function clientLabel(type: string): string {
+  return availableClients.value.find(d => d.id === type)?.label ?? type
+}
+
+// ── Init ───────────────────────────────────────────────────────
+onMounted(async () => {
+  const [settingsRes, statusRes, clientsRes, availRes] = await Promise.all([
+    fetch('/api/settings',                  { credentials: 'include' }),
+    fetch('/api/torrents/status',           { credentials: 'include' }),
+    fetch('/api/torrent-clients',           { credentials: 'include' }),
+    fetch('/api/torrent-clients/available', { credentials: 'include' }),
+  ])
+  if (settingsRes.ok) Object.assign(form.value, await settingsRes.json())
+  if (statusRes.ok)   torrentsStatus.value = await statusRes.json()
+  if (clientsRes.ok)  clients.value        = await clientsRes.json()
+  if (availRes.ok)    availableClients.value = await availRes.json()
+
+  for (const c of clients.value) refreshHealth(c.uuid)
+})
+
+// ── Healthcheck ────────────────────────────────────────────────
+async function refreshHealth(uuid: string) {
+  healthStatus.value[uuid] = null
+  try {
+    const res = await fetch(`/api/torrent-clients/${uuid}/healthcheck`, { credentials: 'include' })
+    healthStatus.value[uuid] = res.ok ? (await res.json()).online : false
+  } catch {
+    healthStatus.value[uuid] = false
+  }
+}
+
+// ── Test / delete clients ──────────────────────────────────────
+async function testClient(uuid: string) {
+  const res = await fetch(`/api/torrent-clients/${uuid}/test`, { method: 'POST', credentials: 'include' })
+  const { ok, message } = await res.json()
+  toast(ok ? 'Connexion réussie ✓' : (message ?? 'Connexion échouée'), ok ? 'success' : 'error')
+  healthStatus.value[uuid] = ok
+}
+
+async function deleteClient(uuid: string) {
+  const res = await fetch(`/api/torrent-clients/${uuid}`, { method: 'DELETE', credentials: 'include' })
+  if (res.ok) {
+    clients.value = clients.value.filter(c => c.uuid !== uuid)
+    delete healthStatus.value[uuid]
+    toast('Client supprimé', 'success')
+  } else {
+    toast('Erreur lors de la suppression', 'error')
+  }
+}
+
+// ── Modal ──────────────────────────────────────────────────────
+function openAddModal() {
+  modal.value = { open: true, name: '', type: '', config: {}, testing: false, saving: false, tested: false }
+}
+
+function closeModal() {
+  modal.value.open = false
+}
+
+function onTypeChange() {
+  modal.value.config = {}
+  modal.value.tested = false
+  const def = currentDefinition.value
+  if (def) {
+    for (const field of def.fields) {
+      if (field.default !== undefined) modal.value.config[field.key] = String(field.default)
+    }
+  }
+}
+
+async function testNewClient() {
+  modal.value.testing = true
+  modal.value.tested  = false
+  try {
+    const res = await fetch('/api/torrent-clients/test-config', {
+      method : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ type: modal.value.type, config: modal.value.config })
+    })
+    const { ok, message } = await res.json()
+    modal.value.tested = ok
+    toast(ok ? 'Connexion réussie ✓' : (message ?? 'Connexion échouée'), ok ? 'success' : 'error')
+  } catch {
+    toast('Impossible de contacter le serveur', 'error')
+  } finally {
+    modal.value.testing = false
+  }
+}
+
+async function saveClient() {
+  if (!modal.value.tested) return
+  modal.value.saving = true
+  try {
+    const res = await fetch('/api/torrent-clients', {
+      method : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({
+        name  : modal.value.name || clientLabel(modal.value.type),
+        type  : modal.value.type,
+        config: modal.value.config
+      })
+    })
+    if (res.ok) {
+      const client = await res.json()
+      clients.value.push(client)
+      refreshHealth(client.uuid)
+      closeModal()
+      toast('Client enregistré ✓', 'success')
+    } else {
+      const { error } = await res.json()
+      toast(error ?? "Erreur lors de l'enregistrement", 'error')
+    }
+  } finally {
+    modal.value.saving = false
+  }
+}
+
+// ── Données torrents ───────────────────────────────────────────
+async function update() {
+  updating.value = true
+  try {
+    const res = await fetch('/api/update', { method: 'POST', credentials: 'include' })
+    if (res.ok) {
+      const { count } = await res.json()
+      torrentsStatus.value = { exists: true, count, empty: count === 0 }
+      toast(`${count} torrents téléchargés ✓`, 'success')
+    } else {
+      const { error } = await res.json()
+      toast(error ?? 'Erreur lors de la mise à jour', 'error')
+    }
+  } catch {
+    toast('Impossible de contacter le serveur', 'error')
+  } finally {
+    updating.value = false
+  }
+}
+
+// ── Sauvegarder settings ───────────────────────────────────────
+async function save() {
+  saving.value = true
+  try {
+    const res = await fetch('/api/settings', {
+      method : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(form.value)
+    })
+    if (res.ok) toast('Configuration sauvegardée', 'success')
+    else toast('Erreur lors de la sauvegarde', 'error')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function logout() {
+  await auth.logout()
+  await router.push('/auth')
+}
+</script>