refonte(ui): design system moderne et intuitif sur les 5 pages

- en-tête vitré sticky, navigation en pastilles avec état actif,
  logo en tuile dégradée, fil d'Ariane projet
- dashboard: hero + tuiles de synthèse (actifs, fermées/déplacements
  30 j, cycle moyen), barre de progression par projet, états vides
  guidés, raccourci clavier /
- board: sélecteur de milestones + bandeau de progression, colonnes
  à défilement indépendant, placeholders de colonnes vides, hint
  sur le panneau de notes, toast et drawer animés
- live.js: recharge douce conditionnelle (visible, pas de drawer,
  pas de saisie, pas de drag) sinon pastille d'actualisation
- accessibilité: anneau de focus visible, prefers-reduced-motion,
  responsive retravaillé; board.js: drapeau de drag partagé avec
  live.js + raccourci / vers le filtre

app/templates/board.html

@@ -13,24 +13,48 @@
     <script src="/static/js/board.js" defer></script>
 </head>
 <body>
-    <header>
-        <h1>
-            <a href="/">📋 Kanbante</a>
-            <span class="sep">/</span>
-            <span>{{ owner }}/</span><strong>{{ repo }}</strong>
-        </h1>
-        <nav>
-            <a href="/focus" class="btn-sm">🎯 Focus</a>
-            <a href="/activity" class="btn-sm">📰 Activité</a>
+    <header class="app-header">
+        <div class="brand">
+            <a href="/" class="logo" aria-label="Kanbante — accueil"><span class="logo-mark">📋</span><span class="gradient-text">Kanbante</span></a>
+            <span class="crumb"><span class="sep">/</span> {{ owner }} / <strong>{{ repo }}</strong></span>
+        </div>
+        <nav class="nav-pills">
+            <a href="/" class="nav-pill">🏠 Projets</a>
+            <a href="/focus" class="nav-pill">🎯 Focus</a>
+            <a href="/activity" class="nav-pill">📰 Activité</a>
             {% if repo_info.html_url %}
-            <a href="{{ repo_info.html_url }}" target="_blank" class="btn-sm">🔗 Gitea</a>
+            <a href="{{ repo_info.html_url }}" target="_blank" class="nav-pill">🔗 Gitea ↗</a>
             {% endif %}
         </nav>
     </header>
 
+    {% if milestones %}
+    <div class="milestone-bar">
+        <span class="milestone-label">🎯 Milestone</span>
+        <a href="/board/{{ owner }}/{{ repo }}" class="milestone-chip{% if not milestone_param %} active{% endif %}">Toutes</a>
+        {% for m in milestones %}
+        <a href="/board/{{ owner }}/{{ repo }}?milestone={{ m.title|urlencode }}"
+           class="milestone-chip{% if milestone_param == m.title or milestone_param == m.id|string %} active{% endif %}">{{ m.title }}</a>
+        {% endfor %}
+    </div>
+    {% endif %}
+    {% if milestone_progress %}
+    <div class="milestone-banner">
+        <div class="milestone-info">
+            <strong>🎯 {{ milestone_progress.title }}</strong>
+            {% if milestone_progress.due_on %}
+            <span class="milestone-due">📅 échéance {{ milestone_progress.due_on[:10] }}</span>
+            {% endif %}
+            <span class="milestone-count">{{ milestone_progress.closed }}/{{ milestone_progress.total }} issues terminées</span>
+        </div>
+        <div class="progress progress-lg"><span style="width: {{ milestone_progress.pct }}%"></span></div>
+        <span class="milestone-pct">{{ milestone_progress.pct }}%</span>
+    </div>
+    {% endif %}
+
     <!-- Toolbar: text + label filters, and issue creation (Gitea-backed) -->
     <div class="board-toolbar">
-        <input type="text" id="card-filter" placeholder="🔍 Filtrer les cartes...">
+        <input type="text" id="card-filter" placeholder="🔍 Filtrer les cartes...  ( / )">
         <select id="label-filter">
             <option value="">Toutes les étiquettes</option>
             {% for label in labels %}
@@ -56,6 +80,9 @@
                           {% if limit %}data-limit="{{ limit }}" title="Limite WIP : {{ limit }}"{% endif %}>{% if limit %}{{ columns[col]|length }}/{{ limit }}{% else %}{{ columns[col]|length }}{% endif %}</span>
                 </div>
                 <div class="column-cards" data-column="{{ col }}">
+                    {% if not columns[col] %}
+                    <p class="column-empty">Glissez une carte ici</p>
+                    {% endif %}
                     {% for issue in columns[col] %}
                     <div class="kanban-card"
                          data-issue="{{ issue.number }}"
@@ -99,6 +126,7 @@
         <!-- Notes panel -->
         <aside class="notes-panel">
             <h3>📝 Notes du projet</h3>
+            <p class="notes-hint">Contexte libre, propre à Kanbante — il ne part pas dans Gitea.</p>
             <form hx-post="/api/notes" hx-swap="none"
                   hx-on::after-request="if(event.detail.successful) showNotesSaved()">
                 <input type="hidden" name="repo_full_name" value="{{ full_name }}">
@@ -138,6 +166,7 @@
         <span>Mis à jour {{ repo_info.updated_at[:10] }}</span>
         {% endif %}
     </footer>
+    <script src="/static/js/live.js" defer></script>
     <script>
         function showNotesSaved() {
             const toast = document.createElement('div');