diff --git a/autopost/server.js b/autopost/server.js
index a325641..06f84e9 100644
--- a/autopost/server.js
+++ b/autopost/server.js
@@ -128,674 +128,155 @@ autopostRouter.get('/', async (req, res) => {
 	);
 
 	let html = `
-	<!DOCTYPE html>
+<!DOCTYPE html>
 	<html lang="fr">
 	<head>
-	  <meta charset="UTF-8">
-	  <title>Suivi Autopost ${config.name}</title>
-	  <script src="/js/index.global.js"></script>
-	  <script src="/jquery/jquery.min.js"></script>
-	  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
+		<meta charset="UTF-8">
+		<title>Suivi Autopost ${config.name}</title>
+		<script src="js/index.global.js"></script>
+		<script src="jquery/jquery.min.js"></script>
+		<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
 	</head>
-	<body class="bg-slate-900 text-white font-sans p-4">
-	  <div class="w-full px-4">
- 	 	<div class="mb-6">
-		  <div class="flex items-center justify-between">
-			<h1 class="text-2xl md:text-3xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-300">
-			  Suivi Autopost ${config.name}
-			</h1>
-			<a href="/autopost/logout"
-			   class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-red-600/90 hover:bg-red-600 text-white shadow-lg shadow-red-900/20 transition">
-			  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-					  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h5a2 2 0 012 2v1"/>
-			  </svg>
-			  Déconnexion
-			</a>
-		  </div>
-		  <p class="mt-1 text-sm text-gray-400">Vue d’ensemble des traitements en cours et de l’état des envois.</p>
-		</div>
-		
-		<!-- Stat cards -->
-		<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-		  <!-- En attente -->
-		  <div class="group rounded-2xl p-3 md:p-5 bg-gradient-to-br from-cyan-500 to-cyan-400 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="0">
-			<div class="flex items-center gap-3">
-			  <div class="rounded-xl bg-black/10 p-2">
-				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-				  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-						d="M12 6v6l4 2"/>
-				</svg>
-			  </div>
-			  <div class="text-sm/5 font-medium">En attente</div>
-			</div>
-			<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].attente}</div>
-		  </div>
-		
-		  <!-- Terminé -->
-		  <div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-green-300 to-emerald-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="1">
-			<div class="flex items-center gap-3">
-			  <div class="rounded-xl bg-black/10 p-2">
-				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-				  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-						d="M5 13l4 4L19 7"/>
-				</svg>
-			  </div>
-			  <div class="text-sm/5 font-medium">Terminé</div>
-			</div>
-			<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].termine}</div>
-		  </div>
-		
-		  <!-- Erreur -->
-		  <div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-rose-300 to-red-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="2">
-			<div class="flex items-center gap-3">
-			  <div class="rounded-xl bg-black/10 p-2">
-				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-				  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-						d="M12 9v3m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
-				</svg>
-			  </div>
-			  <div class="text-sm/5 font-medium">Erreur</div>
-			</div>
-			<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].erreur}</div>
-		  </div>
-		
-		  <!-- Déjà dispo -->
-		  <div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-pink-300 to-fuchsia-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="3">
-			<div class="flex items-center gap-3">
-			  <div class="rounded-xl bg-black/10 p-2">
-				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-				  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-						d="M8 7h8M8 11h8M8 15h6"/>
-				</svg>
-			  </div>
-			  <div class="text-sm/5 font-medium">Déjà dispo</div>
-			</div>
-			<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].deja}</div>
-		  </div>
-		</div>
-		
-		<!-- Bouton réinitialiser -->
-		<div class="mb-4 text-center">
-		  <button id="showAll" 
-			class="hidden px-5 py-2 rounded-xl bg-gradient-to-br from-gray-600 to-gray-800 text-white font-semibold shadow-lg hover:from-gray-500 hover:to-gray-700 transition transform hover:-translate-y-0.5">
-			Tout afficher
-		  </button>
-		</div>
-		
-		<!-- Search -->
-		<div class="mb-4">
-		  <label for="searchInput" class="sr-only">Rechercher</label>
-		  <div class="relative">
-			<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-			  <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-					  d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
-			  </svg>
-			</span>
-			<input id="searchInput" type="text" placeholder="Rechercher…"
-				   class="w-full pl-10 pr-3 py-2 rounded-xl bg-gray-800/80 border border-gray-700 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition placeholder:text-gray-400" />
-		  </div>
-		</div>
-
-		<nav id="pagination" aria-label="Page navigation" class="mb-4">
-		  <ul class="inline-flex items-center -space-x-px">
-			<li>
-			  ${
-				page > 1
-				  ? `<a href="/autopost/?page=${page - 1}" data-page="${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
-				  : `<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>`
-			  }
-			</li>
-			<li>
-			  <span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ${page} sur ${totalPages}</span>
-			</li>
-			<li>
-			  ${
-				page < totalPages
-				  ? `<a href="/autopost/?page=${page + 1}" data-page="${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
-				  : `<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>`
-			  }
-			</li>
-		  </ul>
-		</nav>
-
-		<div class="overflow-x-auto">
-		<table class="min-w-full border border-gray-700 shadow-lg rounded-lg overflow-hidden">
-		  <thead class="bg-gray-900 text-gray-300 uppercase text-sm">
-			<tr>
-			  <th class="px-4 py-2">Name</th>
-			  <th class="px-4 py-2">Status</th>
-			  <th class="px-4 py-2">ID</th>
-			  <th class="px-4 py-2">Actions</th>
-			</tr>
-		  </thead>
-		  <tbody class="divide-y divide-gray-700">
-	`;
-
-	rows.forEach(row => {
-	  let statusText = '';
-	  let statusClass = '';
-	  switch (parseInt(row.status)) {
-		case 0:
-		  statusText = 'EN ATTENTE';
-		  statusClass = 'bg-cyan-500 text-black font-bold';
-		  break;
-		case 1:
-		  statusText = 'ENVOI TERMINÉ';
-		  statusClass = 'bg-green-300 text-black font-bold';
-		  break;
-		case 2:
-		  statusText = 'ERREUR';
-		  statusClass = 'bg-red-300 text-black font-bold';
-		  break;
-		case 3:
-		  statusText = 'DEJA DISPONIBLE';
-		  statusClass = 'bg-pink-300 text-black font-bold';
-		  break;
-		case 4:
-		  statusText = 'EN COURS';
-		  statusClass = 'bg-yellow-300 text-black font-bold';
-		  break;
-		default:
-		  statusText = 'INCONNU';
-	  }
-	  let logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
-		   ? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="'+row.nom+'">Log</a>'
-		   : '';
-	  let mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
-		? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="'+row.nom+'">MediaInfo/BDInfo</a>'
-		: '';
-	  let dlLink = row.status === 1 
-		? ` | <a href="/autopost/dl?name=${encodeURIComponent(row.nom)}" class="dl-link text-blue-400 hover:underline">DL</a>`
-		: '';
-
-	  html += `
-				<tr id="row-${row.id}" data-status="${row.status}" class="odd:bg-gray-800 even:bg-gray-700">
-				  <td class="px-4 py-2 border border-gray-700">${row.nom}</td>
-				  <td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ${statusClass}">${statusText}</td>
-				  <td class="px-4 py-2 border border-gray-700">${row.id}</td>
-				  <td class="px-4 py-2 border border-gray-700 whitespace-nowrap">
-					<a href="#" class="edit-link text-blue-400 hover:underline" data-id="${row.id}" data-status="${row.status}">Editer</a> |
-					<a href="#" class="delete-link text-blue-400 hover:underline" data-id="${row.id}">Supprimer</a>
-					${logLink}
-					${mediainfoLink}
-					${dlLink}
-				  </td>
-				</tr>
-	  `;
-	});
-
-	html += `
-			</tbody>
-		  </table>
-		</div>
-	  </div>
-	  
-	  <!-- Modale d'édition -->
-	  <div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
-		<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-md transform transition-all scale-95">
-		  
-		  <!-- Bouton fermer -->
-		  <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close">
-			&times;
-		  </button>
-	  
-		  <!-- Titre -->
-		  <h2 class="text-2xl font-bold mb-6 text-center text-white">
-			✏️ Éditer Release <span id="modalReleaseId" class="text-blue-400"></span>
-		  </h2>
-	  
-		  <!-- Formulaire -->
-		  <form id="editForm">
-			
-			<!-- Label + Select -->
-			<label for="statusSelect" class="block mb-2 text-gray-300 font-medium">Status :</label>
-			<select id="statusSelect" name="status" 
-			  class="w-full p-3 mb-6 rounded-lg border border-gray-700 bg-gray-800 text-white focus:ring-2 focus:ring-blue-500 focus:outline-none">
-			  <option value="0" class="text-cyan-400">EN ATTENTE</option>
-			  <option value="1" class="text-green-400">ENVOI TERMINÉ</option>
-			  <option value="2" class="text-red-400">ERREUR</option>
-			  <option value="3" class="text-pink-400">DEJA DISPONIBLE</option>
-			</select>
-	  
-			<!-- Hidden ID -->
-			<input type="hidden" id="releaseId" name="id" value=""/>
-	  
-			<!-- Bouton -->
-			<button type="submit" 
-			  class="w-full p-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-lg shadow hover:from-blue-500 hover:to-blue-400 transform hover:-translate-y-0.5 transition">
-			  💾 Mettre à jour
-			</button>
-		  </form>
-		</div>
-	  </div>
-
-	  
-	  <!-- Modale pour afficher le log -->
-		<div id="logModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
-		  <div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-7xl relative"> <!-- élargi max-w -->
-			
-			<!-- Bouton fermer -->
-			<button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close log-close">
-			  &times;
-			</button>
-		
-			<!-- Titre -->
-			<h2 class="text-2xl font-bold mb-6 text-center text-white">
-			  📄 Contenu du log
-			</h2>
-		
-			<!-- Contenu du log -->
-			<pre id="logContent" 
-			  class="max-h-[90vh] overflow-y-auto p-6 rounded-lg bg-gray-800 text-green-400 font-mono text-sm leading-relaxed border border-gray-700 shadow-inner whitespace-pre-wrap">
-			</pre>
-		
-		  </div>
-		</div>
-	  
-	  <!-- Modale pour afficher le mediainfo -->
-		<div id="mediainfoModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
-		  <div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-6xl relative">
-		
-			<!-- Bouton fermer -->
-			<button type="button" 
-			  class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close mediainfo-close"
-			  title="Fermer">
-			  &times;
-			</button>
-		
-			<!-- Titre -->
-			<h2 class="text-2xl font-bold text-white mb-4 pr-16">📄 Contenu du mediainfo</h2>
-		
-			<!-- Bouton copier -->
+	<body class="bg-sky-950 text-white font-sans p-4">
+		<div class="w-full px-4">
+			<!-- Header -->
 			<div class="mb-6">
-			  <button id="copyMediainfoBtn" 
-				class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-md transition">
-				📋 Copier JSON
-			  </button>
+				<div class="flex items-center justify-between">
+					<h1 class="text-2xl md:text-3xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-300">
+						Suivi Autopost ${config.name}
+					</h1>
+					<a href="/autopost/logout"
+					   class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-red-600/90 hover:bg-red-600 text-white shadow-lg shadow-red-900/20 transition">
+						<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+								  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h5a2 2 0 012 2v1"/>
+						</svg>
+						Déconnexion
+					</a>
+				</div>
+				<p class="mt-1 text-sm text-gray-400">Vue d’ensemble des traitements en cours et de l’état des envois.</p>
 			</div>
-		
-			<!-- Contenu mediainfo -->
-			<pre id="mediainfoContent" 
-			  class="max-h-[80vh] overflow-y-auto p-4 rounded-lg bg-gray-800 text-yellow-300 font-mono text-sm leading-relaxed border border-gray-700 shadow-inner whitespace-pre-wrap">
-			</pre>
-		
-		  </div>
-		</div>
-		
-		<!-- Modale de confirmation de suppression -->
-		  <div id="confirmDeleteModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
-			<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-3xl md:max-w-4xl relative">
-			  <button type="button" class="absolute top-3 right-3 text-gray-400 hover:text-white text-xl font-bold" id="confirmDeleteClose" aria-label="Fermer">
-				&times;
-			  </button>
-		  
-			  <h3 class="text-xl font-bold text-white mb-2">Supprimer cet enregistrement ?</h3>
-			  <p class="text-gray-300 text-sm mb-6">
-				Vous êtes sur le point de supprimer <span id="confirmItemName" class="text-white font-semibold"></span>. Cette action est irréversible.
-			  </p>
-		  
-			  <div class="flex justify-end gap-3">
-				<button type="button" id="cancelDeleteBtn" class="px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-white">
-				  Annuler
-				</button>
-				<button type="button" id="confirmDeleteBtn" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white font-semibold">
-				  Supprimer
-				</button>
-			  </div>
+	
+			<!-- Stat cards -->
+			<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+				<!-- En attente -->
+				<div class="group rounded-2xl p-3 md:p-5 bg-gradient-to-br from-cyan-500 to-cyan-400 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="0">
+					<div class="flex items-center gap-3">
+						<div class="rounded-xl bg-black/10 p-2">
+							<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+									  d="M12 6v6l4 2"/>
+							</svg>
+						</div>
+						<div class="text-sm/5 font-medium">En attente</div>
+					</div>
+					<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].attente}</div>
+				</div>
+	
+				<!-- Terminé -->
+				<div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-green-300 to-emerald-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="1">
+					<div class="flex items-center gap-3">
+						<div class="rounded-xl bg-black/10 p-2">
+							<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+									  d="M5 13l4 4L19 7"/>
+							</svg>
+						</div>
+						<div class="text-sm/5 font-medium">Terminé</div>
+					</div>
+					<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].termine}</div>
+				</div>
+	
+				<!-- Erreur -->
+				<div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-rose-300 to-red-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="2">
+					<div class="flex items-center gap-3">
+						<div class="rounded-xl bg-black/10 p-2">
+							<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+									  d="M12 9v3m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+							</svg>
+						</div>
+						<div class="text-sm/5 font-medium">Erreur</div>
+					</div>
+					<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].erreur}</div>
+				</div>
+	
+				<!-- Déjà dispo -->
+				<div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-pink-300 to-fuchsia-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="3">
+					<div class="flex items-center gap-3">
+						<div class="rounded-xl bg-black/10 p-2">
+							<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+									  d="M8 7h8M8 11h8M8 15h6"/>
+							</svg>
+						</div>
+						<div class="text-sm/5 font-medium">Déjà dispo</div>
+					</div>
+					<div class="mt-3 text-3xl font-extrabold tabular-nums">${stats[0].deja}</div>
+				</div>
 			</div>
-		  </div>
-		  
-		  <!-- Toast -->
-		  <div id="toast" class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg bg-gray-900/95 text-white shadow-lg z-[60]">
-			<span id="toastMsg">Supprimé.</span>
-		  </div>
-	  
-	<script>
-		// --- State ---
-		const INITIAL_PAGE = ${page};
-		const INITIAL_TOTAL_PAGES = ${totalPages};
-		const PAGE_LIMIT = ${limit};
-		
-		let currentPage = INITIAL_PAGE;
-		let currentTotalPages = INITIAL_TOTAL_PAGES;
-		let activeFilter = null;   // number | null
-		let activeQuery  = '';     // string
-		
-		
-		// --- Rendering: table ---
-		function updateTable(rows) {
-			var tbody = $('table tbody');
-			tbody.empty();
-		
-			rows.forEach(function(row) {
-				var statusText = '';
-				var statusClass = '';
-		
-				switch (parseInt(row.status)) {
-					case 0:
-						statusText = 'EN ATTENTE';
-						statusClass = 'bg-cyan-500 text-black font-bold';
-						break;
-					case 1:
-						statusText = 'ENVOI TERMINÉ';
-						statusClass = 'bg-green-300 text-black font-bold';
-						break;
-					case 2:
-						statusText = 'ERREUR';
-						statusClass = 'bg-red-300 text-black font-bold';
-						break;
-					case 3:
-						statusText = 'DEJA DISPONIBLE';
-						statusClass = 'bg-pink-300 text-black font-bold';
-						break;
-					case 4:
-						statusText = 'EN COURS';
-						statusClass = 'bg-yellow-300 text-black font-bold';
-						break;
-					default:
-						statusText = 'INCONNU';
-				}
-		
-				var logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
-					? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Log</a>'
-					: '';
-		
-				var mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
-					? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Mediainfo</a>'
-					: '';
-		
-				var dlLink = (parseInt(row.status) === 1)
-					? ' | <a href="/autopost/dl?name=' + encodeURIComponent(row.nom) + '" class="dl-link text-blue-400 hover:underline">DL</a>'
-					: '';
-		
-				var tr =
-					'<tr id="row-' + row.id + '" data-status="' + row.status + '" class="odd:bg-gray-800 even:bg-gray-700">' +
-						'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">' + row.nom + '</td>' +
-						'<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ' + statusClass + '">' + statusText + '</td>' +
-						'<td class="px-4 py-2 border border-gray-700">' + row.id + '</td>' +
-						'<td class="px-4 py-2 border border-gray-700">' +
-							'<a href="#" class="edit-link text-blue-400 hover:underline" data-id="' + row.id + '" data-status="' + row.status + '">Editer</a> | ' +
-							'<a href="#" class="delete-link text-blue-400 hover:underline" data-id="' + row.id + '">Supprimer</a>' +
-							logLink + mediainfoLink + dlLink +
-						'</td>' +
-					'</tr>';
-		
-				tbody.append(tr);
-			});
-		}
-		
-		
-		// --- Rendering: pagination ---
-		function renderPaginationHTML(page, totalPages) {
-			var prevDisabled = page <= 1;
-			var nextDisabled = page >= totalPages;
-		
-			var h = '';
-			h += '<ul class="inline-flex items-center -space-x-px">';
-			h +=   '<li>';
-			if (prevDisabled) {
-				h += '<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>';
-			} else {
-				h += '<a href="/autopost/?page=' + (page - 1) + '" data-page="' + (page - 1) + '" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>';
-			}
-			h +=   '</li>';
-			h +=   '<li><span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ' + page + ' sur ' + totalPages + '</span></li>';
-			h +=   '<li>';
-			if (nextDisabled) {
-				h += '<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>';
-			} else {
-				h += '<a href="/autopost/?page=' + (page + 1) + '" data-page="' + (page + 1) + '" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>';
-			}
-			h +=   '</li>';
-			h += '</ul>';
-		
-			return h;
-		}
-		
-		function updatePagination(page, totalPages) {
-			$('#pagination').html(renderPaginationHTML(page, totalPages));
-		}
-		
-		
-		// --- Data loading ---
-		function loadPage(p) {
-			const targetPage = Math.max(1, parseInt(p, 10) || 1);
-		
-			const isFilter = activeFilter !== null;
-			const url = isFilter ? '/autopost/filter' : '/autopost/search';
-			const data = isFilter
-				? { status: activeFilter, page: targetPage, limit: PAGE_LIMIT }
-				: { q: activeQuery || '', page: targetPage, limit: PAGE_LIMIT };
-		
-			$.ajax({
-				url: url,
-				type: 'GET',
-				data: data,
-				dataType: 'json',
-				success: function(resp) {
-					updateTable(resp.rows);
-					currentPage = resp.page;
-					currentTotalPages = resp.totalPages;
-					updatePagination(currentPage, currentTotalPages);
-				},
-				error: function(jqXHR, textStatus, errorThrown) {
-					if (textStatus !== 'abort') {
-						console.error('Erreur AJAX :', textStatus, errorThrown);
-						alert('Erreur lors du chargement de la page.');
-					}
-				}
-			});
-		}
-		
-		
-		// --- DOM bindings ---
-		$(document).ready(function() {
-			// Recherche
-			let searchTimer = null;
-			$('#searchInput').on('keyup', function() {
-				clearTimeout(searchTimer);
-				let q = $(this).val();
-		
-				searchTimer = setTimeout(function() {
-					activeQuery = q || '';
-					activeFilter = null; // on sort du mode filtre
-					$('.filter-card').removeClass('ring-4 ring-white/40');
-					loadPage(1);         // charge page 1 avec pagination AJAX
-					toggleShowAllButton();
-				}, 300);
-			});
-		
-			// Pagination: intercepter et paginer en AJAX (liste, recherche ou filtre)
-			$(document).on('click', '#pagination a[data-page]', function(e) {
-				e.preventDefault();
-				const p = parseInt($(this).data('page'), 10);
-				if (!isNaN(p)) loadPage(p);
-			});
-		
-			// Affichage/masquage du bouton "Tout afficher"
-			function toggleShowAllButton() {
-				if ($('.filter-card.ring-4').length === 0) {
-					$('#showAll').addClass('hidden');
-				} else {
-					$('#showAll').removeClass('hidden');
-				}
-			}
-		
-			// Filtrage par clic sur une card
-			$(document).on('click', '.filter-card', function() {
-				const status = parseInt($(this).data('status'), 10);
-		
-				$('.filter-card').removeClass('ring-4 ring-white/40');
-				$(this).addClass('ring-4 ring-white/40');
-		
-				activeFilter = status;
-				activeQuery = '';  // on sort du mode recherche
-				loadPage(1);       // page 1 du filtre
-				toggleShowAllButton();
-			});
-		
-			// Bouton tout afficher
-			$(document).on('click', '#showAll', function() {
-				$('.filter-card').removeClass('ring-4 ring-white/40');
-				activeFilter = null;
-				activeQuery = $('#searchInput').val() || '';
-				loadPage(1); // si recherche vide => liste complète, sinon recherche paginée
-				toggleShowAllButton();
-			});
-		
-			// Edition (ouvrir modale)
-			$(document).on('click', '.edit-link', function(e) {
-				e.preventDefault();
-				var releaseId = $(this).data('id');
-				var currentStatus = $(this).data('status');
-				$('#releaseId').val(releaseId);
-				$('#modalReleaseId').text(releaseId);
-				$('#statusSelect').val(currentStatus);
-				$('#editModal').removeClass('hidden').fadeIn();
-			});
-		
-			// ---------- Confirmation de suppression (modale) ----------
-			var pendingDeleteId = null;
-		
-			function openConfirmModal(id, name) {
-				pendingDeleteId = id;
-				$('#confirmItemName').text(name || ('ID ' + id));
-				$('#confirmDeleteModal').removeClass('hidden').fadeIn(120);
-			}
-		
-			function closeConfirmModal() {
-				$('#confirmDeleteModal').fadeOut(120, function() {
-					$(this).addClass('hidden');
-				});
-				pendingDeleteId = null;
-			}
-		
-			function showToast(msg) {
-				$('#toastMsg').text(msg || 'Opération effectuée');
-				$('#toast').removeClass('hidden').fadeIn(120);
-				setTimeout(function() {
-					$('#toast').fadeOut(150, function() { $(this).addClass('hidden'); });
-				}, 1800);
-			}
-		
-			// Ouvrir la modale au clic sur "Supprimer"
-			$(document).on('click', '.delete-link', function(e) {
-				e.preventDefault();
-				var releaseId = $(this).data('id');
-				var name = $(this).closest('tr').find('td:first').text().trim();
-				openConfirmModal(releaseId, name);
-			});
-		
-			// Boutons de la modale
-			$('#cancelDeleteBtn, #confirmDeleteClose').on('click', function() {
-				closeConfirmModal();
-			});
-		
-			// Clic sur l’overlay pour fermer
-			$('#confirmDeleteModal').on('click', function(e) {
-				if (e.target === this) { closeConfirmModal(); }
-			});
-		
-			// Accessibilité clavier: Esc = fermer, Enter = confirmer
-			$(document).on('keydown', function(e) {
-				var modalVisible = !$('#confirmDeleteModal').hasClass('hidden');
-				if (!modalVisible) return;
-				if (e.key === 'Escape') { closeConfirmModal(); }
-				if (e.key === 'Enter')  { $('#confirmDeleteBtn').click(); }
-			});
-		
-			// Confirmer et supprimer via AJAX
-			$('#confirmDeleteBtn').on('click', function() {
-				if (!pendingDeleteId) return;
-				var releaseId = pendingDeleteId;
-		
-				$.ajax({
-					url: '/autopost/delete/' + releaseId,
-					type: 'POST',
-					success: function() {
-						$('#row-' + releaseId)
-							.css('outline', '2px solid rgba(239,68,68,0.6)')
-							.fadeOut('300', function(){ $(this).remove(); });
-						showToast('Enregistrement supprimé');
-					},
-					error: function() {
-						alert('Erreur lors de la suppression.');
-					},
-					complete: function() {
-						closeConfirmModal();
-					}
-				});
-			});
-		
-			// Affichage log
-			$(document).on('click', '.log-link', function(e) {
-				e.preventDefault();
-				var filename = $(this).data('filename');
-				$.ajax({
-					url: '/autopost/log',
-					type: 'GET',
-					data: { name: filename },
-					dataType: 'json',
-					success: function(data) {
-						$('#logContent').html(data.content);
-						$('#logModal').removeClass('hidden').fadeIn();
-					},
-					error: function() {
-						alert('Erreur lors du chargement du fichier log.');
-					}
-				});
-			});
-		
-			// Affichage mediainfo
-			$(document).on('click', '.mediainfo-link', function(e) {
-				e.preventDefault();
-				var filename = $(this).data('filename');
-				$.ajax({
-					url: '/autopost/mediainfo',
-					type: 'GET',
-					data: { name: filename },
-					dataType: 'json',
-					success: function(data) {
-						$('#mediainfoContent').text(data.content);
-						$('#mediainfoModal').removeClass('hidden').fadeIn();
-					},
-					error: function() {
-						alert('Erreur lors du chargement du fichier mediainfo.');
-					}
-				});
-			});
-		
-			// Fermeture modales (croix + clic overlay)
-			$('.close').click(function() {
-				$(this).closest('.fixed').fadeOut(function() {
-					$(this).addClass('hidden');
-				});
-			});
-		
-			$('.fixed').click(function(e) {
-				if (e.target === this) {
-					$(this).fadeOut(function() {
-						$(this).addClass('hidden');
-					});
-				}
-			});
-		
-			// Edition: submit
-			$('#editForm').submit(function(e) {
-				e.preventDefault();
-				var releaseId = $('#releaseId').val();
-				var newStatus = $('#statusSelect').val();
-		
-				$.ajax({
-					url: '/autopost/edit/' + releaseId,
-					type: 'POST',
-					data: { status: newStatus },
-					success: function() {
-						var statusText = '';
-						var statusClass = '';
-						switch (parseInt(newStatus)) {
+	
+			<!-- Bouton réinitialiser -->
+			<div class="mb-4 text-center">
+				<button id="showAll"
+						class="hidden px-5 py-2 rounded-xl bg-gradient-to-br from-gray-600 to-gray-800 text-white font-semibold shadow-lg hover:from-gray-500 hover:to-gray-700 transition transform hover:-translate-y-0.5">
+					Tout afficher
+				</button>
+			</div>
+	
+			<!-- Search -->
+			<div class="mb-4">
+				<label for="searchInput" class="sr-only">Rechercher</label>
+				<div class="relative">
+					<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+						<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+								  d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
+						</svg>
+					</span>
+					<input id="searchInput" type="text" placeholder="Rechercher…"
+						   class="w-full pl-10 pr-3 py-2 rounded-xl bg-gray-800/80 border border-gray-700 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition placeholder:text-gray-400" />
+				</div>
+			</div>
+	
+			<nav id="pagination" aria-label="Page navigation" class="mb-4">
+				<ul class="inline-flex items-center -space-x-px">
+					<li>
+						${
+							page > 1
+								? `<a href="/autopost/?page=${page - 1}" data-page="${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
+								: `<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>`
+						}
+					</li>
+					<li>
+						<span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ${page} sur ${totalPages}</span>
+					</li>
+					<li>
+						${
+							page < totalPages
+								? `<a href="/autopost/?page=${page + 1}" data-page="${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
+								: `<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>`
+						}
+					</li>
+				</ul>
+			</nav>
+	
+			<div class="overflow-x-auto">
+				<table class="min-w-full border border-gray-700 shadow-lg rounded-lg overflow-hidden">
+					<thead class="bg-gray-900 text-gray-300 uppercase text-sm">
+						<tr>
+							<th class="px-4 py-2">Name</th>
+							<th class="px-4 py-2">Status</th>
+							<th class="px-4 py-2">ID</th>
+							<th class="px-4 py-2">Actions</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-gray-700">`;
+	
+					rows.forEach(row => {
+						let statusText = '';
+						let statusClass = '';
+						switch (parseInt(row.status)) {
 							case 0:
 								statusText = 'EN ATTENTE';
 								statusClass = 'bg-cyan-500 text-black font-bold';
@@ -819,35 +300,547 @@ autopostRouter.get('/', async (req, res) => {
 							default:
 								statusText = 'INCONNU';
 						}
-		
-						var row = $('#row-' + releaseId);
-						row.find('.status-text')
-							.removeClass('bg-cyan-500 bg-green-300 bg-red-300 bg-pink-300 bg-yellow-300')
-							.addClass(statusClass)
-							.text(statusText);
-		
-						$('#editModal').fadeOut(function() {
-							$(this).addClass('hidden');
-						});
+						let logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
+							? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Log</a>'
+							: '';
+						let mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
+							? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="' + row.nom + '">MediaInfo/BDInfo</a>'
+							: '';
+						let dlLink = row.status === 1
+							? ' | <a href="/autopost/dl?name=' + encodeURIComponent(row.nom) + '" class="dl-link text-blue-400 hover:underline">DL</a>'
+							: '';
+					
+						html += `
+									<tr id="row-${row.id}" data-status="${row.status}" class="odd:bg-gray-800 even:bg-gray-700">
+										<td class="px-4 py-2 border border-gray-700">${row.nom}</td>
+										<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ${statusClass}">${statusText}</td>
+										<td class="px-4 py-2 border border-gray-700">${row.id}</td>
+										<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">
+											<a href="#" class="edit-link text-blue-400 hover:underline" data-id="${row.id}" data-status="${row.status}">Editer</a> |
+											<a href="#" class="delete-link text-blue-400 hover:underline" data-id="${row.id}">Supprimer</a>
+											${logLink}
+											${mediainfoLink}
+											${dlLink}
+										</td>
+									</tr>
+						`;
+					});
+	
+	
+					html += `
+					</tbody>
+				</table>
+			</div>
+		</div>
+	
+		<!-- Modale d'édition -->
+		<div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
+			<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-md transform transition-all scale-95">
+				<!-- Bouton fermer -->
+				<button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close">
+					&times;
+				</button>
+	
+				<!-- Titre -->
+				<h2 class="text-2xl font-bold mb-6 text-center text-white">
+					✏️ Éditer Release <span id="modalReleaseId" class="text-blue-400"></span>
+				</h2>
+	
+				<!-- Formulaire -->
+				<form id="editForm">
+					<!-- Label + Select -->
+					<label for="statusSelect" class="block mb-2 text-gray-300 font-medium">Status :</label>
+					<select id="statusSelect" name="status"
+							class="w-full p-3 mb-6 rounded-lg border border-gray-700 bg-gray-800 text-white focus:ring-2 focus:ring-blue-500 focus:outline-none">
+						<option value="0" class="text-cyan-400">EN ATTENTE</option>
+						<option value="1" class="text-green-400">ENVOI TERMINÉ</option>
+						<option value="2" class="text-red-400">ERREUR</option>
+						<option value="3" class="text-pink-400">DEJA DISPONIBLE</option>
+					</select>
+	
+					<!-- Hidden ID -->
+					<input type="hidden" id="releaseId" name="id" value=""/>
+	
+					<!-- Bouton -->
+					<button type="submit"
+							class="w-full p-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-lg shadow hover:from-blue-500 hover:to-blue-400 transform hover:-translate-y-0.5 transition">
+						💾 Mettre à jour
+					</button>
+				</form>
+			</div>
+		</div>
+	
+		<!-- Modale pour afficher le log -->
+		<div id="logModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
+			<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-7xl relative"> <!-- élargi max-w -->
+				<!-- Bouton fermer -->
+				<button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close log-close">
+					&times;
+				</button>
+	
+				<!-- Titre -->
+				<h2 class="text-2xl font-bold mb-6 text-center text-white">
+					📄 Contenu du log
+				</h2>
+	
+				<!-- Contenu du log -->
+				<pre id="logContent"
+					 class="max-h-[90vh] overflow-y-auto p-6 rounded-lg bg-gray-800 text-green-400 font-mono text-sm leading-relaxed border border-gray-700 shadow-inner whitespace-pre-wrap">
+				</pre>
+			</div>
+		</div>
+	
+		<!-- Modale pour afficher le mediainfo -->
+		<div id="mediainfoModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
+			<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-6xl relative">
+				<!-- Bouton fermer -->
+				<button type="button"
+						class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close mediainfo-close"
+						title="Fermer">
+					&times;
+				</button>
+	
+				<!-- Titre -->
+				<h2 class="text-2xl font-bold text-white mb-4 pr-16">📄 Contenu du mediainfo</h2>
+	
+				<!-- Bouton copier -->
+				<div class="mb-6">
+					<button id="copyMediainfoBtn"
+							class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-md transition">
+						📋 Copier JSON
+					</button>
+				</div>
+	
+				<!-- Contenu mediainfo -->
+				<pre id="mediainfoContent"
+					 class="max-h-[80vh] overflow-y-auto p-4 rounded-lg bg-gray-800 text-yellow-300 font-mono text-sm leading-relaxed border border-gray-700 shadow-inner whitespace-pre-wrap">
+				</pre>
+			</div>
+		</div>
+	
+		<!-- Modale de confirmation de suppression -->
+		<div id="confirmDeleteModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
+			<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-3xl md:max-w-4xl relative">
+				<button type="button" class="absolute top-3 right-3 text-gray-400 hover:text-white text-xl font-bold" id="confirmDeleteClose" aria-label="Fermer">
+					&times;
+				</button>
+	
+				<h3 class="text-xl font-bold text-white mb-2">Supprimer cet enregistrement ?</h3>
+				<p class="text-gray-300 text-sm mb-6">
+					Vous êtes sur le point de supprimer <span id="confirmItemName" class="text-white font-semibold"></span>. Cette action est irréversible.
+				</p>
+	
+				<div class="flex justify-end gap-3">
+					<button type="button" id="cancelDeleteBtn" class="px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-white">
+						Annuler
+					</button>
+					<button type="button" id="confirmDeleteBtn" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white font-semibold">
+						Supprimer
+					</button>
+				</div>
+			</div>
+		</div>
+	
+		<!-- Toast -->
+		<div id="toast" class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg bg-gray-900/95 text-white shadow-lg z-[60]">
+			<span id="toastMsg">Supprimé.</span>
+		</div>
+		<script>
+			// --- State ---
+			const INITIAL_PAGE = ${page};
+			const INITIAL_TOTAL_PAGES = ${totalPages};
+			const PAGE_LIMIT = ${limit};
+			
+			let currentPage = INITIAL_PAGE;
+			let currentTotalPages = INITIAL_TOTAL_PAGES;
+			let activeFilter = null;   // number | null
+			let activeQuery  = '';     // string
+			
+			
+			// --- Rendering: table ---
+			function updateTable(rows) {
+				var tbody = $('table tbody');
+				tbody.empty();
+			
+				rows.forEach(function(row) {
+					var statusText = '';
+					var statusClass = '';
+			
+					switch (parseInt(row.status)) {
+						case 0:
+							statusText = 'EN ATTENTE';
+							statusClass = 'bg-cyan-500 text-black font-bold';
+							break;
+						case 1:
+							statusText = 'ENVOI TERMINÉ';
+							statusClass = 'bg-green-300 text-black font-bold';
+							break;
+						case 2:
+							statusText = 'ERREUR';
+							statusClass = 'bg-red-300 text-black font-bold';
+							break;
+						case 3:
+							statusText = 'DEJA DISPONIBLE';
+							statusClass = 'bg-pink-300 text-black font-bold';
+							break;
+						case 4:
+							statusText = 'EN COURS';
+							statusClass = 'bg-yellow-300 text-black font-bold';
+							break;
+						default:
+							statusText = 'INCONNU';
+					}
+			
+					var logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
+						? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Log</a>'
+						: '';
+			
+					var mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
+						? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Mediainfo</a>'
+						: '';
+			
+					var dlLink = (parseInt(row.status) === 1)
+						? ' | <a href="/autopost/dl?name=' + encodeURIComponent(row.nom) + '" class="dl-link text-blue-400 hover:underline">DL</a>'
+						: '';
+			
+					var tr =
+						'<tr id="row-' + row.id + '" data-status="' + row.status + '" class="odd:bg-gray-800 even:bg-gray-700">' +
+							'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">' + row.nom + '</td>' +
+							'<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ' + statusClass + '">' + statusText + '</td>' +
+							'<td class="px-4 py-2 border border-gray-700">' + row.id + '</td>' +
+							'<td class="px-4 py-2 border border-gray-700">' +
+								'<a href="#" class="edit-link text-blue-400 hover:underline" data-id="' + row.id + '" data-status="' + row.status + '">Editer</a> | ' +
+								'<a href="#" class="delete-link text-blue-400 hover:underline" data-id="' + row.id + '">Supprimer</a>' +
+								logLink + mediainfoLink + dlLink +
+							'</td>' +
+						'</tr>';
+			
+					tbody.append(tr);
+				});
+			}
+			
+			
+			// --- Rendering: pagination ---
+			function renderPaginationHTML(page, totalPages) {
+				var prevDisabled = page <= 1;
+				var nextDisabled = page >= totalPages;
+			
+				var h = '';
+				h += '<ul class="inline-flex items-center -space-x-px">';
+				h +=   '<li>';
+				if (prevDisabled) {
+					h += '<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>';
+				} else {
+					h += '<a href="/autopost/?page=' + (page - 1) + '" data-page="' + (page - 1) + '" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>';
+				}
+				h +=   '</li>';
+				h +=   '<li><span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ' + page + ' sur ' + totalPages + '</span></li>';
+				h +=   '<li>';
+				if (nextDisabled) {
+					h += '<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>';
+				} else {
+					h += '<a href="/autopost/?page=' + (page + 1) + '" data-page="' + (page + 1) + '" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>';
+				}
+				h +=   '</li>';
+				h += '</ul>';
+			
+				return h;
+			}
+			
+			function updatePagination(page, totalPages) {
+				$('#pagination').html(renderPaginationHTML(page, totalPages));
+			}
+			
+			
+			// --- Data loading ---
+			function loadPage(p) {
+				const targetPage = Math.max(1, parseInt(p, 10) || 1);
+			
+				const isFilter = activeFilter !== null;
+				const url = isFilter ? '/autopost/filter' : '/autopost/search';
+				const data = isFilter
+					? { status: activeFilter, page: targetPage, limit: PAGE_LIMIT }
+					: { q: activeQuery || '', page: targetPage, limit: PAGE_LIMIT };
+			
+				$.ajax({
+					url: url,
+					type: 'GET',
+					data: data,
+					dataType: 'json',
+					success: function(resp) {
+						updateTable(resp.rows);
+						currentPage = resp.page;
+						currentTotalPages = resp.totalPages;
+						updatePagination(currentPage, currentTotalPages);
 					},
-					error: function() {
-						alert('Erreur lors de la mise à jour.');
+					error: function(jqXHR, textStatus, errorThrown) {
+						if (textStatus !== 'abort') {
+							console.error('Erreur AJAX :', textStatus, errorThrown);
+							alert('Erreur lors du chargement de la page.');
+						}
 					}
 				});
+			}
+			
+			
+			// --- DOM bindings ---
+			$(document).ready(function() {
+				// Recherche
+				let searchTimer = null;
+				$('#searchInput').on('keyup', function() {
+					clearTimeout(searchTimer);
+					let q = $(this).val();
+			
+					searchTimer = setTimeout(function() {
+						activeQuery = q || '';
+						activeFilter = null; // on sort du mode filtre
+						$('.filter-card').removeClass('ring-4 ring-white/40');
+						loadPage(1);         // charge page 1 avec pagination AJAX
+						toggleShowAllButton();
+					}, 300);
+				});
+			
+				// Pagination: intercepter et paginer en AJAX (liste, recherche ou filtre)
+				$(document).on('click', '#pagination a[data-page]', function(e) {
+					e.preventDefault();
+					const p = parseInt($(this).data('page'), 10);
+					if (!isNaN(p)) loadPage(p);
+				});
+			
+				// Affichage/masquage du bouton "Tout afficher"
+				function toggleShowAllButton() {
+					if ($('.filter-card.ring-4').length === 0) {
+						$('#showAll').addClass('hidden');
+					} else {
+						$('#showAll').removeClass('hidden');
+					}
+				}
+			
+				// Filtrage par clic sur une card
+				$(document).on('click', '.filter-card', function() {
+					const status = parseInt($(this).data('status'), 10);
+			
+					$('.filter-card').removeClass('ring-4 ring-white/40');
+					$(this).addClass('ring-4 ring-white/40');
+			
+					activeFilter = status;
+					activeQuery = '';  // on sort du mode recherche
+					loadPage(1);       // page 1 du filtre
+					toggleShowAllButton();
+				});
+			
+				// Bouton tout afficher
+				$(document).on('click', '#showAll', function() {
+					$('.filter-card').removeClass('ring-4 ring-white/40');
+					activeFilter = null;
+					activeQuery = $('#searchInput').val() || '';
+					loadPage(1); // si recherche vide => liste complète, sinon recherche paginée
+					toggleShowAllButton();
+				});
+			
+				// Edition (ouvrir modale)
+				$(document).on('click', '.edit-link', function(e) {
+					e.preventDefault();
+					var releaseId = $(this).data('id');
+					var currentStatus = $(this).data('status');
+					$('#releaseId').val(releaseId);
+					$('#modalReleaseId').text(releaseId);
+					$('#statusSelect').val(currentStatus);
+					$('#editModal').removeClass('hidden').fadeIn();
+				});
+			
+				// ---------- Confirmation de suppression (modale) ----------
+				var pendingDeleteId = null;
+			
+				function openConfirmModal(id, name) {
+					pendingDeleteId = id;
+					$('#confirmItemName').text(name || ('ID ' + id));
+					$('#confirmDeleteModal').removeClass('hidden').fadeIn(120);
+				}
+			
+				function closeConfirmModal() {
+					$('#confirmDeleteModal').fadeOut(120, function() {
+						$(this).addClass('hidden');
+					});
+					pendingDeleteId = null;
+				}
+			
+				function showToast(msg) {
+					$('#toastMsg').text(msg || 'Opération effectuée');
+					$('#toast').removeClass('hidden').fadeIn(120);
+					setTimeout(function() {
+						$('#toast').fadeOut(150, function() { $(this).addClass('hidden'); });
+					}, 1800);
+				}
+			
+				// Ouvrir la modale au clic sur "Supprimer"
+				$(document).on('click', '.delete-link', function(e) {
+					e.preventDefault();
+					var releaseId = $(this).data('id');
+					var name = $(this).closest('tr').find('td:first').text().trim();
+					openConfirmModal(releaseId, name);
+				});
+			
+				// Boutons de la modale
+				$('#cancelDeleteBtn, #confirmDeleteClose').on('click', function() {
+					closeConfirmModal();
+				});
+			
+				// Clic sur l’overlay pour fermer
+				$('#confirmDeleteModal').on('click', function(e) {
+					if (e.target === this) { closeConfirmModal(); }
+				});
+			
+				// Accessibilité clavier: Esc = fermer, Enter = confirmer
+				$(document).on('keydown', function(e) {
+					var modalVisible = !$('#confirmDeleteModal').hasClass('hidden');
+					if (!modalVisible) return;
+					if (e.key === 'Escape') { closeConfirmModal(); }
+					if (e.key === 'Enter')  { $('#confirmDeleteBtn').click(); }
+				});
+			
+				// Confirmer et supprimer via AJAX
+				$('#confirmDeleteBtn').on('click', function() {
+					if (!pendingDeleteId) return;
+					var releaseId = pendingDeleteId;
+			
+					$.ajax({
+						url: '/autopost/delete/' + releaseId,
+						type: 'POST',
+						success: function() {
+							$('#row-' + releaseId)
+								.css('outline', '2px solid rgba(239,68,68,0.6)')
+								.fadeOut('300', function(){ $(this).remove(); });
+							showToast('Enregistrement supprimé');
+						},
+						error: function() {
+							alert('Erreur lors de la suppression.');
+						},
+						complete: function() {
+							closeConfirmModal();
+						}
+					});
+				});
+			
+				// Affichage log
+				$(document).on('click', '.log-link', function(e) {
+					e.preventDefault();
+					var filename = $(this).data('filename');
+					$.ajax({
+						url: '/autopost/log',
+						type: 'GET',
+						data: { name: filename },
+						dataType: 'json',
+						success: function(data) {
+							$('#logContent').html(data.content);
+							$('#logModal').removeClass('hidden').fadeIn();
+						},
+						error: function() {
+							alert('Erreur lors du chargement du fichier log.');
+						}
+					});
+				});
+			
+				// Affichage mediainfo
+				$(document).on('click', '.mediainfo-link', function(e) {
+					e.preventDefault();
+					var filename = $(this).data('filename');
+					$.ajax({
+						url: '/autopost/mediainfo',
+						type: 'GET',
+						data: { name: filename },
+						dataType: 'json',
+						success: function(data) {
+							$('#mediainfoContent').text(data.content);
+							$('#mediainfoModal').removeClass('hidden').fadeIn();
+						},
+						error: function() {
+							alert('Erreur lors du chargement du fichier mediainfo.');
+						}
+					});
+				});
+			
+				// Fermeture modales (croix + clic overlay)
+				$('.close').click(function() {
+					$(this).closest('.fixed').fadeOut(function() {
+						$(this).addClass('hidden');
+					});
+				});
+			
+				$('.fixed').click(function(e) {
+					if (e.target === this) {
+						$(this).fadeOut(function() {
+							$(this).addClass('hidden');
+						});
+					}
+				});
+			
+				// Edition: submit
+				$('#editForm').submit(function(e) {
+					e.preventDefault();
+					var releaseId = $('#releaseId').val();
+					var newStatus = $('#statusSelect').val();
+			
+					$.ajax({
+						url: '/autopost/edit/' + releaseId,
+						type: 'POST',
+						data: { status: newStatus },
+						success: function() {
+							var statusText = '';
+							var statusClass = '';
+							switch (parseInt(newStatus)) {
+								case 0:
+									statusText = 'EN ATTENTE';
+									statusClass = 'bg-cyan-500 text-black font-bold';
+									break;
+								case 1:
+									statusText = 'ENVOI TERMINÉ';
+									statusClass = 'bg-green-300 text-black font-bold';
+									break;
+								case 2:
+									statusText = 'ERREUR';
+									statusClass = 'bg-red-300 text-black font-bold';
+									break;
+								case 3:
+									statusText = 'DEJA DISPONIBLE';
+									statusClass = 'bg-pink-300 text-black font-bold';
+									break;
+								case 4:
+									statusText = 'EN COURS';
+									statusClass = 'bg-yellow-300 text-black font-bold';
+									break;
+								default:
+									statusText = 'INCONNU';
+							}
+			
+							var row = $('#row-' + releaseId);
+							row.find('.status-text')
+								.removeClass('bg-cyan-500 bg-green-300 bg-red-300 bg-pink-300 bg-yellow-300')
+								.addClass(statusClass)
+								.text(statusText);
+			
+							$('#editModal').fadeOut(function() {
+								$(this).addClass('hidden');
+							});
+						},
+						error: function() {
+							alert('Erreur lors de la mise à jour.');
+						}
+					});
+				});
 			});
-		});
-		
-		// --- Copy Mediainfo JSON button ---
-		document.getElementById('copyMediainfoBtn').addEventListener('click', function() {
-			const content = document.getElementById('mediainfoContent').textContent;
-			navigator.clipboard.writeText(content).then(() => {
-				this.textContent = '✅ Copié !';
-				setTimeout(() => this.textContent = '📋 Copier JSON', 2000);
-			}).catch(function(err) {
-				alert('Erreur lors de la copie : ' + err);
+			
+			// --- Copy Mediainfo JSON button ---
+			document.getElementById('copyMediainfoBtn').addEventListener('click', function() {
+				const content = document.getElementById('mediainfoContent').textContent;
+				navigator.clipboard.writeText(content).then(() => {
+					this.textContent = '✅ Copié !';
+					setTimeout(() => this.textContent = '📋 Copier JSON', 2000);
+				}).catch(function(err) {
+					alert('Erreur lors de la copie : ' + err);
+				});
 			});
-		});
-	  </script>
+		</script>
 	</body>
 	</html>
 	`;
