Refonte complète du design (desktop + mobile)

- Nouvelle identité visuelle : thème sombre soigné, dégradés d'accent, cartes,
  ombres, bouton d'enregistrement en pilule avec point animé, badges d'état
- Mise en page responsive mobile-first : la liste des réunions devient un
  tiroir latéral (bouton ☰ + voile), contrôles empilés et tactiles, vumètre
  pleine largeur, bouton Démarrer proéminent
- Page de connexion redessinée dans le même style
- Étiquettes de locuteurs en pastilles colorées
- Cache-busting des assets (?v=2)
Aucun changement de logique : tous les identifiants/hooks JS préservés.

https://claude.ai/code/session_01YHMp3EKzr4s6o8w1ygxuUe

app/static/login.html

@@ -2,39 +2,45 @@
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="theme-color" content="#0b0d12">
   <title>LiveFlow — Connexion</title>
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8E%99%EF%B8%8F%3C/text%3E%3C/svg%3E">
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="style.css?v=2">
   <style>
-    body { align-items: center; justify-content: center; }
-    .login-box {
+    body { align-items: center; justify-content: center; overflow: auto; }
+    .login-card {
       background: var(--panel);
-      border: 1px solid #262b3a;
-      border-radius: 14px;
-      padding: 32px;
-      width: min(360px, 90vw);
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      padding: 32px 28px;
+      width: min(380px, 92vw);
+      display: flex; flex-direction: column; gap: 16px;
     }
-    .login-box h1 { font-size: 1.3rem; text-align: center; margin-bottom: 6px; }
-    .login-box input {
-      background: var(--panel-2);
-      border: 1px solid #2c3245;
-      color: var(--text);
-      padding: 11px 14px;
-      border-radius: 10px;
-      font-size: 0.95rem;
+    .login-brand { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; }
+    .login-sub { text-align: center; color: var(--muted); font-size: .88rem; margin-top: -8px; }
+    .login-card input {
+      background: var(--bg-2); color: var(--text);
+      border: 1px solid var(--border); border-radius: var(--radius-sm);
+      padding: 13px 15px; font-size: .98rem;
     }
-    .login-box input:focus { outline: none; border-color: var(--accent); }
-    .login-box button { background: var(--accent); font-weight: 600; padding: 11px; }
-    #login-error { color: #ff8589; font-size: 0.85rem; text-align: center; min-height: 1.2em; }
+    .login-card input:focus { outline: none; border-color: var(--accent); }
+    .login-card button {
+      border: none; cursor: pointer; color: #fff; font-weight: 700; font-size: 1rem;
+      padding: 13px; border-radius: var(--radius-sm);
+      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      box-shadow: 0 6px 20px rgba(91,140,255,.35);
+      transition: transform .12s;
+    }
+    .login-card button:hover { transform: translateY(-1px); }
+    #login-error { color: #ff9398; font-size: .85rem; text-align: center; min-height: 1.2em; }
   </style>
 </head>
 <body>
-  <form class="login-box" id="login-form">
-    <h1>🎙️ LiveFlow</h1>
+  <form class="login-card" id="login-form">
+    <div class="login-brand"><span>🎙️</span><span>LiveFlow</span></div>
+    <p class="login-sub">Transcription de réunions en direct</p>
     <input id="username" type="text" placeholder="Utilisateur" autocomplete="username" required autofocus>
     <input id="password" type="password" placeholder="Mot de passe" autocomplete="current-password" required>
     <button type="submit">Se connecter</button>