From 54bbb2ca048bcec2bde350d4c7883ba3bf3e1e5e Mon Sep 17 00:00:00 2001
From: Raphix <picot.raphael@gmail.com>
Date: Thu, 8 Oct 2026 10:06:45 +0200
Subject: [PATCH] Version 2.1.0 - Update UI

---
 index.html                                    |   12 +-
 package.json                                  |    2 +-
 src/App.vue                                   |    8 +-
 src/assets/Global.scss                        |  315 ++-
 src/components/Admin/AdminBanner.vue          |   52 +
 src/components/Admin/AdminCard.vue            |  222 ++-
 src/components/Admin/AdminConfig.vue          |  553 ++----
 src/components/Admin/AdminConfirm.vue         |   61 +-
 src/components/Admin/AdminDashboard.vue       |  569 +++++-
 src/components/Admin/AdminField.vue           |  145 ++
 src/components/Admin/AdminGrid.vue            |   73 +
 src/components/Admin/AdminKv.vue              |   38 +-
 src/components/Admin/AdminList.vue            |   34 +
 src/components/Admin/AdminLogs.vue            |  602 +++---
 src/components/Admin/AdminMaintenance.vue     |  223 ++-
 src/components/Admin/AdminMeter.vue           |   67 +
 src/components/Admin/AdminMetrics.vue         |  311 +--
 src/components/Admin/AdminOverview.vue        |  401 ++--
 src/components/Admin/AdminPills.vue           |   62 +-
 src/components/Admin/AdminPlayerCard.vue      |  453 ++---
 src/components/Admin/AdminPlayers.vue         |  103 +-
 src/components/Admin/AdminPlaylists.vue       |  501 +++--
 src/components/Admin/AdminRow.vue             |   85 +
 src/components/Admin/AdminSection.vue         |   89 +-
 src/components/Admin/AdminServerDetail.vue    |  490 ++---
 src/components/Admin/AdminServers.vue         |  219 +--
 src/components/Admin/AdminStat.vue            |  137 +-
 src/components/Admin/AdminStatRow.vue         |   34 +
 src/components/Admin/AdminState.vue           |   68 +-
 src/components/Admin/AdminStep.vue            |   46 +
 src/components/Admin/AdminSteps.vue           |   20 +
 src/components/Admin/AdminToasts.vue          |  108 +-
 src/components/Admin/AdminToolbar.vue         |   70 +
 src/components/Admin/AdminUserDetail.vue      |  461 ++---
 src/components/Admin/AdminUserLine.vue        |  114 +-
 src/components/Admin/AdminUsers.vue           |  224 +--
 src/components/Admin/AdminWarp.vue            |  328 ++--
 src/components/Admin/AdminYoutube.vue         | 1229 ++++++------
 src/components/Admin/admin.scss               | 1745 +++++++++++++++++
 src/components/Admin/adminUi.js               |   85 +
 src/components/Layout/Account.vue             |   17 +-
 src/components/Layout/GuildHeader.vue         |  341 ++--
 src/components/Layout/Player.vue              |  161 +-
 src/components/Layout/Playlist.vue            |  707 +++++--
 src/components/Layout/Queue.vue               |  142 +-
 src/components/Layout/Search.vue              |  416 +++-
 src/components/Layout/View.vue                |  210 +-
 src/components/UI/Announcement.vue            |   13 +-
 src/components/UI/Avatar.vue                  |   94 +-
 src/components/UI/Box.vue                     |   24 +-
 src/components/UI/Button.vue                  |  311 ++-
 src/components/UI/Card.vue                    |  206 ++
 src/components/UI/Carousel.vue                |   76 +-
 src/components/UI/Circle.vue                  |   18 +-
 src/components/UI/ContextMenu.vue             |  432 +++-
 src/components/UI/CustomIcon.vue              |  106 +-
 src/components/UI/DefaultSplash.vue           |    4 +
 src/components/UI/DurationBar.vue             |  181 +-
 src/components/UI/EmptyState.vue              |   96 +
 src/components/UI/Error.vue                   |   46 +-
 src/components/UI/Field.vue                   |  125 ++
 src/components/UI/Glider.vue                  |   82 +-
 src/components/UI/IconAction.vue              |  129 +-
 src/components/UI/Info.vue                    |   52 +-
 src/components/UI/ListenBox.vue               |   49 +-
 src/components/UI/Logo.vue                    |    7 +-
 src/components/UI/Marquee.vue                 |  171 +-
 src/components/UI/Metric.vue                  |    6 +-
 src/components/UI/Modal.vue                   |  480 ++++-
 src/components/UI/ModalTree.vue               |   41 +-
 src/components/UI/MusicAnimation.vue          |    5 +-
 src/components/UI/PlaylistItem.vue            |  259 ++-
 src/components/UI/Role.vue                    |   13 +-
 src/components/UI/SegmentedControl.vue        |  224 +++
 src/components/UI/Selector.vue                |  544 +++--
 src/components/UI/Server.vue                  |   51 +-
 src/components/UI/ServerAvatar.vue            |   78 +-
 src/components/UI/Spinner.vue                 |   72 +
 src/components/UI/Splash.vue                  |   11 +-
 src/components/UI/SubsonicsLogo.vue           |    9 +-
 src/components/UI/Success.vue                 |   46 +-
 src/components/UI/Switch.vue                  |  176 ++
 src/components/UI/Tag.vue                     |   66 +-
 src/components/UI/User.vue                    |    4 +
 src/components/UI/Video.vue                   |   22 +-
 src/components/UI/VideoList.vue               |   15 +-
 src/components/UI/VideoQueue.vue              |   15 +-
 src/components/Widget/Dispatcher.vue          |    2 +-
 .../Widget/Guild/GuildHeaderUsers.vue         |  134 +-
 src/components/Widget/Guild/GuildSettings.vue |   18 +-
 .../Widget/Guild/Settings/GuildPlaylists.vue  |  190 ++
 .../Widget/Guild/Settings/GuildSecurity.vue   |   12 +-
 src/components/Widget/Playlist/ActionMenu.vue |  376 ++++
 .../Widget/Playlist/PlaylistCreateModal.vue   |  707 +++++++
 .../Widget/Playlist/PlaylistHost.vue          |   25 +
 .../Widget/Playlist/PlaylistSongList.vue      |  451 +++++
 .../Widget/Playlist/PlaylistSongRow.vue       |  267 +++
 .../Widget/Playlist/PlaylistSortMenu.vue      |  437 +++++
 .../Widget/Playlist/PlaylistToasts.vue        |  203 ++
 .../Widget/Playlist/SaveToPlaylistModal.vue   |  452 +++++
 .../Widget/Playlist/playlistMeta.js           |  233 +++
 src/components/Widget/Queue/NextList.vue      |  528 +++--
 src/components/Widget/Queue/PreviousList.vue  |  221 ++-
 src/components/Widget/ReturnHomeButton.vue    |   27 +-
 .../Widget/Server/ServerListItem.vue          |  220 ++-
 .../Widget/Server/ServerOnlinePicture.vue     |   79 +-
 src/components/Widget/User/GoogleCallback.vue |   30 +-
 .../Widget/User/Settings/BugReport.vue        |  218 +-
 .../User/Settings/InformationSettings.vue     |   20 +-
 .../Widget/User/Settings/PrivacySettings.vue  |   53 +-
 .../Widget/User/Settings/ThemeSelector.vue    |  190 +-
 src/components/Widget/User/UserSettings.vue   |    4 +-
 src/components/Widget/User/YoutubeAccount.vue |   27 +-
 src/components/Widget/VideoComposable.vue     |  441 +++--
 src/components/Widget/View/Default.vue        |  128 +-
 .../Widget/View/Home/AccountMobile.vue        |   51 +-
 src/components/Widget/View/Home/Advice.vue    |  154 +-
 .../Widget/View/Home/AdviceItem.vue           |   62 +-
 src/components/Widget/View/Home/Changelog.vue |  287 ---
 .../Widget/View/Home/ChangelogModal.vue       |  643 ++++++
 src/components/Widget/View/Home/History.vue   |  221 ++-
 src/components/Widget/View/Home/HomeHero.vue  |  517 +++++
 .../Widget/View/Home/HomeNowPlaying.vue       |  347 ++++
 .../Widget/View/Home/HomeQuickActions.vue     |  133 ++
 .../Widget/View/Home/HomeRecent.vue           |  446 +++++
 src/components/Widget/View/Home/HomeStats.vue |  251 +++
 src/components/Widget/View/Home/HomeTip.vue   |   98 +
 src/components/Widget/View/Home/Welcome.vue   |   72 -
 src/components/Widget/View/Home/changelog.js  |  168 ++
 src/components/Widget/View/Home/tips.js       |   77 +
 src/components/Widget/View/Home/useHistory.js |   61 +
 .../Widget/View/Home/userSettingsOpener.js    |   61 +
 src/components/Widget/View/LoadingView.vue    |   67 +-
 .../Widget/View/Lyrics/LyricsSearchModal.vue  |  432 ++++
 .../Widget/View/Lyrics/LyricsSynced.vue       |  471 +++++
 .../Widget/View/Lyrics/lyricsUtils.js         |  165 ++
 src/components/Widget/View/LyricsView.vue     |  906 +++++++++
 .../Widget/View/Playlist/PlaylistView.vue     |  112 +-
 .../Widget/View/Search/PlaylistHeader.vue     | 1029 ++++++----
 .../Widget/View/Search/SearchSuggestions.vue  |  178 +-
 src/components/Widget/View/SearchResults.vue  |  143 +-
 src/components/Widget/View/UploadFiles.vue    |  574 ++++--
 src/main.js                                   |    5 +-
 src/routes.js                                 |    1 -
 src/stores/globalStore.js                     |    3 +
 src/stores/playerStore.js                     |   26 +-
 src/stores/playlistStore.js                   |  938 +++++++++
 src/stores/userStore.js                       |   19 +-
 src/utils/Loader.vue                          |   17 +-
 src/utils/Logic.js                            |  195 +-
 src/utils/ModalContext.js                     |   33 +
 src/utils/SocketEnvironment.vue               |   40 +-
 src/views/Interface.vue                       |   13 +-
 src/views/Login.vue                           |  142 +-
 src/views/PageError.vue                       |   57 +-
 src/views/Privacy.vue                         |   30 +-
 src/views/Servers.vue                         |  220 ++-
 src/views/Terms.vue                           |   31 +-
 158 files changed, 24215 insertions(+), 7686 deletions(-)
 create mode 100644 src/components/Admin/AdminBanner.vue
 create mode 100644 src/components/Admin/AdminField.vue
 create mode 100644 src/components/Admin/AdminGrid.vue
 create mode 100644 src/components/Admin/AdminList.vue
 create mode 100644 src/components/Admin/AdminMeter.vue
 create mode 100644 src/components/Admin/AdminRow.vue
 create mode 100644 src/components/Admin/AdminStatRow.vue
 create mode 100644 src/components/Admin/AdminStep.vue
 create mode 100644 src/components/Admin/AdminSteps.vue
 create mode 100644 src/components/Admin/AdminToolbar.vue
 create mode 100644 src/components/Admin/admin.scss
 create mode 100644 src/components/Admin/adminUi.js
 create mode 100644 src/components/UI/Card.vue
 create mode 100644 src/components/UI/EmptyState.vue
 create mode 100644 src/components/UI/Field.vue
 create mode 100644 src/components/UI/SegmentedControl.vue
 create mode 100644 src/components/UI/Spinner.vue
 create mode 100644 src/components/UI/Switch.vue
 create mode 100644 src/components/Widget/Guild/Settings/GuildPlaylists.vue
 create mode 100644 src/components/Widget/Playlist/ActionMenu.vue
 create mode 100644 src/components/Widget/Playlist/PlaylistCreateModal.vue
 create mode 100644 src/components/Widget/Playlist/PlaylistHost.vue
 create mode 100644 src/components/Widget/Playlist/PlaylistSongList.vue
 create mode 100644 src/components/Widget/Playlist/PlaylistSongRow.vue
 create mode 100644 src/components/Widget/Playlist/PlaylistSortMenu.vue
 create mode 100644 src/components/Widget/Playlist/PlaylistToasts.vue
 create mode 100644 src/components/Widget/Playlist/SaveToPlaylistModal.vue
 create mode 100644 src/components/Widget/Playlist/playlistMeta.js
 delete mode 100644 src/components/Widget/View/Home/Changelog.vue
 create mode 100644 src/components/Widget/View/Home/ChangelogModal.vue
 create mode 100644 src/components/Widget/View/Home/HomeHero.vue
 create mode 100644 src/components/Widget/View/Home/HomeNowPlaying.vue
 create mode 100644 src/components/Widget/View/Home/HomeQuickActions.vue
 create mode 100644 src/components/Widget/View/Home/HomeRecent.vue
 create mode 100644 src/components/Widget/View/Home/HomeStats.vue
 create mode 100644 src/components/Widget/View/Home/HomeTip.vue
 delete mode 100644 src/components/Widget/View/Home/Welcome.vue
 create mode 100644 src/components/Widget/View/Home/changelog.js
 create mode 100644 src/components/Widget/View/Home/tips.js
 create mode 100644 src/components/Widget/View/Home/useHistory.js
 create mode 100644 src/components/Widget/View/Home/userSettingsOpener.js
 create mode 100644 src/components/Widget/View/Lyrics/LyricsSearchModal.vue
 create mode 100644 src/components/Widget/View/Lyrics/LyricsSynced.vue
 create mode 100644 src/components/Widget/View/Lyrics/lyricsUtils.js
 create mode 100644 src/components/Widget/View/LyricsView.vue
 create mode 100644 src/stores/playlistStore.js
 create mode 100644 src/utils/ModalContext.js

diff --git a/index.html b/index.html
index 6ec2cdb..52bad1d 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,18 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="fr">
   <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#111210">
+    <link rel="icon" href="/favicon.ico">
+    <title>Subsonics</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but Subsonics doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>Désolé, Subsonics ne peut pas fonctionner sans JavaScript. Active-le pour continuer.</strong>
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
diff --git a/package.json b/package.json
index 24076cf..14067c5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chopin-frontend",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "dev": "vite --host --port 8080",
diff --git a/src/App.vue b/src/App.vue
index 4ce31f3..d481d66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,14 @@
 <template>
    <router-view/>
    <Announcement/>
+   <!-- Playlists : écouteurs, modales de création / d'enregistrement et notifications (une seule instance) -->
+   <PlaylistHost/>
 </template>
 <script setup>
   import { useGlobalStore } from '@/stores/globalStore';
   import Announcement from '@/components/UI/Announcement.vue';
-  const globalStore = useGlobalStore();
+  import PlaylistHost from '@/components/Widget/Playlist/PlaylistHost.vue';
+  // Créé dès le démarrage : applique le thème enregistré (data-theme) avant le premier rendu des pages
+  useGlobalStore();
   console.log("Subsonics Chopin - Welcome");
-</script>
\ No newline at end of file
+</script>
diff --git a/src/assets/Global.scss b/src/assets/Global.scss
index b7cef2e..51c545b 100644
--- a/src/assets/Global.scss
+++ b/src/assets/Global.scss
@@ -1,10 +1,13 @@
 @font-face {
     font-family: 'Gunship';
     src: url("/gunship.ttf");
+    font-display: swap;
 }
 
-[data-theme='dark'] {
-    
+/* Thème sombre : appliqué aussi tant que data-theme n'est pas encore posé (évite un flash blanc) */
+[data-theme='dark'],
+:root:not([data-theme]) {
+    color-scheme: dark;
 
     --primary: #111210;
     --primary-inverse: #FFFFFF;
@@ -19,11 +22,14 @@
     --text-error: #ff2b2b;
     --text-success: #00ff00;
     --text-warning: #FFA500;
-  
-  
+    --text-info: #4db4ff;
+
+    --scrollbar-thumb: color-mix(in srgb, var(--text) 30%, transparent);
+    --scrollbar-thumb-hover: color-mix(in srgb, var(--text) 55%, transparent);
 }
 
 [data-theme='light'] {
+    color-scheme: light;
 
     --primary: #FFFFFF;
     --primary-inverse: #111210;
@@ -34,25 +40,84 @@
     --text: #111210;
     --text-inverse: #FFFFFF;
     --text-secondary: #404040;
-    --text-tertiary: #C5c3c3;
-    --text-error: #CD034F;  
-    --text-success: #00a900;
-    --text-warning: #FFA500;
+    /* Contraste suffisant sur fond clair (l'ancien #C5c3c3 était quasi invisible) */
+    --text-tertiary: #6b6b6b;
+    --text-error: #CD034F;
+    --text-success: #007a1f;
+    --text-warning: #a35f00;
+    --text-info: #0063b1;
+
+    --scrollbar-thumb: color-mix(in srgb, var(--text) 30%, transparent);
+    --scrollbar-thumb-hover: color-mix(in srgb, var(--text) 55%, transparent);
 }
 
 :root {
     --main: #CD034F;
     --main-hover: color-mix(in srgb, var(--main) 90%, black);
     --main-active: color-mix(in srgb, var(--main) 70%, black);
+    --main-soft: color-mix(in srgb, var(--main) 16%, transparent);
+    --main-contrast: #fff;
 
     --admin-color: #209AFE;
     --owner-color: #FFAA32;
     --mod-color: #0BFF89;
+
+    /* Variables utilisées par des composants mais jamais définies jusqu'ici */
+    --text-primary: var(--text);
+    --text-color: var(--text);
+    --text-hover: var(--text-secondary);
+    --border: color-mix(in srgb, var(--quaternary) 45%, transparent);
+    --background: transparent;
+
+    /* Surfaces */
+    --surface-1: var(--secondary);
+    --surface-2: var(--tertiary);
+    --surface-3: var(--quaternary);
+
+    /* Rayons */
+    --radius-sm: 6px;
+    --radius: 10px;
+    --radius-lg: 14px;
+    --radius-pill: 999px;
+
+    /* Espacements */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 24px;
+    --space-6: 32px;
+
+    /* Élévation */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .25);
+    --shadow: 0 0 10px rgba(0, 0, 0, .35);
+    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
+
+    /* Focus clavier : anneau doublé pour rester visible sur fond rose comme sur fond sombre */
+    --focus-ring: 0 0 0 2px var(--primary), 0 0 0 4px var(--main);
+    /* Variante intérieure, pour un élément coupé par un conteneur overflow: hidden */
+    --focus-ring-inset: inset 0 0 0 2px var(--main);
+
+    /* Survol / pression d'une ligne de liste (teinte neutre qui suit le thème) */
+    --surface-hover: color-mix(in srgb, var(--text) 8%, transparent);
+    --surface-active: color-mix(in srgb, var(--text) 13%, transparent);
+
+    /* Voile des modales et texte posé sur une image (miniatures) */
+    --overlay: rgba(0, 0, 0, .55);
+    --on-media: #fff;
+
+    /* Mouvement */
+    --ease: cubic-bezier(.2, .7, .2, 1);
+    --dur-fast: .15s;
+    --dur: .25s;
+
+    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --font-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
 }
 
 html, body {
     margin: 0 !important;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font);
     min-height: 100vh;
     min-width: 100vw;
     margin: 0;
@@ -60,10 +125,11 @@ html, body {
     height: 100%;
     overflow-x: hidden;
     background-color: var(--primary);
-    transition: all 0.2s ease-in-out;
+    /* Seules les couleurs s'animent au changement de thème (avant : transition: all) */
+    transition: background-color var(--dur) ease-in-out, color var(--dur) ease-in-out;
     color: var(--text);
-
-   
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 #app {
@@ -71,64 +137,198 @@ html, body {
     display: flex;
 }
 
+/* Les boutons natifs n'héritent pas de la police par défaut */
+button, input, select, textarea {
+    font-family: inherit;
+}
+
 .no-decoration {
     text-decoration: none !important;
-}   
+}
 
 .underline {
     text-decoration: underline !important;
-}   
+}
 
-h1 {    
+h1 {
     font-family: 'Gunship';
     font-size: 30px;
     color: var(--text-color);
-}  
+}
 
 a {
     color: var(--text-secondary)
 }
 
+a:hover {
+    color: var(--text);
+}
+
+/* Focus clavier visible partout (la souris ne déclenche pas :focus-visible) */
+:focus-visible {
+    outline: 2px solid var(--main);
+    outline-offset: 2px;
+}
+
+::selection {
+    background-color: color-mix(in srgb, var(--main) 38%, transparent);
+}
+
 /*Scrollbar */
 ::-webkit-scrollbar {
     width: 5px;
+    height: 5px;
     margin-right: 20px;
     margin-left: 20px;
-  }
+}
+
 ::-webkit-scrollbar-track {
     border-radius: 12px;
-  }
+}
+
 ::-webkit-scrollbar-thumb {
-    background: #ffffff56;
+    background: var(--scrollbar-thumb);
     border-radius: 5px;
     transition: 0.2s;
-  }
+}
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #ffffffa8;
-  }
-  
+    background: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox ne connaît pas ::-webkit-scrollbar */
+@supports not selector(::-webkit-scrollbar) {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-thumb) transparent;
+    }
+}
+
 .full {
     width: 100%;
 }
 
+/* Champs de formulaire */
+input:is([type="text"], [type="search"], [type="url"], [type="password"], [type="number"], [type="email"]),
+select,
+textarea {
+    background-color: var(--tertiary);
+    color: var(--text);
+    border: none;
+    border-radius: var(--radius-sm);
+    padding: 8px 10px;
+    font-family: var(--font);
+    font-size: inherit;
+    /* Contour transparent : invisible normalement, mais rendu en mode contraste élevé */
+    outline: 2px solid transparent;
+    outline-offset: 0;
+    transition: box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
+}
+
+input:is([type="text"], [type="search"], [type="url"], [type="password"], [type="number"], [type="email"]):focus,
+select:focus,
+textarea:focus {
+    box-shadow: var(--focus-ring);
+}
+
+input:is([type="text"], [type="search"], [type="url"], [type="password"], [type="number"], [type="email"]):disabled,
+select:disabled,
+textarea:disabled {
+    opacity: .6;
+    cursor: not-allowed;
+}
+
+input::placeholder,
+textarea::placeholder {
+    color: var(--text-secondary);
+    opacity: .7;
+}
+
+select {
+    cursor: pointer;
+}
+
 textarea {
     resize: vertical;
-    background-color: var(--tertiary);
-    border: none;
-    border-radius: 5px;
-    padding: 5px;
-    color: var(--text);
-    font-family: 'Inter', sans-serif;
-    outline: none;
     min-height: 4vh;
     max-height: 15vh;
 }
 
-textarea:focus {
-    box-shadow: 0 0 5px var(--main);
+/* Champ posé sur une carte --tertiary : on redescend d'un niveau pour garder le contraste */
+.input-inset {
+    background-color: var(--secondary) !important;
 }
 
+input[type="checkbox"],
+input[type="radio"],
+input[type="range"],
+progress {
+    accent-color: var(--main);
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    cursor: pointer;
+}
+
+/* Utilitaires */
+
+/* Bouton sans apparence (ligne de liste, carte cliquable…) : garde le focus visible du navigateur */
+.u-plain-button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.u-plain-button:disabled {
+    cursor: not-allowed;
+}
+
+/* Titre de vue (résultats, fichiers…) : même échelle partout */
+.u-view-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1.25;
+    color: var(--text);
+}
+
+.u-view-title > svg {
+    color: var(--main);
+}
+
+.sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+.u-mono {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+}
+
+.u-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
 
 @keyframes appear {
     from {
@@ -150,30 +350,6 @@ textarea:focus {
     }
 }
 
-
-input[type="checkbox"] {
-    background-color: #FFFFFF !important;
-}
-
-input[type="checkbox"]:checked {
-    background-color: var(--main-hover) !important;
-}
-
-input[type="checkbox"]:hover {
-    background-color: var(--main-active) !important;
-}
-
-input[type="text"] {
-    background-color: var(--tertiary);
-    border: none;
-    border-radius: 5px;
-    padding: 7px;
-    color: var(--text);
-    font-family: 'Inter', sans-serif;
-    outline: none;
-}
-
-
 @keyframes scroll {
     0% {
         transform: translateX(0);
@@ -181,4 +357,29 @@ input[type="text"] {
     100% {
         transform: translateX(var(--scroll-distance));
     }
-}
\ No newline at end of file
+}
+
+@keyframes u-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes u-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Mouvement réduit : on coupe les animations et transitions (notes du splash, marquee, glissements…) */
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto !important;
+    }
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
diff --git a/src/components/Admin/AdminBanner.vue b/src/components/Admin/AdminBanner.vue
new file mode 100644
index 0000000..d7cdaaf
--- /dev/null
+++ b/src/components/Admin/AdminBanner.vue
@@ -0,0 +1,52 @@
+<template>
+    <div :class="['adm-banner', `adm-tone-${toneName}`]" :role="toneName === 'error' ? 'alert' : 'status'">
+        <Icon class="adm-banner__icon" :icon="icon || toneIcon(toneName)" aria-hidden="true"/>
+        <div class="adm-banner__content">
+            <p v-if="title" class="adm-banner__title">{{ title }}</p>
+            <div v-if="$slots.default" class="adm-banner__text"><slot></slot></div>
+        </div>
+        <div v-if="$slots.action || dismissible" class="adm-banner__action">
+            <slot name="action"></slot>
+            <IconAction v-if="dismissible" icon="fa-solid fa-xmark" :label="dismissLabel" size="1em" @click="$emit('dismiss')"/>
+        </div>
+    </div>
+</template>
+<script setup>
+/**
+ * Bandeau d'information en tête de section (remplace les anciens .banner / .banner-action).
+ * `tone` : info (défaut) | success | warning | error (+ alias warn) ; slot `action` pour un bouton.
+ * Une erreur est annoncée (role="alert"), les autres tons poliment (role="status").
+ */
+import { computed } from 'vue';
+import IconAction from '@/components/UI/IconAction.vue';
+import { normalizeTone, toneIcon, toneValidator } from './adminUi';
+import './admin.scss';
+
+const props = defineProps({
+    tone: {
+        type: String,
+        default: 'info',
+        validator: toneValidator
+    },
+    title: {
+        type: String,
+        default: null
+    },
+    icon: {
+        type: String,
+        default: null
+    },
+    dismissible: {
+        type: Boolean,
+        default: false
+    },
+    dismissLabel: {
+        type: String,
+        default: "Masquer ce message"
+    }
+});
+
+defineEmits(['dismiss']);
+
+const toneName = computed(() => normalizeTone(props.tone, 'info'));
+</script>
diff --git a/src/components/Admin/AdminCard.vue b/src/components/Admin/AdminCard.vue
index f78976e..efced37 100644
--- a/src/components/Admin/AdminCard.vue
+++ b/src/components/Admin/AdminCard.vue
@@ -1,73 +1,187 @@
 <template>
-    <Box level="second" padding="closed" no-shadow class="admin-card">
-        <div class="card-header">
-            <div class="card-title">
-                <Icon class="card-icon" :icon="icon" :style="{ color: color }"/>
-                <p>{{ title }}</p>
+    <component :is="as" :class="rootClasses" :style="rootStyle" :aria-busy="busy ? 'true' : undefined">
+        <header v-if="hasHeader" class="adm-card__header">
+            <div class="adm-card__lead">
+                <!-- Slot media : avatar / pochette à la place de la pastille d'icône -->
+                <span v-if="$slots.media" class="adm-card__media"><slot name="media"></slot></span>
+                <span v-else-if="icon" class="adm-card__chip" aria-hidden="true"><Icon :icon="icon"/></span>
+                <div v-if="title || subtitle" class="adm-card__heading">
+                    <component :is="headingTag" v-if="title" :id="titleId" class="adm-card__title">
+                        <button v-if="isCollapsible" type="button" class="adm-card__toggle"
+                            :aria-expanded="isOpen ? 'true' : 'false'" :aria-controls="bodyId"
+                            @click="toggle()">{{ title }}</button>
+                        <template v-else>{{ title }}</template>
+                    </component>
+                    <p v-if="subtitle" class="adm-card__subtitle">{{ subtitle }}</p>
+                </div>
+                <Icon v-if="isCollapsible" class="adm-card__chevron" icon="fa-solid fa-chevron-down" aria-hidden="true"/>
             </div>
-            <slot name="header"></slot>
-        </div>
-        <div class="card-content">
+            <Spinner v-if="busy" size="sm" :label="busyLabel"/>
+            <div v-if="$slots.actions || $slots.header" class="adm-card__actions">
+                <slot name="actions"></slot>
+                <!-- Ancien nom du slot d'actions, conservé pour les sections pas encore migrées -->
+                <slot name="header"></slot>
+            </div>
+        </header>
+        <div v-show="isOpen" :id="bodyId" :class="['adm-card__body', bodyClass]">
             <slot></slot>
         </div>
-    </Box>
+        <footer v-if="$slots.footer" v-show="isOpen" class="adm-card__footer">
+            <slot name="footer"></slot>
+        </footer>
+    </component>
 </template>
 <script setup>
-// Carte d'information (fond --tertiary, pastille d'icône en --secondary comme Metric.vue)
-import Box from '@/components/UI/Box.vue';
+/**
+ * Carte des sections d'administration (fond --tertiary, en-tête avec pastille d'icône et filet).
+ * - `span` : largeur dans une AdminGrid (1–12) ; `spanMd` / `spanSm` remplacent les largeurs automatiques.
+ * - Slots : `actions` (à droite de l'en-tête ; alias historique `header`), défaut (corps), `footer` (épinglé en bas),
+ *   `media` (avatar, pochette… à la place de la pastille d'icône).
+ * - Titre h3 (h4 dans un groupe titré AdminGrid). Sans titre ni sous-titre ni actions : pas d'en-tête.
+ * - `collapsible` : le titre devient un bouton (aria-expanded) ; état contrôlable via v-model:open
+ *   ou mémorisé par navigateur avec `persistKey`.
+ */
+import { computed, inject, ref, unref, useId, useSlots, watch } from 'vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import { ADMIN_HEADING_KEY, normalizeTone, spanClasses, toneValidator, readLocal, writeLocal } from './adminUi';
+import './admin.scss';
 
-defineProps({
+const props = defineProps({
     title: {
         type: String,
-        required: true
+        default: null
     },
     icon: {
         type: String,
         default: "fa-solid fa-circle-info"
     },
+    // Historique : couleur libre de l'icône (prioritaire sur `tone` pour la pastille)
     color: {
         type: String,
-        default: "var(--text)"
+        default: null
+    },
+    subtitle: {
+        type: String,
+        default: null
+    },
+    span: {
+        type: [Number, String],
+        default: 4
+    },
+    spanMd: {
+        type: [Number, String],
+        default: null
+    },
+    spanSm: {
+        type: [Number, String],
+        default: null
+    },
+    tone: {
+        type: String,
+        default: 'default',
+        validator: toneValidator
+    },
+    flush: {
+        type: Boolean,
+        default: false
+    },
+    collapsible: {
+        type: Boolean,
+        default: false
+    },
+    defaultOpen: {
+        type: Boolean,
+        default: true
+    },
+    // Contrôle externe facultatif (v-model:open) ; undefined = état interne
+    open: {
+        type: Boolean,
+        default: undefined
+    },
+    // Mémorise l'état replié dans le navigateur (clé courte, ex. "yt-assistant")
+    persistKey: {
+        type: String,
+        default: null
+    },
+    busy: {
+        type: Boolean,
+        default: false
+    },
+    busyLabel: {
+        type: String,
+        default: "Actualisation…"
+    },
+    bodyClass: {
+        type: [String, Array, Object],
+        default: null
+    },
+    as: {
+        type: String,
+        default: 'section'
     }
 });
+
+const emit = defineEmits(['update:open', 'toggle']);
+const slots = useSlots();
+
+const uid = useId();
+const titleId = `adm-card-${uid}-title`;
+const bodyId = `adm-card-${uid}-body`;
+
+const toneName = computed(() => normalizeTone(props.tone));
+const isCollapsible = computed(() => props.collapsible && !!props.title);
+// L'icône seule ne suffit pas à créer un en-tête (elle a une valeur par défaut) : carte « nue » possible
+const hasHeader = computed(() => !!(props.title || props.subtitle || slots.actions || slots.header || slots.media));
+
+const headingLevel = inject(ADMIN_HEADING_KEY, null);
+const headingTag = computed(() => 'h' + Math.min(6, Math.max(2, Number(unref(headingLevel)) || 3)));
+
+// État replié : contrôlé (prop open) > mémorisé (persistKey) > defaultOpen
+const storageKey = computed(() => (props.persistKey ? "adminCard:" + props.persistKey : null));
+
+function initialOpen() {
+    if (storageKey.value) {
+        const saved = readLocal(storageKey.value);
+        if (saved === "1") return true;
+        if (saved === "0") return false;
+    }
+    return props.defaultOpen;
+}
+
+const localOpen = ref(initialOpen());
+const isOpen = computed(() => !isCollapsible.value || (props.open !== undefined ? props.open : localOpen.value));
+
+watch(() => props.defaultOpen, (value) => {
+    // Valeur par défaut calculée après chargement (ex. replié quand le compte est valide) : suivie tant que rien n'est mémorisé
+    if (props.open === undefined && !(storageKey.value && readLocal(storageKey.value) !== null)) localOpen.value = value;
+});
+
+function setOpen(value) {
+    const next = !!value;
+    localOpen.value = next;
+    if (storageKey.value) writeLocal(storageKey.value, next ? "1" : "0");
+    emit('update:open', next);
+    emit('toggle', next);
+}
+
+function toggle() {
+    setOpen(!isOpen.value);
+}
+
+const rootClasses = computed(() => [
+    'adm-card',
+    `adm-tone-${toneName.value}`,
+    ...spanClasses(props.span, props.spanMd, props.spanSm),
+    {
+        'adm-tone-custom': !!props.color,
+        'adm-card--accent': toneName.value === 'warning' || toneName.value === 'error',
+        'adm-card--flush': props.flush,
+        'adm-card--collapsible': isCollapsible.value,
+        'adm-card--collapsed': !isOpen.value
+    }
+]);
+
+const rootStyle = computed(() => (props.color ? { '--adm-tone': props.color } : null));
+
+defineExpose({ isOpen, setOpen, toggle });
 </script>
-<style scoped>
-.admin-card {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    min-width: 0;
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-.card-title {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-weight: 600;
-}
-
-.card-title p {
-    margin: 0;
-}
-
-.card-icon {
-    background-color: var(--secondary);
-    padding: 10px;
-    border-radius: 100%;
-    width: 16px;
-    height: 16px;
-}
-
-.card-content {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-}
-</style>
diff --git a/src/components/Admin/AdminConfig.vue b/src/components/Admin/AdminConfig.vue
index a1da7fd..f211ca9 100644
--- a/src/components/Admin/AdminConfig.vue
+++ b/src/components/Admin/AdminConfig.vue
@@ -1,154 +1,111 @@
 <template>
     <AdminSection title="🎛️ Configuration" subtitle="Paramètres de config.json et état des intégrations (Discord, Google, Spotify, WARP, YouTube)">
         <template #actions>
-            <Button icon="fa-solid fa-rotate" :disabled="adminStore.configLoading" @click="adminStore.fetchConfig()">Actualiser</Button>
+            <Button variant="secondary" icon="fa-solid fa-rotate" :loading="adminStore.configLoading" @click="adminStore.fetchConfig()">Actualiser</Button>
         </template>
 
         <AdminState :loading="!data && adminStore.configLoading" :error="!data ? adminStore.configError : null"
             :empty="!data" empty-text="Aucune configuration reçue" @retry="adminStore.fetchConfig()">
 
-            <div v-if="data.restartRequired" class="banner banner-action">
-                <Info>
-                    Des paramètres modifiés ne seront pris en compte qu'au prochain redémarrage de Subsonics :
-                    {{ pendingLabels.join(", ") }}.
-                </Info>
-                <Button icon="fa-solid fa-screwdriver-wrench" @click="adminStore.setSection('maintenance')">Redémarrer depuis la maintenance</Button>
-            </div>
+            <AdminBanner v-if="data.restartRequired" tone="warning" title="Redémarrage nécessaire">
+                Ces paramètres ne seront pris en compte qu'au prochain redémarrage de Subsonics : {{ pendingLabels.join(", ") }}.
+                <template #action>
+                    <Button size="sm" icon="fa-solid fa-screwdriver-wrench" @click="adminStore.setSection('maintenance')">Ouvrir la maintenance</Button>
+                </template>
+            </AdminBanner>
 
-            <!-- Intégrations -->
-            <AdminCard title="Intégrations" icon="fa-solid fa-plug" color="var(--admin-color)" class="wide">
-                <div class="integrations">
-                    <div class="integration">
-                        <div class="integration-head">
-                            <span class="integration-name"><Icon icon="fa-brands fa-discord"/> Bot Discord</span>
-                            <Tag :color="integ.discord?.ready ? 'var(--text-success)' : 'var(--text-error)'" :icon="integ.discord?.ready ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'">
-                                {{ integ.discord?.ready ? "Connecté" : "Déconnecté" }}
-                            </Tag>
-                        </div>
-                        <p v-if="integ.discord?.tag" class="hint">Compte : {{ integ.discord.tag }}</p>
-                        <p class="hint">Redirection OAuth2 à déclarer dans le portail développeur Discord :</p>
-                        <div class="uri-row">
-                            <code class="uri">{{ integ.discord?.redirectUri || "Adresse du site non définie" }}</code>
-                            <IconAction v-if="integ.discord?.redirectUri" title="Copier" icon="fa-solid fa-copy" @click="copy(integ.discord.redirectUri)"/>
+            <!-- Intégrations : un chiffre clé par service -->
+            <AdminStatRow :columns="3" label="État des intégrations">
+                <AdminStat label="Bot Discord" icon="fa-brands fa-discord" :tone="integ.discord?.ready ? 'success' : 'error'"
+                    :value="integ.discord?.ready ? 'Connecté' : 'Déconnecté'" :sub="integ.discord?.tag ? 'Compte ' + integ.discord.tag : null"/>
+                <AdminStat label="Google (playlists YouTube)" icon="fa-brands fa-google" :tone="integ.google?.configured ? 'success' : 'warning'"
+                    :value="integ.google?.configured ? 'Configuré' : 'Incomplet'" :sub="googleSub"/>
+                <AdminStat label="Spotify" icon="fa-brands fa-spotify" :tone="spotifyState.tone" :value="spotifyState.label" :sub="spotifySub"/>
+                <AdminStat label="Proxy WARP" icon="fa-solid fa-cloud" :tone="warpState.tone" :value="warpState.label" :sub="warpSub" to="warp"/>
+                <AdminStat label="Compte YouTube (lecture)" icon="fa-brands fa-youtube" :tone="cookiesState.tone" :value="cookiesState.label"
+                    :sub="cookiesSub" to="youtube"/>
+                <AdminStat label="Base média" icon="fa-solid fa-photo-film" :tone="mediaState.tone" :value="mediaState.label"
+                    sub="Salon Discord des fichiers envoyés"/>
+            </AdminStatRow>
+
+            <!-- Paramètres, une carte par service -->
+            <AdminGrid>
+                <AdminCard v-for="group in groups" :key="group.id" :title="group.title" :subtitle="group.hint" :icon="group.icon"
+                    :tone="group.tone" :color="group.color" :span="6" :span-sm="12">
+
+                    <!-- Adresses de redirection à déclarer chez le fournisseur -->
+                    <div v-if="group.id === 'discord'" class="cfg-uri">
+                        <p class="adm-hint">Redirection OAuth2 à déclarer dans le portail développeur Discord :</p>
+                        <div class="cfg-uri__row">
+                            <code class="adm-code cfg-uri__value">{{ integ.discord?.redirectUri || "Adresse du site non définie" }}</code>
+                            <IconAction v-if="integ.discord?.redirectUri" label="Copier l'adresse de redirection Discord" icon="fa-solid fa-copy"
+                                @click="copy(integ.discord.redirectUri)"/>
                         </div>
                     </div>
-
-                    <div class="integration">
-                        <div class="integration-head">
-                            <span class="integration-name"><Icon icon="fa-brands fa-google"/> Google (playlists YouTube)</span>
-                            <Tag :color="integ.google?.configured ? 'var(--text-success)' : 'var(--text-warning)'" :icon="integ.google?.configured ? 'fa-solid fa-circle-check' : 'fa-solid fa-triangle-exclamation'">
-                                {{ integ.google?.configured ? "Configuré" : "Incomplet" }}
-                            </Tag>
+                    <template v-else-if="group.id === 'google'">
+                        <AdminBanner v-if="!integ.google?.configured" tone="warning">Il manque : {{ googleMissing.join(", ") }}.</AdminBanner>
+                        <div class="cfg-uri">
+                            <p class="adm-hint">URI de redirection autorisée à déclarer dans la console Google Cloud (identifiants OAuth « Application Web ») :</p>
+                            <div class="cfg-uri__row">
+                                <code class="adm-code cfg-uri__value">{{ integ.google?.redirectUri || "Définissez d'abord l'adresse du site" }}</code>
+                                <IconAction v-if="integ.google?.redirectUri" label="Copier l'adresse de redirection Google" icon="fa-solid fa-copy"
+                                    @click="copy(integ.google.redirectUri)"/>
+                            </div>
                         </div>
-                        <p class="hint">
-                            <template v-if="integ.google?.accountsAvailable">
-                                {{ safeNum(integ.google.linkedUsers) }} compte(s) lié(s)<template v-if="safeNum(integ.google.invalidUsers)">, dont {{ safeNum(integ.google.invalidUsers) }} à reconnecter</template>
+                    </template>
+
+                    <div class="cfg-fields">
+                        <AdminField v-for="field in group.fields" :key="field.key" :for="'cfg-' + field.key" :label="field.label" :hint="field.hint"
+                            :restart="!!entry(field.key).requiresRestart" :pending="!!entry(field.key).pendingRestart"
+                            :dirty="isDirty(field)" :error="fieldError(field)">
+                            <template #aside>
+                                <span v-if="entry(field.key).secret" class="cfg-secret">
+                                    <Icon :icon="entry(field.key).set ? 'fa-solid fa-lock' : 'fa-solid fa-lock-open'" aria-hidden="true"/>
+                                    {{ entry(field.key).set ? "Défini · " + safeNum(entry(field.key).length) + " caractères" : "Non défini" }}
+                                </span>
                             </template>
-                            <template v-else>Aucun compte lié</template>
-                        </p>
-                        <p v-if="!integ.google?.configured" class="hint">
-                            Il manque : {{ googleMissing.join(", ") }}.
-                        </p>
+                            <template #default="{ id, describedby, invalid }">
+                                <input v-if="entry(field.key).secret" :id="id" type="password" v-model="drafts[field.key]"
+                                    class="adm-mono" :maxlength="field.max || 300" autocomplete="new-password" spellcheck="false"
+                                    :aria-describedby="describedby" :aria-invalid="invalid ? 'true' : undefined"
+                                    :placeholder="entry(field.key).set ? 'Nouvelle valeur (vide = conserver)' : 'Valeur'"
+                                    @keyup.enter="save(field)"/>
+                                <input v-else :id="id" type="text" v-model="drafts[field.key]"
+                                    :class="{ 'adm-mono': field.mono }" :maxlength="field.max || 300" spellcheck="false" autocomplete="off"
+                                    :inputmode="field.kind === 'port' || field.kind === 'snowflake' ? 'numeric' : field.kind === 'url' ? 'url' : undefined"
+                                    :aria-describedby="describedby" :aria-invalid="invalid ? 'true' : undefined"
+                                    :placeholder="field.placeholder || ''" @keyup.enter="save(field)" @keyup.esc="resetDraft(field.key)"/>
+                                <Button size="sm" icon="fa-solid fa-floppy-disk" :loading="!!saving[field.key]"
+                                    :disabled="!isDirty(field) || !!fieldError(field)" :aria-label="'Enregistrer « ' + field.label + ' »'"
+                                    @click="save(field)">Enregistrer</Button>
+                                <IconAction v-if="!entry(field.key).secret && isDirty(field)" :label="'Annuler la modification de « ' + field.label + ' »'"
+                                    icon="fa-solid fa-xmark" @click="resetDraft(field.key)"/>
+                                <IconAction v-if="entry(field.key).secret && isDirty(field)" :label="'Vider le champ « ' + field.label + ' »'"
+                                    icon="fa-solid fa-xmark" @click="drafts[field.key] = ''"/>
+                                <IconAction v-if="entry(field.key).secret && entry(field.key).set && entry(field.key).optional && !isDirty(field)"
+                                    :label="'Effacer la valeur enregistrée de « ' + field.label + ' »'" icon="fa-solid fa-trash"
+                                    color="var(--text-error)" :disabled="!!saving[field.key]" @click="clearSecret(field)"/>
+                            </template>
+                        </AdminField>
                     </div>
 
-                    <div class="integration">
-                        <div class="integration-head">
-                            <span class="integration-name"><Icon icon="fa-brands fa-spotify"/> Spotify</span>
-                            <Tag :color="spotifyState.color" :icon="spotifyState.icon">{{ spotifyState.label }}</Tag>
-                        </div>
-                        <p v-if="integ.spotify?.lastTest" class="hint">
-                            Dernier test {{ formatRelative(integ.spotify.lastTest.at, nowDate) }} : {{ integ.spotify.lastTest.message }}
-                        </p>
-                        <p v-else class="hint">Liens publics uniquement (albums, playlists, titres), convertis vers YouTube.</p>
-                        <div class="actions">
-                            <Button icon="fa-solid fa-vial" :disabled="spotifyTesting || !integ.spotify?.configured" @click="testSpotify()">
-                                {{ spotifyTesting ? "Test…" : "Tester" }}
-                            </Button>
-                        </div>
-                    </div>
-
-                    <div class="integration">
-                        <div class="integration-head">
-                            <span class="integration-name"><Icon icon="fa-solid fa-cloud"/> Proxy WARP</span>
-                            <Tag :color="warpState.color" :icon="warpState.icon">{{ warpState.label }}</Tag>
-                        </div>
-                        <p class="hint">{{ integ.warp?.configured ? "Routes : " + (integ.warp.routes || []).map(r => r === 'warp' ? 'WARP' : 'directe').join(" puis ") : "Connexion directe uniquement" }}</p>
-                        <div class="actions">
-                            <Button class="secondary" icon="fa-solid fa-arrow-right" @click="adminStore.setSection('warp')">Section WARP</Button>
-                        </div>
-                    </div>
-
-                    <div class="integration">
-                        <div class="integration-head">
-                            <span class="integration-name"><Icon icon="fa-brands fa-youtube"/> Compte YouTube (lecture)</span>
-                            <Tag :color="cookiesState.color" :icon="cookiesState.icon">{{ cookiesState.label }}</Tag>
-                        </div>
-                        <p class="hint">
-                            <template v-if="integ.youtube?.cookies?.present">Cookies importés {{ formatRelative(integ.youtube.cookies.importedAt, nowDate) }}<template v-if="integ.youtube.cookies.invalidReason"> · {{ integ.youtube.cookies.invalidReason }}</template></template>
-                            <template v-else>Lecture anonyme (aucun cookie)</template>
-                        </p>
-                        <div class="actions">
-                            <Button class="secondary" icon="fa-solid fa-arrow-right" @click="adminStore.setSection('youtube')">Section YouTube</Button>
-                        </div>
-                    </div>
-
-                    <div class="integration">
-                        <div class="integration-head">
-                            <span class="integration-name"><Icon icon="fa-solid fa-photo-film"/> Base média</span>
-                            <Tag :color="!integ.media?.configured ? 'var(--text-secondary)' : integ.media.connected ? 'var(--text-success)' : 'var(--text-error)'"
-                                :icon="integ.media?.connected ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'">
-                                {{ !integ.media?.configured ? "Non configurée" : integ.media.connected ? "Salon accessible" : "Salon introuvable" }}
-                            </Tag>
-                        </div>
-                        <p class="hint">Salon Discord où sont stockés les fichiers envoyés par les utilisateurs.</p>
-                    </div>
-                </div>
-            </AdminCard>
-
-            <!-- Paramètres -->
-            <div class="cards">
-                <AdminCard v-for="group in groups" :key="group.id" :title="group.title" :icon="group.icon" :color="group.color">
-                    <p v-if="group.hint" class="hint">{{ group.hint }}</p>
-
-                    <div v-if="group.id === 'google'" class="uri-block">
-                        <p class="hint">URI de redirection autorisée à déclarer dans la console Google Cloud (identifiants OAuth « Application Web ») :</p>
-                        <div class="uri-row">
-                            <code class="uri">{{ integ.google?.redirectUri || "Définissez d'abord l'adresse du site" }}</code>
-                            <IconAction v-if="integ.google?.redirectUri" title="Copier" icon="fa-solid fa-copy" @click="copy(integ.google.redirectUri)"/>
-                        </div>
-                    </div>
-
-                    <div v-for="field in group.fields" :key="field.key" class="field">
-                        <div class="field-head">
-                            <label class="field-label" :for="'cfg-' + field.key">{{ field.label }}</label>
-                            <Tag v-if="entry(field.key).pendingRestart" color="var(--text-warning)" icon="fa-solid fa-power-off">Redémarrage requis</Tag>
-                            <Tag v-else-if="entry(field.key).requiresRestart" color="var(--text-secondary)" icon="fa-solid fa-power-off">Au redémarrage</Tag>
-                        </div>
-                        <p v-if="entry(field.key).secret" class="secret-state">
-                            <Icon :icon="entry(field.key).set ? 'fa-solid fa-lock' : 'fa-solid fa-lock-open'"/>
-                            {{ entry(field.key).set ? "Défini (" + safeNum(entry(field.key).length) + " caractères)" : "Non défini" }}
-                        </p>
-                        <div class="field-row">
-                            <input v-if="entry(field.key).secret" :id="'cfg-' + field.key" type="password" v-model="drafts[field.key]"
-                                class="input mono" :maxlength="field.max || 300" autocomplete="new-password" spellcheck="false"
-                                :placeholder="entry(field.key).set ? 'Nouvelle valeur (laisser vide pour conserver)' : 'Valeur'"
-                                @keyup.enter="save(field)"/>
-                            <input v-else :id="'cfg-' + field.key" type="text" v-model="drafts[field.key]"
-                                :class="['input', { mono: field.mono }]" :maxlength="field.max || 300" spellcheck="false" autocomplete="off"
-                                :inputmode="field.numeric ? 'numeric' : undefined" :placeholder="field.placeholder || ''"
-                                @keyup.enter="save(field)"/>
-                            <Button icon="fa-solid fa-floppy-disk" :disabled="!isDirty(field) || saving[field.key]" @click="save(field)">
-                                {{ saving[field.key] ? "…" : "Enregistrer" }}
-                            </Button>
-                            <IconAction v-if="!entry(field.key).secret && isDirty(field)" title="Annuler" icon="fa-solid fa-xmark" @click="resetDraft(field.key)"/>
-                            <IconAction v-if="entry(field.key).secret && entry(field.key).set && entry(field.key).optional" title="Effacer"
-                                icon="fa-solid fa-trash" color="var(--text-error)" @click="clearSecret(field)"/>
-                        </div>
-                        <p v-if="field.hint" class="hint">{{ field.hint }}</p>
-                    </div>
+                    <template v-if="group.id === 'spotify'" #footer>
+                        <span class="adm-footer-meta" aria-live="polite">
+                            <template v-if="integ.spotify?.lastTest">
+                                Dernier test {{ formatRelative(integ.spotify.lastTest.at, nowDate) }} : {{ integ.spotify.lastTest.message }}
+                            </template>
+                            <template v-else>Liens publics uniquement (albums, playlists, titres), convertis vers YouTube.</template>
+                        </span>
+                        <Button variant="secondary" size="sm" icon="fa-solid fa-vial" :loading="spotifyTesting"
+                            :disabled="!integ.spotify?.configured" @click="testSpotify()">
+                            {{ spotifyTesting ? "Test…" : "Tester la connexion" }}
+                        </Button>
+                    </template>
                 </AdminCard>
-            </div>
-            <p class="hint">
+            </AdminGrid>
+
+            <p class="adm-hint cfg-note">
+                <Icon icon="fa-solid fa-shield-halved" aria-hidden="true"/>
                 Les secrets ne sont jamais renvoyés au navigateur ni écrits dans les journaux : seule leur longueur est affichée.
                 Chaque modification est enregistrée dans config.json et journalisée (nom du paramètre uniquement).
             </p>
@@ -167,63 +124,67 @@ import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { adminRequest } from '@/utils/AdminRequest';
 import Button from '@/components/UI/Button.vue';
-import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
 import IconAction from '@/components/UI/IconAction.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
+import AdminGrid from './AdminGrid.vue';
 import AdminCard from './AdminCard.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminStat from './AdminStat.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminField from './AdminField.vue';
 import AdminConfirm from './AdminConfirm.vue';
 import { safeNum, formatRelative } from './adminFormat';
 
 const adminStore = useAdminStore();
 const confirmRef = ref(null);
 
+// kind : même validation que le serveur (Configuration.validateValue) — text | url | port | snowflake
 const groups = [
     {
-        id: 'discord', title: "Discord", icon: "fa-brands fa-discord", color: "var(--admin-color)",
+        id: 'discord', title: "Discord", icon: "fa-brands fa-discord", tone: 'admin',
         fields: [
-            { key: 'token', label: "Token du bot", max: 200, hint: "Portail développeur Discord > Bot > Reset Token. Un token invalide empêche le bot de démarrer." },
-            { key: 'client_secret', label: "Secret OAuth2 (connexion au site)", max: 200, hint: "Portail développeur Discord > OAuth2 > Client Secret. Pris en compte immédiatement." }
+            { key: 'token', kind: 'text', label: "Token du bot", max: 200, hint: "Portail développeur Discord > Bot > Reset Token. Un token invalide empêche le bot de démarrer." },
+            { key: 'client_secret', kind: 'text', label: "Secret OAuth2 (connexion au site)", max: 200, hint: "Portail développeur Discord > OAuth2 > Client Secret. Pris en compte immédiatement." }
         ]
     },
     {
-        id: 'website', title: "Site web", icon: "fa-solid fa-globe", color: "var(--main)",
+        id: 'website', title: "Site web", icon: "fa-solid fa-globe", tone: 'main',
         fields: [
-            { key: 'website', label: "Adresse publique du site", mono: true, max: 300, placeholder: "https://subsonics.example.org", hint: "Sert aux redirections Discord (/redirect) et Google (/oauth2callback)." },
-            { key: 'server_port', label: "Port du serveur", mono: true, numeric: true, max: 5, placeholder: "5000", hint: "Port d'écoute du backend (le healthcheck Docker utilise 4000)." }
+            { key: 'website', kind: 'url', label: "Adresse publique du site", mono: true, max: 300, placeholder: "https://subsonics.example.org", hint: "Sert aux redirections Discord (/redirect) et Google (/oauth2callback)." },
+            { key: 'server_port', kind: 'port', label: "Port du serveur", mono: true, max: 5, placeholder: "5000", hint: "Port d'écoute du backend (le healthcheck Docker utilise 4000)." }
         ]
     },
     {
-        id: 'google', title: "Google / YouTube Data API", icon: "fa-brands fa-google", color: "var(--text-error)",
+        id: 'google', title: "Google / YouTube Data API", icon: "fa-brands fa-google", tone: 'error',
         hint: "Permet aux utilisateurs de lier leur compte Google pour importer leurs playlists YouTube (et « J'aime »).",
         fields: [
-            { key: 'api.youtube.clientId', label: "ID client OAuth", mono: true, max: 300, placeholder: "….apps.googleusercontent.com" },
-            { key: 'api.youtube.clientSecret', label: "Secret client OAuth", max: 300 }
+            { key: 'api.youtube.clientId', kind: 'text', label: "ID client OAuth", mono: true, max: 300, placeholder: "….apps.googleusercontent.com" },
+            { key: 'api.youtube.clientSecret', kind: 'text', label: "Secret client OAuth", max: 300 }
         ]
     },
     {
         id: 'spotify', title: "Spotify", icon: "fa-brands fa-spotify", color: "var(--mod-color)",
         hint: "Application Spotify (developer.spotify.com) : identifiants « client credentials ».",
         fields: [
-            { key: 'api.spotify.clientId', label: "Client ID", mono: true, max: 200 },
-            { key: 'api.spotify.clientSecret', label: "Client secret", max: 200 }
+            { key: 'api.spotify.clientId', kind: 'text', label: "Client ID", mono: true, max: 200 },
+            { key: 'api.spotify.clientSecret', kind: 'text', label: "Client secret", max: 200 }
         ]
     },
     {
         id: 'media', title: "Base média", icon: "fa-solid fa-photo-film", color: "var(--owner-color)",
         hint: "Serveur et salon Discord où le bot dépose les fichiers envoyés par les utilisateurs.",
         fields: [
-            { key: 'media.guildId', label: "ID du serveur", mono: true, numeric: true, max: 25 },
-            { key: 'media.channelId', label: "ID du salon", mono: true, numeric: true, max: 25 }
+            { key: 'media.guildId', kind: 'snowflake', label: "ID du serveur", mono: true, max: 25 },
+            { key: 'media.channelId', kind: 'snowflake', label: "ID du salon", mono: true, max: 25 }
         ]
     },
     {
-        id: 'report', title: "Signalements", icon: "fa-solid fa-flag", color: "var(--text-warning)",
+        id: 'report', title: "Signalements", icon: "fa-solid fa-flag", tone: 'warning',
         hint: "Destination des signalements envoyés depuis le site.",
         fields: [
-            { key: 'report.channel', label: "ID du salon de signalement", mono: true, numeric: true, max: 25 },
-            { key: 'report.contact', label: "ID de l'utilisateur à contacter", mono: true, numeric: true, max: 25 }
+            { key: 'report.channel', kind: 'snowflake', label: "ID du salon de signalement", mono: true, max: 25 },
+            { key: 'report.contact', kind: 'snowflake', label: "ID de l'utilisateur à contacter", mono: true, max: 25 }
         ]
     }
 ];
@@ -269,12 +230,35 @@ function isDirty(field) {
     return draft.trim() !== serverText(field.key);
 }
 
+// Validation locale (le serveur revalide) : affichée seulement pour une valeur modifiée
+function fieldError(field) {
+    if (!isDirty(field)) return null;
+    const text = String(drafts[field.key] ?? "").trim();
+    if (text === "") {
+        return entry(field.key).optional === false ? "Ce paramètre ne peut pas être vide" : null;
+    }
+    switch (field.kind) {
+        case 'port': {
+            const n = Number(text);
+            return /^\d+$/.test(text) && n >= 1 && n <= 65535 ? null : "Port invalide : entier entre 1 et 65535";
+        }
+        case 'snowflake':
+            return /^\d{5,25}$/.test(text) ? null : "Identifiant Discord invalide : 5 à 25 chiffres";
+        case 'url':
+            if (!/^https?:\/\/\S+$/i.test(text)) return "Lien http(s):// attendu, sans espace";
+            if (/[?#]/.test(text)) return "L'adresse ne doit contenir ni paramètres (?) ni ancre (#)";
+            return null;
+        default:
+            return /\s/.test(text) ? "Les espaces sont interdits (copier-coller incomplet ?)" : null;
+    }
+}
+
 function resetDraft(key) {
     drafts[key] = serverText(key);
 }
 
 const pendingLabels = computed(() => Object.entries(data.value?.config || {})
-    .filter(([, value]) => value.pendingRestart)
+    .filter(([, value]) => value?.pendingRestart)
     .map(([key]) => labelOf[key] || key));
 
 const googleMissing = computed(() => {
@@ -285,31 +269,55 @@ const googleMissing = computed(() => {
     return missing;
 });
 
+const googleSub = computed(() => {
+    const google = integ.value.google;
+    if (!google?.accountsAvailable) return "Aucun compte lié";
+    const invalid = safeNum(google.invalidUsers);
+    return safeNum(google.linkedUsers) + " compte(s) lié(s)" + (invalid ? ", dont " + invalid + " à reconnecter" : "");
+});
+
 const spotifyState = computed(() => {
     const spotify = integ.value.spotify;
-    if (!spotify?.configured) return { label: "Non configuré", color: "var(--text-secondary)", icon: "fa-solid fa-circle-minus" };
-    if (spotify.lastTest) {
-        return spotify.lastTest.ok
-            ? { label: "Testé : OK", color: "var(--text-success)", icon: "fa-solid fa-circle-check" }
-            : { label: "Test échoué", color: "var(--text-error)", icon: "fa-solid fa-circle-xmark" };
-    }
-    return { label: "Configuré", color: "var(--admin-color)", icon: "fa-solid fa-circle-check" };
+    if (!spotify?.configured) return { label: "Non configuré", tone: "default" };
+    if (spotify.lastTest) return spotify.lastTest.ok ? { label: "Testé : OK", tone: "success" } : { label: "Test échoué", tone: "error" };
+    return { label: "Configuré", tone: "admin" };
+});
+
+const spotifySub = computed(() => {
+    const last = integ.value.spotify?.lastTest;
+    return last ? "Testé " + formatRelative(last.at, nowDate.value) : "Liens publics uniquement";
 });
 
 const warpState = computed(() => {
     const warp = integ.value.warp;
-    if (!warp?.configured) return { label: "Non configuré", color: "var(--text-secondary)", icon: "fa-solid fa-circle-minus" };
-    return warp.healthy
-        ? { label: "Opérationnel", color: "var(--text-success)", icon: "fa-solid fa-circle-check" }
-        : { label: "Injoignable", color: "var(--text-error)", icon: "fa-solid fa-circle-xmark" };
+    if (!warp?.configured) return { label: "Non configuré", tone: "default" };
+    return warp.healthy ? { label: "Opérationnel", tone: "success" } : { label: "Injoignable", tone: "error" };
+});
+
+const warpSub = computed(() => {
+    const warp = integ.value.warp;
+    if (!warp?.configured) return "Connexion directe uniquement";
+    return "Routes : " + (warp.routes || []).map(r => (r === 'warp' ? 'WARP' : 'directe')).join(" puis ");
 });
 
 const cookiesState = computed(() => {
     const cookies = integ.value.youtube?.cookies;
-    if (!cookies?.present) return { label: "Aucun compte", color: "var(--text-secondary)", icon: "fa-solid fa-user-slash" };
-    if (!cookies.loggedIn) return { label: "Non connecté", color: "var(--text-warning)", icon: "fa-solid fa-triangle-exclamation" };
-    if (!cookies.valid) return { label: "Invalidé", color: "var(--text-error)", icon: "fa-solid fa-circle-xmark" };
-    return { label: "Connecté", color: "var(--text-success)", icon: "fa-solid fa-circle-check" };
+    if (!cookies?.present) return { label: "Aucun compte", tone: "default" };
+    if (!cookies.loggedIn) return { label: "Non connecté", tone: "warning" };
+    if (!cookies.valid) return { label: "Invalidé", tone: "error" };
+    return { label: "Connecté", tone: "success" };
+});
+
+const cookiesSub = computed(() => {
+    const cookies = integ.value.youtube?.cookies;
+    if (!cookies?.present) return "Lecture anonyme (aucun cookie)";
+    return "Importés " + formatRelative(cookies.importedAt, nowDate.value) + (cookies.invalidReason ? " · " + cookies.invalidReason : "");
+});
+
+const mediaState = computed(() => {
+    const media = integ.value.media;
+    if (!media?.configured) return { label: "Non configurée", tone: "default" };
+    return media.connected ? { label: "Salon accessible", tone: "success" } : { label: "Salon introuvable", tone: "error" };
 });
 
 async function send(field, value) {
@@ -336,7 +344,7 @@ async function send(field, value) {
 }
 
 async function save(field) {
-    if (!isDirty(field) || saving[field.key]) return;
+    if (!isDirty(field) || saving[field.key] || fieldError(field)) return;
     const value = drafts[field.key].trim();
     if (field.key === 'token') {
         const ok = await confirmRef.value.ask({
@@ -400,188 +408,51 @@ onMounted(() => {
 onUnmounted(() => clearInterval(timer));
 </script>
 <style scoped>
-p {
-    margin: 0;
-}
-
-.banner {
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.banner-action {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 10px;
-    align-items: start;
-}
-
-.wide {
-    grid-column: 1 / -1;
-}
-
-.hint {
-    font-size: 0.8em;
-    color: var(--text-secondary);
-}
-
-.mono {
-    font-family: monospace;
-}
-
-.actions {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.secondary {
-    background-color: var(--secondary);
-    color: var(--text);
-}
-
-.secondary:hover {
-    background-color: var(--quaternary);
-}
-
-/* Intégrations */
-.integrations {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 10px;
-}
-
-.integration {
+.cfg-fields {
     display: flex;
     flex-direction: column;
+    gap: 16px;
+}
+
+/* Champ + bouton : passent à la ligne sur une carte étroite */
+.cfg-fields :deep(.adm-field__control) {
+    flex-wrap: wrap;
+}
+
+.cfg-fields :deep(.adm-field__control > input) {
+    flex: 1 1 180px;
+}
+
+.cfg-secret {
+    display: inline-flex;
+    align-items: center;
     gap: 5px;
-    background-color: var(--secondary);
-    border-radius: 10px;
-    padding: 10px;
+    white-space: nowrap;
+}
+
+.cfg-uri {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.cfg-uri__row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
     min-width: 0;
 }
 
-.integration-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.integration-name {
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.uri-block {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-}
-
-.uri-row {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    min-width: 0;
-}
-
-.uri {
+.cfg-uri__value {
     flex: 1;
     min-width: 0;
-    font-size: 0.75em;
-    background-color: var(--secondary);
-    border-radius: 5px;
-    padding: 7px;
-    word-break: break-all;
+    padding: 7px 9px;
     user-select: all;
 }
 
-.integration .uri {
-    background-color: var(--tertiary);
-}
-
-/* Champs */
-.field {
+.cfg-note {
     display: flex;
-    flex-direction: column;
-    gap: 5px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--quaternary);
-}
-
-.field:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-}
-
-.field-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.field-label {
-    font-weight: 600;
-    font-size: 0.9em;
-}
-
-.secret-state {
-    font-size: 0.8em;
-    color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.field-row {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.input {
-    flex: 1;
-    min-width: 0;
-    background-color: var(--secondary);
-    border: none;
-    border-radius: 5px;
-    padding: 7px;
-    color: var(--text);
-    font-size: 0.9em;
-    outline: none;
-}
-
-.input:not(.mono) {
-    font-family: 'Inter', sans-serif;
-}
-
-.input:focus {
-    box-shadow: 0 0 5px var(--main);
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .cards {
-        grid-template-columns: 1fr;
-    }
-
-    .field-row {
-        flex-wrap: wrap;
-    }
+    align-items: baseline;
+    gap: 6px;
 }
 </style>
diff --git a/src/components/Admin/AdminConfirm.vue b/src/components/Admin/AdminConfirm.vue
index 499a042..ec838cf 100644
--- a/src/components/Admin/AdminConfirm.vue
+++ b/src/components/Admin/AdminConfirm.vue
@@ -1,23 +1,23 @@
 <template>
-    <Modal ref="modal" :title="options.title" :icon="options.icon">
-        <p ref="messageRef" class="confirm-message">{{ options.message }}</p>
+    <Modal ref="modal" size="sm" :title="options.title" :icon="options.icon" @close="onModalClose">
+        <p class="confirm-message">{{ options.message }}</p>
         <div v-if="options.requireText" class="confirm-field">
-            <label>Pour confirmer, tape <strong class="mono">{{ options.requireText }}</strong> ci-dessous :</label>
-            <input type="text" v-model="typed" :placeholder="options.requireText" @keyup.enter="confirm()"/>
+            <label :for="`${uid}-text`">Pour confirmer, tape <strong class="mono">{{ options.requireText }}</strong> ci-dessous :</label>
+            <input :id="`${uid}-text`" type="text" v-model="typed" :placeholder="options.requireText" autocomplete="off" data-autofocus @keyup.enter="confirm()"/>
         </div>
         <div v-if="options.askReason" class="confirm-field">
-            <label>{{ options.reasonLabel }}</label>
-            <textarea v-model="reason" :maxlength="options.reasonMax" :placeholder="options.reasonPlaceholder"></textarea>
-            <span class="hint">{{ reason.trim().length }} / {{ options.reasonMax }} caractères (minimum {{ options.reasonMin }})</span>
+            <label :for="`${uid}-reason`">{{ options.reasonLabel }}</label>
+            <textarea :id="`${uid}-reason`" v-model="reason" :maxlength="options.reasonMax" :placeholder="options.reasonPlaceholder" :aria-describedby="`${uid}-reason-hint`"></textarea>
+            <span :id="`${uid}-reason-hint`" class="hint">{{ reason.trim().length }} / {{ options.reasonMax }} caractères (minimum {{ options.reasonMin }})</span>
         </div>
         <label v-if="options.checkbox" class="confirm-check">
             <input type="checkbox" v-model="checked"/>
             <span>{{ options.checkbox }}</span>
         </label>
-        <div class="confirm-actions">
-            <Button class="cancel" icon="fa-solid fa-xmark" @click="cancel()">Annuler</Button>
+        <template #footer>
+            <Button variant="secondary" icon="fa-solid fa-xmark" @click="cancel()">Annuler</Button>
             <Button :disabled="!canConfirm" :icon="options.confirmIcon" @click="confirm()">{{ options.confirmLabel }}</Button>
-        </div>
+        </template>
     </Modal>
 </template>
 <script setup>
@@ -26,10 +26,9 @@
  * Usage : const result = await confirmRef.value.ask({ title, message, requireText?, askReason?, checkbox? })
  * Renvoie null si annulé, sinon { reason, checked }.
  */
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onUnmounted, useId } from 'vue';
 import Modal from '@/components/UI/Modal.vue';
 import Button from '@/components/UI/Button.vue';
-import Events from '@/utils/Events';
 
 const defaults = {
     title: "Confirmation",
@@ -47,6 +46,7 @@ const defaults = {
     checkboxDefault: false
 };
 
+const uid = `confirm-${useId()}`;
 const modal = ref(null);
 const options = ref({ ...defaults });
 const typed = ref("");
@@ -91,31 +91,19 @@ function cancel() {
     modal.value?.close();
 }
 
-const messageRef = ref(null);
-
-// Fermeture par la croix ou un clic extérieur : Modal n'émet que l'événement global "modal:close",
-// partagé par toutes les modales. On n'annule que si NOTRE modale est réellement masquée
-// (Modal masque son overlay avant d'émettre l'événement).
+// Fermeture par la croix, Échap ou un clic extérieur : événement "close" de NOTRE modale uniquement
+// (confirm() et cancel() ont déjà réglé la promesse, pending vaut alors null).
 function onModalClose() {
-    if (!pending) return;
-    const element = messageRef.value;
-    if (element && element.getClientRects().length > 0) return;
     settle(null);
 }
 
-onMounted(() => Events.on("modal:close", onModalClose));
-onUnmounted(() => {
-    Events.off("modal:close", onModalClose);
-    settle(null);
-});
+onUnmounted(() => settle(null));
 
 defineExpose({ ask });
 </script>
 <style scoped>
 .confirm-message {
     margin: 0;
-    font-size: 1em !important;
-    font-weight: normal !important;
     color: var(--text-secondary);
     white-space: pre-line;
 }
@@ -137,8 +125,7 @@ defineExpose({ ask });
 }
 
 .mono {
-    font-family: monospace;
-    font-size: 1em !important;
+    font-family: var(--font-mono);
     word-break: break-all;
 }
 
@@ -149,20 +136,4 @@ defineExpose({ ask });
     font-size: 0.9em;
     cursor: pointer;
 }
-
-.confirm-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.cancel {
-    background-color: var(--tertiary);
-    color: var(--text);
-}
-
-.cancel:hover {
-    background-color: var(--quaternary);
-}
 </style>
diff --git a/src/components/Admin/AdminDashboard.vue b/src/components/Admin/AdminDashboard.vue
index 310f408..5130a2c 100644
--- a/src/components/Admin/AdminDashboard.vue
+++ b/src/components/Admin/AdminDashboard.vue
@@ -1,45 +1,62 @@
 <template>
     <DefaultSplash v-if="!isAdmin">
-        <h1 class="denied-title"><Icon icon="fa-solid fa-lock"/> Accès refusé</h1>
+        <h1 class="denied-title"><Icon icon="fa-solid fa-lock" aria-hidden="true"/> Accès refusé</h1>
         <Error>Cette partition est réservée aux administrateurs de Subsonics.</Error>
-        <Button icon="fa-solid fa-arrow-left" @click="router.push('/servers')">Revenir au concert</Button>
+        <Button icon="fa-solid fa-arrow-left" @click="goBack()">Revenir au concert</Button>
     </DefaultSplash>
     <div v-else class="admin-container">
-        <div class="left-side">
-            <Box padding="closed" class="nav-box">
-                <SubsonicsLogo class="logo"/>
-                <p class="admin-label"><Icon icon="fa-solid fa-star"/> Administration</p>
-                <nav class="admin-nav">
-                    <button v-for="item in sections" :key="item.id"
-                        :class="['nav-item', { active: adminStore.section === item.id }]"
-                        @click="adminStore.setSection(item.id)">
-                        <Icon class="nav-icon" :icon="item.icon"/>
-                        <span>{{ item.label }}</span>
-                        <span v-if="badges[item.id]" :class="['nav-badge', badges[item.id].type]">{{ badges[item.id].text }}</span>
-                    </button>
+        <a class="skip-link" href="#admin-main" @click.prevent="focusMain()">Aller au contenu</a>
+        <div class="admin-side">
+            <Box padding="closed" class="side-box">
+                <div class="brand">
+                    <SubsonicsLogo class="logo"/>
+                    <p class="admin-label"><Icon icon="fa-solid fa-star" aria-hidden="true"/> Administration</p>
+                    <IconAction class="back-mobile" icon="fa-solid fa-arrow-left" label="Retour aux serveurs" @click="goBack()"/>
+                </div>
+                <nav ref="navRef" :class="['admin-nav', { 'fade-start': fadeStart, 'fade-end': fadeEnd }]"
+                    aria-label="Sections de l'administration" @scroll.passive="updateFades()">
+                    <div v-for="group in groups" :key="group.id" class="nav-group">
+                        <p :id="'admin-nav-' + group.id" class="nav-group-label">{{ group.label }}</p>
+                        <ul class="nav-list" :aria-labelledby="'admin-nav-' + group.id">
+                            <li v-for="item in group.items" :key="item.id">
+                                <button type="button" :class="['nav-item', { active: current.id === item.id }]"
+                                    :aria-current="current.id === item.id ? 'page' : undefined"
+                                    @click="adminStore.setSection(item.id)">
+                                    <Icon class="nav-icon" :icon="item.icon" aria-hidden="true"/>
+                                    <span class="nav-text">{{ item.label }}</span>
+                                    <span v-if="badges[item.id]" :class="['nav-badge', badges[item.id].type]" :title="badges[item.id].sr">
+                                        <span aria-hidden="true">{{ badges[item.id].text }}</span>
+                                        <span class="sr-only">({{ badges[item.id].sr }})</span>
+                                    </span>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
                 </nav>
-                <Button class="back" icon="fa-solid fa-arrow-left" @click="router.push('/servers')">Retour aux serveurs</Button>
+                <Button class="back" variant="secondary" block icon="fa-solid fa-arrow-left" @click="goBack()">Retour aux serveurs</Button>
             </Box>
             <Account class="account"/>
         </div>
-        <Box class="main" padding="closed">
+        <main id="admin-main" ref="mainRef" class="admin-main" tabindex="-1" :aria-labelledby="ADMIN_SECTION_TITLE_ID">
             <component :is="current.component" :key="current.id"/>
-        </Box>
+        </main>
         <AdminToasts/>
     </div>
 </template>
 <script setup>
 /**
- * Tableau de bord d'administration : navigation par sections + zone principale.
+ * Tableau de bord d'administration : navigation groupée par thèmes + zone principale.
  * Les poussées temps réel ("/ADMIN/*\/UPDATE") sont enregistrées au montage et retirées au démontage,
  * car routes.js fait socket.removeAllListeners() à chaque navigation.
+ * Sur mobile : en-tête compact, navigation horizontale collante (l'élément actif est ramené au centre).
  */
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/userStore';
 import { useAdminStore } from '@/stores/adminStore';
 import Box from '@/components/UI/Box.vue';
 import Button from '@/components/UI/Button.vue';
+import IconAction from '@/components/UI/IconAction.vue';
 import Error from '@/components/UI/Error.vue';
 import DefaultSplash from '@/components/UI/DefaultSplash.vue';
 import SubsonicsLogo from '@/components/UI/SubsonicsLogo.vue';
@@ -56,6 +73,8 @@ import AdminMetrics from './AdminMetrics.vue';
 import AdminMaintenance from './AdminMaintenance.vue';
 import AdminPlaylists from './AdminPlaylists.vue';
 import AdminConfig from './AdminConfig.vue';
+import { ADMIN_NAV_KEY, ADMIN_SECTION_TITLE_ID } from './adminUi';
+import './admin.scss';
 
 const router = useRouter();
 const userStore = useUserStore();
@@ -64,29 +83,58 @@ const adminStore = useAdminStore();
 // Source de vérité : les labels (userInfo est remplacé à chaque /USER/READY)
 const isAdmin = computed(() => !!userStore.userInfo?.labels?.includes('ADMIN'));
 
-const sections = [
-    { id: 'overview', label: "Vue d'ensemble", icon: "fa-solid fa-gauge-high", component: AdminOverview },
-    { id: 'players', label: "Players", icon: "fa-solid fa-music", component: AdminPlayers },
-    { id: 'servers', label: "Serveurs", icon: "fa-solid fa-server", component: AdminServers },
-    { id: 'users', label: "Comptes", icon: "fa-solid fa-users", component: AdminUsers },
-    { id: 'playlists', label: "Playlists", icon: "fa-solid fa-list", component: AdminPlaylists },
-    { id: 'logs', label: "Logs", icon: "fa-solid fa-scroll", component: AdminLogs },
-    { id: 'warp', label: "WARP", icon: "fa-solid fa-cloud", component: AdminWarp },
-    { id: 'youtube', label: "YouTube", icon: "fa-brands fa-youtube", component: AdminYoutube },
-    { id: 'metrics', label: "Métriques", icon: "fa-solid fa-chart-simple", component: AdminMetrics },
-    { id: 'config', label: "Configuration", icon: "fa-solid fa-sliders", component: AdminConfig },
-    { id: 'maintenance', label: "Maintenance", icon: "fa-solid fa-screwdriver-wrench", component: AdminMaintenance }
+const GROUPS = [
+    { id: 'supervision', label: "Supervision" },
+    { id: 'system', label: "Système" },
+    { id: 'settings', label: "Réglages" }
 ];
 
+const sections = [
+    { id: 'overview', group: 'supervision', label: "Vue d'ensemble", icon: "fa-solid fa-gauge-high", component: AdminOverview },
+    { id: 'players', group: 'supervision', label: "Players", icon: "fa-solid fa-music", component: AdminPlayers },
+    { id: 'servers', group: 'supervision', label: "Serveurs", icon: "fa-solid fa-server", component: AdminServers },
+    { id: 'users', group: 'supervision', label: "Comptes", icon: "fa-solid fa-users", component: AdminUsers },
+    { id: 'playlists', group: 'supervision', label: "Playlists", icon: "fa-solid fa-list", component: AdminPlaylists },
+    { id: 'logs', group: 'system', label: "Logs", icon: "fa-solid fa-scroll", component: AdminLogs },
+    { id: 'warp', group: 'system', label: "WARP", icon: "fa-solid fa-cloud", component: AdminWarp },
+    { id: 'youtube', group: 'system', label: "YouTube", icon: "fa-brands fa-youtube", component: AdminYoutube },
+    { id: 'metrics', group: 'system', label: "Métriques", icon: "fa-solid fa-chart-simple", component: AdminMetrics },
+    { id: 'config', group: 'settings', label: "Configuration", icon: "fa-solid fa-sliders", component: AdminConfig },
+    { id: 'maintenance', group: 'settings', label: "Maintenance", icon: "fa-solid fa-screwdriver-wrench", component: AdminMaintenance }
+];
+
+const groups = GROUPS.map(group => ({ ...group, items: sections.filter(s => s.group === group.id) }));
+
 const current = computed(() => sections.find(s => s.id === adminStore.section) || sections[0]);
 
-// Petites pastilles d'état dans la navigation
+// Les sections (AdminSection, AdminStat `to`) y lisent l'icône et les libellés de la navigation
+provide(ADMIN_NAV_KEY, { sections, current });
+
+// Petites pastilles d'état dans la navigation (texte court visible + phrase pour les lecteurs d'écran)
 const badges = computed(() => {
     const result = {};
     const playing = adminStore.players.filter(p => p.status === 'playing').length;
-    if (adminStore.players.length) result.players = { text: playing + "/" + adminStore.players.length, type: playing ? 'good' : 'neutral' };
+    const troubled = adminStore.players.filter(p => p.status === 'stalled' || (p.lastError && !p.lastErrorStale)).length;
+    if (troubled) {
+        result.players = { text: "!", type: 'bad', sr: troubled + " player(s) en difficulté" };
+    } else if (adminStore.players.length) {
+        result.players = {
+            text: playing + "/" + adminStore.players.length,
+            type: playing ? 'good' : 'neutral',
+            sr: playing + " en lecture sur " + adminStore.players.length + " connecté(s)"
+        };
+    }
+    // Serveurs où il manque des permissions au bot (seulement si la liste a été chargée)
+    if (adminStore.guildsLoaded) {
+        const missing = adminStore.guilds.filter(g => g.missingPermissions?.length).length;
+        if (missing) result.servers = { text: missing, type: 'warn', sr: missing + " serveur(s) avec des permissions manquantes" };
+    }
     const warp = adminStore.warp || adminStore.overview?.warp;
-    if (warp?.configured) result.warp = warp.healthy ? { text: "OK", type: 'good' } : { text: "KO", type: 'bad' };
+    if (warp?.configured) {
+        result.warp = warp.healthy
+            ? { text: "OK", type: 'good', sr: "WARP opérationnel" }
+            : { text: "KO", type: 'bad', sr: "WARP injoignable" };
+    }
     // YouTube : statut complet si la section a été chargée, sinon le résumé de la vue d'ensemble
     const yt = adminStore.youtube;
     const ytCookies = yt?.cookies || adminStore.overview?.ytdlp?.cookies;
@@ -94,90 +142,249 @@ const badges = computed(() => {
     const recentCount = yt ? yt.diagnostics?.recentCount : adminStore.overview?.ytdlp?.recentCount;
     // La majorité des dernières lectures échoue (au moins 4 tentatives) : problème, même sans compte
     const failing = Number(recentCount) >= 4 && Number(failureRate) >= 0.5;
-    if (failing || (ytCookies?.present && !ytCookies.valid)) result.youtube = { text: "!", type: 'bad' };
-    else if (ytCookies?.valid) result.youtube = { text: "OK", type: 'good' };
-    if (adminStore.overview?.logs?.interrupted) result.logs = { text: "!", type: 'bad' };
+    if (failing) result.youtube = { text: "!", type: 'bad', sr: "la plupart des lectures récentes échouent" };
+    else if (ytCookies?.present && !ytCookies.valid) result.youtube = { text: "!", type: 'bad', sr: "compte YouTube à reconnecter" };
+    else if (ytCookies?.valid) result.youtube = { text: "OK", type: 'good', sr: "compte YouTube valide" };
+    if (adminStore.overview?.logs?.interrupted) result.logs = { text: "!", type: 'bad', sr: "journal interrompu" };
     const online = adminStore.presence?.counts?.online ?? adminStore.overview?.web?.usersOnline;
-    if (online) result.users = { text: online, type: 'neutral' };
+    if (online) result.users = { text: online, type: 'neutral', sr: online + " en ligne" };
     // Paramètres modifiés en attente d'un redémarrage (seulement si la section a été chargée)
-    if (adminStore.config?.restartRequired) result.config = { text: "!", type: 'warn' };
+    if (adminStore.config?.restartRequired) result.config = { text: "!", type: 'warn', sr: "redémarrage requis" };
     return result;
 });
 
+// ----- Navigation, défilement et focus -----
+const navRef = ref(null);
+const mainRef = ref(null);
+const fadeStart = ref(false);
+const fadeEnd = ref(false);
+let resizeObserver = null;
+
+function prefersReducedMotion() {
+    try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) { return false; }
+}
+
+// Fondu sur les bords de la navigation horizontale (mobile) quand il reste des éléments à faire défiler
+function updateFades() {
+    const nav = navRef.value;
+    if (!nav) return;
+    const horizontal = nav.scrollWidth > nav.clientWidth + 1;
+    fadeStart.value = horizontal && nav.scrollLeft > 4;
+    fadeEnd.value = horizontal && nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 4;
+}
+
+// Ramène l'élément actif dans la zone visible de la navigation (centré à l'horizontale sur mobile)
+function revealActiveItem(smooth = true) {
+    const nav = navRef.value;
+    const item = nav?.querySelector('[aria-current="page"]');
+    if (!nav || !item) return;
+    const behavior = smooth && !prefersReducedMotion() ? 'smooth' : 'auto';
+    if (nav.scrollWidth > nav.clientWidth + 1) {
+        const left = item.offsetLeft - (nav.clientWidth - item.offsetWidth) / 2;
+        nav.scrollTo({ left: Math.max(0, left), behavior });
+    } else if (nav.scrollHeight > nav.clientHeight + 1) {
+        const top = item.offsetTop;
+        const bottom = top + item.offsetHeight;
+        if (top < nav.scrollTop) nav.scrollTo({ top: top - 8, behavior });
+        else if (bottom > nav.scrollTop + nav.clientHeight) nav.scrollTo({ top: bottom - nav.clientHeight + 8, behavior });
+    }
+}
+
+function focusMain() {
+    mainRef.value?.focus();
+}
+
+function goBack() {
+    router.push('/servers');
+}
+
+watch(() => current.value.id, async () => {
+    document.title = "Administration · " + current.value.label + " - Subsonics";
+    // Le focus était dans l'ancienne section (tuile « to », lien interne…) : il irait sur <body>, on le pose sur le titre
+    const active = document.activeElement;
+    const focusWasInMain = !!(active && mainRef.value?.contains(active));
+    await nextTick();
+    const main = mainRef.value;
+    if (main) {
+        // Bureau : la zone principale défile seule ; mobile : la page défile, on remonte au début de la section
+        main.scrollTop = 0;
+        if (main.getBoundingClientRect().top < 0) main.scrollIntoView({ block: 'start', behavior: 'auto' });
+    }
+    if (focusWasInMain || document.activeElement === document.body) {
+        document.getElementById(ADMIN_SECTION_TITLE_ID)?.focus({ preventScroll: true });
+    }
+    revealActiveItem();
+    updateFades();
+});
+
+// ----- Cycle de vie -----
 function start() {
     adminStore.attach();
     adminStore.fetchOverview();
     adminStore.fetchPlayers();
 }
 
+function observeNav() {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!navRef.value || typeof ResizeObserver === 'undefined') return;
+    resizeObserver = new ResizeObserver(() => updateFades());
+    resizeObserver.observe(navRef.value);
+}
+
 onMounted(() => {
-    document.title = "Administration - Subsonics";
+    document.title = isAdmin.value ? "Administration · " + current.value.label + " - Subsonics" : "Administration - Subsonics";
     if (isAdmin.value) start();
+    nextTick(() => {
+        observeNav();
+        revealActiveItem(false);
+        updateFades();
+    });
 });
 
 onUnmounted(() => {
     adminStore.detach();
+    resizeObserver?.disconnect();
+    resizeObserver = null;
 });
 
 // Droit retiré ou accordé en direct (/USER/READY recharge userInfo)
 watch(isAdmin, (value) => {
-    if (value) start();
-    else adminStore.detach();
+    if (value) {
+        start();
+        nextTick(() => {
+            observeNav();
+            revealActiveItem(false);
+            updateFades();
+        });
+    } else {
+        adminStore.detach();
+    }
 });
 </script>
 <style scoped>
 .admin-container {
-    padding: 15px;
-    width: 100vw;
-    height: 100vh;
-    box-sizing: border-box;
+    position: relative;
     display: grid;
-    grid-template-columns: minmax(240px, 0.7fr) 3fr;
-    gap: 15px;
+    grid-template-columns: clamp(232px, 19vw, 280px) minmax(0, 1fr);
+    gap: 16px;
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    padding: 16px;
+    box-sizing: border-box;
 }
 
-.left-side {
+/* Lien d'évitement : invisible jusqu'au premier Tab */
+.skip-link {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 50;
+    padding: 8px 14px;
+    border-radius: var(--radius-sm);
+    background-color: var(--main);
+    color: var(--main-contrast);
+    font-weight: 600;
+    text-decoration: none;
+    transform: translateY(-200%);
+    transition: transform var(--dur-fast) ease;
+}
+
+.skip-link:focus {
+    transform: translateY(0);
+    color: var(--main-contrast);
+}
+
+.skip-link:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+/* ----- Colonne de gauche ----- */
+.admin-side {
     display: flex;
     flex-direction: column;
-    gap: 15px;
-    height: 100%;
+    gap: 12px;
     min-height: 0;
 }
 
-.nav-box {
+.side-box {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 14px;
     flex: 1;
     min-height: 0;
-    overflow-y: auto;
+    padding: 14px !important;
+}
+
+.brand {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--border);
 }
 
 .logo :deep(h1) {
+    margin: 0;
     font-size: 20px;
 }
 
 .logo :deep(.img) {
-    width: 70px;
-    height: 70px;
+    width: 56px;
+    height: 56px;
 }
 
 .admin-label {
-    margin: 0;
-    text-align: center;
-    color: var(--admin-color);
-    font-weight: 600;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    gap: 5px;
+    gap: 6px;
+    margin: 0;
+    padding: 3px 10px;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--admin-color) 14%, transparent);
+    color: var(--admin-color);
+    font-size: 0.75em;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.back-mobile {
+    display: none;
 }
 
 .admin-nav {
+    position: relative;
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 16px;
     flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    /* Marge intérieure : l'anneau de focus des boutons n'est pas rogné par le défilement */
+    padding: 4px;
+    margin: -4px;
+}
+
+.nav-group-label {
+    margin: 0 0 6px 10px;
+    font-size: 0.7em;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+}
+
+.nav-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
 .nav-item {
@@ -185,61 +392,103 @@ watch(isAdmin, (value) => {
     align-items: center;
     gap: 10px;
     width: 100%;
-    padding: 10px;
+    min-height: 38px;
+    padding: 0 10px;
     border: none;
-    border-radius: 10px;
+    border-radius: 8px;
     background-color: transparent;
-    color: var(--text);
-    font-size: 0.95em;
+    color: var(--text-secondary);
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
     text-align: left;
     cursor: pointer;
-    transition: all 0.2s ease;
+    outline: 2px solid transparent;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
 }
 
 .nav-item:hover {
-    background-color: var(--tertiary);
+    background-color: color-mix(in srgb, var(--text) 7%, transparent);
+    color: var(--text);
+}
+
+.nav-item:focus-visible {
+    box-shadow: var(--focus-ring);
 }
 
 .nav-item.active {
     background-color: var(--main);
-    color: #FFFFFF;
+    color: var(--main-contrast);
+    box-shadow: var(--shadow-sm);
 }
 
 .nav-icon {
     width: 18px;
+    flex-shrink: 0;
+}
+
+.nav-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .nav-badge {
-    margin-left: auto;
-    font-size: 0.7em;
-    padding: 2px 7px;
-    border-radius: 20px;
-    background-color: var(--quaternary);
-    color: #FFFFFF;
-    font-family: monospace;
+    --badge-color: var(--text-secondary);
+
+    flex-shrink: 0;
+    min-width: 20px;
+    padding: 1px 7px;
+    box-sizing: border-box;
+    border-radius: var(--radius-pill);
+    border: 1px solid color-mix(in srgb, var(--badge-color) 50%, transparent);
+    background-color: color-mix(in srgb, var(--badge-color) 16%, transparent);
+    color: var(--text);
+    font-size: 0.7rem;
+    font-weight: 600;
+    line-height: 1.5;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
 }
 
-.nav-badge.good {
-    background-color: color-mix(in srgb, var(--mod-color) 70%, black);
+.nav-badge.good { --badge-color: var(--text-success); }
+.nav-badge.warn { --badge-color: var(--text-warning); }
+.nav-badge.bad { --badge-color: var(--text-error); }
+
+.nav-item.active .nav-badge {
+    border-color: rgba(255, 255, 255, 0.45);
+    background-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
 }
 
-.nav-badge.warn {
-    background-color: var(--text-warning);
+/* Problème signalé sur un élément actif : pastille pleine pour rester visible sur le rose */
+.nav-item.active .nav-badge.bad,
+.nav-item.active .nav-badge.warn {
+    background-color: #fff;
+    color: var(--main);
 }
 
-.nav-badge.bad {
-    background-color: var(--text-error);
-}
-
-.back {
-    width: 100%;
-}
-
-.main {
+/* ----- Zone principale ----- */
+.admin-main {
     min-width: 0;
     min-height: 0;
     overflow-y: auto;
-    padding: 15px !important;
+    padding: 22px 24px;
+    box-sizing: border-box;
+    border-radius: var(--radius);
+    background-color: var(--secondary);
+    box-shadow: var(--shadow);
+}
+
+.admin-main:focus {
+    outline: none;
+}
+
+.admin-main:focus-visible {
+    box-shadow: var(--shadow), inset 0 0 0 2px var(--main);
 }
 
 .denied-title {
@@ -248,42 +497,160 @@ watch(isAdmin, (value) => {
     gap: 10px;
 }
 
+/* Fenêtre moyenne : un peu moins d'air autour du contenu */
+@media screen and (max-width: 1100px) {
+    .admin-container {
+        gap: 12px;
+        padding: 12px;
+    }
+
+    .admin-main {
+        padding: 18px;
+    }
+}
+
 @media screen and (max-width: 768px), screen and (max-height: 607px) {
     .admin-container {
         display: flex;
         flex-direction: column;
+        gap: 0;
         height: auto;
         min-height: 100vh;
+        min-height: 100dvh;
+        padding: 0 0 16px;
     }
 
-    .left-side {
-        height: auto;
+    /* Les blocs de la colonne gauche deviennent des éléments de la page : en-tête, navigation collante, contenu */
+    .admin-side,
+    .side-box {
+        display: contents;
     }
 
-    .nav-box {
-        overflow: visible;
+    .brand {
+        order: 1;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 10px;
+        padding: 10px 12px;
+        border-bottom: none;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    .logo :deep(.img) {
+        width: 34px;
+        height: 34px;
+    }
+
+    .logo :deep(h1) {
+        font-size: 17px;
+    }
+
+    .back-mobile {
+        display: inline-flex;
+        margin-left: auto;
     }
 
     .admin-nav {
+        order: 2;
+        position: sticky;
+        top: 0;
+        z-index: 20;
         flex-direction: row;
+        align-items: center;
+        gap: 0;
+        flex: none;
+        margin: 0;
+        padding: 8px 12px;
         overflow-x: auto;
-        padding-bottom: 5px;
+        overflow-y: hidden;
+        background-color: color-mix(in srgb, var(--primary) 90%, transparent);
+        -webkit-backdrop-filter: blur(8px);
+        backdrop-filter: blur(8px);
+        border-bottom: 1px solid var(--border);
+        scrollbar-width: none;
+    }
+
+    .admin-nav::-webkit-scrollbar {
+        display: none;
+    }
+
+    .admin-nav.fade-end {
+        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
+        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
+    }
+
+    .admin-nav.fade-start {
+        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
+        mask-image: linear-gradient(to right, transparent, #000 32px);
+    }
+
+    .admin-nav.fade-start.fade-end {
+        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
+        mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
+    }
+
+    .nav-group {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    /* Séparateur discret entre les groupes */
+    .nav-group + .nav-group::before {
+        content: "";
+        width: 1px;
+        height: 20px;
+        margin: 0 8px;
+        background-color: var(--border);
+    }
+
+    /* Titre de groupe : gardé pour les lecteurs d'écran seulement */
+    .nav-group-label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .nav-list {
+        flex-direction: row;
+        gap: 6px;
     }
 
     .nav-item {
         width: auto;
+        min-height: 40px;
+        padding: 0 14px;
+        border-radius: var(--radius-pill);
+        background-color: var(--secondary);
+        color: var(--text);
         white-space: nowrap;
-        flex-shrink: 0;
-        border-radius: 20px;
-        background-color: var(--tertiary);
     }
 
+    .nav-text {
+        overflow: visible;
+    }
+
+    .back,
     .account {
         display: none;
     }
 
-    .main {
+    .admin-main {
+        order: 3;
+        margin: 12px 12px 0;
+        padding: 14px;
         overflow: visible;
+        /* La navigation collante ne recouvre pas le haut de la section après un changement */
+        scroll-margin-top: 64px;
     }
 }
 </style>
diff --git a/src/components/Admin/AdminField.vue b/src/components/Admin/AdminField.vue
new file mode 100644
index 0000000..599b610
--- /dev/null
+++ b/src/components/Admin/AdminField.vue
@@ -0,0 +1,145 @@
+<template>
+    <div :class="classes" :role="group ? 'group' : undefined" :aria-labelledby="group && label ? labelId : undefined"
+        :aria-describedby="group ? describedBy : undefined">
+        <div class="adm-field__top">
+            <component :is="isPlain ? 'span' : 'label'" v-if="label" :id="labelId" :for="isPlain ? undefined : controlId" class="adm-field__label">
+                {{ label }}<span v-if="required" class="adm-field__required" aria-hidden="true"> *</span>
+                <span v-if="required" class="sr-only"> (obligatoire)</span>
+            </component>
+            <span v-if="hasBadges" class="adm-field__badges">
+                <span v-if="isLocked" :id="lockId" class="adm-badge adm-tone-warning"
+                    :title="env ? 'Défini par la variable d\'environnement ' + env + ' : modifiable seulement sur le serveur' : 'Valeur verrouillée'">
+                    <Icon icon="fa-solid fa-lock" aria-hidden="true"/>
+                    <span v-if="env">Verrouillé par <span class="adm-mono">{{ env }}</span></span>
+                    <span v-else>Verrouillé</span>
+                </span>
+                <span v-if="pending" class="adm-badge adm-tone-warning">
+                    <Icon icon="fa-solid fa-hourglass-half" aria-hidden="true"/> Redémarrage en attente
+                </span>
+                <span v-else-if="restart" class="adm-badge adm-tone-info">
+                    <Icon icon="fa-solid fa-rotate" aria-hidden="true"/> Redémarrage requis
+                </span>
+                <span v-if="dirty" class="adm-badge adm-tone-main">
+                    <Icon icon="fa-solid fa-pen" aria-hidden="true"/> Modifié
+                </span>
+                <slot name="badges"></slot>
+            </span>
+            <span v-if="$slots.aside" class="adm-field__aside"><slot name="aside"></slot></span>
+        </div>
+        <div class="adm-field__control">
+            <slot :id="controlId" :describedby="describedBy" :invalid="!!error" :disabled="isLocked" :labelledby="label ? labelId : undefined"></slot>
+        </div>
+        <p v-if="hint || $slots.hint" :id="hintId" class="adm-field__hint"><slot name="hint">{{ hint }}</slot></p>
+        <p v-if="error" :id="errorId" class="adm-field__error" role="alert">
+            <Icon icon="fa-solid fa-circle-exclamation" aria-hidden="true"/>
+            <span>{{ error }}</span>
+        </p>
+    </div>
+</template>
+<script setup>
+/**
+ * Champ de réglage d'administration : libellé, étiquettes (verrou d'env, redémarrage, modifié), aide, erreur.
+ * Le contrôle va dans le slot par défaut, qui reçoit { id, describedby, invalid, disabled, labelledby } :
+ *   <AdminField label="URL" env="WARP_PROXY" hint="socks5://…" v-slot="{ id, describedby, invalid, disabled }">
+ *       <input type="url" :id="id" :aria-describedby="describedby" :aria-invalid="invalid" :disabled="disabled" v-model="url"/>
+ *   </AdminField>
+ * Les champs texte prennent toute la largeur et un fond --secondary (lisibles sur une carte --tertiary).
+ * `inline` : libellé à gauche, contrôle à droite (Switch, petit select).
+ * `plain` : libellé en <span> (pas de <label for>) quand le contrôle n'est pas un champ :
+ *   bouton, groupe (SegmentedControl / AdminPills via aria-labelledby = slot `labelledby`).
+ * `group` : implique `plain` ; la racine devient role="group" nommée par le libellé et décrite par l'aide
+ *   (plusieurs interrupteurs / cases sous un même intitulé).
+ */
+import { computed, useId, useSlots } from 'vue';
+import './admin.scss';
+
+const props = defineProps({
+    label: {
+        type: String,
+        default: null
+    },
+    for: {
+        type: String,
+        default: null
+    },
+    hint: {
+        type: String,
+        default: null
+    },
+    error: {
+        type: String,
+        default: null
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    // Valeur verrouillée (le slot reçoit disabled=true)
+    locked: {
+        type: Boolean,
+        default: false
+    },
+    // Nom de la variable d'environnement qui verrouille la valeur (implique locked)
+    env: {
+        type: String,
+        default: null
+    },
+    // Modifier cette valeur demande un redémarrage
+    restart: {
+        type: Boolean,
+        default: false
+    },
+    // Valeur modifiée, en attente d'un redémarrage (remplace l'étiquette `restart`)
+    pending: {
+        type: Boolean,
+        default: false
+    },
+    // Brouillon différent de la valeur enregistrée
+    dirty: {
+        type: Boolean,
+        default: false
+    },
+    inline: {
+        type: Boolean,
+        default: false
+    },
+    plain: {
+        type: Boolean,
+        default: false
+    },
+    group: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const slots = useSlots();
+const uid = useId();
+const controlId = computed(() => props.for || `adm-field-${uid}`);
+const labelId = computed(() => `${controlId.value}-label`);
+const hintId = computed(() => `${controlId.value}-hint`);
+const errorId = computed(() => `${controlId.value}-error`);
+const lockId = computed(() => `${controlId.value}-lock`);
+
+const isPlain = computed(() => props.plain || props.group);
+const isLocked = computed(() => props.locked || !!props.env);
+const hasBadges = computed(() => isLocked.value || props.restart || props.pending || props.dirty || !!slots.badges);
+
+// À poser sur aria-describedby du contrôle : aide, erreur et verrou
+const describedBy = computed(() => {
+    const ids = [];
+    if (props.hint || slots.hint) ids.push(hintId.value);
+    if (props.error) ids.push(errorId.value);
+    if (isLocked.value) ids.push(lockId.value);
+    return ids.length ? ids.join(' ') : undefined;
+});
+
+const classes = computed(() => [
+    'adm-field',
+    {
+        'adm-field--inline': props.inline,
+        'adm-field--error': !!props.error,
+        'adm-field--locked': isLocked.value
+    }
+]);
+</script>
diff --git a/src/components/Admin/AdminGrid.vue b/src/components/Admin/AdminGrid.vue
new file mode 100644
index 0000000..0dc6556
--- /dev/null
+++ b/src/components/Admin/AdminGrid.vue
@@ -0,0 +1,73 @@
+<template>
+    <!-- Groupe titré : petit intitulé de catégorie au-dessus de la grille (les cartes passent en h4) -->
+    <section v-if="title" class="adm-group" :aria-labelledby="titleId">
+        <header class="adm-group__header">
+            <h3 :id="titleId" class="adm-group__title">
+                <Icon v-if="icon" class="adm-group__icon" :icon="icon" aria-hidden="true"/>
+                <span>{{ title }}</span>
+            </h3>
+            <p v-if="subtitle" class="adm-group__subtitle">{{ subtitle }}</p>
+            <div v-if="$slots.actions" class="adm-group__actions">
+                <slot name="actions"></slot>
+            </div>
+        </header>
+        <component :is="as" :class="gridClasses">
+            <slot></slot>
+        </component>
+    </section>
+    <component v-else :is="as" :class="gridClasses">
+        <slot></slot>
+    </component>
+</template>
+<script setup>
+/**
+ * Grille 12 colonnes des sections d'administration.
+ * Les enfants choisissent leur largeur : AdminCard (prop `span`) ou une classe `adm-span-N`
+ * (+ `adm-span-md-N` / `adm-span-sm-N` pour les conteneurs moyens / petits). Sans classe : pleine largeur.
+ * Les largeurs suivent la taille de la grille elle-même (requête de conteneur), pas celle de la fenêtre.
+ * `title` (+ `subtitle`, `icon`, slot `actions`) en fait un groupe thématique : « Services », « Ressources »…
+ */
+import { computed, inject, provide, unref, useId } from 'vue';
+import { ADMIN_HEADING_KEY } from './adminUi';
+import './admin.scss';
+
+const props = defineProps({
+    // Balise de la grille (div, ul, section…)
+    as: {
+        type: String,
+        default: 'div'
+    },
+    // 'md' = 14 px (12 sur mobile) ; 'sm' = 10 px (grilles imbriquées dans une carte)
+    gap: {
+        type: String,
+        default: 'md',
+        validator: (value) => ['sm', 'md'].includes(value)
+    },
+    // 'stretch' : cartes d'une même ligne à hauteur égale ; 'start' : hauteur naturelle
+    align: {
+        type: String,
+        default: 'stretch',
+        validator: (value) => ['stretch', 'start'].includes(value)
+    },
+    title: {
+        type: String,
+        default: null
+    },
+    subtitle: {
+        type: String,
+        default: null
+    },
+    icon: {
+        type: String,
+        default: null
+    }
+});
+
+const titleId = `adm-group-${useId()}`;
+
+const gridClasses = computed(() => ['adm-grid', { 'adm-grid--sm': props.gap === 'sm', 'adm-grid--start': props.align === 'start' }]);
+
+// Un groupe titré (h3) fait descendre les titres de ses cartes d'un niveau ; sinon on transmet celui du parent
+const parentLevel = inject(ADMIN_HEADING_KEY, null);
+provide(ADMIN_HEADING_KEY, computed(() => (props.title ? 4 : (unref(parentLevel) || 3))));
+</script>
diff --git a/src/components/Admin/AdminKv.vue b/src/components/Admin/AdminKv.vue
index 62ad394..f31a6fb 100644
--- a/src/components/Admin/AdminKv.vue
+++ b/src/components/Admin/AdminKv.vue
@@ -1,11 +1,13 @@
 <template>
-    <div class="kv">
-        <span class="kv-label">{{ label }}</span>
-        <span :class="{ 'kv-value': true, mono }"><slot>{{ value }}</slot></span>
+    <div class="adm-kv">
+        <span class="adm-kv__label">{{ label }}</span>
+        <span :class="['adm-kv__value', { 'adm-kv__value--mono': mono }]"><slot>{{ value }}</slot></span>
     </div>
 </template>
 <script setup>
-// Ligne « libellé : valeur » des cartes d'administration
+// Ligne « libellé : valeur » des cartes d'administration (la valeur peut être remplacée par le slot)
+import './admin.scss';
+
 defineProps({
     label: {
         type: String,
@@ -20,31 +22,3 @@ defineProps({
     }
 });
 </script>
-<style scoped>
-.kv {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    font-size: 0.9em;
-}
-
-.kv-label {
-    color: var(--text-secondary);
-    white-space: nowrap;
-}
-
-.kv-value {
-    text-align: right;
-    word-break: break-word;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 5px;
-    flex-wrap: wrap;
-}
-
-.mono {
-    font-family: monospace;
-}
-</style>
diff --git a/src/components/Admin/AdminList.vue b/src/components/Admin/AdminList.vue
new file mode 100644
index 0000000..2a1f74b
--- /dev/null
+++ b/src/components/Admin/AdminList.vue
@@ -0,0 +1,34 @@
+<template>
+    <component :is="as" :class="['adm-list', { 'adm-list--divided': divided }]" :aria-label="label || undefined">
+        <slot></slot>
+    </component>
+</template>
+<script setup>
+/**
+ * Conteneur de lignes AdminRow.
+ * `divided` : lignes transparentes séparées par des filets (à placer dans une AdminCard `flush`) ;
+ * sinon lignes en pavés espacés de 6 px.
+ * Avec as="ul"/"ol" (défaut ul), les AdminRow enfants deviennent automatiquement des <li>.
+ */
+import { provide } from 'vue';
+import { ADMIN_LIST_KEY } from './adminUi';
+import './admin.scss';
+
+const props = defineProps({
+    as: {
+        type: String,
+        default: 'ul'
+    },
+    divided: {
+        type: Boolean,
+        default: false
+    },
+    // Nom accessible de la liste (facultatif)
+    label: {
+        type: String,
+        default: null
+    }
+});
+
+provide(ADMIN_LIST_KEY, { itemTag: () => (props.as === 'ul' || props.as === 'ol' ? 'li' : 'div') });
+</script>
diff --git a/src/components/Admin/AdminLogs.vue b/src/components/Admin/AdminLogs.vue
index 84688fb..93709f5 100644
--- a/src/components/Admin/AdminLogs.vue
+++ b/src/components/Admin/AdminLogs.vue
@@ -1,97 +1,127 @@
 <template>
     <AdminSection title="📜 Logs" subtitle="Journaux du backend, lus de la fin vers le début">
         <template #actions>
-            <Button icon="fa-solid fa-rotate" :disabled="filesLoading" @click="loadFiles()">Actualiser</Button>
+            <Button variant="secondary" icon="fa-solid fa-rotate" :loading="filesLoading" @click="loadFiles()">Actualiser</Button>
         </template>
 
-        <div class="logs-layout">
-            <Box level="second" padding="closed" no-shadow class="files">
-                <p class="files-title"><Icon icon="fa-solid fa-folder-open"/> Fichiers</p>
+        <AdminToolbar v-model:search="searchFilter" search-label="Rechercher dans les messages" search-placeholder="Rechercher dans les messages…"
+            label="Filtres du journal">
+            <AdminPills v-model="levels" multiple label="Niveaux affichés" :options="levelOptions"/>
+            <div class="logs-type">
+                <label class="sr-only" :for="typeInputId">Module (nom exact)</label>
+                <Icon class="logs-type__icon" icon="fa-solid fa-cube" aria-hidden="true"/>
+                <input :id="typeInputId" type="text" v-model="typeFilter" maxlength="64" spellcheck="false" autocomplete="off"
+                    placeholder="Module exact (ex : Server)" title="Nom exact du module, sans tenir compte des majuscules"/>
+            </div>
+            <template #end>
+                <Button v-if="isCurrent" :variant="live ? 'danger' : 'secondary'" :aria-pressed="live ? 'true' : 'false'"
+                    :icon="live ? 'fa-solid fa-circle-stop' : 'fa-solid fa-tower-broadcast'" @click="toggleLive()">
+                    {{ live ? "Arrêter le direct" : "Temps réel" }}
+                </Button>
+                <Button variant="secondary" :disabled="!selected" :loading="downloading" icon="fa-solid fa-download" @click="download()">
+                    {{ downloading ? "Téléchargement…" : "Télécharger" }}
+                </Button>
+            </template>
+        </AdminToolbar>
+
+        <AdminGrid>
+            <!-- Fichiers -->
+            <AdminCard title="Fichiers" :subtitle="files.length ? files.length + ' fichier(s)' : null" icon="fa-solid fa-folder-open"
+                :span="3" :span-md="4" :span-sm="12" :flush="files.length > 0" body-class="logs-files">
                 <AdminState :loading="filesLoading && !files.length" :error="!files.length ? filesError : null"
                     :empty="files.length === 0" empty-text="Aucun fichier de logs" @retry="loadFiles()">
-                    <div class="files-list">
-                        <div v-for="file in files" :key="file.name" :class="['file', { selected: selected === file.name }]" @click="select(file.name)">
-                            <div class="file-info">
-                                <p class="file-name">{{ file.name }}</p>
-                                <p class="file-meta">{{ formatBytes(file.size) }} · {{ formatRelative(file.modifiedAt) }}</p>
-                            </div>
-                            <Tag v-if="file.current" color="var(--text-success)">Actuel</Tag>
-                            <IconAction v-else title="Supprimer ce fichier" icon="fa-solid fa-trash-can" color="var(--text-tertiary)" size="1em" @click.stop="removeFile(file)"/>
-                        </div>
-                    </div>
+                    <AdminList divided label="Fichiers de logs">
+                        <AdminRow v-for="file in files" :key="file.name" as="li" dense :selected="selected === file.name" class="logs-file">
+                            <template #title>
+                                <button type="button" class="logs-file__select" :aria-current="selected === file.name ? 'true' : undefined"
+                                    @click="select(file.name)">{{ file.name }}</button>
+                            </template>
+                            <template #subtitle>{{ formatBytes(file.size) }} · {{ formatRelative(file.modifiedAt, nowDate) }}</template>
+                            <template #actions>
+                                <Tag v-if="file.current" tone="success" icon="fa-solid fa-pen">Actuel</Tag>
+                                <IconAction v-else :label="'Supprimer le fichier ' + file.name" icon="fa-solid fa-trash-can"
+                                    color="var(--text-tertiary)" size="0.95em" @click="removeFile(file)"/>
+                            </template>
+                        </AdminRow>
+                    </AdminList>
                 </AdminState>
-            </Box>
+            </AdminCard>
 
-            <div class="viewer">
-                <div class="toolbar">
-                    <AdminPills v-model="levels" multiple :options="levelOptions"/>
-                    <div class="toolbar-inputs">
-                        <input type="text" v-model="typeFilter" placeholder="Type exact (ex : Server)" title="Nom exact du module, sans tenir compte des majuscules"/>
-                        <input type="text" v-model="searchFilter" placeholder="Rechercher dans les messages"/>
-                    </div>
-                    <div class="toolbar-actions">
-                        <Button v-if="isCurrent" :icon="live ? 'fa-solid fa-circle-stop' : 'fa-solid fa-tower-broadcast'" @click="toggleLive()">
-                            {{ live ? "Arrêter le direct" : "Temps réel" }}
-                        </Button>
-                        <Button :disabled="!selected || downloading" icon="fa-solid fa-download" @click="download()">
-                            {{ downloading ? "Téléchargement…" : "Télécharger" }}
-                        </Button>
-                    </div>
-                </div>
+            <!-- Lecteur -->
+            <AdminCard :title="selected || 'Contenu'" :subtitle="viewerSubtitle" icon="fa-solid fa-terminal" tone="main"
+                :span="9" :span-md="8" :span-sm="12" body-class="logs-viewer">
+                <template #actions>
+                    <span v-if="live" class="adm-badge adm-tone-success logs-live">
+                        <Icon class="logs-live__dot" icon="fa-solid fa-circle" aria-hidden="true"/> En direct
+                    </span>
+                </template>
 
-                <Error v-if="interrupted" class="banner">
-                    Journal interrompu : la dernière ligne est « END OF LOGS ». Plus rien n'est écrit dans ce fichier.
-                </Error>
+                <AdminBanner v-if="interrupted" tone="error" title="Journal interrompu">
+                    La dernière ligne est « END OF LOGS » : plus rien n'est écrit dans ce fichier.
+                </AdminBanner>
 
                 <AdminState :loading="linesLoading && !lines.length" :error="!lines.length ? linesError : null"
                     :empty="!selected" empty-text="Sélectionne un fichier pour lire son contenu" @retry="reload()">
-                    <div class="console-wrapper">
-                        <div ref="consoleRef" class="console" @scroll="onScroll">
-                            <div v-if="startOffset > 0" class="older">
-                                <Button :disabled="olderLoading" color-lower icon="fa-solid fa-angles-up" @click="loadOlder()">
+                    <div class="logs-console-wrap">
+                        <div ref="consoleRef" class="logs-console" role="region" tabindex="0"
+                            :aria-label="'Contenu du journal ' + (selected || '')" @scroll="onScroll">
+                            <div v-if="startOffset > 0" class="logs-older">
+                                <Button size="sm" variant="secondary" :loading="olderLoading" icon="fa-solid fa-angles-up" @click="loadOlder()">
                                     {{ olderLoading ? "Chargement…" : "Charger les lignes plus anciennes" }}
                                 </Button>
                             </div>
-                            <p v-else class="console-start">— Début du fichier —</p>
-                            <p v-if="!visibleLines.length" class="console-empty">Aucune ligne ne correspond aux filtres</p>
-                            <div v-for="line in visibleLines" :key="line.key" :class="['line', levelClass(line.level)]">
+                            <p v-else class="logs-console__note">— Début du fichier —</p>
+                            <p v-if="!visibleLines.length" class="logs-console__note">Aucune ligne ne correspond aux filtres</p>
+                            <div v-for="line in visibleLines" :key="line.key" :class="['logs-line', levelClass(line.level)]">
                                 <template v-if="line.level || line.time">
-                                    <span class="line-time">{{ line.time }}</span>
-                                    <span class="line-level">{{ line.level }}</span>
-                                    <span v-if="line.type" class="line-type">[{{ line.type }}]</span>
-                                    <span v-if="line.step" class="line-step">STEP</span>
-                                    <span class="line-message">{{ line.message }}</span>
+                                    <span class="logs-line__time">{{ line.time }}</span>
+                                    <span class="logs-line__level">{{ line.level }}</span>
+                                    <span v-if="line.type" class="logs-line__type">[{{ line.type }}]</span>
+                                    <span v-if="line.step" class="logs-line__step">STEP</span>
+                                    <span class="logs-line__message">{{ line.message }}</span>
                                 </template>
-                                <span v-else class="line-raw">{{ line.raw }}</span>
+                                <span v-else class="logs-line__raw">{{ line.raw }}</span>
                             </div>
                         </div>
-                        <button v-if="!follow" class="follow" @click="scrollToBottom(true)">
-                            <Icon icon="fa-solid fa-arrow-down"/> Suivre
+                        <button v-if="!follow" type="button" class="logs-follow" @click="scrollToBottom(true)">
+                            <Icon icon="fa-solid fa-arrow-down" aria-hidden="true"/> Suivre la fin
                         </button>
                     </div>
-                    <p class="status">
-                        <span>{{ visibleLines.length }} ligne(s) affichée(s)<span v-if="truncated"> (les plus anciennes ont été retirées)</span></span>
-                        <span v-if="live" class="live"><Icon icon="fa-solid fa-circle" class="live-dot"/> En direct</span>
-                    </p>
                 </AdminState>
-            </div>
-        </div>
+
+                <template v-if="selected" #footer>
+                    <span class="adm-footer-meta">
+                        {{ visibleLines.length }} ligne(s) affichée(s)<template v-if="lines.length !== visibleLines.length"> sur {{ lines.length }}</template>
+                        <template v-if="truncated"> · les plus anciennes ont été retirées</template>
+                    </span>
+                    <span class="sr-only" aria-live="polite">{{ live ? "Lecture en direct activée" : "" }}</span>
+                </template>
+            </AdminCard>
+        </AdminGrid>
 
         <AdminConfirm ref="confirmRef"/>
     </AdminSection>
 </template>
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+/**
+ * Section « Logs » : liste (/ADMIN/LOGS/LIST), lecture par blocs depuis la fin (/ADMIN/LOGS/READ),
+ * direct (/ADMIN/LOGS/SUBSCRIBE + poussée /ADMIN/LOGS/APPEND), suppression et téléchargement.
+ */
+import { computed, nextTick, onMounted, onUnmounted, ref, useId, watch } from 'vue';
 import { socket } from '@/socket';
 import { useAdminStore } from '@/stores/adminStore';
 import { adminRequest, adminListen, describeError } from '@/utils/AdminRequest';
-import Box from '@/components/UI/Box.vue';
 import Button from '@/components/UI/Button.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Error from '@/components/UI/Error.vue';
 import IconAction from '@/components/UI/IconAction.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
+import AdminGrid from './AdminGrid.vue';
+import AdminCard from './AdminCard.vue';
+import AdminToolbar from './AdminToolbar.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
+import AdminBanner from './AdminBanner.vue';
 import AdminPills from './AdminPills.vue';
 import AdminConfirm from './AdminConfirm.vue';
 import { formatBytes, formatRelative } from './adminFormat';
@@ -103,6 +133,7 @@ const ALL_LEVELS = ["INFO", "WARN", "ERROR", "FATAL"];
 const adminStore = useAdminStore();
 const confirmRef = ref(null);
 const consoleRef = ref(null);
+const typeInputId = `logs-type-${useId()}`;
 
 // ----- Fichiers -----
 const files = ref([]);
@@ -110,7 +141,13 @@ const filesLoading = ref(false);
 const filesError = ref(null);
 const selected = ref(null);
 
-const isCurrent = computed(() => !!files.value.find(f => f.name === selected.value)?.current);
+const selectedFile = computed(() => files.value.find(f => f.name === selected.value) || null);
+const isCurrent = computed(() => !!selectedFile.value?.current);
+
+const viewerSubtitle = computed(() => {
+    if (!selectedFile.value) return null;
+    return (selectedFile.value.current ? "Fichier courant · " : "") + formatBytes(selectedFile.value.size);
+});
 
 async function loadFiles() {
     if (filesLoading.value) return;
@@ -125,6 +162,7 @@ async function loadFiles() {
         }
     } catch (e) {
         filesError.value = describeError(e);
+        if (files.value.length) adminStore.notifyError(e, "Liste des logs");
     } finally {
         filesLoading.value = false;
     }
@@ -142,7 +180,11 @@ async function removeFile(file) {
     try {
         await adminRequest("/ADMIN/LOGS/DELETE", { name: file.name });
         adminStore.notify('success', `Fichier ${file.name} supprimé`);
-        if (selected.value === file.name) selected.value = null;
+        if (selected.value === file.name) {
+            stopLive();
+            selected.value = null;
+            lines.value = [];
+        }
         await loadFiles();
     } catch (e) {
         adminStore.notifyError(e, "Suppression du fichier");
@@ -204,7 +246,7 @@ const interrupted = computed(() => {
 });
 
 function levelClass(level) {
-    return level ? "level-" + level.toLowerCase() : "level-none";
+    return level ? "logs-line--" + String(level).toLowerCase() : "logs-line--none";
 }
 
 function trim() {
@@ -406,291 +448,257 @@ function onAppend(payload) {
 }
 
 let offAppend = null;
+const nowDate = ref(Date.now());
+let clock = null;
 
 onMounted(() => {
     offAppend = adminListen("/ADMIN/LOGS/APPEND", onAppend);
     loadFiles();
+    clock = setInterval(() => { nowDate.value = Date.now(); }, 30000);
 });
 
 onUnmounted(() => {
     offAppend?.();
     clearTimeout(filterTimer);
+    clearInterval(clock);
     stopLive();
     readToken++;
 });
 </script>
 <style scoped>
-.logs-layout {
-    display: grid;
-    grid-template-columns: minmax(220px, 0.8fr) 3fr;
-    gap: 10px;
-    min-height: 0;
-}
-
-p {
-    margin: 0;
-}
-
-.files {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    min-width: 0;
-}
-
-.files-title {
-    font-weight: 600;
+/* Champ « module » de la barre d'outils */
+.logs-type {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: 5px;
+    flex: 0 1 220px;
+    min-width: 160px;
 }
 
-.files-list {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    max-height: 65vh;
+.logs-type__icon {
+    position: absolute;
+    left: 11px;
+    color: var(--text-secondary);
+    font-size: 0.85em;
+    pointer-events: none;
+}
+
+.logs-type input {
+    width: 100%;
+    min-height: 36px;
+    box-sizing: border-box;
+    padding-left: 32px;
+}
+
+/* Liste des fichiers : défile seule, la sélection est un vrai bouton étiré sur toute la ligne */
+:deep(.logs-files) {
+    max-height: 62vh;
     overflow-y: auto;
 }
 
-.file {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 7px;
-    border-radius: 5px;
-    background-color: var(--secondary);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.file:hover {
-    filter: brightness(1.1);
-}
-
-.file.selected {
-    background-color: var(--main);
-    color: #FFFFFF;
-}
-
-.file.selected .file-meta {
-    color: #FFFFFF;
-    opacity: 0.8;
-}
-
-.file-info {
-    min-width: 0;
-}
-
-.file-name {
-    font-family: monospace;
-    font-size: 0.8em;
-    word-break: break-all;
-}
-
-.file-meta {
-    font-size: 0.7em;
-    color: var(--text-secondary);
-}
-
-.viewer {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    min-width: 0;
-}
-
-.toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-}
-
-.toolbar-inputs {
-    display: flex;
-    gap: 10px;
-    flex: 1;
-    min-width: 0;
-}
-
-.toolbar-inputs input {
-    flex: 1;
-    min-width: 0;
-}
-
-.toolbar-actions {
-    display: flex;
-    gap: 10px;
-}
-
-.banner {
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.console-wrapper {
+.logs-file {
     position: relative;
 }
 
-.console {
-    background-color: var(--primary);
-    border-radius: 10px;
-    padding: 10px;
-    height: 60vh;
-    overflow: auto;
-    font-family: monospace;
-    font-size: 0.8em;
-    line-height: 1.5;
-}
-
-.older {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 10px;
-}
-
-.console-start,
-.console-empty {
-    text-align: center;
-    color: var(--text-secondary);
-    margin-bottom: 10px;
-}
-
-.line {
-    display: flex;
-    gap: 8px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    padding: 1px 4px;
-    border-radius: 3px;
-}
-
-.line:hover {
-    background-color: var(--secondary);
-}
-
-.line-time {
-    color: var(--text-secondary);
-    flex-shrink: 0;
-}
-
-.line-level {
-    font-weight: bold;
-    flex-shrink: 0;
-    min-width: 45px;
-}
-
-.line-type {
-    color: var(--text-secondary);
-    flex-shrink: 0;
-}
-
-.line-step {
-    color: var(--mod-color);
-    flex-shrink: 0;
-}
-
-.line-message {
-    flex: 1;
-    min-width: 0;
-}
-
-.line-raw {
-    color: var(--text-secondary);
-    padding-left: 20px;
-}
-
-.level-info .line-level {
-    color: var(--admin-color);
-}
-
-.level-warn .line-level,
-.level-warn .line-message {
-    color: var(--text-warning);
-}
-
-.level-error .line-level,
-.level-error .line-message {
-    color: var(--text-error);
-}
-
-.level-fatal {
-    background-color: var(--text-error);
-    color: #FFFFFF;
-}
-
-.level-fatal .line-time,
-.level-fatal .line-type {
-    color: #FFFFFF;
-}
-
-.follow {
-    position: absolute;
-    bottom: 15px;
-    right: 20px;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    background-color: var(--main);
-    color: #FFFFFF;
+.logs-file__select {
+    padding: 0;
     border: none;
-    border-radius: 20px;
-    padding: 5px 12px;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-family: var(--font-mono);
+    font-size: 0.85em;
+    text-align: left;
     cursor: pointer;
-    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+    outline: none;
+    overflow-wrap: anywhere;
+    white-space: normal;
 }
 
-.follow:hover {
-    background-color: var(--main-hover);
+.logs-file__select::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
 }
 
-.status {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.8em;
-    color: var(--text-secondary);
+.logs-file__select:focus-visible::after {
+    box-shadow: inset 0 0 0 2px var(--main);
 }
 
-.live {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    color: var(--text-success);
+/* Les actions (supprimer) restent cliquables au-dessus du bouton étiré */
+.logs-file :deep(.adm-row__actions) {
+    position: relative;
+    z-index: 1;
 }
 
-.live-dot {
-    font-size: 0.7em;
-    animation: blink 1.2s ease-in-out infinite;
+.logs-file :deep(.adm-row__title) {
+    white-space: normal;
 }
 
-@keyframes blink {
+/* Lecteur */
+:deep(.logs-viewer) {
+    gap: 10px;
+}
+
+.logs-live {
+    font-size: 0.75em;
+}
+
+.logs-live__dot {
+    font-size: 0.65em;
+    animation: logs-blink 1.2s ease-in-out infinite;
+}
+
+@keyframes logs-blink {
     50% {
         opacity: 0.2;
     }
 }
 
+.logs-console-wrap {
+    position: relative;
+    min-width: 0;
+}
+
+.logs-console {
+    height: 60vh;
+    overflow: auto;
+    box-sizing: border-box;
+    padding: 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--primary);
+    font-family: var(--font-mono);
+    font-size: 0.8em;
+    line-height: 1.55;
+    outline: 2px solid transparent;
+}
+
+.logs-console:focus-visible {
+    box-shadow: var(--focus-ring);
+}
+
+.logs-older {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+    font-family: var(--font);
+}
+
+.logs-console__note {
+    margin: 0 0 10px;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.logs-line {
+    display: flex;
+    gap: 8px;
+    padding: 1px 4px;
+    border-radius: 3px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.logs-line:hover {
+    background-color: var(--secondary);
+}
+
+.logs-line__time,
+.logs-line__type {
+    flex-shrink: 0;
+    color: var(--text-secondary);
+}
+
+.logs-line__level {
+    flex-shrink: 0;
+    min-width: 45px;
+    font-weight: 700;
+}
+
+.logs-line__step {
+    flex-shrink: 0;
+    color: var(--mod-color);
+}
+
+.logs-line__message {
+    flex: 1;
+    min-width: 0;
+}
+
+.logs-line__raw {
+    padding-left: 20px;
+    color: var(--text-secondary);
+}
+
+.logs-line--info .logs-line__level {
+    color: var(--admin-color);
+}
+
+.logs-line--warn .logs-line__level,
+.logs-line--warn .logs-line__message {
+    color: var(--text-warning);
+}
+
+.logs-line--error .logs-line__level,
+.logs-line--error .logs-line__message {
+    color: var(--text-error);
+}
+
+.logs-line--fatal,
+.logs-line--fatal:hover {
+    background-color: var(--text-error);
+    color: var(--main-contrast);
+}
+
+.logs-line--fatal .logs-line__time,
+.logs-line--fatal .logs-line__type {
+    color: var(--main-contrast);
+}
+
+.logs-follow {
+    position: absolute;
+    right: 18px;
+    bottom: 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border: none;
+    border-radius: var(--radius-pill);
+    background-color: var(--main);
+    color: var(--main-contrast);
+    font: inherit;
+    font-size: 0.85em;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    outline: 2px solid transparent;
+    transition: background-color var(--dur-fast) ease;
+}
+
+.logs-follow:hover {
+    background-color: var(--main-hover);
+}
+
+.logs-follow:focus-visible {
+    box-shadow: var(--focus-ring);
+}
+
 @media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .logs-layout {
-        grid-template-columns: 1fr;
+    :deep(.logs-files) {
+        max-height: 30vh;
     }
 
-    .files-list {
-        max-height: 25vh;
+    .logs-type {
+        flex: 1 1 100%;
     }
 
-    .toolbar-inputs {
-        flex-direction: column;
-        width: 100%;
-    }
-
-    .console {
+    .logs-console {
         height: 55vh;
     }
 
-    .line {
+    .logs-line {
         flex-wrap: wrap;
         gap: 4px;
     }
diff --git a/src/components/Admin/AdminMaintenance.vue b/src/components/Admin/AdminMaintenance.vue
index d244e4b..2a84cec 100644
--- a/src/components/Admin/AdminMaintenance.vue
+++ b/src/components/Admin/AdminMaintenance.vue
@@ -1,63 +1,118 @@
 <template>
-    <AdminSection title="🛠️ Maintenance" subtitle="Annonces globales et redémarrage de Subsonics">
-        <div class="cards">
-            <AdminCard title="Annonce globale" icon="fa-solid fa-bullhorn" color="var(--admin-color)">
-                <p class="hint">Le message s'affiche immédiatement sur l'interface de tous les utilisateurs connectés.</p>
-                <AdminPills v-model="level" :options="levels"/>
-                <textarea v-model="message" maxlength="500" placeholder="Ex : Une mise à jour arrive ce soir à 22h, le bot sera indisponible quelques minutes."></textarea>
-                <div class="footer">
-                    <span class="hint">{{ message.trim().length }} / 500</span>
-                    <Button icon="fa-solid fa-paper-plane" :disabled="!canAnnounce || announcing" @click="announce()">
+    <AdminSection title="🛠️ Maintenance" subtitle="Annonces globales, redémarrage et état des fichiers de données">
+        <AdminStatRow v-if="databases" :columns="4" label="Fichiers de données">
+            <AdminStat label="Bases de données" :value="databases.length" icon="fa-solid fa-database" tone="admin"/>
+            <AdminStat label="Entrées au total" :value="totalEntries" icon="fa-solid fa-list" tone="main"/>
+            <AdminStat label="Taille totale" :value="formatBytes(totalSize)" icon="fa-solid fa-hard-drive" tone="info" mono/>
+            <AdminStat label="Dernière écriture" :value="lastWrite ? formatRelative(lastWrite, nowDate) : 'Jamais'"
+                icon="fa-solid fa-clock-rotate-left" :sub="lastWriteName"/>
+        </AdminStatRow>
+
+        <AdminGrid>
+            <!-- Annonce -->
+            <AdminCard title="Annonce globale" subtitle="Affichée immédiatement chez tous les utilisateurs connectés"
+                icon="fa-solid fa-bullhorn" tone="admin" :span="6" :span-sm="12">
+                <AdminField plain label="Niveau" v-slot="{ labelledby }">
+                    <AdminPills v-model="level" :options="levels" :aria-labelledby="labelledby"/>
+                </AdminField>
+
+                <AdminField label="Message" required hint="Texte brut, 500 caractères maximum."
+                    v-slot="{ id, describedby }">
+                    <textarea :id="id" v-model="message" class="maint-textarea" maxlength="500" :aria-describedby="describedby"
+                        placeholder="Ex : Une mise à jour arrive ce soir à 22h, le bot sera indisponible quelques minutes."></textarea>
+                </AdminField>
+
+                <div v-if="message.trim()" class="maint-preview">
+                    <p class="adm-hint">Aperçu</p>
+                    <AdminBanner :tone="level === 'warn' ? 'warning' : 'info'" :title="level === 'warn' ? 'Avertissement' : 'Information'">
+                        <p class="maint-preview__text">{{ message.trim() }}</p>
+                    </AdminBanner>
+                </div>
+
+                <template #footer>
+                    <span class="adm-footer-meta" aria-live="polite">{{ message.trim().length }} / 500</span>
+                    <Button icon="fa-solid fa-paper-plane" :loading="announcing" :disabled="!canAnnounce" @click="announce()">
                         {{ announcing ? "Envoi…" : "Diffuser" }}
                     </Button>
-                </div>
+                </template>
             </AdminCard>
 
-            <AdminCard title="Redémarrage" icon="fa-solid fa-power-off" color="var(--text-error)">
-                <p class="hint">
+            <!-- Redémarrage -->
+            <AdminCard title="Redémarrage" subtitle="Arrête la musique partout puis relance le processus"
+                icon="fa-solid fa-power-off" tone="error" :span="6" :span-sm="12">
+                <p class="adm-text adm-muted">
                     Les utilisateurs sont prévenus, tous les players quittent leur salon puis le processus redémarre.
                     L'interface se reconnecte automatiquement dès que Subsonics est de retour.
                 </p>
-                <input type="text" v-model="reason" maxlength="200" placeholder="Raison du redémarrage (3 caractères minimum)"/>
-                <div class="footer">
-                    <span class="hint">{{ reason.trim().length }} / 200</span>
-                    <Button icon="fa-solid fa-power-off" :disabled="!canRestart || restarting" @click="restart()">
+
+                <AdminField label="Raison" required :error="reasonError"
+                    hint="3 à 200 caractères, enregistrée dans le journal d'audit."
+                    v-slot="{ id, describedby, invalid }">
+                    <input :id="id" type="text" v-model="reason" maxlength="200" autocomplete="off"
+                        :aria-describedby="describedby" :aria-invalid="invalid ? 'true' : undefined"
+                        placeholder="Ex : mise à jour de yt-dlp" @keyup.enter="restart()"/>
+                </AdminField>
+
+                <AdminBanner v-if="restartAt" tone="success" title="Redémarrage demandé">
+                    Demandé {{ formatRelative(restartAt, nowDate) }}, reconnexion en attente…
+                </AdminBanner>
+
+                <template #footer>
+                    <span class="adm-footer-meta">{{ reason.trim().length }} / 200</span>
+                    <Button variant="danger" icon="fa-solid fa-power-off" :loading="restarting" :disabled="!canRestart" @click="restart()">
                         {{ restarting ? "Redémarrage…" : "Redémarrer Subsonics" }}
                     </Button>
-                </div>
-                <Success v-if="restartAt">Redémarrage demandé {{ formatRelative(restartAt, nowDate) }}, reconnexion en attente…</Success>
+                </template>
             </AdminCard>
 
-            <AdminCard title="Bases de données" icon="fa-solid fa-database" color="var(--owner-color)" class="wide">
-                <template #header>
-                    <IconAction title="Actualiser" icon="fa-solid fa-rotate" size="1em" @click="loadDatabases()"/>
+            <!-- Bases de données -->
+            <AdminCard title="Bases de données" subtitle="Fichiers JSON du dossier data/ (lecture seule)"
+                icon="fa-solid fa-database" tone="warning" :span="12" :flush="!!databases?.length"
+                :busy="dbLoading && !!databases" busy-label="Actualisation des bases…">
+                <template #actions>
+                    <IconAction label="Actualiser les bases de données" icon="fa-solid fa-rotate" size="1em"
+                        :disabled="dbLoading" @click="loadDatabases()"/>
                 </template>
                 <AdminState :loading="!databases && !dbError" :error="!databases ? dbError : null"
                     :empty="!!databases && databases.length === 0" empty-text="Aucune base de données" @retry="loadDatabases()">
-                    <div class="db-list">
-                        <div v-for="db in databases" :key="db.name" class="db">
-                            <p class="db-name"><Icon icon="fa-solid fa-file-code"/> {{ db.name }}</p>
-                            <span class="db-meta">{{ safeNum(db.entries) }} entrée(s)</span>
-                            <span class="db-meta mono">{{ formatBytes(db.sizeBytes) }}</span>
-                            <span class="db-meta">{{ formatRelative(db.modifiedAt, nowDate) }}</span>
-                        </div>
-                    </div>
+                    <AdminList divided label="Bases de données">
+                        <AdminRow v-for="db in sortedDatabases" :key="db.name" as="li"
+                            :title="db.name" :subtitle="db.modifiedAt ? 'Modifiée ' + formatRelative(db.modifiedAt, nowDate) : 'Jamais écrite'">
+                            <template #media>
+                                <span class="maint-db-icon" aria-hidden="true"><Icon icon="fa-solid fa-file-code"/></span>
+                            </template>
+                            <template #meta>
+                                <span class="maint-db-meta">{{ safeNum(db.entries) }} entrée(s)</span>
+                                <span class="adm-chip" :title="'Taille : ' + formatBytes(db.sizeBytes)">{{ formatBytes(db.sizeBytes) }}</span>
+                            </template>
+                        </AdminRow>
+                    </AdminList>
                 </AdminState>
             </AdminCard>
-        </div>
+        </AdminGrid>
 
         <AdminConfirm ref="confirmRef"/>
     </AdminSection>
 </template>
 <script setup>
+/**
+ * Section « Maintenance » : annonce globale (/ADMIN/MAINTENANCE/ANNOUNCE {message, level}),
+ * redémarrage (/ADMIN/MAINTENANCE/RESTART {reason}) et liste des bases (/ADMIN/DATABASES).
+ */
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { adminRequest, describeError } from '@/utils/AdminRequest';
 import Button from '@/components/UI/Button.vue';
-import Success from '@/components/UI/Success.vue';
 import IconAction from '@/components/UI/IconAction.vue';
 import AdminSection from './AdminSection.vue';
+import AdminGrid from './AdminGrid.vue';
 import AdminCard from './AdminCard.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminStat from './AdminStat.vue';
+import AdminField from './AdminField.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
 import AdminPills from './AdminPills.vue';
 import AdminState from './AdminState.vue';
 import AdminConfirm from './AdminConfirm.vue';
@@ -81,7 +136,7 @@ const canAnnounce = computed(() => {
 });
 
 async function announce() {
-    if (!canAnnounce.value) return;
+    if (!canAnnounce.value || announcing.value) return;
     announcing.value = true;
     try {
         await adminRequest("/ADMIN/MAINTENANCE/ANNOUNCE", { message: message.value.trim(), level: level.value });
@@ -104,8 +159,14 @@ const canRestart = computed(() => {
     return length >= 3 && length <= 200;
 });
 
+// Erreur affichée seulement une fois la saisie commencée (pas sur un champ vide)
+const reasonError = computed(() => {
+    const length = reason.value.trim().length;
+    return length > 0 && length < 3 ? "La raison doit contenir au moins 3 caractères" : null;
+});
+
 async function restart() {
-    if (!canRestart.value) return;
+    if (!canRestart.value || restarting.value) return;
     const ok = await confirmRef.value.ask({
         title: "Redémarrer Subsonics",
         icon: "fa-solid fa-power-off",
@@ -133,6 +194,22 @@ const databases = ref(null);
 const dbLoading = ref(false);
 const dbError = ref(null);
 
+const sortedDatabases = computed(() => [...(databases.value || [])].sort((a, b) => String(a.name).localeCompare(String(b.name))));
+const totalEntries = computed(() => (databases.value || []).reduce((acc, db) => acc + safeNum(db.entries), 0));
+const totalSize = computed(() => (databases.value || []).reduce((acc, db) => acc + safeNum(db.sizeBytes), 0));
+
+// Base modifiée le plus récemment
+const lastWritten = computed(() => {
+    let best = null;
+    for (const db of databases.value || []) {
+        const time = Date.parse(db.modifiedAt);
+        if (Number.isFinite(time) && (!best || time > best.time)) best = { time, name: db.name };
+    }
+    return best;
+});
+const lastWrite = computed(() => lastWritten.value?.time || null);
+const lastWriteName = computed(() => lastWritten.value?.name || null);
+
 async function loadDatabases() {
     if (dbLoading.value) return;
     dbLoading.value = true;
@@ -142,6 +219,7 @@ async function loadDatabases() {
         dbError.value = null;
     } catch (e) {
         dbError.value = describeError(e);
+        if (databases.value) adminStore.notifyError(e, "Bases de données");
     } finally {
         dbLoading.value = false;
     }
@@ -158,75 +236,34 @@ onMounted(() => {
 onUnmounted(() => clearInterval(timer));
 </script>
 <style scoped>
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 10px;
-    align-items: start;
+.maint-textarea {
+    min-height: 96px;
 }
 
-.wide {
-    grid-column: 1 / -1;
-}
-
-.hint {
-    margin: 0;
-    font-size: 0.85em;
-    color: var(--text-secondary);
-}
-
-textarea {
-    min-height: 10vh;
-}
-
-.footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-.db-list {
+.maint-preview {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 6px;
 }
 
-.db {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr 1fr;
-    align-items: center;
-    gap: 10px;
-    background-color: var(--secondary);
-    border-radius: 5px;
-    padding: 7px 10px;
-    font-size: 0.9em;
-}
-
-.db-name {
+.maint-preview__text {
     margin: 0;
-    font-weight: 600;
-    display: flex;
+    white-space: pre-line;
+}
+
+.maint-db-icon {
+    display: inline-flex;
     align-items: center;
-    gap: 5px;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm);
+    background-color: color-mix(in srgb, var(--owner-color) 15%, transparent);
+    color: var(--owner-color);
 }
 
-.db-meta {
-    color: var(--text-secondary);
-    text-align: right;
-}
-
-.mono {
-    font-family: monospace;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .cards {
-        grid-template-columns: 1fr;
-    }
-
-    .db {
-        grid-template-columns: 1fr 1fr;
-    }
+.maint-db-meta {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
 }
 </style>
diff --git a/src/components/Admin/AdminMeter.vue b/src/components/Admin/AdminMeter.vue
new file mode 100644
index 0000000..4d7f66b
--- /dev/null
+++ b/src/components/Admin/AdminMeter.vue
@@ -0,0 +1,67 @@
+<template>
+    <span :class="['adm-meter', `adm-tone-${toneName}`]">
+        <span v-if="showValue" class="adm-meter__top" aria-hidden="true">
+            <span>{{ label }}</span>
+            <span class="adm-meter__value">{{ valueText || percentText }}</span>
+        </span>
+        <span class="adm-meter__track" role="meter" aria-valuemin="0" aria-valuemax="100"
+            :aria-valuenow="percent" :aria-valuetext="valueText || percentText" :aria-label="label">
+            <span class="adm-meter__fill" :style="{ width: percent + '%' }"></span>
+        </span>
+    </span>
+</template>
+<script setup>
+/**
+ * Jauge horizontale (mémoire, quota…) : `value` entre 0 et 1.
+ * Ton 'auto' : rose, orange au-delà de 75 %, rouge au-delà de 90 % (occupation).
+ * Ton 'auto-inverse' : vert, orange sous 80 %, rouge sous 50 % (taux de réussite).
+ */
+import { computed } from 'vue';
+import { normalizeTone } from './adminUi';
+import './admin.scss';
+
+const props = defineProps({
+    value: {
+        type: Number,
+        default: 0
+    },
+    // Nom accessible (et libellé visible si showValue)
+    label: {
+        type: String,
+        required: true
+    },
+    // Texte remplaçant le pourcentage ("1,2 Go / 4 Go")
+    valueText: {
+        type: String,
+        default: null
+    },
+    tone: {
+        type: String,
+        default: 'auto'
+    },
+    showValue: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const ratio = computed(() => {
+    const n = Number(props.value);
+    return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0;
+});
+
+const percent = computed(() => Math.round(ratio.value * 100));
+const percentText = computed(() => percent.value + " %");
+
+const toneName = computed(() => {
+    if (props.tone === 'auto-inverse') {
+        if (ratio.value < 0.5) return 'error';
+        if (ratio.value < 0.8) return 'warning';
+        return 'success';
+    }
+    if (props.tone !== 'auto') return normalizeTone(props.tone, 'main');
+    if (ratio.value >= 0.9) return 'error';
+    if (ratio.value >= 0.75) return 'warning';
+    return 'main';
+});
+</script>
diff --git a/src/components/Admin/AdminMetrics.vue b/src/components/Admin/AdminMetrics.vue
index c7529c6..51812a1 100644
--- a/src/components/Admin/AdminMetrics.vue
+++ b/src/components/Admin/AdminMetrics.vue
@@ -1,88 +1,141 @@
 <template>
     <AdminSection title="📈 Métriques" subtitle="Statistiques d'utilisation enregistrées par Subsonics">
         <template #actions>
-            <Button v-if="invalidCount" icon="fa-solid fa-wrench" :disabled="repairing" @click="repair()">
-                Réparer {{ invalidCount }} valeur(s) invalide(s)
-            </Button>
-            <Button icon="fa-solid fa-rotate" :disabled="loading" @click="load()">Actualiser</Button>
+            <Button variant="secondary" icon="fa-solid fa-rotate" :loading="loading" @click="load()">Actualiser</Button>
         </template>
 
         <AdminState :loading="loading && !data" :error="!data ? error : null" :empty="!data" empty-text="Aucune métrique" @retry="load()">
-            <div class="stats">
-                <AdminStat label="Commandes" :value="safeNum(data.global?.commands)" icon="fa-solid fa-terminal" color="var(--main)"/>
-                <AdminStat label="Titres joués" :value="safeNum(data.global?.musicPlayed)" icon="fa-solid fa-music" color="var(--admin-color)"/>
-                <AdminStat label="Temps d'écoute" :value="formatUptime(data.global?.secondsPlayed)" icon="fa-solid fa-clock" color="var(--owner-color)"/>
+            <AdminBanner v-if="invalidCount" tone="warning" :title="invalidCount + ' valeur(s) invalide(s)'">
+                Des compteurs contiennent une valeur non numérique (fichier modifié à la main ou écriture interrompue).
+                La réparation les remet à zéro.
+                <template #action>
+                    <Button size="sm" icon="fa-solid fa-wrench" :loading="repairing" @click="repair()">Réparer</Button>
+                </template>
+            </AdminBanner>
+
+            <AdminStatRow :columns="4" label="Totaux">
+                <AdminStat label="Commandes" :value="formatCount(data.global?.commands)" icon="fa-solid fa-terminal" tone="main"/>
+                <AdminStat label="Titres joués" :value="formatCount(data.global?.musicPlayed)" icon="fa-solid fa-music" tone="admin"
+                    :sub="byGuild.length + ' serveur(s) suivi(s)'"/>
+                <AdminStat label="Temps d'écoute" :value="formatUptime(data.global?.secondsPlayed)" icon="fa-solid fa-clock" tone="info"/>
                 <AdminStat label="Valeurs invalides" :value="invalidCount" icon="fa-solid fa-triangle-exclamation"
-                    :color="invalidCount ? 'var(--text-error)' : 'var(--text-success)'"/>
-            </div>
+                    :tone="invalidCount ? 'error' : 'success'" :sub="safeNum(data.raw?.length) + ' compteur(s) au total'"/>
+            </AdminStatRow>
 
-            <Glider v-model="tab">
-                <span>Par serveur</span>
-                <span>Par utilisateur</span>
-                <span>Brutes</span>
-            </Glider>
+            <AdminGrid>
+                <!-- Par serveur -->
+                <AdminCard title="Par serveur" subtitle="Classés par nombre de commandes" icon="fa-solid fa-server" tone="warning"
+                    :span="7" :span-md="12" :flush="byGuild.length > 0">
+                    <p v-if="!byGuild.length" class="adm-hint">Aucune statistique par serveur.</p>
+                    <AdminList v-else divided label="Statistiques par serveur">
+                        <AdminRow v-for="(guild, index) in shownGuilds" :key="guild.guildId" as="li"
+                            :title="guild.guildName || 'Serveur inconnu (quitté ?)'" :subtitle="guild.guildId">
+                            <template #media>
+                                <span class="met-rank" aria-hidden="true">{{ index + 1 }}</span>
+                            </template>
+                            <AdminMeter class="met-share" :value="ratio(guild.commands, maxGuildCommands)" tone="main"
+                                :label="'Part des commandes de ' + (guild.guildName || guild.guildId)"/>
+                            <template #meta>
+                                <span class="met-value" title="Commandes"><Icon icon="fa-solid fa-terminal" aria-hidden="true"/><span class="sr-only">Commandes :</span> {{ formatCount(guild.commands) }}</span>
+                                <span class="met-value" title="Titres joués"><Icon icon="fa-solid fa-music" aria-hidden="true"/><span class="sr-only">Titres joués :</span> {{ formatCount(guild.musicPlayed) }}</span>
+                                <span class="met-value" title="Temps d'écoute"><Icon icon="fa-solid fa-clock" aria-hidden="true"/><span class="sr-only">Temps d'écoute :</span> {{ formatUptime(guild.secondsPlayed) }}</span>
+                            </template>
+                        </AdminRow>
+                    </AdminList>
+                    <template v-if="byGuild.length > LIMIT" #footer>
+                        <span class="adm-footer-meta">{{ shownGuilds.length }} / {{ byGuild.length }} serveur(s)</span>
+                        <Button size="sm" variant="ghost" :icon="allGuilds ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"
+                            :aria-expanded="allGuilds ? 'true' : 'false'" @click="allGuilds = !allGuilds">
+                            {{ allGuilds ? "Réduire" : "Tout afficher" }}
+                        </Button>
+                    </template>
+                </AdminCard>
 
-            <div v-if="tab === 0" class="list">
-                <Info v-if="!byGuild.length" secondary>Aucune statistique par serveur</Info>
-                <div v-for="guild in byGuild" :key="guild.guildId" class="metric">
-                    <div class="metric-info">
-                        <p class="metric-name">{{ guild.guildName || "Serveur inconnu (quitté ?)" }}</p>
-                        <p class="metric-id">{{ guild.guildId }}</p>
-                    </div>
-                    <div class="metric-values">
-                        <span title="Commandes"><Icon icon="fa-solid fa-terminal"/> {{ safeNum(guild.commands) }}</span>
-                        <span title="Titres joués"><Icon icon="fa-solid fa-music"/> {{ safeNum(guild.musicPlayed) }}</span>
-                        <span title="Temps d'écoute"><Icon icon="fa-solid fa-clock"/> {{ formatUptime(guild.secondsPlayed) }}</span>
-                    </div>
-                </div>
-            </div>
+                <!-- Par utilisateur -->
+                <AdminCard title="Par utilisateur" subtitle="Commandes envoyées" icon="fa-solid fa-user" tone="admin"
+                    :span="5" :span-md="12" :flush="byUser.length > 0">
+                    <p v-if="!byUser.length" class="adm-hint">Aucune statistique par utilisateur.</p>
+                    <AdminList v-else divided label="Commandes par utilisateur">
+                        <AdminRow v-for="(user, index) in shownUsers" :key="user.key" as="li" dense>
+                            <template #media>
+                                <span class="met-rank" aria-hidden="true">{{ index + 1 }}</span>
+                            </template>
+                            <template #title><span class="adm-mono">{{ user.key }}</span></template>
+                            <template #meta>
+                                <span class="met-value"><Icon icon="fa-solid fa-terminal" aria-hidden="true"/><span class="sr-only">Commandes :</span> {{ formatCount(user.commands) }}</span>
+                            </template>
+                        </AdminRow>
+                    </AdminList>
+                    <template v-if="byUser.length > LIMIT" #footer>
+                        <span class="adm-footer-meta">{{ shownUsers.length }} / {{ byUser.length }} utilisateur(s)</span>
+                        <Button size="sm" variant="ghost" :icon="allUsers ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"
+                            :aria-expanded="allUsers ? 'true' : 'false'" @click="allUsers = !allUsers">
+                            {{ allUsers ? "Réduire" : "Tout afficher" }}
+                        </Button>
+                    </template>
+                </AdminCard>
 
-            <div v-else-if="tab === 1" class="list">
-                <Info v-if="!byUser.length" secondary>Aucune statistique par utilisateur</Info>
-                <div v-for="user in byUser" :key="user.key" class="metric">
-                    <div class="metric-info">
-                        <p class="metric-name">{{ user.key }}</p>
-                    </div>
-                    <p class="metric-value"><Icon icon="fa-solid fa-terminal"/> {{ safeNum(user.commands) }}</p>
-                </div>
-            </div>
-
-            <template v-else>
-                <input type="text" v-model="rawSearch" placeholder="Filtrer les métriques brutes"/>
-                <div class="list">
-                    <Info v-if="!raw.length" secondary>Aucune métrique brute</Info>
-                    <div v-for="metric in raw" :key="metric.name" :class="['metric', { invalid: metric.invalid }]">
-                        <Icon class="metric-icon" :icon="iconOf(metric.name)"/>
-                        <div class="metric-info">
-                            <p class="metric-name">{{ metric.description || metric.name }}</p>
-                            <p class="metric-id">{{ metric.name }}</p>
-                        </div>
-                        <Tag v-if="metric.invalid" color="var(--text-error)" icon="fa-solid fa-triangle-exclamation">Invalide</Tag>
-                        <p class="metric-value">{{ metric.name.includes('Seconds') ? formatUptime(metric.value) : safeNum(metric.value) }}</p>
-                        <IconAction title="Supprimer cette métrique" icon="fa-solid fa-trash-can" color="var(--text-tertiary)" size="1em" @click="removeMetric(metric)"/>
-                    </div>
-                </div>
-            </template>
+                <!-- Valeurs brutes -->
+                <AdminCard title="Compteurs bruts" subtitle="Toutes les valeurs de metrics.json, invalides en premier"
+                    icon="fa-solid fa-table-list" :span="12" collapsible persist-key="metrics-raw" :default-open="invalidCount > 0">
+                    <AdminToolbar v-model:search="rawSearch" search-label="Filtrer les compteurs" search-placeholder="Filtrer par nom ou description…">
+                        <AdminPills v-model="rawFilter" label="Afficher" :options="rawFilterOptions"/>
+                    </AdminToolbar>
+                    <p v-if="!raw.length" class="adm-hint" role="status">
+                        {{ data.raw?.length ? "Aucun compteur ne correspond au filtre." : "Aucune métrique brute." }}
+                    </p>
+                    <AdminList v-else label="Compteurs bruts">
+                        <AdminRow v-for="metric in raw" :key="metric.name" as="li" dense :tone="metric.invalid ? 'error' : 'default'"
+                            :title="metric.description || metric.name" :subtitle="metric.description && metric.description !== metric.name ? metric.name : null">
+                            <template #media>
+                                <span class="met-icon" aria-hidden="true"><Icon :icon="iconOf(metric.name)"/></span>
+                            </template>
+                            <template #meta>
+                                <Tag v-if="metric.invalid" tone="error" icon="fa-solid fa-triangle-exclamation">Invalide</Tag>
+                                <span class="adm-chip">{{ String(metric.name).includes('Seconds') ? formatUptime(metric.value) : formatCount(metric.value) }}</span>
+                            </template>
+                            <template #actions>
+                                <IconAction :label="'Supprimer la métrique ' + metric.name" icon="fa-solid fa-trash-can"
+                                    color="var(--text-tertiary)" size="1em" @click="removeMetric(metric)"/>
+                            </template>
+                        </AdminRow>
+                    </AdminList>
+                </AdminCard>
+            </AdminGrid>
         </AdminState>
 
         <AdminConfirm ref="confirmRef"/>
     </AdminSection>
 </template>
 <script setup>
+/**
+ * Section « Métriques » : /ADMIN/METRICS ({ global, byGuild, byUser, raw }),
+ * /ADMIN/METRICS/REPAIR et /ADMIN/METRICS/DELETE {name}.
+ */
 import { computed, onMounted, ref } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { adminRequest, describeError } from '@/utils/AdminRequest';
 import Button from '@/components/UI/Button.vue';
-import Glider from '@/components/UI/Glider.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
 import IconAction from '@/components/UI/IconAction.vue';
 import AdminSection from './AdminSection.vue';
+import AdminGrid from './AdminGrid.vue';
+import AdminCard from './AdminCard.vue';
 import AdminState from './AdminState.vue';
+import AdminStatRow from './AdminStatRow.vue';
 import AdminStat from './AdminStat.vue';
+import AdminMeter from './AdminMeter.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminToolbar from './AdminToolbar.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
+import AdminPills from './AdminPills.vue';
 import AdminConfirm from './AdminConfirm.vue';
 import { safeNum, formatUptime } from './adminFormat';
 
+// Lignes affichées par défaut dans les classements
+const LIMIT = 10;
+
 const adminStore = useAdminStore();
 const confirmRef = ref(null);
 
@@ -90,25 +143,46 @@ const data = ref(null);
 const loading = ref(false);
 const error = ref(null);
 const repairing = ref(false);
-const tab = ref(0);
 const rawSearch = ref("");
+const rawFilter = ref("all");
+const allGuilds = ref(false);
+const allUsers = ref(false);
 
 const byGuild = computed(() => [...(data.value?.byGuild || [])].sort((a, b) => safeNum(b.commands) - safeNum(a.commands)));
 const byUser = computed(() => [...(data.value?.byUser || [])].sort((a, b) => safeNum(b.commands) - safeNum(a.commands)));
+const shownGuilds = computed(() => (allGuilds.value ? byGuild.value : byGuild.value.slice(0, LIMIT)));
+const shownUsers = computed(() => (allUsers.value ? byUser.value : byUser.value.slice(0, LIMIT)));
+const maxGuildCommands = computed(() => Math.max(1, ...byGuild.value.map(g => safeNum(g.commands))));
 const invalidCount = computed(() => (data.value?.raw || []).filter(m => m.invalid).length);
 
+const rawFilterOptions = computed(() => [
+    { value: "all", label: "Tous", count: safeNum(data.value?.raw?.length) },
+    { value: "invalid", label: "Invalides", icon: "fa-solid fa-triangle-exclamation", color: "var(--text-error)", count: invalidCount.value }
+]);
+
 const raw = computed(() => {
     const query = rawSearch.value.trim().toLowerCase();
     // Les valeurs invalides en premier, pour les repérer immédiatement
-    const list = [...(data.value?.raw || [])].sort((a, b) => Number(!!b.invalid) - Number(!!a.invalid) || a.name.localeCompare(b.name));
+    let list = [...(data.value?.raw || [])].sort((a, b) => Number(!!b.invalid) - Number(!!a.invalid) || String(a.name).localeCompare(String(b.name)));
+    if (rawFilter.value === "invalid") list = list.filter(m => m.invalid);
     if (!query) return list;
-    return list.filter(m => m.name.toLowerCase().includes(query) || (m.description || "").toLowerCase().includes(query));
+    return list.filter(m => String(m.name).toLowerCase().includes(query) || String(m.description || "").toLowerCase().includes(query));
 });
 
+const numberFormat = new Intl.NumberFormat("fr-FR");
+function formatCount(value) {
+    return numberFormat.format(safeNum(value));
+}
+
+function ratio(value, max) {
+    return max > 0 ? safeNum(value) / max : 0;
+}
+
 function iconOf(name) {
-    if (name.includes("Commands") || name.includes("Command")) return "fa-solid fa-terminal";
-    if (name.includes("Music")) return "fa-solid fa-music";
-    if (name.includes("Seconds")) return "fa-solid fa-clock";
+    const text = String(name);
+    if (text.includes("Command")) return "fa-solid fa-terminal";
+    if (text.includes("Music")) return "fa-solid fa-music";
+    if (text.includes("Seconds")) return "fa-solid fa-clock";
     return "fa-solid fa-chart-bar";
 }
 
@@ -127,6 +201,7 @@ async function load() {
 }
 
 async function repair() {
+    if (repairing.value) return;
     repairing.value = true;
     try {
         const result = await adminRequest("/ADMIN/METRICS/REPAIR");
@@ -160,88 +235,50 @@ async function removeMetric(metric) {
 onMounted(() => load());
 </script>
 <style scoped>
-.stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-}
-
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-p {
-    margin: 0;
-}
-
-.metric {
-    display: flex;
-    justify-content: space-between;
+.met-rank {
+    display: inline-flex;
     align-items: center;
-    gap: 10px;
-    padding: 10px;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-}
-
-.metric.invalid {
-    box-shadow: inset 3px 0 0 var(--text-error);
-}
-
-.metric-icon {
-    background-color: var(--secondary);
-    padding: 15px;
-    border-radius: 100%;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-}
-
-.metric-info {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-}
-
-.metric-name {
-    font-weight: bold;
-    color: var(--text);
-}
-
-.metric-id {
+    justify-content: center;
+    min-width: 26px;
+    height: 26px;
+    padding: 0 4px;
+    box-sizing: border-box;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
     color: var(--text-secondary);
-    font-size: 0.7em;
-    word-break: break-all;
+    font-size: 0.8em;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
 }
 
-.metric-value {
-    background-color: var(--secondary);
-    padding: 5px;
-    border-radius: 5px;
-    font-family: monospace;
+.met-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: var(--radius-sm);
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+    color: var(--text-secondary);
+    font-size: 0.85em;
+}
+
+.met-value {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-variant-numeric: tabular-nums;
     white-space: nowrap;
 }
 
-.metric-values {
-    display: flex;
-    gap: 15px;
-    font-family: monospace;
-    font-size: 0.9em;
-    flex-wrap: wrap;
-    justify-content: flex-end;
+.met-value > svg {
+    color: var(--text-tertiary);
+    font-size: 0.85em;
 }
 
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .metric {
-        flex-wrap: wrap;
-    }
-
-    .metric-values {
-        width: 100%;
-        justify-content: space-between;
-    }
+/* Jauge de part sous le nom du serveur */
+.met-share {
+    max-width: 260px;
+    margin-top: 2px;
 }
 </style>
diff --git a/src/components/Admin/AdminOverview.vue b/src/components/Admin/AdminOverview.vue
index bfd4ceb..8585ff5 100644
--- a/src/components/Admin/AdminOverview.vue
+++ b/src/components/Admin/AdminOverview.vue
@@ -1,167 +1,200 @@
 <template>
-    <AdminSection title="📊 Vue d'ensemble" subtitle="État général de Subsonics, rafraîchi automatiquement toutes les 10 secondes">
+    <AdminSection title="Vue d'ensemble" subtitle="État général de Subsonics, rafraîchi automatiquement toutes les 10 secondes">
         <template #actions>
-            <Button icon="fa-solid fa-rotate" :disabled="adminStore.overviewLoading" @click="adminStore.fetchOverview()">Actualiser</Button>
+            <Button variant="secondary" icon="fa-solid fa-rotate" :loading="adminStore.overviewLoading" @click="adminStore.fetchOverview()">Actualiser</Button>
         </template>
 
         <AdminState :loading="!data && adminStore.overviewLoading" :error="!data ? adminStore.overviewError : null"
             :empty="!data" empty-text="Aucune donnée reçue pour le moment" @retry="adminStore.fetchOverview()">
 
-            <Error v-if="data.logs?.interrupted" class="banner">
-                Le journal « {{ data.logs.current }} » est interrompu : plus rien n'est écrit dans le fichier de logs depuis la dernière erreur fatale.
-            </Error>
+            <!-- Alertes : ce qui demande une action, avec un raccourci vers la section concernée -->
+            <AdminBanner v-for="alert in alerts" :key="alert.id" :tone="alert.tone" :title="alert.title">
+                {{ alert.text }}
+                <template v-if="alert.to" #action>
+                    <Button size="sm" variant="secondary" icon-right="fa-solid fa-arrow-right" @click="adminStore.setSection(alert.to)">{{ alert.action }}</Button>
+                </template>
+            </AdminBanner>
 
-            <div class="stats">
-                <AdminStat label="Disponibilité" :value="formatUptime(uptime)" icon="fa-solid fa-clock" color="var(--text-success)"
+            <AdminStatRow :columns="4" label="Chiffres clés">
+                <AdminStat label="Disponibilité" :value="formatUptime(uptime)" icon="fa-solid fa-clock" tone="success"
                     :sub="'Depuis le ' + formatDate(data.app?.startedAt)"/>
-                <AdminStat label="Players connectés" :value="safeNum(data.players?.connected)" icon="fa-solid fa-music" color="var(--main)"
+                <AdminStat label="Players connectés" :value="safeNum(data.players?.connected)" icon="fa-solid fa-music" tone="main" to="players"
                     :sub="safeNum(data.players?.playing) + ' en lecture · ' + safeNum(data.players?.paused) + ' en pause'"/>
-                <AdminStat label="Utilisateurs en ligne" :value="safeNum(data.web?.usersOnline)" icon="fa-solid fa-users" color="var(--admin-color)"
-                    :sub="safeNum(data.web?.sockets) + ' socket(s) ouvert(s)'"/>
-                <AdminStat label="Serveurs" :value="safeNum(data.discord?.guildCount)" icon="fa-solid fa-server" color="var(--owner-color)"
+                <AdminStat label="Utilisateurs en ligne" :value="safeNum(data.web?.usersOnline)" icon="fa-solid fa-users" tone="admin" to="users"
+                    :sub="safeNum(data.web?.sockets) + ' connexion(s) web · ' + safeNum(data.users?.registered) + ' inscrit(s)'"/>
+                <AdminStat label="Serveurs" :value="safeNum(data.discord?.guildCount)" icon="fa-solid fa-server" tone="warning" to="servers"
                     :sub="safeNum(data.discord?.voiceConnections) + ' connexion(s) vocale(s)'"/>
-            </div>
+            </AdminStatRow>
 
-            <div class="cards">
-                <AdminCard title="Application" icon="fa-solid fa-cube" color="var(--main)">
-                    <AdminKv label="Nom" :value="data.app?.name"/>
+            <!-- Services externes : un coup d'œil sur ce qui fait tourner la musique -->
+            <AdminGrid title="Services" icon="fa-solid fa-plug">
+                <AdminCard title="Discord" icon="fa-brands fa-discord" color="#5865F2" :span="4" :span-md="6" :span-sm="12"
+                    :subtitle="data.discord?.ready ? 'Passerelle connectée' : 'Passerelle indisponible'">
+                    <template #actions>
+                        <Tag :tone="data.discord?.ready ? 'success' : 'error'" :icon="data.discord?.ready ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'">
+                            {{ data.discord?.ready ? "Prêt" : "Non prêt" }}
+                        </Tag>
+                    </template>
+                    <div v-if="data.discord?.tag" class="bot">
+                        <img v-if="data.discord?.avatar" class="adm-avatar" :src="data.discord.avatar" alt="" referrerpolicy="no-referrer"/>
+                        <span class="bot__info">
+                            <span class="bot__tag">{{ data.discord.tag }}</span>
+                            <span class="adm-hint adm-mono">{{ data.discord.id }}</span>
+                        </span>
+                    </div>
+                    <AdminKv label="Latence" mono :value="safeNum(data.discord?.ping) + ' ms'"/>
+                    <AdminKv label="Connecté" :value="formatRelative(data.discord?.readyAt, nowDate)"/>
+                    <AdminKv label="Activité" :value="data.discord?.activity || 'Aucune'"/>
+                </AdminCard>
+
+                <AdminCard title="WARP" icon="fa-solid fa-cloud" tone="warning" :span="4" :span-md="6" :span-sm="12"
+                    subtitle="Proxy Cloudflare des lectures YouTube">
+                    <template #actions>
+                        <Tag :tone="warpState.tone" :icon="warpState.icon">{{ warpState.label }}</Tag>
+                    </template>
+                    <AdminKv label="Mode" mono :value="data.warp?.warp || 'N/A'"/>
+                    <AdminKv label="IP de sortie" mono :value="data.warp?.ip || 'Inconnue'"/>
+                    <AdminKv label="Dernière vérification" :value="formatRelative(data.warp?.lastCheck, nowDate)"/>
+                    <template #footer>
+                        <Button size="sm" variant="ghost" icon-right="fa-solid fa-arrow-right" @click="adminStore.setSection('warp')">Gérer WARP</Button>
+                    </template>
+                </AdminCard>
+
+                <AdminCard title="YouTube / yt-dlp" icon="fa-brands fa-youtube" tone="error" :span="4" :span-md="12" :span-sm="12"
+                    :subtitle="data.ytdlp?.version ? 'yt-dlp ' + data.ytdlp.version : 'Version inconnue'">
+                    <template #actions>
+                        <Tag v-if="data.ytdlp?.updating" tone="info" icon="fa-solid fa-spinner">Mise à jour…</Tag>
+                        <Tag v-else :color="ytAccount.color" :icon="ytAccount.icon">{{ ytAccount.label }}</Tag>
+                    </template>
+                    <AdminMeter v-if="ytSuccess !== null" :value="ytSuccess" show-value tone="auto-inverse"
+                        label="Lectures récentes réussies" :value-text="Math.round(ytSuccess * 100) + ' % sur ' + safeNum(data.ytdlp?.recentCount)"/>
+                    <AdminKv v-if="data.ytdlp?.cookies?.present" label="Cookies importés" :value="formatRelative(data.ytdlp?.cookies?.importedAt ?? data.ytdlp?.cookies?.updatedAt, nowDate)"/>
+                    <AdminKv label="Processus actifs" mono :value="safeNum(data.ytdlp?.activeProcesses)"/>
+                    <AdminKv label="Dernier échec">
+                        <template v-if="data.ytdlp?.lastFailure">
+                            <span>{{ youtubeClass(data.ytdlp.lastFailure.cls) }}</span>
+                            <span class="adm-muted">· {{ formatRelative(data.ytdlp.lastFailure.at, nowDate) }}</span>
+                        </template>
+                        <span v-else class="adm-muted">Aucun</span>
+                    </AdminKv>
+                    <template #footer>
+                        <Button size="sm" variant="ghost" icon-right="fa-solid fa-arrow-right" @click="adminStore.setSection('youtube')">
+                            {{ ytAccount.key === 'valid' ? "Gérer YouTube" : "Connecter un compte YouTube" }}
+                        </Button>
+                    </template>
+                </AdminCard>
+            </AdminGrid>
+
+            <!-- Ressources du processus et de la machine -->
+            <AdminGrid title="Ressources" icon="fa-solid fa-microchip">
+                <AdminCard title="Mémoire du processus" icon="fa-solid fa-memory" tone="info" :span="4" :span-md="6" :span-sm="12">
+                    <!-- Le tas V8 est souvent presque plein (il grandit à la demande) : pas de couleur d'alerte -->
+                    <AdminMeter :value="ratio(data.memory?.heapUsed, data.memory?.heapTotal)" show-value tone="info" label="Tas JavaScript"
+                        :value-text="formatBytes(data.memory?.heapUsed) + ' / ' + formatBytes(data.memory?.heapTotal)"/>
+                    <AdminKv label="RSS" mono :value="formatBytes(data.memory?.rss)"/>
+                    <AdminKv label="Externe" mono :value="formatBytes(data.memory?.external)"/>
+                </AdminCard>
+
+                <AdminCard title="Système" icon="fa-solid fa-microchip" tone="warning" :span="4" :span-md="6" :span-sm="12"
+                    :subtitle="data.system?.hostname || null">
+                    <AdminMeter :value="ratio(usedMem, data.system?.totalmem)" show-value label="Mémoire système"
+                        :value-text="formatBytes(usedMem) + ' / ' + formatBytes(data.system?.totalmem)"/>
+                    <!-- os.loadavg() vaut toujours 0 sous Windows -->
+                    <AdminMeter v-if="data.app?.platform !== 'win32'" :value="loadRatio" show-value label="Charge (1 min)"
+                        :value-text="loadText"/>
+                    <AdminKv label="Charge 1 / 5 / 15 min" mono :value="(data.system?.loadavg || []).map(v => safeNum(v).toFixed(2)).join(' · ') || 'N/A'"/>
+                </AdminCard>
+
+                <AdminCard title="Application" icon="fa-solid fa-cube" tone="main" :span="4" :span-md="12" :span-sm="12"
+                    :subtitle="data.app?.name || null">
                     <AdminKv label="Version" mono :value="data.app?.version"/>
                     <AdminKv label="Node.js" mono :value="data.app?.node"/>
                     <AdminKv label="Plateforme" :value="data.app?.platform"/>
                     <AdminKv label="PID" mono :value="data.app?.pid"/>
                     <AdminKv label="Gestionnaire">
-                        <Tag :color="data.app?.pm2 ? 'var(--text-success)' : 'var(--text-secondary)'">{{ data.app?.pm2 ? "pm2" : "Docker / node" }}</Tag>
+                        <Tag :tone="data.app?.pm2 ? 'success' : 'default'">{{ data.app?.pm2 ? "pm2" : "Docker / node" }}</Tag>
                     </AdminKv>
                 </AdminCard>
+            </AdminGrid>
 
-                <AdminCard title="Mémoire" icon="fa-solid fa-memory" color="var(--admin-color)">
-                    <AdminKv label="RSS" mono :value="formatBytes(data.memory?.rss)"/>
-                    <AdminKv label="Tas utilisé" mono :value="formatBytes(data.memory?.heapUsed) + ' / ' + formatBytes(data.memory?.heapTotal)"/>
-                    <div class="gauge"><div class="gauge-fill" :style="{ width: percent(data.memory?.heapUsed, data.memory?.heapTotal) + '%' }"></div></div>
-                    <AdminKv label="Externe" mono :value="formatBytes(data.memory?.external)"/>
-                </AdminCard>
-
-                <AdminCard title="Système" icon="fa-solid fa-microchip" color="var(--text-warning)">
-                    <AdminKv label="Hôte" mono :value="data.system?.hostname"/>
-                    <AdminKv label="Processeurs" :value="safeNum(data.system?.cpus) + ' cœur(s)'"/>
-                    <AdminKv label="Charge (1/5/15 min)" mono :value="(data.system?.loadavg || []).map(v => safeNum(v).toFixed(2)).join(' · ') || 'N/A'"/>
-                    <AdminKv label="Mémoire système" mono :value="formatBytes(usedMem) + ' / ' + formatBytes(data.system?.totalmem)"/>
-                    <div class="gauge"><div class="gauge-fill" :style="{ width: percent(usedMem, data.system?.totalmem) + '%' }"></div></div>
-                </AdminCard>
-
-                <AdminCard title="Discord" icon="fa-brands fa-discord" color="#5865F2">
-                    <template #header>
-                        <Tag :color="data.discord?.ready ? 'var(--text-success)' : 'var(--text-error)'">{{ data.discord?.ready ? "Prêt" : "Non prêt" }}</Tag>
-                    </template>
-                    <div v-if="data.discord?.tag" class="bot-line">
-                        <img v-if="data.discord?.avatar" class="bot-avatar" :src="data.discord.avatar" alt="Avatar du bot"/>
-                        <div>
-                            <p class="bot-tag">{{ data.discord.tag }}</p>
-                            <p class="bot-id">{{ data.discord.id }}</p>
-                        </div>
-                    </div>
-                    <AdminKv label="Latence" mono :value="safeNum(data.discord?.ping) + ' ms'"/>
-                    <AdminKv label="Connecté depuis" :value="formatDate(data.discord?.readyAt)"/>
-                    <AdminKv label="Activité" :value="data.discord?.activity || 'Aucune'"/>
-                </AdminCard>
-
-                <AdminCard title="Web" icon="fa-solid fa-globe" color="var(--admin-color)">
-                    <AdminKv label="Sockets ouverts" mono :value="safeNum(data.web?.sockets)"/>
-                    <AdminKv label="Utilisateurs en ligne" mono :value="safeNum(data.web?.usersOnline)"/>
-                    <AdminKv label="Administrateurs en ligne" mono :value="safeNum(data.web?.adminsOnline)"/>
-                    <AdminKv label="Sessions OAuth en attente" mono :value="safeNum(data.web?.pendingSessions)"/>
-                </AdminCard>
-
-                <AdminCard title="Players" icon="fa-solid fa-music" color="var(--main)">
-                    <AdminKv label="Connectés" mono :value="safeNum(data.players?.connected)"/>
-                    <AdminKv label="En lecture" mono :value="safeNum(data.players?.playing)"/>
-                    <AdminKv label="En pause" mono :value="safeNum(data.players?.paused)"/>
-                    <AdminKv label="Inactifs" mono :value="safeNum(data.players?.idle)"/>
-                </AdminCard>
-
-                <AdminCard title="Comptes" icon="fa-solid fa-id-card" color="var(--mod-color)">
+            <!-- Activité et données -->
+            <AdminGrid title="Activité et données" icon="fa-solid fa-chart-simple">
+                <AdminCard title="Comptes" icon="fa-solid fa-id-card" tone="admin" :span="4" :span-md="6" :span-sm="12">
                     <AdminKv label="Inscrits" mono :value="safeNum(data.users?.registered)"/>
                     <AdminKv label="Administrateurs" mono :value="safeNum(data.users?.admins)"/>
+                    <AdminKv label="Administrateurs en ligne" mono :value="safeNum(data.web?.adminsOnline)"/>
                     <AdminKv label="Bannis" mono :value="safeNum(data.users?.fullBanned)"/>
                     <AdminKv label="Supprimés" mono :value="safeNum(data.users?.deleted)"/>
-                </AdminCard>
-
-                <AdminCard title="WARP" icon="fa-solid fa-cloud" color="var(--owner-color)">
-                    <template #header>
-                        <Tag v-if="!data.warp?.configured" color="var(--text-secondary)">Non configuré</Tag>
-                        <Tag v-else :color="data.warp?.healthy ? 'var(--text-success)' : 'var(--text-error)'">{{ data.warp?.healthy ? "Opérationnel" : "Injoignable" }}</Tag>
+                    <AdminKv label="Sessions OAuth en attente" mono :value="safeNum(data.web?.pendingSessions)"/>
+                    <template #footer>
+                        <Button size="sm" variant="ghost" icon-right="fa-solid fa-arrow-right" @click="adminStore.setSection('users')">Voir les comptes</Button>
                     </template>
-                    <AdminKv label="Mode" mono :value="data.warp?.warp || 'N/A'"/>
-                    <AdminKv label="IP de sortie" mono :value="data.warp?.ip || 'Inconnue'"/>
-                    <AdminKv label="Dernière vérification" :value="formatRelative(data.warp?.lastCheck, nowDate)"/>
                 </AdminCard>
 
-                <AdminCard title="YouTube / yt-dlp" icon="fa-brands fa-youtube" color="var(--text-error)">
-                    <template #header>
-                        <Tag v-if="data.ytdlp?.updating" color="var(--admin-color)" icon="fa-solid fa-spinner">Mise à jour…</Tag>
-                    </template>
-                    <AdminKv label="Version" mono :value="data.ytdlp?.version || 'Inconnue'"/>
-                    <AdminKv label="Compte YouTube">
-                        <Tag :color="ytAccount.color" :icon="ytAccount.icon">{{ ytAccount.label }}</Tag>
-                    </AdminKv>
-                    <AdminKv v-if="data.ytdlp?.cookies?.present" label="Cookies importés" :value="formatRelative(data.ytdlp?.cookies?.importedAt ?? data.ytdlp?.cookies?.updatedAt, nowDate)"/>
-                    <AdminKv label="Processus actifs" mono :value="safeNum(data.ytdlp?.activeProcesses)"/>
-                    <AdminKv v-if="data.ytdlp?.lastFailure" label="Dernier échec">
-                        <span>{{ youtubeClass(data.ytdlp.lastFailure.cls) }}</span>
-                        <span class="db-date">· {{ formatRelative(data.ytdlp.lastFailure.at, nowDate) }}</span>
-                    </AdminKv>
-                    <p v-if="data.ytdlp?.cookies?.invalidReason" class="yt-warning">{{ data.ytdlp.cookies.invalidReason }}</p>
-                    <Button class="small-btn" icon="fa-brands fa-youtube" @click="adminStore.setSection('youtube')">
-                        {{ ytAccount.key === 'valid' ? "Gérer YouTube" : "Connecter un compte YouTube" }}
-                    </Button>
-                </AdminCard>
-
-                <AdminCard title="Médias" icon="fa-solid fa-photo-film" color="var(--text-secondary)">
-                    <AdminKv label="Serveur de médias">
-                        <Tag :color="data.media?.configured ? 'var(--text-success)' : 'var(--text-secondary)'">{{ data.media?.configured ? "Configuré" : "Non configuré" }}</Tag>
-                    </AdminKv>
-                    <AdminKv label="Connexion">
-                        <Tag :color="data.media?.connected ? 'var(--text-success)' : 'var(--text-error)'">{{ data.media?.connected ? "Connecté" : "Déconnecté" }}</Tag>
-                    </AdminKv>
-                </AdminCard>
-
-                <AdminCard title="Statistiques" icon="fa-solid fa-chart-simple" color="var(--main)">
+                <AdminCard title="Statistiques" icon="fa-solid fa-chart-simple" tone="main" :span="4" :span-md="6" :span-sm="12"
+                    subtitle="Depuis la création des métriques">
                     <AdminKv label="Commandes" mono :value="safeNum(data.stats?.commands)"/>
                     <AdminKv label="Titres joués" mono :value="safeNum(data.stats?.musicPlayed)"/>
                     <AdminKv label="Temps d'écoute" mono :value="formatUptime(data.stats?.secondsPlayed)"/>
-                </AdminCard>
-
-                <AdminCard title="Logs" icon="fa-solid fa-scroll" color="var(--text-secondary)">
-                    <template #header>
-                        <Tag :color="data.logs?.interrupted ? 'var(--text-error)' : 'var(--text-success)'">{{ data.logs?.interrupted ? "Interrompu" : "Actif" }}</Tag>
+                    <template #footer>
+                        <Button size="sm" variant="ghost" icon-right="fa-solid fa-arrow-right" @click="adminStore.setSection('metrics')">Métriques</Button>
                     </template>
-                    <AdminKv label="Fichier courant" mono :value="data.logs?.current || 'Inconnu'"/>
-                    <Button class="small-btn" icon="fa-solid fa-scroll" @click="adminStore.setSection('logs')">Ouvrir les logs</Button>
                 </AdminCard>
 
-                <AdminCard title="Bases de données" icon="fa-solid fa-database" color="var(--admin-color)" class="wide">
-                    <Info v-if="!data.databases?.length" secondary>Aucune base de données</Info>
-                    <AdminKv v-for="db in data.databases" :key="db.name" :label="db.name">
-                        <span class="mono">{{ formatBytes(db.sizeBytes) }}</span>
-                        <span class="db-date">· {{ formatRelative(db.modifiedAt, nowDate) }}</span>
+                <AdminCard title="Journal et médias" icon="fa-solid fa-scroll" :span="4" :span-md="12" :span-sm="12">
+                    <AdminKv label="Journal">
+                        <Tag :tone="data.logs?.interrupted ? 'error' : 'success'">{{ data.logs?.interrupted ? "Interrompu" : "Actif" }}</Tag>
                     </AdminKv>
+                    <AdminKv label="Fichier courant" mono :value="data.logs?.current || 'Inconnu'"/>
+                    <AdminKv label="Serveur de médias">
+                        <Tag :tone="data.media?.configured ? 'success' : 'default'">{{ data.media?.configured ? "Configuré" : "Non configuré" }}</Tag>
+                    </AdminKv>
+                    <AdminKv v-if="data.media?.configured" label="Connexion">
+                        <Tag :tone="data.media?.connected ? 'success' : 'error'">{{ data.media?.connected ? "Connecté" : "Déconnecté" }}</Tag>
+                    </AdminKv>
+                    <template #footer>
+                        <Button size="sm" variant="ghost" icon-right="fa-solid fa-arrow-right" @click="adminStore.setSection('logs')">Ouvrir les logs</Button>
+                    </template>
                 </AdminCard>
-            </div>
+
+                <AdminCard title="Bases de données" icon="fa-solid fa-database" tone="info" :span="12" flush
+                    :subtitle="databases.length + ' fichier(s) · ' + formatBytes(databasesSize)">
+                    <AdminState :empty="!databases.length" :retry="false" empty-text="Aucune base de données" empty-icon="fa-solid fa-database">
+                        <AdminList divided label="Bases de données">
+                            <AdminRow v-for="db in databases" :key="db.name" dense :title="db.name">
+                                <template #media><span class="adm-cover db-icon"><Icon icon="fa-solid fa-file-lines" aria-hidden="true"/></span></template>
+                                <template #meta>
+                                    <span class="adm-mono">{{ formatBytes(db.sizeBytes) }}</span>
+                                    <span>modifiée {{ formatRelative(db.modifiedAt, nowDate) }}</span>
+                                </template>
+                            </AdminRow>
+                        </AdminList>
+                    </AdminState>
+                </AdminCard>
+            </AdminGrid>
         </AdminState>
     </AdminSection>
 </template>
 <script setup>
+/**
+ * Vue d'ensemble : alertes en tête, chiffres clés (cliquables vers leur section),
+ * puis trois catégories de widgets — Services, Ressources, Activité et données.
+ */
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import Button from '@/components/UI/Button.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
-import Error from '@/components/UI/Error.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminGrid from './AdminGrid.vue';
 import AdminCard from './AdminCard.vue';
 import AdminKv from './AdminKv.vue';
 import AdminStat from './AdminStat.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminMeter from './AdminMeter.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
 import { safeNum, formatBytes, formatUptime, formatDate, formatRelative, youtubeAccount, youtubeClass } from './adminFormat';
 
 const adminStore = useAdminStore();
@@ -180,12 +213,59 @@ const uptime = computed(() => safeNum(data.value?.app?.uptime) + Math.max(0, now
 
 const usedMem = computed(() => safeNum(data.value?.system?.totalmem) - safeNum(data.value?.system?.freemem));
 
-function percent(value, total) {
+function ratio(value, total) {
     const t = safeNum(total);
-    if (t <= 0) return 0;
-    return Math.min(100, Math.max(0, safeNum(value) / t * 100));
+    return t > 0 ? Math.min(1, Math.max(0, safeNum(value) / t)) : 0;
 }
 
+// Charge sur 1 min rapportée au nombre de cœurs (0 sous Windows, où os.loadavg() n'existe pas)
+const loadRatio = computed(() => ratio(data.value?.system?.loadavg?.[0], data.value?.system?.cpus));
+const loadText = computed(() => {
+    const cpus = safeNum(data.value?.system?.cpus);
+    return safeNum(data.value?.system?.loadavg?.[0]).toFixed(2) + " / " + cpus + " cœur(s)";
+});
+
+const warpState = computed(() => {
+    const warp = data.value?.warp;
+    if (!warp?.configured) return { label: "Non configuré", tone: 'default', icon: "fa-solid fa-circle-minus" };
+    return warp.healthy
+        ? { label: "Opérationnel", tone: 'success', icon: "fa-solid fa-circle-check" }
+        : { label: "Injoignable", tone: 'error', icon: "fa-solid fa-circle-xmark" };
+});
+
+// Part de lectures réussies parmi les tentatives récentes (null tant qu'il n'y en a pas)
+const ytSuccess = computed(() => {
+    const rate = Number(data.value?.ytdlp?.recentFailureRate);
+    if (!safeNum(data.value?.ytdlp?.recentCount) || !Number.isFinite(rate)) return null;
+    return Math.min(1, Math.max(0, 1 - rate));
+});
+
+const databases = computed(() => (Array.isArray(data.value?.databases) ? data.value.databases : []));
+const databasesSize = computed(() => databases.value.reduce((total, db) => total + safeNum(db.sizeBytes), 0));
+
+// Problèmes à traiter, du plus grave au moins grave
+const alerts = computed(() => {
+    const d = data.value;
+    if (!d) return [];
+    const list = [];
+    if (d.discord && !d.discord.ready) {
+        list.push({ id: 'discord', tone: 'error', title: "Discord n'est pas prêt", text: "Le bot n'est pas connecté à la passerelle Discord : les commandes et la lecture sont indisponibles." });
+    }
+    if (d.logs?.interrupted) {
+        list.push({ id: 'logs', tone: 'error', title: "Journal interrompu", text: `Plus rien n'est écrit dans « ${d.logs.current} » depuis la dernière erreur fatale.`, to: 'logs', action: "Ouvrir les logs" });
+    }
+    const yt = d.ytdlp;
+    if (safeNum(yt?.recentCount) >= 4 && Number(yt?.recentFailureRate) >= 0.5) {
+        list.push({ id: 'youtube-failing', tone: 'error', title: "La lecture YouTube échoue", text: `${Math.round(Number(yt.recentFailureRate) * 100)} % des ${safeNum(yt.recentCount)} dernières tentatives ont échoué.`, to: 'youtube', action: "Diagnostiquer" });
+    } else if (yt?.cookies?.present && !yt.cookies.valid) {
+        list.push({ id: 'youtube-cookies', tone: 'warning', title: "Compte YouTube à reconnecter", text: yt.cookies.invalidReason || "Les cookies YouTube ne sont plus valides.", to: 'youtube', action: "Reconnecter" });
+    }
+    if (d.warp?.configured && !d.warp.healthy) {
+        list.push({ id: 'warp', tone: 'warning', title: "WARP injoignable", text: "Les lectures passent par la route directe tant que le proxy ne répond pas.", to: 'warp', action: "Vérifier WARP" });
+    }
+    return list;
+});
+
 onMounted(() => {
     adminStore.fetchOverview();
     timer = setInterval(() => { nowDate.value = Date.now(); }, 1000);
@@ -196,87 +276,28 @@ onUnmounted(() => {
 });
 </script>
 <style scoped>
-.banner {
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-}
-
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 10px;
-    align-items: start;
-}
-
-.wide {
-    grid-column: 1 / -1;
-}
-
-.gauge {
-    height: 6px;
-    background-color: var(--secondary);
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.gauge-fill {
-    height: 100%;
-    background-color: var(--main);
-    border-radius: 5px;
-    transition: width 0.3s ease;
-}
-
-.bot-line {
+.bot {
     display: flex;
     align-items: center;
     gap: 10px;
-    margin-bottom: 5px;
+    min-width: 0;
 }
 
-.bot-line p {
-    margin: 0;
+.bot__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
 }
 
-.bot-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 100%;
-    background-color: var(--main);
-}
-
-.bot-tag {
+.bot__tag {
     font-weight: 600;
+    overflow-wrap: anywhere;
 }
 
-.bot-id {
-    font-size: 0.7em;
-    color: var(--text-secondary);
-    font-family: monospace;
-}
+.db-icon {
+    --adm-cover-size: 32px;
 
-.mono {
-    font-family: monospace;
-}
-
-.db-date {
-    color: var(--text-secondary);
-    font-size: 0.85em;
-}
-
-.small-btn {
-    margin-top: 5px;
-}
-
-.yt-warning {
-    margin: 0;
-    font-size: 0.8em;
-    color: var(--text-error);
+    font-size: 0.9em;
 }
 </style>
diff --git a/src/components/Admin/AdminPills.vue b/src/components/Admin/AdminPills.vue
index a3a0967..433c89e 100644
--- a/src/components/Admin/AdminPills.vue
+++ b/src/components/Admin/AdminPills.vue
@@ -1,16 +1,25 @@
 <template>
-    <div class="pills">
-        <button v-for="option in options" :key="option.value"
-            :class="['pill', { selected: isSelected(option.value) }]"
-            :style="isSelected(option.value) && option.color ? { backgroundColor: option.color, borderColor: option.color } : {}"
+    <div class="adm-pills" role="group" :aria-label="label || undefined">
+        <button v-for="option in options" :key="String(option.value)" type="button"
+            :class="['adm-pill', { 'adm-pill--selected': isSelected(option.value) }]"
+            :style="option.color ? { '--adm-pill-color': option.color } : null"
+            :aria-pressed="isSelected(option.value) ? 'true' : 'false'"
+            :disabled="option.disabled"
             @click="toggle(option.value)">
-            <Icon v-if="option.icon" :icon="option.icon"/>
-            {{ option.label }}
+            <Icon v-if="option.icon" :icon="option.icon" aria-hidden="true"/>
+            <span>{{ option.label }}</span>
+            <span v-if="hasCount(option)" class="adm-pill__count">{{ option.count }}</span>
         </button>
     </div>
 </template>
 <script setup>
-// Filtres en pilule (choix unique, ou multiple avec la prop `multiple`)
+/**
+ * Filtres en pilule (boutons bascule aria-pressed) : choix unique, ou multiple avec `multiple`.
+ * options : [{ value, label, icon?, color?, count?, disabled? }] ; `label` = nom accessible du groupe.
+ * Pour un choix exclusif de vue (onglets, portée), préférer UI/SegmentedControl.
+ */
+import './admin.scss';
+
 const props = defineProps({
     modelValue: {
         default: null
@@ -22,6 +31,10 @@ const props = defineProps({
     multiple: {
         type: Boolean,
         default: false
+    },
+    label: {
+        type: String,
+        default: null
     }
 });
 
@@ -31,6 +44,10 @@ function isSelected(value) {
     return props.multiple ? (props.modelValue || []).includes(value) : props.modelValue === value;
 }
 
+function hasCount(option) {
+    return option.count !== undefined && option.count !== null && option.count !== '';
+}
+
 function toggle(value) {
     if (!props.multiple) return emit('update:modelValue', value);
     const current = [...(props.modelValue || [])];
@@ -39,34 +56,3 @@ function toggle(value) {
     emit('update:modelValue', current);
 }
 </script>
-<style scoped>
-.pills {
-    display: flex;
-    gap: 5px;
-    flex-wrap: wrap;
-}
-
-.pill {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    border: 1px solid var(--quaternary);
-    background-color: transparent;
-    color: var(--text);
-    border-radius: 20px;
-    padding: 5px 10px;
-    font-size: 0.8em;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.pill:hover {
-    background-color: var(--tertiary);
-}
-
-.pill.selected {
-    background-color: var(--main);
-    border-color: var(--main);
-    color: #FFFFFF;
-}
-</style>
diff --git a/src/components/Admin/AdminPlayerCard.vue b/src/components/Admin/AdminPlayerCard.vue
index 50a2fdb..da080dc 100644
--- a/src/components/Admin/AdminPlayerCard.vue
+++ b/src/components/Admin/AdminPlayerCard.vue
@@ -1,110 +1,136 @@
 <template>
-    <Box level="second" padding="closed" no-shadow class="player-card">
-        <div class="card-header">
-            <div class="guild">
-                <ServerAvatar class="guild-avatar" :src="player.guildIcon" :server-id="player.guildId"/>
-                <div class="guild-info">
-                    <p class="guild-name">{{ player.guildName || "Serveur inconnu" }}</p>
-                    <p class="guild-id">{{ player.guildId }}</p>
-                </div>
-            </div>
+    <AdminCard as="article" :span="4" :span-md="6" :span-sm="12" :tone="issue ? 'error' : 'default'"
+        :title="player.guildName || 'Serveur inconnu'" :subtitle="channelName ? 'Salon « ' + channelName + ' »' : 'Aucun salon vocal'" :busy="busy" busy-label="Commande en cours…">
+        <template #media>
+            <ServerAvatar class="adm-avatar" :src="player.guildIcon" :server-id="player.guildId" alt=""/>
+        </template>
+        <template #actions>
             <Tag :color="status.color" :icon="status.icon">{{ status.label }}</Tag>
-        </div>
+        </template>
 
-        <div class="current">
-            <img v-if="player.current?.thumbnail" class="thumbnail" :src="player.current.thumbnail" alt="Miniature"/>
-            <div v-else class="thumbnail placeholder"><Icon icon="fa-solid fa-music"/></div>
-            <div class="current-info">
+        <div class="now">
+            <span class="adm-cover now__cover">
+                <img v-if="player.current?.thumbnail && !brokenCover" :src="player.current.thumbnail" alt="" referrerpolicy="no-referrer" @error="brokenCover = true"/>
+                <Icon v-else icon="fa-solid fa-music" aria-hidden="true"/>
+            </span>
+            <div class="now__info">
                 <template v-if="player.current">
-                    <a v-if="player.current.url" class="title no-decoration" :href="player.current.url" target="_blank" rel="noopener">{{ player.current.title }}</a>
-                    <p v-else class="title">{{ player.current.title }}</p>
-                    <p class="author">{{ player.current.author || "Auteur inconnu" }}</p>
+                    <a v-if="safeUrl(player.current.url)" class="now__title" :href="player.current.url" target="_blank" rel="noopener noreferrer">
+                        {{ player.current.title || "Titre inconnu" }}<span class="sr-only"> (nouvel onglet)</span>
+                    </a>
+                    <p v-else class="now__title">{{ player.current.title || "Titre inconnu" }}</p>
+                    <p class="now__author">{{ player.current.author || "Auteur inconnu" }}</p>
                 </template>
                 <template v-else>
-                    <p class="title secondary">Aucun titre en cours</p>
-                    <p class="author">La scène est vide</p>
+                    <p class="now__title now__title--empty">Aucun titre en cours</p>
+                    <p class="now__author">La scène est vide</p>
                 </template>
             </div>
         </div>
 
         <div v-if="player.current" class="progress">
-            <div class="progress-bar">
-                <div class="progress-fill" :style="{ width: progress + '%' }"></div>
-            </div>
-            <div class="times">
+            <AdminMeter v-if="!isLive" :value="progress" tone="main" label="Progression du titre"
+                :value-text="formatClock(positionMs) + ' sur ' + formatClock(durationMs)"/>
+            <div class="progress__times adm-mono">
                 <span>{{ formatClock(positionMs) }}</span>
-                <span v-if="isLive"><Tag color="var(--text-error)">LIVE</Tag></span>
+                <Tag v-if="isLive" tone="error" icon="fa-solid fa-tower-broadcast">En direct</Tag>
                 <span v-else>{{ formatClock(durationMs) }}</span>
             </div>
         </div>
 
-        <div class="tags">
-            <Tag :color="player.connection?.channelId || player.channelId ? 'var(--text-success)' : 'var(--text-error)'" icon="fa-solid fa-volume-high">
-                {{ player.connection?.channelName || player.channelName || "Aucun salon" }}
-            </Tag>
-            <Tag color="var(--text-secondary)" icon="fa-solid fa-headphones" title="Auditeurs dans le salon">{{ safeNum(player.listeners) }} auditeur(s)</Tag>
-            <Tag color="var(--text-secondary)" icon="fa-solid fa-globe" title="Utilisateurs sur l'interface web">{{ safeNum(player.webListeners) }} web</Tag>
+        <div class="adm-tags">
+            <Tag tone="default" icon="fa-solid fa-headphones" title="Auditeurs dans le salon vocal">{{ safeNum(player.listeners) }} auditeur(s)</Tag>
+            <Tag tone="default" icon="fa-solid fa-globe" title="Utilisateurs sur l'interface web">{{ safeNum(player.webListeners) }} web</Tag>
             <Tag v-if="route" :color="route === 'warp' ? 'var(--owner-color)' : 'var(--admin-color)'" icon="fa-solid fa-route"
                 :title="player.ytdlp?.pid ? 'yt-dlp PID ' + player.ytdlp.pid : 'Route yt-dlp'">
-                yt-dlp : {{ route === 'warp' ? "WARP" : "Direct" }}<span v-if="player.ytdlp?.pid" class="mono"> · {{ player.ytdlp.pid }}</span>
+                yt-dlp : {{ route === 'warp' ? "WARP" : "Direct" }}<span v-if="player.ytdlp?.pid" class="adm-mono">&nbsp;· {{ player.ytdlp.pid }}</span>
             </Tag>
-            <Tag v-if="player.loop" color="var(--main)" icon="fa-solid fa-repeat">Boucle</Tag>
-            <Tag v-if="player.shuffle" color="var(--main)" icon="fa-solid fa-shuffle">Aléatoire</Tag>
-            <Tag v-if="player.pendingPause" color="var(--text-warning)" icon="fa-solid fa-hourglass-half">Pause en attente</Tag>
-            <Tag v-if="player.autoLeaveAt" color="var(--text-warning)" icon="fa-solid fa-door-open">Départ {{ formatRelative(player.autoLeaveAt) }}</Tag>
+            <Tag v-if="player.loop" tone="main" icon="fa-solid fa-repeat">Boucle</Tag>
+            <Tag v-if="player.shuffle" tone="main" icon="fa-solid fa-shuffle">Aléatoire</Tag>
+            <Tag v-if="player.pendingPause" tone="warning" icon="fa-solid fa-hourglass-half">Pause en attente</Tag>
+            <Tag v-if="player.autoLeaveAt" tone="warning" icon="fa-solid fa-door-open">Départ {{ formatRelative(player.autoLeaveAt) }}</Tag>
         </div>
 
-        <p v-if="player.status === 'loading' && player.loading" class="loading-info">
-            <Icon icon="fa-solid fa-spinner" spin-pulse/> Chargement (essai {{ safeNum(player.loading.attempt, 1) }}<span v-if="player.loading.route">, route {{ player.loading.route }}</span>)
+        <p v-if="player.status === 'loading' && player.loading" class="adm-hint loading">
+            <Icon icon="fa-solid fa-spinner" spin-pulse aria-hidden="true"/>
+            Chargement (essai {{ safeNum(player.loading.attempt, 1) }}<span v-if="player.loading.route">, route {{ player.loading.route }}</span>)
         </p>
-        <Error v-if="player.lastError && !player.lastErrorStale" class="last-error">
-            {{ player.lastError.message || "Erreur inconnue" }} ({{ player.lastError.code }}) · {{ formatRelative(player.lastError.at) }}
-        </Error>
-        <p v-else-if="player.lastError" class="last-error stale" title="La lecture a repris depuis sur une autre musique">
-            <Icon icon="fa-solid fa-clock-rotate-left"/> Erreur précédente : {{ player.lastError.message || player.lastError.code }} · {{ formatRelative(player.lastError.at) }}
+        <AdminBanner v-if="player.lastError && !player.lastErrorStale" tone="error" class="error">
+            {{ player.lastError.message || "Erreur inconnue" }} <span class="adm-mono">({{ player.lastError.code }})</span> · {{ formatRelative(player.lastError.at) }}
+        </AdminBanner>
+        <p v-else-if="player.lastError" class="adm-hint loading" title="La lecture a repris depuis sur une autre musique">
+            <Icon icon="fa-solid fa-clock-rotate-left" aria-hidden="true"/>
+            Erreur précédente : {{ player.lastError.message || player.lastError.code }} · {{ formatRelative(player.lastError.at) }}
         </p>
 
-        <div :class="['actions', { busy }]">
-            <IconAction title="Précédent" icon="fa-solid fa-backward-step" @click="act('previous')"/>
-            <IconAction v-if="player.status === 'playing' || player.status === 'loading'" title="Pause" icon="fa-solid fa-pause" @click="act('pause')"/>
-            <IconAction v-else title="Reprendre" icon="fa-solid fa-play" @click="act('resume')"/>
-            <IconAction title="Suivant" icon="fa-solid fa-forward-step" @click="act('skip')"/>
-            <IconAction title="Arrêter" icon="fa-solid fa-stop" @click="act('stop')"/>
-            <IconAction title="Vider la file d'attente" icon="fa-solid fa-trash-can" @click="act('clear')"/>
-            <IconAction title="Boucle" icon="fa-solid fa-repeat" :active="player.loop" :color="player.loop ? 'var(--main)' : 'var(--text)'" @click="act('loop', !player.loop)"/>
-            <IconAction title="Aléatoire" icon="fa-solid fa-shuffle" :active="player.shuffle" :color="player.shuffle ? 'var(--main)' : 'var(--text)'" @click="act('shuffle', !player.shuffle)"/>
-            <IconAction title="Quitter le salon" icon="fa-solid fa-right-from-bracket" color="var(--text-error)" @click="emit('leave', player)"/>
-        </div>
-
         <div class="queue">
-            <button class="queue-toggle" @click="showQueue = !showQueue">
-                <Icon :icon="showQueue ? 'fa-solid fa-angle-up' : 'fa-solid fa-angle-down'"/>
-                File d'attente : {{ nextCount }} titre(s)
+            <button type="button" class="queue__toggle" :aria-expanded="showQueue ? 'true' : 'false'" :aria-controls="queueId" @click="showQueue = !showQueue">
+                <Icon class="queue__chevron" icon="fa-solid fa-chevron-down" aria-hidden="true"/>
+                File d'attente
+                <span class="adm-badge">{{ nextCount }}</span>
             </button>
-            <div v-if="showQueue" class="queue-list">
-                <Info v-if="!player.next?.length" secondary>La file d'attente est vide</Info>
-                <div v-for="(song, index) in player.next" :key="(song.id || '') + index" class="queue-item">
-                    <span class="queue-index">{{ index + 1 }}</span>
-                    <div class="queue-info">
-                        <p class="queue-title">{{ song.title }}</p>
-                        <p class="queue-author">{{ song.author }}</p>
-                    </div>
-                    <span class="mono queue-duration">{{ song.duration ? formatClock(song.duration * 1000) : "LIVE" }}</span>
-                </div>
-                <p v-if="nextCount > (player.next?.length || 0)" class="queue-more">… et {{ nextCount - player.next.length }} autre(s)</p>
+            <div v-show="showQueue" :id="queueId" class="queue__body">
+                <p v-if="!player.next?.length" class="adm-hint">La file d'attente est vide.</p>
+                <ol v-else class="queue__list adm-scroll" :aria-label="'File d\'attente de ' + (player.guildName || player.guildId)">
+                    <li v-for="(song, index) in player.next" :key="(song.id || '') + index" class="queue__item">
+                        <span class="queue__index adm-mono" aria-hidden="true">{{ index + 1 }}</span>
+                        <span class="queue__info">
+                            <span class="queue__title">{{ song.title || "Titre inconnu" }}</span>
+                            <span class="queue__author">{{ song.author || "Auteur inconnu" }}</span>
+                        </span>
+                        <span class="adm-mono adm-muted">{{ song.duration ? formatClock(song.duration * 1000) : "Direct" }}</span>
+                    </li>
+                </ol>
+                <p v-if="nextCount > (player.next?.length || 0)" class="adm-hint queue__more">… et {{ nextCount - (player.next?.length || 0) }} autre(s)</p>
             </div>
         </div>
-    </Box>
+
+        <template #footer>
+            <div class="adm-iconbar" role="toolbar" :aria-label="'Commandes du player de ' + (player.guildName || player.guildId)">
+                <div class="adm-iconbar__group">
+                    <button type="button" class="adm-iconbtn" aria-label="Titre précédent" title="Titre précédent" :disabled="busy" @click="act('previous')">
+                        <Icon icon="fa-solid fa-backward-step" aria-hidden="true"/>
+                    </button>
+                    <button v-if="player.status === 'playing' || player.status === 'loading'" type="button" class="adm-iconbtn" aria-label="Mettre en pause" title="Mettre en pause" :disabled="busy" @click="act('pause')">
+                        <Icon icon="fa-solid fa-pause" aria-hidden="true"/>
+                    </button>
+                    <button v-else type="button" class="adm-iconbtn" aria-label="Reprendre la lecture" title="Reprendre la lecture" :disabled="busy" @click="act('resume')">
+                        <Icon icon="fa-solid fa-play" aria-hidden="true"/>
+                    </button>
+                    <button type="button" class="adm-iconbtn" aria-label="Titre suivant" title="Titre suivant" :disabled="busy" @click="act('skip')">
+                        <Icon icon="fa-solid fa-forward-step" aria-hidden="true"/>
+                    </button>
+                    <button type="button" class="adm-iconbtn" aria-label="Arrêter la lecture" title="Arrêter la lecture" :disabled="busy" @click="act('stop')">
+                        <Icon icon="fa-solid fa-stop" aria-hidden="true"/>
+                    </button>
+                </div>
+                <div class="adm-iconbar__group">
+                    <button type="button" class="adm-iconbtn" aria-label="Boucle" title="Boucle" :aria-pressed="player.loop ? 'true' : 'false'" :disabled="busy" @click="act('loop', !player.loop)">
+                        <Icon icon="fa-solid fa-repeat" aria-hidden="true"/>
+                    </button>
+                    <button type="button" class="adm-iconbtn" aria-label="Lecture aléatoire" title="Lecture aléatoire" :aria-pressed="player.shuffle ? 'true' : 'false'" :disabled="busy" @click="act('shuffle', !player.shuffle)">
+                        <Icon icon="fa-solid fa-shuffle" aria-hidden="true"/>
+                    </button>
+                    <button type="button" class="adm-iconbtn" aria-label="Vider la file d'attente" title="Vider la file d'attente" :disabled="busy || !nextCount" @click="act('clear')">
+                        <Icon icon="fa-solid fa-trash-can" aria-hidden="true"/>
+                    </button>
+                    <button type="button" class="adm-iconbtn adm-iconbtn--danger" aria-label="Quitter le salon vocal" title="Quitter le salon vocal" :disabled="busy" @click="emit('leave', player)">
+                        <Icon icon="fa-solid fa-right-from-bracket" aria-hidden="true"/>
+                    </button>
+                </div>
+            </div>
+        </template>
+    </AdminCard>
 </template>
 <script setup>
-import { computed, ref } from 'vue';
+// Carte d'un player connecté : titre en cours, progression extrapolée, état, file d'attente et commandes
+import { computed, ref, useId, watch } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
-import Box from '@/components/UI/Box.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
-import Error from '@/components/UI/Error.vue';
-import IconAction from '@/components/UI/IconAction.vue';
 import ServerAvatar from '@/components/UI/ServerAvatar.vue';
+import AdminCard from './AdminCard.vue';
+import AdminMeter from './AdminMeter.vue';
+import AdminBanner from './AdminBanner.vue';
 import { safeNum, formatClock, formatRelative, playerStatus } from './adminFormat';
 
 const props = defineProps({
@@ -124,8 +150,15 @@ const emit = defineEmits(['leave']);
 const adminStore = useAdminStore();
 const busy = ref(false);
 const showQueue = ref(false);
+const brokenCover = ref(false);
+const queueId = `adm-queue-${useId()}`;
+
+// Nouvelle musique : on retente l'affichage de la miniature
+watch(() => props.player.current?.thumbnail, () => { brokenCover.value = false; });
 
 const status = computed(() => playerStatus(props.player.status || (props.player.playing ? 'playing' : props.player.paused ? 'paused' : 'idle')));
+const issue = computed(() => props.player.status === 'stalled' || !!(props.player.lastError && !props.player.lastErrorStale));
+const channelName = computed(() => props.player.connection?.channelName || props.player.channelName || null);
 
 const durationMs = computed(() => {
     if (props.player.durationMs !== undefined && props.player.durationMs !== null) return safeNum(props.player.durationMs);
@@ -143,268 +176,204 @@ const positionMs = computed(() => {
     return Math.max(0, Math.min(durationMs.value ?? Infinity, value));
 });
 
-const progress = computed(() => {
-    if (!durationMs.value) return 0;
-    return Math.min(100, positionMs.value / durationMs.value * 100);
-});
+const progress = computed(() => (durationMs.value ? Math.min(1, positionMs.value / durationMs.value) : 0));
 
 const route = computed(() => props.player.ytdlp?.route || null);
 const nextCount = computed(() => safeNum(props.player.nextCount, props.player.next?.length || 0));
 
+function safeUrl(url) {
+    return typeof url === 'string' && /^https?:\/\//i.test(url);
+}
+
 // value : état voulu pour loop / shuffle (envoyé explicitement, sans bascule côté serveur)
 async function act(action, value) {
     if (busy.value) return;
     busy.value = true;
-    await adminStore.playerAction(props.player.guildId, action, value);
-    busy.value = false;
+    try {
+        await adminStore.playerAction(props.player.guildId, action, value);
+    } finally {
+        busy.value = false;
+    }
 }
 </script>
 <style scoped>
-.player-card {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    min-width: 0;
-}
-
 p {
     margin: 0;
 }
 
-.card-header {
+.now {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-.guild {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    gap: 12px;
     min-width: 0;
+    padding: 8px;
+    border-radius: var(--adm-radius);
+    background-color: var(--adm-inset);
 }
 
-.guild-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    flex-shrink: 0;
-}
+.now__cover {
+    --adm-cover-size: 64px;
 
-.guild-info {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-
-.guild-name {
-    font-weight: 600;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.guild-id {
-    font-size: 0.7em;
-    color: var(--text-secondary);
-    font-family: monospace;
-}
-
-.current {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background-color: var(--secondary);
-    border-radius: 10px;
-    padding: 5px;
-}
-
-.thumbnail {
-    width: 30%;
-    min-width: 90px;
-    aspect-ratio: 16/9;
-    object-fit: cover;
-    border-radius: 10px;
+    width: 96px;
+    aspect-ratio: 16 / 9;
+    height: auto;
     background-color: var(--quaternary);
 }
 
-.placeholder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-}
-
-.current-info {
+.now__info {
     display: flex;
     flex-direction: column;
-    gap: 5px;
-    min-width: 0;
+    gap: 4px;
     flex: 1;
+    min-width: 0;
 }
 
-.title {
-    font-weight: bold;
-    color: var(--text);
-    overflow: hidden;
+.now__title {
     display: -webkit-box;
+    overflow: hidden;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
-    word-break: break-word;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--text);
+    text-decoration: none;
+    overflow-wrap: anywhere;
 }
 
-.title.secondary {
-    opacity: 0.8;
+a.now__title:hover {
+    color: var(--main);
+    text-decoration: underline;
 }
 
-.author {
+.now__title--empty {
     color: var(--text-secondary);
+}
+
+.now__author {
     font-size: 0.8em;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .progress {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 4px;
 }
 
-.progress-bar {
-    height: 6px;
-    background-color: var(--secondary);
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.progress-fill {
-    height: 100%;
-    background-color: var(--main);
-    border-radius: 5px;
-    transition: width 0.5s linear;
-}
-
-.times {
+.progress__times {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-family: monospace;
-    font-size: 0.8em;
+    font-size: 0.75em;
     color: var(--text-secondary);
 }
 
-.tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.mono {
-    font-family: monospace;
-}
-
-.loading-info {
-    font-size: 0.8em;
-    color: var(--text-secondary);
+.loading {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: 6px;
 }
 
-.last-error {
-    font-size: 0.8em;
+.error {
+    padding: 8px 10px;
+    font-size: 0.9em;
 }
 
-.last-error.stale {
-    margin: 0;
-    color: var(--text-secondary);
-    display: flex;
+.queue__toggle {
+    display: inline-flex;
     align-items: center;
-    gap: 5px;
-}
-
-.actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    gap: 10px;
-    padding: 10px;
-    background-color: var(--secondary);
-    border-radius: 10px;
-    transition: opacity 0.2s ease;
-}
-
-.actions.busy {
-    opacity: 0.5;
-    pointer-events: none;
-}
-
-.queue-toggle {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    background: none;
+    gap: 8px;
+    min-height: 32px;
+    padding: 0 8px;
+    margin-left: -8px;
     border: none;
+    border-radius: 8px;
+    background: none;
     color: var(--text-secondary);
-    cursor: pointer;
+    font: inherit;
     font-size: 0.85em;
-    padding: 0;
+    cursor: pointer;
+    outline: 2px solid transparent;
 }
 
-.queue-toggle:hover {
+.queue__toggle:hover {
     color: var(--text);
+    background-color: var(--adm-hover);
 }
 
-.queue-list {
+.queue__toggle:focus-visible {
+    box-shadow: var(--focus-ring);
+}
+
+.queue__chevron {
+    font-size: 0.8em;
+    transform: rotate(-90deg);
+    transition: transform var(--dur) var(--ease);
+}
+
+.queue__toggle[aria-expanded="true"] .queue__chevron {
+    transform: none;
+}
+
+.queue__body {
     display: flex;
     flex-direction: column;
-    gap: 5px;
-    margin-top: 5px;
-    max-height: 25vh;
-    overflow-y: auto;
-    animation: unfold 0.3s ease-in-out;
+    gap: 6px;
+    margin-top: 6px;
 }
 
-.queue-item {
+.queue__list {
+    --adm-scroll-max: 240px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.queue__item {
     display: flex;
     align-items: center;
     gap: 10px;
-    background-color: var(--secondary);
-    border-radius: 5px;
-    padding: 5px;
+    padding: 6px 8px;
+    border-radius: 8px;
+    background-color: var(--adm-inset);
     font-size: 0.8em;
 }
 
-.queue-index {
-    color: var(--text-secondary);
-    font-family: monospace;
+.queue__index {
     width: 20px;
+    flex-shrink: 0;
     text-align: center;
+    color: var(--text-secondary);
 }
 
-.queue-info {
+.queue__info {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     min-width: 0;
 }
 
-.queue-title {
+.queue__title,
+.queue__author {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.queue-author {
+.queue__author {
     color: var(--text-secondary);
     font-size: 0.9em;
 }
 
-.queue-duration {
-    color: var(--text-secondary);
-}
-
-.queue-more {
-    font-size: 0.8em;
-    color: var(--text-secondary);
+.queue__more {
     text-align: center;
 }
 </style>
diff --git a/src/components/Admin/AdminPlayers.vue b/src/components/Admin/AdminPlayers.vue
index 1db3e06..ac179bf 100644
--- a/src/components/Admin/AdminPlayers.vue
+++ b/src/components/Admin/AdminPlayers.vue
@@ -1,18 +1,36 @@
 <template>
-    <AdminSection title="🎵 Players" subtitle="Tous les players connectés, en temps réel">
-        <template #actions>
-            <AdminPills v-model="filter" :options="filters"/>
-            <Button icon="fa-solid fa-rotate" :disabled="adminStore.playersLoading" @click="adminStore.fetchPlayers()">Actualiser</Button>
-        </template>
+    <AdminSection title="Players" subtitle="Tous les players connectés à un salon vocal, en temps réel">
+        <AdminStatRow :columns="4" label="Résumé des players">
+            <AdminStat label="Connectés" :value="counts.all" icon="fa-solid fa-plug" tone="main"
+                :sub="counts.listeners + ' auditeur(s) dans les salons'"/>
+            <AdminStat label="En lecture" :value="counts.playing" icon="fa-solid fa-play" tone="success"/>
+            <AdminStat label="En pause" :value="counts.paused" icon="fa-solid fa-pause" tone="warning"/>
+            <AdminStat label="En difficulté" :value="counts.issues" icon="fa-solid fa-triangle-exclamation"
+                :tone="counts.issues ? 'error' : 'default'" :sub="counts.issues ? 'Bloqués ou en erreur' : 'Aucun problème signalé'"/>
+        </AdminStatRow>
+
+        <AdminToolbar v-model:search="search" search-label="Rechercher un player" search-placeholder="Serveur, salon ou titre…" label="Filtres des players">
+            <AdminPills v-model="filter" :options="filterOptions" label="Statut"/>
+            <template #end>
+                <Button variant="secondary" icon="fa-solid fa-rotate" :loading="adminStore.playersLoading" @click="adminStore.fetchPlayers()">Actualiser</Button>
+            </template>
+        </AdminToolbar>
+
+        <p class="sr-only" aria-live="polite">{{ liveSummary }}</p>
 
         <AdminState :loading="!adminStore.playersLoaded && adminStore.playersLoading"
             :error="!adminStore.playersLoaded ? adminStore.playersError : null"
             :empty="visible.length === 0"
-            :empty-text="adminStore.players.length ? 'Aucun player ne correspond à ce filtre' : 'Aucun player connecté : silence radio sur tous les serveurs !'"
+            :empty-icon="adminStore.players.length ? 'fa-solid fa-filter' : 'fa-solid fa-volume-xmark'"
+            :empty-title="adminStore.players.length ? 'Aucun résultat' : 'Silence radio'"
+            :empty-text="adminStore.players.length ? 'Aucun player ne correspond à ces critères' : 'Aucun player n\'est connecté à un salon vocal pour le moment.'"
             @retry="adminStore.fetchPlayers()">
-            <div class="players-grid">
+            <template v-if="adminStore.players.length" #empty>
+                <Button size="sm" variant="secondary" icon="fa-solid fa-filter-circle-xmark" @click="resetFilters()">Réinitialiser les filtres</Button>
+            </template>
+            <AdminGrid>
                 <AdminPlayerCard v-for="player in visible" :key="player.guildId" :player="player" :now="now" @leave="leave"/>
-            </div>
+            </AdminGrid>
         </AdminState>
 
         <AdminConfirm ref="confirmRef"/>
@@ -25,28 +43,61 @@ import Button from '@/components/UI/Button.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
 import AdminPills from './AdminPills.vue';
+import AdminGrid from './AdminGrid.vue';
+import AdminStat from './AdminStat.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminToolbar from './AdminToolbar.vue';
 import AdminConfirm from './AdminConfirm.vue';
 import AdminPlayerCard from './AdminPlayerCard.vue';
+import { safeNum } from './adminFormat';
 
 const adminStore = useAdminStore();
 const confirmRef = ref(null);
 
 const filter = ref('all');
-const filters = [
-    { value: 'all', label: "Tous" },
-    { value: 'playing', label: "En lecture", icon: "fa-solid fa-play" },
-    { value: 'paused', label: "En pause", icon: "fa-solid fa-pause" },
-    { value: 'issues', label: "Problèmes", icon: "fa-solid fa-triangle-exclamation" }
-];
+const search = ref("");
+
+function hasIssue(player) {
+    return player.status === 'stalled' || !!(player.lastError && !player.lastErrorStale);
+}
+
+const counts = computed(() => {
+    const list = adminStore.players;
+    return {
+        all: list.length,
+        playing: list.filter(p => p.status === 'playing').length,
+        paused: list.filter(p => p.status === 'paused').length,
+        issues: list.filter(hasIssue).length,
+        listeners: list.reduce((total, p) => total + safeNum(p.listeners), 0)
+    };
+});
+
+const filterOptions = computed(() => [
+    { value: 'all', label: "Tous", count: counts.value.all },
+    { value: 'playing', label: "En lecture", icon: "fa-solid fa-play", count: counts.value.playing },
+    { value: 'paused', label: "En pause", icon: "fa-solid fa-pause", count: counts.value.paused },
+    { value: 'issues', label: "Problèmes", icon: "fa-solid fa-triangle-exclamation", count: counts.value.issues }
+]);
 
 const visible = computed(() => {
-    const list = [...adminStore.players].sort((a, b) => (a.guildName || "").localeCompare(b.guildName || ""));
-    if (filter.value === 'playing') return list.filter(p => p.status === 'playing');
-    if (filter.value === 'paused') return list.filter(p => p.status === 'paused');
-    if (filter.value === 'issues') return list.filter(p => p.status === 'stalled' || (p.lastError && !p.lastErrorStale));
-    return list;
+    const query = search.value.trim().toLowerCase();
+    let list = [...adminStore.players].sort((a, b) => (a.guildName || "").localeCompare(b.guildName || ""));
+    if (filter.value === 'playing') list = list.filter(p => p.status === 'playing');
+    else if (filter.value === 'paused') list = list.filter(p => p.status === 'paused');
+    else if (filter.value === 'issues') list = list.filter(hasIssue);
+    if (!query) return list;
+    return list.filter(p => [p.guildName, p.guildId, p.connection?.channelName, p.channelName, p.current?.title, p.current?.author]
+        .some(value => String(value || "").toLowerCase().includes(query)));
 });
 
+// Annoncé poliment aux lecteurs d'écran quand le nombre de résultats change
+const liveSummary = computed(() => (adminStore.playersLoaded ? `${visible.value.length} player(s) affiché(s) sur ${counts.value.all}` : ""));
+
+function resetFilters() {
+    filter.value = 'all';
+    search.value = "";
+}
+
 // Horloge partagée par toutes les cartes : la position affichée est recalculée depuis l'ancre (pas d'accumulation)
 const now = ref(performance.now());
 let timer = null;
@@ -74,17 +125,3 @@ onUnmounted(() => {
     clearInterval(timer);
 });
 </script>
-<style scoped>
-.players-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
-    gap: 10px;
-    align-items: start;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .players-grid {
-        grid-template-columns: 1fr;
-    }
-}
-</style>
diff --git a/src/components/Admin/AdminPlaylists.vue b/src/components/Admin/AdminPlaylists.vue
index 6d11fff..5933b06 100644
--- a/src/components/Admin/AdminPlaylists.vue
+++ b/src/components/Admin/AdminPlaylists.vue
@@ -1,82 +1,190 @@
 <template>
-    <AdminSection title="📚 Playlists" :subtitle="subtitle">
+    <AdminSection title="Playlists" subtitle="Playlists personnelles des comptes et playlists partagées des serveurs">
         <template #actions>
-            <input type="text" class="search" v-model="search" placeholder="Rechercher (titre, propriétaire, ID)"/>
-            <Button icon="fa-solid fa-rotate" :disabled="loading" @click="load()">Actualiser</Button>
+            <Button variant="secondary" icon="fa-solid fa-rotate" :loading="currentLoading" @click="reload()">Actualiser</Button>
         </template>
 
-        <AdminPills v-model="filter" :options="filterOptions"/>
+        <SegmentedControl v-model="scope" :options="scopeOptions" label="Type de playlists" class="scope"/>
 
-        <AdminState :loading="!owners && !error" :error="!owners ? error : null"
-            :empty="!!owners && filtered.length === 0"
-            :empty-text="search || filter !== 'all' ? 'Aucune playlist ne correspond à ces critères' : 'Aucune playlist enregistrée'"
-            @retry="load()">
-            <div class="list">
-                <div v-for="row in shown" :key="row.key" class="row">
-                    <div class="main-info">
-                        <div class="cover">
-                            <img v-if="row.thumbnail && !brokenCovers.has(row.key)" :src="row.thumbnail" alt="" loading="lazy" referrerpolicy="no-referrer" @error="markBroken(row.key)"/>
-                            <Icon v-else :icon="typeInfo(row).icon" :style="{ color: typeInfo(row).color }"/>
-                        </div>
-                        <div class="text">
-                            <p class="title" :title="row.title">{{ row.title || "Sans titre" }}</p>
-                            <div class="tags">
-                                <Tag :color="typeInfo(row).color" :icon="typeInfo(row).icon">{{ typeInfo(row).label }}</Tag>
-                                <Tag v-if="row.source === 'google'" color="var(--text-error)" icon="fa-brands fa-google">
-                                    Synchronisée<span v-if="row.syncedAt"> {{ formatRelative(row.syncedAt, nowDate) }}</span>
-                                </Tag>
-                                <span class="meta"><Icon icon="fa-solid fa-music"/> {{ safeNum(row.songCount) }} titre(s)</span>
-                                <span v-if="safeNum(row.duration)" class="meta"><Icon icon="fa-solid fa-clock"/> {{ formatUptime(row.duration) }}</span>
-                                <span class="meta mono">#{{ row.playlistId }}</span>
+        <!-- ----- Playlists personnelles ----- -->
+        <template v-if="scope === 'personal'">
+            <AdminStatRow :columns="4" label="Résumé des playlists personnelles">
+                <AdminStat label="Playlists" :value="personalTotals.playlists" icon="fa-solid fa-list" tone="main"/>
+                <AdminStat label="Propriétaires" :value="personalTotals.owners" icon="fa-solid fa-users" tone="admin"/>
+                <AdminStat label="Titres" :value="personalTotals.songs" icon="fa-solid fa-music" tone="info"/>
+                <AdminStat label="Synchronisées Google" :value="personalTotals.google" icon="fa-brands fa-google" tone="error"/>
+            </AdminStatRow>
+
+            <AdminToolbar v-model:search="search" search-label="Rechercher une playlist" search-placeholder="Titre, propriétaire ou ID…" label="Filtres des playlists">
+                <AdminPills v-model="filter" :options="filterOptions" label="Type"/>
+            </AdminToolbar>
+
+            <p class="sr-only" aria-live="polite">{{ owners ? filtered.length + ' playlist(s) trouvée(s)' : '' }}</p>
+
+            <AdminState :loading="!owners && !error" :error="!owners ? error : null" @retry="load()">
+                <AdminCard title="Playlists des comptes" icon="fa-solid fa-user" :span="12" flush :busy="loading"
+                    :subtitle="filtered.length + ' playlist(s) affichée(s) sur ' + rows.length">
+                    <AdminState :empty="filtered.length === 0" :retry="false" :empty-icon="search || filter !== 'all' ? 'fa-solid fa-filter' : 'fa-solid fa-list'"
+                        :empty-text="search || filter !== 'all' ? 'Aucune playlist ne correspond à ces critères' : 'Aucune playlist enregistrée'">
+                        <AdminList divided label="Playlists personnelles">
+                            <AdminRow v-for="row in shown" :key="row.key">
+                                <template #media>
+                                    <span class="adm-cover">
+                                        <img v-if="row.thumbnail && !brokenCovers.has(row.key)" :src="row.thumbnail" alt="" loading="lazy" referrerpolicy="no-referrer" @error="markBroken(row.key)"/>
+                                        <Icon v-else :icon="typeInfo(row).icon" :style="{ color: typeInfo(row).color }" aria-hidden="true"/>
+                                    </span>
+                                </template>
+                                <template #title>{{ row.title || "Sans titre" }}</template>
+                                <template #subtitle>
+                                    {{ safeNum(row.songCount) }} titre(s)<span v-if="safeNum(row.duration)"> · {{ formatUptime(row.duration) }}</span>
+                                    <span class="adm-mono"> · #{{ row.playlistId }}</span>
+                                </template>
+                                <div class="adm-tags">
+                                    <Tag :color="typeInfo(row).color" :icon="typeInfo(row).icon">{{ typeInfo(row).label }}</Tag>
+                                    <Tag v-if="row.source === 'google'" tone="error" icon="fa-brands fa-google">
+                                        Synchronisée<span v-if="row.syncedAt">&nbsp;{{ formatRelative(row.syncedAt, nowDate) }}</span>
+                                    </Tag>
+                                </div>
+                                <template #meta>
+                                    <AdminUserLine :user="row.owner" :online="adminStore.onlineIds.has(row.userId)" size="28px"/>
+                                </template>
+                                <template #actions>
+                                    <a v-if="safeUrl(row.url)" class="adm-iconbtn" :href="row.url" target="_blank" rel="noopener noreferrer"
+                                        :aria-label="'Ouvrir la source de « ' + (row.title || 'Sans titre') + ' » (nouvel onglet)'" title="Ouvrir la source">
+                                        <Icon icon="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"/>
+                                    </a>
+                                    <button type="button" class="adm-iconbtn adm-iconbtn--danger" :aria-label="'Supprimer la playlist « ' + (row.title || 'Sans titre') + ' »'"
+                                        title="Supprimer" @click="removePersonal(row)">
+                                        <Icon icon="fa-solid fa-trash" aria-hidden="true"/>
+                                    </button>
+                                </template>
+                            </AdminRow>
+                        </AdminList>
+                    </AdminState>
+                    <template v-if="filtered.length > shown.length" #footer>
+                        <span class="adm-footer-meta">{{ shown.length }} sur {{ filtered.length }}</span>
+                        <Button size="sm" variant="secondary" icon="fa-solid fa-chevron-down" @click="limit += PAGE_SIZE">
+                            Afficher plus ({{ filtered.length - shown.length }} restante(s))
+                        </Button>
+                    </template>
+                </AdminCard>
+            </AdminState>
+        </template>
+
+        <!-- ----- Playlists partagées des serveurs ----- -->
+        <template v-else>
+            <AdminStatRow :columns="4" label="Résumé des playlists partagées">
+                <AdminStat label="Serveurs concernés" :value="guildTotals.guilds" icon="fa-solid fa-server" tone="warning"/>
+                <AdminStat label="Option activée" :value="guildTotals.enabled" icon="fa-solid fa-toggle-on" tone="success"/>
+                <AdminStat label="Playlists partagées" :value="guildTotals.playlists" icon="fa-solid fa-users-rectangle" tone="main"/>
+                <AdminStat label="Titres" :value="guildTotals.songs" icon="fa-solid fa-music" tone="info"/>
+            </AdminStatRow>
+
+            <AdminToolbar v-model:search="search" search-label="Rechercher une playlist partagée" search-placeholder="Serveur, titre ou créateur…" label="Filtres des playlists partagées">
+                <AdminPills v-model="guildFilter" :options="guildFilterOptions" label="Option du serveur"/>
+            </AdminToolbar>
+
+            <p class="sr-only" aria-live="polite">{{ guildsData ? filteredGuilds.length + ' serveur(s) affiché(s)' : '' }}</p>
+
+            <AdminState :loading="!guildsData && !guildsError" :error="!guildsData ? guildsError : null"
+                :empty="!!guildsData && filteredGuilds.length === 0"
+                :empty-icon="search || guildFilter !== 'all' ? 'fa-solid fa-filter' : 'fa-solid fa-users-rectangle'"
+                :empty-text="search || guildFilter !== 'all' ? 'Aucun serveur ne correspond à ces critères' : 'Aucun serveur n\'a activé les playlists partagées'"
+                @retry="loadGuilds()">
+                <AdminGrid align="start">
+                    <AdminCard v-for="entry in filteredGuilds" :key="entry.guildId" :span="6" :span-sm="12" flush
+                        :title="entry.guildName || 'Serveur quitté'" :tone="entry.settings?.enabled ? 'default' : 'warning'"
+                        :subtitle="entry.playlists.length + ' playlist(s) · modifiables par ' + (entry.settings?.editors === 'mods' ? 'les modérateurs' : 'tous les membres')">
+                        <template #media>
+                            <ServerAvatar class="adm-avatar" :src="entry.guildIcon" :server-id="entry.guildId" alt=""/>
+                        </template>
+                        <template #actions>
+                            <Tag :tone="entry.settings?.enabled ? 'success' : 'default'" :icon="entry.settings?.enabled ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'">
+                                {{ entry.settings?.enabled ? "Activées" : "Désactivées" }}
+                            </Tag>
+                        </template>
+                        <AdminState :empty="!entry.visible.length" :retry="false" empty-icon="fa-solid fa-list"
+                            :empty-text="entry.playlists.length ? 'Aucune playlist ne correspond à la recherche' : 'Aucune playlist créée sur ce serveur'">
+                            <div class="adm-scroll guild-list">
+                                <AdminList divided :label="'Playlists partagées de ' + (entry.guildName || entry.guildId)">
+                                    <AdminRow v-for="playlist in entry.visible" :key="playlist.playlistId" dense>
+                                        <template #media>
+                                            <span class="adm-cover guild-cover">
+                                                <img v-if="playlist.thumbnail && !brokenCovers.has(entry.guildId + ':' + playlist.playlistId)" :src="playlist.thumbnail" alt=""
+                                                    loading="lazy" referrerpolicy="no-referrer" @error="markBroken(entry.guildId + ':' + playlist.playlistId)"/>
+                                                <Icon v-else icon="fa-solid fa-list" aria-hidden="true"/>
+                                            </span>
+                                        </template>
+                                        <template #title>{{ playlist.title || "Sans titre" }}</template>
+                                        <template #subtitle>
+                                            {{ safeNum(playlist.songCount) }} titre(s)<span v-if="playlist.createdBy"> · par {{ playlist.createdBy.global_name || playlist.createdBy.username || playlist.createdBy.id }}</span>
+                                        </template>
+                                        <template #actions>
+                                            <button type="button" class="adm-iconbtn adm-iconbtn--danger" title="Supprimer"
+                                                :aria-label="'Supprimer la playlist partagée « ' + (playlist.title || 'Sans titre') + ' »'" @click="removeShared(entry, playlist)">
+                                                <Icon icon="fa-solid fa-trash" aria-hidden="true"/>
+                                            </button>
+                                        </template>
+                                    </AdminRow>
+                                </AdminList>
                             </div>
-                        </div>
-                    </div>
-                    <div class="side">
-                        <AdminUserLine :user="row.owner" :online="adminStore.onlineIds.has(row.userId)" size="32px"/>
-                        <a v-if="safeUrl(row.url)" class="link" :href="row.url" target="_blank" rel="noopener noreferrer" title="Ouvrir la source">
-                            <Icon icon="fa-solid fa-arrow-up-right-from-square"/>
-                        </a>
-                        <IconAction title="Supprimer" icon="fa-solid fa-trash" color="var(--text-error)" @click="remove(row)"/>
-                    </div>
-                </div>
-            </div>
-            <div v-if="filtered.length > shown.length" class="more">
-                <Button color-lower icon="fa-solid fa-chevron-down" @click="limit += PAGE_SIZE">
-                    Afficher plus ({{ filtered.length - shown.length }} restante(s))
-                </Button>
-            </div>
-        </AdminState>
+                        </AdminState>
+                        <template v-if="entry.guildName" #footer>
+                            <Button size="sm" variant="ghost" icon="fa-solid fa-sliders" :aria-label="'Gérer l\'option du serveur ' + entry.guildName"
+                                @click="serverDetail.open({ id: entry.guildId, name: entry.guildName })">Gérer l'option</Button>
+                        </template>
+                    </AdminCard>
+                </AdminGrid>
+            </AdminState>
+        </template>
 
         <AdminConfirm ref="confirmRef"/>
+        <AdminServerDetail ref="serverDetail"/>
     </AdminSection>
 </template>
 <script setup>
 /**
- * Section « Playlists » : toutes les playlists enregistrées (/ADMIN/PLAYLISTS/LIST), filtrées côté client,
- * suppression par /ADMIN/PLAYLISTS/DELETE {userId, playlistId}.
+ * Section « Playlists » :
+ * - personnelles : /ADMIN/PLAYLISTS/LIST, filtrées côté client, suppression {userId, playlistId} ;
+ * - partagées des serveurs : /ADMIN/PLAYLISTS/GUILDS, suppression {guildId, playlistId}, réglage via la fiche du serveur.
  */
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
-import { adminRequest, describeError } from '@/utils/AdminRequest';
+import { adminRequest, adminListen, describeError } from '@/utils/AdminRequest';
 import Button from '@/components/UI/Button.vue';
 import Tag from '@/components/UI/Tag.vue';
-import IconAction from '@/components/UI/IconAction.vue';
+import SegmentedControl from '@/components/UI/SegmentedControl.vue';
+import ServerAvatar from '@/components/UI/ServerAvatar.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
+import AdminStat from './AdminStat.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminToolbar from './AdminToolbar.vue';
 import AdminPills from './AdminPills.vue';
+import AdminGrid from './AdminGrid.vue';
+import AdminCard from './AdminCard.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
 import AdminUserLine from './AdminUserLine.vue';
 import AdminConfirm from './AdminConfirm.vue';
+import AdminServerDetail from './AdminServerDetail.vue';
 import { safeNum, formatUptime, formatRelative } from './adminFormat';
+import { readLocal, writeLocal } from './adminUi';
 
 const PAGE_SIZE = 50;
+const SCOPE_KEY = "adminPlaylistsScope";
 
 const adminStore = useAdminStore();
 const confirmRef = ref(null);
+const serverDetail = ref(null);
 
+const scope = ref(readLocal(SCOPE_KEY) === 'guild' ? 'guild' : 'personal');
+const search = ref("");
+
+// ----- Playlists personnelles -----
 const owners = ref(null);
 const loading = ref(false);
 const error = ref(null);
-const search = ref("");
 const filter = ref('all');
 const limit = ref(PAGE_SIZE);
 
@@ -99,15 +207,6 @@ function typeInfo(row) {
     return TYPES[kind(row)];
 }
 
-const filterOptions = [
-    { value: 'all', label: "Toutes", icon: "fa-solid fa-layer-group" },
-    { value: 'custom', label: "Personnalisées", icon: TYPES.custom.icon, color: TYPES.custom.color },
-    { value: 'youtube', label: "YouTube", icon: TYPES.youtube.icon, color: TYPES.youtube.color },
-    { value: 'google', label: "Synchro Google", icon: "fa-brands fa-google", color: TYPES.google.color },
-    { value: 'spotify', label: "Spotify", icon: TYPES.spotify.icon, color: TYPES.spotify.color },
-    { value: 'soundcloud', label: "SoundCloud", icon: TYPES.soundcloud.icon, color: TYPES.soundcloud.color }
-];
-
 // Une ligne par playlist, avec l'identité de son propriétaire
 const rows = computed(() => {
     const result = [];
@@ -121,6 +220,18 @@ const rows = computed(() => {
         || (a.title || "").localeCompare(b.title || ""));
 });
 
+const filterOptions = computed(() => {
+    const count = (type) => rows.value.filter(row => kind(row) === type).length;
+    return [
+        { value: 'all', label: "Toutes", icon: "fa-solid fa-layer-group", count: rows.value.length },
+        { value: 'custom', label: "Personnalisées", icon: TYPES.custom.icon, count: count('custom') },
+        { value: 'youtube', label: "YouTube", icon: TYPES.youtube.icon, count: count('youtube') },
+        { value: 'google', label: "Synchro Google", icon: "fa-brands fa-google", count: count('google') },
+        { value: 'spotify', label: "Spotify", icon: TYPES.spotify.icon, count: count('spotify') },
+        { value: 'soundcloud', label: "SoundCloud", icon: TYPES.soundcloud.icon, count: count('soundcloud') }
+    ];
+});
+
 const filtered = computed(() => {
     const query = search.value.trim().toLowerCase();
     return rows.value.filter(row => {
@@ -136,25 +247,15 @@ const filtered = computed(() => {
 
 const shown = computed(() => filtered.value.slice(0, limit.value));
 
-const subtitle = computed(() => {
-    if (!owners.value) return "Playlists enregistrées par les utilisateurs";
-    const songs = rows.value.reduce((total, row) => total + safeNum(row.songCount), 0);
-    return `${rows.value.length} playlist(s), ${owners.value.length} propriétaire(s), ${songs} titre(s)`;
-});
+const personalTotals = computed(() => ({
+    playlists: rows.value.length,
+    owners: (owners.value || []).filter(o => o.playlists?.length).length,
+    songs: rows.value.reduce((total, row) => total + safeNum(row.songCount), 0),
+    google: rows.value.filter(row => row.source === 'google').length
+}));
 
 watch([search, filter], () => { limit.value = PAGE_SIZE; });
 
-// Miniatures introuvables : remplacées par l'icône du type
-const brokenCovers = ref(new Set());
-
-function markBroken(key) {
-    brokenCovers.value = new Set(brokenCovers.value).add(key);
-}
-
-function safeUrl(url) {
-    return typeof url === 'string' && /^https?:\/\//i.test(url);
-}
-
 async function load() {
     if (loading.value) return;
     loading.value = true;
@@ -170,7 +271,7 @@ async function load() {
     }
 }
 
-async function remove(row) {
+async function removePersonal(row) {
     const ownerName = row.owner.global_name || row.owner.username || row.userId;
     const ok = await confirmRef.value.ask({
         title: "Supprimer la playlist",
@@ -193,135 +294,157 @@ async function remove(row) {
     }
 }
 
+// ----- Playlists partagées des serveurs -----
+const guildsData = ref(null);
+const guildsLoading = ref(false);
+const guildsError = ref(null);
+const guildFilter = ref('all');
+
+const guildFilterOptions = computed(() => {
+    const list = guildsData.value || [];
+    return [
+        { value: 'all', label: "Tous", count: list.length },
+        { value: 'enabled', label: "Activées", icon: "fa-solid fa-toggle-on", count: list.filter(g => g.settings?.enabled).length },
+        { value: 'disabled', label: "Désactivées", icon: "fa-solid fa-toggle-off", count: list.filter(g => !g.settings?.enabled).length }
+    ];
+});
+
+// Chaque serveur garde ses playlists filtrées par la recherche (titre, créateur) ; un serveur dont le nom correspond les montre toutes
+const filteredGuilds = computed(() => {
+    const query = search.value.trim().toLowerCase();
+    const result = [];
+    for (const entry of guildsData.value || []) {
+        if (guildFilter.value === 'enabled' && !entry.settings?.enabled) continue;
+        if (guildFilter.value === 'disabled' && entry.settings?.enabled) continue;
+        const playlists = Array.isArray(entry.playlists) ? entry.playlists : [];
+        const guildMatch = !query || (entry.guildName || "").toLowerCase().includes(query) || entry.guildId.includes(query);
+        const visible = guildMatch ? playlists : playlists.filter(p => (p.title || "").toLowerCase().includes(query)
+            || (p.createdBy?.username || "").toLowerCase().includes(query)
+            || (p.createdBy?.global_name || "").toLowerCase().includes(query));
+        if (!guildMatch && !visible.length) continue;
+        result.push({ ...entry, playlists, visible });
+    }
+    return result;
+});
+
+const guildTotals = computed(() => {
+    const list = guildsData.value || [];
+    const playlists = list.flatMap(g => g.playlists || []);
+    return {
+        guilds: list.length,
+        enabled: list.filter(g => g.settings?.enabled).length,
+        playlists: playlists.length,
+        songs: playlists.reduce((total, p) => total + safeNum(p.songCount), 0)
+    };
+});
+
+async function loadGuilds() {
+    if (guildsLoading.value) return;
+    guildsLoading.value = true;
+    try {
+        const result = await adminRequest("/ADMIN/PLAYLISTS/GUILDS", {}, 20000);
+        guildsData.value = Array.isArray(result) ? result : [];
+        guildsError.value = null;
+    } catch (e) {
+        guildsError.value = describeError(e);
+        if (guildsData.value) adminStore.notifyError(e, "Playlists partagées");
+    } finally {
+        guildsLoading.value = false;
+    }
+}
+
+async function removeShared(entry, playlist) {
+    const ok = await confirmRef.value.ask({
+        title: "Supprimer la playlist partagée",
+        icon: "fa-solid fa-trash",
+        message: `« ${playlist.title || "Sans titre"} » (${safeNum(playlist.songCount)} titre(s)) sera définitivement supprimée du serveur « ${entry.guildName || entry.guildId} » pour tous ses membres.`,
+        confirmLabel: "Supprimer",
+        confirmIcon: "fa-solid fa-trash"
+    });
+    if (!ok) return;
+    try {
+        await adminRequest("/ADMIN/PLAYLISTS/DELETE", { guildId: entry.guildId, playlistId: playlist.playlistId });
+        guildsData.value = (guildsData.value || []).map(g => g.guildId !== entry.guildId ? g
+            : { ...g, playlists: (g.playlists || []).filter(p => p.playlistId !== playlist.playlistId) });
+        adminStore.notify('success', `Playlist partagée « ${playlist.title || "Sans titre"} » supprimée`);
+    } catch (e) {
+        adminStore.notifyError(e, "Suppression de la playlist partagée");
+        if (e?.code === 'NOT_FOUND') loadGuilds();
+    }
+}
+
+// ----- Commun -----
+const scopeOptions = computed(() => [
+    { value: 'personal', label: "Personnelles", icon: "fa-solid fa-user", badge: owners.value ? rows.value.length : null },
+    { value: 'guild', label: "Partagées des serveurs", icon: "fa-solid fa-users-rectangle", badge: guildsData.value ? guildTotals.value.playlists : null }
+]);
+
+const currentLoading = computed(() => (scope.value === 'personal' ? loading.value : guildsLoading.value));
+
+function reload() {
+    if (scope.value === 'personal') load();
+    else loadGuilds();
+}
+
+watch(scope, (value) => {
+    writeLocal(SCOPE_KEY, value);
+    search.value = "";
+    if (value === 'guild' && !guildsData.value) loadGuilds();
+    if (value === 'personal' && !owners.value) load();
+});
+
+// L'option a pu changer depuis la fiche d'un serveur (poussée "/ADMIN/GUILDS/UPDATE") : on relit la liste partagée
+watch(() => adminStore.guilds, () => {
+    if (scope.value === 'guild' && guildsData.value) loadGuilds();
+});
+
+// Miniatures introuvables : remplacées par l'icône du type
+const brokenCovers = ref(new Set());
+
+function markBroken(key) {
+    brokenCovers.value = new Set(brokenCovers.value).add(key);
+}
+
+function safeUrl(url) {
+    return typeof url === 'string' && /^https?:\/\//i.test(url);
+}
+
 const nowDate = ref(Date.now());
 let timer = null;
 
+// Poussée "/ADMIN/PLAYLISTS/UPDATE" {scopes} : on relit seulement la portée affichée, si elle est concernée et déjà chargée
+let stopListening = null;
+function onPlaylistsPushed(data) {
+    const scopes = Array.isArray(data?.scopes) ? data.scopes : ['personal', 'guild'];
+    if (scope.value === 'guild' && scopes.includes('guild') && guildsData.value) loadGuilds();
+    if (scope.value === 'personal' && scopes.includes('personal') && owners.value) load();
+}
+
 onMounted(() => {
-    load();
+    if (scope.value === 'guild') loadGuilds();
+    else load();
     timer = setInterval(() => { nowDate.value = Date.now(); }, 30000);
+    stopListening = adminListen("/ADMIN/PLAYLISTS/UPDATE", onPlaylistsPushed);
 });
 
-onUnmounted(() => clearInterval(timer));
+onUnmounted(() => {
+    clearInterval(timer);
+    stopListening?.();
+});
 </script>
 <style scoped>
-p {
-    margin: 0;
+.scope {
+    align-self: flex-start;
+    max-width: 100%;
 }
 
-.search {
-    min-width: 260px;
+.guild-list {
+    --adm-scroll-max: 320px;
 }
 
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
+.guild-cover {
+    --adm-cover-size: 34px;
 
-.row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    background-color: var(--tertiary);
-    padding: 5px 10px 5px 5px;
-    border-radius: 10px;
-}
-
-.main-info {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-}
-
-.cover {
-    width: 48px;
-    height: 48px;
-    flex-shrink: 0;
-    border-radius: 5px;
-    background-color: var(--secondary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    font-size: 1.3em;
-}
-
-.cover img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.text {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    min-width: 0;
-}
-
-.title {
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.tags {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 5px;
-}
-
-.meta {
-    color: var(--text-secondary);
-    font-size: 0.8em;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.mono {
-    font-family: monospace;
-}
-
-.side {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    flex-shrink: 0;
-}
-
-.link {
-    color: var(--text);
-    font-size: 1.1em;
-}
-
-.link:hover {
-    color: var(--main);
-}
-
-.more {
-    display: flex;
-    justify-content: center;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .search {
-        min-width: 0;
-        flex: 1;
-    }
-
-    .row {
-        flex-direction: column;
-        align-items: stretch;
-        padding: 10px;
-    }
-
-    .side {
-        justify-content: space-between;
-    }
+    font-size: 0.9em;
 }
 </style>
diff --git a/src/components/Admin/AdminRow.vue b/src/components/Admin/AdminRow.vue
new file mode 100644
index 0000000..dba434b
--- /dev/null
+++ b/src/components/Admin/AdminRow.vue
@@ -0,0 +1,85 @@
+<template>
+    <component :is="tag" :class="classes">
+        <div v-if="$slots.media" class="adm-row__media">
+            <slot name="media"></slot>
+        </div>
+        <div class="adm-row__main">
+            <p v-if="title || $slots.title" class="adm-row__title" :title="title || undefined">
+                <slot name="title">{{ title }}</slot>
+            </p>
+            <p v-if="subtitle || $slots.subtitle" class="adm-row__subtitle" :title="subtitle || undefined">
+                <slot name="subtitle">{{ subtitle }}</slot>
+            </p>
+            <slot></slot>
+        </div>
+        <div v-if="$slots.meta" class="adm-row__meta">
+            <slot name="meta"></slot>
+        </div>
+        <div v-if="$slots.actions" class="adm-row__actions">
+            <slot name="actions"></slot>
+        </div>
+    </component>
+</template>
+<script setup>
+/**
+ * Ligne de liste (comptes, serveurs, playlists, métriques…) : media | principal | meta | actions.
+ * Sur une largeur réduite, meta et actions passent à la ligne, alignés à droite.
+ * Dans une AdminList `divided` (carte flush), les lignes sont séparées par des filets.
+ * Une ligne n'est jamais elle-même cliquable : mettre un bouton « Détails » dans `actions`.
+ */
+import { computed, inject } from 'vue';
+import { ADMIN_LIST_KEY, normalizeTone, toneValidator } from './adminUi';
+import './admin.scss';
+
+const props = defineProps({
+    // Par défaut : 'li' dans une AdminList ul/ol, 'div' ailleurs
+    as: {
+        type: String,
+        default: null
+    },
+    title: {
+        type: String,
+        default: null
+    },
+    subtitle: {
+        type: String,
+        default: null
+    },
+    // Liseré coloré à gauche (ex. 'error' pour une valeur invalide) ; 'default' = aucun
+    tone: {
+        type: String,
+        default: 'default',
+        validator: toneValidator
+    },
+    selected: {
+        type: Boolean,
+        default: false
+    },
+    dense: {
+        type: Boolean,
+        default: false
+    },
+    // Fond --secondary (ligne posée directement sur une surface --tertiary)
+    inset: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const list = inject(ADMIN_LIST_KEY, null);
+const tag = computed(() => props.as || list?.itemTag() || 'div');
+
+const classes = computed(() => {
+    const tone = normalizeTone(props.tone);
+    return [
+        'adm-row',
+        `adm-tone-${tone}`,
+        {
+            'adm-row--toned': tone !== 'default',
+            'adm-row--selected': props.selected,
+            'adm-row--dense': props.dense,
+            'adm-row--inset': props.inset
+        }
+    ];
+});
+</script>
diff --git a/src/components/Admin/AdminSection.vue b/src/components/Admin/AdminSection.vue
index d2b4f9a..e5d27c9 100644
--- a/src/components/Admin/AdminSection.vue
+++ b/src/components/Admin/AdminSection.vue
@@ -1,20 +1,32 @@
 <template>
-    <section class="admin-section">
-        <div class="section-header">
-            <div class="section-title">
-                <h2>{{ title }}</h2>
-                <p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
+    <section class="adm-section" :aria-labelledby="ADMIN_SECTION_TITLE_ID">
+        <header class="adm-section__header">
+            <span v-if="resolvedIcon" class="adm-section__chip" aria-hidden="true"><Icon :icon="resolvedIcon"/></span>
+            <div class="adm-section__heading">
+                <h2 :id="ADMIN_SECTION_TITLE_ID" class="adm-section__title" tabindex="-1">{{ displayTitle }}</h2>
+                <p v-if="subtitle" class="adm-section__subtitle">{{ subtitle }}</p>
             </div>
-            <div class="section-actions">
+            <div v-if="$slots.actions" class="adm-section__actions">
                 <slot name="actions"></slot>
             </div>
+        </header>
+        <div class="adm-section__body">
+            <slot></slot>
         </div>
-        <slot></slot>
     </section>
 </template>
 <script setup>
-// En-tête commun des sections d'administration (titre h2 avec emoji, comme Historique / Conseils)
-defineProps({
+/**
+ * En-tête commun des sections d'administration : pastille d'icône, titre h2, sous-titre, actions globales.
+ * Sans prop `icon`, l'icône de la section active (navigation) est reprise et un éventuel emoji
+ * en tête du titre est retiré (anciens titres « 📊 Vue d'ensemble »).
+ * Contenu : AdminBanner / AdminStatRow / AdminToolbar / AdminGrid, empilés avec un écart de 14 px.
+ */
+import { computed, inject } from 'vue';
+import { ADMIN_NAV_KEY, ADMIN_SECTION_TITLE_ID, stripLeadingEmoji } from './adminUi';
+import './admin.scss';
+
+const props = defineProps({
     title: {
         type: String,
         required: true
@@ -22,56 +34,15 @@ defineProps({
     subtitle: {
         type: String,
         default: null
+    },
+    icon: {
+        type: String,
+        default: null
     }
 });
+
+const nav = inject(ADMIN_NAV_KEY, null);
+
+const resolvedIcon = computed(() => props.icon || nav?.current?.value?.icon || null);
+const displayTitle = computed(() => (resolvedIcon.value ? stripLeadingEmoji(props.title) : props.title));
 </script>
-<style scoped>
-.admin-section {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    min-height: 100%;
-}
-
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 15px;
-    flex-wrap: wrap;
-}
-
-.section-title {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-}
-
-h2 {
-    font-size: 1.7em;
-    margin: 0;
-}
-
-.subtitle {
-    margin: 0;
-    font-size: 0.9em;
-    color: var(--text-secondary);
-}
-
-.section-actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    h2 {
-        font-size: 1.4em;
-    }
-
-    .section-actions {
-        width: 100%;
-    }
-}
-</style>
diff --git a/src/components/Admin/AdminServerDetail.vue b/src/components/Admin/AdminServerDetail.vue
index cd6d412..6d11297 100644
--- a/src/components/Admin/AdminServerDetail.vue
+++ b/src/components/Admin/AdminServerDetail.vue
@@ -1,134 +1,180 @@
 <template>
-    <Modal ref="modal" icon="fa-solid fa-server" :title="guild ? guild.name : 'Serveur'">
+    <Modal ref="modal" size="lg" icon="fa-solid fa-server" :title="guild ? (guild.name || 'Serveur') : 'Serveur'" @close="onClose">
         <AdminState :loading="loading && !detail" :error="!detail ? error : null" :empty="!detail" empty-text="Aucun détail disponible" @retry="load()">
-            <ModalTree title="Informations" icon="fa-solid fa-circle-info">
-                <div class="tree-content">
-                    <div class="head">
-                        <ServerAvatar :src="detail.icon" :server-id="detail.id"/>
-                        <div class="head-info">
-                            <p class="name">{{ detail.name }}</p>
-                            <p class="id">{{ detail.id }}</p>
-                            <p v-if="detail.description" class="description">{{ detail.description }}</p>
+            <div class="detail">
+                <header class="head">
+                    <ServerAvatar class="adm-avatar adm-avatar--lg" :src="detail.icon" :server-id="detail.id" alt=""/>
+                    <div class="head__info">
+                        <p class="head__name">{{ detail.name || "Serveur sans nom" }}</p>
+                        <p class="adm-hint adm-mono">{{ detail.id }}</p>
+                        <p v-if="detail.description" class="adm-hint">{{ detail.description }}</p>
+                    </div>
+                    <div class="adm-tags head__tags">
+                        <Tag :tone="detail.player ? 'success' : 'default'" :icon="detail.player ? 'fa-solid fa-music' : 'fa-solid fa-volume-xmark'">
+                            {{ detail.player ? playerStatus(detail.player.status).label : "Player hors ligne" }}
+                        </Tag>
+                        <Tag v-if="detail.isMediaGuild" color="var(--mod-color)" icon="fa-solid fa-photo-film">Serveur de médias</Tag>
+                    </div>
+                </header>
+
+                <AdminBanner v-if="detail.missingPermissions?.length" tone="warning" title="Permissions manquantes">
+                    Subsonics ne dispose pas de : {{ detail.missingPermissions.join(", ") }}. Certaines fonctions peuvent échouer sur ce serveur.
+                </AdminBanner>
+
+                <AdminStatRow :columns="4" label="Chiffres du serveur">
+                    <AdminStat label="Membres" :value="safeNum(detail.memberCount)" icon="fa-solid fa-users"/>
+                    <AdminStat label="Inscrits" :value="safeNum(detail.registeredMembers)" icon="fa-solid fa-id-card" tone="admin"/>
+                    <AdminStat label="Commandes" :value="safeNum(detail.stats?.commands)" icon="fa-solid fa-terminal" tone="info"/>
+                    <AdminStat label="Écoute" :value="formatUptime(detail.stats?.secondsPlayed)" icon="fa-solid fa-headphones" tone="main"
+                        :sub="safeNum(detail.stats?.musicPlayed) + ' titre(s) joué(s)'"/>
+                </AdminStatRow>
+
+                <AdminGrid>
+                    <AdminCard title="Informations" icon="fa-solid fa-circle-info" :span="6" :span-sm="12">
+                        <AdminKv label="Propriétaire">
+                            <AdminUserLine v-if="detail.owner?.username" :user="detail.owner" size="28px"/>
+                            <span v-else class="adm-mono">{{ detail.owner?.id || "Inconnu" }}</span>
+                        </AdminKv>
+                        <AdminKv label="En ligne sur le web" mono :value="safeNum(detail.webUsersOnline)"/>
+                        <AdminKv label="Bot arrivé le" :value="formatDate(detail.joinedAt)"/>
+                        <AdminKv label="Serveur créé le" :value="formatDate(detail.createdAt)"/>
+                        <div v-if="detail.features?.length" class="adm-chips" aria-label="Fonctionnalités Discord">
+                            <span v-for="feature in detail.features" :key="feature" class="adm-chip">{{ feature }}</span>
                         </div>
-                    </div>
-                    <AdminKv label="Propriétaire">
-                        <AdminUserLine v-if="detail.owner?.username" :user="detail.owner" size="30px"/>
-                        <span v-else class="mono">{{ detail.owner?.id || "Inconnu" }}</span>
-                    </AdminKv>
-                    <AdminKv label="Membres" mono :value="safeNum(detail.memberCount)"/>
-                    <AdminKv label="Membres inscrits" mono :value="safeNum(detail.registeredMembers)"/>
-                    <AdminKv label="En ligne sur le web" mono :value="safeNum(detail.webUsersOnline)"/>
-                    <AdminKv label="Bot arrivé le" :value="formatDate(detail.joinedAt)"/>
-                    <AdminKv label="Serveur créé le" :value="formatDate(detail.createdAt)"/>
-                    <AdminKv v-if="detail.player" label="Player">
-                        <Tag :color="playerStatus(detail.player.status).color">{{ playerStatus(detail.player.status).label }}</Tag>
-                    </AdminKv>
-                    <Error v-if="detail.missingPermissions?.length">Permissions manquantes : {{ detail.missingPermissions.join(", ") }}</Error>
-                    <div v-if="detail.features?.length" class="tags">
-                        <Tag v-for="feature in detail.features" :key="feature" color="var(--text-secondary)" icon="fa-solid fa-tag">{{ feature }}</Tag>
-                    </div>
-                </div>
-            </ModalTree>
+                    </AdminCard>
 
-            <ModalTree title="Statistiques" icon="fa-solid fa-chart-simple">
-                <div class="tree-content">
-                    <div class="stats">
-                        <AdminStat label="Commandes" :value="safeNum(detail.stats?.commands)" icon="fa-solid fa-terminal"/>
-                        <AdminStat label="Titres joués" :value="safeNum(detail.stats?.musicPlayed)" icon="fa-solid fa-music"/>
-                        <AdminStat label="Temps d'écoute" :value="formatUptime(detail.stats?.secondsPlayed)" icon="fa-solid fa-clock"/>
-                    </div>
-                    <div v-if="detail.metrics?.length" class="metrics">
-                        <div v-for="metric in detail.metrics" :key="metric.name" class="metric">
-                            <div class="metric-info">
-                                <p class="metric-name">{{ metric.description || metric.name }}</p>
-                                <p class="metric-id">{{ metric.name }}</p>
+                    <AdminCard title="Accès" icon="fa-solid fa-shield-halved" color="var(--owner-color)" :span="6" :span-sm="12"
+                        subtitle="Restreindre Subsonics à un rôle">
+                        <AdminField label="Rôle sécurisé" hint="Seuls les membres possédant ce rôle peuvent utiliser Subsonics sur ce serveur."
+                            :dirty="roleDirty" v-slot="{ id, describedby }">
+                            <select :id="id" v-model="selectedRole" :aria-describedby="describedby" :disabled="savingRole">
+                                <option :value="null">Aucun rôle (tout le monde)</option>
+                                <!-- @everyone équivaut à « aucun rôle » côté serveur : pas d'option en double -->
+                                <option v-for="role in sortedRoles" :key="role.id" :value="role.id">{{ role.name }}</option>
+                            </select>
+                        </AdminField>
+                        <template #footer>
+                            <Button size="sm" variant="ghost" :disabled="!roleDirty || savingRole" @click="selectedRole = detail.secureRole?.id ?? null">Annuler</Button>
+                            <Button size="sm" icon="fa-solid fa-check" :loading="savingRole" :disabled="!roleDirty" @click="saveRole()">Enregistrer</Button>
+                        </template>
+                    </AdminCard>
+
+                    <AdminCard title="Playlists partagées" icon="fa-solid fa-users-rectangle" tone="main" :span="6" :span-sm="12"
+                        :subtitle="safeNum(shared.count) + ' playlist(s) enregistrée(s) sur ce serveur'" :busy="savingShared">
+                        <Switch :model-value="shared.enabled" :disabled="savingShared" label="Activer les playlists du serveur"
+                            description="Les membres voient et lisent des playlists communes à ce serveur. Désactiver les masque sans rien supprimer."
+                            @update:model-value="saveShared({ enabled: $event })"/>
+                        <AdminField plain label="Qui peut les modifier ?" v-slot="{ labelledby }">
+                            <SegmentedControl :model-value="shared.editors" :options="editorOptions" size="sm" :aria-labelledby="labelledby"
+                                @update:model-value="saveShared({ editors: $event })"/>
+                        </AdminField>
+                    </AdminCard>
+
+                    <AdminCard title="Salons vocaux" icon="fa-solid fa-volume-high" tone="info" :span="6" :span-sm="12" flush
+                        :subtitle="(detail.voiceChannels?.length || 0) + ' salon(s)'">
+                        <AdminState :empty="!detail.voiceChannels?.length" :retry="false" empty-icon="fa-solid fa-volume-xmark" empty-text="Aucun salon vocal visible">
+                            <div class="adm-scroll channels">
+                                <AdminList divided label="Salons vocaux">
+                                    <AdminRow v-for="channel in detail.voiceChannels" :key="channel.id" dense :selected="isPlayerChannel(channel)">
+                                        <template #title><Icon icon="fa-solid fa-volume-high" aria-hidden="true"/> {{ channel.name }}</template>
+                                        <template #meta>
+                                            <Tag v-if="isPlayerChannel(channel)" tone="main" icon="fa-solid fa-music">Subsonics</Tag>
+                                            <span class="adm-mono">{{ safeNum(channel.members) }} membre(s)</span>
+                                        </template>
+                                    </AdminRow>
+                                </AdminList>
                             </div>
-                            <Tag v-if="metric.invalid" color="var(--text-error)" icon="fa-solid fa-triangle-exclamation">Invalide</Tag>
-                            <p class="metric-value">{{ metric.name.includes('Seconds') ? formatUptime(metric.value) : safeNum(metric.value) }}</p>
+                        </AdminState>
+                    </AdminCard>
+
+                    <AdminCard title="Membres inscrits" icon="fa-solid fa-users" tone="admin" :span="12" flush
+                        :subtitle="filteredMembers.length + ' sur ' + (detail.members?.length || 0)">
+                        <div class="members-toolbar">
+                            <AdminToolbar v-model:search="memberSearch" search-label="Rechercher un membre" search-placeholder="Nom, identifiant ou ID…"/>
                         </div>
-                    </div>
-                </div>
-            </ModalTree>
-
-            <ModalTree title="Rôle sécurisé" icon="fa-solid fa-shield-halved">
-                <div class="tree-content">
-                    <p class="hint">Seuls les membres possédant ce rôle peuvent utiliser Subsonics sur ce serveur.</p>
-                    <select v-model="selectedRole" class="select">
-                        <option :value="null">Aucun rôle (tout le monde)</option>
-                        <!-- @everyone équivaut à « aucun rôle » côté serveur : pas d'option en double -->
-                        <option v-for="role in sortedRoles" :key="role.id" :value="role.id">{{ role.name }}</option>
-                    </select>
-                    <Button icon="fa-solid fa-rotate" :disabled="savingRole || selectedRole === (detail.secureRole?.id ?? null)" @click="saveRole()">Mettre à jour</Button>
-                </div>
-            </ModalTree>
-
-            <ModalTree title="Salons vocaux" icon="fa-solid fa-volume-high">
-                <div class="tree-content">
-                    <Info v-if="!detail.voiceChannels?.length" secondary>Aucun salon vocal</Info>
-                    <div v-for="channel in detail.voiceChannels" :key="channel.id" class="row">
-                        <span><Icon icon="fa-solid fa-volume-high"/> {{ channel.name }}</span>
-                        <span class="row-side">
-                            <Tag v-if="detail.player && (detail.player.connection?.channelId || detail.player.channelId) === channel.id" color="var(--main)" icon="fa-solid fa-music">Subsonics</Tag>
-                            <span class="mono">{{ safeNum(channel.members) }} membre(s)</span>
-                        </span>
-                    </div>
-                </div>
-            </ModalTree>
-
-            <ModalTree title="Membres inscrits" icon="fa-solid fa-users">
-                <div class="tree-content">
-                    <input type="text" v-model="memberSearch" placeholder="Rechercher un membre"/>
-                    <Info v-if="!filteredMembers.length" secondary>Aucun membre inscrit</Info>
-                    <div class="members">
-                        <div v-for="member in filteredMembers" :key="member.id" class="member">
-                            <div class="member-main">
-                                <AdminUserLine :user="member" :online="member.online"/>
-                                <div class="tags">
-                                    <Tag v-if="member.isAdmin" color="var(--admin-color)">Administrateur</Tag>
-                                    <Tag v-else-if="member.isOwner" color="var(--owner-color)">Propriétaire</Tag>
-                                    <Tag v-else-if="member.isMod" color="var(--mod-color)">Modérateur</Tag>
-                                    <Tag v-else color="var(--text-secondary)">Membre</Tag>
-                                    <Tag v-if="member.isBanned" color="var(--text-error)">Banni</Tag>
-                                </div>
-                            </div>
-                            <div v-if="!member.isAdmin && !member.isOwner && member.id !== myId" class="actions">
-                                <IconAction title="Bannir / Débannir de ce serveur" icon="fa-solid fa-hammer"
-                                    :color="member.isBanned ? 'var(--text-error)' : 'var(--text-tertiary)'" @click="toggleMember(member, 'ban')"/>
-                                <IconAction title="Nommer / Retirer modérateur" icon="fa-solid fa-user-shield"
-                                    :color="member.isMod ? 'var(--mod-color)' : 'var(--text-tertiary)'" @click="toggleMember(member, 'mod')"/>
+                        <AdminState :empty="!filteredMembers.length" :retry="false" empty-icon="fa-solid fa-user-slash"
+                            :empty-text="memberSearch ? 'Aucun membre ne correspond à cette recherche' : 'Aucun membre inscrit sur Subsonics'">
+                            <div class="adm-scroll members">
+                                <AdminList divided label="Membres inscrits">
+                                    <AdminRow v-for="member in filteredMembers" :key="member.id" dense>
+                                        <AdminUserLine :user="member" :online="member.online" size="34px"/>
+                                        <template #meta>
+                                            <Tag v-if="member.isAdmin" color="var(--admin-color)">Administrateur</Tag>
+                                            <Tag v-else-if="member.isOwner" color="var(--owner-color)">Propriétaire</Tag>
+                                            <Tag v-else-if="member.isMod" color="var(--mod-color)">Modérateur</Tag>
+                                            <Tag v-if="member.isBanned" tone="error" icon="fa-solid fa-ban">Banni</Tag>
+                                        </template>
+                                        <template v-if="canManage(member)" #actions>
+                                            <Button size="sm" variant="secondary" icon="fa-solid fa-user-shield" :aria-pressed="member.isMod ? 'true' : 'false'"
+                                                :disabled="memberBusy.has(member.id) || member.isBanned"
+                                                :aria-label="(member.isMod ? 'Retirer le rôle de modérateur à ' : 'Nommer modérateur ') + memberName(member)"
+                                                @click="toggleMember(member, 'mod')">{{ member.isMod ? "Retirer modo" : "Modérateur" }}</Button>
+                                            <Button size="sm" :variant="member.isBanned ? 'secondary' : 'danger'" :icon="member.isBanned ? 'fa-solid fa-unlock' : 'fa-solid fa-ban'"
+                                                :disabled="memberBusy.has(member.id)"
+                                                :aria-label="(member.isBanned ? 'Débannir ' : 'Bannir ') + memberName(member) + ' de ce serveur'"
+                                                @click="toggleMember(member, 'ban')">{{ member.isBanned ? "Débannir" : "Bannir" }}</Button>
+                                        </template>
+                                    </AdminRow>
+                                </AdminList>
                             </div>
+                        </AdminState>
+                    </AdminCard>
+
+                    <AdminCard v-if="detail.metrics?.length" title="Statistiques détaillées" icon="fa-solid fa-chart-simple" :span="12" flush
+                        collapsible :default-open="false" persist-key="server-metrics" :subtitle="detail.metrics.length + ' métrique(s)'">
+                        <div class="adm-scroll">
+                            <AdminList divided label="Métriques du serveur">
+                                <AdminRow v-for="metric in detail.metrics" :key="metric.name" dense :tone="metric.invalid ? 'error' : 'default'"
+                                    :title="metric.description || metric.name" :subtitle="metric.name">
+                                    <template #meta>
+                                        <Tag v-if="metric.invalid" tone="error" icon="fa-solid fa-triangle-exclamation">Invalide</Tag>
+                                        <span class="adm-mono metric-value">{{ metric.name.includes('Seconds') ? formatUptime(metric.value) : safeNum(metric.value) }}</span>
+                                    </template>
+                                </AdminRow>
+                            </AdminList>
                         </div>
-                    </div>
-                </div>
-            </ModalTree>
+                    </AdminCard>
 
-            <ModalTree title="Zone dangereuse" icon="fa-solid fa-triangle-exclamation">
-                <div class="tree-content">
-                    <p class="hint">Faire quitter le bot supprime sa présence sur le serveur : il faudra le réinviter pour l'utiliser à nouveau.</p>
-                    <Info v-if="detail.isMediaGuild" secondary>Le serveur de médias est protégé et ne peut pas être quitté.</Info>
-                    <Button icon="fa-solid fa-right-from-bracket" :disabled="detail.isMediaGuild || leaving" @click="leaveGuild()">Faire quitter le bot</Button>
-                </div>
-            </ModalTree>
+                    <AdminCard title="Zone dangereuse" icon="fa-solid fa-triangle-exclamation" tone="error" :span="12">
+                        <p class="adm-text">Faire quitter le bot supprime sa présence sur le serveur : il faudra le réinviter pour l'utiliser à nouveau.</p>
+                        <p v-if="detail.isMediaGuild" class="adm-hint">Le serveur de médias est protégé et ne peut pas être quitté.</p>
+                        <template #footer>
+                            <Button variant="danger" icon="fa-solid fa-right-from-bracket" :loading="leaving" :disabled="detail.isMediaGuild" @click="leaveGuild()">Faire quitter le bot</Button>
+                        </template>
+                    </AdminCard>
+                </AdminGrid>
+            </div>
         </AdminState>
     </Modal>
     <AdminConfirm ref="confirmRef"/>
 </template>
 <script setup>
+/**
+ * Fenêtre de gestion d'un serveur : chiffres, informations, rôle sécurisé, playlists partagées,
+ * salons vocaux, membres inscrits (modération), métriques, départ du bot.
+ * open(guild) avec au moins { id, name }.
+ */
 import { computed, ref } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { useUserStore } from '@/stores/userStore';
 import { adminRequest, describeError } from '@/utils/AdminRequest';
 import Modal from '@/components/UI/Modal.vue';
-import ModalTree from '@/components/UI/ModalTree.vue';
 import Button from '@/components/UI/Button.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
-import Error from '@/components/UI/Error.vue';
-import IconAction from '@/components/UI/IconAction.vue';
+import Switch from '@/components/UI/Switch.vue';
+import SegmentedControl from '@/components/UI/SegmentedControl.vue';
 import ServerAvatar from '@/components/UI/ServerAvatar.vue';
 import AdminState from './AdminState.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminGrid from './AdminGrid.vue';
+import AdminCard from './AdminCard.vue';
 import AdminKv from './AdminKv.vue';
+import AdminField from './AdminField.vue';
 import AdminStat from './AdminStat.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminToolbar from './AdminToolbar.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
 import AdminUserLine from './AdminUserLine.vue';
 import AdminConfirm from './AdminConfirm.vue';
 import { safeNum, formatDate, formatUptime, playerStatus } from './adminFormat';
@@ -145,18 +191,42 @@ const loading = ref(false);
 const error = ref(null);
 const selectedRole = ref(null);
 const savingRole = ref(false);
+const savingShared = ref(false);
 const leaving = ref(false);
 const memberSearch = ref("");
+const memberBusy = ref(new Set());
+
+const editorOptions = [
+    { value: 'members', label: "Tous les membres", icon: "fa-solid fa-users" },
+    { value: 'mods', label: "Modérateurs", icon: "fa-solid fa-user-shield" }
+];
 
 const sortedRoles = computed(() => (detail.value?.roles || []).filter(role => role.name !== "@everyone").sort((a, b) => safeNum(b.position) - safeNum(a.position)));
+const roleDirty = computed(() => !!detail.value && selectedRole.value !== (detail.value.secureRole?.id ?? null));
+const shared = computed(() => detail.value?.sharedPlaylists || { enabled: false, editors: 'members', count: 0 });
 
 const filteredMembers = computed(() => {
     const query = memberSearch.value.trim().toLowerCase();
-    const list = detail.value?.members || [];
+    // Rôles importants d'abord, puis en ligne, puis ordre alphabétique
+    const rank = (m) => (m.isAdmin ? 0 : m.isOwner ? 1 : m.isMod ? 2 : 3);
+    const list = [...(detail.value?.members || [])].sort((a, b) => rank(a) - rank(b) || (b.online - a.online) || memberName(a).localeCompare(memberName(b)));
     if (!query) return list;
     return list.filter(m => [m.id, m.username, m.global_name].some(v => (v || "").toLowerCase().includes(query)));
 });
 
+function memberName(member) {
+    return member.global_name || member.username || member.id;
+}
+
+function canManage(member) {
+    return !member.isAdmin && !member.isOwner && member.id !== myId.value;
+}
+
+function isPlayerChannel(channel) {
+    const player = detail.value?.player;
+    return !!player && (player.connection?.channelId || player.channelId) === channel.id;
+}
+
 async function load() {
     if (!guild.value || loading.value) return;
     loading.value = true;
@@ -176,10 +246,15 @@ function open(target) {
     detail.value = null;
     error.value = null;
     memberSearch.value = "";
+    memberBusy.value = new Set();
     modal.value?.open();
     load();
 }
 
+function onClose() {
+    memberSearch.value = "";
+}
+
 async function saveRole() {
     savingRole.value = true;
     try {
@@ -194,19 +269,52 @@ async function saveRole() {
     }
 }
 
+// patch : { enabled } ou { editors } ; l'état affiché suit la réponse du serveur
+async function saveShared(patch) {
+    if (savingShared.value || !detail.value) return;
+    savingShared.value = true;
+    try {
+        const result = await adminRequest("/ADMIN/GUILDS/SET_SHARED_PLAYLISTS", { guildId: detail.value.id, ...patch });
+        const next = result?.sharedPlaylists;
+        if (next) detail.value = { ...detail.value, sharedPlaylists: next };
+        if ('enabled' in patch) adminStore.notify('success', next?.enabled ? "Playlists partagées activées" : "Playlists partagées désactivées (rien n'est supprimé)");
+        else adminStore.notify('success', next?.editors === 'mods' ? "Seuls les modérateurs modifient les playlists partagées" : "Tous les membres peuvent modifier les playlists partagées");
+    } catch (e) {
+        adminStore.notifyError(e, "Playlists partagées");
+    } finally {
+        savingShared.value = false;
+    }
+}
+
 async function toggleMember(member, kind) {
     const event = kind === 'ban' ? "/ADMIN/USERS/SET_GUILD_BAN" : "/ADMIN/USERS/SET_GUILD_MOD";
-    const value = kind === 'ban' ? !member.isBanned : !member.isMod;
+    const field = kind === 'ban' ? 'isBanned' : 'isMod';
+    const value = !member[field];
+    if (kind === 'ban' && value) {
+        const ok = await confirmRef.value.ask({
+            title: "Bannir du serveur",
+            icon: "fa-solid fa-ban",
+            message: `${memberName(member)} ne pourra plus utiliser Subsonics sur « ${detail.value.name} ».`,
+            confirmLabel: "Bannir",
+            confirmIcon: "fa-solid fa-ban"
+        });
+        if (!ok) return;
+    }
+    memberBusy.value = new Set(memberBusy.value).add(member.id);
     try {
         await adminRequest(event, { userId: member.id, guildId: detail.value.id, value });
         // Mise à jour locale : le résumé renvoyé est global, on ne garde que l'état de ce serveur
         detail.value = {
             ...detail.value,
-            members: detail.value.members.map(m => m.id === member.id ? { ...m, [kind === 'ban' ? 'isBanned' : 'isMod']: value } : m)
+            members: detail.value.members.map(m => m.id === member.id ? { ...m, [field]: value } : m)
         };
-        adminStore.notify('success', `${member.global_name || member.username} : ${kind === 'ban' ? (value ? "banni du serveur" : "débanni du serveur") : (value ? "nommé modérateur" : "n'est plus modérateur")}`);
+        adminStore.notify('success', `${memberName(member)} : ${kind === 'ban' ? (value ? "banni du serveur" : "débanni du serveur") : (value ? "nommé modérateur" : "n'est plus modérateur")}`);
     } catch (e) {
         adminStore.notifyError(e, kind === 'ban' ? "Bannissement" : "Modération");
+    } finally {
+        const next = new Set(memberBusy.value);
+        next.delete(member.id);
+        memberBusy.value = next;
     }
 }
 
@@ -237,165 +345,59 @@ async function leaveGuild() {
 defineExpose({ open });
 </script>
 <style scoped>
-.tree-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin: 10px 0 15px 0;
-}
-
 p {
     margin: 0;
 }
 
+.detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--adm-gap);
+    min-width: 0;
+}
+
 .head {
     display: flex;
     align-items: center;
-    gap: 10px;
+    flex-wrap: wrap;
+    gap: 12px;
 }
 
-.head-info {
+.head__info {
     display: flex;
     flex-direction: column;
     gap: 3px;
+    flex: 1 1 220px;
     min-width: 0;
 }
 
-.name {
-    font-weight: 600;
+.head__name {
+    font-size: 1.1em;
+    font-weight: 700;
+    overflow-wrap: anywhere;
 }
 
-.id,
-.metric-id {
-    font-size: 0.7em;
-    color: var(--text-secondary);
-    font-family: monospace;
-    word-break: break-all;
+.head__tags {
+    margin-left: auto;
 }
 
-.description,
-.hint {
-    font-size: 0.85em;
-    color: var(--text-secondary);
-}
-
-.mono {
-    font-family: monospace;
-}
-
-.tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
-}
-
-.metrics {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    max-height: 30vh;
-    overflow-y: auto;
-}
-
-.metric {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 10px;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-}
-
-.metric-info {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-}
-
-.metric-name {
-    font-weight: bold;
-    font-size: 0.9em;
-}
-
-.metric-value {
-    background-color: var(--secondary);
-    padding: 5px;
-    border-radius: 5px;
-    font-family: monospace;
-}
-
-.select {
-    background-color: var(--tertiary);
-    color: var(--text);
-    border: none;
-    border-radius: 5px;
-    padding: 7px;
-    font-family: 'Inter', sans-serif;
-    outline: none;
-}
-
-.row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 7px 10px;
-    font-size: 0.9em;
-}
-
-.row-side {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: var(--text-secondary);
+.channels {
+    --adm-scroll-max: 260px;
 }
 
 .members {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    max-height: 35vh;
-    overflow-y: auto;
+    --adm-scroll-max: 380px;
 }
 
-.member {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    background-color: var(--tertiary);
-    padding: 5px 10px 5px 5px;
-    border-radius: 10px;
+.members-toolbar {
+    padding: 10px var(--adm-pad);
+    border-bottom: 1px solid var(--adm-border);
 }
 
-.member-main {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-    flex-wrap: wrap;
-}
-
-.actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .member-main {
-        flex-direction: column;
-        align-items: flex-start;
-    }
+.metric-value {
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+    background-color: var(--adm-inset);
+    color: var(--text);
 }
 </style>
diff --git a/src/components/Admin/AdminServers.vue b/src/components/Admin/AdminServers.vue
index 22af00f..f16e54b 100644
--- a/src/components/Admin/AdminServers.vue
+++ b/src/components/Admin/AdminServers.vue
@@ -1,158 +1,133 @@
 <template>
-    <AdminSection title="🏠 Serveurs" :subtitle="adminStore.guilds.length + ' serveur(s) Discord accueillent Subsonics'">
-        <template #actions>
-            <input type="text" class="search" v-model="search" placeholder="Rechercher un serveur (nom ou ID)"/>
-            <Button icon="fa-solid fa-rotate" :disabled="adminStore.guildsLoading" @click="adminStore.fetchGuilds(true)">Rafraîchir</Button>
-        </template>
+    <AdminSection title="Serveurs" subtitle="Les serveurs Discord qui accueillent Subsonics">
+        <AdminStatRow :columns="4" label="Résumé des serveurs">
+            <AdminStat label="Serveurs" :value="adminStore.guilds.length" icon="fa-solid fa-server" tone="warning"
+                :sub="totals.members + ' membre(s) au total'"/>
+            <AdminStat label="Players actifs" :value="totals.players" icon="fa-solid fa-music" tone="main" to="players"/>
+            <AdminStat label="Membres inscrits" :value="totals.registered" icon="fa-solid fa-id-card" tone="admin"
+                :sub="totals.online + ' en ligne sur le web'"/>
+            <AdminStat label="Permissions manquantes" :value="counts.issues" icon="fa-solid fa-triangle-exclamation"
+                :tone="counts.issues ? 'error' : 'success'" :sub="counts.issues ? 'Serveur(s) à corriger' : 'Tout est en ordre'"/>
+        </AdminStatRow>
+
+        <AdminToolbar v-model:search="search" search-label="Rechercher un serveur" search-placeholder="Nom ou ID du serveur…" label="Filtres des serveurs">
+            <AdminPills v-model="filter" :options="filterOptions" label="Afficher"/>
+            <template #end>
+                <Button variant="secondary" icon="fa-solid fa-rotate" :loading="adminStore.guildsLoading" @click="adminStore.fetchGuilds(true)">Rafraîchir</Button>
+            </template>
+        </AdminToolbar>
 
         <AdminState :loading="!adminStore.guildsLoaded && adminStore.guildsLoading"
             :error="!adminStore.guildsLoaded ? adminStore.guildsError : null"
-            :empty="filtered.length === 0"
-            :empty-text="search ? 'Aucun serveur ne correspond à cette recherche' : 'Subsonics n\'est présent sur aucun serveur'"
+            :empty="adminStore.guildsLoaded && filtered.length === 0"
+            :empty-icon="adminStore.guilds.length ? 'fa-solid fa-filter' : 'fa-solid fa-server'"
+            :empty-text="adminStore.guilds.length ? 'Aucun serveur ne correspond à ces critères' : 'Subsonics n\'est présent sur aucun serveur'"
             @retry="adminStore.fetchGuilds()">
-            <div class="servers-list">
-                <Box v-for="guild in filtered" :key="guild.id" level="second" padding="closed" no-shadow class="server-item">
-                    <div class="server-main">
-                        <ServerAvatar :src="guild.icon" :server-id="guild.id"/>
-                        <div class="server-info">
-                            <p class="name">{{ guild.name }}</p>
-                            <p class="data">
-                                <Icon style="font-size: 10px;" :color="guild.player ? 'var(--mod-color)' : 'var(--text-error)'" icon="fa-solid fa-circle"/>
-                                {{ guild.player ? "Player connecté" : "Player hors ligne" }} - {{ safeNum(guild.memberCount) }} membres
-                            </p>
-                            <div class="tags">
-                                <Tag color="var(--admin-color)" icon="fa-solid fa-id-card">{{ safeNum(guild.registeredMembers) }} inscrit(s)</Tag>
-                                <Tag v-if="guild.webUsersOnline" color="var(--text-success)" icon="fa-solid fa-globe">{{ guild.webUsersOnline }} en ligne</Tag>
-                                <Tag v-if="guild.secureRole" color="var(--owner-color)" icon="fa-solid fa-shield-halved">{{ guild.secureRole.name }}</Tag>
-                                <Tag v-if="guild.isMediaGuild" color="var(--mod-color)" icon="fa-solid fa-photo-film">Serveur de médias</Tag>
-                                <Tag v-if="guild.missingPermissions?.length" color="var(--text-error)" icon="fa-solid fa-triangle-exclamation">{{ guild.missingPermissions.length }} permission(s) manquante(s)</Tag>
-                            </div>
+            <template v-if="adminStore.guilds.length" #empty>
+                <Button size="sm" variant="secondary" icon="fa-solid fa-filter-circle-xmark" @click="resetFilters()">Réinitialiser les filtres</Button>
+            </template>
+            <AdminCard title="Liste des serveurs" icon="fa-solid fa-list" :span="12" flush :busy="adminStore.guildsLoading"
+                :subtitle="filtered.length + ' serveur(s) affiché(s) sur ' + adminStore.guilds.length">
+                <AdminList divided label="Serveurs">
+                    <AdminRow v-for="guild in filtered" :key="guild.id" :tone="guild.missingPermissions?.length ? 'warning' : 'default'">
+                        <template #media>
+                            <ServerAvatar class="adm-avatar" :src="guild.icon" :server-id="guild.id" alt=""/>
+                        </template>
+                        <template #title>{{ guild.name || "Serveur sans nom" }}</template>
+                        <template #subtitle>
+                            {{ safeNum(guild.memberCount) }} membre(s) · {{ safeNum(guild.registeredMembers) }} inscrit(s)<span class="adm-mono"> · {{ guild.id }}</span>
+                        </template>
+                        <div class="adm-tags">
+                            <Tag :tone="guild.player ? 'success' : 'default'" :icon="guild.player ? 'fa-solid fa-music' : 'fa-solid fa-volume-xmark'">
+                                {{ guild.player ? playerStatus(guild.player.status).label : "Player hors ligne" }}
+                            </Tag>
+                            <Tag v-if="guild.webUsersOnline" tone="success" icon="fa-solid fa-globe">{{ guild.webUsersOnline }} en ligne</Tag>
+                            <Tag v-if="guild.sharedPlaylists?.enabled" tone="main" icon="fa-solid fa-users-rectangle">
+                                {{ safeNum(guild.sharedPlaylists.count) }} playlist(s) partagée(s)
+                            </Tag>
+                            <Tag v-if="guild.secureRole" color="var(--owner-color)" icon="fa-solid fa-shield-halved">Rôle {{ guild.secureRole.name }}</Tag>
+                            <Tag v-if="guild.isMediaGuild" color="var(--mod-color)" icon="fa-solid fa-photo-film">Serveur de médias</Tag>
+                            <Tag v-if="guild.missingPermissions?.length" tone="warning" icon="fa-solid fa-triangle-exclamation">
+                                {{ guild.missingPermissions.length }} permission(s) manquante(s)
+                            </Tag>
                         </div>
-                    </div>
-                    <div class="server-side">
-                        <p class="server-stats">
-                            <span title="Commandes"><Icon icon="fa-solid fa-terminal"/> {{ safeNum(guild.stats?.commands) }}</span>
-                            <span title="Titres joués"><Icon icon="fa-solid fa-music"/> {{ safeNum(guild.stats?.musicPlayed) }}</span>
-                        </p>
-                        <Button color-lower icon="fa-solid fa-magnifying-glass" @click="detail.open(guild)">Détails</Button>
-                    </div>
-                </Box>
-            </div>
+                        <template #meta>
+                            <span title="Commandes exécutées"><Icon icon="fa-solid fa-terminal" aria-hidden="true"/> <span class="sr-only">Commandes :</span> {{ safeNum(guild.stats?.commands) }}</span>
+                            <span title="Titres joués"><Icon icon="fa-solid fa-music" aria-hidden="true"/> <span class="sr-only">Titres joués :</span> {{ safeNum(guild.stats?.musicPlayed) }}</span>
+                        </template>
+                        <template #actions>
+                            <Button size="sm" variant="secondary" icon="fa-solid fa-sliders" :aria-label="'Gérer le serveur ' + (guild.name || guild.id)" @click="detail.open(guild)">Gérer</Button>
+                        </template>
+                    </AdminRow>
+                </AdminList>
+            </AdminCard>
         </AdminState>
 
         <AdminServerDetail ref="detail"/>
     </AdminSection>
 </template>
 <script setup>
+// Section « Serveurs » : chiffres clés, recherche locale + filtres, liste et fenêtre de gestion d'un serveur
 import { computed, onMounted, ref } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
-import Box from '@/components/UI/Box.vue';
 import Button from '@/components/UI/Button.vue';
 import Tag from '@/components/UI/Tag.vue';
 import ServerAvatar from '@/components/UI/ServerAvatar.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
+import AdminStat from './AdminStat.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminToolbar from './AdminToolbar.vue';
+import AdminPills from './AdminPills.vue';
+import AdminCard from './AdminCard.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
 import AdminServerDetail from './AdminServerDetail.vue';
-import { safeNum } from './adminFormat';
+import { safeNum, playerStatus } from './adminFormat';
 
 const adminStore = useAdminStore();
 const search = ref("");
+const filter = ref('all');
 const detail = ref(null);
 
+const totals = computed(() => adminStore.guilds.reduce((acc, g) => {
+    acc.members += safeNum(g.memberCount);
+    acc.registered += safeNum(g.registeredMembers);
+    acc.online += safeNum(g.webUsersOnline);
+    if (g.player) acc.players++;
+    return acc;
+}, { members: 0, registered: 0, online: 0, players: 0 }));
+
+const counts = computed(() => ({
+    player: adminStore.guilds.filter(g => g.player).length,
+    shared: adminStore.guilds.filter(g => g.sharedPlaylists?.enabled).length,
+    issues: adminStore.guilds.filter(g => g.missingPermissions?.length).length
+}));
+
+const filterOptions = computed(() => [
+    { value: 'all', label: "Tous", count: adminStore.guilds.length },
+    { value: 'player', label: "Player actif", icon: "fa-solid fa-music", count: counts.value.player },
+    { value: 'shared', label: "Playlists partagées", icon: "fa-solid fa-users-rectangle", count: counts.value.shared },
+    { value: 'issues', label: "À corriger", icon: "fa-solid fa-triangle-exclamation", count: counts.value.issues }
+]);
+
 // Recherche locale : la liste complète est déjà poussée par "/ADMIN/GUILDS/UPDATE"
 const filtered = computed(() => {
     const query = search.value.trim().toLowerCase();
-    const list = [...adminStore.guilds].sort((a, b) => (a.name || "").localeCompare(b.name || ""));
+    let list = [...adminStore.guilds].sort((a, b) => (a.name || "").localeCompare(b.name || ""));
+    if (filter.value === 'player') list = list.filter(g => g.player);
+    else if (filter.value === 'shared') list = list.filter(g => g.sharedPlaylists?.enabled);
+    else if (filter.value === 'issues') list = list.filter(g => g.missingPermissions?.length);
     if (!query) return list;
     return list.filter(g => (g.name || "").toLowerCase().includes(query) || String(g.id).includes(query));
 });
 
+function resetFilters() {
+    search.value = "";
+    filter.value = 'all';
+}
+
 onMounted(() => {
     adminStore.fetchGuilds();
 });
 </script>
-<style scoped>
-.search {
-    min-width: 260px;
-}
-
-.servers-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.server-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 15px;
-}
-
-.server-main {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-}
-
-.server-info {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    min-width: 0;
-}
-
-p {
-    margin: 0;
-}
-
-.name {
-    font-weight: 600;
-}
-
-.data {
-    color: var(--text-secondary);
-    font-size: 0.8em;
-    display: flex;
-    align-items: center;
-    gap: 3px;
-}
-
-.tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.server-side {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    flex-shrink: 0;
-}
-
-.server-stats {
-    display: flex;
-    gap: 10px;
-    color: var(--text-secondary);
-    font-size: 0.85em;
-    font-family: monospace;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .search {
-        min-width: 0;
-        flex: 1;
-    }
-
-    .server-item {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .server-side {
-        justify-content: space-between;
-    }
-}
-</style>
diff --git a/src/components/Admin/AdminStat.vue b/src/components/Admin/AdminStat.vue
index 5578b61..1f056ef 100644
--- a/src/components/Admin/AdminStat.vue
+++ b/src/components/Admin/AdminStat.vue
@@ -1,16 +1,33 @@
 <template>
-    <div class="stat">
-        <Icon class="stat-icon" :icon="icon" :style="{ color: color }"/>
-        <div class="stat-info">
-            <p class="stat-label">{{ label }}</p>
-            <p class="stat-value">{{ value }}</p>
-            <p v-if="sub" class="stat-sub">{{ sub }}</p>
-        </div>
-    </div>
+    <component :is="isClickable() ? 'button' : 'div'" :type="isClickable() ? 'button' : undefined"
+        :class="['adm-stat', `adm-tone-${toneName}`, { 'adm-tone-custom': !!color }]"
+        :style="color ? { '--adm-tone': color } : null"
+        @click="onClick">
+        <span v-if="icon" class="adm-stat__chip" aria-hidden="true"><Icon :icon="icon"/></span>
+        <span class="adm-stat__info">
+            <span class="adm-stat__label">{{ label }}</span>
+            <span :class="['adm-stat__value', { 'adm-stat__value--mono': mono }]"><slot>{{ value }}</slot></span>
+            <span v-if="sub || $slots.sub" class="adm-stat__sub"><slot name="sub">{{ sub }}</slot></span>
+            <AdminMeter v-if="hasProgress" :value="progress" :label="progressLabel || label" :tone="progressTone"/>
+        </span>
+        <template v-if="isClickable()">
+            <Icon class="adm-stat__go" icon="fa-solid fa-chevron-right" aria-hidden="true"/>
+            <span v-if="to" class="sr-only">, ouvrir la section {{ targetLabel }}</span>
+        </template>
+    </component>
 </template>
 <script setup>
-// Tuile de chiffre clé (même hiérarchie de surfaces que Metric.vue)
-defineProps({
+/**
+ * Tuile de chiffre clé. `to` (id de section) la rend cliquable (bouton → adminStore.setSection),
+ * tout comme un écouteur @click. `progress` (0..1) ajoute une jauge sous la valeur.
+ */
+import { computed, inject, useAttrs } from 'vue';
+import { useAdminStore } from '@/stores/adminStore';
+import AdminMeter from './AdminMeter.vue';
+import { ADMIN_NAV_KEY, normalizeTone, toneValidator } from './adminUi';
+import './admin.scss';
+
+const props = defineProps({
     label: {
         type: String,
         required: true
@@ -26,56 +43,60 @@ defineProps({
         type: String,
         default: "fa-solid fa-chart-bar"
     },
+    // Historique : couleur libre de la pastille (prioritaire sur `tone`)
     color: {
         type: String,
-        default: "var(--text)"
+        default: null
+    },
+    tone: {
+        type: String,
+        default: 'default',
+        validator: toneValidator
+    },
+    // Id de section ('players', 'users'…) : la tuile ouvre cette section
+    to: {
+        type: String,
+        default: null
+    },
+    // Libellé lisible de la section cible, pour les lecteurs d'écran
+    toLabel: {
+        type: String,
+        default: null
+    },
+    progress: {
+        type: Number,
+        default: null
+    },
+    progressLabel: {
+        type: String,
+        default: null
+    },
+    // 'auto' : rose, orange au-delà de 75 %, rouge au-delà de 90 %
+    progressTone: {
+        type: String,
+        default: 'auto'
+    },
+    mono: {
+        type: Boolean,
+        default: false
     }
 });
+
+const attrs = useAttrs();
+const adminStore = useAdminStore();
+const nav = inject(ADMIN_NAV_KEY, null);
+
+const toneName = computed(() => normalizeTone(props.tone));
+// Pas de defineEmits('click') : l'écouteur du parent reste dans attrs et passe au bouton racine.
+// useAttrs() n'est pas réactif : fonction relue à chaque rendu plutôt qu'un computed
+function isClickable() {
+    return !!props.to || !!attrs.onClick;
+}
+
+const hasProgress = computed(() => typeof props.progress === 'number' && Number.isFinite(props.progress));
+const targetLabel = computed(() => props.toLabel || nav?.sections?.find(s => s.id === props.to)?.label || props.to);
+
+function onClick() {
+    if (props.to) adminStore.setSection(props.to);
+}
 </script>
-<style scoped>
-.stat {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    min-width: 0;
-}
-
-.stat-icon {
-    background-color: var(--secondary);
-    padding: 15px;
-    border-radius: 100%;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-}
-
-.stat-info {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-
-.stat-info p {
-    margin: 0;
-}
-
-.stat-label {
-    color: var(--text-secondary);
-    font-size: 0.8em;
-}
-
-.stat-value {
-    font-weight: bold;
-    font-size: 1.3em;
-    font-family: monospace;
-    word-break: break-word;
-}
-
-.stat-sub {
-    color: var(--text-secondary);
-    font-size: 0.7em;
-}
-</style>
diff --git a/src/components/Admin/AdminStatRow.vue b/src/components/Admin/AdminStatRow.vue
new file mode 100644
index 0000000..b9f84e9
--- /dev/null
+++ b/src/components/Admin/AdminStatRow.vue
@@ -0,0 +1,34 @@
+<template>
+    <div :class="['adm-statrow', `adm-statrow--cols-${cols}`]" :role="label ? 'group' : undefined" :aria-label="label || undefined">
+        <div class="adm-statrow__grid">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script setup>
+/**
+ * Rangée de chiffres clés (AdminStat) : `columns` colonnes, puis 2 et 1 quand la place manque
+ * (requête de conteneur : suit la largeur réelle de la section).
+ * Dans une AdminGrid, elle occupe toute la ligne.
+ */
+import { computed } from 'vue';
+import './admin.scss';
+
+const props = defineProps({
+    // 2 à 6 colonnes sur grand écran
+    columns: {
+        type: [Number, String],
+        default: 4
+    },
+    // Nom accessible du groupe (facultatif)
+    label: {
+        type: String,
+        default: null
+    }
+});
+
+const cols = computed(() => {
+    const n = Math.round(Number(props.columns));
+    return Number.isFinite(n) ? Math.min(6, Math.max(2, n)) : 4;
+});
+</script>
diff --git a/src/components/Admin/AdminState.vue b/src/components/Admin/AdminState.vue
index d6b4718..335db3e 100644
--- a/src/components/Admin/AdminState.vue
+++ b/src/components/Admin/AdminState.vue
@@ -1,17 +1,30 @@
 <template>
-    <p v-if="loading" class="second"><Icon icon="fa-solid fa-spinner" spin-pulse/> {{ loadingText }}</p>
-    <div v-else-if="error" class="state-error">
-        <Error>{{ error }}</Error>
-        <Button v-if="retry" icon="fa-solid fa-rotate" @click="$emit('retry')">Réessayer</Button>
+    <div v-if="loading" class="adm-state-loading">
+        <Spinner :label="loadingText" visible-label/>
     </div>
-    <Info v-else-if="empty" secondary class="state-empty">{{ emptyText }}</Info>
+    <AdminBanner v-else-if="error" tone="error" :title="errorTitle">
+        {{ error }}
+        <template v-if="retry" #action>
+            <Button size="sm" variant="secondary" icon="fa-solid fa-rotate" @click="$emit('retry')">Réessayer</Button>
+        </template>
+    </AdminBanner>
+    <EmptyState v-else-if="empty" :icon="emptyIcon" :title="emptyTitle" compact>
+        {{ emptyText }}
+        <template v-if="$slots.empty" #actions><slot name="empty"></slot></template>
+    </EmptyState>
     <slot v-else></slot>
 </template>
 <script setup>
-// États de chargement / erreur / vide communs à toutes les sections d'administration
-import Error from '@/components/UI/Error.vue';
-import Info from '@/components/UI/Info.vue';
+/**
+ * États de chargement / erreur / vide communs aux sections d'administration.
+ * Le contenu (slot par défaut) n'est rendu que si aucun de ces états n'est actif.
+ * Slot `empty` : boutons affichés sous le message vide.
+ */
 import Button from '@/components/UI/Button.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import AdminBanner from './AdminBanner.vue';
+import './admin.scss';
 
 defineEmits(['retry']);
 defineProps({
@@ -29,40 +42,27 @@ defineProps({
     },
     loadingText: {
         type: String,
-        default: "Chargement en cours"
+        default: "Chargement en cours…"
+    },
+    errorTitle: {
+        type: String,
+        default: "Chargement impossible"
     },
     emptyText: {
         type: String,
         default: "Rien à afficher pour le moment"
     },
+    emptyTitle: {
+        type: String,
+        default: null
+    },
+    emptyIcon: {
+        type: String,
+        default: "fa-solid fa-inbox"
+    },
     retry: {
         type: Boolean,
         default: true
     }
 });
 </script>
-<style scoped>
-.second {
-    color: var(--text-secondary);
-    font-size: 0.9em;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 10px 0;
-}
-
-.state-error {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 15px;
-    flex-wrap: wrap;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.state-empty {
-    padding: 10px 0;
-}
-</style>
diff --git a/src/components/Admin/AdminStep.vue b/src/components/Admin/AdminStep.vue
new file mode 100644
index 0000000..2f4a99b
--- /dev/null
+++ b/src/components/Admin/AdminStep.vue
@@ -0,0 +1,46 @@
+<template>
+    <li :class="['adm-step', `adm-step--${state}`]" :aria-current="state === 'current' ? 'step' : undefined">
+        <span class="adm-step__num" aria-hidden="true">
+            <Icon v-if="state === 'done'" icon="fa-solid fa-check"/>
+            <template v-else-if="number !== null">{{ number }}</template>
+        </span>
+        <div class="adm-step__body">
+            <component :is="headingTag" v-if="title || $slots.title" class="adm-step__title">
+                <span v-if="number !== null" class="sr-only">Étape {{ number }} : </span>
+                <slot name="title">{{ title }}</slot>
+                <span v-if="state === 'done'" class="sr-only"> (terminée)</span>
+            </component>
+            <slot></slot>
+        </div>
+    </li>
+</template>
+<script setup>
+/**
+ * Étape d'un AdminSteps : pastille numérotée (ou coche si `state="done"`), titre, contenu libre.
+ * `number` facultatif : sans lui, la pastille suit le compteur CSS de la liste.
+ * Titre un niveau sous la carte qui contient la liste (h4 dans une carte h3).
+ */
+import { computed, inject, unref } from 'vue';
+import { ADMIN_HEADING_KEY } from './adminUi';
+import './admin.scss';
+
+defineProps({
+    title: {
+        type: String,
+        default: null
+    },
+    number: {
+        type: [Number, String],
+        default: null
+    },
+    // 'todo' | 'current' | 'done'
+    state: {
+        type: String,
+        default: 'todo',
+        validator: (value) => ['todo', 'current', 'done'].includes(value)
+    }
+});
+
+const headingLevel = inject(ADMIN_HEADING_KEY, null);
+const headingTag = computed(() => 'h' + Math.min(6, (Number(unref(headingLevel)) || 3) + 1));
+</script>
diff --git a/src/components/Admin/AdminSteps.vue b/src/components/Admin/AdminSteps.vue
new file mode 100644
index 0000000..b74dd44
--- /dev/null
+++ b/src/components/Admin/AdminSteps.vue
@@ -0,0 +1,20 @@
+<template>
+    <ol class="adm-steps" :aria-label="label || undefined">
+        <slot></slot>
+    </ol>
+</template>
+<script setup>
+/**
+ * Liste d'étapes numérotées (assistant) : contient des AdminStep.
+ * La numérotation visuelle suit l'ordre (compteur CSS) ; l'<ol> la donne aux lecteurs d'écran.
+ */
+import './admin.scss';
+
+defineProps({
+    // Nom accessible de la liste (facultatif)
+    label: {
+        type: String,
+        default: null
+    }
+});
+</script>
diff --git a/src/components/Admin/AdminToasts.vue b/src/components/Admin/AdminToasts.vue
index 746a0f1..ca8e2b1 100644
--- a/src/components/Admin/AdminToasts.vue
+++ b/src/components/Admin/AdminToasts.vue
@@ -1,97 +1,43 @@
 <template>
     <Teleport to="body">
-        <div class="toasts">
-            <TransitionGroup name="toast">
-                <div v-for="toast in adminStore.toasts" :key="toast.id" :class="['toast', toast.type]">
-                    <Icon class="toast-icon" :icon="iconOf(toast.type)"/>
-                    <p>{{ toast.text }}</p>
-                    <IconAction icon="fa-solid fa-xmark" size="1em" @click="adminStore.dismiss(toast.id)"/>
-                </div>
+        <!-- Région toujours présente : les lecteurs d'écran n'annoncent que les ajouts dans une région déjà montée -->
+        <section class="adm-toasts-region" aria-label="Notifications de l'administration">
+            <TransitionGroup tag="ul" name="adm-toast" class="adm-toasts" aria-live="polite" aria-relevant="additions">
+                <li v-for="toast in adminStore.toasts" :key="toast.id" :class="['adm-toast', 'adm-toast--' + typeOf(toast.type)]"
+                    :role="typeOf(toast.type) === 'error' ? 'alert' : undefined">
+                    <Icon class="adm-toast__icon" :icon="toneIcon(typeOf(toast.type))" aria-hidden="true"/>
+                    <p class="adm-toast__text">
+                        <span class="sr-only">{{ prefixOf(toast.type) }}</span>{{ toast.text }}
+                    </p>
+                    <IconAction class="adm-toast__close" icon="fa-solid fa-xmark" size="0.95em"
+                        label="Fermer la notification" @click="adminStore.dismiss(toast.id)"/>
+                </li>
             </TransitionGroup>
-        </div>
+        </section>
     </Teleport>
 </template>
 <script setup>
 // Notifications de l'administration (résultat des actions, erreurs avec leur code)
 import IconAction from '@/components/UI/IconAction.vue';
 import { useAdminStore } from '@/stores/adminStore';
+import { toneIcon } from './adminUi';
+import './admin.scss';
 
 const adminStore = useAdminStore();
 
-function iconOf(type) {
-    if (type === 'error') return "fa-solid fa-circle-exclamation";
-    if (type === 'success') return "fa-solid fa-check-circle";
-    return "fa-solid fa-circle-info";
-}
-</script>
-<style scoped>
-.toasts {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    z-index: 4500;
-    max-width: min(420px, calc(100vw - 40px));
+// Types du store : 'info' | 'success' | 'error' (+ 'warning' toléré)
+function typeOf(type) {
+    if (type === 'error' || type === 'success' || type === 'warning') return type;
+    if (type === 'warn') return 'warning';
+    return 'info';
 }
 
-.toast {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px;
-    border-radius: 10px;
-    background-color: var(--secondary);
-    color: var(--text);
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
-    border-left: 4px solid var(--admin-color);
-}
-
-.toast p {
-    margin: 0;
-    flex: 1;
-    font-size: 0.9em;
-    word-break: break-word;
-}
-
-.toast.error {
-    border-left-color: var(--text-error);
-}
-
-.toast.error .toast-icon {
-    color: var(--text-error);
-}
-
-.toast.success {
-    border-left-color: var(--text-success);
-}
-
-.toast.success .toast-icon {
-    color: var(--text-success);
-}
-
-.toast.info .toast-icon {
-    color: var(--admin-color);
-}
-
-.toast-enter-active,
-.toast-leave-active {
-    transition: all 0.3s ease;
-}
-
-.toast-enter-from,
-.toast-leave-to {
-    opacity: 0;
-    transform: translateX(30px);
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .toasts {
-        left: 15px;
-        right: 15px;
-        bottom: 15px;
-        max-width: none;
+function prefixOf(type) {
+    switch (typeOf(type)) {
+        case 'error': return "Erreur : ";
+        case 'success': return "Succès : ";
+        case 'warning': return "Attention : ";
+        default: return "Information : ";
     }
 }
-</style>
+</script>
diff --git a/src/components/Admin/AdminToolbar.vue b/src/components/Admin/AdminToolbar.vue
new file mode 100644
index 0000000..5721379
--- /dev/null
+++ b/src/components/Admin/AdminToolbar.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="adm-toolbar" :role="label ? 'group' : undefined" :aria-label="label || undefined">
+        <div class="adm-toolbar__start">
+            <div v-if="search !== null" class="adm-search" role="search">
+                <label class="sr-only" :for="inputId">{{ searchLabel }}</label>
+                <Icon class="adm-search__icon" icon="fa-solid fa-magnifying-glass" aria-hidden="true"/>
+                <input ref="inputRef" :id="inputId" class="adm-search__input" type="search" autocomplete="off"
+                    spellcheck="false" :value="search" :placeholder="searchPlaceholder" :maxlength="searchMaxlength"
+                    @input="$emit('update:search', $event.target.value)"/>
+                <IconAction v-if="search" class="adm-search__clear" icon="fa-solid fa-xmark" size="0.85em"
+                    label="Effacer la recherche" @click="clear()"/>
+            </div>
+            <slot></slot>
+        </div>
+        <div v-if="$slots.end" class="adm-toolbar__end">
+            <slot name="end"></slot>
+        </div>
+    </div>
+</template>
+<script setup>
+/**
+ * Barre d'outils placée juste sous l'en-tête d'une section : recherche, filtres (AdminPills), boutons.
+ * - `v-model:search` affiche un champ de recherche accessible (le débounce reste à la charge de la section).
+ * - slot par défaut : à gauche, après la recherche (filtres…) ; slot `end` : poussé à droite (boutons).
+ */
+import { nextTick, ref, useId } from 'vue';
+import IconAction from '@/components/UI/IconAction.vue';
+import './admin.scss';
+
+defineProps({
+    // null = pas de champ de recherche ; une chaîne (même vide) = champ affiché (v-model:search)
+    search: {
+        type: String,
+        default: null
+    },
+    searchLabel: {
+        type: String,
+        default: "Rechercher"
+    },
+    searchPlaceholder: {
+        type: String,
+        default: "Rechercher…"
+    },
+    searchMaxlength: {
+        type: [Number, String],
+        default: 200
+    },
+    // Nom accessible du groupe (facultatif)
+    label: {
+        type: String,
+        default: null
+    }
+});
+
+const emit = defineEmits(['update:search']);
+
+const inputId = `adm-search-${useId()}`;
+const inputRef = ref(null);
+
+function clear() {
+    emit('update:search', '');
+    nextTick(() => inputRef.value?.focus());
+}
+
+function focusSearch() {
+    inputRef.value?.focus();
+}
+
+defineExpose({ focusSearch });
+</script>
diff --git a/src/components/Admin/AdminUserDetail.vue b/src/components/Admin/AdminUserDetail.vue
index 6f3e5e1..681cb95 100644
--- a/src/components/Admin/AdminUserDetail.vue
+++ b/src/components/Admin/AdminUserDetail.vue
@@ -1,150 +1,179 @@
 <template>
-    <Modal ref="modal" icon="fa-solid fa-user-gear" :title="user ? (user.global_name || user.username) : 'Compte'">
+    <Modal ref="modal" size="lg" icon="fa-solid fa-user-gear" :title="user ? (user.global_name || user.username || 'Compte') : 'Compte'">
         <AdminState :loading="loading && !detail" :error="!detail ? error : null" :empty="!detail" empty-text="Aucun détail disponible" @retry="load()">
-            <ModalTree title="Identité" icon="fa-solid fa-id-card">
-                <div class="tree-content">
-                    <div class="identity">
-                        <AdminUserLine :user="detail" :online="online" size="60px"/>
-                        <IconAction title="Rafraîchir l'identité Discord" icon="fa-solid fa-arrows-rotate" :class="{ busy: busy.refresh }" @click="refresh()"/>
+            <div class="detail">
+                <header class="head">
+                    <AdminUserLine :user="detail" :online="online" size="56px" show-id/>
+                    <div class="adm-tags head__tags">
+                        <Tag v-if="detail.isAdmin" color="var(--admin-color)" icon="fa-solid fa-star">Administrateur</Tag>
+                        <Tag v-if="detail.isFullBanned" tone="error" icon="fa-solid fa-hammer">Banni</Tag>
+                        <Tag v-if="detail.isDeleted" tone="default" icon="fa-solid fa-user-slash">Supprimé</Tag>
+                        <Tag :tone="online ? 'success' : 'default'" icon="fa-solid fa-signal">{{ online ? "En ligne" : "Hors ligne" }}</Tag>
                     </div>
-                    <AdminKv label="ID" mono :value="detail.id"/>
-                    <AdminKv label="Identité mise à jour" :value="detail.lastIdentityUpdate ? formatDate(detail.lastIdentityUpdate) : 'Jamais'"/>
-                    <AdminKv label="Liaison Discord">
-                        <Tag :color="detail.hasDiscordAuth ? 'var(--text-success)' : 'var(--text-warning)'">{{ detail.hasDiscordAuth ? "Active" : "Absente" }}</Tag>
-                    </AdminKv>
-                    <AdminKv label="Tokens actifs" mono :value="safeNum(detail.tokenCount)"/>
-                    <AdminKv v-if="detail.identity?.locale" label="Langue" :value="detail.identity.locale"/>
-                    <div class="tags">
-                        <Tag v-for="label in detail.labels" :key="label" :color="labelColor(label)" icon="fa-solid fa-tag">{{ label }}</Tag>
-                    </div>
-                </div>
-            </ModalTree>
+                    <Button size="sm" variant="secondary" icon="fa-solid fa-arrows-rotate" :loading="busy.refresh"
+                        :disabled="detail.isDeleted || !detail.hasDiscordAuth" @click="refresh()">Rafraîchir l'identité</Button>
+                </header>
 
-            <ModalTree title="Droits globaux" icon="fa-solid fa-star">
-                <div class="tree-content">
-                    <Info v-if="isMe" secondary>Tu ne peux pas modifier tes propres droits.</Info>
-                    <div class="switch-row">
-                        <div>
-                            <p class="switch-title"><Icon icon="fa-solid fa-star" style="color: var(--admin-color);"/> Administrateur</p>
-                            <p class="hint">Accès complet à cette interface et à toutes les commandes.</p>
-                        </div>
-                        <Button :disabled="isMe || detail.isDeleted || busy.admin" :icon="detail.isAdmin ? 'fa-solid fa-user-minus' : 'fa-solid fa-user-plus'" @click="setAdmin(!detail.isAdmin)">
-                            {{ detail.isAdmin ? "Retirer" : "Nommer" }}
-                        </Button>
-                    </div>
-                    <div class="switch-row">
-                        <div>
-                            <p class="switch-title"><Icon icon="fa-solid fa-hammer" style="color: var(--text-error);"/> Bannissement global</p>
-                            <p class="hint">{{ detail.isFullBanned ? "Ce compte est banni de Subsonics." : "Interdit l'accès à Subsonics et déconnecte toutes les sessions." }}</p>
-                        </div>
-                        <Button :disabled="isMe || (detail.isAdmin && !detail.isFullBanned) || busy.ban" :icon="detail.isFullBanned ? 'fa-solid fa-unlock' : 'fa-solid fa-hammer'" @click="setFullBan(!detail.isFullBanned)">
-                            {{ detail.isFullBanned ? "Débannir" : "Bannir" }}
-                        </Button>
-                    </div>
-                </div>
-            </ModalTree>
+                <AdminBanner v-if="isMe" tone="info">C'est ton compte : tes propres droits et sessions ne sont pas modifiables ici.</AdminBanner>
+                <AdminBanner v-if="detail.isFullBanned" tone="error" title="Compte banni de Subsonics">
+                    {{ detail.banReason ? "Raison : " + detail.banReason : "Aucune raison indiquée." }}
+                    <span v-if="detail.bannedAt"> · {{ formatDate(detail.bannedAt) }}</span>
+                </AdminBanner>
 
-            <ModalTree title="Serveurs" icon="fa-solid fa-server">
-                <div class="tree-content">
-                    <Info v-if="!detail.guilds?.length" secondary>Aucun serveur en commun avec Subsonics</Info>
-                    <div class="list">
-                        <div v-for="guild in detail.guilds" :key="guild.id" class="row">
-                            <div class="row-main">
-                                <ServerAvatar class="small-avatar" :src="guild.icon" :server-id="guild.id"/>
-                                <div class="row-info">
-                                    <p class="row-title">{{ guild.name }}</p>
-                                    <div class="tags">
-                                        <Tag v-if="guild.isOwner" color="var(--owner-color)">Propriétaire</Tag>
-                                        <Tag v-if="guild.isMod" color="var(--mod-color)">Modérateur</Tag>
-                                        <Tag v-if="guild.isBanned" color="var(--text-error)">Banni</Tag>
-                                        <Tag v-if="detail.currentGuildId === guild.id" color="var(--text-success)">Actif</Tag>
-                                    </div>
-                                </div>
+                <AdminStatRow :columns="4" label="Données du compte">
+                    <AdminStat label="Playlists" :value="safeNum(detail.playlistCount ?? detail.playlists?.length)" icon="fa-solid fa-list" tone="main"/>
+                    <AdminStat label="Historique" :value="safeNum(detail.historyCount ?? detail.history?.length)" icon="fa-solid fa-clock-rotate-left" tone="info"/>
+                    <AdminStat label="Médias" :value="safeNum(detail.mediaCount ?? detail.media?.length)" icon="fa-solid fa-photo-film" tone="warning"/>
+                    <AdminStat label="Sessions" :value="safeNum(detail.tokenCount)" icon="fa-solid fa-key" tone="admin"
+                        :sub="(detail.sockets?.length || 0) + ' connexion(s) ouverte(s)'"/>
+                </AdminStatRow>
+
+                <AdminGrid>
+                    <AdminCard title="Identité" icon="fa-solid fa-id-card" tone="admin" :span="6" :span-sm="12">
+                        <AdminKv label="ID" mono :value="detail.id"/>
+                        <AdminKv label="Identité mise à jour" :value="detail.lastIdentityUpdate ? formatDate(detail.lastIdentityUpdate) : 'Jamais'"/>
+                        <AdminKv label="Liaison Discord">
+                            <Tag :tone="detail.hasDiscordAuth ? 'success' : 'warning'">{{ detail.hasDiscordAuth ? "Active" : "Absente" }}</Tag>
+                        </AdminKv>
+                        <AdminKv v-if="detail.identity?.locale" label="Langue" :value="detail.identity.locale"/>
+                        <div v-if="detail.labels?.length" class="adm-chips" aria-label="Labels du compte">
+                            <span v-for="label in detail.labels" :key="label" class="adm-chip" :style="{ borderColor: labelColor(label) }">{{ label }}</span>
+                        </div>
+                    </AdminCard>
+
+                    <AdminCard title="Droits globaux" icon="fa-solid fa-star" tone="info" :span="6" :span-sm="12">
+                        <AdminField inline plain label="Administrateur" hint="Accès complet à cette interface et à toutes les commandes." v-slot="{ describedby }">
+                            <Button size="sm" :aria-describedby="describedby" :variant="detail.isAdmin ? 'secondary' : 'primary'" :loading="busy.admin"
+                                :disabled="isMe || detail.isDeleted" :icon="detail.isAdmin ? 'fa-solid fa-user-minus' : 'fa-solid fa-user-plus'"
+                                :aria-label="detail.isAdmin ? 'Retirer les droits administrateur' : 'Nommer administrateur'" @click="setAdmin(!detail.isAdmin)">
+                                {{ detail.isAdmin ? "Retirer" : "Nommer" }}
+                            </Button>
+                        </AdminField>
+                        <hr class="adm-divider"/>
+                        <AdminField inline plain label="Bannissement global"
+                            :hint="detail.isFullBanned ? 'Ce compte est banni de Subsonics.' : 'Interdit l\'accès à Subsonics et ferme toutes les sessions.'" v-slot="{ describedby }">
+                            <Button size="sm" :aria-describedby="describedby" :variant="detail.isFullBanned ? 'secondary' : 'danger'" :loading="busy.ban"
+                                :disabled="isMe || (detail.isAdmin && !detail.isFullBanned)" :icon="detail.isFullBanned ? 'fa-solid fa-unlock' : 'fa-solid fa-hammer'"
+                                :aria-label="detail.isFullBanned ? 'Débannir de Subsonics' : 'Bannir de Subsonics'" @click="setFullBan(!detail.isFullBanned)">
+                                {{ detail.isFullBanned ? "Débannir" : "Bannir" }}
+                            </Button>
+                        </AdminField>
+                        <p v-if="detail.isAdmin && !detail.isFullBanned && !isMe" class="adm-hint">Un administrateur ne peut pas être banni : retire d'abord ses droits.</p>
+                    </AdminCard>
+
+                    <AdminCard title="Serveurs" icon="fa-solid fa-server" tone="warning" :span="12" flush
+                        :subtitle="(detail.guilds?.length || 0) + ' serveur(s) en commun avec Subsonics'">
+                        <AdminState :empty="!detail.guilds?.length" :retry="false" empty-icon="fa-solid fa-server" empty-text="Aucun serveur en commun avec Subsonics">
+                            <div class="adm-scroll guilds">
+                                <AdminList divided label="Serveurs du compte">
+                                    <AdminRow v-for="guild in detail.guilds" :key="guild.id" dense :title="guild.name || guild.id">
+                                        <template #media>
+                                            <ServerAvatar class="adm-avatar adm-avatar--sm" :src="guild.icon" :server-id="guild.id" alt=""/>
+                                        </template>
+                                        <template #meta>
+                                            <Tag v-if="detail.currentGuildId === guild.id" tone="success" icon="fa-solid fa-location-dot">Actif</Tag>
+                                            <Tag v-if="guild.isOwner" color="var(--owner-color)" icon="fa-solid fa-crown">Propriétaire</Tag>
+                                            <Tag v-if="guild.isMod" color="var(--mod-color)" icon="fa-solid fa-user-shield">Modérateur</Tag>
+                                            <Tag v-if="guild.isBanned" tone="error" icon="fa-solid fa-ban">Banni</Tag>
+                                        </template>
+                                        <template v-if="!isMe && !detail.isAdmin" #actions>
+                                            <Button size="sm" variant="secondary" icon="fa-solid fa-user-shield" :aria-pressed="guild.isMod ? 'true' : 'false'"
+                                                :disabled="guildBusy.has(guild.id) || guild.isBanned || detail.isDeleted"
+                                                :aria-label="(guild.isMod ? 'Retirer le rôle de modérateur sur ' : 'Nommer modérateur sur ') + (guild.name || guild.id)"
+                                                @click="toggleGuild(guild, 'mod')">{{ guild.isMod ? "Retirer modo" : "Modérateur" }}</Button>
+                                            <Button size="sm" :variant="guild.isBanned ? 'secondary' : 'danger'" :icon="guild.isBanned ? 'fa-solid fa-unlock' : 'fa-solid fa-ban'"
+                                                :disabled="guildBusy.has(guild.id)"
+                                                :aria-label="(guild.isBanned ? 'Débannir de ' : 'Bannir de ') + (guild.name || guild.id)"
+                                                @click="toggleGuild(guild, 'ban')">{{ guild.isBanned ? "Débannir" : "Bannir" }}</Button>
+                                        </template>
+                                    </AdminRow>
+                                </AdminList>
                             </div>
-                            <div v-if="!isMe && !detail.isAdmin" class="actions">
-                                <IconAction title="Bannir / Débannir de ce serveur" icon="fa-solid fa-hammer"
-                                    :color="guild.isBanned ? 'var(--text-error)' : 'var(--text-tertiary)'" @click="toggleGuild(guild, 'ban')"/>
-                                <IconAction title="Nommer / Retirer modérateur" icon="fa-solid fa-user-shield"
-                                    :color="guild.isMod ? 'var(--mod-color)' : 'var(--text-tertiary)'" @click="toggleGuild(guild, 'mod')"/>
+                        </AdminState>
+                    </AdminCard>
+
+                    <AdminCard title="Sessions ouvertes" icon="fa-solid fa-plug" tone="success" :span="6" :span-sm="12" flush
+                        :subtitle="(detail.sockets?.length || 0) + ' connexion(s) · ' + safeNum(detail.tokenCount) + ' token(s)'">
+                        <AdminState :empty="!detail.sockets?.length" :retry="false" empty-icon="fa-solid fa-plug-circle-xmark" empty-text="Aucune session ouverte">
+                            <div class="adm-scroll sessions">
+                                <AdminList divided label="Sessions ouvertes">
+                                    <AdminRow v-for="socketInfo in detail.sockets" :key="socketInfo.socketId" dense
+                                        :title="socketInfo.address || 'Adresse inconnue'" :subtitle="socketInfo.userAgent || 'Navigateur inconnu'">
+                                        <template #meta>
+                                            <span>{{ formatRelative(socketInfo.connectedAt) }}</span>
+                                            <span v-if="socketInfo.guildId">· {{ guildName(socketInfo.guildId) }}</span>
+                                        </template>
+                                    </AdminRow>
+                                </AdminList>
                             </div>
-                        </div>
-                    </div>
-                </div>
-            </ModalTree>
+                        </AdminState>
+                        <template #footer>
+                            <Button size="sm" variant="secondary" icon="fa-solid fa-plug-circle-xmark" :disabled="isMe || busy.disconnect" @click="disconnect(false)">Déconnecter</Button>
+                            <Button size="sm" variant="danger" icon="fa-solid fa-key" :disabled="isMe || busy.disconnect" @click="disconnect(true)">Déconnecter et révoquer</Button>
+                        </template>
+                    </AdminCard>
 
-            <ModalTree title="Sessions" icon="fa-solid fa-plug">
-                <div class="tree-content">
-                    <Info v-if="!detail.sockets?.length" secondary>Aucune session ouverte</Info>
-                    <div class="list">
-                        <div v-for="socketInfo in detail.sockets" :key="socketInfo.socketId" class="row column">
-                            <AdminKv label="Adresse" mono :value="socketInfo.address || 'Inconnue'"/>
-                            <AdminKv label="Navigateur" :value="socketInfo.userAgent || 'Inconnu'"/>
-                            <AdminKv label="Connecté" :value="formatRelative(socketInfo.connectedAt)"/>
-                            <AdminKv label="Serveur" mono :value="guildName(socketInfo.guildId)"/>
-                        </div>
-                    </div>
-                    <div class="buttons">
-                        <Button :disabled="isMe || busy.disconnect" icon="fa-solid fa-plug-circle-xmark" @click="disconnect(false)">Déconnecter</Button>
-                        <Button :disabled="isMe || busy.disconnect" icon="fa-solid fa-key" @click="disconnect(true)">Déconnecter et révoquer les tokens</Button>
-                    </div>
-                </div>
-            </ModalTree>
+                    <AdminCard title="Données" icon="fa-solid fa-database" tone="main" :span="6" :span-sm="12" flush
+                        subtitle="Playlists, médias et dernières écoutes">
+                        <AdminState :empty="!hasData" :retry="false" empty-icon="fa-solid fa-box-open" empty-text="Aucune donnée enregistrée">
+                            <div class="adm-scroll data">
+                                <AdminList divided label="Données du compte">
+                                    <AdminRow v-for="playlist in detail.playlists" :key="'p' + playlist.playlistId" dense :title="playlist.title || 'Sans titre'">
+                                        <template #media><span class="adm-cover data__icon"><Icon icon="fa-solid fa-list" aria-hidden="true"/></span></template>
+                                        <template #meta>{{ safeNum(playlist.songCount) }} titre(s)<span v-if="playlist.type"> · {{ playlist.type }}</span></template>
+                                    </AdminRow>
+                                    <AdminRow v-for="media in detail.media" :key="'m' + media.id" dense>
+                                        <template #media><span class="adm-cover data__icon"><Icon icon="fa-solid fa-file-audio" aria-hidden="true"/></span></template>
+                                        <template #title>
+                                            <a v-if="safeUrl(media.url)" :href="media.url" target="_blank" rel="noopener noreferrer">{{ media.name || "Média" }}<span class="sr-only"> (nouvel onglet)</span></a>
+                                            <template v-else>{{ media.name || "Média" }}</template>
+                                        </template>
+                                        <template #meta>{{ formatBytes(media.size) }}</template>
+                                    </AdminRow>
+                                    <AdminRow v-for="(song, index) in recentHistory" :key="'h' + (song.id || '') + index" dense
+                                        :title="song.title || 'Titre inconnu'" :subtitle="song.author || 'Auteur inconnu'">
+                                        <template #media><span class="adm-cover data__icon"><Icon icon="fa-solid fa-clock-rotate-left" aria-hidden="true"/></span></template>
+                                    </AdminRow>
+                                </AdminList>
+                            </div>
+                        </AdminState>
+                    </AdminCard>
 
-            <ModalTree title="Données" icon="fa-solid fa-database">
-                <div class="tree-content">
-                    <div class="stats">
-                        <AdminStat label="Playlists" :value="safeNum(detail.playlistCount ?? detail.playlists?.length)" icon="fa-solid fa-list"/>
-                        <AdminStat label="Historique" :value="safeNum(detail.historyCount ?? detail.history?.length)" icon="fa-solid fa-clock-rotate-left"/>
-                        <AdminStat label="Médias" :value="safeNum(detail.mediaCount ?? detail.media?.length)" icon="fa-solid fa-photo-film"/>
-                    </div>
-                    <div v-if="detail.playlists?.length" class="list">
-                        <div v-for="playlist in detail.playlists" :key="playlist.playlistId" class="row">
-                            <span><Icon icon="fa-solid fa-list"/> {{ playlist.title }}</span>
-                            <span class="row-side">{{ safeNum(playlist.songCount) }} titre(s) · {{ playlist.type }}</span>
-                        </div>
-                    </div>
-                    <div v-if="detail.media?.length" class="list">
-                        <div v-for="media in detail.media" :key="media.id" class="row">
-                            <a v-if="media.url" :href="media.url" target="_blank" rel="noopener"><Icon icon="fa-solid fa-file-audio"/> {{ media.name }}</a>
-                            <span v-else><Icon icon="fa-solid fa-file-audio"/> {{ media.name }}</span>
-                            <span class="row-side">{{ formatBytes(media.size) }}</span>
-                        </div>
-                    </div>
-                    <div v-if="detail.history?.length" class="list">
-                        <p class="hint">Dernières écoutes</p>
-                        <div v-for="(song, index) in detail.history.slice(0, 10)" :key="(song.id || '') + index" class="row">
-                            <span class="ellipsis">{{ song.title }}</span>
-                            <span class="row-side">{{ song.author }}</span>
-                        </div>
-                    </div>
-                </div>
-            </ModalTree>
-
-            <ModalTree title="Zone dangereuse" icon="fa-solid fa-triangle-exclamation">
-                <div class="tree-content">
-                    <p class="hint">La suppression conserve les bannissements mais efface le compte. Les données (playlists, historique, médias) peuvent être purgées.</p>
-                    <Button :disabled="isMe || detail.isAdmin || detail.isDeleted || busy.delete" icon="fa-solid fa-trash" @click="remove()">Supprimer le compte</Button>
-                </div>
-            </ModalTree>
+                    <AdminCard title="Zone dangereuse" icon="fa-solid fa-triangle-exclamation" tone="error" :span="12">
+                        <p class="adm-text">La suppression conserve les bannissements mais efface le compte. Les données (playlists, historique, médias) peuvent être purgées.</p>
+                        <template #footer>
+                            <Button variant="danger" icon="fa-solid fa-trash" :loading="busy.delete" :disabled="isMe || detail.isAdmin || detail.isDeleted" @click="remove()">Supprimer le compte</Button>
+                        </template>
+                    </AdminCard>
+                </AdminGrid>
+            </div>
         </AdminState>
     </Modal>
     <AdminConfirm ref="confirmRef"/>
 </template>
 <script setup>
+/**
+ * Fiche d'un compte : identité, droits globaux, serveurs (modération / bannissement), sessions, données, suppression.
+ * open(user) avec au moins { id } ; émet `changed` (UserSummary, ou null pour recharger la liste).
+ */
 import { computed, reactive, ref } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { useUserStore } from '@/stores/userStore';
 import { adminRequest, describeError } from '@/utils/AdminRequest';
 import Modal from '@/components/UI/Modal.vue';
-import ModalTree from '@/components/UI/ModalTree.vue';
 import Button from '@/components/UI/Button.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
-import IconAction from '@/components/UI/IconAction.vue';
 import ServerAvatar from '@/components/UI/ServerAvatar.vue';
 import AdminState from './AdminState.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminGrid from './AdminGrid.vue';
+import AdminCard from './AdminCard.vue';
 import AdminKv from './AdminKv.vue';
+import AdminField from './AdminField.vue';
 import AdminStat from './AdminStat.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
 import AdminUserLine from './AdminUserLine.vue';
 import AdminConfirm from './AdminConfirm.vue';
 import { safeNum, formatDate, formatRelative, formatBytes } from './adminFormat';
@@ -161,17 +190,19 @@ const detail = ref(null);
 const loading = ref(false);
 const error = ref(null);
 const busy = reactive({ refresh: false, admin: false, ban: false, disconnect: false, delete: false });
+const guildBusy = ref(new Set());
 
 const isMe = computed(() => detail.value?.id === userStore.userInfo?.identity?.id);
-const online = computed(() => adminStore.presence ? adminStore.onlineIds.has(detail.value?.id) : !!detail.value?.online);
+const online = computed(() => (adminStore.presence ? adminStore.onlineIds.has(detail.value?.id) : !!detail.value?.online));
 const displayName = computed(() => detail.value?.global_name || detail.value?.username || detail.value?.id);
+const recentHistory = computed(() => (detail.value?.history || []).slice(0, 10));
+const hasData = computed(() => !!(detail.value?.playlists?.length || detail.value?.media?.length || detail.value?.history?.length));
 
 function labelColor(label) {
     if (label === "ADMIN") return "var(--admin-color)";
     if (label === "BAN" || label.startsWith("BAN_")) return "var(--text-error)";
     if (label.startsWith("MOD_")) return "var(--mod-color)";
-    if (label === "DELETED") return "var(--text-secondary)";
-    return "var(--quaternary)";
+    return null;
 }
 
 function guildName(guildId) {
@@ -179,6 +210,10 @@ function guildName(guildId) {
     return detail.value?.guilds?.find(g => g.id === guildId)?.name || guildId;
 }
 
+function safeUrl(url) {
+    return typeof url === 'string' && /^https?:\/\//i.test(url);
+}
+
 async function load() {
     if (!user.value || loading.value) return;
     loading.value = true;
@@ -196,6 +231,7 @@ function open(target) {
     user.value = target;
     detail.value = null;
     error.value = null;
+    guildBusy.value = new Set();
     modal.value?.open();
     load();
 }
@@ -251,7 +287,7 @@ async function setFullBan(value) {
             icon: "fa-solid fa-hammer",
             message: `${displayName.value} sera banni de Subsonics et toutes ses sessions seront fermées.`,
             askReason: true,
-            reasonLabel: "Raison du bannissement (optionnelle)",
+            reasonLabel: "Raison du bannissement (facultative)",
             reasonMin: 0,
             reasonMax: 200,
             confirmLabel: "Bannir",
@@ -271,12 +307,27 @@ async function toggleGuild(guild, kind) {
     const event = kind === 'ban' ? "/ADMIN/USERS/SET_GUILD_BAN" : "/ADMIN/USERS/SET_GUILD_MOD";
     const field = kind === 'ban' ? 'isBanned' : 'isMod';
     const value = !guild[field];
+    if (kind === 'ban' && value) {
+        const ok = await confirmRef.value.ask({
+            title: "Bannir du serveur",
+            icon: "fa-solid fa-ban",
+            message: `${displayName.value} ne pourra plus utiliser Subsonics sur « ${guild.name || guild.id} ».`,
+            confirmLabel: "Bannir",
+            confirmIcon: "fa-solid fa-ban"
+        });
+        if (!ok) return;
+    }
+    guildBusy.value = new Set(guildBusy.value).add(guild.id);
     try {
         applySummary(await adminRequest(event, { userId: detail.value.id, guildId: guild.id, value }));
         detail.value = { ...detail.value, guilds: detail.value.guilds.map(g => g.id === guild.id ? { ...g, [field]: value } : g) };
-        adminStore.notify('success', `${guild.name} : ${kind === 'ban' ? (value ? "banni" : "débanni") : (value ? "nommé modérateur" : "n'est plus modérateur")}`);
+        adminStore.notify('success', `${guild.name || guild.id} : ${kind === 'ban' ? (value ? "banni" : "débanni") : (value ? "nommé modérateur" : "n'est plus modérateur")}`);
     } catch (e) {
         adminStore.notifyError(e, kind === 'ban' ? "Bannissement du serveur" : "Modération");
+    } finally {
+        const next = new Set(guildBusy.value);
+        next.delete(guild.id);
+        guildBusy.value = next;
     }
 }
 
@@ -325,144 +376,52 @@ async function remove() {
 defineExpose({ open });
 </script>
 <style scoped>
-.tree-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin: 10px 0 15px 0;
-}
-
 p {
     margin: 0;
 }
 
-.identity {
+.detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--adm-gap);
+    min-width: 0;
+}
+
+.head {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-.busy {
-    opacity: 0.5;
-    pointer-events: none;
-}
-
-.tags {
-    display: flex;
     flex-wrap: wrap;
-    gap: 5px;
+    gap: 12px;
 }
 
-.hint {
+.head :deep(.adm-user__name) {
+    font-size: 1.1em;
+}
+
+.head__tags {
+    flex: 1 1 auto;
+}
+
+.guilds {
+    --adm-scroll-max: 320px;
+}
+
+.sessions,
+.data {
+    --adm-scroll-max: 300px;
+}
+
+.data__icon {
+    --adm-cover-size: 30px;
+
     font-size: 0.85em;
-    color: var(--text-secondary);
 }
 
-.switch-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 15px;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.switch-title {
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    max-height: 30vh;
-    overflow-y: auto;
-}
-
-.row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 7px 10px;
-    font-size: 0.9em;
-}
-
-.row.column {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 3px;
-}
-
-.row a {
+.adm-row a {
     color: var(--text);
 }
 
-.row-main {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-}
-
-.row-info {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    min-width: 0;
-}
-
-.row-title {
-    font-weight: 600;
-}
-
-.row-side {
-    color: var(--text-secondary);
-    font-size: 0.85em;
-    text-align: right;
-}
-
-.ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.small-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-}
-
-.actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.buttons {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 10px;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .switch-row {
-        flex-direction: column;
-        align-items: stretch;
-    }
+.adm-row a:hover {
+    color: var(--main);
 }
 </style>
diff --git a/src/components/Admin/AdminUserLine.vue b/src/components/Admin/AdminUserLine.vue
index 71e9fa0..d474cf8 100644
--- a/src/components/Admin/AdminUserLine.vue
+++ b/src/components/Admin/AdminUserLine.vue
@@ -1,23 +1,30 @@
 <template>
-    <div class="user-card">
-        <div class="avatar">
-            <img :src="userAvatar(user)" :style="{ width: size, height: size }" alt="Avatar"/>
-            <Icon v-if="user?.isAdmin" style="color: var(--admin-color);" icon="fa-solid fa-star" class="tag"/>
-            <Icon v-else-if="user?.isOwner" style="color: var(--owner-color);" icon="fa-solid fa-crown" class="tag"/>
-            <Icon v-else-if="user?.isMod" style="color: var(--mod-color);" icon="fa-solid fa-shield-halved" class="tag"/>
-            <span v-if="online" class="online-dot" title="En ligne"></span>
-        </div>
-        <div class="user-info">
-            <p class="global">{{ user?.global_name || user?.username || "Nom d'affichage inconnu" }}</p>
-            <p class="username">{{ user?.username || "Identifiant inconnu" }}<span v-if="showId" class="id"> · {{ user?.id }}</span></p>
-        </div>
+    <div class="adm-user">
+        <span class="adm-user__avatar" :style="{ '--adm-avatar-size': size }">
+            <!-- Avatar décoratif : le nom est écrit juste à côté -->
+            <img :src="userAvatar(user)" alt="" loading="lazy" referrerpolicy="no-referrer"/>
+            <span v-if="role" class="adm-user__role" :style="{ color: role.color }" :title="role.label">
+                <Icon :icon="role.icon" aria-hidden="true"/>
+            </span>
+            <span v-if="online" class="adm-user__online" title="En ligne"></span>
+        </span>
+        <span class="adm-user__info">
+            <span class="adm-user__name">{{ user?.global_name || user?.username || "Nom d'affichage inconnu" }}</span>
+            <span class="adm-user__handle">
+                <span>{{ user?.username ? '@' + user.username : "Identifiant inconnu" }}</span>
+                <span v-if="showId" class="adm-mono"> · {{ user?.id }}</span>
+            </span>
+            <span v-if="role || online" class="sr-only">{{ [role?.label, online ? "en ligne" : null].filter(Boolean).join(", ") }}</span>
+        </span>
     </div>
 </template>
 <script setup>
-// Variante de UI/User.vue pour une identité brute (UserLite) avec repli d'avatar et pastille « en ligne »
+// Identité brute (UserLite) : avatar avec repli, pastille de rôle et « en ligne », nom + identifiant
+import { computed } from 'vue';
 import { userAvatar } from './adminFormat';
+import './admin.scss';
 
-defineProps({
+const props = defineProps({
     user: {
         type: Object,
         required: true
@@ -30,78 +37,17 @@ defineProps({
         type: Boolean,
         default: false
     },
+    // Taille CSS de l'avatar
     size: {
         type: String,
-        default: "50px"
+        default: "40px"
     }
 });
+
+const role = computed(() => {
+    if (props.user?.isAdmin) return { label: "Administrateur", icon: "fa-solid fa-star", color: "var(--admin-color)" };
+    if (props.user?.isOwner) return { label: "Propriétaire", icon: "fa-solid fa-crown", color: "var(--owner-color)" };
+    if (props.user?.isMod) return { label: "Modérateur", icon: "fa-solid fa-shield-halved", color: "var(--mod-color)" };
+    return null;
+});
 </script>
-<style scoped>
-.user-card {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    user-select: none;
-    min-width: 0;
-}
-
-.avatar {
-    position: relative;
-    display: inline-block;
-    flex-shrink: 0;
-}
-
-img {
-    border-radius: 100%;
-    object-fit: cover;
-    background-color: var(--main);
-    display: block;
-}
-
-.tag {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    font-size: 0.8em;
-    border-radius: 50%;
-}
-
-.online-dot {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 10px;
-    height: 10px;
-    border-radius: 100%;
-    background-color: var(--mod-color);
-    border: 2px solid var(--tertiary);
-}
-
-.user-info {
-    display: flex;
-    gap: 5px;
-    flex-direction: column;
-    min-width: 0;
-}
-
-p {
-    margin: 0;
-}
-
-.global {
-    font-size: 15px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.username {
-    color: var(--text-secondary);
-    font-size: 12px;
-    word-break: break-all;
-}
-
-.id {
-    font-family: monospace;
-}
-</style>
diff --git a/src/components/Admin/AdminUsers.vue b/src/components/Admin/AdminUsers.vue
index 7e8b046..0989e45 100644
--- a/src/components/Admin/AdminUsers.vue
+++ b/src/components/Admin/AdminUsers.vue
@@ -1,59 +1,81 @@
 <template>
-    <AdminSection title="👥 Comptes" :subtitle="subtitle">
-        <template #actions>
-            <input type="text" class="search" v-model="search" placeholder="Rechercher (ID, identifiant, nom)"/>
-            <Button icon="fa-solid fa-rotate" :disabled="loading" @click="load()">Actualiser</Button>
-        </template>
+    <AdminSection title="Comptes" subtitle="Comptes Subsonics : droits, bannissements, sessions et données">
+        <AdminStatRow :columns="5" label="Résumé des comptes">
+            <AdminStat label="Inscrits" :value="counts.registered" icon="fa-solid fa-id-card" tone="admin"/>
+            <AdminStat label="En ligne" :value="counts.online" icon="fa-solid fa-signal" tone="success"
+                :sub="counts.sockets !== null ? counts.sockets + ' connexion(s) web' : null"/>
+            <AdminStat label="Administrateurs" :value="counts.admins" icon="fa-solid fa-star" tone="info"/>
+            <AdminStat label="Bannis" :value="counts.banned" icon="fa-solid fa-hammer" :tone="counts.banned ? 'warning' : 'default'"/>
+            <AdminStat label="Supprimés" :value="counts.deleted" icon="fa-solid fa-user-slash"/>
+        </AdminStatRow>
 
-        <AdminPills v-model="filter" :options="filters"/>
+        <AdminToolbar v-model:search="search" search-label="Rechercher un compte" search-placeholder="ID, identifiant ou nom…" label="Filtres des comptes">
+            <AdminPills v-model="filter" :options="filters" label="Catégorie"/>
+            <template #end>
+                <Button variant="secondary" icon="fa-solid fa-rotate" :loading="loading" @click="load()">Actualiser</Button>
+            </template>
+        </AdminToolbar>
+
+        <p class="sr-only" aria-live="polite">{{ liveSummary }}</p>
 
         <!-- Tant que la 1re réponse n'est pas arrivée (même avant onMounted), on affiche le chargement -->
-        <AdminState :loading="!result && !error" :error="!result ? error : null"
-            :empty="!!result && items.length === 0"
-            :empty-text="search ? 'Aucun compte ne correspond à cette recherche' : 'Aucun compte dans cette catégorie'"
-            @retry="load()">
-            <div class="users-list">
-                <div v-for="user in items" :key="user.id" class="user">
-                    <div class="group">
-                        <AdminUserLine :user="user" :online="isOnline(user)" show-id/>
-                        <div class="tags">
-                            <Tag v-if="user.isAdmin" color="var(--admin-color)" icon="fa-solid fa-star">Administrateur</Tag>
-                            <Tag v-if="user.isFullBanned" color="var(--text-error)" icon="fa-solid fa-hammer">Banni</Tag>
-                            <Tag v-if="user.isDeleted" color="var(--text-secondary)" icon="fa-solid fa-user-slash">Supprimé</Tag>
-                            <Tag v-if="isOnline(user)" color="var(--text-success)">En ligne<span v-if="user.socketCount > 1"> ({{ user.socketCount }})</span></Tag>
-                            <Tag v-if="user.modGuilds?.length" color="var(--mod-color)" icon="fa-solid fa-user-shield">Modo ×{{ user.modGuilds.length }}</Tag>
-                            <Tag v-if="user.bannedGuilds?.length" color="var(--text-warning)" icon="fa-solid fa-ban">Banni ×{{ user.bannedGuilds.length }}</Tag>
-                        </div>
-                    </div>
-                    <div class="side">
-                        <span class="side-info" :title="'Tokens actifs : ' + safeNum(user.tokenCount)"><Icon icon="fa-solid fa-key"/> {{ safeNum(user.tokenCount) }}</span>
-                        <span class="side-info" title="Serveurs communs"><Icon icon="fa-solid fa-server"/> {{ user.guildIds?.length || 0 }}</span>
-                        <Button color-lower icon="fa-solid fa-magnifying-glass" @click="detail.open(user)">Détails</Button>
-                    </div>
-                </div>
-            </div>
-
-            <div class="pagination">
-                <IconAction title="Page précédente" icon="fa-solid fa-chevron-left" :color="page > 1 ? 'var(--text)' : 'var(--text-tertiary)'" @click="goTo(page - 1)"/>
-                <span class="page-info">Page {{ page }} / {{ pageCount }} · {{ safeNum(result?.total) }} compte(s)</span>
-                <IconAction title="Page suivante" icon="fa-solid fa-chevron-right" :color="page < pageCount ? 'var(--text)' : 'var(--text-tertiary)'" @click="goTo(page + 1)"/>
-                <Icon v-if="loading" icon="fa-solid fa-spinner" spin-pulse class="page-loading"/>
-            </div>
+        <AdminState :loading="!result && !error" :error="!result ? error : null" @retry="load()">
+            <AdminCard title="Liste des comptes" icon="fa-solid fa-users" :span="12" flush :busy="loading"
+                :subtitle="safeNum(result?.total) + ' compte(s) · page ' + page + ' sur ' + pageCount">
+                <AdminState :empty="items.length === 0" :retry="false" :empty-icon="search ? 'fa-solid fa-magnifying-glass' : 'fa-solid fa-user-slash'"
+                    :empty-text="search ? 'Aucun compte ne correspond à cette recherche' : 'Aucun compte dans cette catégorie'">
+                    <AdminList divided label="Comptes">
+                        <AdminRow v-for="user in items" :key="user.id" :tone="user.isFullBanned ? 'error' : 'default'">
+                            <AdminUserLine :user="user" :online="isOnline(user)" show-id/>
+                            <div v-if="hasTags(user)" class="adm-tags">
+                                <Tag v-if="user.isAdmin" color="var(--admin-color)" icon="fa-solid fa-star">Administrateur</Tag>
+                                <Tag v-if="user.isFullBanned" tone="error" icon="fa-solid fa-hammer">Banni</Tag>
+                                <Tag v-if="user.isDeleted" tone="default" icon="fa-solid fa-user-slash">Supprimé</Tag>
+                                <Tag v-if="isOnline(user)" tone="success" icon="fa-solid fa-signal">En ligne<span v-if="user.socketCount > 1">&nbsp;({{ user.socketCount }})</span></Tag>
+                                <Tag v-if="user.modGuilds?.length" color="var(--mod-color)" icon="fa-solid fa-user-shield">Modo ×{{ user.modGuilds.length }}</Tag>
+                                <Tag v-if="user.bannedGuilds?.length" tone="warning" icon="fa-solid fa-ban">Banni ×{{ user.bannedGuilds.length }}</Tag>
+                            </div>
+                            <template #meta>
+                                <span :title="'Sessions actives : ' + safeNum(user.tokenCount)"><Icon icon="fa-solid fa-key" aria-hidden="true"/> <span class="sr-only">Sessions :</span> {{ safeNum(user.tokenCount) }}</span>
+                                <span title="Serveurs en commun"><Icon icon="fa-solid fa-server" aria-hidden="true"/> <span class="sr-only">Serveurs :</span> {{ user.guildIds?.length || 0 }}</span>
+                                <span title="Playlists"><Icon icon="fa-solid fa-list" aria-hidden="true"/> <span class="sr-only">Playlists :</span> {{ safeNum(user.playlistCount) }}</span>
+                            </template>
+                            <template #actions>
+                                <Button size="sm" variant="secondary" icon="fa-solid fa-user-gear"
+                                    :aria-label="'Gérer le compte de ' + (user.global_name || user.username || user.id)" @click="detail.open(user)">Gérer</Button>
+                            </template>
+                        </AdminRow>
+                    </AdminList>
+                </AdminState>
+                <template v-if="pageCount > 1" #footer>
+                    <nav class="adm-pager" aria-label="Pagination des comptes">
+                        <Button size="sm" variant="ghost" icon="fa-solid fa-chevron-left" :disabled="page <= 1 || loading" @click="goTo(page - 1)">Précédente</Button>
+                        <span class="adm-pager__info">Page {{ page }} / {{ pageCount }}</span>
+                        <Button size="sm" variant="ghost" icon-right="fa-solid fa-chevron-right" :disabled="page >= pageCount || loading" @click="goTo(page + 1)">Suivante</Button>
+                    </nav>
+                </template>
+            </AdminCard>
         </AdminState>
 
         <AdminUserDetail ref="detail" @changed="onChanged"/>
     </AdminSection>
 </template>
 <script setup>
+// Section « Comptes » : chiffres clés, recherche serveur (débouncée), filtres, liste paginée et fiche détaillée
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { adminRequest, describeError } from '@/utils/AdminRequest';
 import Button from '@/components/UI/Button.vue';
 import Tag from '@/components/UI/Tag.vue';
-import IconAction from '@/components/UI/IconAction.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
+import AdminStat from './AdminStat.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminToolbar from './AdminToolbar.vue';
 import AdminPills from './AdminPills.vue';
+import AdminCard from './AdminCard.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
 import AdminUserLine from './AdminUserLine.vue';
 import AdminUserDetail from './AdminUserDetail.vue';
 import { safeNum } from './adminFormat';
@@ -72,29 +94,43 @@ const error = ref(null);
 
 const filters = [
     { value: 'all', label: "Tous" },
-    { value: 'online', label: "En ligne", icon: "fa-solid fa-circle", color: "color-mix(in srgb, var(--mod-color) 60%, black)" },
+    { value: 'online', label: "En ligne", icon: "fa-solid fa-signal" },
     { value: 'admin', label: "Administrateurs", icon: "fa-solid fa-star", color: "var(--admin-color)" },
     { value: 'banned', label: "Bannis", icon: "fa-solid fa-hammer" },
-    { value: 'deleted', label: "Supprimés", icon: "fa-solid fa-user-slash", color: "var(--quaternary)" }
+    { value: 'deleted', label: "Supprimés", icon: "fa-solid fa-user-slash" }
 ];
 
 // Réponse inattendue (data nulle, items absent) : liste vide plutôt qu'une erreur de rendu
-const items = computed(() => Array.isArray(result.value?.items) ? result.value.items : []);
+const items = computed(() => (Array.isArray(result.value?.items) ? result.value.items : []));
 
 const pageCount = computed(() => Math.max(1, Math.ceil(safeNum(result.value?.total) / safeNum(result.value?.pageSize, PAGE_SIZE))));
 
-const subtitle = computed(() => {
-    const counts = adminStore.presence?.counts;
-    if (counts) return `${safeNum(counts.registered)} compte(s) inscrit(s), ${safeNum(counts.online)} en ligne`;
-    return "Gestion des comptes Subsonics";
+// Chiffres : présence poussée en direct, sinon le résumé de la vue d'ensemble
+const counts = computed(() => {
+    const overview = adminStore.overview;
+    const presence = adminStore.presence?.counts;
+    return {
+        registered: safeNum(presence?.registered ?? overview?.users?.registered),
+        online: safeNum(presence?.online ?? overview?.web?.usersOnline),
+        sockets: overview?.web ? safeNum(overview.web.sockets) : null,
+        admins: safeNum(overview?.users?.admins),
+        banned: safeNum(overview?.users?.fullBanned),
+        deleted: safeNum(overview?.users?.deleted)
+    };
 });
 
+const liveSummary = computed(() => (result.value ? `${safeNum(result.value.total)} compte(s) trouvé(s), page ${page.value} sur ${pageCount.value}` : ""));
+
 // La présence poussée par "/ADMIN/USERS/UPDATE" prime sur l'instantané de la liste
 function isOnline(user) {
     if (adminStore.presence) return adminStore.onlineIds.has(user.id);
     return !!user.online;
 }
 
+function hasTags(user) {
+    return user.isAdmin || user.isFullBanned || user.isDeleted || isOnline(user) || user.modGuilds?.length || user.bannedGuilds?.length;
+}
+
 // Une seule requête à la fois ; si les critères changent pendant le chargement, on relance à la fin
 let queued = false;
 async function load() {
@@ -109,6 +145,8 @@ async function load() {
         });
         result.value = data && typeof data === "object" ? data : { items: [], total: 0, page: page.value, pageSize: PAGE_SIZE };
         error.value = null;
+        // La page demandée n'existe plus (comptes supprimés entre-temps) : on revient à la dernière
+        if (page.value > pageCount.value) { page.value = pageCount.value; queued = true; }
     } catch (e) {
         error.value = describeError(e);
         if (result.value) adminStore.notifyError(e, "Liste des comptes");
@@ -146,96 +184,10 @@ function onChanged(summary) {
     };
 }
 
-onMounted(() => load());
+onMounted(() => {
+    load();
+    // Chiffres clés : la vue d'ensemble est déjà chargée par le tableau de bord, sinon on la demande
+    if (!adminStore.overview) adminStore.fetchOverview();
+});
 onUnmounted(() => clearTimeout(searchTimer));
 </script>
-<style scoped>
-.search {
-    min-width: 260px;
-}
-
-.users-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.user {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    background-color: var(--tertiary);
-    padding: 5px 10px 5px 5px;
-    border-radius: 10px;
-}
-
-.group {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-    flex-wrap: wrap;
-}
-
-.tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.side {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    flex-shrink: 0;
-}
-
-.side-info {
-    color: var(--text-secondary);
-    font-size: 0.85em;
-    font-family: monospace;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.pagination {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 15px;
-    margin-top: 5px;
-}
-
-.page-info {
-    font-size: 0.85em;
-    color: var(--text-secondary);
-}
-
-.page-loading {
-    color: var(--text-secondary);
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .search {
-        min-width: 0;
-        flex: 1;
-    }
-
-    .user {
-        flex-direction: column;
-        align-items: stretch;
-        padding: 10px;
-    }
-
-    .group {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .side {
-        justify-content: space-between;
-    }
-}
-</style>
diff --git a/src/components/Admin/AdminWarp.vue b/src/components/Admin/AdminWarp.vue
index 210cefd..6d1d0fa 100644
--- a/src/components/Admin/AdminWarp.vue
+++ b/src/components/Admin/AdminWarp.vue
@@ -1,7 +1,8 @@
 <template>
     <AdminSection title="☁️ WARP" subtitle="Proxy Cloudflare WARP utilisé par yt-dlp pour contourner les blocages">
         <template #actions>
-            <Button icon="fa-solid fa-stethoscope" :disabled="adminStore.warpChecking || (warp && !warp.configured)" @click="adminStore.checkWarp()">
+            <Button variant="secondary" icon="fa-solid fa-stethoscope" :loading="adminStore.warpChecking"
+                :disabled="!warp || !warp.configured" @click="adminStore.checkWarp()">
                 {{ adminStore.warpChecking ? "Vérification…" : "Revérifier" }}
             </Button>
         </template>
@@ -9,118 +10,172 @@
         <AdminState :loading="!warp && adminStore.warpLoading" :error="!warp ? adminStore.warpError : null"
             :empty="!warp" empty-text="Aucun statut WARP reçu" @retry="adminStore.fetchWarp()">
 
-            <Info v-if="!warp.configured" class="banner">
-                Aucun proxy WARP n'est configuré : yt-dlp utilise uniquement la connexion directe.
-            </Info>
+            <AdminBanner v-if="!warp.configured" tone="info" title="Aucun proxy configuré">
+                yt-dlp utilise uniquement la connexion directe. Renseignez l'URL du proxy ci-dessous pour activer WARP.
+            </AdminBanner>
+            <AdminBanner v-else-if="!warp.healthy && (warp.lastCheck || warp.lastError)" tone="error" title="Proxy injoignable">
+                <template v-if="warp.lastError">Dernière erreur : <span class="adm-mono">{{ warp.lastError }}</span></template>
+                <template v-else>Le dernier contrôle de santé a échoué.</template>
+                <template v-if="warp.fallbackDirect"> Les lectures passent par la connexion directe en attendant.</template>
+            </AdminBanner>
 
-            <div class="stats">
-                <AdminStat label="État" :value="!warp.configured ? 'Non configuré' : warp.healthy ? 'Opérationnel' : 'Injoignable'"
-                    :icon="warp.healthy ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'"
-                    :color="!warp.configured ? 'var(--text-secondary)' : warp.healthy ? 'var(--text-success)' : 'var(--text-error)'"/>
-                <AdminStat label="IP de sortie" :value="warp.ip || 'Inconnue'" icon="fa-solid fa-network-wired" color="var(--admin-color)"
+            <AdminStatRow :columns="4" label="État du proxy">
+                <AdminStat label="État" :value="state.label" :icon="state.icon" :tone="state.tone"/>
+                <AdminStat label="IP de sortie" :value="warp.ip || 'Inconnue'" icon="fa-solid fa-network-wired" tone="admin" mono
                     :sub="warp.warp ? 'Mode WARP : ' + warp.warp : null"/>
-                <AdminStat label="Dernière vérification" :value="formatRelative(warp.lastCheck, nowDate)" icon="fa-solid fa-clock" color="var(--owner-color)"
+                <AdminStat label="Dernière vérification" :value="formatRelative(warp.lastCheck, nowDate)" icon="fa-solid fa-clock" tone="warning"
                     :sub="warp.lastCheck ? formatDate(warp.lastCheck) : null"/>
-                <AdminStat label="Intervalle de vérification" :value="Math.round(safeNum(warp.checkIntervalMs, 60000) / 1000) + ' s'" icon="fa-solid fa-stopwatch"/>
-            </div>
+                <AdminStat label="Intervalle de contrôle" :value="Math.round(safeNum(warp.checkIntervalMs, 60000) / 1000) + ' s'" icon="fa-solid fa-stopwatch"
+                    sub="Trace Cloudflare"/>
+            </AdminStatRow>
 
-            <div class="cards">
-                <AdminCard title="Configuration" icon="fa-solid fa-gear" color="var(--text-secondary)">
+            <AdminGrid>
+                <!-- Configuration en vigueur -->
+                <AdminCard title="Configuration active" subtitle="Valeurs utilisées par le processus en cours"
+                    icon="fa-solid fa-gear" :span="canEdit ? 5 : 12" :span-md="12">
+                    <AdminKv label="Source">
+                        <Tag :tone="warp.source === 'env' ? 'warning' : 'default'" icon="fa-solid fa-file-lines">{{ sourceLabel }}</Tag>
+                    </AdminKv>
                     <AdminKv label="URL du proxy" mono :value="warp.url || 'Aucune'"/>
                     <AdminKv label="Repli en direct">
-                        <Tag :color="warp.fallbackDirect ? 'var(--text-success)' : 'var(--text-warning)'">{{ warp.fallbackDirect ? "Autorisé" : "Désactivé" }}</Tag>
+                        <Tag :tone="warp.fallbackDirect ? 'success' : 'warning'" :icon="warp.fallbackDirect ? 'fa-solid fa-check' : 'fa-solid fa-ban'">
+                            {{ warp.fallbackDirect ? "Autorisé" : "Désactivé" }}
+                        </Tag>
                     </AdminKv>
                     <AdminKv label="Ordre des routes">
-                        <Tag v-for="(route, index) in warp.routes || []" :key="route + index" :color="route === 'warp' ? 'var(--owner-color)' : 'var(--admin-color)'" icon="fa-solid fa-route">
-                            {{ index + 1 }}. {{ route === 'warp' ? "WARP" : "Direct" }}
-                        </Tag>
+                        <ol class="warp-routes" aria-label="Ordre des routes">
+                            <li v-for="(route, index) in warp.routes || []" :key="route + index">
+                                <Tag :color="route === 'warp' ? 'var(--owner-color)' : 'var(--admin-color)'" icon="fa-solid fa-route">
+                                    {{ index + 1 }}. {{ route === 'warp' ? "WARP" : "Direct" }}
+                                </Tag>
+                            </li>
+                        </ol>
                     </AdminKv>
-                    <Error v-if="warp.lastError">Dernière erreur : {{ warp.lastError }}</Error>
                 </AdminCard>
 
-                <AdminCard v-if="warp.file && warp.locked" title="Modifier le proxy" icon="fa-solid fa-pen" color="var(--main)">
-                    <template #header>
-                        <Tag :color="warp.source === 'env' ? 'var(--text-warning)' : 'var(--text-secondary)'" icon="fa-solid fa-file-lines">
-                            {{ warp.source === 'env' ? "Variable d'environnement" : warp.source === 'file' ? "data/proxy.json" : "Aucune source" }}
-                        </Tag>
-                    </template>
-                    <Info v-if="warp.locked.url" secondary>
-                        L'URL et l'activation sont imposées par la variable d'environnement WARP_PROXY : modifiez-la (docker-compose / .env) puis redémarrez.
-                    </Info>
+                <!-- Édition de data/proxy.json -->
+                <AdminCard v-if="canEdit" title="Modifier le proxy" subtitle="Enregistré dans data/proxy.json puis vérifié"
+                    icon="fa-solid fa-pen" tone="main" :span="7" :span-md="12">
+                    <AdminBanner v-if="locked.url" tone="warning" title="Imposé par l'environnement">
+                        L'URL et l'activation viennent de la variable <span class="adm-mono">WARP_PROXY</span> :
+                        modifiez-la (docker-compose / .env) puis redémarrez.
+                    </AdminBanner>
 
-                    <label :class="['check', { locked: warp.locked.enabled }]">
-                        <input type="checkbox" v-model="form.enabled" :disabled="warp.locked.enabled || saving"/>
-                        <span>Utiliser le proxy</span>
-                        <span v-if="warp.locked.enabled" class="lock"><Icon icon="fa-solid fa-lock"/> WARP_PROXY</span>
-                    </label>
+                    <div class="warp-form">
+                        <AdminField :env="locked.enabled ? 'WARP_PROXY' : null" :dirty="form.enabled !== fileEnabled">
+                            <Switch v-model="form.enabled" label="Utiliser le proxy"
+                                description="yt-dlp passe d'abord par WARP, puis par la connexion directe si le repli est autorisé."
+                                :disabled="locked.enabled || saving"/>
+                        </AdminField>
 
-                    <div class="field">
-                        <span class="field-label">URL du proxy</span>
-                        <p class="hint">
-                            Actuelle (fichier) : <span class="mono">{{ warp.file.url || "aucune" }}</span>
-                            <template v-if="warp.file.hasCredentials"> · identifiants masqués</template>
+                        <AdminField label="URL du proxy" :env="locked.url ? 'WARP_PROXY' : null" :error="urlError" :dirty="form.url.trim() !== ''"
+                            v-slot="{ id, describedby, invalid, disabled }">
+                            <input :id="id" type="text" v-model="form.url" class="adm-mono" maxlength="500" spellcheck="false" autocomplete="off"
+                                inputmode="url" :aria-describedby="describedby" :aria-invalid="invalid ? 'true' : undefined"
+                                :disabled="disabled || saving" @keyup.enter="saveConfig()"
+                                :placeholder="warp.file.url ? 'Nouvelle URL (vide = conserver l\'actuelle)' : 'http://127.0.0.1:1080'"/>
+                            <IconAction v-if="warp.file.url && !locked.url" label="Effacer l'URL du proxy" icon="fa-solid fa-trash"
+                                color="var(--text-error)" :disabled="saving" @click="clearUrl()"/>
+                        </AdminField>
+                        <p class="adm-hint">
+                            Actuelle : <span class="adm-code">{{ warp.file.url || "aucune" }}</span>
+                            <template v-if="warp.file.hasCredentials"> · identifiants masqués</template>.
+                            Formats acceptés : http://, https://, socks5:// ou socks5h://hôte:port
+                            (identifiants facultatifs : http://utilisateur:motdepasse@hôte:port).
                         </p>
-                        <div class="field-row">
-                            <input type="text" v-model="form.url" class="mono url-input" maxlength="500" spellcheck="false" autocomplete="off"
-                                :disabled="warp.locked.url || saving" :placeholder="warp.file.url ? 'Nouvelle URL (vide = conserver l\'actuelle)' : 'http://127.0.0.1:1080'"/>
-                            <IconAction v-if="warp.file.url && !warp.locked.url" title="Effacer l'URL" icon="fa-solid fa-trash" color="var(--text-error)" @click="clearUrl()"/>
-                        </div>
-                        <p v-if="urlError" class="field-error">{{ urlError }}</p>
-                        <p class="hint">http://, https://, socks5:// ou socks5h://hôte:port (identifiants facultatifs : http://utilisateur:motdepasse@hôte:port).</p>
+
+                        <AdminField :env="locked.fallbackDirect ? 'WARP_FALLBACK_DIRECT' : null" :dirty="form.fallbackDirect !== fileFallback">
+                            <Switch v-model="form.fallbackDirect" label="Repli en connexion directe"
+                                description="Si WARP échoue ou est injoignable, la lecture est retentée sans proxy."
+                                :disabled="locked.fallbackDirect || saving"/>
+                        </AdminField>
                     </div>
 
-                    <label :class="['check', { locked: warp.locked.fallbackDirect }]">
-                        <input type="checkbox" v-model="form.fallbackDirect" :disabled="warp.locked.fallbackDirect || saving"/>
-                        <span>Repli en connexion directe si WARP échoue</span>
-                        <span v-if="warp.locked.fallbackDirect" class="lock"><Icon icon="fa-solid fa-lock"/> WARP_FALLBACK_DIRECT</span>
-                    </label>
-
-                    <div class="form-actions">
-                        <Button icon="fa-solid fa-floppy-disk" :disabled="!dirty || !!urlError || saving" @click="saveConfig()">
+                    <template #footer>
+                        <span v-if="dirty" class="adm-footer-meta">Modifications non enregistrées</span>
+                        <Button variant="secondary" icon="fa-solid fa-xmark" :disabled="!dirty || saving" @click="resetForm()">Annuler</Button>
+                        <Button icon="fa-solid fa-floppy-disk" :loading="saving" :disabled="!dirty || !!urlError" @click="saveConfig()">
                             {{ saving ? "Enregistrement…" : "Enregistrer et vérifier" }}
                         </Button>
-                        <Button class="secondary" icon="fa-solid fa-xmark" :disabled="!dirty || saving" @click="resetForm()">Annuler</Button>
-                    </div>
+                    </template>
                 </AdminCard>
 
-                <AdminCard title="Processus yt-dlp actifs" icon="fa-brands fa-youtube" color="var(--text-error)">
-                    <Info v-if="!processes.length" secondary>Aucun téléchargement en cours</Info>
-                    <AdminKv v-for="proc in processes" :key="proc.guildId" :label="proc.guildName || proc.guildId">
-                        <Tag :color="proc.ytdlp.route === 'warp' ? 'var(--owner-color)' : 'var(--admin-color)'" icon="fa-solid fa-route">
-                            {{ proc.ytdlp.route === 'warp' ? "WARP" : "Direct" }}
-                        </Tag>
-                        <span class="mono">PID {{ proc.ytdlp.pid }}</span>
-                        <span class="since">{{ formatRelative(proc.ytdlp.startedAt, nowDate) }}</span>
-                    </AdminKv>
+                <!-- Téléchargements en cours -->
+                <AdminCard title="Processus yt-dlp actifs" subtitle="Route empruntée par chaque téléchargement en cours"
+                    icon="fa-brands fa-youtube" tone="error" :span="12" :flush="processes.length > 0">
+                    <template #actions>
+                        <span class="adm-badge" aria-live="polite">{{ processes.length }} en cours</span>
+                    </template>
+                    <p v-if="!processes.length" class="adm-hint">Aucun téléchargement en cours.</p>
+                    <AdminList v-else divided label="Processus yt-dlp actifs">
+                        <AdminRow v-for="proc in processes" :key="proc.guildId" as="li" dense
+                            :title="proc.guildName || proc.guildId" :subtitle="'Démarré ' + formatRelative(proc.ytdlp.startedAt, nowDate)">
+                            <template #meta>
+                                <Tag :color="proc.ytdlp.route === 'warp' ? 'var(--owner-color)' : 'var(--admin-color)'" icon="fa-solid fa-route">
+                                    {{ proc.ytdlp.route === 'warp' ? "WARP" : "Direct" }}
+                                </Tag>
+                                <span class="adm-chip">PID {{ proc.ytdlp.pid }}</span>
+                            </template>
+                        </AdminRow>
+                    </AdminList>
                 </AdminCard>
-            </div>
+            </AdminGrid>
         </AdminState>
 
         <AdminConfirm ref="confirmRef"/>
     </AdminSection>
 </template>
 <script setup>
+/**
+ * Section « WARP » : statut (/ADMIN/WARP/STATUS, poussée /ADMIN/WARP/UPDATE), contrôle (/ADMIN/WARP/CHECK)
+ * et édition de data/proxy.json (/ADMIN/WARP/CONFIG {url?, enabled?, fallbackDirect?}).
+ */
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { adminRequest } from '@/utils/AdminRequest';
 import Button from '@/components/UI/Button.vue';
 import IconAction from '@/components/UI/IconAction.vue';
-import AdminConfirm from './AdminConfirm.vue';
+import Switch from '@/components/UI/Switch.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
-import Error from '@/components/UI/Error.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
-import AdminStat from './AdminStat.vue';
+import AdminGrid from './AdminGrid.vue';
 import AdminCard from './AdminCard.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminStat from './AdminStat.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminField from './AdminField.vue';
 import AdminKv from './AdminKv.vue';
+import AdminList from './AdminList.vue';
+import AdminRow from './AdminRow.vue';
+import AdminConfirm from './AdminConfirm.vue';
 import { safeNum, formatDate, formatRelative } from './adminFormat';
 
 const adminStore = useAdminStore();
 
 // Statut poussé par "/ADMIN/WARP/UPDATE" (via adminStore), à défaut celui de la vue d'ensemble
 const warp = computed(() => adminStore.warp || adminStore.overview?.warp || null);
-const processes = computed(() => adminStore.players.filter(p => p.ytdlp));
+const processes = computed(() => (adminStore.players || []).filter(p => p?.ytdlp));
+const locked = computed(() => warp.value?.locked || {});
+const canEdit = computed(() => !!(warp.value?.file && warp.value?.locked));
+
+const state = computed(() => {
+    if (!warp.value?.configured) return { label: "Non configuré", icon: "fa-solid fa-circle-minus", tone: "default" };
+    if (!warp.value.healthy && !warp.value.lastCheck && !warp.value.lastError) {
+        return { label: "En attente", icon: "fa-solid fa-hourglass-half", tone: "info" };
+    }
+    return warp.value.healthy
+        ? { label: "Opérationnel", icon: "fa-solid fa-circle-check", tone: "success" }
+        : { label: "Injoignable", icon: "fa-solid fa-circle-xmark", tone: "error" };
+});
+
+const sourceLabel = computed(() => {
+    switch (warp.value?.source) {
+        case "env": return "Variable WARP_PROXY";
+        case "file": return "data/proxy.json";
+        default: return "Aucune";
+    }
+});
 
 // ----- Édition de data/proxy.json (/ADMIN/WARP/CONFIG) -----
 // L'URL n'est jamais renvoyée en clair (identifiants) : le champ reste vide = URL actuelle conservée
@@ -129,16 +184,18 @@ const saving = ref(false);
 const form = reactive({ enabled: false, url: "", fallbackDirect: true });
 const PROXY_URL = /^(https?|socks5h?):\/\/[^\s/?#]+(\/)?$/i;
 
+const fileEnabled = computed(() => !!warp.value?.file?.enabled);
+const fileFallback = computed(() => warp.value?.file?.fallbackDirect !== false);
+
 function resetForm() {
-    form.enabled = !!warp.value?.file?.enabled;
-    form.fallbackDirect = warp.value?.file?.fallbackDirect !== false;
+    form.enabled = fileEnabled.value;
+    form.fallbackDirect = fileFallback.value;
     form.url = "";
 }
 
 const dirty = computed(() => {
-    const file = warp.value?.file;
-    if (!file) return false;
-    return form.url.trim() !== "" || form.enabled !== !!file.enabled || form.fallbackDirect !== (file.fallbackDirect !== false);
+    if (!warp.value?.file) return false;
+    return form.url.trim() !== "" || form.enabled !== fileEnabled.value || form.fallbackDirect !== fileFallback.value;
 });
 
 const urlError = computed(() => {
@@ -174,13 +231,13 @@ async function sendConfig(patch) {
 }
 
 async function saveConfig() {
-    if (!dirty.value || urlError.value || saving.value) return;
+    if (!dirty.value || urlError.value || saving.value || !warp.value?.file) return;
     const file = warp.value.file;
-    const locked = warp.value.locked || {};
+    const lock = locked.value;
     const patch = {};
-    if (!locked.url && form.url.trim()) patch.url = form.url.trim();
-    if (!locked.enabled && form.enabled !== !!file.enabled) patch.enabled = form.enabled;
-    if (!locked.fallbackDirect && form.fallbackDirect !== (file.fallbackDirect !== false)) patch.fallbackDirect = form.fallbackDirect;
+    if (!lock.url && form.url.trim()) patch.url = form.url.trim();
+    if (!lock.enabled && form.enabled !== !!file.enabled) patch.enabled = form.enabled;
+    if (!lock.fallbackDirect && form.fallbackDirect !== (file.fallbackDirect !== false)) patch.fallbackDirect = form.fallbackDirect;
     if (!Object.keys(patch).length) return;
     await sendConfig(patch);
 }
@@ -202,117 +259,32 @@ let timer = null;
 
 onMounted(() => {
     adminStore.fetchWarp();
+    // Processus yt-dlp : la liste des players n'est pas forcément chargée si on arrive directement ici
+    if (!adminStore.playersLoaded) adminStore.fetchPlayers();
     timer = setInterval(() => { nowDate.value = Date.now(); }, 1000);
 });
 
 onUnmounted(() => clearInterval(timer));
 </script>
 <style scoped>
-.banner {
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-}
-
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 10px;
-    align-items: start;
-}
-
-.mono {
-    font-family: monospace;
-}
-
-.since {
-    color: var(--text-secondary);
-    font-size: 0.85em;
-}
-
-p {
-    margin: 0;
-}
-
-.hint {
-    font-size: 0.8em;
-    color: var(--text-secondary);
-}
-
-.check {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    font-size: 0.9em;
-    cursor: pointer;
-}
-
-.check.locked {
-    cursor: not-allowed;
-    color: var(--text-secondary);
-}
-
-.lock {
-    margin-left: auto;
-    font-family: monospace;
-    font-size: 0.8em;
-    color: var(--text-warning);
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.field {
+.warp-form {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 14px;
 }
 
-.field-label {
-    font-weight: 600;
-    font-size: 0.9em;
+/* L'interrupteur occupe toute la ligne : libellé à gauche, bouton à droite */
+.warp-form :deep(.ui-switch) {
+    flex: 1 1 auto;
 }
 
-.field-row {
+.warp-routes {
     display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.url-input {
-    flex: 1;
-    min-width: 0;
-    background-color: var(--secondary) !important;
-}
-
-.url-input:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.field-error {
-    font-size: 0.8em;
-    color: var(--text-error);
-}
-
-.form-actions {
-    display: flex;
-    gap: 10px;
     flex-wrap: wrap;
-}
-
-.secondary {
-    background-color: var(--secondary);
-    color: var(--text);
-}
-
-.secondary:hover {
-    background-color: var(--quaternary);
+    justify-content: flex-end;
+    gap: 5px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 </style>
diff --git a/src/components/Admin/AdminYoutube.vue b/src/components/Admin/AdminYoutube.vue
index a4c4546..17d8b54 100644
--- a/src/components/Admin/AdminYoutube.vue
+++ b/src/components/Admin/AdminYoutube.vue
@@ -1,262 +1,288 @@
 <template>
     <AdminSection title="🎬 YouTube" subtitle="Compte YouTube, yt-dlp, réglages de lecture et diagnostic des erreurs (403, anti-robot…)">
         <template #actions>
-            <Button icon="fa-solid fa-rotate" :disabled="adminStore.youtubeLoading" @click="adminStore.fetchYoutube()">Actualiser</Button>
+            <Button variant="secondary" icon="fa-solid fa-rotate" :loading="adminStore.youtubeLoading" @click="adminStore.fetchYoutube()">Actualiser</Button>
         </template>
 
         <AdminState :loading="!data && adminStore.youtubeLoading" :error="!data ? adminStore.youtubeError : null"
             :empty="!data" empty-text="Aucun statut YouTube reçu" @retry="adminStore.fetchYoutube()">
 
-            <Error v-if="ytdlp.source === 'missing'" class="banner">
-                yt-dlp est introuvable sur la machine du bot : aucune musique YouTube ne peut être lue.
-                Installez yt-dlp (ou définissez la variable YTDLP_PATH) puis redémarrez Subsonics.
-            </Error>
-            <div v-if="cookies.invalidatedAt" class="banner banner-action">
-                <Error>
-                    Le compte YouTube a été invalidé {{ formatRelative(cookies.invalidatedAt, nowDate) }} : {{ cookies.invalidReason || "cookies refusés par YouTube" }}.
-                    Le bot continue sans compte en attendant une nouvelle connexion.
-                </Error>
-                <Button icon="fa-solid fa-right-to-bracket" @click="scrollToAssistant()">Reconnecter le compte</Button>
-            </div>
-            <Error v-if="cookies.error" class="banner">Le fichier de cookies enregistré est illisible : {{ cookies.error }}. Importez de nouveaux cookies.</Error>
-            <Info v-if="data.ffmpeg && !data.ffmpeg.path" class="banner">
-                ffmpeg est introuvable : la lecture fonctionne, mais l'avance rapide (seek) dans une musique YouTube échouera.
-            </Info>
+            <!-- Alertes -->
+            <AdminBanner v-if="ytdlp.source === 'missing'" tone="error" title="yt-dlp introuvable">
+                Aucune musique YouTube ne peut être lue. Installez yt-dlp (ou définissez la variable
+                <span class="adm-mono">YTDLP_PATH</span>) puis redémarrez Subsonics.
+            </AdminBanner>
+            <AdminBanner v-if="cookies.invalidatedAt" tone="error" title="Compte YouTube invalidé">
+                Invalidé {{ formatRelative(cookies.invalidatedAt, nowDate) }} : {{ cookies.invalidReason || "cookies refusés par YouTube" }}.
+                Le bot continue sans compte en attendant une nouvelle connexion.
+                <template #action>
+                    <Button size="sm" icon="fa-solid fa-right-to-bracket" @click="openAssistant()">Reconnecter le compte</Button>
+                </template>
+            </AdminBanner>
+            <AdminBanner v-if="cookies.error" tone="error" title="Fichier de cookies illisible">
+                {{ cookies.error }}. Importez de nouveaux cookies.
+            </AdminBanner>
+            <AdminBanner v-if="cookies.present && !cookies.invalidatedAt && expiryDays !== null && expiryDays < 14"
+                :tone="expiryDays < 0 ? 'error' : 'warning'" :title="expiryDays < 0 ? 'Cookies expirés' : 'Cookies bientôt expirés'">
+                {{ expiryDays < 0
+                    ? "Des cookies de connexion ont expiré : reconnectez le compte."
+                    : "Des cookies de connexion expirent dans " + Math.max(0, Math.floor(expiryDays)) + " jour(s) : prévoyez de reconnecter le compte." }}
+                <template #action>
+                    <Button size="sm" variant="secondary" icon="fa-solid fa-right-to-bracket" @click="openAssistant()">Reconnecter</Button>
+                </template>
+            </AdminBanner>
+            <AdminBanner v-if="data.ffmpeg && !data.ffmpeg.path" tone="warning" title="ffmpeg introuvable">
+                La lecture fonctionne, mais l'avance rapide (seek) dans une musique YouTube échouera.
+            </AdminBanner>
 
-            <div class="stats">
-                <AdminStat label="Compte YouTube" :value="account.label" :icon="account.icon" :color="account.color"
+            <!-- Chiffres clés -->
+            <AdminStatRow :columns="4" label="État de la lecture YouTube">
+                <AdminStat label="Compte YouTube" :value="account.label" :icon="account.icon" :tone="accountTone"
                     :sub="cookies.lastCheck ? 'Vérifié ' + formatRelative(cookies.lastCheck.at, nowDate) : (cookies.present ? 'Jamais vérifié' : 'Lecture sans compte')"/>
-                <AdminStat label="Version de yt-dlp" :value="ytdlp.version || 'Inconnue'" icon="fa-solid fa-download" color="var(--text-error)"
+                <AdminStat label="Version de yt-dlp" :value="ytdlp.version || 'Inconnue'" icon="fa-solid fa-download" mono
+                    :tone="ytdlp.source === 'missing' ? 'error' : ytdlp.updating ? 'info' : 'default'"
                     :sub="ytdlp.updating ? 'Mise à jour en cours…' : binarySource(ytdlp.source)"/>
-                <AdminStat label="Lectures réussies" :value="safeNum(summary.ok) + ' / ' + (safeNum(summary.ok) + safeNum(summary.failed))"
-                    icon="fa-solid fa-circle-play" :color="failing ? 'var(--text-error)' : 'var(--text-success)'"
+                <AdminStat label="Lectures réussies" :value="safeNum(summary.ok) + ' / ' + attemptsDone"
+                    icon="fa-solid fa-circle-play" :tone="failing ? 'error' : 'success'"
+                    :progress="attemptsDone ? safeNum(summary.ok) / attemptsDone : null" progress-label="Taux de réussite"
+                    :progress-tone="failing ? 'error' : 'success'"
                     :sub="summary.recentFailureRate === null || summary.recentFailureRate === undefined ? 'Aucune tentative depuis ' + formatDate(summary.since) : 'Échecs récents : ' + Math.round(safeNum(summary.recentFailureRate) * 100) + ' %'"/>
-                <AdminStat label="Processus yt-dlp" :value="safeNum(data.activeProcesses)" icon="fa-solid fa-microchip" color="var(--admin-color)"
-                    :sub="safeNum(summary.consecutiveBlocks) ? safeNum(summary.consecutiveBlocks) + ' blocage(s) d\'affilée' : null"/>
-            </div>
+                <AdminStat label="Processus yt-dlp" :value="safeNum(data.activeProcesses)" icon="fa-solid fa-microchip" tone="admin"
+                    :sub="safeNum(summary.consecutiveBlocks) ? safeNum(summary.consecutiveBlocks) + ' blocage(s) d\'affilée' : 'Aucun blocage en cours'"/>
+            </AdminStatRow>
 
-            <div class="cards">
+            <AdminGrid>
                 <!-- Compte -->
-                <AdminCard title="Compte YouTube" icon="fa-solid fa-user-shield" color="var(--main)">
-                    <template #header>
+                <AdminCard title="Compte YouTube" subtitle="Cookies d'une session YouTube donnés au bot" icon="fa-solid fa-user-shield"
+                    tone="main" :span="7" :span-md="12" :busy="checkBusy" busy-label="Vérification du compte…">
+                    <template #actions>
                         <Tag :color="account.color" :icon="account.icon">{{ account.label }}</Tag>
                     </template>
                     <template v-if="cookies.present">
-                        <AdminKv label="Importé" :value="formatDate(cookies.importedAt) + ' (' + formatRelative(cookies.importedAt, nowDate) + ')'"/>
-                        <AdminKv label="Par" :value="cookies.importedBy?.username || 'Système'"/>
-                        <AdminKv label="Origine" :value="cookieSource(cookies.source)"/>
-                        <AdminKv label="Cookies enregistrés" mono :value="safeNum(cookies.count)"/>
-                        <AdminKv label="Cookies de connexion">
-                            <span v-if="!cookies.authNames?.length" class="muted">Aucun</span>
-                            <span v-else class="mono">{{ cookies.authNames.length }} / {{ cookies.authNames.length + (cookies.missing?.length || 0) }}</span>
-                        </AdminKv>
-                        <div v-if="cookies.authNames?.length" class="chips">
-                            <span v-for="name in cookies.authNames" :key="name" class="chip">{{ name }}</span>
+                        <div class="yt-kv-grid">
+                            <AdminKv label="Importé">
+                                <span :title="formatDate(cookies.importedAt)">{{ formatRelative(cookies.importedAt, nowDate) }}</span>
+                            </AdminKv>
+                            <AdminKv label="Par" :value="cookies.importedBy?.username || 'Système'"/>
+                            <AdminKv label="Origine" :value="cookieSource(cookies.source)"/>
+                            <AdminKv label="Cookies enregistrés" mono :value="safeNum(cookies.count)"/>
+                            <AdminKv label="Cookies de connexion">
+                                <span v-if="!cookies.authNames?.length" class="adm-muted">Aucun</span>
+                                <span v-else class="adm-mono">{{ cookies.authNames.length }} / {{ cookies.authNames.length + (cookies.missing?.length || 0) }}</span>
+                            </AdminKv>
+                            <AdminKv v-if="cookies.earliestAuthExpiry" label="Première expiration">
+                                <span :class="expiryClass">{{ formatDate(cookies.earliestAuthExpiry) }}</span>
+                            </AdminKv>
+                            <AdminKv label="Dernière vérification">
+                                <Tag v-if="checkBusy" tone="info" icon="fa-solid fa-spinner">En cours…</Tag>
+                                <Tag v-else-if="cookies.lastCheck" :tone="cookies.lastCheck.ok ? 'success' : 'error'"
+                                    :icon="cookies.lastCheck.ok ? 'fa-solid fa-check' : 'fa-solid fa-xmark'">
+                                    {{ cookies.lastCheck.ok ? "Réussie" : "Échouée" }} · {{ formatRelative(cookies.lastCheck.at, nowDate) }}
+                                </Tag>
+                                <span v-else class="adm-muted">Jamais</span>
+                            </AdminKv>
                         </div>
-                        <AdminKv v-if="cookies.earliestAuthExpiry" label="Première expiration">
-                            <span :style="{ color: expiryColor }">{{ formatDate(cookies.earliestAuthExpiry) }}</span>
-                        </AdminKv>
-                        <p v-if="expiryDays !== null && expiryDays < 14" class="note" :style="{ color: expiryColor }">
-                            <Icon icon="fa-solid fa-hourglass-half"/>
-                            {{ expiryDays < 0 ? "Des cookies de connexion ont expiré : reconnectez le compte." : "Des cookies de connexion expirent dans " + Math.max(0, Math.floor(expiryDays)) + " jour(s) : prévoyez de reconnecter le compte." }}
-                        </p>
-                        <AdminKv label="Dernière vérification">
-                            <Tag v-if="checkBusy" color="var(--admin-color)" icon="fa-solid fa-spinner">En cours…</Tag>
-                            <Tag v-else-if="cookies.lastCheck" :color="cookies.lastCheck.ok ? 'var(--text-success)' : 'var(--text-error)'"
-                                :icon="cookies.lastCheck.ok ? 'fa-solid fa-check' : 'fa-solid fa-xmark'">
-                                {{ cookies.lastCheck.ok ? "Réussie" : "Échouée" }} · {{ formatRelative(cookies.lastCheck.at, nowDate) }}
-                            </Tag>
-                            <span v-else class="muted">Jamais</span>
-                        </AdminKv>
-                        <p v-if="cookies.lastCheck?.message && !checkBusy" class="note">
+                        <div v-if="cookies.authNames?.length" class="adm-chips" aria-label="Cookies de connexion présents">
+                            <span v-for="name in cookies.authNames" :key="name" class="adm-chip">{{ name }}</span>
+                        </div>
+                        <p v-if="cookies.lastCheck?.message && !checkBusy" class="adm-hint" aria-live="polite">
                             {{ cookies.lastCheck.message }}<template v-if="cookies.lastCheck.premium"> · YouTube Premium</template>
                         </p>
-                        <div class="actions">
-                            <Button icon="fa-solid fa-stethoscope" :disabled="checkBusy || !cookies.loggedIn" @click="checkCookies()">
+                    </template>
+                    <template v-else>
+                        <p class="adm-text adm-muted">
+                            Aucun compte : le bot lit YouTube anonymement. Connectez un compte avec l'assistant pour débloquer
+                            les vidéos soumises à une vérification anti-robot ou à une restriction d'âge.
+                        </p>
+                    </template>
+                    <template #footer>
+                        <template v-if="cookies.present">
+                            <Button variant="danger" icon="fa-solid fa-trash" :loading="deleting" @click="deleteCookies()">Supprimer</Button>
+                            <Button icon="fa-solid fa-stethoscope" :loading="checkBusy" :disabled="!cookies.loggedIn" @click="checkCookies()">
                                 {{ checkBusy ? "Vérification…" : "Vérifier" }}
                             </Button>
-                            <Button class="danger" icon="fa-solid fa-trash" :disabled="deleting" @click="deleteCookies()">Supprimer</Button>
-                        </div>
+                        </template>
+                        <Button v-else icon="fa-solid fa-right-to-bracket" @click="openAssistant()">Connecter un compte</Button>
                     </template>
-                    <Info v-else secondary>
-                        Aucun compte : le bot lit YouTube anonymement. Connectez un compte avec l'assistant pour débloquer
-                        les vidéos soumises à une vérification anti-robot ou à une restriction d'âge.
-                    </Info>
                 </AdminCard>
 
                 <!-- yt-dlp -->
-                <AdminCard title="yt-dlp" icon="fa-solid fa-download" color="var(--text-error)">
-                    <template #header>
-                        <Tag v-if="ytdlp.updating" color="var(--admin-color)" icon="fa-solid fa-spinner">Mise à jour…</Tag>
-                        <Tag v-else :color="ytdlp.autoUpdate ? 'var(--text-success)' : 'var(--text-secondary)'" icon="fa-solid fa-arrows-rotate">
-                            {{ ytdlp.autoUpdate ? "Auto" : "Manuelle" }}
+                <AdminCard title="yt-dlp" subtitle="Extracteur utilisé pour chaque lecture" icon="fa-solid fa-download" tone="error"
+                    :span="5" :span-md="12" :busy="updateBusy" busy-label="Mise à jour de yt-dlp…">
+                    <template #actions>
+                        <Tag v-if="ytdlp.updating" tone="info" icon="fa-solid fa-spinner">Mise à jour…</Tag>
+                        <Tag v-else :tone="ytdlp.autoUpdate ? 'success' : 'default'" icon="fa-solid fa-arrows-rotate">
+                            {{ ytdlp.autoUpdate ? "Mise à jour auto" : "Mise à jour manuelle" }}
                         </Tag>
                     </template>
                     <AdminKv label="Version" mono :value="ytdlp.version || 'Inconnue'"/>
                     <AdminKv label="Origine" :value="binarySource(ytdlp.source)"/>
-                    <p class="path" :title="ytdlp.path">{{ ytdlp.path || "Aucun chemin" }}</p>
                     <AdminKv label="ffmpeg" :value="data.ffmpeg?.path ? (data.ffmpeg.source === 'path' ? 'PATH du système' : 'ffmpeg-static') : 'Introuvable'"/>
+                    <code class="adm-code yt-path" :title="ytdlp.path || undefined">{{ ytdlp.path || "Aucun chemin" }}</code>
                     <template v-if="ytdlp.lastUpdate">
                         <AdminKv label="Dernière mise à jour">
-                            <Tag :color="ytdlp.lastUpdate.ok ? 'var(--text-success)' : 'var(--text-error)'" :icon="ytdlp.lastUpdate.ok ? 'fa-solid fa-check' : 'fa-solid fa-xmark'">
+                            <Tag :tone="ytdlp.lastUpdate.ok ? 'success' : 'error'" :icon="ytdlp.lastUpdate.ok ? 'fa-solid fa-check' : 'fa-solid fa-xmark'">
                                 {{ formatRelative(ytdlp.lastUpdate.at, nowDate) }}
                             </Tag>
                         </AdminKv>
-                        <p class="note">{{ ytdlp.lastUpdate.message }}<template v-if="ytdlp.lastUpdate.reason"> ({{ ytdlp.lastUpdate.reason }})</template></p>
-                        <details v-if="ytdlp.lastUpdate.output" class="details">
+                        <p class="adm-hint">{{ ytdlp.lastUpdate.message }}<template v-if="ytdlp.lastUpdate.reason"> ({{ ytdlp.lastUpdate.reason }})</template></p>
+                        <details v-if="ytdlp.lastUpdate.output" class="yt-details">
                             <summary>Sortie de yt-dlp</summary>
-                            <pre class="output">{{ ytdlp.lastUpdate.output }}</pre>
+                            <pre class="yt-output">{{ ytdlp.lastUpdate.output }}</pre>
                         </details>
                     </template>
-                    <div class="actions">
-                        <Button icon="fa-solid fa-cloud-arrow-down" :disabled="updateBusy || ytdlp.source === 'missing'" @click="updateYtdlp()">
+                    <p class="adm-hint">YouTube change souvent : une version récente de yt-dlp corrige la plupart des erreurs 403 et anti-robot.</p>
+                    <template #footer>
+                        <Button icon="fa-solid fa-cloud-arrow-down" :loading="updateBusy" :disabled="ytdlp.source === 'missing'" @click="updateYtdlp()">
                             {{ updateBusy ? "Mise à jour…" : "Mettre à jour" }}
                         </Button>
-                    </div>
-                    <p class="hint">YouTube change souvent : une version récente de yt-dlp corrige la plupart des erreurs 403 et anti-robot.</p>
+                    </template>
                 </AdminCard>
 
                 <!-- Assistant de connexion -->
-                <AdminCard id="yt-assistant" title="Se connecter à YouTube" icon="fa-solid fa-right-to-bracket" color="var(--main)" class="wide">
-                    <template #header>
-                        <Tag color="var(--admin-color)" icon="fa-solid fa-clock">Environ 2 minutes</Tag>
+                <AdminCard id="yt-assistant" ref="assistantRef" title="Se connecter à YouTube"
+                    subtitle="Donner au bot les cookies d'une session privée, en 4 étapes" icon="fa-solid fa-right-to-bracket" tone="main"
+                    :span="12" collapsible persist-key="yt-assistant" :default-open="account.key !== 'valid'">
+                    <template #actions>
+                        <Tag tone="info" icon="fa-solid fa-clock">Environ 2 minutes</Tag>
                     </template>
-                    <p class="hint">
+                    <p class="adm-text adm-muted">
                         YouTube n'accepte plus de mot de passe pour les robots : la connexion se fait en donnant au bot les cookies
                         d'une session YouTube. Suivez les étapes dans l'ordre.
                     </p>
 
-                    <ol class="steps">
-                        <li class="step">
-                            <span class="step-num">1</span>
-                            <div class="step-body">
-                                <p class="step-title">Ouvrez une fenêtre de navigation privée et connectez-vous</p>
-                                <p class="hint">
-                                    Ouvrez une <strong>fenêtre privée</strong> (Ctrl+Maj+N sur Chrome / Edge, Ctrl+Maj+P sur Firefox),
-                                    collez-y le lien ci-dessous puis connectez-vous au compte Google à utiliser.
-                                </p>
-                                <p class="hint why">
-                                    <Icon icon="fa-solid fa-circle-question"/>
-                                    Pourquoi une fenêtre privée ? YouTube renouvelle régulièrement les cookies des onglets ouverts, ce qui rend
-                                    les anciens inutilisables. Une session privée, fermée juste après l'export, ne sera plus jamais renouvelée :
+                    <AdminSteps label="Étapes de connexion du compte YouTube">
+                        <AdminStep :number="1" title="Ouvrez une fenêtre de navigation privée et connectez-vous">
+                            <p class="adm-hint">
+                                Ouvrez une <strong>fenêtre privée</strong> (Ctrl+Maj+N sur Chrome / Edge, Ctrl+Maj+P sur Firefox),
+                                collez-y le lien ci-dessous puis connectez-vous au compte Google à utiliser.
+                            </p>
+                            <div class="yt-link-row">
+                                <code class="adm-code yt-link-row__url">{{ LOGIN_URL }}</code>
+                                <div class="adm-actions">
+                                    <Button size="sm" icon="fa-solid fa-copy" @click="copyLoginLink()">Copier le lien</Button>
+                                    <a class="yt-linkbtn" :href="LOGIN_URL" target="_blank" rel="noopener noreferrer">
+                                        <Icon icon="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"/> Ouvrir
+                                        <span class="sr-only">(nouvel onglet)</span>
+                                    </a>
+                                </div>
+                            </div>
+                            <p class="adm-hint">« Ouvrir » utilise un onglet normal : ne l'utilisez que si cette page est elle-même en navigation privée.</p>
+                            <details class="yt-details">
+                                <summary>Pourquoi une fenêtre privée ?</summary>
+                                <p class="adm-hint">
+                                    YouTube renouvelle régulièrement les cookies des onglets ouverts, ce qui rend les anciens inutilisables.
+                                    Une session privée, fermée juste après l'export, ne sera plus jamais renouvelée :
                                     les cookies donnés au bot restent valides beaucoup plus longtemps.
                                 </p>
-                                <div class="link-row">
-                                    <code class="link-text">{{ LOGIN_URL }}</code>
-                                    <div class="actions">
-                                        <Button icon="fa-solid fa-copy" @click="copyLoginLink()">Copier le lien</Button>
-                                        <a class="link-btn" :href="LOGIN_URL" target="_blank" rel="noopener noreferrer">
-                                            <Icon icon="fa-solid fa-arrow-up-right-from-square"/> Ouvrir
-                                        </a>
-                                    </div>
-                                </div>
-                                <p class="hint">« Ouvrir » utilise un onglet normal : ne l'utilisez que si cette page est elle-même en navigation privée.</p>
-                            </div>
-                        </li>
+                            </details>
+                        </AdminStep>
 
-                        <li class="step">
-                            <span class="step-num">2</span>
-                            <div class="step-body">
-                                <p class="step-title">Exportez les cookies depuis la page youtube.com/robots.txt</p>
-                                <p class="hint">
-                                    Après la connexion, vous arrivez sur une page de texte brut (youtube.com/robots.txt) : c'est normal, restez sur cet onglet.
-                                    Exportez les cookies avec l'extension de votre navigateur, au format <strong>Netscape (cookies.txt)</strong> :
-                                </p>
-                                <div class="actions">
-                                    <a class="link-btn" :href="EXT_CHROME" target="_blank" rel="noopener noreferrer">
-                                        <Icon icon="fa-brands fa-chrome"/> Chrome / Edge : « Get cookies.txt LOCALLY »
-                                    </a>
-                                    <a class="link-btn" :href="EXT_FIREFOX" target="_blank" rel="noopener noreferrer">
-                                        <Icon icon="fa-brands fa-firefox-browser"/> Firefox : « cookies.txt »
-                                    </a>
-                                </div>
-                                <p class="hint">
-                                    Les extensions sont désactivées en navigation privée par défaut : autorisez-la dans la fiche de l'extension
-                                    (Chrome / Edge : « Autoriser en navigation privée » ; Firefox : « Exécuter dans les fenêtres privées »),
-                                    puis cliquez sur son icône et choisissez « Export » (site actuel). Un fichier .txt est téléchargé.
-                                </p>
+                        <AdminStep :number="2" title="Exportez les cookies depuis la page youtube.com/robots.txt">
+                            <p class="adm-hint">
+                                Après la connexion, vous arrivez sur une page de texte brut (youtube.com/robots.txt) : c'est normal, restez sur cet onglet.
+                                Exportez les cookies avec l'extension de votre navigateur, au format <strong>Netscape (cookies.txt)</strong> :
+                            </p>
+                            <div class="adm-actions">
+                                <a class="yt-linkbtn" :href="EXT_CHROME" target="_blank" rel="noopener noreferrer">
+                                    <Icon icon="fa-brands fa-chrome" aria-hidden="true"/> Chrome / Edge : « Get cookies.txt LOCALLY »
+                                    <span class="sr-only">(nouvel onglet)</span>
+                                </a>
+                                <a class="yt-linkbtn" :href="EXT_FIREFOX" target="_blank" rel="noopener noreferrer">
+                                    <Icon icon="fa-brands fa-firefox-browser" aria-hidden="true"/> Firefox : « cookies.txt »
+                                    <span class="sr-only">(nouvel onglet)</span>
+                                </a>
                             </div>
-                        </li>
+                            <p class="adm-hint">
+                                Les extensions sont désactivées en navigation privée par défaut : autorisez-la dans la fiche de l'extension
+                                (Chrome / Edge : « Autoriser en navigation privée » ; Firefox : « Exécuter dans les fenêtres privées »),
+                                puis cliquez sur son icône et choisissez « Export » (site actuel). Un fichier .txt est téléchargé.
+                            </p>
+                        </AdminStep>
 
-                        <li class="step">
-                            <span class="step-num">3</span>
-                            <div class="step-body">
-                                <p class="step-title">Donnez le fichier au bot</p>
-                                <div :class="['dropzone', { over: dragOver, busy: importing }]" role="button" tabindex="0"
-                                    @click="chooseFile()" @keydown.enter.prevent="chooseFile()" @keydown.space.prevent="chooseFile()"
-                                    @dragenter.prevent="dragOver = true" @dragover.prevent="dragOver = true"
-                                    @dragleave.prevent="dragOver = false" @drop.prevent="onDrop">
-                                    <Icon class="drop-icon" :icon="importing ? 'fa-solid fa-spinner' : 'fa-solid fa-file-arrow-up'" :spin-pulse="importing"/>
-                                    <p class="drop-title">{{ importing ? "Import en cours…" : "Glissez le fichier ici ou cliquez pour le choisir" }}</p>
-                                    <p class="hint">Fichier .txt (Netscape) ou .json (export d'extension), 1 Mo maximum</p>
-                                </div>
-                                <input ref="fileInput" class="hidden-input" type="file" accept=".txt,.json,text/plain,application/json" @change="onFileChange"/>
-                                <p class="hint">Ou collez le contenu du fichier :</p>
-                                <textarea v-model="pasteText" class="paste" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"
+                        <AdminStep :number="3" title="Donnez le fichier au bot">
+                            <button type="button" :class="['yt-drop', { 'yt-drop--over': dragOver, 'yt-drop--busy': importing }]"
+                                :aria-busy="importing ? 'true' : undefined" :aria-describedby="dropHintId" :disabled="importing"
+                                @click="chooseFile()"
+                                @dragenter.prevent="dragOver = true" @dragover.prevent="dragOver = true"
+                                @dragleave.prevent="dragOver = false" @drop.prevent="onDrop">
+                                <Icon class="yt-drop__icon" :icon="importing ? 'fa-solid fa-spinner' : 'fa-solid fa-file-arrow-up'"
+                                    :spin-pulse="importing" aria-hidden="true"/>
+                                <span class="yt-drop__title">{{ importing ? "Import en cours…" : "Glissez le fichier ici ou cliquez pour le choisir" }}</span>
+                                <span :id="dropHintId" class="adm-hint">Fichier .txt (Netscape) ou .json (export d'extension), 1 Mo maximum</span>
+                            </button>
+                            <input ref="fileInput" class="yt-hidden-input" type="file" tabindex="-1" aria-hidden="true"
+                                accept=".txt,.json,text/plain,application/json" @change="onFileChange"/>
+
+                            <AdminField label="Ou collez le contenu du fichier" hint="Le texte collé est effacé après l'import et n'est jamais réaffiché."
+                                v-slot="{ id, describedby }">
+                                <textarea :id="id" v-model="pasteText" class="yt-paste adm-mono" :aria-describedby="describedby"
+                                    spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"
                                     placeholder="# Netscape HTTP Cookie File&#10;.youtube.com	TRUE	/	TRUE	…"></textarea>
-                                <div class="footer">
-                                    <span class="hint">Le texte collé est effacé après l'import et n'est jamais réaffiché.</span>
-                                    <Button icon="fa-solid fa-file-import" :disabled="importing || !pasteText.trim()" @click="importPaste()">
-                                        {{ importing ? "Import…" : "Importer" }}
-                                    </Button>
-                                </div>
-                                <div v-if="lastImport" class="import-result">
-                                    <Success v-if="lastImport.loggedIn">
-                                        Cookies importés {{ formatRelative(lastImport.at, nowDate) }} : {{ lastImport.count }} cookie(s), compte connecté.
-                                    </Success>
-                                    <Error v-else>
-                                        Cookies importés, mais aucun compte connecté n'y figure : vérifiez que vous étiez bien connecté à YouTube lors de l'export.
-                                    </Error>
-                                    <ul v-if="lastImport.warnings.length" class="warnings">
-                                        <li v-for="(warning, index) in lastImport.warnings" :key="index"><Icon icon="fa-solid fa-triangle-exclamation"/> {{ warning }}</li>
-                                    </ul>
-                                    <p v-if="pendingCheckSince" class="hint"><Icon icon="fa-solid fa-spinner" spin-pulse/> Vérification du compte auprès de YouTube…</p>
-                                    <p v-else-if="lastImport.loggedIn && cookies.lastCheck" class="hint" :style="{ color: cookies.lastCheck.ok ? 'var(--text-success)' : 'var(--text-error)' }">
-                                        <Icon :icon="cookies.lastCheck.ok ? 'fa-solid fa-check' : 'fa-solid fa-xmark'"/> Vérification : {{ cookies.lastCheck.message }}
-                                    </p>
-                                </div>
+                            </AdminField>
+                            <div class="adm-actions yt-end">
+                                <Button icon="fa-solid fa-file-import" :loading="importing" :disabled="!pasteText.trim()" @click="importPaste()">
+                                    {{ importing ? "Import…" : "Importer le texte collé" }}
+                                </Button>
                             </div>
-                        </li>
 
-                        <li class="step">
-                            <span class="step-num">4</span>
-                            <div class="step-body">
-                                <p class="step-title">Fermez la fenêtre privée, sans vous déconnecter</p>
-                                <p class="hint">
-                                    Fermez simplement la fenêtre : la session reste valide et seul le bot l'utilisera désormais.
-                                    Ne cliquez pas sur « Se déconnecter » et ne rouvrez pas YouTube avec cette session : cela invaliderait les cookies importés.
+                            <div v-if="lastImport" class="adm-stack" aria-live="polite">
+                                <AdminBanner v-if="lastImport.loggedIn" tone="success" title="Cookies importés">
+                                    {{ formatRelative(lastImport.at, nowDate) }} : {{ lastImport.count }} cookie(s), compte connecté.
+                                </AdminBanner>
+                                <AdminBanner v-else tone="error" title="Aucun compte connecté dans ces cookies">
+                                    Vérifiez que vous étiez bien connecté à YouTube lors de l'export.
+                                </AdminBanner>
+                                <ul v-if="lastImport.warnings.length" class="yt-warnings">
+                                    <li v-for="(warning, index) in lastImport.warnings" :key="index">
+                                        <Icon icon="fa-solid fa-triangle-exclamation" aria-hidden="true"/> {{ warning }}
+                                    </li>
+                                </ul>
+                                <p v-if="pendingCheckSince" class="adm-hint yt-check">
+                                    <Icon icon="fa-solid fa-spinner" spin-pulse aria-hidden="true"/> Vérification du compte auprès de YouTube…
+                                </p>
+                                <p v-else-if="lastImport.loggedIn && cookies.lastCheck"
+                                    :class="['adm-hint', 'yt-check', cookies.lastCheck.ok ? 'yt-ok' : 'yt-ko']">
+                                    <Icon :icon="cookies.lastCheck.ok ? 'fa-solid fa-check' : 'fa-solid fa-xmark'" aria-hidden="true"/>
+                                    Vérification : {{ cookies.lastCheck.message }}
                                 </p>
                             </div>
-                        </li>
-                    </ol>
+                        </AdminStep>
 
-                    <Info class="risk">
-                        YouTube peut suspendre un compte utilisé par un robot. Utilisez de préférence un compte Google dédié, jamais votre compte principal.
+                        <AdminStep :number="4" title="Fermez la fenêtre privée, sans vous déconnecter">
+                            <p class="adm-hint">
+                                Fermez simplement la fenêtre : la session reste valide et seul le bot l'utilisera désormais.
+                                Ne cliquez pas sur « Se déconnecter » et ne rouvrez pas YouTube avec cette session : cela invaliderait les cookies importés.
+                            </p>
+                        </AdminStep>
+                    </AdminSteps>
+
+                    <AdminBanner tone="warning" title="Utilisez un compte dédié">
+                        YouTube peut suspendre un compte utilisé par un robot : jamais votre compte principal.
                         En mode « En secours », le compte n'est utilisé que lorsque la lecture sans compte échoue.
-                    </Info>
+                    </AdminBanner>
 
-                    <details class="details advanced">
+                    <details class="yt-details yt-advanced">
                         <summary>Avancé : importer depuis un navigateur de la machine du bot</summary>
-                        <p class="hint">
+                        <p class="adm-hint">
                             yt-dlp lit directement les cookies d'un navigateur installé sur la machine qui exécute le bot. Cela ne fonctionne qu'en local
                             (bot lancé sur votre ordinateur), jamais dans Docker ni sur un serveur distant. Le profil habituel du navigateur est utilisé :
                             ses cookies seront invalidés dès votre prochaine visite de YouTube, l'assistant ci-dessus est plus fiable.
                             Sous Windows, Chrome et Edge bloquent souvent cette lecture : fermez-les complètement ou préférez Firefox.
                         </p>
-                        <div class="form-grid">
-                            <label class="field-inline">
-                                <span>Navigateur</span>
-                                <select v-model="browser" class="select">
+                        <AdminGrid gap="sm" align="start">
+                            <AdminField class="adm-span-6" label="Navigateur" v-slot="{ id }">
+                                <select :id="id" v-model="browser">
                                     <option v-for="item in BROWSERS" :key="item.value" :value="item.value">{{ item.label }}</option>
                                 </select>
-                            </label>
-                            <label class="field-inline">
-                                <span>Profil (facultatif)</span>
-                                <input type="text" v-model="browserProfile" maxlength="200" placeholder="Profil par défaut"/>
-                            </label>
-                        </div>
-                        <div class="actions">
-                            <Button icon="fa-solid fa-laptop" :disabled="browserImporting || importing" @click="importFromBrowser()">
+                            </AdminField>
+                            <AdminField class="adm-span-6" label="Profil" hint="Facultatif : profil par défaut si vide." v-slot="{ id, describedby }">
+                                <input :id="id" type="text" v-model="browserProfile" maxlength="200" autocomplete="off"
+                                    :aria-describedby="describedby" placeholder="Profil par défaut"/>
+                            </AdminField>
+                        </AdminGrid>
+                        <div class="adm-actions">
+                            <Button icon="fa-solid fa-laptop" :loading="browserImporting" :disabled="importing" @click="importFromBrowser()">
                                 {{ browserImporting ? "Lecture du navigateur…" : "Importer depuis " + browserLabel }}
                             </Button>
                         </div>
@@ -264,155 +290,193 @@
                 </AdminCard>
 
                 <!-- Réglages -->
-                <AdminCard title="Réglages" icon="fa-solid fa-sliders" color="var(--admin-color)">
-                    <template #header>
-                        <Tag v-if="dirtyKeys.length" color="var(--text-warning)" icon="fa-solid fa-pen">{{ dirtyKeys.length }} modification(s)</Tag>
+                <AdminCard title="Réglages de lecture" subtitle="Utilisation du compte, clients YouTube et mises à jour"
+                    icon="fa-solid fa-sliders" tone="admin" :span="7" :span-md="12">
+                    <template #actions>
+                        <span v-if="dirtyKeys.length" class="adm-badge adm-tone-warning">
+                            <Icon icon="fa-solid fa-pen" aria-hidden="true"/> {{ dirtyKeys.length }} modification(s)
+                        </span>
                     </template>
-                    <div v-for="field in FIELDS" :key="field.key" class="setting">
-                        <div class="setting-head">
-                            <span class="setting-label">{{ field.label }}</span>
-                            <Tag v-if="isLocked(field.key)" color="var(--text-secondary)" icon="fa-solid fa-lock">{{ settings[field.key]?.env }}</Tag>
-                            <button v-else-if="!isDefault(field)" class="reset" type="button" title="Revenir à la valeur par défaut" @click="resetField(field)">
-                                <Icon icon="fa-solid fa-rotate-left"/> Défaut
-                            </button>
+                    <div class="yt-settings">
+                        <template v-for="field in FIELDS" :key="field.key">
+                            <!-- Choix exclusif -->
+                            <AdminField v-if="field.type === 'pills'" plain :label="field.label" :hint="field.hint"
+                                :env="lockEnv(field.key)" :dirty="dirtyKeys.includes(field.key)">
+                                <template #aside>
+                                    <button v-if="!isLocked(field.key) && !isDefault(field)" type="button" class="yt-reset"
+                                        :aria-label="'Rétablir la valeur par défaut de « ' + field.label + ' »'" @click="resetField(field)">
+                                        <Icon icon="fa-solid fa-rotate-left" aria-hidden="true"/> Défaut
+                                    </button>
+                                </template>
+                                <template #default="{ id, labelledby, describedby }">
+                                    <AdminPills :id="id" v-model="draft[field.key]" :aria-labelledby="labelledby" :aria-describedby="describedby"
+                                        :options="pillOptions(field)"/>
+                                </template>
+                            </AdminField>
+
+                            <!-- Interrupteur : le libellé est porté par le Switch lui-même -->
+                            <AdminField v-else-if="field.type === 'bool'" :env="lockEnv(field.key)" :dirty="dirtyKeys.includes(field.key)">
+                                <template #aside>
+                                    <button v-if="!isLocked(field.key) && !isDefault(field)" type="button" class="yt-reset"
+                                        :aria-label="'Rétablir la valeur par défaut de « ' + field.label + ' »'" @click="resetField(field)">
+                                        <Icon icon="fa-solid fa-rotate-left" aria-hidden="true"/> Défaut
+                                    </button>
+                                </template>
+                                <Switch v-model="draft[field.key]" :label="field.text" :description="field.hint" :disabled="isLocked(field.key)"/>
+                            </AdminField>
+
+                            <!-- Texte -->
+                            <AdminField v-else :label="field.label" :hint="field.hint" :env="lockEnv(field.key)" :dirty="dirtyKeys.includes(field.key)">
+                                <template #aside>
+                                    <button v-if="!isLocked(field.key) && !isDefault(field)" type="button" class="yt-reset"
+                                        :aria-label="'Rétablir la valeur par défaut de « ' + field.label + ' »'" @click="resetField(field)">
+                                        <Icon icon="fa-solid fa-rotate-left" aria-hidden="true"/> Défaut
+                                    </button>
+                                </template>
+                                <template #default="{ id, describedby, disabled }">
+                                    <input :id="id" type="text" v-model="draft[field.key]" :class="{ 'adm-mono': field.mono }"
+                                        :disabled="disabled" :aria-describedby="describedby"
+                                        :placeholder="field.placeholder" maxlength="500" spellcheck="false" autocomplete="off"/>
+                                </template>
+                            </AdminField>
+                        </template>
+
+                        <hr class="adm-divider"/>
+
+                        <div class="adm-stack">
+                            <AdminKv label="Fournisseur de PO token">
+                                <Tag :tone="data.pot?.configured ? 'success' : 'default'"
+                                    :icon="data.pot?.configured ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-minus'">
+                                    {{ data.pot?.configured ? "Configuré" : "Non configuré" }}
+                                </Tag>
+                            </AdminKv>
+                            <code v-if="data.pot?.url" class="adm-code yt-path">{{ data.pot.url }}</code>
+                            <p class="adm-hint">
+                                Service bgutil qui génère les jetons demandés par YouTube.
+                                <template v-if="data.pot?.locked">Défini par la variable d'environnement {{ settings.potProviderUrl?.env || "YTDLP_POT_PROVIDER" }}.</template>
+                                <template v-else>Se configure avec la variable d'environnement YTDLP_POT_PROVIDER (service bgutil-provider du docker-compose).</template>
+                            </p>
                         </div>
-                        <div :class="{ locked: isLocked(field.key) }">
-                            <AdminPills v-if="field.type === 'pills'" v-model="draft[field.key]" :options="field.options"/>
-                            <label v-else-if="field.type === 'bool'" class="check">
-                                <input type="checkbox" v-model="draft[field.key]" :disabled="isLocked(field.key)"/>
-                                <span>{{ field.text }}</span>
-                            </label>
-                            <input v-else type="text" v-model="draft[field.key]" :class="{ mono: field.mono }" :disabled="isLocked(field.key)"
-                                :placeholder="field.placeholder" maxlength="500" spellcheck="false"/>
-                        </div>
-                        <p v-if="isLocked(field.key)" class="hint">Défini par la variable d'environnement {{ settings[field.key]?.env }} : modifiable uniquement dans la configuration du serveur.</p>
-                        <p class="hint">{{ field.hint }}</p>
                     </div>
-                    <div class="setting">
-                        <div class="setting-head">
-                            <span class="setting-label">Fournisseur de PO token</span>
-                            <Tag :color="data.pot?.configured ? 'var(--text-success)' : 'var(--text-secondary)'">{{ data.pot?.configured ? "Configuré" : "Non configuré" }}</Tag>
-                        </div>
-                        <p v-if="data.pot?.url" class="path">{{ data.pot.url }}</p>
-                        <p class="hint">
-                            Service bgutil qui génère les jetons demandés par YouTube.
-                            <template v-if="data.pot?.locked">Défini par la variable d'environnement {{ settings.potProviderUrl?.env || "YTDLP_POT_PROVIDER" }}.</template>
-                            <template v-else>Se configure avec la variable d'environnement YTDLP_POT_PROVIDER (service bgutil-provider du docker-compose).</template>
-                        </p>
-                    </div>
-                    <div class="actions">
-                        <Button icon="fa-solid fa-floppy-disk" :disabled="!dirtyKeys.length || saving" @click="saveSettings()">
+                    <template #footer>
+                        <span v-if="dirtyKeys.length" class="adm-footer-meta">Modifications non enregistrées</span>
+                        <Button variant="secondary" icon="fa-solid fa-xmark" :disabled="!dirtyKeys.length || saving" @click="syncDraft()">Annuler</Button>
+                        <Button icon="fa-solid fa-floppy-disk" :loading="saving" :disabled="!dirtyKeys.length" @click="saveSettings()">
                             {{ saving ? "Enregistrement…" : "Enregistrer" }}
                         </Button>
-                        <Button class="secondary" icon="fa-solid fa-xmark" :disabled="!dirtyKeys.length || saving" @click="syncDraft()">Annuler</Button>
-                    </div>
+                    </template>
                 </AdminCard>
 
                 <!-- Test de lecture -->
-                <AdminCard title="Test de lecture" icon="fa-solid fa-vial" color="var(--owner-color)">
-                    <p class="hint">Extrait une vidéo comme pour une vraie lecture (sans la télécharger) et affiche le format obtenu ou l'erreur exacte.</p>
-                    <label class="field-inline">
-                        <span>Vidéo</span>
-                        <input type="text" v-model="testUrl" class="mono" maxlength="500" spellcheck="false" :placeholder="settings.testUrl?.value || 'https://www.youtube.com/watch?v=…'"/>
-                    </label>
-                    <div class="form-grid">
-                        <label class="field-inline">
-                            <span>Route</span>
-                            <select v-model="testRoute" class="select">
+                <AdminCard title="Test de lecture" subtitle="Extraction réelle, sans téléchargement" icon="fa-solid fa-vial"
+                    :color="'var(--owner-color)'" :span="5" :span-md="12" :busy="testing" busy-label="Test en cours…">
+                    <p class="adm-hint">Extrait une vidéo comme pour une vraie lecture et affiche le format obtenu ou l'erreur exacte.</p>
+                    <AdminField label="Vidéo" hint="Vide = vidéo de test des réglages." v-slot="{ id, describedby }">
+                        <input :id="id" type="text" v-model="testUrl" class="adm-mono" maxlength="500" spellcheck="false" autocomplete="off"
+                            inputmode="url" :aria-describedby="describedby" @keyup.enter="runTest()"
+                            :placeholder="settings.testUrl?.value || 'https://www.youtube.com/watch?v=…'"/>
+                    </AdminField>
+                    <AdminGrid gap="sm" align="start">
+                        <AdminField class="adm-span-6" label="Route" v-slot="{ id }">
+                            <select :id="id" v-model="testRoute">
                                 <option value="auto">Automatique</option>
                                 <option value="warp">WARP</option>
                                 <option value="direct">Directe</option>
                             </select>
-                        </label>
-                        <label class="field-inline">
-                            <span>Identité</span>
-                            <select v-model="testIdentity" class="select">
+                        </AdminField>
+                        <AdminField class="adm-span-6" label="Identité" v-slot="{ id }">
+                            <select :id="id" v-model="testIdentity">
                                 <option value="auto">Selon les réglages</option>
                                 <option value="anon">Sans compte</option>
                                 <option value="cookies" :disabled="!cookies.present">Avec le compte</option>
                             </select>
-                        </label>
-                        <label class="field-inline">
-                            <span>Clients (facultatif)</span>
-                            <input type="text" v-model="testClients" class="mono" maxlength="200" spellcheck="false" :placeholder="settings.playerClients?.value || 'Défaut'"/>
-                        </label>
+                        </AdminField>
+                        <AdminField label="Clients" hint="Facultatif, séparés par des virgules." v-slot="{ id, describedby }">
+                            <input :id="id" type="text" v-model="testClients" class="adm-mono" maxlength="200" spellcheck="false" autocomplete="off"
+                                :aria-describedby="describedby" :placeholder="settings.playerClients?.value || 'Défaut'"/>
+                        </AdminField>
+                    </AdminGrid>
+                    <div class="adm-actions yt-end">
+                        <Button icon="fa-solid fa-play" :loading="testing" @click="runTest()">{{ testing ? "Test en cours…" : "Lancer le test" }}</Button>
                     </div>
-                    <div class="actions">
-                        <Button icon="fa-solid fa-play" :disabled="testing" @click="runTest()">{{ testing ? "Test en cours…" : "Tester" }}</Button>
-                    </div>
-                    <div v-if="testResult" class="test-result">
-                        <Success v-if="testResult.ok">{{ testResult.message || "Extraction réussie" }}</Success>
-                        <Error v-else>{{ youtubeClass(testResult.cls) }} : {{ testResult.message }}</Error>
-                        <div class="chips">
+
+                    <div v-if="testResult" class="adm-stack" aria-live="polite">
+                        <AdminBanner v-if="testResult.ok" tone="success" title="Extraction réussie">{{ testResult.message || "La vidéo est lisible." }}</AdminBanner>
+                        <AdminBanner v-else tone="error" :title="youtubeClass(testResult.cls)">{{ testResult.message }}</AdminBanner>
+                        <div class="adm-tags">
                             <Tag :color="testResult.route === 'warp' ? 'var(--owner-color)' : 'var(--admin-color)'" icon="fa-solid fa-route">{{ routeLabel(testResult.route) }}</Tag>
-                            <Tag :color="testResult.identity === 'cookies' ? 'var(--main)' : 'var(--text-secondary)'" icon="fa-solid fa-user">{{ identityLabel(testResult.identity) }}</Tag>
-                            <Tag color="var(--text-secondary)" icon="fa-solid fa-stopwatch">{{ safeNum(testResult.ms) }} ms</Tag>
+                            <Tag :tone="testResult.identity === 'cookies' ? 'main' : 'default'" icon="fa-solid fa-user">{{ identityLabel(testResult.identity) }}</Tag>
+                            <Tag icon="fa-solid fa-stopwatch">{{ formatMs(testResult.ms) }}</Tag>
                         </div>
                         <AdminKv v-if="testResult.format" label="Format" mono
                             :value="[testResult.format.id, testResult.format.ext, testResult.format.acodec, testResult.format.abr ? testResult.format.abr + ' kb/s' : null].filter(Boolean).join(' · ')"/>
                         <AdminKv v-if="testResult.clients" label="Clients" mono :value="testResult.clients"/>
                         <AdminKv v-if="testResult.version" label="yt-dlp" mono :value="testResult.version"/>
-                        <details v-if="testResult.details" class="details">
+                        <details v-if="testResult.details" class="yt-details">
                             <summary>Messages de yt-dlp</summary>
-                            <pre class="output">{{ testResult.details }}</pre>
+                            <pre class="yt-output">{{ testResult.details }}</pre>
                         </details>
                     </div>
                 </AdminCard>
 
                 <!-- Diagnostics -->
-                <AdminCard title="Diagnostics des lectures" icon="fa-solid fa-heart-pulse" color="var(--text-warning)" class="wide">
-                    <template #header>
-                        <Button class="secondary" icon="fa-solid fa-eraser" :disabled="clearing || !safeNum(summary.total)" @click="clearDiagnostics()">Effacer</Button>
+                <AdminCard title="Diagnostics des lectures" :subtitle="'Depuis le ' + formatDate(summary.since)" icon="fa-solid fa-heart-pulse"
+                    tone="warning" :span="12">
+                    <template #actions>
+                        <Button size="sm" variant="secondary" icon="fa-solid fa-eraser" :loading="clearing" :disabled="!safeNum(summary.total)"
+                            @click="clearDiagnostics()">Effacer</Button>
                     </template>
-                    <p class="hint">
-                        Depuis le {{ formatDate(summary.since) }} : {{ safeNum(summary.ok) }} réussie(s), {{ safeNum(summary.failed) }} échec(s),
-                        {{ safeNum(summary.aborted) }} annulée(s).
-                        <template v-if="summary.lastSuccess"> Dernière réussite {{ formatRelative(summary.lastSuccess, nowDate) }}.</template>
-                    </p>
-                    <div v-if="classCounts.length" class="chips">
-                        <Tag v-for="[cls, count] in classCounts" :key="cls" :color="classColor(cls)" icon="fa-solid fa-circle-exclamation">
+                    <div class="adm-tags" aria-label="Résumé des tentatives">
+                        <Tag tone="success" icon="fa-solid fa-check">{{ safeNum(summary.ok) }} réussie(s)</Tag>
+                        <Tag tone="error" icon="fa-solid fa-xmark">{{ safeNum(summary.failed) }} échec(s)</Tag>
+                        <Tag icon="fa-solid fa-ban">{{ safeNum(summary.aborted) }} annulée(s)</Tag>
+                        <span v-if="summary.lastSuccess" class="adm-hint">Dernière réussite {{ formatRelative(summary.lastSuccess, nowDate) }}</span>
+                    </div>
+                    <div v-if="classCounts.length" class="adm-tags" aria-label="Causes d'échec">
+                        <Tag v-for="[cls, count] in classCounts" :key="cls" :tone="classTone(cls)" icon="fa-solid fa-circle-exclamation">
                             {{ youtubeClass(cls) }} : {{ count }}
                         </Tag>
                     </div>
-                    <Info v-if="!recent.length" secondary>Aucune tentative de lecture enregistrée.</Info>
-                    <div v-else class="table-wrap">
-                        <table class="attempts">
+                    <p v-if="!recent.length" class="adm-hint">Aucune tentative de lecture enregistrée.</p>
+                    <div v-else class="adm-table-wrap yt-table" tabindex="0" role="region" aria-label="Dernières tentatives de lecture">
+                        <table class="adm-table">
+                            <caption class="sr-only">Dernières tentatives de lecture, de la plus récente à la plus ancienne</caption>
                             <thead>
                                 <tr>
-                                    <th>Heure</th>
-                                    <th>Serveur / titre</th>
-                                    <th>Route</th>
-                                    <th>Identité</th>
-                                    <th>Résultat</th>
-                                    <th>Cause</th>
-                                    <th>Durée</th>
+                                    <th scope="col">Heure</th>
+                                    <th scope="col">Serveur / titre</th>
+                                    <th scope="col">Route</th>
+                                    <th scope="col">Identité</th>
+                                    <th scope="col">Résultat</th>
+                                    <th scope="col">Cause</th>
+                                    <th scope="col" class="adm-num">Durée</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr v-for="(attempt, index) in recent" :key="attempt.at + index">
-                                    <td class="nowrap" :title="formatDate(attempt.at)">{{ shortDate(attempt.at) }}</td>
-                                    <td><div class="cell-main">
-                                        <span class="guild">{{ attempt.guildName || attempt.guildId || "—" }}</span>
-                                        <span v-if="attempt.title" class="muted title" :title="attempt.title">{{ attempt.title }}</span>
-                                        <span v-if="attempt.seek" class="muted">seek {{ attempt.seek }} s</span>
+                                <tr v-for="(attempt, index) in recent" :key="attempt.at + '-' + index">
+                                    <td class="yt-nowrap" :title="formatDate(attempt.at)">{{ shortDate(attempt.at) }}</td>
+                                    <td><div class="yt-cell">
+                                        <span class="yt-cell__strong">{{ attempt.guildName || attempt.guildId || "—" }}</span>
+                                        <span v-if="attempt.title" class="adm-muted yt-cell__clip" :title="attempt.title">{{ attempt.title }}</span>
+                                        <span v-if="attempt.seek" class="adm-muted">seek {{ attempt.seek }} s</span>
                                     </div></td>
                                     <td><Tag :color="attempt.route === 'warp' ? 'var(--owner-color)' : 'var(--admin-color)'" icon="fa-solid fa-route">{{ routeLabel(attempt.route) }}</Tag></td>
-                                    <td>
-                                        <Tag :color="attempt.identity === 'cookies' ? 'var(--main)' : 'var(--text-secondary)'" icon="fa-solid fa-user">{{ identityLabel(attempt.identity) }}</Tag>
-                                        <span v-if="attempt.clients" class="muted mono small">{{ attempt.clients }}</span>
-                                    </td>
-                                    <td><Tag :color="outcome(attempt.outcome).color" :icon="outcome(attempt.outcome).icon">{{ outcome(attempt.outcome).label }}</Tag></td>
-                                    <td><div class="cell-main">
-                                        <span v-if="attempt.cls">{{ youtubeClass(attempt.cls) }}</span>
-                                        <span v-if="attempt.message" class="muted message" :title="attempt.message">{{ attempt.message }}</span>
+                                    <td><div class="yt-cell">
+                                        <Tag :tone="attempt.identity === 'cookies' ? 'main' : 'default'" icon="fa-solid fa-user">{{ identityLabel(attempt.identity) }}</Tag>
+                                        <span v-if="attempt.clients" class="adm-muted adm-mono yt-small">{{ attempt.clients }}</span>
                                     </div></td>
-                                    <td class="nowrap mono">{{ attempt.ms === null || attempt.ms === undefined ? "—" : formatMs(attempt.ms) }}</td>
+                                    <td><Tag :tone="outcome(attempt.outcome).tone" :icon="outcome(attempt.outcome).icon">{{ outcome(attempt.outcome).label }}</Tag></td>
+                                    <td><div class="yt-cell">
+                                        <span v-if="attempt.cls">{{ youtubeClass(attempt.cls) }}</span>
+                                        <span v-if="attempt.message" class="adm-muted yt-cell__clip" :title="attempt.message">{{ attempt.message }}</span>
+                                    </div></td>
+                                    <td class="adm-num adm-mono">{{ attempt.ms === null || attempt.ms === undefined ? "—" : formatMs(attempt.ms) }}</td>
                                 </tr>
                             </tbody>
                         </table>
                     </div>
                 </AdminCard>
-            </div>
+            </AdminGrid>
         </AdminState>
 
         <AdminConfirm ref="confirmRef"/>
@@ -424,18 +488,22 @@
  * L'état complet vient de "/ADMIN/YOUTUBE/STATUS" puis des poussées "/ADMIN/YOUTUBE/UPDATE" (adminStore.youtube).
  * Les cookies ne transitent que du navigateur vers le serveur : aucune valeur n'est jamais réaffichée.
  */
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, useId, watch } from 'vue';
 import { useAdminStore } from '@/stores/adminStore';
 import { adminRequest } from '@/utils/AdminRequest';
 import Button from '@/components/UI/Button.vue';
+import Switch from '@/components/UI/Switch.vue';
 import Tag from '@/components/UI/Tag.vue';
-import Info from '@/components/UI/Info.vue';
-import Error from '@/components/UI/Error.vue';
-import Success from '@/components/UI/Success.vue';
 import AdminSection from './AdminSection.vue';
 import AdminState from './AdminState.vue';
-import AdminStat from './AdminStat.vue';
+import AdminGrid from './AdminGrid.vue';
 import AdminCard from './AdminCard.vue';
+import AdminStatRow from './AdminStatRow.vue';
+import AdminStat from './AdminStat.vue';
+import AdminBanner from './AdminBanner.vue';
+import AdminField from './AdminField.vue';
+import AdminSteps from './AdminSteps.vue';
+import AdminStep from './AdminStep.vue';
 import AdminKv from './AdminKv.vue';
 import AdminPills from './AdminPills.vue';
 import AdminConfirm from './AdminConfirm.vue';
@@ -507,6 +575,8 @@ const FIELDS = [
 
 const adminStore = useAdminStore();
 const confirmRef = ref(null);
+const assistantRef = ref(null);
+const dropHintId = `yt-drop-hint-${useId()}`;
 
 const data = computed(() => adminStore.youtube);
 const cookies = computed(() => data.value?.cookies || {});
@@ -516,6 +586,10 @@ const settings = computed(() => data.value?.settings || {});
 const recent = computed(() => Array.isArray(data.value?.recent) ? data.value.recent : []);
 const account = computed(() => youtubeAccount(cookies.value));
 const failing = computed(() => safeNum(summary.value.recentCount) >= 4 && safeNum(summary.value.recentFailureRate) >= 0.5);
+const attemptsDone = computed(() => safeNum(summary.value.ok) + safeNum(summary.value.failed));
+
+const ACCOUNT_TONES = { none: 'default', invalid: 'error', anonymous: 'warning', valid: 'success' };
+const accountTone = computed(() => ACCOUNT_TONES[account.value.key] || 'default');
 
 const nowDate = ref(Date.now());
 let clock = null;
@@ -541,16 +615,16 @@ function identityLabel(identity) {
 }
 
 function outcome(value) {
-    if (value === "ok") return { label: "Réussie", color: "var(--text-success)", icon: "fa-solid fa-check" };
-    if (value === "aborted") return { label: "Annulée", color: "var(--text-secondary)", icon: "fa-solid fa-ban" };
-    return { label: "Échec", color: "var(--text-error)", icon: "fa-solid fa-xmark" };
+    if (value === "ok") return { label: "Réussie", tone: "success", icon: "fa-solid fa-check" };
+    if (value === "aborted") return { label: "Annulée", tone: "default", icon: "fa-solid fa-ban" };
+    return { label: "Échec", tone: "error", icon: "fa-solid fa-xmark" };
 }
 
 // Blocages en rouge, contenu indisponible / restreint en orange
-function classColor(cls) {
-    if (["BOT_CHECK", "IP_BLOCKED", "CAPTCHA", "HTTP_403", "HTTP_429", "RATE_LIMITED", "POT_MISSING", "SABR", "COOKIES_ROTATED", "BINARY_MISSING"].includes(cls)) return "var(--text-error)";
-    if (["PRIVATE", "UNAVAILABLE", "GEO_BLOCKED", "AGE_RESTRICTED", "MEMBERS_ONLY", "LOGIN_REQUIRED"].includes(cls)) return "var(--text-warning)";
-    return "var(--text-secondary)";
+function classTone(cls) {
+    if (["BOT_CHECK", "IP_BLOCKED", "CAPTCHA", "HTTP_403", "HTTP_429", "RATE_LIMITED", "POT_MISSING", "SABR", "COOKIES_ROTATED", "BINARY_MISSING"].includes(cls)) return "error";
+    if (["PRIVATE", "UNAVAILABLE", "GEO_BLOCKED", "AGE_RESTRICTED", "MEMBERS_ONLY", "LOGIN_REQUIRED"].includes(cls)) return "warning";
+    return "default";
 }
 
 function shortDate(value) {
@@ -573,15 +647,23 @@ const expiryDays = computed(() => {
     return Number.isFinite(time) ? (time - nowDate.value) / 86400000 : null;
 });
 
-const expiryColor = computed(() => {
-    if (expiryDays.value === null) return "var(--text)";
-    if (expiryDays.value < 0) return "var(--text-error)";
-    if (expiryDays.value < 14) return "var(--text-warning)";
-    return "var(--text)";
+const expiryClass = computed(() => {
+    if (expiryDays.value === null) return null;
+    if (expiryDays.value < 0) return "yt-ko";
+    if (expiryDays.value < 14) return "yt-warn";
+    return null;
 });
 
-function scrollToAssistant() {
-    document.getElementById("yt-assistant")?.scrollIntoView({ behavior: "smooth", block: "start" });
+// Déplie l'assistant puis l'amène à l'écran (bandeau « Reconnecter », compte absent)
+async function openAssistant() {
+    assistantRef.value?.setOpen(true);
+    await nextTick();
+    const element = document.getElementById("yt-assistant");
+    if (!element) return;
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+    element.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
+    // Le focus suit (lecteurs d'écran, clavier) : sur le bouton du titre repliable
+    element.querySelector(".adm-card__toggle")?.focus({ preventScroll: true });
 }
 
 async function copyLoginLink() {
@@ -817,6 +899,18 @@ function isLocked(key) {
     return !!settings.value[key]?.locked;
 }
 
+// Variable d'environnement qui verrouille un réglage (étiquette « Verrouillé par … » d'AdminField)
+function lockEnv(key) {
+    if (!isLocked(key)) return null;
+    return settings.value[key]?.env || "variable d'environnement";
+}
+
+// Options des pilules désactivées quand le réglage est verrouillé
+function pillOptions(field) {
+    const locked = isLocked(field.key);
+    return locked ? field.options.map(option => ({ ...option, disabled: true })) : field.options;
+}
+
 function normalize(field, value) {
     return field.type === "text" ? String(value ?? "").trim() : value;
 }
@@ -925,503 +1019,292 @@ onUnmounted(() => {
 });
 </script>
 <style scoped>
-.banner {
-    background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 10px;
+/* Couleurs d'état ponctuelles (expiration, résultat de vérification) */
+.yt-ok {
+    color: var(--text-success);
 }
 
-.banner-action {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    flex-wrap: wrap;
+.yt-warn {
+    color: var(--text-warning);
 }
 
-.stats {
+.yt-ko {
+    color: var(--text-error);
+}
+
+/* Compte : deux colonnes de libellés / valeurs quand la carte est large */
+.yt-kv-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 6px 24px;
 }
 
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 10px;
-    align-items: start;
-}
-
-.wide {
-    grid-column: 1 / -1;
-}
-
-.hint {
-    margin: 0;
-    font-size: 0.8em;
+.yt-path {
+    display: block;
+    padding: 6px 8px;
     color: var(--text-secondary);
 }
 
-.note {
-    margin: 0;
-    font-size: 0.8em;
+.yt-details > summary {
+    width: fit-content;
+    border-radius: var(--radius-sm);
     color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    gap: 5px;
+    font-size: 0.85em;
+    cursor: pointer;
+    outline: 2px solid transparent;
 }
 
-.muted {
-    color: var(--text-secondary);
-}
-
-.mono {
-    font-family: monospace;
-}
-
-.small {
-    font-size: 0.8em;
-}
-
-.nowrap {
-    white-space: nowrap;
-}
-
-.actions {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-top: 5px;
-}
-
-.danger {
-    background-color: var(--text-error);
-}
-
-.secondary {
-    background-color: var(--secondary);
+.yt-details > summary:hover {
     color: var(--text);
 }
 
-.secondary:hover {
-    background-color: var(--quaternary);
+.yt-details > summary:focus-visible {
+    box-shadow: var(--focus-ring);
 }
 
-.chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
+.yt-details[open] > summary {
+    margin-bottom: 8px;
 }
 
-.chip {
-    font-family: monospace;
-    font-size: 0.7em;
-    background-color: var(--secondary);
-    border-radius: 5px;
-    padding: 2px 6px;
-}
-
-.path {
+.yt-output {
+    max-height: 220px;
     margin: 0;
-    font-family: monospace;
-    font-size: 0.75em;
-    color: var(--text-secondary);
-    background-color: var(--secondary);
-    border-radius: 5px;
-    padding: 5px;
-    word-break: break-all;
-}
-
-.details summary {
-    cursor: pointer;
-    font-size: 0.85em;
-    color: var(--text-secondary);
-}
-
-.output {
-    margin: 5px 0 0;
-    max-height: 200px;
+    padding: 8px 10px;
     overflow: auto;
-    font-size: 0.75em;
+    border-radius: var(--radius-sm);
     background-color: var(--secondary);
-    border-radius: 5px;
-    padding: 7px;
+    font-family: var(--font-mono);
+    font-size: 0.75em;
     white-space: pre-wrap;
     word-break: break-word;
 }
 
-/* Assistant */
-.steps {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+.yt-end {
+    justify-content: flex-end;
 }
 
-.step {
-    display: flex;
-    gap: 10px;
-    background-color: var(--secondary);
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.step-num {
-    flex-shrink: 0;
-    width: 28px;
-    height: 28px;
-    border-radius: 100%;
-    background-color: var(--main);
-    color: #FFFFFF;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.step-body {
-    display: flex;
-    flex-direction: column;
-    gap: 7px;
-    min-width: 0;
-    flex: 1;
-}
-
-.step-title {
-    margin: 0;
-    font-weight: 600;
-}
-
-.why {
-    display: block;
+/* Les champs du réglage avancé (fond --secondary) remontent d'un niveau ; les étapes sont gérées par AdminStep */
+.yt-advanced :deep(input[type="text"]),
+.yt-advanced :deep(select) {
     background-color: var(--tertiary);
-    border-radius: 5px;
-    padding: 7px;
 }
 
-.link-row {
+.yt-link-row {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
 }
 
-.link-row .actions {
-    margin-top: 0;
-}
-
-.link-text {
-    flex: 1;
+.yt-link-row__url {
+    flex: 1 1 260px;
     min-width: 0;
-    font-size: 0.75em;
-    background-color: var(--tertiary);
-    border-radius: 5px;
-    padding: 7px;
-    word-break: break-all;
+    padding: 7px 9px;
     user-select: all;
 }
 
-.link-btn {
+/* Lien présenté comme un bouton secondaire */
+.yt-linkbtn {
     display: inline-flex;
     align-items: center;
-    gap: 5px;
+    gap: 6px;
+    min-height: 30px;
+    box-sizing: border-box;
+    padding: 0 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
     background-color: var(--tertiary);
     color: var(--text);
-    border-radius: 5px;
-    padding: 7px 10px;
-    font-size: 0.85em;
+    font-size: 0.8125rem;
+    font-weight: 500;
     text-decoration: none;
-    transition: all 0.2s ease;
+    outline: 2px solid transparent;
+    transition: background-color var(--dur-fast) ease;
 }
 
-.link-btn:hover {
+.yt-linkbtn:hover {
     background-color: var(--quaternary);
+    color: var(--text);
+    text-decoration: none;
 }
 
-.dropzone {
+.yt-linkbtn:focus-visible {
+    box-shadow: var(--focus-ring);
+}
+
+/* Zone de dépôt : vrai bouton (clavier : Entrée / Espace) */
+.yt-drop {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 5px;
-    padding: 20px 10px;
+    gap: 6px;
+    width: 100%;
+    padding: 22px 12px;
     border: 2px dashed var(--quaternary);
-    border-radius: 10px;
+    border-radius: var(--radius);
+    background-color: transparent;
+    color: var(--text);
+    font: inherit;
     text-align: center;
     cursor: pointer;
-    transition: all 0.2s ease;
+    outline: 2px solid transparent;
+    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
 }
 
-.dropzone:hover,
-.dropzone:focus-visible {
+.yt-drop:hover,
+.yt-drop:focus-visible,
+.yt-drop--over {
     border-color: var(--main);
-    outline: none;
+    background-color: var(--main-soft);
 }
 
-.dropzone.over {
-    border-color: var(--main);
-    background-color: color-mix(in srgb, var(--main) 12%, transparent);
+.yt-drop:focus-visible {
+    box-shadow: var(--focus-ring);
 }
 
-.dropzone.busy {
+.yt-drop--busy,
+.yt-drop:disabled {
     cursor: progress;
-    opacity: 0.7;
+    opacity: 0.75;
 }
 
-.drop-icon {
-    font-size: 1.6em;
+.yt-drop__icon {
     color: var(--main);
+    font-size: 1.6em;
 }
 
-.drop-title {
-    margin: 0;
-    font-weight: 600;
+.yt-drop__title {
     font-size: 0.9em;
+    font-weight: 600;
 }
 
-.hidden-input {
+.yt-hidden-input {
     display: none;
 }
 
-.paste {
-    font-family: monospace;
+.yt-paste {
+    min-height: 80px;
     font-size: 0.8em;
-    min-height: 70px;
-    background-color: var(--tertiary);
 }
 
-.footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.import-result {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    background-color: var(--tertiary);
-    border-radius: 5px;
-    padding: 7px;
-    font-size: 0.9em;
-}
-
-.warnings {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    font-size: 0.85em;
-    color: var(--text-warning);
+.yt-warnings {
     display: flex;
     flex-direction: column;
     gap: 3px;
-}
-
-.risk {
-    background-color: var(--secondary);
-    border-radius: 10px;
-    padding: 10px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--text-warning);
     font-size: 0.85em;
 }
 
-.advanced {
+.yt-check {
     display: flex;
-    flex-direction: column;
-    gap: 10px;
+    align-items: center;
+    gap: 6px;
+}
+
+.yt-advanced {
+    padding: 12px 14px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
     background-color: var(--secondary);
-    border-radius: 10px;
-    padding: 10px;
 }
 
-.advanced[open] > summary {
-    margin-bottom: 10px;
+.yt-advanced > .adm-hint {
+    margin: 0 0 10px;
 }
 
-.advanced .hint {
-    margin-bottom: 10px;
+.yt-advanced > .adm-actions {
+    margin-top: 10px;
 }
 
-/* Formulaires */
-.form-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 10px;
-}
-
-.field-inline {
+/* Réglages */
+.yt-settings {
     display: flex;
     flex-direction: column;
+    gap: 16px;
+}
+
+.yt-settings :deep(.ui-switch) {
+    flex: 1 1 auto;
+}
+
+.yt-reset {
+    display: inline-flex;
+    align-items: center;
     gap: 5px;
-    font-size: 0.85em;
-    color: var(--text-secondary);
-    min-width: 0;
-}
-
-.field-inline input,
-.field-inline select {
-    color: var(--text);
-    min-width: 0;
-}
-
-.select {
-    background-color: var(--secondary);
-    color: var(--text);
+    padding: 2px 7px;
     border: none;
-    border-radius: 5px;
-    padding: 7px;
-    font-family: 'Inter', sans-serif;
-    outline: none;
-}
-
-.advanced .select,
-.advanced input[type="text"] {
-    background-color: var(--tertiary);
-}
-
-.setting {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--quaternary);
-}
-
-.setting-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-.setting-label {
-    font-weight: 600;
-    font-size: 0.9em;
-}
-
-.setting input[type="text"] {
-    width: 100%;
-    box-sizing: border-box;
-    background-color: var(--secondary);
-}
-
-.field-inline input[type="text"] {
-    background-color: var(--secondary);
-}
-
-.setting input[type="text"]:disabled {
-    color: var(--text-secondary);
-    cursor: not-allowed;
-}
-
-.locked {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-.check {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 0.9em;
-    cursor: pointer;
-}
-
-.reset {
+    border-radius: var(--radius-sm);
     background: none;
-    border: none;
     color: var(--text-secondary);
-    font-size: 0.75em;
+    font: inherit;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 2px 5px;
-    border-radius: 5px;
+    outline: 2px solid transparent;
 }
 
-.reset:hover {
+.yt-reset:hover {
     background-color: var(--quaternary);
     color: var(--text);
 }
 
-.test-result {
-    display: flex;
-    flex-direction: column;
-    gap: 7px;
-    background-color: var(--secondary);
-    border-radius: 5px;
-    padding: 7px;
+.yt-reset:focus-visible {
+    box-shadow: var(--focus-ring);
 }
 
 /* Tableau des tentatives */
-.table-wrap {
-    overflow-x: auto;
+.yt-table {
+    max-height: 480px;
+    overflow-y: auto;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    outline: 2px solid transparent;
 }
 
-.attempts {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.8em;
+.yt-table:focus-visible {
+    box-shadow: var(--focus-ring);
 }
 
-.attempts th {
-    text-align: left;
-    color: var(--text-secondary);
-    font-weight: 600;
-    padding: 5px;
-    border-bottom: 1px solid var(--quaternary);
-    white-space: nowrap;
-}
-
-.attempts td {
-    padding: 5px;
-    border-bottom: 1px solid var(--secondary);
+.yt-table td {
     vertical-align: top;
 }
 
-.cell-main {
+.yt-nowrap {
+    white-space: nowrap;
+}
+
+.yt-small {
+    font-size: 0.85em;
+}
+
+.yt-cell {
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    min-width: 160px;
+    align-items: flex-start;
+    gap: 3px;
+    min-width: 140px;
     max-width: 320px;
 }
 
-.guild {
+.yt-cell__strong {
     font-weight: 600;
 }
 
-.title,
-.message {
+.yt-cell__clip {
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 @media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .cards {
-        grid-template-columns: 1fr;
-    }
-
-    .step {
-        flex-direction: column;
-    }
-
-    .link-row {
+    .yt-link-row {
         flex-direction: column;
         align-items: stretch;
     }
 
-    .actions > * {
-        flex: 1;
-    }
-
-    .cell-main {
-        min-width: 140px;
+    .yt-cell {
         max-width: 220px;
     }
 }
diff --git a/src/components/Admin/admin.scss b/src/components/Admin/admin.scss
new file mode 100644
index 0000000..85c247c
--- /dev/null
+++ b/src/components/Admin/admin.scss
@@ -0,0 +1,1745 @@
+/*
+ * Styles partagés de l'administration (un seul endroit pour toutes les primitives Admin*).
+ * Non scopés mais tous préfixés `adm-` : les modales (téléportées dans <body>) en profitent aussi.
+ * Importé par chaque primitive (Vite ne l'injecte qu'une fois, dans le chunk de /admin).
+ */
+
+/* ------------------------------------------------------------------ */
+/* Jetons                                                              */
+/* ------------------------------------------------------------------ */
+:root {
+    --adm-gap: 14px;
+    --adm-pad: 14px;
+    --adm-radius: var(--radius, 10px);
+    --adm-surface: var(--tertiary);
+    --adm-inset: var(--secondary);
+    --adm-border: var(--border);
+    --adm-hover: color-mix(in srgb, var(--text) 5%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Section                                                             */
+/* ------------------------------------------------------------------ */
+.adm-section {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+}
+
+.adm-section__header {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    flex-wrap: wrap;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--adm-border);
+}
+
+.adm-section__chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1.15em;
+}
+
+.adm-section__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    flex: 1 1 260px;
+    min-width: 0;
+}
+
+.adm-section__title {
+    margin: 0;
+    font-size: 1.45em;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+    overflow-wrap: anywhere;
+}
+
+.adm-section__subtitle {
+    margin: 0;
+    font-size: 0.875em;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.adm-section__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-left: auto;
+}
+
+.adm-section__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--adm-gap);
+    min-width: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Grille 12 colonnes (requêtes de conteneur : suit la largeur réelle   */
+/* de la zone principale, pas celle de la fenêtre)                     */
+/* ------------------------------------------------------------------ */
+.adm-grid {
+    container: adm-grid / inline-size;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: var(--adm-gap);
+    grid-auto-flow: row dense;
+    align-items: stretch;
+    min-width: 0;
+}
+
+.adm-grid--sm {
+    gap: 10px;
+}
+
+.adm-grid--start {
+    align-items: start;
+}
+
+/* Par défaut un enfant sans classe de largeur occupe toute la ligne */
+.adm-grid > * {
+    grid-column: 1 / -1;
+    min-width: 0;
+}
+
+@for $i from 1 through 12 {
+    .adm-grid > .adm-span-#{$i} {
+        grid-column: span $i;
+    }
+}
+
+/* Moyen : conteneur ≤ 1080 px */
+@container adm-grid (max-width: 1080px) {
+    @for $i from 1 through 12 {
+        .adm-grid > .adm-span-md-#{$i} {
+            grid-column: span $i;
+        }
+    }
+}
+
+/* Petit : conteneur ≤ 820 px */
+@container adm-grid (max-width: 820px) {
+    @for $i from 1 through 12 {
+        .adm-grid > .adm-span-sm-#{$i} {
+            grid-column: span $i;
+        }
+    }
+}
+
+/* Très petit : une seule colonne */
+@container adm-grid (max-width: 560px) {
+    .adm-grid > *,
+    .adm-grid > [class*="adm-span-"] {
+        grid-column: 1 / -1;
+    }
+}
+
+/* Navigateurs sans requêtes de conteneur : repli sur la largeur de la fenêtre */
+@supports not (container-type: inline-size) {
+    @media screen and (max-width: 768px), screen and (max-height: 607px) {
+        .adm-grid > *,
+        .adm-grid > [class*="adm-span-"] {
+            grid-column: 1 / -1;
+        }
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Carte                                                               */
+/* ------------------------------------------------------------------ */
+.adm-card {
+    --adm-tone: var(--text-secondary);
+    --adm-tone-bg: color-mix(in srgb, var(--text) 10%, transparent);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    box-sizing: border-box;
+    background-color: var(--adm-surface);
+    border: 1px solid var(--adm-border);
+    border-radius: var(--adm-radius);
+    color: var(--text);
+}
+
+/* Les tons d'alerte ajoutent un liseré à gauche (repérables d'un coup d'œil) */
+.adm-card--accent {
+    box-shadow: inset 3px 0 0 var(--adm-tone);
+}
+
+.adm-card__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    min-height: 32px;
+    padding: 12px var(--adm-pad);
+    border-bottom: 1px solid var(--adm-border);
+}
+
+.adm-card--collapsed .adm-card__header {
+    border-bottom-color: transparent;
+}
+
+.adm-card__lead {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.adm-card__chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background-color: var(--adm-tone-bg);
+    color: var(--adm-tone);
+    font-size: 0.95em;
+}
+
+.adm-card__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.adm-card__title {
+    margin: 0;
+    font-size: 1em;
+    font-weight: 600;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+}
+
+.adm-card__subtitle {
+    margin: 0;
+    font-size: 0.8em;
+    line-height: 1.35;
+    color: var(--text-secondary);
+}
+
+/* Carte repliable : le bouton couvre toute la zone titre (pastille comprise) */
+.adm-card__toggle {
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+}
+
+.adm-card__toggle::after {
+    content: "";
+    position: absolute;
+    inset: -6px;
+    border-radius: 8px;
+}
+
+.adm-card__toggle:focus-visible::after {
+    box-shadow: var(--focus-ring);
+}
+
+.adm-card__lead:hover .adm-card__chevron {
+    color: var(--text);
+}
+
+.adm-card__chevron {
+    flex-shrink: 0;
+    margin-left: 2px;
+    color: var(--text-secondary);
+    font-size: 0.8em;
+    transition: transform var(--dur) var(--ease), color var(--dur-fast) ease;
+}
+
+.adm-card--collapsed .adm-card__chevron {
+    transform: rotate(-90deg);
+}
+
+.adm-card__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+    flex-shrink: 0;
+    margin-left: auto;
+    position: relative;
+    z-index: 1;
+}
+
+.adm-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--adm-pad);
+}
+
+.adm-card__body > p {
+    margin: 0;
+}
+
+.adm-card--flush > .adm-card__body {
+    padding: 0;
+    gap: 0;
+}
+
+/* Pied épinglé en bas : les cartes d'une même ligne ont la même hauteur */
+.adm-card__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: auto;
+    padding: 10px var(--adm-pad);
+    border-top: 1px solid var(--adm-border);
+    border-radius: 0 0 var(--adm-radius) var(--adm-radius);
+    background-color: color-mix(in srgb, var(--secondary) 35%, transparent);
+}
+
+/* Élément de pied aligné à gauche (compteur, date…) : les boutons restent à droite */
+.adm-footer-meta {
+    margin-right: auto;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+/* Échelle des surfaces : ce qui est posé dans une carte descend d'un niveau */
+.adm-card .adm-card,
+.adm-card .adm-stat,
+.adm-card .adm-row {
+    background-color: var(--adm-inset);
+}
+
+/* Bouton « secondary » (fond --tertiary, comme la carte) : un niveau en dessous pour ressortir,
+   et de nouveau --tertiary sur ce qui est lui-même en retrait (lignes en pavés, sous-cartes, tuiles) */
+.adm-card .ui-btn--secondary {
+    --btn-bg: var(--adm-inset);
+    --btn-bg-hover: var(--quaternary);
+}
+
+.adm-card :is(.adm-card, .adm-stat, .adm-row) .ui-btn--secondary {
+    --btn-bg: var(--adm-surface);
+}
+
+.adm-card .adm-list--divided > .adm-row .ui-btn--secondary {
+    --btn-bg: var(--adm-inset);
+}
+
+/* Champs posés sur une carte (--tertiary) : fond --secondary pour rester visibles */
+.adm-card :is(input:is([type="text"], [type="search"], [type="url"], [type="password"], [type="number"], [type="email"]), select, textarea),
+.adm-field :is(input:is([type="text"], [type="search"], [type="url"], [type="password"], [type="number"], [type="email"]), select, textarea) {
+    background-color: var(--adm-inset);
+}
+
+.adm-card textarea,
+.adm-field textarea {
+    max-height: 50vh;
+}
+
+/* ------------------------------------------------------------------ */
+/* Chiffres clés                                                       */
+/* ------------------------------------------------------------------ */
+.adm-statrow {
+    container: adm-statrow / inline-size;
+    min-width: 0;
+}
+
+.adm-statrow__grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.adm-statrow__grid > li {
+    display: flex;
+    min-width: 0;
+}
+
+.adm-statrow__grid > li > .adm-stat {
+    flex: 1;
+}
+
+.adm-statrow--cols-2 .adm-statrow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.adm-statrow--cols-3 .adm-statrow__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.adm-statrow--cols-5 .adm-statrow__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.adm-statrow--cols-6 .adm-statrow__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+
+/* 4, 5 ou 6 colonnes → 3 puis 2 ; 3 colonnes → 2 */
+@container adm-statrow (max-width: 1000px) {
+    .adm-statrow--cols-5 .adm-statrow__grid,
+    .adm-statrow--cols-6 .adm-statrow__grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@container adm-statrow (max-width: 860px) {
+    .adm-statrow--cols-4 .adm-statrow__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@container adm-statrow (max-width: 620px) {
+    .adm-statrow .adm-statrow__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@container adm-statrow (max-width: 440px) {
+    .adm-statrow .adm-statrow__grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+.adm-stat {
+    --adm-tone: var(--text-secondary);
+    --adm-tone-bg: color-mix(in srgb, var(--text) 10%, transparent);
+
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 12px 14px;
+    background-color: var(--adm-surface);
+    border: 1px solid var(--adm-border);
+    border-radius: var(--adm-radius);
+    color: var(--text);
+    font: inherit;
+    text-align: left;
+}
+
+button.adm-stat {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    outline: 2px solid transparent;
+    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
+}
+
+button.adm-stat:hover {
+    border-color: color-mix(in srgb, var(--adm-tone) 55%, var(--adm-border));
+    background-color: color-mix(in srgb, var(--adm-tone) 6%, var(--adm-surface));
+}
+
+button.adm-stat:active {
+    transform: scale(0.99);
+}
+
+button.adm-stat:focus-visible {
+    box-shadow: var(--focus-ring);
+}
+
+.adm-stat__chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background-color: var(--adm-tone-bg);
+    color: var(--adm-tone);
+    font-size: 1.05em;
+}
+
+.adm-stat__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.adm-stat__label {
+    margin: 0;
+    font-size: 0.8em;
+    line-height: 1.3;
+    color: var(--text-secondary);
+}
+
+.adm-stat__value {
+    margin: 0;
+    font-size: 1.35em;
+    font-weight: 700;
+    line-height: 1.2;
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+}
+
+.adm-stat__value--mono {
+    font-family: var(--font-mono);
+    font-size: 1.2em;
+}
+
+.adm-stat__sub {
+    margin: 0;
+    font-size: 0.75em;
+    line-height: 1.35;
+    color: var(--text-secondary);
+}
+
+.adm-stat .adm-meter {
+    margin-top: 6px;
+}
+
+.adm-stat__go {
+    flex-shrink: 0;
+    color: var(--text-tertiary);
+    font-size: 0.8em;
+    transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
+}
+
+button.adm-stat:hover .adm-stat__go {
+    color: var(--text);
+    transform: translateX(2px);
+}
+
+/* ------------------------------------------------------------------ */
+/* Jauge                                                               */
+/* ------------------------------------------------------------------ */
+.adm-meter {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.adm-meter__top {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+.adm-meter__value {
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+}
+
+.adm-meter__track {
+    height: 6px;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 12%, transparent);
+    overflow: hidden;
+}
+
+.adm-meter__fill {
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--adm-tone, var(--main));
+    transition: width var(--dur) var(--ease);
+}
+
+/* ------------------------------------------------------------------ */
+/* Barre d'outils (recherche, filtres, boutons sous l'en-tête)          */
+/* ------------------------------------------------------------------ */
+.adm-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    min-width: 0;
+}
+
+.adm-toolbar__start {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.adm-toolbar__end {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-left: auto;
+}
+
+.adm-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1 1 240px;
+    max-width: 420px;
+    min-width: 0;
+}
+
+.adm-search__icon {
+    position: absolute;
+    left: 11px;
+    color: var(--text-secondary);
+    font-size: 0.85em;
+    pointer-events: none;
+}
+
+.adm-search input.adm-search__input {
+    width: 100%;
+    min-height: 36px;
+    box-sizing: border-box;
+    padding-left: 32px;
+    padding-right: 34px;
+}
+
+/* Masque la croix native : on a la nôtre, avec un nom accessible */
+.adm-search__input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.adm-search .adm-search__clear {
+    position: absolute;
+    right: 10px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Bandeau                                                             */
+/* ------------------------------------------------------------------ */
+.adm-banner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    min-width: 0;
+    box-sizing: border-box;
+    padding: 12px 14px;
+    border: 1px solid color-mix(in srgb, var(--adm-tone) 45%, transparent);
+    border-radius: var(--adm-radius);
+    background-color: color-mix(in srgb, var(--adm-tone) 10%, var(--secondary));
+    color: var(--text);
+}
+
+.adm-banner__icon {
+    flex-shrink: 0;
+    align-self: flex-start;
+    margin-top: 2px;
+    color: var(--adm-tone);
+    font-size: 1.1em;
+}
+
+.adm-banner__content {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    flex: 1 1 260px;
+    min-width: 0;
+    font-size: 0.9em;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+}
+
+.adm-banner__title {
+    margin: 0;
+    font-weight: 600;
+}
+
+.adm-banner__content > p,
+.adm-banner__text > p {
+    margin: 0;
+}
+
+.adm-banner__action {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-left: auto;
+}
+
+/* ------------------------------------------------------------------ */
+/* Listes et lignes                                                    */
+/* ------------------------------------------------------------------ */
+.adm-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.adm-row {
+    --adm-tone: transparent;
+
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    min-width: 0;
+    min-height: 52px;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    border-radius: var(--adm-radius);
+    background-color: var(--adm-surface);
+    color: var(--text);
+    transition: background-color var(--dur-fast) ease;
+}
+
+.adm-row--dense {
+    min-height: 40px;
+    padding: 5px 10px;
+}
+
+.adm-row--inset {
+    background-color: var(--adm-inset);
+}
+
+.adm-row--toned {
+    box-shadow: inset 3px 0 0 var(--adm-tone);
+}
+
+.adm-row.adm-row--selected {
+    background-color: color-mix(in srgb, var(--main) 12%, var(--adm-surface));
+    box-shadow: inset 3px 0 0 var(--main);
+}
+
+.adm-row__media {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.adm-row__main {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    flex: 1 1 220px;
+    min-width: 0;
+}
+
+.adm-row__title {
+    margin: 0;
+    font-weight: 600;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.adm-row__subtitle {
+    margin: 0;
+    font-size: 0.8em;
+    line-height: 1.35;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.adm-row__meta {
+    display: flex;
+    align-items: center;
+    gap: 6px 12px;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    margin-left: auto;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
+
+.adm-row__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+.adm-row__meta + .adm-row__actions {
+    margin-left: 0;
+}
+
+/* Liste séparée par des filets (dans une carte `flush`) */
+.adm-list.adm-list--divided {
+    gap: 0;
+}
+
+.adm-list.adm-list--divided > .adm-row {
+    border-radius: 0;
+    background-color: transparent;
+    border-bottom: 1px solid var(--adm-border);
+    padding: 10px var(--adm-pad);
+}
+
+.adm-list.adm-list--divided > .adm-row:last-child {
+    border-bottom: none;
+}
+
+.adm-list.adm-list--divided > .adm-row:hover {
+    background-color: var(--adm-hover);
+}
+
+.adm-list.adm-list--divided > .adm-row.adm-row.adm-row--selected {
+    background-color: color-mix(in srgb, var(--main) 12%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Champ de réglage                                                    */
+/* ------------------------------------------------------------------ */
+.adm-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+}
+
+.adm-field__top {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px 8px;
+    min-width: 0;
+}
+
+.adm-field__label {
+    font-size: 0.9em;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--text);
+}
+
+.adm-field__required {
+    color: var(--main);
+}
+
+.adm-field__badges {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.adm-field__aside {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+.adm-field__control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+
+.adm-field__control > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+}
+
+.adm-field__hint {
+    margin: 0;
+    font-size: 0.8em;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
+
+.adm-field__error {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.85em;
+    line-height: 1.4;
+    color: var(--text-error);
+}
+
+.adm-field--error .adm-field__control > :is(input, select, textarea) {
+    box-shadow: 0 0 0 1px var(--text-error);
+}
+
+.adm-field--error .adm-field__control > :is(input, select, textarea):focus {
+    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px var(--text-error);
+}
+
+.adm-field--locked .adm-field__control {
+    opacity: 0.75;
+}
+
+/* Variante en ligne : libellé + aide à gauche, contrôle à droite (interrupteurs, petits choix) */
+.adm-field--inline {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 4px 14px;
+}
+
+.adm-field--inline .adm-field__top,
+.adm-field--inline .adm-field__hint,
+.adm-field--inline .adm-field__error {
+    grid-column: 1;
+}
+
+.adm-field--inline .adm-field__control {
+    grid-column: 2;
+    grid-row: 1 / span 3;
+    justify-content: flex-end;
+}
+
+/* Petites étiquettes (verrou, redémarrage, défaut…) */
+.adm-badge {
+    --adm-tone: var(--text-secondary);
+
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 2px 7px;
+    border: 1px solid color-mix(in srgb, var(--adm-tone) 45%, transparent);
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--adm-tone) 13%, transparent);
+    color: var(--text);
+    font-size: 0.72em;
+    font-weight: 500;
+    line-height: 1.35;
+    white-space: nowrap;
+}
+
+.adm-badge > svg {
+    color: var(--adm-tone);
+}
+
+/* ------------------------------------------------------------------ */
+/* Filtres en pilule                                                   */
+/* ------------------------------------------------------------------ */
+.adm-pills {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.adm-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 30px;
+    box-sizing: border-box;
+    padding: 0 12px;
+    border: 1px solid var(--adm-border);
+    border-radius: var(--radius-pill);
+    background-color: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
+}
+
+.adm-pill:hover:not(:disabled) {
+    color: var(--text);
+    background-color: var(--adm-hover);
+    border-color: color-mix(in srgb, var(--quaternary) 80%, transparent);
+}
+
+.adm-pill:focus-visible {
+    box-shadow: var(--focus-ring);
+}
+
+.adm-pill:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.adm-pill--selected,
+.adm-pill--selected:hover:not(:disabled) {
+    background-color: var(--adm-pill-color, var(--main));
+    border-color: var(--adm-pill-color, var(--main));
+    color: #fff;
+}
+
+.adm-pill__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    box-sizing: border-box;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 12%, transparent);
+    font-size: 0.72rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.adm-pill--selected .adm-pill__count {
+    background-color: rgba(255, 255, 255, 0.25);
+}
+
+/* ------------------------------------------------------------------ */
+/* Lignes « libellé : valeur »                                         */
+/* ------------------------------------------------------------------ */
+.adm-kv {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 12px;
+    min-width: 0;
+    font-size: 0.9em;
+    line-height: 1.45;
+}
+
+.adm-kv__label {
+    flex-shrink: 0;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.adm-kv__value {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 5px;
+    min-width: 0;
+    text-align: right;
+    overflow-wrap: anywhere;
+    font-variant-numeric: tabular-nums;
+}
+
+.adm-kv__value--mono {
+    font-family: var(--font-mono);
+    font-size: 0.95em;
+}
+
+/* ------------------------------------------------------------------ */
+/* États (chargement, erreur, vide)                                    */
+/* ------------------------------------------------------------------ */
+.adm-state-loading {
+    display: flex;
+    align-items: center;
+    padding: 12px 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Notifications                                                       */
+/* ------------------------------------------------------------------ */
+.adm-toasts {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    z-index: 4500;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 10px;
+    width: min(420px, calc(100vw - 40px));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    pointer-events: none;
+}
+
+.adm-toast {
+    --adm-tone: var(--admin-color);
+
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 12px 12px 12px 14px;
+    border: 1px solid color-mix(in srgb, var(--adm-tone) 40%, var(--adm-border));
+    border-radius: var(--adm-radius);
+    background-color: color-mix(in srgb, var(--adm-tone) 8%, var(--secondary));
+    color: var(--text);
+    box-shadow: var(--shadow-lg), inset 3px 0 0 var(--adm-tone);
+    pointer-events: auto;
+}
+
+.adm-toast--error { --adm-tone: var(--text-error); }
+.adm-toast--success { --adm-tone: var(--text-success); }
+.adm-toast--warning { --adm-tone: var(--text-warning); }
+
+.adm-toast__icon {
+    flex-shrink: 0;
+    margin-top: 2px;
+    color: var(--adm-tone);
+}
+
+.adm-toast__text {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-size: 0.9em;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+}
+
+.adm-toast .adm-toast__close {
+    margin-top: 1px;
+    color: var(--text-secondary);
+}
+
+.adm-toast-enter-active,
+.adm-toast-leave-active {
+    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+
+.adm-toast-enter-from,
+.adm-toast-leave-to {
+    opacity: 0;
+    transform: translateX(24px);
+}
+
+.adm-toast-move {
+    transition: transform var(--dur) var(--ease);
+}
+
+@media screen and (max-width: 768px), screen and (max-height: 607px) {
+    .adm-toasts {
+        left: 12px;
+        right: 12px;
+        bottom: 12px;
+        width: auto;
+    }
+
+    .adm-toast-enter-from,
+    .adm-toast-leave-to {
+        transform: translateY(16px);
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Utilitaires                                                         */
+/* ------------------------------------------------------------------ */
+.adm-hint {
+    margin: 0;
+    font-size: 0.8em;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
+
+.adm-muted {
+    color: var(--text-secondary);
+}
+
+.adm-mono {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    font-variant-numeric: tabular-nums;
+}
+
+.adm-text {
+    margin: 0;
+    font-size: 0.9em;
+    line-height: 1.5;
+}
+
+.adm-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+}
+
+.adm-inline {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+}
+
+.adm-tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 5px;
+    min-width: 0;
+}
+
+.adm-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.adm-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.adm-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+    background-color: var(--adm-inset);
+    border: 1px solid var(--adm-border);
+    font-family: var(--font-mono);
+    font-size: 0.75em;
+    line-height: 1.5;
+}
+
+/* Code / chemin en ligne, coupé proprement s'il est long */
+.adm-code {
+    padding: 1px 6px;
+    border-radius: var(--radius-sm);
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+    font-family: var(--font-mono);
+    font-size: 0.85em;
+    overflow-wrap: anywhere;
+}
+
+.adm-dot {
+    --adm-tone: var(--text-secondary);
+
+    display: inline-block;
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--adm-tone);
+}
+
+.adm-divider {
+    height: 1px;
+    margin: 4px 0;
+    border: none;
+    background-color: var(--adm-border);
+}
+
+/* Tableau : défilement horizontal dans son propre conteneur (jamais la page) */
+.adm-table-wrap {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.adm-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85em;
+}
+
+.adm-table th,
+.adm-table td {
+    padding: 8px 12px;
+    text-align: left;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--adm-border);
+}
+
+.adm-table th {
+    position: sticky;
+    top: 0;
+    font-size: 0.85em;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    background-color: var(--adm-surface);
+    white-space: nowrap;
+}
+
+.adm-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.adm-table tbody tr:hover td {
+    background-color: var(--adm-hover);
+}
+
+.adm-table .adm-num {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* Groupes thématiques (AdminGrid titré)                               */
+/* ------------------------------------------------------------------ */
+.adm-group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+}
+
+/* Un peu plus d'air entre deux catégories qu'entre deux cartes */
+.adm-section__body > .adm-group:not(:first-child) {
+    margin-top: 10px;
+}
+
+.adm-group__header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+    min-width: 0;
+}
+
+.adm-group__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+}
+
+.adm-group__icon {
+    color: var(--main);
+}
+
+.adm-group__subtitle {
+    margin: 0;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+/* Filet qui prolonge l'intitulé jusqu'aux actions */
+.adm-group__header::after {
+    content: "";
+    order: 2;
+    flex: 1 1 40px;
+    height: 1px;
+    background-color: var(--adm-border);
+}
+
+.adm-group__subtitle {
+    order: 1;
+}
+
+.adm-group__actions {
+    order: 3;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* Étapes numérotées (AdminSteps / AdminStep)                          */
+/* ------------------------------------------------------------------ */
+.adm-steps {
+    counter-reset: adm-step;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.adm-step {
+    counter-increment: adm-step;
+    position: relative;
+    display: flex;
+    gap: 14px;
+    min-width: 0;
+    padding: 14px;
+    border: 1px solid var(--adm-border);
+    border-radius: var(--adm-radius);
+    background-color: var(--adm-inset);
+}
+
+.adm-step--current {
+    border-color: color-mix(in srgb, var(--main) 60%, var(--adm-border));
+}
+
+.adm-step__num {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: var(--main);
+    color: var(--main-contrast);
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.adm-step__num:empty::before {
+    content: counter(adm-step);
+}
+
+.adm-step--done .adm-step__num {
+    background-color: color-mix(in srgb, var(--text-success) 20%, transparent);
+    color: var(--text-success);
+}
+
+.adm-step__body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+}
+
+.adm-step__title {
+    margin: 4px 0 0;
+    font-size: 0.95em;
+    font-weight: 600;
+    line-height: 1.35;
+}
+
+.adm-step__body > p {
+    margin: 0;
+}
+
+/* Champs d'une étape (fond --secondary) : ils remontent d'un niveau */
+.adm-step :is(input:is([type="text"], [type="search"], [type="url"], [type="password"], [type="number"], [type="email"]), select, textarea),
+.adm-card .adm-step :is(input:is([type="text"], [type="search"], [type="url"], [type="password"], [type="number"], [type="email"]), select, textarea) {
+    background-color: var(--adm-surface);
+}
+
+.adm-card .adm-step .ui-btn--secondary {
+    --btn-bg: var(--adm-surface);
+}
+
+@media screen and (max-width: 768px), screen and (max-height: 607px) {
+    .adm-step {
+        flex-direction: column;
+        gap: 10px;
+        padding: 12px;
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Médias (avatars, pochettes)                                         */
+/* ------------------------------------------------------------------ */
+.adm-card__media {
+    display: inline-flex;
+    flex-shrink: 0;
+}
+
+/* Avatar carré arrondi (serveur) : <img class="adm-avatar"> ou ServerAvatar.
+   Classe doublée : doit primer sur le style scopé de UI/ServerAvatar (img[data-v] : 70 px) */
+.adm-avatar.adm-avatar {
+    --adm-avatar-size: 40px;
+
+    display: block;
+    flex-shrink: 0;
+    width: var(--adm-avatar-size);
+    height: var(--adm-avatar-size);
+    border-radius: 10px;
+    object-fit: cover;
+    background-color: var(--main);
+}
+
+.adm-avatar.adm-avatar--sm { --adm-avatar-size: 32px; border-radius: 8px; }
+.adm-avatar.adm-avatar--lg { --adm-avatar-size: 56px; border-radius: 14px; }
+
+/* Pochette (playlist, titre) avec icône de repli */
+.adm-cover {
+    --adm-cover-size: 44px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--adm-cover-size);
+    height: var(--adm-cover-size);
+    overflow: hidden;
+    border-radius: 8px;
+    background-color: var(--adm-inset);
+    color: var(--text-secondary);
+    font-size: 1.1em;
+}
+
+.adm-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Identité d'un utilisateur (AdminUserLine) */
+.adm-user {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.adm-user__avatar {
+    --adm-avatar-size: 40px;
+
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: var(--adm-avatar-size);
+    height: var(--adm-avatar-size);
+}
+
+.adm-user__avatar img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    background-color: var(--main);
+}
+
+.adm-user__role {
+    position: absolute;
+    right: -3px;
+    bottom: -3px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: var(--adm-surface);
+    font-size: 9px;
+}
+
+.adm-user__online {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 10px;
+    height: 10px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: 2px solid var(--adm-surface);
+    background-color: var(--text-success);
+}
+
+.adm-user__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.adm-user__name {
+    font-weight: 600;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.adm-user__handle {
+    font-size: 0.78em;
+    line-height: 1.3;
+    color: var(--text-secondary);
+    overflow-wrap: anywhere;
+}
+
+/* ------------------------------------------------------------------ */
+/* Barre de commandes (icônes) et pagination                           */
+/* ------------------------------------------------------------------ */
+.adm-iconbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 6px;
+    width: 100%;
+}
+
+.adm-iconbar__group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Bouton icône carré, cible tactile de 36 px */
+.adm-iconbtn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 9px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    text-decoration: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
+}
+
+.adm-iconbtn:hover:not(:disabled) {
+    background-color: var(--adm-hover);
+    color: var(--text);
+}
+
+.adm-iconbtn:focus-visible {
+    box-shadow: var(--focus-ring);
+}
+
+.adm-iconbtn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.adm-iconbtn[aria-pressed="true"] {
+    border-color: color-mix(in srgb, var(--main) 55%, transparent);
+    background-color: var(--main-soft);
+    color: var(--main);
+}
+
+.adm-iconbtn--danger:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--text-error) 14%, transparent);
+    color: var(--text-error);
+}
+
+.adm-pager {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+}
+
+.adm-pager__info {
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+/* Zone défilante dans une carte (longues listes) */
+.adm-scroll {
+    max-height: var(--adm-scroll-max, 420px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .adm-card__chevron,
+    .adm-meter__fill,
+    button.adm-stat,
+    .adm-stat__go,
+    .adm-toast-enter-active,
+    .adm-toast-leave-active,
+    .adm-toast-move {
+        transition: none;
+    }
+
+    button.adm-stat:active {
+        transform: none;
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Tons (en fin de fichier : priment sur les valeurs par défaut des     */
+/* primitives à spécificité égale)                                     */
+/* ------------------------------------------------------------------ */
+/* Tons : --adm-tone (couleur pleine) et --adm-tone-bg (teinte de fond) */
+.adm-tone-default { --adm-tone: var(--text-secondary); --adm-tone-bg: color-mix(in srgb, var(--text) 10%, transparent); }
+.adm-tone-main { --adm-tone: var(--main); --adm-tone-bg: var(--main-soft); }
+.adm-tone-success { --adm-tone: var(--text-success); --adm-tone-bg: color-mix(in srgb, var(--text-success) 15%, transparent); }
+.adm-tone-warning { --adm-tone: var(--text-warning); --adm-tone-bg: color-mix(in srgb, var(--text-warning) 15%, transparent); }
+.adm-tone-error { --adm-tone: var(--text-error); --adm-tone-bg: color-mix(in srgb, var(--text-error) 15%, transparent); }
+.adm-tone-info { --adm-tone: var(--text-info); --adm-tone-bg: color-mix(in srgb, var(--text-info) 15%, transparent); }
+.adm-tone-admin { --adm-tone: var(--admin-color); --adm-tone-bg: color-mix(in srgb, var(--admin-color) 15%, transparent); }
+
+/* Couleur historique (prop `color`) : la teinte suit la couleur donnée */
+.adm-tone-custom { --adm-tone-bg: color-mix(in srgb, var(--adm-tone) 15%, transparent); }
+
+@media screen and (max-width: 768px), screen and (max-height: 607px) {
+    .adm-section {
+        gap: 12px;
+    }
+
+    .adm-section__header {
+        gap: 10px;
+        padding-bottom: 10px;
+    }
+
+    .adm-section__chip {
+        width: 36px;
+        height: 36px;
+        border-radius: 10px;
+        font-size: 1em;
+    }
+
+    .adm-section__title {
+        font-size: 1.2em;
+    }
+
+    .adm-section__actions {
+        width: 100%;
+        justify-content: stretch;
+    }
+
+    .adm-section__actions > * {
+        flex: 1 1 auto;
+    }
+
+    :root {
+        --adm-gap: 12px;
+        --adm-pad: 12px;
+    }
+
+    .adm-search {
+        flex-basis: 100%;
+        max-width: none;
+    }
+
+    .adm-toolbar__end {
+        width: 100%;
+    }
+
+    .adm-toolbar__end > * {
+        flex: 1 1 auto;
+    }
+}
diff --git a/src/components/Admin/adminUi.js b/src/components/Admin/adminUi.js
new file mode 100644
index 0000000..9a8fda2
--- /dev/null
+++ b/src/components/Admin/adminUi.js
@@ -0,0 +1,85 @@
+/**
+ * [Subsonics Chopin - Frontend]
+ * File: adminUi.js
+ * Description: Aides partagées par les primitives d'administration (tons, largeurs de grille, mémoire locale)
+ */
+
+// Fourni par AdminDashboard : { sections (liste {id,label,icon,group}), current (computed de la section active) }
+export const ADMIN_NAV_KEY = Symbol('adminNav');
+
+// Id du titre h2 de la section affichée (la zone <main> s'y réfère via aria-labelledby)
+export const ADMIN_SECTION_TITLE_ID = 'admin-section-title';
+
+// Niveau de titre des cartes (h3 par défaut, h4 dans un groupe titré AdminGrid) : hiérarchie lisible au lecteur d'écran
+export const ADMIN_HEADING_KEY = Symbol('adminHeading');
+
+// Fourni par AdminList : balise des AdminRow enfants ('li' dans une liste ul/ol)
+export const ADMIN_LIST_KEY = Symbol('adminList');
+
+// Retire un emoji en tête de titre ("📊 Vue d'ensemble" → "Vue d'ensemble") : l'icône vient de la navigation
+export function stripLeadingEmoji(text) {
+    return String(text ?? '').replace(/^(?:\p{Extended_Pictographic}|\p{Regional_Indicator}|[‍️⃣])+\s*/u, '');
+}
+
+// Tons acceptés par les primitives (Card, Stat, Banner, Row, Meter…)
+export const ADMIN_TONES = ['default', 'main', 'success', 'warning', 'error', 'info', 'admin'];
+
+// Alias tolérés : anciens noms de classes ("warn", "bad", "good"…) utilisés dans les sections
+const TONE_ALIASES = {
+    warn: 'warning',
+    bad: 'error',
+    danger: 'error',
+    good: 'success',
+    ok: 'success',
+    neutral: 'default'
+};
+
+export function normalizeTone(tone, fallback = 'default') {
+    if (!tone) return fallback;
+    const value = TONE_ALIASES[tone] || tone;
+    return ADMIN_TONES.includes(value) ? value : fallback;
+}
+
+export function toneValidator(value) {
+    return !value || ADMIN_TONES.includes(value) || value in TONE_ALIASES;
+}
+
+// Icône par défaut d'un ton (bandeaux, notifications)
+export function toneIcon(tone) {
+    switch (normalizeTone(tone, 'info')) {
+        case 'error': return "fa-solid fa-circle-exclamation";
+        case 'warning': return "fa-solid fa-triangle-exclamation";
+        case 'success': return "fa-solid fa-circle-check";
+        default: return "fa-solid fa-circle-info";
+    }
+}
+
+function clampSpan(value, fallback) {
+    const n = Math.round(Number(value));
+    return Number.isFinite(n) && n >= 1 && n <= 12 ? n : fallback;
+}
+
+/**
+ * Largeurs effectives d'un élément de la grille 12 colonnes.
+ * md (conteneur ≤ 1080 px) : 2→4, 3→6, 9–11→12 ; sm (≤ 820 px) : 2–4→6, 5→12, 6→6, 7+→12 ; ≤ 560 px : tout en 12.
+ */
+export function spanClasses(span, spanMd, spanSm) {
+    const base = clampSpan(span, 4);
+    const md = clampSpan(spanMd, base <= 2 ? 4 : base === 3 ? 6 : base >= 9 ? 12 : base);
+    const sm = clampSpan(spanSm, base === 5 ? 12 : base <= 6 ? 6 : 12);
+    return [`adm-span-${base}`, `adm-span-md-${md}`, `adm-span-sm-${sm}`];
+}
+
+// Mémoire locale tolérante (navigation privée, stockage bloqué)
+export function readLocal(key, fallback = null) {
+    try {
+        const value = localStorage.getItem(key);
+        return value === null ? fallback : value;
+    } catch (e) {
+        return fallback;
+    }
+}
+
+export function writeLocal(key, value) {
+    try { localStorage.setItem(key, value); } catch (e) { /* stockage indisponible */ }
+}
diff --git a/src/components/Layout/Account.vue b/src/components/Layout/Account.vue
index 3b12317..b079b0f 100644
--- a/src/components/Layout/Account.vue
+++ b/src/components/Layout/Account.vue
@@ -1,9 +1,9 @@
 <template>
-    <Box :box-class="'box'" padding="closed">
+    <Box ref="root" :box-class="'box'" padding="closed">
         <User :user="userStore.userInfo" />
         <div class="user-action">
-            <IconAction title="Paramètres" icon="fa-solid fa-gear" @click="userSettings.open()"/>
-            <IconAction title="Déconnexion" color="red" icon="fa-solid fa-right-from-bracket" @click="signOut(router)"/>
+            <IconAction label="Paramètres" icon="fa-solid fa-gear" @click="openSettings()"/>
+            <IconAction label="Déconnexion" color="var(--text-error)" icon="fa-solid fa-right-from-bracket" @click="signOut(router)"/>
         </div>
         <!-- Paramètres : thème, comptes connectés (YouTube), support, confidentialité, accès à l'administration -->
         <UserSettings ref="userSettings"/>
@@ -23,12 +23,21 @@ if(!socket.connected) {
 
 import { useUserStore } from '@/stores/userStore';
 import UserSettings from '../Widget/User/UserSettings.vue';
+import { useUserSettingsOpener } from '../Widget/View/Home/userSettingsOpener';
 import { ref } from 'vue';
 const userStore = useUserStore();
 const router = useRouter();
 
+const root = ref(null);
 const userSettings = ref(null);
 
+function openSettings(section) {
+    userSettings.value?.open(section);
+}
+
+// Events.emit('USER_SETTINGS_OPEN', section?) : accueil, playlists… (une seule modale ouverte, cf. userSettingsOpener)
+useUserSettingsOpener(() => root.value?.$el ?? null, openSettings);
+
 </script>
 <style scoped>
 .box {
@@ -45,4 +54,4 @@ const userSettings = ref(null);
 }
 
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Layout/GuildHeader.vue b/src/components/Layout/GuildHeader.vue
index 72cf92c..70a101e 100644
--- a/src/components/Layout/GuildHeader.vue
+++ b/src/components/Layout/GuildHeader.vue
@@ -2,41 +2,66 @@
     <Box padding="closed">
         <div class="container">
             <SubsonicsLogo/>
-            <div ref="serverBox" class="server-box">
-                 <Box ref="content" :overbox="showMenu" level="second" no-shadow padding="closed">
-                        <div v-if="server" class="itm">
-                            <ServerItem :server="server"/>
-                            <div class="actions">
-                                <ListenBox>{{ server.members.length + 1}}</ListenBox>
-                                <IconAction ref="opener"  @click="showMenu = !showMenu" :icon="showMenu ? 'fa-solid fa-angle-up' : 'fa-solid fa-angle-down'"/>
-                            </div>
+            <div ref="serverBox" :class="['server-box', { 'server-box--open': showMenu }]">
+                <div v-if="server" class="server-card" @click="onCardClick">
+                    <ServerItem :server="server"/>
+                    <div class="actions">
+                        <ListenBox title="Utilisateurs connectés à Subsonics sur ce serveur">{{ onlineCount }}</ListenBox>
+                        <IconAction
+                            ref="opener"
+                            :icon="showMenu ? 'fa-solid fa-angle-up' : 'fa-solid fa-angle-down'"
+                            :label="showMenu ? 'Masquer les options du serveur' : 'Afficher les membres et options du serveur'"
+                            :aria-expanded="showMenu ? 'true' : 'false'"
+                            :aria-controls="menuId"
+                            @click.stop="toggleMenu()"
+                        />
+                    </div>
+                </div>
+                <div v-else-if="server === undefined" class="server-card server-card--loading">
+                    <Spinner label="Chargement du serveur…" visible-label />
+                </div>
+                <div v-else class="server-card server-card--error">
+                    <Error>Serveur indisponible</Error>
+                    <Button size="sm" variant="secondary" icon="fa-solid fa-arrow-right" to="/servers">Changer</Button>
+                </div>
+
+                <div
+                    v-show="showMenu && server"
+                    :id="menuId"
+                    class="menu"
+                    role="region"
+                    aria-label="Membres et options du serveur"
+                    @keydown.esc.stop="closeMenu(true)"
+                >
+                    <div class="menu-content">
+                        <p class="menu-title">
+                            <Icon icon="fa-solid fa-users" aria-hidden="true"/>
+                            <span>En ligne sur Subsonics</span>
+                        </p>
+                        <div v-if="server" class="users-container">
+                            <ul v-if="server.members.length > 0" class="users-list" aria-label="Utilisateurs en ligne">
+                                <GuildHeaderUsers :server="server"/>
+                            </ul>
+                            <Info secondary v-else>Personne d'autre n'est connecté pour le moment.</Info>
+                        </div>
+                        <div class="server-actions">
+                            <Button v-if="gestion" size="sm" variant="secondary" icon="fa-solid fa-gear" @click="openSettings()">Gestion</Button>
+                            <Button size="sm" icon="fa-solid fa-arrow-right-arrow-left" to="/servers">Changer de serveur</Button>
                         </div>
-                        <Error v-else><ServerItem/></Error>
-                 </Box>
-                 <div :style="`width: ${serverBox.offsetWidth}px !important;`" class="menu" v-if="showMenu">
-                    <div class="menu-content">
-                        <div>
-                                 <p><Icon icon="fa-solid fa-users"/> Utilisateurs en ligne</p>
-                            <div v-if="server" class="users-container">
-                                <div v-if="server.members.length > 0" class="users-list">
-                                    <GuildHeaderUsers :server="server"/>
-                                </div>
-                                <Info secondary v-else>Aucun utilisateur en ligne</Info>
-                                </div>
-                            </div>
-                                <div class="server-actions">
-                                    <Button icon="fa-solid fa-gear" v-if="gestion" @click="settings.open()">Gestion</Button>
-                                    <Button icon="fa-solid fa-arrow-right" :style="{width: gestion ? '' : '100%'}" @click="router.push(`/servers`)">Changer de serveur</Button>
-                                </div>
-                            </div>
+                    </div>
                 </div>
-                 <div v-if="showMenu" style="height: 10px;"></div> 
                 <GuildSettings ref="settings" :server="server" v-if="server && gestion"/>
             </div>
         </div>
     </Box>
 </template>
 <script setup>
+/**
+ * En-tête de la colonne gauche : logo, serveur actif (état, membres en ligne) et panneau dépliant
+ * (utilisateurs connectés et leurs actions de modération, gestion du serveur, changement de serveur).
+ * Panneau : bouton à aria-expanded, Échap ou clic extérieur pour fermer.
+ */
+import { computed, onMounted, onUnmounted, ref, useId } from 'vue';
 import SubsonicsLogo from '@/components/UI/SubsonicsLogo.vue';
 import Box from '@/components/UI/Box.vue';
 import ServerItem from '@/components/UI/Server.vue';
@@ -45,79 +70,120 @@ import ListenBox from '@/components/UI/ListenBox.vue';
 import Error from '@/components/UI/Error.vue';
 import Info from '@/components/UI/Info.vue';
 import Button from '@/components/UI/Button.vue';
+import Spinner from '@/components/UI/Spinner.vue';
 import { IORequest } from '@/utils/IORequest';
-import events from '@/utils/Events';
-import { useRouter } from 'vue-router';
-
-import { ref, onMounted, onUnmounted } from 'vue';
+import Events from '@/utils/Events';
 import GuildHeaderUsers from '../Widget/Guild/GuildHeaderUsers.vue';
 import GuildSettings from '../Widget/Guild/GuildSettings.vue';
 import { useUserStore } from '@/stores/userStore';
 import { useGlobalStore } from '@/stores/globalStore';
-import Events from '@/utils/Events';
 
 const userStore = useUserStore();
-
-const server = ref(undefined)
-const showMenu = ref(false);
-const serverBox = ref(null);
-const router = useRouter();
-const content = ref(null);
-const opener = ref(null);
-
-var gestion = ref(false)
 const globalStore = useGlobalStore();
 
+const menuId = `guild-menu-${useId()}`;
+// undefined = chargement, null = indisponible
+const server = ref(undefined);
+const showMenu = ref(false);
+const serverBox = ref(null);
+const opener = ref(null);
+const gestion = ref(false);
 const settings = ref(null);
 
-events.on("UPDATE", () => {
-    updateServerInfo();
-})
+// Moi + les autres utilisateurs connectés
+const onlineCount = computed(() => (server.value?.members?.length || 0) + 1);
 
-onMounted(() => {
-    updateServerInfo();
-    window.addEventListener('resize', () => {
-     showMenu.value = false; 
-    });
+function toggleMenu() {
+    if (showMenu.value) closeMenu(false);
+    else openMenu();
+}
 
-    content.value.$el.addEventListener('pointerdown', (ev) => {
-        if(ev.pointerType === 'mouse') return;
-        if(opener.value.$el.contains(ev.target)) return;
-        if(!showMenu.value) {
-            showMenu.value = true;
-        }
-    });
-})
+function openMenu() {
+    showMenu.value = true;
+    document.addEventListener('pointerdown', onDocumentPointerDown, true);
+}
 
-onUnmounted(() => {
-    window.removeEventListener('resize', () => {
-     showMenu.value = false; 
-    });
-    userStore.userInfo.identity.isAdmin = null;
-    userStore.userInfo.identity.isMod = null;
-    userStore.userInfo.identity.isOwner = null;
-});
+function closeMenu(focusOpener) {
+    if (!showMenu.value) return;
+    showMenu.value = false;
+    document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    if (focusOpener) opener.value?.$el?.focus?.();
+}
+
+// Clic sur la carte (hors bouton) : ouvre aussi le panneau, comme avant
+function onCardClick(event) {
+    if (event.target instanceof Element && event.target.closest('button, a')) return;
+    toggleMenu();
+}
+
+function onDocumentPointerDown(event) {
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    if (serverBox.value?.contains(target)) return;
+    // Menus et modales téléportés (actions sur un utilisateur, gestion) : ne ferment pas le panneau
+    if (target instanceof Element && target.closest('.ui-menu, .modal-overlay')) return;
+    closeMenu(false);
+}
+
+function onResize() {
+    closeMenu(false);
+}
+
+function openSettings() {
+    closeMenu(false);
+    settings.value?.open();
+}
 
 function updateServerInfo() {
     IORequest("/GUILD/INFO", (data) => {
+        if (!data || typeof data !== 'object') {
+            server.value = null;
+            return;
+        }
         server.value = data;
         document.title = data.name + " - Subsonics";
         globalStore.actualServer = data;
-        userStore.userInfo.identity.isAdmin = userStore.userInfo.labels.includes('ADMIN');
-        userStore.userInfo.identity.isMod = userStore.userInfo.labels.includes('MOD_' + server.value.id);
-        userStore.userInfo.identity.isOwner = userStore.userInfo.identity.id == server.value.owner;
-        gestion.value = userStore.userInfo.labels.includes('ADMIN') || userStore.userInfo.labels.includes('MOD_' + server.value.id) || userStore.userInfo.identity.id == server.value.owner;
-        console.log("Server info updated");
-        events.emit("GUILD_JOINED", data);
-    })
-    
+        const labels = userStore.userInfo?.labels || [];
+        const identity = userStore.userInfo?.identity;
+        if (identity) {
+            identity.isAdmin = labels.includes('ADMIN');
+            identity.isMod = labels.includes('MOD_' + data.id);
+            identity.isOwner = identity.id == data.owner;
+        }
+        gestion.value = labels.includes('ADMIN') || labels.includes('MOD_' + data.id) || identity?.id == data.owner;
+        Events.emit("GUILD_JOINED", data);
+    });
 }
 
-Events.on("GUILD_LIST_UPDATE", (guilds) => {
-    server.value = guilds.find(g => g.id === globalStore.lastGuild);
+function onUpdate() {
+    updateServerInfo();
+}
+
+function onGuildListUpdate(guilds) {
+    const found = Array.isArray(guilds) ? guilds.find(g => g.id === globalStore.lastGuild) : null;
+    if (found) server.value = found;
+}
+
+Events.on("UPDATE", onUpdate);
+Events.on("GUILD_LIST_UPDATE", onGuildListUpdate);
+
+onMounted(() => {
+    updateServerInfo();
+    window.addEventListener('resize', onResize);
 });
 
-
+onUnmounted(() => {
+    Events.off("UPDATE", onUpdate);
+    Events.off("GUILD_LIST_UPDATE", onGuildListUpdate);
+    window.removeEventListener('resize', onResize);
+    document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    const identity = userStore.userInfo?.identity;
+    if (identity) {
+        identity.isAdmin = null;
+        identity.isMod = null;
+        identity.isOwner = null;
+    }
+});
 </script>
 <style scoped>
 .container {
@@ -128,66 +194,109 @@ Events.on("GUILD_LIST_UPDATE", (guilds) => {
     height: 100%;
 }
 
-.itm {
+.server-box {
+    width: 100%;
+    position: relative;
+}
+
+.server-card {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 10px;
+    padding: 10px;
+    border-radius: var(--radius);
+    background-color: var(--surface-2);
+    cursor: pointer;
+    transition: border-radius var(--dur-fast) ease, background-color var(--dur-fast) ease;
+}
+
+.server-card:hover {
+    background-color: color-mix(in srgb, var(--surface-2) 88%, var(--text));
+}
+
+.server-card--loading,
+.server-card--error {
+    cursor: default;
+}
+
+.server-card--loading {
+    justify-content: center;
+    min-height: 70px;
+}
+
+.server-box--open .server-card {
+    border-radius: var(--radius) var(--radius) 0 0;
 }
 
 .actions {
     display: flex;
     align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+}
+
+.menu {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    z-index: 1000;
+    background-color: var(--surface-2);
+    border-radius: 0 0 var(--radius) var(--radius);
+    box-shadow: var(--shadow-lg);
+    border-top: 1px solid var(--border);
+    animation: u-fade-in var(--dur-fast) ease-out;
+}
+
+.menu-content {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
     gap: 10px;
 }
 
-.server-box {
-    width: 100%;
-    position: relative;
-    display: inline-block;
+.menu-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-secondary);
 }
 
+.users-container {
+    position: relative;
+    max-height: 22vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
 
-.collapsed-box {
-  height: auto;
+.users-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
 }
 
 .server-actions {
     display: flex;
-    justify-content: space-between;
+    gap: 8px;
 }
 
-.server-actions p {
-    margin: 0;
-    font-size: 12px;
-}
-
-.menu {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    position: absolute;
-    background-color: var(--tertiary);
-    border-radius: 0px 0px 10px 10px;
-    z-index: 1000;
-}
-
-.menu-content {
-    padding: 0px 10px 10px 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-.users-container {
-    position: relative;
+.server-actions > * {
     flex: 1;
-    max-height: 20vh;
-    overflow-y: auto;
-}   
-
-.users-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
 }
 
-</style>
\ No newline at end of file
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .server-actions {
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/components/Layout/Player.vue b/src/components/Layout/Player.vue
index c54191c..0f3064b 100644
--- a/src/components/Layout/Player.vue
+++ b/src/components/Layout/Player.vue
@@ -5,29 +5,30 @@
       <div class="player">
         <div class="player-line">
         <VideoList :player-offline="!online" :video="video" />
-        <div class="player-tags">
+        <div class="player-tags" aria-live="polite">
           <ActualChannel/>
           <Tag v-for="tag in statusTags" :key="tag.key" :color="tag.color" :icon="tag.icon" :title="tag.title">{{ tag.text }}</Tag>
         </div>
         </div>
         <DurationBar class="duration-bar" v-bind="durationBarProps" @seek="seek" />
         <div class="actions">
-            <div v-if="online" class="actions-div">
-              <CustomIcon title="En boucle" :active="loop" @click="toggleLoop"><Loop active icon="fa-solid fa-sync"/></CustomIcon>
-              <CustomIcon title="Lecture aléatoire" :active="shuffle" @click="toggleShuffle"><Shuffle icon="fa-solid fa-shuffle"/></CustomIcon>
+            <div v-if="online" class="actions-div" role="group" aria-label="Options de lecture">
+              <CustomIcon label="En boucle" :active="loop" :aria-pressed="loop ? 'true' : 'false'" @click="toggleLoop"><Loop/></CustomIcon>
+              <CustomIcon label="Lecture aléatoire" :active="shuffle" :aria-pressed="shuffle ? 'true' : 'false'" @click="toggleShuffle"><Shuffle/></CustomIcon>
+              <CustomIcon label="Paroles" :active="lyricsOpen" :aria-pressed="lyricsOpen ? 'true' : 'false'" @click="toggleLyrics"><Icon class="lyrics-icon" icon="fa-solid fa-microphone-lines"/></CustomIcon>
             </div>
             <span v-else></span>
-            <div :class="{'actions-div': true, 'offline': !online || !video}" >
-              <Backward title="Précédent" @click="backward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}" class="itm-sec" icon="fa-solid fa-backward-step"/>
-              <div @click="togglePause()" :title="pauseTitle" :class="{'playIcon': online && video, 'itm-main': true}">
-                <Play  v-if="showPlayIcon"/>
-                <Pause v-else/>
-              </div>
-              <Forward title="Suivant" @click="forward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}"  class="itm-sec" icon="fa-solid fa-forward-step"/>
+            <div :class="{'actions-div': true, 'offline': !online || !video}" role="group" aria-label="Contrôles de lecture">
+              <button type="button" :class="{'ctrl': true, 'itm-sec': true, 'playIcon': online && video, 'enabled': online}" aria-label="Précédent" title="Précédent" :disabled="!online" @click="backward"><Backward aria-hidden="true"/></button>
+              <button type="button" :class="{'ctrl': true, 'itm-main': true, 'playIcon': online && video}" :aria-label="pauseTitle" :title="pauseTitle" :aria-busy="pauseBusy ? 'true' : undefined" :disabled="!online || !video" @click="togglePause()">
+                <Play v-if="showPlayIcon" aria-hidden="true"/>
+                <Pause v-else aria-hidden="true"/>
+              </button>
+              <button type="button" :class="{'ctrl': true, 'itm-sec': true, 'playIcon': online && video, 'enabled': online}" aria-label="Suivant" title="Suivant" :disabled="!online" @click="forward"><Forward aria-hidden="true"/></button>
             </div>
-            <div v-if="online" class="actions-div">
-              <CustomIcon title="Changer de salon" @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
-              <CustomIcon title="Déconnecter" @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></CustomIcon>
+            <div v-if="online" class="actions-div" role="group" aria-label="Salon vocal">
+              <CustomIcon label="Changer de salon" @click="changeChannel"><Hand/></CustomIcon>
+              <CustomIcon label="Déconnecter" @click="disconnect"><Disconnect/></CustomIcon>
             </div>
             <span v-else></span>
         </div>
@@ -35,36 +36,43 @@
     </Box>
   </section>
   <div class="player-placeholder" :style="{ height: playerHeight + 'px' }"></div>
-  <div :class="{'player-mobile-container': true, 'player-mobile-container-open': playerOpen}">
-  <section @click="togglePlayerOpen" ref="playerMobile" v-if="online" :class="{'player-mobile-unfold': playerOpen, 'player-mobile': true}">
-    <div v-show="playerOpen" class="player-menu">
+  <div :class="{'player-mobile-container': true, 'player-mobile-container-open': playerOpen, 'slide-out': playerClosing}">
+  <!-- Toucher la barre repliée l'ouvre ; le bouton chevron est l'équivalent clavier / lecteur d'écran -->
+  <section @click="onMobileSectionClick" ref="playerMobile" v-if="online" :class="{'player-mobile-unfold': playerOpen, 'player-mobile': true}" aria-label="Lecteur">
+    <div v-show="playerOpen" id="player-mobile-menu" class="player-menu">
       <DurationBar mobile class="duration-bar" v-bind="durationBarProps" @seek="seek" />
       <span class="actions-container">
-      <div :class="{'actions-div': true, 'offline': !online || !video}" >
-              <Backward title="Précédent" @click="backward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}" class="itm-sec" icon="fa-solid fa-backward-step"/>
-              <div @click="togglePause()" :title="pauseTitle" :class="{'playIcon': online && video, 'itm-main': true}">
-                <Play  v-if="showPlayIcon"/>
-                <Pause v-else/>
-              </div>
-              <Forward title="Suivant" @click="forward" :class="{'playIcon': online && video, 'itm-sec': true, 'enabled': online}"  class="itm-sec" icon="fa-solid fa-forward-step"/>
+      <div :class="{'actions-div': true, 'offline': !online || !video}" role="group" aria-label="Contrôles de lecture">
+              <button type="button" :class="{'ctrl': true, 'itm-sec': true, 'playIcon': online && video, 'enabled': online}" aria-label="Précédent" title="Précédent" :disabled="!online" @click="backward"><Backward aria-hidden="true"/></button>
+              <button type="button" :class="{'ctrl': true, 'itm-main': true, 'playIcon': online && video}" :aria-label="pauseTitle" :title="pauseTitle" :aria-busy="pauseBusy ? 'true' : undefined" :disabled="!online || !video" @click="togglePause()">
+                <Play v-if="showPlayIcon" aria-hidden="true"/>
+                <Pause v-else aria-hidden="true"/>
+              </button>
+              <button type="button" :class="{'ctrl': true, 'itm-sec': true, 'playIcon': online && video, 'enabled': online}" aria-label="Suivant" title="Suivant" :disabled="!online" @click="forward"><Forward aria-hidden="true"/></button>
       </div>
       </span>
-      <div class="player-tags">
+      <div class="player-tags" aria-live="polite">
         <ActualChannel/>
         <Tag v-for="tag in statusTags" :key="tag.key" :color="tag.color" :icon="tag.icon" :title="tag.title">{{ tag.text }}</Tag>
       </div>
-      <div class="button-div" v-if="online" >
-          <CustomIcon title="En boucle" :active="loop" @click="toggleLoop"><Loop active icon="fa-solid fa-sync"/></CustomIcon>
-          <CustomIcon title="Lecture aléatoire" :active="shuffle" @click="toggleShuffle"><Shuffle icon="fa-solid fa-shuffle"/></CustomIcon>
-          <CustomIcon title="Changer de salon" @click="changeChannel"><Hand icon="fa-solid fa-hand"/></CustomIcon>
-          <CustomIcon title="Déconnecter" @click="disconnect"><Disconnect icon="fa-solid fa-phone-slash"/></CustomIcon>
+      <div class="button-div" v-if="online" role="group" aria-label="Options">
+          <CustomIcon label="En boucle" :active="loop" :aria-pressed="loop ? 'true' : 'false'" @click="toggleLoop"><Loop/></CustomIcon>
+          <CustomIcon label="Lecture aléatoire" :active="shuffle" :aria-pressed="shuffle ? 'true' : 'false'" @click="toggleShuffle"><Shuffle/></CustomIcon>
+          <CustomIcon label="Paroles" :active="lyricsOpen" :aria-pressed="lyricsOpen ? 'true' : 'false'" @click="openLyricsFromMobile"><Icon class="lyrics-icon" icon="fa-solid fa-microphone-lines"/></CustomIcon>
+          <CustomIcon label="Changer de salon" @click="changeChannel"><Hand/></CustomIcon>
+          <CustomIcon label="Déconnecter" @click="disconnect"><Disconnect/></CustomIcon>
       </div>
     </div>
     <div :class="{'player-mobile-bar': playerOpen, 'player-mobile-fold': !playerOpen}">
-          <div v-if="online"  ref="playerMobileToggle">
-            <IconAction v-if="!playerOpen" icon="fa-angle-up"/>
-            <IconAction v-else icon="fa-angle-down"/>
-          </div>
+          <IconAction
+            ref="playerMobileToggle"
+            class="mobile-toggle"
+            :icon="playerOpen ? 'fa-solid fa-angle-down' : 'fa-solid fa-angle-up'"
+            :label="playerOpen ? 'Réduire le lecteur' : 'Agrandir le lecteur'"
+            :aria-expanded="playerOpen ? 'true' : 'false'"
+            aria-controls="player-mobile-menu"
+            @click.stop="togglePlayerOpen"
+          />
           <VideoList v-if="!playerOpen" mobile :player-offline="!online" :video="video" />
           <Video mobile v-else :video="video" />
       </div>
@@ -214,26 +222,56 @@ function onGuildJoined() {
 
 Events.on("GUILD_JOINED", onGuildJoined);
 
-function togglePlayerOpen(event) {
-  if(!playerOpen.value || playerMobileToggle.value.contains(event.target)) {
-      if (playerOpen.value) {
-      // player est ouvert → on ferme avec animation
-      const container = playerMobile.value.parentElement; // .player-mobile-container
-      container.classList.add('slide-out');
+// === LECTEUR MOBILE (feuille repliable) ===
+// Durée de l'animation de fermeture (slideOut) ; la feuille est retirée ensuite
+const CLOSE_ANIMATION_MS = 500;
+const playerClosing = ref(false);
+let closeTimer = null;
 
-      container.addEventListener('animationend', () => {
-        container.classList.remove('player-mobile-container-open');
-        container.classList.remove('slide-out');
-        playerOpen.value = false;
-      }, { once: true });
+function openPlayer() {
+  clearTimeout(closeTimer);
+  playerClosing.value = false;
+  playerOpen.value = true;
+}
 
-    } else {
-      // player est fermé → on ouvre normalement
-      playerOpen.value = true;
-      playerMobile.value.parentElement.classList.add('player-mobile-container-open');
-    }
+function closePlayer() {
+  if (!playerOpen.value || playerClosing.value) return;
+  const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+  if (reduce) {
+    playerOpen.value = false;
+    return;
   }
+  playerClosing.value = true;
+  closeTimer = setTimeout(() => {
+    playerClosing.value = false;
+    playerOpen.value = false;
+  }, CLOSE_ANIMATION_MS);
+}
 
+// Bouton chevron : équivalent clavier / lecteur d'écran du toucher sur la barre
+function togglePlayerOpen() {
+  if (playerOpen.value && !playerClosing.value) closePlayer();
+  else openPlayer();
+}
+
+// Toucher la barre repliée l'ouvre ; une fois ouverte, les clics vont aux contrôles
+function onMobileSectionClick() {
+  if (!playerOpen.value) openPlayer();
+}
+
+// === PAROLES ===
+const lyricsOpen = computed(() => playerStore.lyricsOpen);
+
+// Bascule la vue des paroles (Layout/View.vue gère l'ouverture / la fermeture)
+function toggleLyrics() {
+  Events.emit('VIEW_LYRICS');
+}
+
+// Mobile : la feuille du lecteur couvre la vue, on la replie pour montrer les paroles
+function openLyricsFromMobile() {
+  const opening = !playerStore.lyricsOpen;
+  Events.emit('VIEW_LYRICS');
+  if (opening) closePlayer();
 }
 
 
@@ -292,6 +330,7 @@ onUnmounted(() => {
   Events.off("GUILD_JOINED", onGuildJoined);
   clearTimeout(errorTimer);
   clearTimeout(actionErrorTimer);
+  clearTimeout(closeTimer);
   // Le prochain montage (autre serveur, reconnexion) repart d'un état vierge
   playerStore.reset();
 })
@@ -303,9 +342,7 @@ useResizeObserver(playerMobile, (entries) => {
 })
 
 onClickOutside(playerMobile, () => {
-  if (playerOpen.value) {
-    playerOpen.value = false;
-  }
+  closePlayer();
 });
 
 // Appelé par DurationBar (position en ms, seconde entière) ; renvoie false si le seek est refusé
@@ -374,13 +411,6 @@ async function seek(ms) {
   cursor: pointer;
 }
 
-.itm-sec:hover  && .playIcon {
-  --main: var(--main-hover);
-}
-
-.itm-sec:active  && .playIcon {
-  --main: var(--main-active);
-}
 
 .itm-main {
    padding: 15px;
@@ -393,14 +423,21 @@ async function seek(ms) {
    transition: all 0.3s ease-in-out;
 }
 
-.itm-main:hover && .playIcon {
+.itm-main.playIcon:hover:not(:disabled) {
   background: var(--main-hover);
 }
 
-.itm-main:active && .playIcon {
+.itm-main.playIcon:active:not(:disabled) {
   background: var(--main-active);
 }
 
+/* Icône FontAwesome du bouton « Paroles » : même gabarit que les SVG du lecteur */
+.lyrics-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--text);
+}
+
 
 .actions-div {
     display: flex;
diff --git a/src/components/Layout/Playlist.vue b/src/components/Layout/Playlist.vue
index 00d5d29..b8f8c5e 100644
--- a/src/components/Layout/Playlist.vue
+++ b/src/components/Layout/Playlist.vue
@@ -1,218 +1,577 @@
 <template>
-    <div class="playlist">
-        <!-- <p class="title"><Icon icon="fa-list-ol"/> Playlists</p> -->
-        <div class="playlist-items">
-            <div v-if="playlists.length > 0" class="playlist-items-list">
-               <PlaylistItem :selected="globalStore.actualPlaylistId === value.playlistId" @click="Events.emit('playlist:open', value)" v-for="value in playlists" :key="value.playlistId" :title="value.title" :type="value.type"/>
-            </div>
-            <div class="none" v-else>
-                <p class="none-title"><Icon icon="fa-circle-xmark"/>Aucune Playlist</p>
-                <p class="none-info">
-                    Vous n'avez pas encore créé de Playlist. <br/> Cliquez sur le bouton ci-dessous pour en ajouter une.
-                </p>
+    <section class="playlist" :aria-labelledby="headingId">
+        <header class="playlist__header">
+            <h2 :id="headingId" class="playlist__heading">
+                <Icon class="playlist__heading-icon" icon="fa-solid fa-list-ul" aria-hidden="true" />
+                <span>Playlists</span>
+                <span v-if="listLoaded" class="playlist__count" :aria-label="countLabel">{{ fullList.length }}</span>
+            </h2>
+            <div v-if="fullList.length > 1" class="playlist__sort">
+                <!-- Inversion rapide du sens (inutile en ordre personnalisé) -->
+                <button
+                    v-if="currentSort.mode !== 'manual'"
+                    type="button"
+                    class="playlist__dir"
+                    :aria-label="dirToggleLabel"
+                    :title="dirToggleLabel"
+                    @click="playlistStore.toggleSortDir(scope)"
+                >
+                    <Icon :icon="currentSort.dir === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-short-wide'" aria-hidden="true" />
+                </button>
+                <PlaylistSortMenu :model-value="currentSort" @update:model-value="onSortChange" />
             </div>
+        </header>
+
+        <SegmentedControl
+            v-if="playlistStore.guildEnabled"
+            class="playlist__scopes"
+            size="sm"
+            block
+            label="Playlists affichées"
+            :model-value="scope"
+            :options="scopeOptions"
+            @update:model-value="playlistStore.setScope($event)"
+        />
+
+        <div v-if="showFilter" class="playlist__filter">
+            <Icon class="playlist__filter-icon" icon="fa-solid fa-magnifying-glass" aria-hidden="true" />
+            <label :for="filterId" class="sr-only">Filtrer les playlists</label>
+            <input
+                :id="filterId"
+                v-model="filter"
+                type="search"
+                class="playlist__filter-input"
+                placeholder="Filtrer…"
+                autocomplete="off"
+                @keydown.esc.stop="filter = ''"
+            />
         </div>
-        <Button icon="fa-add" class="add-playlist" @click="openModal()">Ajouter une playlist</Button>
-    </div>
-    <Modal icon="fa-list" title="Ajouter une Playlist" ref="modal">
-        <div class="p-modal-content">
-            <input type="text" v-if="!isYoutube" v-model="newPlaylistTitle" placeholder="Titre de la playlist" />
-            <input type="text" v-if="isYoutube" v-model="urlLink" placeholder="Lien de la playlist YouTube" />
-            <div @click="isYoutube = !isYoutube" class="youtube-import">
-                <input type="checkbox" v-model="isYoutube" />
-                <label>Importer depuis YouTube</label>
+
+        <p v-if="isGuild && listLoaded && !playlistStore.canEdit" class="playlist__note">
+            <Icon icon="fa-solid fa-lock" aria-hidden="true" />
+            Lecture seule : seuls les modérateurs modifient ces playlists.
+        </p>
+
+        <div class="playlist__scroll" @touchstart="onListTouchStart">
+            <div v-if="!listLoaded && listError" class="playlist__state">
+                <EmptyState icon="fa-solid fa-plug-circle-exclamation" title="Playlists indisponibles" compact>
+                    Le serveur n'a pas répondu.
+                    <template #actions>
+                        <Button size="sm" variant="secondary" icon="fa-solid fa-rotate-right" @click="retry()">Réessayer</Button>
+                    </template>
+                </EmptyState>
             </div>
-            
-            <Button icon="fa-add" :disabled="(!isYoutube && newPlaylistTitle.trim() === '') || (isYoutube && !urlLink?.trim())" @click="addPlaylist">Ajouter</Button>
-            <p class="text-loading" v-if="isLoading"><Icon icon="fa-spinner" spin-pulse /> Création en cours…</p>
-            <p class="text-loading" v-if="error"><Error> {{ error }}</Error></p>
+            <div v-else-if="!listLoaded" class="playlist__state">
+                <Spinner label="Chargement des playlists…" visible-label />
+            </div>
+            <div v-else-if="fullList.length === 0" class="playlist__state">
+                <EmptyState v-if="isGuild" icon="fa-solid fa-users" title="Aucune playlist partagée">
+                    <template v-if="playlistStore.canEdit">Créez une playlist pour tout le serveur, ou partagez l'une des vôtres depuis sa page.</template>
+                    <template v-else>Les modérateurs du serveur n'ont encore rien partagé.</template>
+                    <template v-if="playlistStore.canEdit" #actions>
+                        <Button size="sm" icon="fa-solid fa-plus" @click="openCreate()">Créer une playlist partagée</Button>
+                    </template>
+                </EmptyState>
+                <EmptyState v-else icon="fa-solid fa-compact-disc" title="Aucune playlist">
+                    Créez votre première playlist, ou importez-en une depuis YouTube, Spotify ou SoundCloud.
+                    <template #actions>
+                        <Button size="sm" icon="fa-solid fa-plus" @click="openCreate()">Nouvelle playlist</Button>
+                    </template>
+                </EmptyState>
+            </div>
+            <div v-else-if="visibleList.length === 0" class="playlist__state">
+                <EmptyState icon="fa-solid fa-magnifying-glass" title="Aucun résultat" compact>
+                    Aucune playlist ne correspond à « {{ filter.trim() }} ».
+                    <template #actions>
+                        <Button size="sm" variant="ghost" icon="fa-solid fa-xmark" @click="clearFilter()">Effacer le filtre</Button>
+                    </template>
+                </EmptyState>
+            </div>
+
+            <draggable
+                v-else-if="canDrag"
+                v-model="manualList"
+                item-key="playlistId"
+                tag="ul"
+                class="playlist__list"
+                :aria-labelledby="headingId"
+                handle=".playlist__handle"
+                :animation="180"
+                ghost-class="playlist__row--ghost"
+                chosen-class="playlist__row--chosen"
+                drag-class="playlist__row--drag"
+                @start="dragging = true"
+                @end="onDragEnd"
+            >
+                <template #item="{ element, index }">
+                    <li class="playlist__row playlist__row--sortable">
+                        <button
+                            type="button"
+                            class="playlist__handle"
+                            :data-handle-id="element.playlistId"
+                            :aria-label="`Déplacer « ${element.title} », position ${index + 1} sur ${fullList.length}`"
+                            :aria-describedby="helpId"
+                            @keydown="onHandleKeydown($event, element)"
+                        >
+                            <Icon icon="fa-solid fa-grip-vertical" aria-hidden="true" />
+                        </button>
+                        <PlaylistItem
+                            :playlist="element"
+                            :scope="scope"
+                            :selected="isSelected(element)"
+                            :data-item-id="element.playlistId"
+                            @click="open(element)"
+                            @keydown="onItemKeydown($event, element)"
+                        />
+                    </li>
+                </template>
+            </draggable>
+
+            <ul v-else class="playlist__list" :aria-labelledby="headingId">
+                <li v-for="element in visibleList" :key="element.playlistId" class="playlist__row">
+                    <PlaylistItem
+                        :playlist="element"
+                        :scope="scope"
+                        :selected="isSelected(element)"
+                        @click="open(element)"
+                    />
+                </li>
+            </ul>
         </div>
-    </Modal>
+
+        <p :id="helpId" class="sr-only">Flèches haut et bas pour déplacer la playlist dans l'ordre personnalisé.</p>
+        <p class="sr-only" aria-live="polite">{{ announcement }}</p>
+
+        <Button
+            v-if="!isGuild || playlistStore.canEdit"
+            class="playlist__create"
+            icon="fa-solid fa-plus"
+            block
+            @click="openCreate()"
+        >{{ isGuild ? 'Nouvelle playlist partagée' : 'Nouvelle playlist' }}</Button>
+    </section>
 </template>
 <script setup>
-import { IORequest } from '@/utils/IORequest';
+/**
+ * Barre latérale des playlists : mes playlists / playlists du serveur, tri (préférence locale),
+ * ordre personnalisé par glisser-déposer ou au clavier, filtre rapide.
+ */
+import { computed, nextTick, onMounted, ref, useId, watch } from 'vue';
+import draggable from 'vuedraggable';
 import Button from '../UI/Button.vue';
 import PlaylistItem from '../UI/PlaylistItem.vue';
-import { onMounted, ref, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-import Modal from '../UI/Modal.vue';
-import Error from '../UI/Error.vue';
-import Events from '@/utils/Events';
+import SegmentedControl from '../UI/SegmentedControl.vue';
+import EmptyState from '../UI/EmptyState.vue';
+import Spinner from '../UI/Spinner.vue';
+import PlaylistSortMenu from '../Widget/Playlist/PlaylistSortMenu.vue';
 import { useGlobalStore } from '@/stores/globalStore';
-import { useUserStore } from '@/stores/userStore';
-import { socket } from '@/socket';
-import { refreshPlaylist } from '@/utils/Logic';
-
-const modal = ref(null);
-const playlists = ref([]);
-const newPlaylistTitle = ref('');
-const isYoutube = ref(false);
-const urlLink = ref(null);
-const isLoading = ref(false);
-const error = ref(null);
+import { usePlaylistStore } from '@/stores/playlistStore';
 
 const globalStore = useGlobalStore();
-const userStore = useUserStore();
-const router = useRouter();
+const playlistStore = usePlaylistStore();
 
-//TODO: Faire la possibilité d'envoyer une playlist
+const uid = useId();
+const headingId = `playlists-heading-${uid}`;
+const filterId = `playlists-filter-${uid}`;
+const helpId = `playlists-help-${uid}`;
 
+// Au-delà de ce nombre de playlists, un champ de filtre apparaît
+const FILTER_THRESHOLD = 8;
 
-function openModal() {
-    modal.value.open();
-    newPlaylistTitle.value = '';
-    isYoutube.value = false;
-    urlLink.value = null;
-    isLoading.value = false;
-    error.value = null;
-}
+const filter = ref('');
+const announcement = ref('');
+const dragging = ref(false);
 
-Events.on("playlist:init", (data) => {
-    playlists.value = data; 
-})
+const scope = computed(() => playlistStore.activeScope);
+const isGuild = computed(() => scope.value === 'guild');
+const listLoaded = computed(() => playlistStore.isLoaded(scope.value));
+const listError = computed(() => (isGuild.value ? playlistStore.guildError : playlistStore.personalError));
+const fullList = computed(() => playlistStore.sortedFor(scope.value));
+const currentSort = computed(() => playlistStore.sort[scope.value]);
 
-// Playlists modifiées hors de cette page (synchronisation YouTube depuis les paramètres, autre appareil, playlist reçue).
-// routes.js retire tous les écouteurs socket à chaque navigation : réenregistrement après chacune.
-function onPlaylistsUpdate() {
-    refreshPlaylist();
-}
-
-function listenPlaylistsUpdate() {
-    socket.off("/PLAYLISTS/UPDATE", onPlaylistsUpdate);
-    socket.on("/PLAYLISTS/UPDATE", onPlaylistsUpdate);
-}
-
-let removeHook = null;
-
-onMounted(() => {
-    Events.emit("logic:init");
-    listenPlaylistsUpdate();
-    removeHook = router.afterEach(() => listenPlaylistsUpdate());
+// Libellé du bouton d'inversion : décrit l'ordre obtenu après le clic
+const dirToggleLabel = computed(() => {
+    const next = currentSort.value.dir === 'asc' ? 'desc' : 'asc';
+    switch (currentSort.value.mode) {
+        case 'name':
+            return next === 'asc' ? 'Trier de A à Z' : 'Trier de Z à A';
+        case 'created':
+        case 'updated':
+            return next === 'asc' ? "Plus anciennes d'abord" : "Plus récentes d'abord";
+        default:
+            return next === 'asc' ? "Plus petites d'abord" : "Plus grandes d'abord";
+    }
 });
 
-onUnmounted(() => {
-    removeHook?.();
-    socket.off("/PLAYLISTS/UPDATE", onPlaylistsUpdate);
+const countLabel = computed(() => {
+    const n = fullList.value.length;
+    return `${n} playlist${n > 1 ? 's' : ''}`;
 });
 
-function addPlaylist() {
-    if ((!isYoutube.value && !newPlaylistTitle.value?.trim()) || (isYoutube.value && !urlLink.value?.trim())) {
+const scopeOptions = computed(() => [
+    { value: 'personal', label: 'Mes playlists', icon: 'fa-solid fa-user', badge: playlistStore.personalLoaded ? playlistStore.counts.personal : null },
+    { value: 'guild', label: 'Serveur', icon: 'fa-solid fa-users', badge: playlistStore.guildLoaded ? playlistStore.counts.guild : null }
+]);
+
+const showFilter = computed(() => fullList.value.length > FILTER_THRESHOLD || filter.value !== '');
+
+// Comparaison sans accents ni casse
+function fold(text) {
+    return String(text || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+}
+
+const visibleList = computed(() => {
+    const query = fold(filter.value.trim());
+    if (!query) return fullList.value;
+    return fullList.value.filter((playlist) => fold(playlist.title).includes(query));
+});
+
+// Glisser-déposer : ordre personnalisé, sans filtre, avec le droit de réordonner
+const canDrag = computed(() =>
+    currentSort.value.mode === 'manual'
+    && filter.value.trim() === ''
+    && fullList.value.length > 1
+    && playlistStore.canReorder(scope.value)
+);
+
+// Liste du glisser-déposer : l'écriture enregistre le nouvel ordre (optimiste, annulé en cas de refus)
+const manualList = computed({
+    get: () => playlistStore.listFor(scope.value),
+    set: (list) => {
+        saveOrder(list.map((playlist) => String(playlist.playlistId)));
+    }
+});
+
+async function saveOrder(order) {
+    const result = await playlistStore.reorder(scope.value, order);
+    if (!result.ok) {
+        announce("Le nouvel ordre n'a pas pu être enregistré.");
+        playlistStore.notify(result.message, { tone: 'error' });
+    }
+}
+
+function announce(message) {
+    // Vidé puis rempli : un message identique est relu
+    announcement.value = '';
+    nextTick(() => {
+        announcement.value = message;
+    });
+}
+
+function onDragEnd(event) {
+    dragging.value = false;
+    if (event.oldIndex === event.newIndex) return;
+    const list = playlistStore.listFor(scope.value);
+    const moved = list[event.newIndex];
+    if (moved) announce(`« ${moved.title} » déplacée en position ${event.newIndex + 1} sur ${list.length}.`);
+}
+
+function onSortChange(value) {
+    playlistStore.setSort(scope.value, value);
+}
+
+function isSelected(playlist) {
+    return globalStore.actualPlaylistScope === scope.value && String(globalStore.actualPlaylistId) === String(playlist.playlistId);
+}
+
+function open(playlist) {
+    playlistStore.openPlaylist(scope.value, playlist);
+}
+
+function openCreate() {
+    playlistStore.requestCreate(isGuild.value && playlistStore.canEdit ? 'guild' : 'personal');
+}
+
+function clearFilter() {
+    filter.value = '';
+    nextTick(() => document.getElementById(filterId)?.focus());
+}
+
+function retry() {
+    playlistStore.fetchScope(scope.value);
+}
+
+// Alternative clavier au glisser-déposer
+async function move(playlist, delta, focusSelector) {
+    const id = String(playlist.playlistId);
+    const list = playlistStore.listFor(scope.value);
+    const from = list.findIndex((item) => String(item.playlistId) === id);
+    const to = from + delta;
+    if (from === -1 || to < 0 || to >= list.length) {
+        announce(delta < 0 ? 'Déjà en première position.' : 'Déjà en dernière position.');
         return;
     }
-    if(isYoutube.value) newPlaylistTitle.value = urlLink.value;
-    isLoading.value = true;
-    IORequest("/PLAYLISTS/CREATE", (response) => {
-        isLoading.value = false;
-        if (response) {
-            Events.emit("logic:init");
-            modal.value.close();
-        } else {
-            error.value = "La playlist n'a pas pu être créée. Vérifier l'URL renseignée.";
-        }
-          newPlaylistTitle.value = '';
-          isYoutube.value = false;
-          urlLink.value = null;
-        
-    }, { name: newPlaylistTitle.value, url: urlLink.value });
+    const pending = playlistStore.movePlaylist(scope.value, id, delta);
+    announce(`« ${playlist.title} » déplacée en position ${to + 1} sur ${list.length}.`);
+    // Le nœud a changé de place dans le DOM : on lui rend le focus
+    await nextTick();
+    document.querySelector(`${focusSelector}="${CSS.escape(id)}"]`)?.focus();
+    const result = await pending;
+    if (!result.ok) {
+        announce("Le nouvel ordre n'a pas pu être enregistré.");
+        playlistStore.notify(result.message, { tone: 'error' });
+    }
 }
 
+function onHandleKeydown(event, playlist) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault();
+        move(playlist, event.key === 'ArrowUp' ? -1 : 1, '[data-handle-id');
+    }
+}
 
+function onItemKeydown(event, playlist) {
+    if (!event.altKey || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) return;
+    event.preventDefault();
+    move(playlist, event.key === 'ArrowUp' ? -1 : 1, '[data-item-id');
+}
 
+// Sur mobile, la liste est dans un carrousel qui change de page au moindre glissement horizontal :
+// un toucher sur la poignée ne doit pas lui parvenir
+function onListTouchStart(event) {
+    if (event.target instanceof Element && event.target.closest('.playlist__handle')) event.stopPropagation();
+}
+
+// Le filtre ne suit pas d'une liste à l'autre
+watch(scope, () => {
+    filter.value = '';
+});
+
+onMounted(() => {
+    // Les listes sont aussi chargées à l'entrée sur un serveur (GUILD_JOINED) : ici seulement si elles manquent
+    if (!playlistStore.personalLoaded && !playlistStore.personalLoading) playlistStore.fetchPersonal();
+    if (!playlistStore.guildLoaded && !playlistStore.guildLoading && globalStore.actualServer) playlistStore.fetchGuild();
+});
 </script>
 <style scoped>
-
-label {
-    color: var(--text-secondary);
-}
-
-.text-loading {
-    color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    font-size: 0.9em;
-    gap: 5px;
-    cursor: pointer;
-    text-align: center;
-    justify-content: center;
-}
-
-
-.p-modal-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-
 .playlist {
     flex: 1;
     display: flex;
+    flex-direction: column;
     gap: 10px;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+}
+
+.playlist__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+}
+
+.playlist__sort {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.playlist__dir {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
+}
+
+.playlist__dir:hover {
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+    color: var(--text);
+}
+
+.playlist__dir:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.playlist__heading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    min-width: 0;
+    font-size: 1.05em;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.playlist__heading-icon {
+    color: var(--main);
+}
+
+.playlist__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    height: 20px;
+    padding: 0 7px;
+    box-sizing: border-box;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.playlist__filter {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.playlist__filter-icon {
+    position: absolute;
+    left: 10px;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    pointer-events: none;
+}
+
+.playlist__filter-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding-left: 30px;
+    font-size: 0.875rem;
+}
+
+.playlist__note {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.78em;
+    line-height: 1.35;
+    color: var(--text-secondary);
+}
+
+.playlist__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    margin-right: -6px;
+    padding-right: 6px;
+    display: flex;
     flex-direction: column;
 }
 
-.playlist-items {
+.playlist__state {
     flex: 1;
-    overflow-y: auto;
     display: flex;
-    position: relative;
+    align-items: center;
+    justify-content: center;
+    min-height: 140px;
+}
+
+.playlist__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.playlist__row {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    border-radius: var(--radius);
+}
+
+.playlist__row :deep(.playlist-item) {
+    flex: 1;
+}
+
+/* Poignée de déplacement : visible au survol / au focus (toujours sur écran tactile) */
+.playlist__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 22px;
+    height: 44px;
+    margin-right: -2px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-tertiary);
+    font-size: 0.85em;
+    cursor: grab;
+    opacity: 0;
+    touch-action: none;
+    outline: 2px solid transparent;
+    transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease;
+}
+
+.playlist__row:hover .playlist__handle,
+.playlist__row:focus-within .playlist__handle,
+.playlist__handle:focus-visible {
+    opacity: 1;
+}
+
+.playlist__handle:hover {
+    color: var(--text);
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.playlist__handle:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--main);
+    color: var(--text);
+}
+
+.playlist__handle:active {
+    cursor: grabbing;
+}
+
+@media (hover: none) {
+    .playlist__handle {
+        opacity: 1;
+    }
+}
+
+.playlist__row--ghost {
+    opacity: 0.45;
+    background-color: var(--main-soft);
+}
+
+.playlist__row--chosen :deep(.playlist-item) {
+    background-color: color-mix(in srgb, var(--text) 9%, transparent);
+}
+
+.playlist__row--drag {
+    background-color: var(--tertiary);
+    box-shadow: var(--shadow);
+}
+
+.playlist__create {
+    flex-shrink: 0;
 }
 
 @media screen and (max-width: 768px),
        screen and (max-height: 607px) {
-    .playlist-items {
-        flex-direction: column;
+    .playlist {
+        gap: 8px;
+    }
+
+    .playlist__heading {
+        font-size: 1em;
     }
 }
-
-.playlist-items-list {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.add-playlist {
-    width: 100%;
-}
-
-
-p {
-    margin: 2px 0px;
-}
-
-
-.title {
-    font-size: 18px;
-    margin: 0;
-}
-
-.none {
-    text-align: center;
-    color: var(--text-secondary);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 5px;
-    font-size: 1.5em;
-    justify-content: center;
-    flex: 1;
-}
-
-.none-title {
-    gap: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.none-info {
-    text-align: center;
-    color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 0.6em;
-    justify-content: center;
-}
-</style>    
\ No newline at end of file
+</style>
diff --git a/src/components/Layout/Queue.vue b/src/components/Layout/Queue.vue
index a13d7a5..3bdef40 100644
--- a/src/components/Layout/Queue.vue
+++ b/src/components/Layout/Queue.vue
@@ -1,118 +1,100 @@
 <template>
-    <section class="queue-div">
-        <Glider v-model="selectedTab">
-            <span>Liste de lecture</span>
+    <section class="queue-div" aria-label="File de lecture">
+        <Glider v-model="selectedTab" label="Listes du player" :id-prefix="tabsId">
+            <span>À suivre</span>
             <span>Historique</span>
         </Glider>
-        <div class="list-wrapper">
-        <Transition :name="direction">
-            <component :is="selectedTab === 0 ? NextList : PreviousList" :key="selectedTab" :online="online" v-bind="selectedTab === 0 ? { nextList, nextCount } : { previousList }"></component>
-        </Transition>
+        <div
+            class="list-wrapper"
+            role="tabpanel"
+            :id="`${tabsId}-panel-${selectedTab}`"
+            :aria-labelledby="`${tabsId}-tab-${selectedTab}`"
+        >
+            <Transition :name="direction">
+                <component
+                    :is="selectedTab === 0 ? NextList : PreviousList"
+                    :key="selectedTab"
+                    :online="online"
+                    v-bind="selectedTab === 0 ? { nextList, nextCount } : { previousList }"
+                ></component>
+            </Transition>
         </div>
-           
     </section>
 </template>
 <script setup>
-    import { useRouter } from 'vue-router';
-    import { useGlobalStore } from '@/stores/globalStore';
-    import { useUserStore } from '@/stores/userStore';
-    import Glider from '../UI/Glider.vue';
-    import { computed, ref, watch } from 'vue';
-    import NextList from '../Widget/Queue/NextList.vue';
-    import PreviousList from '../Widget/Queue/PreviousList.vue';
-    import { usePlayerStore } from '@/stores/playerStore';
+/**
+ * File de lecture : onglets « À suivre » (réordonnable) et « Historique ».
+ * Les listes sont lues directement dans le store du player.
+ */
+import { computed, ref, useId, watch } from 'vue';
+import Glider from '../UI/Glider.vue';
+import NextList from '../Widget/Queue/NextList.vue';
+import PreviousList from '../Widget/Queue/PreviousList.vue';
+import { usePlayerStore } from '@/stores/playerStore';
 
-    const router = useRouter();
-    const globalStore = useGlobalStore();
-    const userStore = useUserStore();
-    // Files lues directement dans le store du player (plus d'écoute d'événement à retirer)
-    const playerStore = usePlayerStore();
-    const online = computed(() => playerStore.online)
-    const nextList = computed(() => playerStore.next)
-    const nextCount = computed(() => playerStore.nextCount)
-    const previousList = computed(() => playerStore.previous)
-    const direction = ref('forward')
+const tabsId = `queue-${useId()}`;
+const playerStore = usePlayerStore();
+const online = computed(() => playerStore.online);
+const nextList = computed(() => playerStore.next);
+const nextCount = computed(() => playerStore.nextCount);
+const previousList = computed(() => playerStore.previous);
+const direction = ref('forward');
 
-    const selectedTab = ref(0)
-
-    watch(selectedTab, (newTab, oldTab) => {
-    if (newTab > oldTab) {
-        direction.value = 'forward';   // glide vers la gauche
-    } else if (newTab < oldTab) {
-        direction.value = 'backward';  // glide vers la droite
-    }
-    });
-
-    
+const selectedTab = ref(0);
 
+watch(selectedTab, (newTab, oldTab) => {
+    direction.value = newTab > oldTab ? 'forward' : 'backward';
+});
 </script>
 <style scoped>
-
 .list-wrapper {
-  position: relative; /* conteneur pour les sections absolues */
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  flex: 1;
-  display: flex;
+    position: relative; /* conteneur des listes (positionnées en absolu pendant la transition) */
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    flex: 1;
+    display: flex;
+    min-height: 0;
 }
 
-/* Forward animation */
+/* Glissement entre les onglets */
 .forward-enter-active {
-  animation: slide-left-in 0.3s forwards;
+    animation: slide-left-in var(--dur) var(--ease) forwards;
 }
 .forward-leave-active {
-  animation: slide-left-out 0.3s forwards;
+    animation: slide-left-out var(--dur) var(--ease) forwards;
 }
-
-/* Backward animation */
 .backward-enter-active {
-  animation: slide-right-in 0.3s forwards;
+    animation: slide-right-in var(--dur) var(--ease) forwards;
 }
 .backward-leave-active {
-  animation: slide-right-out 0.3s forwards;
+    animation: slide-right-out var(--dur) var(--ease) forwards;
 }
 
-/* Keyframes */
 @keyframes slide-left-in {
-  from { transform: translateX(100%); opacity: 0; }
-  to   { transform: translateX(0); opacity: 1; }
+    from { transform: translateX(100%); opacity: 0; }
+    to   { transform: translateX(0); opacity: 1; }
 }
 @keyframes slide-left-out {
-  from { transform: translateX(0); opacity: 1; }
-  to   { transform: translateX(-100%); opacity: 0; }
+    from { transform: translateX(0); opacity: 1; }
+    to   { transform: translateX(-100%); opacity: 0; }
 }
 @keyframes slide-right-in {
-  from { transform: translateX(-100%); opacity: 0; }
-  to   { transform: translateX(0); opacity: 1; }
+    from { transform: translateX(-100%); opacity: 0; }
+    to   { transform: translateX(0); opacity: 1; }
 }
 @keyframes slide-right-out {
-  from { transform: translateX(0); opacity: 1; }
-  to   { transform: translateX(100%); opacity: 0; }
-}
-
-/* Ce bloc empêche l'animation au premier montage */
-.slide-appear-from,
-.slide-appear-to,
-.slide-appear-active {
-  transition: none !important;
+    from { transform: translateX(0); opacity: 1; }
+    to   { transform: translateX(100%); opacity: 0; }
 }
 
 .queue-div {
     display: flex;
     flex: 1;
     flex-direction: column;
-    background-color: var(--background);
-    border-radius: 9px;
-    gap: 10px;
+    min-height: 0;
+    border-radius: var(--radius);
+    gap: 12px;
 }
-
-
-
-
-@media screen and (max-width: 768px),
-       screen and (max-height: 607px) {
-   
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Layout/Search.vue b/src/components/Layout/Search.vue
index ac6389b..b6a9084 100644
--- a/src/components/Layout/Search.vue
+++ b/src/components/Layout/Search.vue
@@ -1,101 +1,310 @@
 <template>
-    <div class="search">
-        <Icon color="#FFFFFF" icon="fa-solid fa-magnifying-glass" style="width: 20px;" />
+    <form class="search" role="search" aria-label="Rechercher de la musique" @submit.prevent="submit()">
+        <Icon class="search-icon" icon="fa-solid fa-magnifying-glass" aria-hidden="true" />
         <div class="search-bar">
-        <input autocomplete="off" name="search" ref="searchBar" type="text" placeholder="Insérer votre recherche ici" v-model="searchQuery" />
-        <Icon color="#FFFFFF" v-if="searchQuery.trim() !== ''" icon="fa-solid fa-xmark" class="clear-icon" @click="searchQuery = ''" />
-        <SearchSuggestions v-if="searchQuery.trim() !== '' && suggestClose" :query="searchQuery" />
+            <label class="sr-only" :for="inputId">Rechercher un titre, un artiste ou un lien</label>
+            <input
+                :id="inputId"
+                ref="searchBar"
+                v-model="searchQuery"
+                type="search"
+                name="search"
+                role="combobox"
+                aria-autocomplete="list"
+                :aria-expanded="showSuggestions ? 'true' : 'false'"
+                :aria-controls="listId"
+                :aria-activedescendant="showSuggestions && activeIndex >= 0 ? optionId(activeIndex) : undefined"
+                :aria-busy="searching ? 'true' : undefined"
+                autocomplete="off"
+                spellcheck="false"
+                enterkeyhint="search"
+                placeholder="Rechercher un titre, un artiste ou coller un lien"
+                @input="onInput"
+                @keydown="onKeydown"
+                @focus="focused = true"
+                @blur="onBlur"
+            />
+            <span v-if="searching" class="search-spinner" aria-hidden="true"></span>
+            <button
+                v-else-if="searchQuery.trim() !== ''"
+                type="button"
+                class="clear-button"
+                aria-label="Effacer la recherche"
+                title="Effacer la recherche"
+                @click="clearQuery()"
+            >
+                <Icon icon="fa-solid fa-xmark" aria-hidden="true" />
+            </button>
+            <SearchSuggestions
+                v-show="showSuggestions"
+                :list-id="listId"
+                :items="suggestions"
+                :active-index="activeIndex"
+                :option-id="optionId"
+                @select="selectSuggestion"
+                @hover="activeIndex = $event"
+            />
         </div>
+        <p class="sr-only" aria-live="polite">{{ liveMessage }}</p>
         <div class="search-actions">
             <IconAction
                 icon="fa-solid fa-cloud-arrow-up"
-                color="#FFFFFF"
-                title="Mes fichiers"
+                color="var(--main-contrast)"
+                label="Mes fichiers"
                 @click="Events.emit('VIEW_FILES')"
             />
+            <!-- Mobile : l'accueil n'est pas affiché par défaut, ce bouton l'ouvre (et le referme) -->
             <IconAction
-                icon="fa-solid fa-clipboard-list"
-                title="Lire les informations"
-                class="docs-icon"
-                color="#FFFFFF"
+                icon="fa-solid fa-house"
+                label="Accueil"
+                class="home-icon"
+                color="var(--main-contrast)"
                 @click="Events.emit('VIEW_INFO')"
             />
         </div>
-    </div>
+    </form>
 </template>
 
 <script setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+/**
+ * Barre de recherche (combobox ARIA) : suggestions YouTube au fil de la frappe,
+ * flèches haut / bas pour les parcourir, Entrée pour chercher, Échap pour fermer puis effacer.
+ * Émet sur le bus : SEARCH_STARTED, SEARCH_RESULT {data, query}, SEARCH_RESULT_SENDED.
+ * Écoute : VIEW_CLOSED (efface), SEARCH_RESULT_SELECTED (lance une recherche), SEARCH_FOCUS (accueil).
+ */
+import { computed, nextTick, onBeforeUnmount, ref, useId } from 'vue';
 import IconAction from '../UI/IconAction.vue';
 import { IORequest } from '@/utils/IORequest';
 import Events from '@/utils/Events';
 import SearchSuggestions from '@/components/Widget/View/Search/SearchSuggestions.vue';
 
+const SUGGEST_DELAY = 200;
+const SUGGEST_MAX = 8;
+
+const uid = useId();
+const inputId = `search-${uid}`;
+const listId = `search-list-${uid}`;
 const searchBar = ref(null);
 const searchQuery = ref('');
-const suggestClose = ref(true);
+const suggestions = ref([]);
+const activeIndex = ref(-1);
+const focused = ref(false);
+// Suggestions masquées après une recherche, jusqu'à la prochaine frappe
+const suggestionsDismissed = ref(false);
+const searching = ref(false);
+const liveMessage = ref('');
 
-onMounted(() => {
-    searchBar.value.addEventListener('change', () => {
-        find();
-        suggestClose.value = true;
-    });
+let suggestTimer = null;
+let suggestSeq = 0;
+let pendingQuery = null;
 
-    searchBar.value.addEventListener('keydown', (event) => {
-        suggestClose.value = true;   
-    });
-});
+const showSuggestions = computed(() => focused.value && !suggestionsDismissed.value && suggestions.value.length > 0 && searchQuery.value.trim() !== '');
 
-function find(queryByResult) {
-    // If on mobile close the keyboard
-    if (window.innerWidth < 768) {
-        searchBar.value.blur();
-    }
-    if (searchQuery.value.trim() === '') {
-        return;
-    }
-    if(queryByResult == "result") {
-        Events.emit("SEARCH_RESULT_SENDED");
-    }
-    Events.emit("SEARCH_STARTED");
-    IORequest("/SEARCH", (data) => {
-        Events.emit("SEARCH_RESULT", {data: data, query: searchQuery.value});
-        if(queryByResult == "result") {
-        Events.emit("SEARCH_RESULT_SENDED");
-        }
-    }, searchQuery.value);
+function optionId(index) {
+    return `${listId}-opt-${index}`;
 }
 
-Events.on("VIEW_CLOSED", () => {
+// Suggestions de YouTube (JSONP : l'API ne permet pas de requête directe depuis le navigateur)
+function fetchSuggest(query) {
+    return new Promise((resolve, reject) => {
+        const callbackName = "jsonp_callback_" + Math.random().toString(36).slice(2, 9);
+        const script = document.createElement("script");
+        const cleanup = () => {
+            delete window[callbackName];
+            script.remove();
+        };
+        window[callbackName] = (data) => {
+            cleanup();
+            resolve(data);
+        };
+        script.src = `https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&q=${encodeURIComponent(query)}&callback=${callbackName}`;
+        script.onerror = () => {
+            cleanup();
+            reject(new Error("Suggestions indisponibles"));
+        };
+        document.body.appendChild(script);
+    });
+}
+
+function closeSuggestions() {
+    clearTimeout(suggestTimer);
+    suggestSeq++;
+    suggestions.value = [];
+    activeIndex.value = -1;
+}
+
+function onInput() {
+    suggestionsDismissed.value = false;
+    activeIndex.value = -1;
+    clearTimeout(suggestTimer);
+    const query = searchQuery.value.trim();
+    // Un lien ne donne pas de suggestion utile
+    if (query === '' || /^https?:\/\//i.test(query)) {
+        closeSuggestions();
+        return;
+    }
+    const seq = ++suggestSeq;
+    suggestTimer = setTimeout(async () => {
+        try {
+            const data = await fetchSuggest(query);
+            if (seq !== suggestSeq) return;
+            const list = Array.isArray(data?.[1]) ? data[1] : [];
+            suggestions.value = list
+                .map((entry) => (Array.isArray(entry) ? entry[0] : entry))
+                .filter((text) => typeof text === 'string' && text.trim() !== '')
+                .slice(0, SUGGEST_MAX);
+            activeIndex.value = -1;
+        } catch {
+            if (seq === suggestSeq) suggestions.value = [];
+        }
+    }, SUGGEST_DELAY);
+}
+
+function onKeydown(event) {
+    const count = suggestions.value.length;
+    switch (event.key) {
+        case 'ArrowDown':
+            if (count === 0) return;
+            event.preventDefault();
+            suggestionsDismissed.value = false;
+            activeIndex.value = activeIndex.value >= count - 1 ? 0 : activeIndex.value + 1;
+            break;
+        case 'ArrowUp':
+            if (count === 0) return;
+            event.preventDefault();
+            suggestionsDismissed.value = false;
+            activeIndex.value = activeIndex.value <= 0 ? count - 1 : activeIndex.value - 1;
+            break;
+        case 'Enter':
+            if (showSuggestions.value && activeIndex.value >= 0) {
+                event.preventDefault();
+                selectSuggestion(suggestions.value[activeIndex.value]);
+            }
+            // Sinon : soumission normale du formulaire
+            break;
+        case 'Escape':
+            if (showSuggestions.value) {
+                event.preventDefault();
+                suggestionsDismissed.value = true;
+                activeIndex.value = -1;
+            } else if (searchQuery.value !== '') {
+                event.preventDefault();
+                clearQuery();
+            }
+            break;
+        default:
+            break;
+    }
+}
+
+function onBlur() {
+    focused.value = false;
+    activeIndex.value = -1;
+}
+
+function submit() {
+    find();
+}
+
+function find() {
+    const query = searchQuery.value.trim();
+    if (query === '') return;
+    suggestionsDismissed.value = true;
+    activeIndex.value = -1;
+    // Sur mobile, on referme le clavier
+    if (window.innerWidth < 768) {
+        searchBar.value?.blur();
+    }
+    // Les réponses /SEARCH ne sont pas associées à leur requête : une seule recherche à la fois
+    if (searching.value) {
+        pendingQuery = query;
+        return;
+    }
+    searching.value = true;
+    liveMessage.value = `Recherche de « ${query} »…`;
+    Events.emit("SEARCH_STARTED");
+    IORequest("/SEARCH", (data) => {
+        searching.value = false;
+        Events.emit("SEARCH_RESULT", { data, query });
+        Events.emit("SEARCH_RESULT_SENDED");
+        const count = Array.isArray(data) ? data.length : (data && data.form ? 1 : 0);
+        liveMessage.value = count > 0 ? `Résultats pour « ${query} » affichés` : `Aucun résultat pour « ${query} »`;
+        if (pendingQuery !== null) {
+            const next = pendingQuery;
+            pendingQuery = null;
+            searchQuery.value = next;
+            find();
+        }
+    }, query);
+}
+
+function selectSuggestion(text) {
+    if (typeof text !== 'string' || text === '') return;
+    searchQuery.value = text;
+    closeSuggestions();
+    find();
+}
+
+function clearQuery() {
     searchQuery.value = '';
-});
+    closeSuggestions();
+    // Le bouton disparaît : le focus revient dans le champ plutôt que sur le document
+    searchBar.value?.focus();
+}
 
-Events.on("SEARCH_RESULT_SELECTED", (result) => {
+function onViewClosed() {
+    searchQuery.value = '';
+    closeSuggestions();
+}
+
+// Historique : un autre composant peut lancer une recherche
+function onResultSelected(result) {
+    if (typeof result !== 'string' || result.trim() === '') return;
     searchQuery.value = result;
-    suggestClose.value = false;
-    Events.emit("SEARCH_RESULT_SENDED");
-    find("result");
-  
+    closeSuggestions();
+    find();
+}
+
+// Accès rapide « Rechercher » de l'accueil
+function onFocusRequest() {
+    nextTick(() => {
+        const input = searchBar.value;
+        if (!input) return;
+        input.scrollIntoView({ block: 'nearest' });
+        input.focus();
+        input.select();
+    });
+}
+
+Events.on("VIEW_CLOSED", onViewClosed);
+Events.on("SEARCH_RESULT_SELECTED", onResultSelected);
+Events.on("SEARCH_FOCUS", onFocusRequest);
+
+onBeforeUnmount(() => {
+    clearTimeout(suggestTimer);
+    suggestSeq++;
+    Events.off("VIEW_CLOSED", onViewClosed);
+    Events.off("SEARCH_RESULT_SELECTED", onResultSelected);
+    Events.off("SEARCH_FOCUS", onFocusRequest);
 });
-
-
 </script>
 
 <style scoped>
 .search {
     display: flex;
     align-items: center;
-    padding: 10px;
-    gap: 5px;
+    margin: 0;
+    padding: 10px 12px;
+    gap: 10px;
     background-color: var(--main);
-    border-radius: 10px;
-    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.50);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
 }
 
-.clear-icon {
-    cursor: pointer;
-    position: absolute;
-    right: 10px;
+.search-icon {
+    width: 20px;
+    flex-shrink: 0;
+    color: var(--main-contrast);
 }
 
 .search-bar {
@@ -103,37 +312,104 @@ Events.on("SEARCH_RESULT_SELECTED", (result) => {
     flex: 1;
     display: flex;
     align-items: center;
+    min-width: 0;
 }
 
 .search input {
-    border: none;
-    outline: none;
-    background: var(--secondary);
-    color: var(--text-primary);
-    border-radius: 10px;;
     flex: 1;
-    padding: 10px 10px;
-    border-radius: 20px;
+    min-width: 0;
+    border: none;
+    background: var(--secondary);
+    color: var(--text);
+    padding: 10px 40px 10px 16px;
+    border-radius: var(--radius-pill);
+    font-size: 0.95em;
+}
+
+/* L'anneau global (fond + rose) se perdrait sur la barre rose : anneau clair à la place */
+.search input:focus {
+    box-shadow: 0 0 0 2px var(--main-contrast);
 }
 
 .search input::placeholder {
     color: var(--text-secondary);
+    opacity: .8;
 }
 
-.docs-icon {
+/* type="search" : on garde notre propre bouton d'effacement */
+.search input::-webkit-search-cancel-button,
+.search input::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.clear-button {
+    position: absolute;
+    right: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    cursor: pointer;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
+}
+
+.clear-button:hover {
+    background-color: color-mix(in srgb, var(--text) 12%, transparent);
+    color: var(--text);
+}
+
+.clear-button:focus-visible {
+    outline: 2px solid var(--main);
+    outline-offset: 0;
+}
+
+.search-spinner {
+    position: absolute;
+    right: 12px;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border: 2px solid color-mix(in srgb, var(--main) 30%, transparent);
+    border-top-color: var(--main);
+    border-radius: 50%;
+    animation: u-spin 0.7s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .search-spinner {
+        animation-duration: 1.6s !important;
+        animation-iteration-count: infinite !important;
+    }
+}
+
+.home-icon {
     display: none;
 }
 
 .search-actions {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 14px;
+    padding: 0 4px;
 }
 
 @media screen and (max-width: 768px),
        screen and (max-height: 607px) {
-    .docs-icon {
-        display: block;
+    .home-icon {
+        display: inline-flex;
+    }
+
+    .search {
+        padding: 8px 10px;
+        gap: 8px;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Layout/View.vue b/src/components/Layout/View.vue
index 1a271d0..e48ec7f 100644
--- a/src/components/Layout/View.vue
+++ b/src/components/Layout/View.vue
@@ -5,6 +5,7 @@
       @click="returnDefault()"
       v-if="!actualComponent.unclosable"
       icon="fa-solid fa-xmark"
+      label="Fermer"
       class="close"
     />
 
@@ -23,17 +24,19 @@
 <script setup>
 import Box from '../UI/Box.vue';
 import Events from '@/utils/Events';
-import { shallowRef, ref, watch, onMounted } from 'vue';
+import { shallowRef, ref, watch, onMounted, onUnmounted } from 'vue';
 
 import LoadingView from '@/components/Widget/View/LoadingView.vue';
 import SearchResults from '@/components/Widget/View/SearchResults.vue';
 import Default from '../Widget/View/Default.vue';
 import IconAction from '../UI/IconAction.vue';
 import { useGlobalStore } from '@/stores/globalStore';
+import { usePlayerStore } from '@/stores/playerStore';
 import UploadFiles from '../Widget/View/UploadFiles.vue';
 import PlaylistView from '../Widget/View/Playlist/PlaylistView.vue';
 import Advice from '../Widget/View/Home/Advice.vue';
 import History from '../Widget/View/Home/History.vue';
+import LyricsView from '../Widget/View/LyricsView.vue';
 
 const defaultComponent = {
   component: Default,
@@ -43,6 +46,7 @@ const defaultComponent = {
 };
 
 const globalStore = useGlobalStore();
+const playerStore = usePlayerStore();
 const actualComponent = shallowRef(defaultComponent);
 
 // Nouveaux états
@@ -56,6 +60,8 @@ onMounted(() => {
 watch(() => actualComponent.value, (value) => {
   Events.emit('view:change', value.component);
   globalStore.isViewShowing = !(value && value.default);
+  // Le bouton « Paroles » du player affiche l'état ouvert / fermé
+  playerStore.setLyricsOpen(value && value.component === LyricsView);
 });
 
 function returnDefault() {
@@ -73,97 +79,131 @@ function finishLoading() {
 }
 
 // === EVENTS ===
-Events.on("SEARCH_STARTED", () => {
-  setLoading("Recherche en cours");
-});
+// Gestionnaires nommés : retirés au démontage (évite les doublons si la vue est remontée sans navigation)
+const handlers = {
+  SEARCH_STARTED() {
+    setLoading("Recherche en cours");
+  },
 
-Events.on("SEARCH_RESULT", async (data) => {
-  setLoading("Chargement des résultats de recherche...");
+  async SEARCH_RESULT(data) {
+    setLoading("Chargement des résultats de recherche...");
 
-  const isPlaylist = data?.data?.form === "PLAYLIST";
-  const isOneSong = data?.data?.form === "SONG";
-  if (isOneSong) data.data = [data.data];
+    const isPlaylist = data?.data?.form === "PLAYLIST";
+    const isOneSong = data?.data?.form === "SONG";
+    if (isOneSong) data.data = [data.data];
 
-  actualComponent.value = {
-    component: SearchResults,
-    props: {
-      results: data.data,
-      playlist: isPlaylist,
-      query: data.query,
-    },
-  };
+    actualComponent.value = {
+      component: SearchResults,
+      props: {
+        results: data.data,
+        playlist: isPlaylist,
+        query: data.query,
+      },
+    };
 
-  finishLoading(); // on enlève le loader seulement une fois que le composant est prêt
-});
+    finishLoading(); // on enlève le loader seulement une fois que le composant est prêt
+  },
 
-Events.on("VIEW_INFO", () => {
-  setLoading("Chargement des informations...");
+  VIEW_INFO() {
+    setLoading("Chargement des informations...");
 
-  if (actualComponent.value.onlyMobile) {
+    if (actualComponent.value.onlyMobile) {
+      returnDefault();
+      finishLoading();
+      return;
+    }
+
+    actualComponent.value = {
+      component: Default,
+      onlyMobile: true,
+      props: {}
+    };
+
+    finishLoading();
+  },
+
+  VIEW_FILES() {
+    setLoading("Chargement des fichiers...");
+
+    actualComponent.value = {
+      component: UploadFiles,
+      props: {}
+    };
+
+    finishLoading();
+  },
+
+  VIEW_PLAYLIST(data) {
+    setLoading("Chargement de la playlist...");
+
+    actualComponent.value = {
+      component: PlaylistView,
+      props: {
+        playlist: data.playlist,
+        hasBeenActualized: data.hasBeenActualized,
+        // Portée explicite (personnel / serveur) quand l'émetteur la connaît
+        scope: data.scope,
+      },
+    };
+
+    finishLoading();
+  },
+
+  VIEW_RESET() {
     returnDefault();
     finishLoading();
-    return;
+  },
+
+  VIEW_HELP() {
+    setLoading("Chargement de l'aide...");
+
+    actualComponent.value = {
+      component: Advice,
+      props: {}
+    };
+
+    finishLoading();
+  },
+
+  VIEW_HISTORY() {
+    setLoading("Chargement de l'historique...");
+
+    actualComponent.value = {
+      component: History,
+      props: {}
+    };
+
+    finishLoading();
+  },
+
+  // Paroles : bascule ouverte / fermée ({ toggle: false } force l'ouverture).
+  // LyricsView lit le player en direct : elle suit les changements de titre sans être recréée.
+  VIEW_LYRICS(data) {
+    if (actualComponent.value.component === LyricsView) {
+      if (data && data.toggle === false) return;
+      returnDefault();
+      finishLoading();
+      return;
+    }
+
+    actualComponent.value = {
+      component: LyricsView,
+      props: {}
+    };
+
+    finishLoading();
+  },
+};
+
+for (const [name, handler] of Object.entries(handlers)) {
+  Events.on(name, handler);
+}
+
+onUnmounted(() => {
+  for (const [name, handler] of Object.entries(handlers)) {
+    Events.off(name, handler);
   }
-
-  actualComponent.value = {
-    component: Default,
-    onlyMobile: true,
-    props: {}
-  };
-
-  finishLoading();
-});
-
-Events.on("VIEW_FILES", () => {
-  setLoading("Chargement des fichiers...");
-
-  actualComponent.value = {
-    component: UploadFiles,
-    props: {}
-  };
-
-  finishLoading();
-});
-
-Events.on("VIEW_PLAYLIST", (data) => {
-  setLoading("Chargement de la playlist...");
-
-  actualComponent.value = {
-    component: PlaylistView,
-    props: {
-      playlist: data.playlist,
-      hasBeenActualized: data.hasBeenActualized,
-    },
-  };
-
-  finishLoading();
-});
-
-Events.on("VIEW_RESET", () => {
-  returnDefault();
-  finishLoading();
-});
-
-Events.on("VIEW_HELP", () => {
-  setLoading("Chargement de l'aide...");
-
-  actualComponent.value = {
-    component: Advice,
-    props: {}
-  };
-
-  finishLoading();
-});
-
-Events.on("VIEW_HISTORY", () => {
-  setLoading("Chargement de l'historique...");
-
-  actualComponent.value = {
-    component: History,
-    props: {}
-  };
-
-  finishLoading();
+  playerStore.setLyricsOpen(false);
 });
 </script>
 <style scoped>
@@ -183,7 +223,7 @@ Events.on("VIEW_HISTORY", () => {
 
 .hideOnMobile {
     display: none;
-}   
+}
 
 @media screen and (max-width: 768px),
        screen and (max-height: 607px) {
@@ -192,4 +232,4 @@ Events.on("VIEW_HISTORY", () => {
     }
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/Announcement.vue b/src/components/UI/Announcement.vue
index ab53a4f..ade51d2 100644
--- a/src/components/UI/Announcement.vue
+++ b/src/components/UI/Announcement.vue
@@ -1,14 +1,14 @@
 <template>
     <Teleport to="body">
-        <div class="announcements">
+        <div class="announcements" role="region" aria-label="Annonces" aria-live="polite">
             <TransitionGroup name="announce">
                 <div v-for="item in items" :key="item.id" :class="['announcement', item.kind]">
-                    <Icon class="announcement-icon" :icon="item.icon" :spin-pulse="item.kind === 'restart' && !item.back"/>
+                    <Icon class="announcement-icon" :icon="item.icon" :spin-pulse="item.kind === 'restart' && !item.back" aria-hidden="true"/>
                     <div class="announcement-content">
                         <p class="announcement-title">{{ item.title }}</p>
                         <p class="announcement-message">{{ item.message }}</p>
                     </div>
-                    <IconAction icon="fa-solid fa-xmark" size="1em" title="Fermer" :color="item.kind === 'restart' ? '#FFFFFF' : 'var(--text)'" @click="dismiss(item.id)"/>
+                    <IconAction icon="fa-solid fa-xmark" size="1em" label="Fermer l'annonce" :color="item.kind === 'restart' ? 'var(--main-contrast)' : 'var(--text)'" @click="dismiss(item.id)"/>
                 </div>
             </TransitionGroup>
         </div>
@@ -128,7 +128,8 @@ onUnmounted(() => {
     border-radius: 10px;
     background-color: var(--secondary);
     color: var(--text);
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border);
     border-left: 5px solid var(--main);
     pointer-events: auto;
 }
@@ -150,12 +151,12 @@ onUnmounted(() => {
 .announcement.restart {
     background: linear-gradient(90deg, var(--main-active), var(--main));
     border-left-color: var(--main-active);
-    color: #FFFFFF;
+    color: var(--main-contrast);
 }
 
 .announcement.restart .announcement-icon,
 .announcement.restart .announcement-message {
-    color: #FFFFFF;
+    color: var(--main-contrast);
 }
 
 .announcement-content {
diff --git a/src/components/UI/Avatar.vue b/src/components/UI/Avatar.vue
index 5d7dcdd..35f89e6 100644
--- a/src/components/UI/Avatar.vue
+++ b/src/components/UI/Avatar.vue
@@ -1,25 +1,37 @@
 <template>
-    <div>
-        <img :class="imgClass ? imgClass : mobile ? 'avatar-mobile' : 'img'" :style="width ? `width: ${width}; height: ${height};` : ''" :src="`https://cdn.discordapp.com/avatars/${userId}/${avatarUrl}`" alt='User Avatar'>
-        <Icon v-if="tag === 'admin'" style="color: var(--admin-color);" icon="fa-solid fa-star" class="tag" />
-        <Icon v-if="tag === 'owner'" style="color: var(--owner-color);" icon="fa-solid fa-crown" class="tag" />
-        <Icon v-if="tag === 'mod'" style="color: var(--mod-color);" icon="fa-solid fa-shield-halved" class="tag" />
+    <div class="ui-avatar">
+        <img
+            :class="imgClass ? imgClass : mobile ? 'avatar-mobile' : 'img'"
+            :style="width ? `width: ${width}; height: ${height || width};` : ''"
+            :src="source"
+            :alt="alt"
+            loading="lazy"
+            decoding="async"
+            @error="failed = true"
+        >
+        <span v-if="tag" class="tag" :title="tag.label">
+            <Icon :style="{ color: tag.color }" :icon="tag.icon" aria-hidden="true" />
+            <span class="sr-only">{{ tag.label }}</span>
+        </span>
     </div>
-
-
-
 </template>
 <script setup>
-import { computed } from 'vue';
+/**
+ * Avatar Discord rond d'un utilisateur, avec pastille de rôle (administrateur, propriétaire, modérateur).
+ * Props : userId, avatarUrl (hash Discord ; vide ou invalide → avatar par défaut), isMod / isOwner / isAdmin,
+ *         width / height (taille CSS), imgClass (classe de l'image), mobile, alt (texte alternatif ; vide par
+ *         défaut car le nom est presque toujours affiché à côté).
+ */
+import { computed, ref, watch } from 'vue';
 
 const props = defineProps({
     userId: {
         type: String,
-        required: true
+        default: null
     },
     avatarUrl: {
         type: String,
-        required: true
+        default: null
     },
     isMod: {
         type: Boolean,
@@ -48,16 +60,41 @@ const props = defineProps({
     mobile: {
         type: Boolean,
         default: false
+    },
+    alt: {
+        type: String,
+        default: ''
     }
 });
 
-const tag = computed(() => {
-    if (props.isAdmin) return 'admin';
-    if (props.isOwner) return 'owner';
-    if (props.isMod) return 'mod';
-    return '';
+const failed = ref(false);
+watch(() => [props.userId, props.avatarUrl], () => {
+    failed.value = false;
 });
 
+// Avatar par défaut de Discord : (id >> 22) % 6 (identifiant trop long pour un Number exact → BigInt)
+const fallback = computed(() => {
+    const id = String(props.userId || '');
+    let index = 0;
+    try {
+        if (/^\d+$/.test(id)) index = Number((BigInt(id) >> 22n) % 6n);
+    } catch {
+        index = 0;
+    }
+    return `https://cdn.discordapp.com/embed/avatars/${index}.png`;
+});
+
+const source = computed(() => {
+    if (failed.value || !props.userId || !props.avatarUrl || props.avatarUrl === 'null') return fallback.value;
+    return `https://cdn.discordapp.com/avatars/${props.userId}/${props.avatarUrl}`;
+});
+
+const tag = computed(() => {
+    if (props.isAdmin) return { label: 'Administrateur', icon: 'fa-solid fa-star', color: 'var(--admin-color)' };
+    if (props.isOwner) return { label: 'Propriétaire du serveur', icon: 'fa-solid fa-crown', color: 'var(--owner-color)' };
+    if (props.isMod) return { label: 'Modérateur', icon: 'fa-solid fa-shield-halved', color: 'var(--mod-color)' };
+    return null;
+});
 </script>
 <style scoped>
 .img {
@@ -70,21 +107,30 @@ const tag = computed(() => {
 
 img {
     border-radius: 100%;
+    object-fit: cover;
 }
 
-div {
+.ui-avatar {
     position: relative;
     display: inline-block;
+    flex-shrink: 0;
+    line-height: 0;
 }
 
 .tag {
     position: absolute;
-    bottom: 0;
-    right: 0;
-    font-size: 0.8em;
-    color: white;
+    bottom: -2px;
+    right: -2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
     border-radius: 50%;
-    padding: 2px 5px;
+    background-color: var(--secondary);
+    box-shadow: 0 0 0 2px var(--secondary);
+    font-size: 0.7em;
+    line-height: 1;
 }
 
 .avatar-welcome {
@@ -101,6 +147,4 @@ div {
         height: 80px !important;
     }
 }
-
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/Box.vue b/src/components/UI/Box.vue
index 262be7d..5c22cd1 100644
--- a/src/components/UI/Box.vue
+++ b/src/components/UI/Box.vue
@@ -6,11 +6,11 @@
 <style scoped>
     div {
         background-color: var(--secondary);
-        border-radius: 10px;
+        border-radius: var(--radius);
     }
 
     .box-shadow {
-        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
+        box-shadow: var(--shadow);
     }
 
 
@@ -23,13 +23,19 @@
     }
 
     .first {
-        background-color: var(--secondary);
-    }   
+        background-color: var(--surface-1);
+    }
     .second {
-        background-color: var(--tertiary);
+        background-color: var(--surface-2);
     }
 </style>
 <script setup>
+/**
+ * Panneau de fond (ancienne primitive de mise en page : en-têtes, file, vue…).
+ * Props : level ('first' = --surface-1, 'second' = --surface-2), padding ('far' 30 px, 'closed' 10 px),
+ *         boxClass (classes ajoutées), width (largeur max. ; sinon largeur naturelle), noShadow, overbox (coins bas carrés).
+ * Pour un nouveau bloc avec titre / actions, préférer Card.
+ */
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -39,7 +45,7 @@ const props = defineProps({
     },
     padding: {
         type: String,
-        
+
         default: 'far'
     },
     boxClass: {
@@ -62,10 +68,12 @@ const props = defineProps({
 
 const widthStyle = computed(() => {
     if (props.width) {
-        return `max-width: ${props.width}; width: 70%;`;
+        // Largeur max. demandée, mais jamais collée aux bords sur petit écran (avant : 70 %, trop étroit sur mobile)
+        const width = props.width.replace(/;+\s*$/, '');
+        return `max-width: ${width}; width: calc(100% - 40px); box-sizing: border-box;`;
     }
     return '';
-}); 
+});
 
 const overboxStyle = computed(() => {
     return props.overbox ? 'border-radius: 10px 10px 0 0; padding: 10px 10px 0 10px;' : '';
diff --git a/src/components/UI/Button.vue b/src/components/UI/Button.vue
index 5506a95..ee2f279 100644
--- a/src/components/UI/Button.vue
+++ b/src/components/UI/Button.vue
@@ -1,83 +1,308 @@
 <template>
-    <button :disabled="props.disabled" :class="disableClass" @click="$emit('click')">
-        <Icon v-if="props.icon" :icon="props.icon" />
+    <!-- Lien interne (vue-router) ou externe rendu avec l'apparence d'un bouton -->
+    <router-link
+        v-if="isRouterLink"
+        :to="to"
+        :class="classes"
+        :aria-busy="loading ? 'true' : undefined"
+    >
+        <span v-if="loading" class="ui-btn__spinner" aria-hidden="true"></span>
+        <Icon v-else-if="icon" class="ui-btn__icon" :icon="icon" aria-hidden="true" />
         <slot></slot>
+        <Icon v-if="iconRight" class="ui-btn__icon" :icon="iconRight" aria-hidden="true" />
+    </router-link>
+    <a
+        v-else-if="isAnchor"
+        :href="href"
+        :target="target || undefined"
+        :rel="anchorRel"
+        :class="classes"
+        :aria-busy="loading ? 'true' : undefined"
+        @click="onClick"
+    >
+        <span v-if="loading" class="ui-btn__spinner" aria-hidden="true"></span>
+        <Icon v-else-if="icon" class="ui-btn__icon" :icon="icon" aria-hidden="true" />
+        <slot></slot>
+        <Icon v-if="iconRight" class="ui-btn__icon" :icon="iconRight" aria-hidden="true" />
+    </a>
+    <button
+        v-else
+        :type="type"
+        :class="classes"
+        :disabled="disabled || loading"
+        :aria-busy="loading ? 'true' : undefined"
+        @click="onClick"
+    >
+        <span v-if="loading" class="ui-btn__spinner" aria-hidden="true"></span>
+        <Icon v-else-if="icon" class="ui-btn__icon" :icon="icon" aria-hidden="true" />
+        <slot></slot>
+        <Icon v-if="iconRight" class="ui-btn__icon" :icon="iconRight" aria-hidden="true" />
     </button>
 </template>
 <script setup>
+/**
+ * Bouton du kit UI.
+ * Props :
+ *   variant  'primary' (rose, défaut) | 'secondary' (surface) | 'ghost' (transparent) | 'danger'
+ *   size     'sm' | 'md' (défaut) | 'lg'
+ *   icon / iconRight  icône Font Awesome avant / après le texte (décorative)
+ *   loading  spinner + aria-busy, clics ignorés ; disabled ; block (pleine largeur) ; type (button par défaut)
+ *   to       route vue-router → rendu <router-link> (lien, pas de bouton imbriqué dans un lien)
+ *   href / target  lien externe → rendu <a> (rel="noopener" ajouté pour target="_blank")
+ *   colorLower  (historique) équivaut à variant="secondary"
+ * Événement : click (non émis si disabled / loading).
+ * Un lien désactivé ou en chargement est rendu comme un <button disabled> (un lien ne se désactive pas).
+ * Icône seule : utiliser plutôt IconAction (nom accessible obligatoire).
+ */
 import { computed } from 'vue';
-const events = defineEmits(['click']);
+
+const emit = defineEmits(['click']);
 const props = defineProps({
-    disabled: {
-        type: Boolean,
-        default: false
+    variant: {
+        type: String,
+        default: 'primary',
+        validator: (value) => ['primary', 'secondary', 'ghost', 'danger'].includes(value)
     },
-    colorLower: {
-        type: Boolean,
-        default: false
+    size: {
+        type: String,
+        default: 'md',
+        validator: (value) => ['sm', 'md', 'lg'].includes(value)
     },
     icon: {
         type: String,
         default: null
+    },
+    iconRight: {
+        type: String,
+        default: null
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    block: {
+        type: Boolean,
+        default: false
+    },
+    type: {
+        type: String,
+        default: 'button'
+    },
+    to: {
+        type: [String, Object],
+        default: null
+    },
+    href: {
+        type: String,
+        default: null
+    },
+    target: {
+        type: String,
+        default: null
+    },
+    colorLower: {
+        type: Boolean,
+        default: false
     }
 });
 
-const disableClass = computed(() => {
-    return props.disabled ? props.colorLower ? 'disabled color-lower' : 'disabled' : '';
+const inactive = computed(() => props.disabled || props.loading);
+const isRouterLink = computed(() => !!props.to && !inactive.value);
+const isAnchor = computed(() => !props.to && !!props.href && !inactive.value);
+const anchorRel = computed(() => (props.target === '_blank' ? 'noopener noreferrer' : undefined));
+
+const resolvedVariant = computed(() => {
+    // Ancien attribut color-lower : il ne s'appliquait qu'aux boutons désactivés (bug), il vaut désormais "secondary"
+    if (props.colorLower && props.variant === 'primary') return 'secondary';
+    return props.variant;
 });
 
+const classes = computed(() => [
+    'ui-btn',
+    `ui-btn--${resolvedVariant.value}`,
+    `ui-btn--${props.size}`,
+    {
+        'ui-btn--block': props.block,
+        'ui-btn--loading': props.loading
+    }
+]);
+
+function onClick(event) {
+    if (inactive.value) {
+        event.preventDefault();
+        return;
+    }
+    emit('click', event);
+}
 </script>
 <style scoped>
-button {
-    background-color: var(--main);
-    color: rgb(255, 255, 255);
-    border: none;
-    border-radius: 5px;
-    padding: 7px;
+/*
+ * Sélecteurs en :where(...) : spécificité minimale, pour qu'une classe posée par le parent
+ * (ex. .cancel, .add-playlist, .admin-button) garde la priorité comme avant.
+ * La couleur du texte passe par --btn-fg-current : un <a> rendu en bouton n'hérite pas des couleurs globales des liens.
+ */
+:where(.ui-btn) {
+    --btn-bg: var(--main);
+    --btn-fg: var(--main-contrast);
+    --btn-border: transparent;
+    --btn-bg-hover: var(--main-hover);
+    --btn-bg-active: var(--main-active);
+    --btn-fg-hover: var(--btn-fg);
+    --btn-fg-current: var(--btn-fg);
+
+    /* flex (et non inline-flex) comme avant : un bouton reste seul sur sa ligne dans un bloc */
     display: flex;
-    gap: 5px;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 36px;
+    padding: 0 14px;
+    box-sizing: border-box;
+    border: 1px solid var(--btn-border);
+    border-radius: var(--radius-sm);
+    background-color: var(--btn-bg);
+    color: var(--btn-fg-current);
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.2;
     text-decoration: none;
-    transition: all 0.3s ease;
-
-}
-
-button:hover {
-    background-color: var(--main-hover);
+    text-align: center;
     cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    transition:
+        background-color var(--dur-fast) ease,
+        color var(--dur-fast) ease,
+        border-color var(--dur-fast) ease,
+        box-shadow var(--dur-fast) ease,
+        transform var(--dur-fast) ease;
 }
 
-button:active {
-    background-color: var(--main-active);
+/* Les liens globaux (a, a:hover) sont plus spécifiques que :where() : on les neutralise pour les liens-boutons */
+a.ui-btn,
+a.ui-btn:hover {
+    color: var(--btn-fg-current);
+    text-decoration: none;
+}
+
+/* Variantes */
+:where(.ui-btn--secondary) {
+    --btn-bg: var(--tertiary);
+    --btn-fg: var(--text);
+    --btn-bg-hover: var(--quaternary);
+    --btn-bg-active: color-mix(in srgb, var(--quaternary) 80%, var(--primary));
+}
+
+:where(.ui-btn--ghost) {
+    --btn-bg: transparent;
+    --btn-fg: var(--text);
+    --btn-bg-hover: var(--main-soft);
+    --btn-bg-active: color-mix(in srgb, var(--main) 26%, transparent);
+}
+
+:where(.ui-btn--danger) {
+    --btn-bg: color-mix(in srgb, var(--text-error) 14%, transparent);
+    --btn-fg: var(--text-error);
+    --btn-border: color-mix(in srgb, var(--text-error) 45%, transparent);
+    --btn-bg-hover: var(--text-error);
+    --btn-bg-active: color-mix(in srgb, var(--text-error) 80%, black);
+    --btn-fg-hover: #fff;
+}
+
+/* Tailles */
+:where(.ui-btn--sm) {
+    min-height: 30px;
+    padding: 0 10px;
+    gap: 5px;
+    font-size: 0.8125rem;
+}
+
+:where(.ui-btn--lg) {
+    min-height: 44px;
+    padding: 0 18px;
+    gap: 8px;
+    font-size: 1rem;
+}
+
+:where(.ui-btn--block) {
+    width: 100%;
+}
+
+/* États */
+:where(.ui-btn:hover:not(:disabled)) {
+    background-color: var(--btn-bg-hover);
+    --btn-fg-current: var(--btn-fg-hover);
+}
+
+:where(.ui-btn:active:not(:disabled)) {
+    background-color: var(--btn-bg-active);
+    --btn-fg-current: var(--btn-fg-hover);
     transform: scale(0.98);
 }
 
-.disabled {
+/* Hors :where() : doit l'emporter sur le contour global :focus-visible (remplacé par l'anneau doublé) */
+.ui-btn:focus-visible {
+    outline-color: transparent;
+    box-shadow: var(--focus-ring);
+}
+
+:where(.ui-btn:disabled) {
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Bouton principal désactivé : gris, comme avant (plus lisible qu'un rose délavé) */
+:where(.ui-btn--primary:disabled:not(.ui-btn--loading)) {
     background-color: var(--tertiary);
-    color: var(--text-secondary);
-    cursor: not-allowed;
+    --btn-fg-current: var(--text-secondary);
 }
 
-.disabled:hover {
-    background-color: var(--tertiary) !important;
-    cursor: not-allowed;
+:where(.ui-btn--secondary:disabled, .ui-btn--ghost:disabled, .ui-btn--danger:disabled):where(:not(.ui-btn--loading)) {
+    opacity: 0.55;
 }
 
-.disabled:active {
-    background-color: var(--tertiary) !important;
-    transform: none !important  ;
+:where(.ui-btn--loading) {
+    cursor: progress;
 }
 
-.color-lower {
-    background-color: var(--secondary) !important;
+.ui-btn__icon {
+    flex-shrink: 0;
 }
 
-.color-lower:hover {
-    background-color: var(--secondary) !important;
+.ui-btn__spinner {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: u-spin 0.7s linear infinite;
 }
 
-.color-lower:active {
-    background-color: var(--secondary) !important;
+@media (prefers-reduced-motion: reduce) {
+    .ui-btn__spinner {
+        /* Le spinner reste visible mais tourne lentement : c'est une information, pas une décoration */
+        animation-duration: 1.6s !important;
+        animation-iteration-count: infinite !important;
+    }
+
+    :where(.ui-btn:active:not(:disabled)) {
+        transform: none;
+    }
 }
-</style>
\ No newline at end of file
+
+/* Mode contraste élevé : le contour transparent devient visible au focus */
+@media (forced-colors: active) {
+    .ui-btn:focus-visible {
+        outline-color: Highlight;
+    }
+}
+</style>
diff --git a/src/components/UI/Card.vue b/src/components/UI/Card.vue
new file mode 100644
index 0000000..0c2271d
--- /dev/null
+++ b/src/components/UI/Card.vue
@@ -0,0 +1,206 @@
+<template>
+    <component
+        :is="as"
+        :class="[
+            'ui-card',
+            `ui-card--${level === 'first' ? 'first' : 'second'}`,
+            `ui-card--tone-${tone}`,
+            { 'ui-card--flush': flush }
+        ]"
+    >
+        <header v-if="hasHeader" class="ui-card__header">
+            <span v-if="icon" class="ui-card__chip" aria-hidden="true"><Icon :icon="icon" /></span>
+            <div v-if="title || subtitle" class="ui-card__heading">
+                <component :is="headingTag" v-if="title" class="ui-card__title">{{ title }}</component>
+                <p v-if="subtitle" class="ui-card__subtitle">{{ subtitle }}</p>
+            </div>
+            <div v-if="$slots.actions" class="ui-card__actions">
+                <slot name="actions"></slot>
+            </div>
+        </header>
+        <div class="ui-card__body">
+            <slot></slot>
+        </div>
+        <footer v-if="$slots.footer" class="ui-card__footer">
+            <slot name="footer"></slot>
+        </footer>
+    </component>
+</template>
+<script setup>
+/**
+ * Carte générique (accueil, paroles, paramètres…).
+ * Props : title, subtitle, icon (pastille teintée), tone (default | main | success | warning | error | info),
+ *         level ('first' = fond --secondary, 'second' = --tertiary), flush (corps sans marge),
+ *         as (balise racine, 'section' par défaut), headingLevel (2 à 6, h3 par défaut).
+ * Slots : `actions` (à droite de l'en-tête), défaut (corps), `footer` (bas de carte).
+ */
+import { computed, useSlots } from 'vue';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: null
+    },
+    icon: {
+        type: String,
+        default: null
+    },
+    subtitle: {
+        type: String,
+        default: null
+    },
+    tone: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'main', 'success', 'warning', 'error', 'info'].includes(value)
+    },
+    level: {
+        type: String,
+        default: 'second',
+        validator: (value) => ['first', 'second'].includes(value)
+    },
+    flush: {
+        type: Boolean,
+        default: false
+    },
+    as: {
+        type: String,
+        default: 'section'
+    },
+    headingLevel: {
+        type: [Number, String],
+        default: 3
+    }
+});
+
+const slots = useSlots();
+const headingTag = computed(() => {
+    const level = Number(props.headingLevel);
+    return Number.isInteger(level) && level >= 2 && level <= 6 ? `h${level}` : 'h3';
+});
+const hasHeader = computed(() => !!(props.title || props.icon || props.subtitle || slots.actions));
+</script>
+<style scoped>
+.ui-card {
+    --card-tone: var(--text);
+    --card-chip-bg: color-mix(in srgb, var(--text) 10%, transparent);
+    --card-pad: 14px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+    box-sizing: border-box;
+    padding: var(--card-pad);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+}
+
+.ui-card--first {
+    background-color: var(--secondary);
+}
+
+.ui-card--second {
+    background-color: var(--tertiary);
+}
+
+/* Tons : teinte de la pastille d'icône */
+.ui-card--tone-main { --card-tone: var(--main); --card-chip-bg: var(--main-soft); }
+.ui-card--tone-success { --card-tone: var(--text-success); --card-chip-bg: color-mix(in srgb, var(--text-success) 16%, transparent); }
+.ui-card--tone-warning { --card-tone: var(--text-warning); --card-chip-bg: color-mix(in srgb, var(--text-warning) 16%, transparent); }
+.ui-card--tone-error { --card-tone: var(--text-error); --card-chip-bg: color-mix(in srgb, var(--text-error) 16%, transparent); }
+.ui-card--tone-info { --card-tone: var(--text-info); --card-chip-bg: color-mix(in srgb, var(--text-info) 16%, transparent); }
+
+.ui-card__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+
+.ui-card__chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm);
+    background-color: var(--card-chip-bg);
+    color: var(--card-tone);
+    font-size: 0.95em;
+}
+
+.ui-card__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+
+.ui-card__title {
+    margin: 0;
+    font-size: 1em;
+    font-weight: 600;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+}
+
+.ui-card__subtitle {
+    margin: 0;
+    font-size: 0.85em;
+    line-height: 1.35;
+    color: var(--text-secondary);
+}
+
+.ui-card__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+.ui-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+}
+
+.ui-card__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+}
+
+/* Corps sans marge (liste, image pleine largeur…) : en-tête et pied gardent leur marge */
+.ui-card--flush {
+    padding: 0;
+    gap: 0;
+    overflow: hidden;
+}
+
+.ui-card--flush .ui-card__header {
+    padding: var(--card-pad) var(--card-pad) 12px var(--card-pad);
+}
+
+.ui-card--flush .ui-card__footer {
+    padding: 12px var(--card-pad);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .ui-card {
+        --card-pad: 12px;
+    }
+}
+</style>
diff --git a/src/components/UI/Carousel.vue b/src/components/UI/Carousel.vue
index adb5ec7..ac8c4aa 100644
--- a/src/components/UI/Carousel.vue
+++ b/src/components/UI/Carousel.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="carousel">
         <div ref="wrapper" class="component-wrapper">
-            <IconAction v-if="!disableArrow" class="carousel-arrow" icon="fa-solid fa-arrow-left" @click="changeSlot((actualIndex - 1 + allSlots.length) % allSlots.length, 'backward')" />
+            <IconAction v-if="!disableArrow" class="carousel-arrow" icon="fa-solid fa-arrow-left" label="Page précédente" @click="changeSlot((actualIndex - 1 + allSlots.length) % allSlots.length, 'backward')" />
                 <span class="component">
                     <Transition :name="direction" appear mode="out-in" backwards>
                         <span class="component-child" v-if="actualComponent" :key="actualIndex">
@@ -10,14 +10,28 @@
                         <p v-else :key="'empty'"><Error>Aucun composant trouvé</Error></p>
                     </Transition>
                 </span>
-            <IconAction v-if="!disableArrow" class="carousel-arrow" icon="fa-solid fa-arrow-right" @click="changeSlot((actualIndex + 1) % allSlots.length, 'forward')" />
+            <IconAction v-if="!disableArrow" class="carousel-arrow" icon="fa-solid fa-arrow-right" label="Page suivante" @click="changeSlot((actualIndex + 1) % allSlots.length, 'forward')" />
         </div>
-        <div v-if="allSlots.length > 1 && ready" :class="props.onlyMobile ? 'onlymobile selector' : 'selector'">
-            <IconAction @click="() => {changeSlot(allSlots.indexOf(slot))}" :class="{'notactive': actualIndex !== allSlots.indexOf(slot), 'point': true }" v-for="slot in allSlots" :key="allSlots.indexOf(slot)" v-if="allSlots" icon="fa-solid fa-circle" />
+        <div v-if="allSlots.length > 1 && ready" :class="props.onlyMobile ? 'onlymobile selector' : 'selector'" role="group" aria-label="Pages">
+            <IconAction
+                v-for="(slot, index) in allSlots"
+                :key="index"
+                :class="{'notactive': actualIndex !== index, 'point': true }"
+                :label="pageLabel(index)"
+                :aria-current="actualIndex === index ? 'true' : undefined"
+                icon="fa-solid fa-circle"
+                @click="changeSlot(index)"
+            />
         </div>
     </div>
 </template>
 <script setup>
+/**
+ * Carrousel de composants (un enfant du slot par page), avec flèches et points de pagination.
+ * Props : disableArrow, autoPlay (inutilisé), onlyMobile (une seule page au-delà de 1280 px ; les enfants
+ *         portant la prop `mobile` ne sont gardés que sur petit écran), pageLabels (noms lus des pages).
+ * Glissement horizontal (> 40 px, plus horizontal que vertical) pour changer de page sur écran tactile.
+ */
 import { ref, useSlots, onMounted, watch, onUnmounted, nextTick } from 'vue';
 import Error from '@/components/UI/Error.vue';
 import IconAction from './IconAction.vue';
@@ -44,9 +58,18 @@ const props = defineProps({
     onlyMobile: {
         type: Boolean,
         default: false
+    },
+    pageLabels: {
+        type: Array,
+        default: () => []
     }
 });
 
+function pageLabel(index) {
+    const name = props.pageLabels[index];
+    return name ? `Afficher : ${name}` : `Afficher la page ${index + 1} sur ${allSlots.value.length}`;
+}
+
 // Detect the swipe of mobile
 
 function changeSlot(newIndex, dir) {
@@ -57,26 +80,28 @@ function changeSlot(newIndex, dir) {
     actualIndex.value = newIndex;
 }
 
+// Glissement : décidé à la fin du geste, seulement s'il est franchement horizontal
+// (avant : 5 px suffisaient, un défilement vertical un peu de travers changeait de page)
+const SWIPE_MIN = 40;
+let swipeStart = null;
+
 function handleTouchStart(ev) {
-     
     const touch = ev.touches[0];
-    const startX = touch.clientX;
+    swipeStart = touch ? { x: touch.clientX, y: touch.clientY } : null;
+}
 
-    function handleTouchMove(ev) {
-        const touch = ev.touches[0];
-        const deltaX = touch.clientX - startX;
-        if (deltaX > 5) {
-            changeSlot((actualIndex.value - 1 + allSlots.value.length) % allSlots.value.length, "backward");
-    
-        } else if (deltaX < -5) {
-            changeSlot((actualIndex.value + 1) % allSlots.value.length, "forward");
-      
-        }
-
-        wrapper.value.removeEventListener('touchmove', handleTouchMove, false);
+function handleTouchEnd(ev) {
+    if (!swipeStart || allSlots.value.length < 2) return;
+    const touch = ev.changedTouches[0];
+    const deltaX = touch.clientX - swipeStart.x;
+    const deltaY = touch.clientY - swipeStart.y;
+    swipeStart = null;
+    if (Math.abs(deltaX) < SWIPE_MIN || Math.abs(deltaX) < Math.abs(deltaY) * 1.5) return;
+    if (deltaX > 0) {
+        changeSlot((actualIndex.value - 1 + allSlots.value.length) % allSlots.value.length, "backward");
+    } else {
+        changeSlot((actualIndex.value + 1) % allSlots.value.length, "forward");
     }
-
-    wrapper.value.addEventListener('touchmove', handleTouchMove, false);
 }
 
 watch(() => actualIndex.value, (newIndex) => {
@@ -110,15 +135,20 @@ onMounted(() => {
            updateSlots();
        });
    }, 10);
-   wrapper.value.addEventListener('touchstart', handleTouchStart, false);
+   wrapper.value.addEventListener('touchstart', handleTouchStart, { passive: true });
+   wrapper.value.addEventListener('touchend', handleTouchEnd, { passive: true });
+   window.addEventListener('resize', onResize);
 })
 
 
-window.addEventListener('resize', () => {
+function onResize() {
     nextTick(() => {
         updateSlots();
     });
-  
+}
+
+onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
 });
 
 function updateSlots() {
diff --git a/src/components/UI/Circle.vue b/src/components/UI/Circle.vue
index b7ac395..54cd780 100644
--- a/src/components/UI/Circle.vue
+++ b/src/components/UI/Circle.vue
@@ -1,16 +1,24 @@
 <template>
-    <div><slot></slot></div>
-
+    <div class="ui-circle"><slot></slot></div>
 </template>
+<script setup>
+/**
+ * Pastille ronde de 50 px (ex. « +3 » à la suite d'une pile d'avatars). Slot par défaut : le contenu.
+ */
+</script>
 <style scoped>
-    div {
+    .ui-circle {
        border-radius: 100%;
        background-color: var(--secondary);
+       color: var(--text);
        width: 50px;
        height: 50px;
        display: flex;
+       flex-shrink: 0;
        align-items: center;
        justify-content: center;
+       font-size: 0.8rem;
+       font-weight: 600;
+       font-variant-numeric: tabular-nums;
     }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/ContextMenu.vue b/src/components/UI/ContextMenu.vue
index 8cda9c6..b9c379e 100644
--- a/src/components/UI/ContextMenu.vue
+++ b/src/components/UI/ContextMenu.vue
@@ -1,113 +1,365 @@
 <template>
-    <div ref="contextMenu" class="contextmenu">
-        <slot></slot>
-    </div>
+    <Teleport to="body">
+        <div
+            ref="contextMenu"
+            class="contextmenu ui-menu"
+            role="menu"
+            :aria-label="label"
+            tabindex="-1"
+            @click.capture="onItemClickCapture"
+            @click="onItemClick"
+            @keydown="onKeydown"
+            @mouseleave="onMouseLeave"
+            @contextmenu.prevent
+        >
+            <slot></slot>
+        </div>
+    </Teleport>
 </template>
 <script setup>
-import { onMounted, ref } from 'vue';
+/**
+ * Menu contextuel flottant (role="menu"), téléporté dans <body>.
+ * Slot par défaut : les entrées, de préférence des <button type="button"> (les <div @click> historiques
+ * restent gérés : rôle menuitem et activation Entrée / Espace ajoutés automatiquement).
+ * Props : label (nom accessible du menu, « Actions » par défaut).
+ * Méthodes exposées :
+ *   show(eventOrElement?)  ouvre le menu : sous le pointeur pour un vrai clic, sous l'élément déclencheur
+ *                          pour un clic clavier (event.detail === 0) ou un élément passé directement ;
+ *                          sans argument, à la dernière position de la souris. Le focus va sur la 1re entrée.
+ *   hide()                 ferme le menu et rend le focus au déclencheur.
+ *   isOpen                 état (ref).
+ * Clavier : flèches haut/bas, Début/Fin, Échap (ferme), Tab (ferme). Fermeture aussi au clic extérieur,
+ * au défilement, au redimensionnement et quand la souris quitte un menu ouvert à la souris.
+ * Événements : open, close.
+ */
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 import useMouse from '@/utils/Mouse';
 
-const contextMenu = ref(null);
-const mouse = useMouse();
-
-onMounted(() => {
-
-    contextMenu.value.addEventListener('rightclick', (e) => {
-        e.preventDefault(); // Prevent default context menu
-    });
-
-    contextMenu.value.addEventListener('click', () => {
-        contextMenu.value.style.display = 'none'; // Hide context menu on click
-    });
-
-    contextMenu.value.addEventListener('mouseleave', () => {
-        contextMenu.value.style.display = 'none'; // Hide context menu on mouse leave
-    });
-
+defineProps({
+    label: {
+        type: String,
+        default: 'Actions'
+    }
 });
 
- function show() {
-  const menu = contextMenu.value
-  const { x, y } = mouse.value
+const emit = defineEmits(['open', 'close']);
 
-  // Affiche temporairement pour mesurer
-  menu.style.display = 'flex'
-  menu.style.left = '0px'
-  menu.style.top = '0px'
+const contextMenu = ref(null);
+const isOpen = ref(false);
+const mouse = useMouse();
 
-  // Force le DOM à calculer les dimensions
-  const menuRect = menu.getBoundingClientRect()
-  const windowWidth = window.innerWidth
-  const windowHeight = window.innerHeight
+let opener = null;
+let openedWithPointer = false;
+let focusHandled = false;
 
-  let left = x
-  let top = y 
+const MARGIN = 8;
 
-  // Ajuste si dépasse à droite
-  if (x + menuRect.width > windowWidth) {
-    left = windowWidth - menuRect.width
-  } else {
-    left = x - 5
-  }
-
-  // Ajuste si dépasse en bas
-  if (y + menuRect.height > windowHeight) {
-    top = windowHeight - menuRect.height
-  } else {
-    top = y - 5
-  }
-
-  // Applique la position corrigée
-  menu.style.left = `${Math.max(left, 0)}px`
-  menu.style.top = `${Math.max(top, 0)}px`
+function items() {
+    if (!contextMenu.value) return [];
+    return Array.from(contextMenu.value.children)
+        .filter((element) => element instanceof HTMLElement && element.tagName !== 'HR'
+            && element.getClientRects().length > 0 && !element.hasAttribute('disabled'));
 }
 
+// Les entrées historiques (<div @click>) deviennent des menuitem focalisables
+function prepareItems() {
+    if (!contextMenu.value) return;
+    for (const element of contextMenu.value.children) {
+        if (!(element instanceof HTMLElement)) continue;
+        if (element.tagName === 'HR') {
+            element.setAttribute('role', 'separator');
+            continue;
+        }
+        if (!element.hasAttribute('role')) element.setAttribute('role', 'menuitem');
+        element.setAttribute('tabindex', '-1');
+    }
+}
+
+function anchorRect(arg) {
+    if (arg instanceof Element) return arg.getBoundingClientRect();
+    const target = arg && typeof arg === 'object' && arg.currentTarget instanceof Element ? arg.currentTarget : null;
+    if (target) return target.getBoundingClientRect();
+    if (document.activeElement instanceof Element && document.activeElement !== document.body) {
+        return document.activeElement.getBoundingClientRect();
+    }
+    return null;
+}
+
+function show(arg) {
+    const menu = contextMenu.value;
+    if (!menu) return;
+
+    // Lu tout de suite : currentTarget n'existe que pendant la propagation de l'événement
+    const event = arg && typeof arg === 'object' && 'clientX' in arg ? arg : null;
+    const fromPointer = event ? event.detail > 0 || event.clientX !== 0 || event.clientY !== 0 : !(arg instanceof Element) && mouse.value.x + mouse.value.y > 0;
+    const point = event ? { x: event.clientX, y: event.clientY } : { x: mouse.value.x, y: mouse.value.y };
+
+    opener = (arg && arg.currentTarget instanceof HTMLElement && arg.currentTarget)
+        || (arg instanceof HTMLElement && arg)
+        || (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+    openedWithPointer = fromPointer && !(arg instanceof Element);
+    const anchor = openedWithPointer ? null : anchorRect(arg);
+
+    isOpen.value = true;
+    addGlobalListeners();
+    // Après le rendu : les entrées conditionnelles (v-if) dépendent souvent de l'élément visé
+    nextTick(() => {
+        if (!isOpen.value) return;
+        prepareItems();
+        // Mesure : le menu doit être affiché avant de calculer sa taille
+        menu.style.display = 'flex';
+        menu.style.left = '0px';
+        menu.style.top = '0px';
+        const rect = menu.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        let left;
+        let top;
+        if (openedWithPointer) {
+            left = point.x - 5;
+            top = point.y - 5;
+        } else {
+            left = anchor ? anchor.right - rect.width : MARGIN;
+            top = anchor ? anchor.bottom + 4 : MARGIN;
+            // Pas la place en dessous : au-dessus du déclencheur
+            if (anchor && top + rect.height > vh - MARGIN) top = anchor.top - rect.height - 4;
+        }
+        left = Math.min(Math.max(left, MARGIN), vw - rect.width - MARGIN);
+        top = Math.min(Math.max(top, MARGIN), vh - rect.height - MARGIN);
+        menu.style.left = `${Math.max(left, 0)}px`;
+        menu.style.top = `${Math.max(top, 0)}px`;
+
+        const first = items()[0];
+        (first || menu).focus({ preventScroll: true });
+        emit('open');
+    });
+}
+
+function hide({ restoreFocus = true } = {}) {
+    if (!isOpen.value) return;
+    const menu = contextMenu.value;
+    const focusInside = menu && menu.contains(document.activeElement);
+    isOpen.value = false;
+    if (menu) menu.style.display = '';
+    removeGlobalListeners();
+    if (restoreFocus && focusInside && opener && opener.isConnected) opener.focus({ preventScroll: true });
+    opener = null;
+    emit('close');
+}
+
+function focusItem(index) {
+    const list = items();
+    if (list.length === 0) return;
+    const target = list[(index + list.length) % list.length];
+    target.focus({ preventScroll: true });
+}
+
+function onKeydown(event) {
+    const list = items();
+    const current = list.indexOf(document.activeElement);
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            focusItem(current + 1);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            focusItem(current === -1 ? -1 : current - 1);
+            break;
+        case 'Home':
+            event.preventDefault();
+            focusItem(0);
+            break;
+        case 'End':
+            event.preventDefault();
+            focusItem(-1);
+            break;
+        case 'Escape':
+            event.preventDefault();
+            event.stopPropagation();
+            hide();
+            break;
+        case 'Tab':
+            event.preventDefault();
+            hide();
+            break;
+        case 'Enter':
+        case ' ': {
+            // Les <button> s'activent seuls ; les anciennes entrées <div> sont cliquées ici
+            const target = event.target;
+            if (target instanceof HTMLElement && list.includes(target) && !['BUTTON', 'A'].includes(target.tagName)) {
+                event.preventDefault();
+                target.click();
+            }
+            break;
+        }
+        default:
+            break;
+    }
+}
+
+function isItemEvent(event) {
+    const menu = contextMenu.value;
+    if (!menu || !(event.target instanceof Element)) return false;
+    const item = event.target.closest('.ui-menu > *');
+    return !!item && item.parentElement === menu;
+}
+
+// Avant l'action de l'entrée : le focus revient au déclencheur, pour qu'une modale ouverte par l'entrée
+// le mémorise (et le rende à sa fermeture) au lieu d'une entrée de menu masquée
+function onItemClickCapture(event) {
+    focusHandled = false;
+    if (!isItemEvent(event)) return;
+    if (opener && opener.isConnected) {
+        opener.focus({ preventScroll: true });
+        focusHandled = true;
+    }
+}
+
+function onItemClick(event) {
+    if (!isItemEvent(event)) return;
+    hide({ restoreFocus: !focusHandled });
+    focusHandled = false;
+}
+
+function onMouseLeave() {
+    if (openedWithPointer) hide({ restoreFocus: false });
+}
+
+function onDocumentPointerDown(event) {
+    if (contextMenu.value && !contextMenu.value.contains(event.target)) hide({ restoreFocus: false });
+}
+
+function onScroll(event) {
+    if (contextMenu.value && event.target instanceof Node && contextMenu.value.contains(event.target)) return;
+    hide({ restoreFocus: false });
+}
+
+function onResize() {
+    hide({ restoreFocus: false });
+}
+
+function addGlobalListeners() {
+    document.addEventListener('pointerdown', onDocumentPointerDown, true);
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onResize);
+}
+
+function removeGlobalListeners() {
+    document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    window.removeEventListener('scroll', onScroll, true);
+    window.removeEventListener('resize', onResize);
+}
+
+onMounted(prepareItems);
+
+onBeforeUnmount(() => {
+    removeGlobalListeners();
+});
+
 defineExpose({
-    show
-})
-
+    show,
+    hide,
+    isOpen
+});
 </script>
-<style scoped> 
-    .contextmenu {
-        position: fixed;
-        display: none;
-        flex-direction: column;
-        gap: 0px;
-        z-index: 1000;
-        border-radius: 10px;
-    }
+<!-- Non scopé : les entrées viennent du slot du parent (classes propres au composant, préfixe ui-menu) -->
+<style>
+.ui-menu {
+    position: fixed;
+    display: none;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 200px;
+    max-width: min(320px, calc(100vw - 16px));
+    padding: 4px;
+    box-sizing: border-box;
+    z-index: 4000;
+    background-color: var(--secondary);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    animation: u-fade-in var(--dur-fast) ease-out;
+}
 
-    :deep(div) {
-        background-color: var(--primary);
-        opacity: 0.9;
-        width: 100%;
-        gap: 10px;;
-        display: flex;
-        align-items: center;
-        justify-content: start;
-        padding: 0 7px;
-        font-size: 12px;
-        transition: all 0.2s ease-in-out;
-    }
+.ui-menu:focus {
+    outline: none;
+}
 
-    :deep(div:first-child) {
-        border-radius: 5px 5px 0px 0px;
-    }
+.ui-menu > * {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    width: 100%;
+    min-height: 34px;
+    margin: 0;
+    padding: 6px 10px;
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    text-align: left;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
+}
 
-    :deep(div:last-child) {
-        border-radius: 0px 0px 5px 5px;
-    }
+.ui-menu > * p {
+    margin: 0;
+}
 
-    :deep(div:only-child) {
-        border-radius: 5px;
-    }
+.ui-menu > * svg {
+    width: 1.1em;
+    flex-shrink: 0;
+    color: var(--text-secondary);
+}
 
-    :deep(div:hover) {
-        background-color: var(--primary-hover);
-        color: var(--text-inverse);
-        cursor: pointer;
-    }
+.ui-menu > *:hover,
+.ui-menu > *:focus-visible,
+.ui-menu > *:focus {
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+}
 
+.ui-menu > *:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--main);
+}
 
+.ui-menu > *:hover svg,
+.ui-menu > *:focus svg {
+    color: var(--text);
+}
 
-</style>
\ No newline at end of file
+/* Entrée destructive : <button class="ui-menu__danger"> */
+.ui-menu > .ui-menu__danger,
+.ui-menu > .ui-menu__danger svg {
+    color: var(--text-error);
+}
+
+.ui-menu > .ui-menu__danger:hover,
+.ui-menu > .ui-menu__danger:focus {
+    background-color: color-mix(in srgb, var(--text-error) 14%, transparent);
+}
+
+.ui-menu > [disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.ui-menu > hr {
+    min-height: 0;
+    height: 1px;
+    margin: 3px 4px;
+    padding: 0;
+    width: auto;
+    background-color: var(--border);
+    cursor: default;
+}
+</style>
diff --git a/src/components/UI/CustomIcon.vue b/src/components/UI/CustomIcon.vue
index 4c32192..4004082 100644
--- a/src/components/UI/CustomIcon.vue
+++ b/src/components/UI/CustomIcon.vue
@@ -1,31 +1,91 @@
 <template>
-    <div class="icon-action">
-        <span class="icon"><slot></slot></span>
-        <span v-if="active" class="active-indicator"></span>
-    </div>
+    <button
+        type="button"
+        :class="['icon-action', { 'icon-action--active': active }]"
+        :disabled="disabled"
+        :aria-label="accessibleName()"
+        :title="accessibleName()"
+    >
+        <span class="icon" aria-hidden="true"><slot></slot></span>
+        <span v-if="active" class="active-indicator" aria-hidden="true"></span>
+    </button>
 </template>
 <script setup>
+/**
+ * Bouton icône dont l'icône est fournie en slot (SVG maison du player…).
+ * `label` donne le nom accessible ; un attribut `title` est repris à défaut.
+ */
+import { useAttrs } from 'vue';
+
 const props = defineProps({
+    label: {
+        type: String,
+        default: null
+    },
     active: {
         type: Boolean,
         default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
     }
 });
+
+// useAttrs() n'est pas réactif : relu à chaque rendu
+const attrs = useAttrs();
+
+function accessibleName() {
+    return props.label || attrs.title || attrs['aria-label'] || undefined;
+}
 </script>
 
 <style scoped>
-.icon {
-    font-size: 1.3em;
-    transition: filter 0.3s ease;
-}
-
-.fixed {
-    font-size: 1.3em;
-    transition: filter 0.3s ease;
-}
-
-.icon-action {
+/* Spécificité minimale (button / button:where) : les classes du parent restent prioritaires */
+button {
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-sizing: content-box;
+    padding: 0.3em;
+    margin: -0.3em;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    outline: 2px solid transparent;
+    outline-offset: 1px;
+    transition: background-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
+}
+
+.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3em;
+}
+
+button:where(:hover:not(:disabled)) {
+    background-color: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+button:where(:active:not(:disabled)) {
+    background-color: color-mix(in srgb, currentColor 22%, transparent);
+}
+
+button:where(:focus-visible) {
+    outline-color: currentColor;
+}
+
+button:where(:disabled) {
+    opacity: 0.4;
+    cursor: not-allowed;
 }
 
 .active-indicator {
@@ -33,19 +93,9 @@ const props = defineProps({
     border-radius: 100%;
     width: 4px;
     height: 4px;
-    bottom: -15%;
+    bottom: 0;
     left: 50%;
     transform: translate(-50%, 0);
-    background: var(--text);
+    background: currentColor;
 }
-
-.icon:hover {
-   cursor: pointer;
-   filter: brightness(0.8);
-} 
-
-.icon:active {
-   cursor: pointer;
-   filter: brightness(0.7);
-} 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/DefaultSplash.vue b/src/components/UI/DefaultSplash.vue
index 95d1354..e28e153 100644
--- a/src/components/UI/DefaultSplash.vue
+++ b/src/components/UI/DefaultSplash.vue
@@ -7,6 +7,10 @@
     </Splash>
 </template>
 <script setup>
+/**
+ * Écran plein (fond rose animé) avec une boîte centrée : connexion, erreurs, chargement…
+ * Props : gap (espacement vertical du contenu), width (largeur max. de la boîte). Slot par défaut : le contenu.
+ */
 import Splash from '@/components/UI/Splash.vue';
 import Box from '@/components/UI/Box.vue';
 
diff --git a/src/components/UI/DurationBar.vue b/src/components/UI/DurationBar.vue
index 58dcceb..9242501 100644
--- a/src/components/UI/DurationBar.vue
+++ b/src/components/UI/DurationBar.vue
@@ -1,31 +1,56 @@
 <template>
-  <div v-if="!showLoader" class="duration-bar">
-    <p v-if="!inactive">{{ getVideoDuration(displaySec) }}</p>
+  <!-- Une seule racine : la barre (et son focus clavier) survit au passage en chargement pendant un seek -->
+  <div class="duration-bar">
+    <p v-if="showLoader" :class="{'offline': !showLoaderTime}">{{ showLoaderTime ? getVideoDuration(displaySec) : '-:--' }}</p>
+    <p v-else-if="!inactive">{{ getVideoDuration(displaySec) }}</p>
     <p class="offline" v-else>-:--</p>
-    <div ref="progressBar" :class="{'progress-bar': true, 'progress-bar-mobile': mobile, 'progress-bar-locked': !canSeek}" @mousemove="hoverSeek" @mouseleave="hoverPercent = null" @pointerdown="startDrag">
-      <span class="progress" :style="{ width: percent + '%' }"></span>
-      <span class="progress-hover" v-if="hoverPercent !== null" :style="{ width: hoverPercent + '%' }"></span>
-      <span :class="{ 'progress-selector': true, 'progress-selector-active': canSeek }" :style="{ left: percent + '%' }"></span>
+    <div
+      ref="progressBar"
+      :class="{'progress-bar': true, 'progress-bar-mobile': mobile, 'progress-bar-locked': !canSeek, 'progress-bar-loading': showLoader}"
+      role="slider"
+      :tabindex="inactive || isLive ? -1 : 0"
+      aria-label="Position de lecture"
+      aria-valuemin="0"
+      :aria-valuemax="durationSec"
+      :aria-valuenow="Math.min(displaySec, durationSec)"
+      :aria-valuetext="valueText"
+      :aria-disabled="canSeek ? undefined : 'true'"
+      :aria-busy="showLoader ? 'true' : undefined"
+      @mousemove="hoverSeek"
+      @mouseleave="hoverPercent = null"
+      @pointerdown="startDrag"
+      @keydown="onKeydown"
+      @blur="flushKeySeek"
+    >
+      <!-- Chargement (morceau ou seek) : position cible figée + loader -->
+      <span v-if="showLoader" class="multi-loader" aria-hidden="true">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </span>
+      <template v-else>
+        <span class="progress" :style="{ width: percent + '%' }"></span>
+        <span class="progress-hover" v-if="hoverPercent !== null" :style="{ width: hoverPercent + '%' }"></span>
+        <span :class="{ 'progress-selector': true, 'progress-selector-active': canSeek }" :style="{ left: percent + '%' }"></span>
+      </template>
     </div>
-    <p v-if="!inactive && isLive"><Icon color="var(--text-error)" icon="fa-circle"/> LIVE</p>
+    <p v-if="showLoader" :class="{'offline': !durationSec}">{{ durationSec ? getVideoDuration(durationSec) : '-:--' }}</p>
+    <p v-else-if="!inactive && isLive" class="live"><Icon color="var(--text-error)" icon="fa-circle" aria-hidden="true"/> LIVE</p>
     <p v-else-if="!inactive">{{ getVideoDuration(durationSec) }}</p>
     <p class="offline" v-else>-:--</p>
   </div>
-  <div v-else class="duration-bar">
-    <!-- Chargement (morceau ou seek) : position cible figée + loader -->
-    <p :class="{'offline': !showLoaderTime}">{{ showLoaderTime ? getVideoDuration(displaySec) : '-:--' }}</p>
-    <div class="multi-loader">
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-    <p :class="{'offline': !durationSec}">{{ durationSec ? getVideoDuration(durationSec) : '-:--' }}</p>
-  </div>
 </template>
 
 <script setup>
+/**
+ * Barre de progression du player (lecture seule hors seek).
+ * Props : positionMs, durationMs (null = direct), status ('offline' | 'idle' | 'loading' | …), seekable, mobile,
+ *         revision (compteur d'états du store), onSeek (listener @seek : renvoie une Promise, false = refusé).
+ * Accessibilité : role="slider" ; flèches ±5 s, Page préc./suiv. ±30 s, Début / Fin. Les appuis clavier
+ * sont regroupés (un seul seek envoyé 600 ms après la dernière touche, ou à la perte du focus).
+ */
 import { getVideoDuration } from "@/utils/TimeConverter"
 import { ref, shallowRef, computed, watch, onBeforeUnmount } from "vue"
 
@@ -61,8 +86,14 @@ const isLive = computed(() => !props.durationMs)
 const canSeek = computed(() => !inactive.value && !isLive.value && props.seekable && props.status !== 'loading' && !pendingSeek.value)
 const showLoader = computed(() => !inactive.value && (props.status === 'loading' || !!pendingSeek.value))
 
+// Position choisie au clavier, pas encore envoyée (null hors réglage clavier)
+const keyMs = ref(null)
+let keyTimer = null
+const KEY_SEEK_DELAY = 600
+
 const displayMs = computed(() => {
   if (isDragging.value) return dragMs.value
+  if (keyMs.value !== null) return keyMs.value
   if (pendingSeek.value) return pendingSeek.value.ms
   return props.positionMs
 })
@@ -95,6 +126,60 @@ function hoverSeek(e) {
   e.currentTarget.title = getVideoDuration(Math.floor(pos * props.durationMs / 1000))
 }
 
+const valueText = computed(() => {
+  if (inactive.value) return "Aucune lecture"
+  if (showLoader.value) return "Chargement…"
+  if (isLive.value) return "Direct"
+  return `${getVideoDuration(displaySec.value)} sur ${getVideoDuration(durationSec.value)}`
+})
+
+// === CLAVIER ===
+function onKeydown(e) {
+  if (!canSeek.value && keyMs.value === null) return
+  if (!props.durationMs) return
+  const base = keyMs.value !== null ? keyMs.value : displayMs.value
+  const max = Math.max(0, props.durationMs - 1000)
+  let target = null
+  switch (e.key) {
+    case 'ArrowRight':
+    case 'ArrowUp':
+      target = base + 5000
+      break
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      target = base - 5000
+      break
+    case 'PageUp':
+      target = base + 30000
+      break
+    case 'PageDown':
+      target = base - 30000
+      break
+    case 'Home':
+      target = 0
+      break
+    case 'End':
+      target = max
+      break
+    default:
+      return
+  }
+  e.preventDefault()
+  keyMs.value = Math.max(0, Math.min(max, target))
+  clearTimeout(keyTimer)
+  keyTimer = setTimeout(flushKeySeek, KEY_SEEK_DELAY)
+}
+
+function flushKeySeek() {
+  clearTimeout(keyTimer)
+  keyTimer = null
+  if (keyMs.value === null) return
+  const ms = Math.floor(keyMs.value / 1000) * 1000
+  keyMs.value = null
+  if (!canSeek.value) return
+  requestSeek(ms)
+}
+
 // === DRAG LOGIC === (un clic simple = pointerdown + pointerup, un seul seek émis)
 function startDrag(e) {
   if (!canSeek.value) return
@@ -170,6 +255,8 @@ watch(() => props.revision, () => {
 
 watch(inactive, (value) => {
   if (value) {
+    clearTimeout(keyTimer)
+    keyMs.value = null
     cancelDrag()
     clearPendingSeek()
   }
@@ -178,6 +265,7 @@ watch(inactive, (value) => {
 onBeforeUnmount(() => {
   removeDragListeners()
   clearTimeout(pendingTimer)
+  clearTimeout(keyTimer)
 })
 
 </script>
@@ -192,7 +280,27 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-family: monospace;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.duration-bar p {
+  white-space: nowrap;
+}
+
+.live {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.progress-bar:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.progress-bar:focus-visible .progress-selector-active {
+  display: block;
 }
 
 .progress-bar {
@@ -259,16 +367,19 @@ onBeforeUnmount(() => {
   transition: left 0.1s ease;
   border-radius: 3px;
 }
-.multi-loader {
-  position: relative;
-  width: 100%;
-  flex: 1;
-   height: 6px;
-   background: var(--tertiary);
-  border-radius: 4px;
+.progress-bar-loading {
+  cursor: progress;
   overflow: hidden;
 }
 
+.multi-loader {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  border-radius: 3px;
+}
+
 .multi-loader span {
   position: absolute;
   top: 0;
@@ -279,11 +390,6 @@ onBeforeUnmount(() => {
  animation: move 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-  .multi-loader {
-      background: var(--quaternary);
-  }
-}
 
 .multi-loader span:nth-child(1) { animation-delay: 0s; }
 .multi-loader span:nth-child(2) { animation-delay: 0.3s; }
@@ -299,4 +405,15 @@ onBeforeUnmount(() => {
   90%  { left: 100%; width: 10px; opacity: 0; }
   100% { left: 100%; width: 0px; opacity: 0; }
 }
+
+/* Mouvement réduit : pas de segments animés, la barre se teinte pendant le chargement */
+@media (prefers-reduced-motion: reduce) {
+  .multi-loader span {
+    display: none;
+  }
+
+  .progress-bar-loading {
+    background: color-mix(in srgb, var(--main) 35%, var(--tertiary));
+  }
+}
 </style>
diff --git a/src/components/UI/EmptyState.vue b/src/components/UI/EmptyState.vue
new file mode 100644
index 0000000..9b14440
--- /dev/null
+++ b/src/components/UI/EmptyState.vue
@@ -0,0 +1,96 @@
+<template>
+    <div :class="['ui-empty', { 'ui-empty--compact': compact }]">
+        <span v-if="icon" class="ui-empty__icon" aria-hidden="true"><Icon :icon="icon" /></span>
+        <p v-if="title" class="ui-empty__title">{{ title }}</p>
+        <div v-if="$slots.default" class="ui-empty__text">
+            <slot></slot>
+        </div>
+        <div v-if="$slots.actions" class="ui-empty__actions">
+            <slot name="actions"></slot>
+        </div>
+    </div>
+</template>
+<script setup>
+/**
+ * État vide / message d'absence de contenu, centré et discret.
+ * Props : icon (Font Awesome, pastille ronde), title, compact (version resserrée pour les panneaux étroits).
+ * Slot par défaut : description ; slot `actions` : boutons d'action.
+ * Pour une erreur annoncée, envelopper dans un conteneur role="alert" (ou utiliser Error).
+ */
+defineProps({
+    icon: {
+        type: String,
+        default: 'fa-solid fa-inbox'
+    },
+    title: {
+        type: String,
+        default: null
+    },
+    compact: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+<style scoped>
+.ui-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 28px 16px;
+    text-align: center;
+    color: var(--text-secondary);
+    min-width: 0;
+}
+
+.ui-empty__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    margin-bottom: 4px;
+    border-radius: 50%;
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+    color: var(--text-secondary);
+    font-size: 1.5em;
+}
+
+.ui-empty__title {
+    margin: 0;
+    font-size: 1em;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.ui-empty__text {
+    max-width: 42ch;
+    font-size: 0.875em;
+    line-height: 1.45;
+}
+
+.ui-empty__text :slotted(p) {
+    margin: 0;
+}
+
+.ui-empty__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.ui-empty--compact {
+    gap: 6px;
+    padding: 16px 12px;
+}
+
+.ui-empty--compact .ui-empty__icon {
+    width: 40px;
+    height: 40px;
+    font-size: 1.1em;
+}
+</style>
diff --git a/src/components/UI/Error.vue b/src/components/UI/Error.vue
index 18c1cdf..8439e74 100644
--- a/src/components/UI/Error.vue
+++ b/src/components/UI/Error.vue
@@ -1,30 +1,32 @@
 <template>
-    <div>
-     <Icon icon="fa-solid fa-circle-exclamation"></Icon>
-     <div class="error-message">
-        <slot></slot>
-     </div>
-   
+    <div class="feedback" role="alert">
+        <Icon class="feedback-icon" icon="fa-solid fa-circle-exclamation" aria-hidden="true"></Icon>
+        <div class="error-message">
+            <slot></slot>
+        </div>
     </div>
-  
 </template>
+<script setup>
+/**
+ * Message d'erreur en rouge (role="alert" : annoncé immédiatement). Slot par défaut : le message.
+ */
+</script>
 <style scoped>
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+/* Spécificité de « div » (comme avant) : une classe posée par le parent reste prioritaire */
+div:where(.feedback) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-error);
+    animation: u-fade-in 0.5s ease-in-out;
 }
 
-    div {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        color: var(--text-error);
-        animation: fadeIn 0.5s ease-in-out;
-    }
+.feedback-icon {
+    flex-shrink: 0;
+}
 
-    .error-message {
-        display: flex;
-        text-align: justify;
-    }
+.error-message {
+    display: flex;
+    text-align: justify;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/UI/Field.vue b/src/components/UI/Field.vue
new file mode 100644
index 0000000..213f4e0
--- /dev/null
+++ b/src/components/UI/Field.vue
@@ -0,0 +1,125 @@
+<template>
+    <div :class="['ui-field', { 'ui-field--error': !!error }]">
+        <div v-if="label || $slots.aside" class="ui-field__top">
+            <label v-if="label" :for="controlId" class="ui-field__label">
+                {{ label }}<span v-if="required" class="ui-field__required" aria-hidden="true"> *</span>
+                <span v-if="required" class="sr-only"> (obligatoire)</span>
+            </label>
+            <span v-if="$slots.aside" class="ui-field__aside"><slot name="aside"></slot></span>
+        </div>
+        <slot :id="controlId" :describedby="describedBy" :invalid="!!error"></slot>
+        <p v-if="hint" :id="hintId" class="ui-field__hint">{{ hint }}</p>
+        <p v-if="error" :id="errorId" class="ui-field__error" role="alert">
+            <Icon icon="fa-solid fa-circle-exclamation" aria-hidden="true" />
+            <span>{{ error }}</span>
+        </p>
+    </div>
+</template>
+<script setup>
+/**
+ * Enveloppe de champ de formulaire : libellé, aide, erreur.
+ * Le contrôle est placé dans le slot par défaut, qui reçoit { id, describedby, invalid } :
+ *   <Field label="Nom" for="pl-name" hint="100 caractères max." :error="err" v-slot="{ id, describedby, invalid }">
+ *       <input type="text" :id="id" :aria-describedby="describedby" :aria-invalid="invalid" v-model="name"/>
+ *   </Field>
+ * Slot `aside` : élément aligné à droite du libellé (compteur, lien…).
+ */
+import { computed, useId } from 'vue';
+
+const props = defineProps({
+    label: {
+        type: String,
+        default: null
+    },
+    hint: {
+        type: String,
+        default: null
+    },
+    error: {
+        type: String,
+        default: null
+    },
+    for: {
+        type: String,
+        default: null
+    },
+    required: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const generatedId = `field-${useId()}`;
+const controlId = computed(() => props.for || generatedId);
+const hintId = computed(() => `${controlId.value}-hint`);
+const errorId = computed(() => `${controlId.value}-error`);
+
+// Valeur à poser sur aria-describedby du contrôle
+const describedBy = computed(() => {
+    const ids = [];
+    if (props.hint) ids.push(hintId.value);
+    if (props.error) ids.push(errorId.value);
+    return ids.length ? ids.join(' ') : undefined;
+});
+</script>
+<style scoped>
+.ui-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+}
+
+.ui-field__top {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.ui-field__label {
+    font-size: 0.9em;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.ui-field__required {
+    color: var(--main);
+}
+
+.ui-field__aside {
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+.ui-field__hint {
+    margin: 0;
+    font-size: 0.8em;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.ui-field__error {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.85em;
+    line-height: 1.4;
+    color: var(--text-error);
+}
+
+/* Contrôle en erreur : liseré rouge (input / select / textarea posés directement dans le slot) */
+.ui-field--error :slotted(input),
+.ui-field--error :slotted(select),
+.ui-field--error :slotted(textarea) {
+    box-shadow: 0 0 0 1px var(--text-error);
+}
+
+.ui-field--error :slotted(input:focus),
+.ui-field--error :slotted(select:focus),
+.ui-field--error :slotted(textarea:focus) {
+    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px var(--text-error);
+}
+</style>
diff --git a/src/components/UI/Glider.vue b/src/components/UI/Glider.vue
index 7b4c419..ccbb6cb 100644
--- a/src/components/UI/Glider.vue
+++ b/src/components/UI/Glider.vue
@@ -1,11 +1,27 @@
 <script setup>
-import { ref, useSlots, computed } from 'vue';
+/**
+ * Onglets en pilule (v-model = index de l'onglet). Chaque enfant du slot par défaut est un onglet.
+ * Props : label (aria-label du tablist), idPrefix (facultatif) : onglet i = `${idPrefix}-tab-${i}`,
+ *         relié par aria-controls au panneau `${idPrefix}-panel-${i}` que le parent doit porter
+ *         (role="tabpanel" + aria-labelledby="${idPrefix}-tab-${i}").
+ * Slot `tab-content` ({ tab, index }) : contenu personnalisé d'un onglet.
+ * Accessibilité : role="tablist" / role="tab", aria-selected, tabindex itinérant,
+ * flèches gauche/droite + Début/Fin pour naviguer au clavier.
+ */
+import { ref, useSlots, computed, nextTick } from 'vue';
 
-// on définit une prop spéciale pour le v-model
 const props = defineProps({
   modelValue: {
     type: Number,
     default: 0
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  idPrefix: {
+    type: String,
+    default: null
   }
 });
 
@@ -14,28 +30,57 @@ const emit = defineEmits(['update:modelValue']);
 const slots = useSlots();
 const tabs = computed(() => slots.default?.() || []);
 const hoveredTab = ref(null);
+// Tableau simple (non réactif) : seulement utilisé pour déplacer le focus
+const tabRefs = [];
 
 const selectedTab = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val)
 });
 
+// Onglet posé sur l'indicateur (survolé, sinon sélectionné) : texte contrasté sur le rose
+const litIndex = computed(() => (hoveredTab.value !== null ? hoveredTab.value : selectedTab.value));
+
 const setSelectedTab = (index) => {
   selectedTab.value = index;
 };
+
+function onKeydown(event, index) {
+  const count = tabs.value.length;
+  if (count === 0) return;
+  let target = null;
+  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') target = (index + 1) % count;
+  else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') target = (index - 1 + count) % count;
+  else if (event.key === 'Home') target = 0;
+  else if (event.key === 'End') target = count - 1;
+  if (target === null) return;
+  event.preventDefault();
+  setSelectedTab(target);
+  nextTick(() => tabRefs[target]?.focus());
+}
 </script>
 
 <template>
   <div
     class="glider-container"
+    role="tablist"
+    :aria-label="label || undefined"
     @mouseleave="hoveredTab = null"
   >
     <button
       v-for="(tab, index) in tabs"
       :key="index"
+      :ref="(el) => { tabRefs[index] = el }"
+      type="button"
+      role="tab"
+      :id="idPrefix ? `${idPrefix}-tab-${index}` : undefined"
+      :aria-controls="idPrefix ? `${idPrefix}-panel-${index}` : undefined"
+      :aria-selected="selectedTab === index ? 'true' : 'false'"
+      :tabindex="selectedTab === index ? 0 : -1"
       @click="setSelectedTab(index)"
+      @keydown="onKeydown($event, index)"
       @mouseenter="hoveredTab = index"
-      :class="['glider-tab', { 'glider-tab--selected': selectedTab === index }]"
+      :class="['glider-tab', { 'glider-tab--selected': selectedTab === index, 'glider-tab--lit': litIndex === index }]"
     >
       <slot name="tab-content" :tab="tab" :index="index">
         {{ tab.children }}
@@ -43,8 +88,9 @@ const setSelectedTab = (index) => {
     </button>
     <div
       class="glider-indicator"
+      aria-hidden="true"
       :style="{
-        left: `${(hoveredTab !== null ? hoveredTab : selectedTab) * (100 / tabs.length)}%`,
+        left: `${litIndex * (100 / tabs.length)}%`,
         width: `${100 / tabs.length}%`
       }"
     ></div>
@@ -57,26 +103,40 @@ const setSelectedTab = (index) => {
   display: flex;
   position: relative;
   background-color: var(--quaternary);
-  border-radius: 20px;
+  border-radius: var(--radius-pill);
   overflow: hidden;
 }
 
 .glider-tab {
   flex: 1;
-  padding: 6px 0;
+  min-width: 0;
+  padding: 6px 4px;
   position: relative;
   z-index: 99;
   background-color: transparent;
   border: 0;
-  outline: none;
+  border-radius: var(--radius-pill);
   color: var(--text);
   cursor: pointer;
+  font-family: inherit;
   font-weight: 500;
-  transition: color 0.2s ease-out;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  transition: color var(--dur-fast) ease-out;
+}
+
+/* Anneau intérieur (le conteneur coupe ce qui déborde) */
+.glider-tab:focus-visible {
+  outline: 2px solid var(--text);
+  outline-offset: -3px;
+}
+
+.glider-tab--lit {
+  color: var(--main-contrast) !important;
 }
 
 .glider-tab--selected {
-  color: #FFFFFF !important;
+  font-weight: 600;
 }
 
 .glider-indicator {
@@ -84,7 +144,7 @@ const setSelectedTab = (index) => {
   height: 100%;
   background: var(--main);
   z-index: 9;
-  border-radius: 20px;
-  transition: left 0.2s ease-out, width 0.2s ease-out;
+  border-radius: var(--radius-pill);
+  transition: left 0.2s var(--ease), width 0.2s var(--ease);
 }
 </style>
diff --git a/src/components/UI/IconAction.vue b/src/components/UI/IconAction.vue
index 18cbaa5..adf4aca 100644
--- a/src/components/UI/IconAction.vue
+++ b/src/components/UI/IconAction.vue
@@ -1,18 +1,45 @@
 <template>
-    <div class="icon-action">
-        <Icon :style="{'font-size': size ? size : ''}" :color="color" :class="!fixed ? 'icon' : 'fixed'" :icon="icon" />
-        <span v-if="active" :style="{'background': color}" class="active-indicator"></span>
-    </div>
+    <!-- Sans action ni nom accessible, l'icône est purement décorative (chevron d'un parent cliquable…) -->
+    <span v-if="isDecorative()" class="icon-action icon-action--decorative" :style="colorStyle" aria-hidden="true">
+        <Icon :style="iconStyle" class="icon-action__icon" :icon="icon" />
+    </span>
+    <button
+        v-else
+        type="button"
+        :class="['icon-action', { 'icon-action--fixed': fixed, 'icon-action--active': active }]"
+        :style="colorStyle"
+        :disabled="disabled"
+        :aria-label="accessibleName()"
+        :title="accessibleName()"
+    >
+        <Icon :style="iconStyle" class="icon-action__icon" :icon="icon" />
+        <span v-if="active" class="active-indicator" aria-hidden="true"></span>
+    </button>
 </template>
 <script setup>
+/**
+ * Bouton icône (sans texte visible).
+ * Props : icon, label, color (couleur de l'icône), size (taille CSS de l'icône), active (point sous l'icône),
+ *         fixed (pas de fond au survol), disabled.
+ * `label` donne le nom accessible (aria-label + infobulle) ; un attribut `title` est repris à défaut.
+ * Bascule : passer aussi :aria-pressed="état ? 'true' : 'false'" (transmis au bouton).
+ * Sans @click ni nom accessible, l'icône est rendue décorative (<span aria-hidden>).
+ * Les écouteurs (@click, @click.stop…) et classes du parent sont transmis au <button>.
+ */
+import { computed, useAttrs } from 'vue';
+
 const props = defineProps({
     icon: {
         type: String,
         required: true
     },
+    label: {
+        type: String,
+        default: null
+    },
     color: {
         type: String,
-        default: 'var(--text)'
+        default: null
     },
     fixed: {
         type: Boolean,
@@ -25,23 +52,83 @@ const props = defineProps({
     active: {
         type: Boolean,
         default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
     }
 });
 
+// useAttrs() n'est pas réactif : on relit les attributs à chaque rendu (fonctions plutôt que computed)
+const attrs = useAttrs();
+
+function accessibleName() {
+    return props.label || attrs.title || attrs['aria-label'] || undefined;
+}
+
+function isDecorative() {
+    return !attrs.onClick && !accessibleName();
+}
+
+const colorStyle = computed(() => (props.color ? { '--icon-action-color': props.color } : null));
+const iconStyle = computed(() => (props.size ? { 'font-size': props.size } : null));
 </script>
 <style scoped>
-.icon {
-    font-size: 1.3em;
-    transition: filter 0.3s ease;
-}
-
-.fixed {
-    font-size: 1.3em;
-    transition: filter 0.3s ease;
-}
-
-.icon-action {
+/*
+ * Styles de base en button:where(...) / span:where(...) : spécificité minimale,
+ * pour que les classes des parents (positionnement absolu, display, couleur…) restent prioritaires.
+ */
+button {
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-sizing: content-box;
+    /* Zone cliquable élargie sans décaler la mise en page existante */
+    padding: 0.3em;
+    margin: -0.3em;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--icon-action-color, var(--text));
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    outline: 2px solid transparent;
+    outline-offset: 1px;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
+}
+
+span:where(.icon-action--decorative) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-action-color, inherit);
+    line-height: 1;
+}
+
+.icon-action__icon {
+    font-size: 1.3em;
+}
+
+button:where(:hover:not(:disabled):not(.icon-action--fixed)) {
+    background-color: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+button:where(:active:not(:disabled):not(.icon-action--fixed)) {
+    background-color: color-mix(in srgb, currentColor 22%, transparent);
+}
+
+/* Contour de la couleur de l'icône : reste visible même sur la barre de recherche rose */
+button:where(:focus-visible) {
+    outline-color: currentColor;
+}
+
+button:where(:disabled) {
+    opacity: 0.4;
+    cursor: not-allowed;
 }
 
 .active-indicator {
@@ -49,13 +136,9 @@ const props = defineProps({
     border-radius: 100%;
     width: 4px;
     height: 4px;
-    bottom: -30%;
+    bottom: -0.1em;
     left: 50%;
     transform: translate(-50%, 0);
+    background: currentColor;
 }
-
-.icon:hover {
-   cursor: pointer;
-   filter: brightness(0.8);
-} 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/Info.vue b/src/components/UI/Info.vue
index a1441b0..4280355 100644
--- a/src/components/UI/Info.vue
+++ b/src/components/UI/Info.vue
@@ -1,14 +1,17 @@
 <template>
-    <div :class="{ second: secondary }">
-     <Icon icon="fa-solid fa-circle-info"></Icon>
-     <div class="info-message">
-        <slot></slot>
-     </div>
-   
+    <div :class="['feedback', { second: secondary }]" role="status">
+        <Icon class="feedback-icon" icon="fa-solid fa-circle-info" aria-hidden="true"></Icon>
+        <div class="info-message">
+            <slot></slot>
+        </div>
     </div>
-  
 </template>
 <script setup>
+/**
+ * Message d'information (icône « i »), role="status" : annoncé s'il apparaît après coup.
+ * Prop : secondary (petit texte gris). Slot par défaut : le message.
+ * Voir aussi Error (role="alert") et Success (role="status").
+ */
 defineProps({
     secondary: {
         type: Boolean,
@@ -17,26 +20,25 @@ defineProps({
 })
 </script>
 <style scoped>
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+/* Spécificité de « div » (comme avant) : une classe posée par le parent reste prioritaire */
+div:where(.feedback) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    animation: u-fade-in 0.5s ease-in-out;
 }
 
-    div {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        animation: fadeIn 0.5s ease-in-out;
-    }
+.feedback-icon {
+    flex-shrink: 0;
+}
 
-    .info-message {
-        display: flex;
-        text-align: justify;
-    }
+.info-message {
+    display: flex;
+    text-align: justify;
+}
 
-    .second {
-        color: var(--text-secondary) !important;
-        font-size: 12px;
-    }
+.second {
+    color: var(--text-secondary) !important;
+    font-size: 12px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/UI/ListenBox.vue b/src/components/UI/ListenBox.vue
index 289b9d6..294a0ab 100644
--- a/src/components/UI/ListenBox.vue
+++ b/src/components/UI/ListenBox.vue
@@ -1,24 +1,49 @@
 <template>
-    <div class="listen-box">
-        <Icon font-size="12px" class="listen-icon" icon="fa-solid fa-user" />
-        <p><slot></slot></p>
+    <div class="listen-box" :title="title">
+        <Icon class="listen-icon" icon="fa-solid fa-user" aria-hidden="true" />
+        <p><slot></slot><span class="sr-only"> {{ srSuffix }}</span></p>
     </div>
 </template>
+<script setup>
+/**
+ * Pastille rose avec un compteur d'utilisateurs (slot par défaut : le nombre).
+ * Props : title (infobulle), srSuffix (texte lu après le nombre, « connectés » par défaut).
+ */
+defineProps({
+    title: {
+        type: String,
+        default: 'Utilisateurs connectés'
+    },
+    srSuffix: {
+        type: String,
+        default: 'utilisateurs connectés'
+    }
+});
+</script>
 <style scoped>
     .listen-box {
-        color: white;
-        background-color: var(--main);
-        padding: 4px 8px;
-        display: flex;
+        display: inline-flex;
         align-items: center;
         justify-content: center;
-        border-radius: 4px;
         gap: 5px;
+        min-height: 24px;
+        padding: 0 8px;
+        box-sizing: border-box;
+        border-radius: var(--radius-pill);
+        background-color: var(--main);
+        color: var(--main-contrast);
+        font-size: 0.8rem;
+        font-weight: 600;
     }
-    
+
+    .listen-icon {
+        font-size: 0.75em;
+    }
+
     p {
         margin: 0;
-        width: 9px;
-        height: 16px;
+        min-width: 1ch;
+        text-align: center;
+        font-variant-numeric: tabular-nums;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/Logo.vue b/src/components/UI/Logo.vue
index b5d8c15..163b57e 100644
--- a/src/components/UI/Logo.vue
+++ b/src/components/UI/Logo.vue
@@ -1,10 +1,13 @@
 <template>
     <div>
-        <LogoDark class="img" v-if="globalStore.theme == 'light'"/>
-        <LogoLight class="img" v-else/>
+        <LogoDark class="img" v-if="globalStore.theme == 'light'" aria-hidden="true" focusable="false"/>
+        <LogoLight class="img" v-else aria-hidden="true" focusable="false"/>
     </div>
 </template>
 <script setup>
+/**
+ * Logo Subsonics seul (décoratif), adapté au thème clair / sombre.
+ */
 import LogoDark from '@/assets/LogoDark.vue';
 import LogoLight from '@/assets/LogoLight.vue';
 import { useGlobalStore } from '@/stores/globalStore';
diff --git a/src/components/UI/Marquee.vue b/src/components/UI/Marquee.vue
index 10e4558..b91dd9a 100644
--- a/src/components/UI/Marquee.vue
+++ b/src/components/UI/Marquee.vue
@@ -1,10 +1,11 @@
 <template>
-  <div ref="container" class="marquee-container">
-    <div ref="scroller" class="marquee-scroller" :style="scrollerStyle">
+  <div ref="container" :class="['marquee-container', { 'marquee-container--static': reducedMotion }]">
+    <div class="marquee-scroller" :style="scrollerStyle">
       <div ref="content" class="marquee-content">
         <slot></slot>
       </div>
-      <div v-if="shouldScroll" class="marquee-content">
+      <!-- Copie visuelle pour la boucle : ignorée par les lecteurs d'écran -->
+      <div v-if="shouldScroll" class="marquee-content" aria-hidden="true">
         <slot></slot>
       </div>
     </div>
@@ -12,101 +13,115 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
+/**
+ * Texte défilant quand il dépasse de son conteneur (titres longs).
+ * Props : speed (px/s, 50), delay (ms, 3000 : pause avant chaque passage).
+ * Slot par défaut : le contenu (une ligne). Mouvement réduit : pas de défilement, texte tronqué avec « … ».
+ */
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 
 const props = defineProps({
-  speed: { type: Number, default: 50 }, // px/s
-  delay: { type: Number, default: 3000 }, // délai initial et pause entre chaque loop
+  speed: { type: Number, default: 50 },
+  delay: { type: Number, default: 3000 },
 });
 
 const container = ref(null);
 const content = ref(null);
-const scroller = ref(null);
 const distance = ref(0);
 const shouldScroll = ref(false);
 const scrollerStyle = ref({ transform: "translateX(0)" });
 
+const motionQuery = typeof window !== "undefined" && window.matchMedia
+  ? window.matchMedia("(prefers-reduced-motion: reduce)")
+  : null;
+const reducedMotion = ref(!!motionQuery?.matches);
+
 let resizeObserver = null;
 let mutationObserver = null;
-let animationTimeout = null;
+// Un seul minuteur à la fois : pause, puis passage, puis pause…
+let timer = null;
 
-watch(shouldScroll, (newValue) => {
-  if (newValue) {
-    startAnimation();
-  } else {
-    stopAnimation()
-  }
-});
-
-function recalc() {
-  if (!container.value || !content.value) return;
-
-  const containerWidth = container.value.offsetWidth;
-  const contentWidth = content.value.scrollWidth;
-
-  if (contentWidth > containerWidth) {
-    distance.value = contentWidth;
-    shouldScroll.value = true;
-    startAnimation();
-  } else {
-    shouldScroll.value = false;
-    scrollerStyle.value.transform = "translateX(0)";
-  }
+function resetPosition() {
+  scrollerStyle.value = { transition: "none", transform: "translateX(0)" };
 }
 
-function startAnimation() {
-  if (!shouldScroll.value) return;
-  const duration = distance.value / props.speed * 1000; // ms
+function stop() {
+  clearTimeout(timer);
+  timer = null;
+  resetPosition();
+}
 
-  scrollerStyle.value.transition = "none";
-  scrollerStyle.value.transform = "translateX(0)";
-
-  // petite pause avant le début
-  setTimeout(() => {
-     if (!shouldScroll.value) return;
-    scrollerStyle.value.transition = `transform ${duration}ms linear`;
-    scrollerStyle.value.transform = `translateX(-${distance.value}px)`;
-
-    // après la fin, rappeler la fonction avec pause de 5s
-    animationTimeout = setTimeout(() => {
-      startAnimation();
-    }, duration + props.delay);
+function cycle() {
+  clearTimeout(timer);
+  resetPosition();
+  timer = setTimeout(() => {
+    if (!shouldScroll.value) return;
+    const duration = (distance.value / props.speed) * 1000;
+    scrollerStyle.value = {
+      transition: `transform ${duration}ms linear`,
+      transform: `translateX(-${distance.value}px)`,
+    };
+    // Fin du passage : la copie occupe exactement la place de l'original, le retour à 0 est invisible
+    timer = setTimeout(cycle, duration);
   }, props.delay);
 }
 
-function stopAnimation() {
-  if (animationTimeout) {
-    clearTimeout(animationTimeout);
-    animationTimeout = null;
-    recalc()
-    scrollerStyle.value.transition = "none";
-    scrollerStyle.value.transform = "translateX(0)";
+function recalc() {
+  if (!container.value || !content.value) return;
+  const element = content.value;
+  const padding = parseFloat(getComputedStyle(element).paddingRight) || 0;
+  const overflow = !reducedMotion.value && element.offsetWidth - padding > container.value.clientWidth + 1;
+  const nextDistance = element.offsetWidth;
+
+  if (!overflow) {
+    if (shouldScroll.value) {
+      shouldScroll.value = false;
+      stop();
+    }
+    return;
+  }
+  // Redémarre seulement si quelque chose a changé (le ResizeObserver se déclenche souvent)
+  if (!shouldScroll.value || nextDistance !== distance.value) {
+    distance.value = nextDistance;
+    shouldScroll.value = true;
+    cycle();
   }
 }
 
+function onMotionChange(event) {
+  reducedMotion.value = event.matches;
+  if (event.matches) {
+    shouldScroll.value = false;
+    stop();
+  }
+  nextTick(recalc);
+}
+
 onMounted(() => {
-    recalc();
+  recalc();
 
-    // observer taille
-    resizeObserver = new ResizeObserver(() => recalc());
-    resizeObserver.observe(container.value);
-    resizeObserver.observe(content.value);
+  resizeObserver = new ResizeObserver(() => recalc());
+  resizeObserver.observe(container.value);
+  resizeObserver.observe(content.value);
 
-    // observer slot
-    mutationObserver = new MutationObserver(() => {
-      nextTick(() => recalc());
-    });
-    mutationObserver.observe(content.value, {
-      childList: true,
-      characterData: true,
-      subtree: true,
-    });
+  // Le contenu du slot change (nouveau titre)
+  mutationObserver = new MutationObserver(() => {
+    nextTick(() => recalc());
+  });
+  mutationObserver.observe(content.value, {
+    childList: true,
+    characterData: true,
+    subtree: true,
   });
 
+  motionQuery?.addEventListener?.("change", onMotionChange);
+});
+
 onBeforeUnmount(() => {
-  if (resizeObserver) resizeObserver.disconnect();
-  if (mutationObserver) mutationObserver.disconnect();
-  clearTimeout(animationTimeout);
+  resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
+  motionQuery?.removeEventListener?.("change", onMotionChange);
+  clearTimeout(timer);
 });
 </script>
 
@@ -115,6 +130,7 @@ onBeforeUnmount(() => {
   overflow: hidden;
   position: relative;
   width: 100%;
+  min-width: 0;
 }
 
 .marquee-scroller {
@@ -126,4 +142,19 @@ onBeforeUnmount(() => {
   flex-shrink: 0;
   padding-right: 2rem;
 }
+
+/* Mouvement réduit : une ligne tronquée */
+.marquee-container--static .marquee-content {
+  flex-shrink: 1;
+  min-width: 0;
+  padding-right: 0;
+  overflow: hidden;
+}
+
+.marquee-container--static :deep(.marquee-content > *) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
diff --git a/src/components/UI/Metric.vue b/src/components/UI/Metric.vue
index f0c4a83..0c57705 100644
--- a/src/components/UI/Metric.vue
+++ b/src/components/UI/Metric.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="metric">
             <div class="metric-header">
-                <Icon class="metric-icon" :icon="getIcons(metricName)" />
+                <Icon class="metric-icon" :icon="getIcons(metricName)" aria-hidden="true" />
                 <div class="metric-info">
                     <p class="metric-name">{{ label }}</p>
                     <p class="metric-id">{{ metricName }}</p>
@@ -12,6 +12,10 @@
 </div>
 </template>
 <script setup>
+/**
+ * Tuile d'une statistique de serveur (icône, libellé, valeur formatée en durée ou en nombre).
+ * Props : metric ({ name, description, value }), server ({ id, name } : retirés du libellé).
+ */
 import { computed } from 'vue';
 import { formatStatDuration, formatStatCount } from '@/utils/TimeConverter';
 
diff --git a/src/components/UI/Modal.vue b/src/components/UI/Modal.vue
index 4b88bbc..0506188 100644
--- a/src/components/UI/Modal.vue
+++ b/src/components/UI/Modal.vue
@@ -1,147 +1,437 @@
 <template>
     <Teleport to="body">
-    <div ref="modal" class="modal-overlay">
-        <div ref="modalContent" class="modal">
-            <div class="modal-header">
-                <div class="modal-title">
-                    <Icon font-size="1.5em" v-if="icon" :icon="icon" />
-                    <p>{{ title }}</p>
+        <Transition name="modal">
+            <div
+                v-show="isOpen"
+                ref="overlay"
+                class="modal-overlay"
+                :style="{ zIndex }"
+                @pointerdown="onOverlayPointerDown"
+                @click="onOverlayClick"
+            >
+                <div
+                    ref="panel"
+                    :class="['modal', `modal--${size}`]"
+                    role="dialog"
+                    aria-modal="true"
+                    :aria-labelledby="title ? titleId : undefined"
+                    :aria-label="title ? undefined : 'Boîte de dialogue'"
+                    tabindex="-1"
+                >
+                    <header class="modal-header">
+                        <div class="modal-title">
+                            <span v-if="icon" class="modal-title-icon" aria-hidden="true"><Icon :icon="icon" /></span>
+                            <h2 v-if="title" :id="titleId" class="modal-title-text">{{ title }}</h2>
+                        </div>
+                        <div class="modal-header-actions">
+                            <slot name="header-actions"></slot>
+                            <IconAction v-if="closable" class="modal-close" label="Fermer" icon="fa-solid fa-xmark" @click="close()" />
+                        </div>
+                    </header>
+                    <div class="modal-content">
+                        <slot></slot>
+                    </div>
+                    <footer v-if="$slots.footer" class="modal-footer">
+                        <slot name="footer"></slot>
+                    </footer>
                 </div>
-                <IconAction @click="close()" icon="fa-solid fa-xmark" />
             </div>
-            <div class="modal-content">
-                <slot></slot>
-            </div>
-        </div>
-    </div>
+        </Transition>
     </Teleport>
 </template>
-<script setup>
+<script>
+// État partagé par toutes les modales : pile des modales ouvertes (Échap / Tab ne concernent que
+// la plus haute) et verrouillage du défilement de la page tant qu'au moins une est ouverte.
+const openStack = [];
+let savedBodyOverflow = null;
 
-import IconAction from '../UI/IconAction.vue';
-import { onMounted, onUnmounted, ref } from 'vue';
-import Events from '@/utils/Events';
-
-const modal = ref(null);
-const modalContent = ref(null);
-
-// Close the modal when clicking outside of it
-
-onMounted(() => {
-    document.addEventListener('pointerdown', handleClickOutside);
-});
-
-onUnmounted(() => {
-    document.removeEventListener('pointerdown', handleClickOutside);
-});
-
-// Only clicking modal-overlay but not modal-content will close the modal
-function handleClickOutside(event) {
-    if (event.pointerType === "mouse" && event.target === modal.value && modalContent.value && !modalContent.value.contains(event.target)) {
-        close();
+function lockBody() {
+    if (savedBodyOverflow === null) {
+        savedBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
     }
 }
 
+function unlockBody() {
+    if (openStack.length === 0 && savedBodyOverflow !== null) {
+        document.body.style.overflow = savedBodyOverflow;
+        savedBodyOverflow = null;
+    }
+}
+
+const FOCUSABLE = [
+    'a[href]', 'area[href]', 'button:not([disabled])', 'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])', 'textarea:not([disabled])', '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]', 'audio[controls]', 'video[controls]', 'summary'
+].join(',');
+</script>
+<script setup>
+/**
+ * Fenêtre modale accessible (role="dialog", focus piégé, Échap, retour du focus au déclencheur).
+ * Props : title, icon, size ('sm' 420 | 'md' 600 | 'lg' 820 | 'xl' 1100 px), closable (croix, Échap, clic sur le fond).
+ * Slots : défaut (contenu défilant), `footer` (barre d'actions en bas), `header-actions` (à gauche de la croix).
+ * Exposé : open(), close(), isOpen. Un élément [data-autofocus] / [autofocus] du contenu reçoit le focus à l'ouverture.
+ * - Événements Vue `open` / `close` (à préférer) + événements globaux historiques `modal:open` / `modal:close`.
+ * - Le contenu reste monté quand la modale est fermée (v-show), comme avant.
+ * - Le contenu peut réagir à SA modale via utils/ModalContext.js (onModalOpen / onModalClose).
+ */
+import { nextTick, onBeforeUnmount, provide, readonly, ref, useId } from 'vue';
+import IconAction from './IconAction.vue';
+import Events from '@/utils/Events';
+import { MODAL_CONTEXT } from '@/utils/ModalContext';
+
 const props = defineProps({
     title: {
         type: String,
-        default: 'Modal Title'
+        default: ''
     },
     icon: {
         type: String,
         default: null
+    },
+    size: {
+        type: String,
+        default: 'md',
+        validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
+    },
+    closable: {
+        type: Boolean,
+        default: true
     }
-    
-})  
+});
 
-function close() {
-    if (modal.value) {
-        modal.value.style.display = 'none';
+const emit = defineEmits(['open', 'close']);
+
+const titleId = `modal-title-${useId()}`;
+const overlay = ref(null);
+const panel = ref(null);
+const isOpen = ref(false);
+const zIndex = ref(3500);
+
+// Objet propre à cette instance, utilisé comme identifiant dans la pile
+const token = {};
+const subscribers = { open: new Set(), close: new Set() };
+let previousFocus = null;
+let pointerDownOnOverlay = false;
+
+function notify(kind) {
+    for (const callback of [...subscribers[kind]]) {
+        try {
+            callback();
+        } catch (error) {
+            console.error(`[Modal] Erreur dans un écouteur "${kind}"`, error);
+        }
     }
-    Events.emit('modal:close');
 }
 
 function open() {
-    if (modal.value) {
-        modal.value.style.display = 'flex';
-    }
+    if (isOpen.value) return;
+    previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    openStack.push(token);
+    zIndex.value = 3500 + openStack.length;
+    lockBody();
+    document.addEventListener('keydown', onKeydown);
+    isOpen.value = true;
+
+    emit('open');
+    notify('open');
     Events.emit('modal:open');
+
+    nextTick(focusInitial);
 }
 
+function close() {
+    if (!isOpen.value) return;
+    teardown();
+    isOpen.value = false;
+
+    emit('close');
+    notify('close');
+    Events.emit('modal:close');
+
+    restoreFocus();
+}
+
+// Retire la modale de la pile et libère les écouteurs (fermeture ou démontage)
+function teardown() {
+    const index = openStack.indexOf(token);
+    if (index !== -1) openStack.splice(index, 1);
+    document.removeEventListener('keydown', onKeydown);
+    unlockBody();
+}
+
+function restoreFocus() {
+    const target = previousFocus;
+    previousFocus = null;
+    if (target && target.isConnected && typeof target.focus === 'function') {
+        target.focus({ preventScroll: true });
+    }
+}
+
+function isTopmost() {
+    return openStack[openStack.length - 1] === token;
+}
+
+function focusableElements() {
+    if (!panel.value) return [];
+    return Array.from(panel.value.querySelectorAll(FOCUSABLE))
+        .filter((element) => element.getClientRects().length > 0 && !element.closest('[inert]'));
+}
+
+function focusInitial() {
+    if (!isOpen.value || !panel.value) return;
+    // Un champ marqué autofocus / data-autofocus est prioritaire ; sinon le dialogue lui-même
+    // (le lecteur d'écran annonce alors son titre, sans faire sauter le clavier mobile).
+    const preferred = panel.value.querySelector('[data-autofocus], [autofocus]');
+    if (preferred && typeof preferred.focus === 'function') {
+        preferred.focus({ preventScroll: true });
+    } else {
+        panel.value.focus({ preventScroll: true });
+    }
+}
+
+function onKeydown(event) {
+    if (!isOpen.value || !isTopmost() || event.defaultPrevented || event.isComposing) return;
+
+    if (event.key === 'Escape') {
+        if (!props.closable) return;
+        event.preventDefault();
+        close();
+        return;
+    }
+
+    if (event.key === 'Tab') {
+        trapTab(event);
+    }
+}
+
+function trapTab(event) {
+    const elements = focusableElements();
+    const active = document.activeElement;
+    if (elements.length === 0) {
+        event.preventDefault();
+        panel.value?.focus({ preventScroll: true });
+        return;
+    }
+    const first = elements[0];
+    const last = elements[elements.length - 1];
+    const inside = panel.value.contains(active);
+
+    if (event.shiftKey) {
+        if (!inside || active === first || active === panel.value) {
+            event.preventDefault();
+            last.focus();
+        }
+    } else if (!inside || active === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}
+
+// Ferme seulement si le clic commence ET finit sur le fond (pas après une sélection de texte qui déborde)
+function onOverlayPointerDown(event) {
+    pointerDownOnOverlay = event.target === overlay.value;
+}
+
+function onOverlayClick(event) {
+    const fromOverlay = pointerDownOnOverlay && event.target === overlay.value;
+    pointerDownOnOverlay = false;
+    if (fromOverlay && props.closable) close();
+}
+
+function subscribe(kind, callback) {
+    subscribers[kind]?.add(callback);
+    return () => subscribers[kind]?.delete(callback);
+}
+
+provide(MODAL_CONTEXT, {
+    isOpen: readonly(isOpen),
+    open,
+    close,
+    subscribe
+});
+
+onBeforeUnmount(() => {
+    if (isOpen.value) {
+        teardown();
+        isOpen.value = false;
+        restoreFocus();
+    }
+    subscribers.open.clear();
+    subscribers.close.clear();
+});
+
 defineExpose({
     open,
-    close
+    close,
+    isOpen
 });
-
 </script>
 <style scoped>
-
-.modal-content {
-    padding: 0 20px 20px 20px;
-    color: var(--text-primary);
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    max-height: 75vh;
-    gap: 10px;
-}
-
-.modal-title {
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: var(--overlay);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
     display: flex;
     align-items: center;
-    gap: 10px;
-
-
+    justify-content: center;
+    padding: 20px 15px;
+    box-sizing: border-box;
+    z-index: 3500;
 }
 
+.modal {
+    --modal-max: 600px;
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: var(--modal-max);
+    max-height: calc(100vh - 40px);
+    max-height: calc(100dvh - 40px);
+    background-color: var(--secondary);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+}
+
+/* Le dialogue reçoit le focus à l'ouverture pour être annoncé : pas d'anneau sur ce conteneur non interactif */
+.modal:focus {
+    outline: none;
+}
+
+.modal--sm { --modal-max: 420px; }
+.modal--md { --modal-max: 600px; }
+.modal--lg { --modal-max: 820px; }
+.modal--xl { --modal-max: 1100px; }
+
 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--border);
+    gap: 12px;
+    flex-shrink: 0;
+    padding: 16px 20px;
     background-color: var(--primary);
-    border-radius: 10px 10px 0px 0px ;
-    padding: 20px;
+    border-bottom: 1px solid var(--border);
 }
 
-.modal {
-    background-color: var(--secondary);
-    border-radius: 10px;
+.modal-title {
     display: flex;
-    flex-direction: column;
-    gap: 15px;
-    max-width: 600px !important;
-    width: 100%;
-    
-    max-width: 90%;
-    margin-right: 15px;
-    margin-left: 15px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-
-    animation: appear 0.2s ease-in-out;
-    animation-fill-mode: forwards;
-    
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
 }
-.modal p {
-    margin: 0px;
-    font-size: 1.3em;
-    font-weight: 600;
-}   
 
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(5px);
-    display: none;
+.modal-title-icon {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    z-index: 3500;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm);
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1em;
 }
 
+.modal-title-text {
+    margin: 0;
+    font-size: 1.2em;
+    font-weight: 600;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+}
 
+.modal-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+}
 
+.modal-close {
+    font-size: 0.95em;
+}
+
+.modal-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 16px 20px 20px 20px;
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    gap: 10px;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    flex-shrink: 0;
+    padding: 12px 20px;
+    background-color: var(--secondary);
+    border-top: 1px solid var(--border);
+}
+
+/* Animations d'ouverture / fermeture */
+.modal-enter-active,
+.modal-leave-active {
+    transition: opacity var(--dur) var(--ease);
+}
+
+.modal-enter-active .modal {
+    animation: modal-in var(--dur) var(--ease);
+}
+
+.modal-leave-active .modal {
+    animation: modal-in var(--dur-fast) var(--ease) reverse;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+}
+
+@keyframes modal-in {
+    from {
+        transform: translateY(8px) scale(0.97);
+    }
+    to {
+        transform: none;
+    }
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .modal-overlay {
+        padding: 10px;
+    }
+
+    .modal {
+        max-height: calc(100vh - 20px);
+        max-height: calc(100dvh - 20px);
+    }
+
+    .modal-header {
+        padding: 12px 16px;
+    }
+
+    .modal-content {
+        padding: 14px 16px 16px 16px;
+    }
+
+    .modal-footer {
+        padding: 10px 16px;
+    }
+}
 </style>
diff --git a/src/components/UI/ModalTree.vue b/src/components/UI/ModalTree.vue
index 074fd68..086609e 100644
--- a/src/components/UI/ModalTree.vue
+++ b/src/components/UI/ModalTree.vue
@@ -1,17 +1,21 @@
 <template>
-    <div class="settings-container">
-        <Icon style="width: 20px;" class="settings-icon" :icon="icon"/> 
+    <section class="settings-container">
+        <Icon class="settings-icon" :icon="icon" aria-hidden="true"/>
         <div class="settings-item">
-                <p class="settings-title"><Icon style="width: 20px;" class="settings-icon-replace" :icon="icon"/>  {{ title }}</p>
-               <slot></slot>
+            <h3 class="settings-title"><Icon class="settings-icon-replace" :icon="icon" aria-hidden="true"/>{{ title }}</h3>
+            <slot></slot>
         </div>
-    </div>
+    </section>
 </template>
 <script setup>
+/**
+ * Section titrée d'une modale de paramètres (icône dans la marge sur grand écran, dans le titre sur mobile).
+ * Props : title, icon. Slot par défaut : le contenu de la section.
+ */
 defineProps({
     title: {
         type: String,
-        default: 'Settings item'
+        default: 'Paramètre'
     },
     icon: {
         type: String,
@@ -31,21 +35,29 @@ defineProps({
         display: unset !important;
     }
 }
-    
+
 .settings-title {
+    display: flex;
+    align-items: center;
+    gap: 7px;
     font-size: 1.1em;
-    color: var(--text-primary);
+    line-height: 1.3;
+    color: var(--text);
     font-weight: 600;
     margin: 0;
-
-}   
+}
 
 .settings-icon {
-    margin-top: 1px;
+    width: 20px;
+    margin-top: 3px;
+    flex-shrink: 0;
+    color: var(--text-secondary);
 }
 
 .settings-icon-replace {
+    width: 20px;
     display: none;
+    color: var(--text-secondary);
 }
 
 .settings-container {
@@ -53,8 +65,9 @@ defineProps({
     gap: 7px;
 }
 
-.settings-item { 
-  width: 100%;
+.settings-item {
+    width: 100%;
+    min-width: 0;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/MusicAnimation.vue b/src/components/UI/MusicAnimation.vue
index 465e214..aa78905 100644
--- a/src/components/UI/MusicAnimation.vue
+++ b/src/components/UI/MusicAnimation.vue
@@ -1,5 +1,6 @@
+<!-- Animation d'égaliseur (décorative) pour les écrans de chargement -->
 <template>
-    <div class="animation">
+    <div class="animation" aria-hidden="true">
     <span></span>
     <span></span>
     <span></span>
@@ -8,8 +9,6 @@
   </div>
 </template>
 <style scoped>
-/* Import Google font - Poppins */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
 .animation{
   height: 65px;
   display: flex;
diff --git a/src/components/UI/PlaylistItem.vue b/src/components/UI/PlaylistItem.vue
index 8e2fa6b..4acb8b4 100644
--- a/src/components/UI/PlaylistItem.vue
+++ b/src/components/UI/PlaylistItem.vue
@@ -1,66 +1,259 @@
 <template>
-    <div class="playlist-item">
-        <Icon :class="{'p-icon': true, 'selected': selected}" :icon="type === 'youtube' ? 'fa-brands fa-youtube' : 'fas fa-music'" />
-        <p>{{ title }}</p>
-    </div>
+    <component
+        :is="as"
+        :type="as === 'button' ? 'button' : undefined"
+        :class="['playlist-item', { 'playlist-item--selected': selected, 'playlist-item--compact': compact }]"
+        :aria-current="selected && as === 'button' ? 'true' : undefined"
+        :title="tooltip"
+    >
+        <span :class="['playlist-item__cover', `playlist-item__cover--${source.key}`]" aria-hidden="true">
+            <img v-if="cover && !coverFailed" :src="cover" alt="" loading="lazy" decoding="async" @error="coverFailed = true" />
+            <Icon v-else class="playlist-item__fallback" :icon="source.icon" />
+            <span v-if="cover && !coverFailed && source.key !== 'manual'" class="playlist-item__badge">
+                <Icon :icon="source.icon" />
+            </span>
+        </span>
+        <span class="playlist-item__text">
+            <span class="playlist-item__title u-ellipsis">{{ displayTitle }}</span>
+            <span v-if="playlist || meta" class="playlist-item__meta">
+                <img
+                    v-if="scope === 'guild' && creator"
+                    class="playlist-item__avatar"
+                    :src="creatorAvatar"
+                    alt=""
+                    loading="lazy"
+                    aria-hidden="true"
+                />
+                <span class="u-ellipsis">{{ meta }}</span>
+                <span v-if="scope === 'guild' && creator" class="sr-only">, créée par {{ creator }}</span>
+                <span v-if="synced" class="sr-only">, synchronisée avec YouTube</span>
+            </span>
+        </span>
+        <slot name="end"></slot>
+    </component>
 </template>
 <script setup>
+/**
+ * Ligne de playlist (barre latérale, sélecteurs).
+ * Racine : <button> par défaut (prop `as` pour un autre élément, ex. dans une option de liste).
+ * Les écouteurs (@click, @keydown) et attributs (aria-*) du parent sont posés sur la racine.
+ * `title` / `type` restent acceptés seuls pour les anciens appels sans objet playlist.
+ */
+import { computed, ref, watch } from 'vue';
+import {
+    playlistSource,
+    playlistCover,
+    playlistMetaLine,
+    isSyncedPlaylist,
+    creatorName,
+    discordAvatarUrl
+} from '@/components/Widget/Playlist/playlistMeta';
 
 const props = defineProps({
+    playlist: {
+        type: Object,
+        default: null
+    },
     title: {
         type: String,
-        required: true,
-        default: 'My Playlist'
+        default: null
     },
     type: {
         type: String,
-        required: true
+        default: null
     },
     selected: {
         type: Boolean,
         default: false
+    },
+    scope: {
+        type: String,
+        default: 'personal'
+    },
+    compact: {
+        type: Boolean,
+        default: false
+    },
+    as: {
+        type: String,
+        default: 'button'
     }
 });
+
+const coverFailed = ref(false);
+
+const source = computed(() => playlistSource(props.playlist || { type: props.type }));
+const cover = computed(() => playlistCover(props.playlist));
+const displayTitle = computed(() => props.playlist?.title || props.title || 'Playlist sans titre');
+const meta = computed(() => (props.playlist ? playlistMetaLine(props.playlist) : null));
+const synced = computed(() => isSyncedPlaylist(props.playlist));
+const creator = computed(() => (props.scope === 'guild' ? creatorName(props.playlist) : null));
+const creatorAvatar = computed(() => {
+    const createdBy = props.playlist?.createdBy;
+    return discordAvatarUrl(createdBy?.id, createdBy?.avatar, 32);
+});
+
+// Infobulle : titre complet (souvent tronqué) + origine + créateur
+const tooltip = computed(() => {
+    const parts = [displayTitle.value, source.value.label];
+    if (creator.value) parts.push(`Créée par ${creator.value}`);
+    return parts.join(' — ');
+});
+
+// Nouvelle pochette : on retente l'affichage
+watch(cover, () => {
+    coverFailed.value = false;
+});
 </script>
 <style scoped>
 .playlist-item {
     display: flex;
     align-items: center;
-    transition: 0.2s;
     gap: 10px;
-    cursor: pointer;
-}
-
-.playlist-item:hover .p-icon {
-    background-color: var(--text);
-    color: var(--text-inverse);
-  
-}
-
-.playlist-item p {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    padding: 6px 8px 6px 6px;
     margin: 0;
-    font-size: 18px;
+    border: none;
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
+    outline: 2px solid transparent;
+    outline-offset: 0;
+    transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
 }
 
-.p-icon {
+.playlist-item:hover {
+    background-color: color-mix(in srgb, var(--text) 7%, transparent);
+}
+
+.playlist-item:active {
+    background-color: color-mix(in srgb, var(--text) 11%, transparent);
+}
+
+.playlist-item:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--main);
+}
+
+.playlist-item--selected,
+.playlist-item--selected:hover {
+    background-color: var(--main-soft);
+}
+
+/* Repère de sélection à gauche (la couleur seule ne suffit pas) */
+.playlist-item--selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 10px;
+    bottom: 10px;
+    width: 3px;
+    border-radius: var(--radius-pill);
+    background-color: var(--main);
+}
+
+.playlist-item__cover {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    background-color: var(--tertiary);
+    color: var(--text-secondary);
+    font-size: 1.15em;
+}
+
+.playlist-item__cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+}
+
+.playlist-item__cover--youtube { color: #ff3b3b; }
+.playlist-item__cover--spotify { color: #1ed760; }
+.playlist-item__cover--soundcloud { color: #ff7700; }
+.playlist-item__cover--google { color: var(--text-info); }
+.playlist-item__cover--manual { color: var(--main); background-color: var(--main-soft); }
+
+.playlist-item--selected .playlist-item__cover--manual {
+    background-color: var(--main);
+    color: var(--main-contrast);
+}
+
+/* Origine en pastille sur la pochette (YouTube, Spotify…) */
+.playlist-item__badge {
+    position: absolute;
+    right: -4px;
+    bottom: -4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--secondary);
+    box-shadow: 0 0 0 2px var(--secondary);
+    font-size: 0.6em;
+}
+
+.playlist-item__text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+
+.playlist-item__title {
+    font-size: 0.95em;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.playlist-item__meta {
     display: flex;
     align-items: center;
-    background-color: transparent;
-    padding: 15px;
-    border: 2px solid var(--text);
-    border-radius: 10px;
-    font-size: 25px;
-     transition: 0.2s;
+    gap: 5px;
+    min-width: 0;
+    font-size: 0.78em;
+    line-height: 1.3;
+    color: var(--text-secondary);
 }
 
-.p-icon.selected {
-    background-color: var(--text);
-    color: var(--text-inverse);
+.playlist-item__avatar {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    object-fit: cover;
+    background-color: var(--tertiary);
 }
 
-.p-icon {
-    width: 25px;
-    height: 25px;
+.playlist-item--compact {
+    padding: 4px 6px 4px 4px;
+    gap: 8px;
 }
 
-</style>
\ No newline at end of file
+.playlist-item--compact .playlist-item__cover {
+    width: 34px;
+    height: 34px;
+    border-radius: 6px;
+    font-size: 0.95em;
+}
+
+.playlist-item--compact .playlist-item__badge {
+    width: 15px;
+    height: 15px;
+}
+</style>
diff --git a/src/components/UI/Role.vue b/src/components/UI/Role.vue
index 12fd8c4..5e63b30 100644
--- a/src/components/UI/Role.vue
+++ b/src/components/UI/Role.vue
@@ -5,19 +5,16 @@
         <Tag color="var(--text-secondary)" v-else>Membre</Tag>
 </template>
 <script setup>
+/**
+ * Étiquette du rôle d'un utilisateur (Administrateur, Propriétaire, Modérateur, Membre).
+ * Prop : user ({ identity: { isAdmin, isOwner, isMod } }).
+ */
 import Tag from '@/components/UI/Tag.vue';
 
 const props = defineProps({
     user: {
         type: Object,
-        required: true,
-        default: {
-            identity: {
-                isAdmin: false,
-                isMod: false,
-                isOwner: false
-            }
-        }
+        required: true
     }
 });
 </script>
diff --git a/src/components/UI/SegmentedControl.vue b/src/components/UI/SegmentedControl.vue
new file mode 100644
index 0000000..80447c0
--- /dev/null
+++ b/src/components/UI/SegmentedControl.vue
@@ -0,0 +1,224 @@
+<template>
+    <div
+        role="radiogroup"
+        :aria-label="label || undefined"
+        :class="['ui-seg', `ui-seg--${size === 'sm' ? 'sm' : 'md'}`, { 'ui-seg--block': block }]"
+    >
+        <button
+            v-for="(option, index) in options"
+            :key="String(option.value)"
+            :ref="(el) => { buttons[index] = el }"
+            type="button"
+            role="radio"
+            :aria-checked="isSelected(option) ? 'true' : 'false'"
+            :tabindex="index === focusIndex ? 0 : -1"
+            :disabled="option.disabled"
+            :class="['ui-seg__option', { 'ui-seg__option--selected': isSelected(option) }]"
+            @click="select(option)"
+            @keydown="onKeydown($event, index)"
+        >
+            <Icon v-if="option.icon" class="ui-seg__icon" :icon="option.icon" aria-hidden="true" />
+            <span class="ui-seg__label">{{ option.label }}</span>
+            <span v-if="hasBadge(option)" class="ui-seg__badge">{{ option.badge }}</span>
+        </button>
+    </div>
+</template>
+<script setup>
+/**
+ * Choix unique en pilules (role="radiogroup").
+ * options : [{ value, label, icon?, disabled?, badge? }] ; v-model = value sélectionnée.
+ * Clavier : flèches (sélectionnent l'option voisine active), Début / Fin.
+ */
+import { computed, nextTick } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number, Boolean],
+        default: null
+    },
+    options: {
+        type: Array,
+        default: () => []
+    },
+    size: {
+        type: String,
+        default: 'md',
+        validator: (value) => ['sm', 'md'].includes(value)
+    },
+    label: {
+        type: String,
+        default: null
+    },
+    block: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// Tableau simple (non réactif) : seulement utilisé pour déplacer le focus
+const buttons = [];
+
+function isSelected(option) {
+    return option.value === props.modelValue;
+}
+
+function hasBadge(option) {
+    return option.badge !== undefined && option.badge !== null && option.badge !== '';
+}
+
+// Tabindex itinérant : l'option sélectionnée, sinon la première option active
+const focusIndex = computed(() => {
+    const selected = props.options.findIndex((option) => isSelected(option) && !option.disabled);
+    if (selected !== -1) return selected;
+    return props.options.findIndex((option) => !option.disabled);
+});
+
+function select(option) {
+    if (!option || option.disabled || isSelected(option)) return;
+    emit('update:modelValue', option.value);
+    emit('change', option.value);
+}
+
+function nextEnabled(from, step) {
+    const count = props.options.length;
+    for (let i = 1; i <= count; i++) {
+        const index = (from + step * i + count * count) % count;
+        if (!props.options[index]?.disabled) return index;
+    }
+    return -1;
+}
+
+function onKeydown(event, index) {
+    let target = -1;
+    switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+            target = nextEnabled(index, 1);
+            break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            target = nextEnabled(index, -1);
+            break;
+        case 'Home':
+            target = nextEnabled(-1, 1);
+            break;
+        case 'End':
+            target = nextEnabled(props.options.length, -1);
+            break;
+        default:
+            return;
+    }
+    event.preventDefault();
+    if (target === -1) return;
+    select(props.options[target]);
+    nextTick(() => buttons[target]?.focus());
+}
+</script>
+<style scoped>
+.ui-seg {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 2px;
+    max-width: 100%;
+    padding: 3px;
+    box-sizing: border-box;
+    background-color: var(--secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
+}
+
+.ui-seg--block {
+    display: flex;
+    width: 100%;
+}
+
+.ui-seg__option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 0;
+    min-height: 32px;
+    padding: 0 14px;
+    border: none;
+    border-radius: var(--radius-pill);
+    background: transparent;
+    color: var(--text-secondary);
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
+}
+
+.ui-seg--block .ui-seg__option {
+    flex: 1 1 0;
+}
+
+.ui-seg--sm .ui-seg__option {
+    min-height: 26px;
+    padding: 0 10px;
+    gap: 5px;
+    font-size: 0.8rem;
+}
+
+.ui-seg__option:hover:not(:disabled):not(.ui-seg__option--selected) {
+    color: var(--text);
+    background-color: color-mix(in srgb, var(--quaternary) 45%, transparent);
+}
+
+.ui-seg__option:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.ui-seg__option--selected {
+    background-color: var(--main);
+    color: var(--main-contrast);
+    box-shadow: var(--shadow-sm);
+}
+
+.ui-seg__option:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.ui-seg__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ui-seg__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 6px;
+    box-sizing: border-box;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 14%, transparent);
+    color: inherit;
+    font-size: 0.72rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.ui-seg__option--selected .ui-seg__badge {
+    background-color: rgba(255, 255, 255, 0.25);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .ui-seg__option {
+        padding: 0 10px;
+    }
+}
+</style>
diff --git a/src/components/UI/Selector.vue b/src/components/UI/Selector.vue
index 9813d66..0eee1c5 100644
--- a/src/components/UI/Selector.vue
+++ b/src/components/UI/Selector.vue
@@ -1,182 +1,438 @@
+<template>
+    <div ref="root" :class="['ui-select', { 'ui-select--open': open, 'ui-select--disabled': disabled }]">
+        <button
+            ref="trigger"
+            type="button"
+            class="ui-select__trigger firstbox"
+            aria-haspopup="listbox"
+            :aria-expanded="open ? 'true' : 'false'"
+            :aria-controls="listId"
+            :aria-label="label || undefined"
+            :aria-labelledby="labelledby || undefined"
+            :disabled="disabled"
+            @click="toggle()"
+            @keydown="onTriggerKeydown"
+        >
+            <span class="ui-select__value">
+                <component :is="selectedNode()" v-if="hasSelection()" />
+                <span v-else class="ui-select__placeholder">{{ placeholder }}</span>
+            </span>
+            <Icon class="ui-select__chevron" icon="fa-solid fa-angle-down" aria-hidden="true" />
+        </button>
+        <ul
+            v-show="open"
+            :id="listId"
+            ref="list"
+            class="ui-select__list"
+            role="listbox"
+            tabindex="-1"
+            :aria-label="label || undefined"
+            :aria-labelledby="labelledby || undefined"
+            :aria-activedescendant="open && activeIndex >= 0 ? optionId(activeIndex) : undefined"
+            :style="listStyle"
+            @keydown="onListKeydown"
+        >
+            <li
+                v-for="(option, index) in renderedOptions()"
+                :id="optionId(index)"
+                :key="optionKey(option, index)"
+                role="option"
+                :aria-selected="isCurrent(option) ? 'true' : 'false'"
+                :class="['ui-select__option', { 'ui-select__option--active': index === activeIndex, 'ui-select__option--selected': isCurrent(option) }]"
+                @click="choose(index)"
+                @mousemove="activeIndex = index"
+            >
+                <span class="ui-select__option-content"><component :is="option.vnode" /></span>
+                <Icon v-if="isCurrent(option)" class="ui-select__check" icon="fa-solid fa-check" aria-hidden="true" />
+            </li>
+        </ul>
+    </div>
+</template>
 <script setup>
-import IconAction from './IconAction.vue';
-import { ref, onMounted, watch, onUnmounted } from 'vue';
-import { useSlots } from 'vue';
-
-const slots = useSlots();
-const boxWidth = ref(0);
-const box = ref(null);  
-
-var slotsAll = slots.default ? slots.default() : [];
-var allSlots = null
-
-if(slotsAll.length > 0) {
-  if(typeof slotsAll[0].children !== "string") {
-     allSlots = slotsAll[0].children
-  } else {
-    allSlots = slotsAll
-  }
-
-
-}
-
-var firstSlot = allSlots[0] || null;
-var otherSlots = allSlots.slice(1);
-
-const showMenu = ref(false);
-
-function selectOption(index) {
-  // Make it like a select 
-  if (otherSlots[index]) {
-    const oldFirstSlot = firstSlot;
-    firstSlot = otherSlots[index];
-    otherSlots.splice(index, 1);
-    otherSlots.push(oldFirstSlot);
-    showMenu.value = false; // Hide the menu after selection
-  }
-  updateModelValue(firstSlot ? firstSlot.props ? firstSlot.props.value : '' : '');
-}
+/**
+ * Liste déroulante (bouton + role="listbox"), dont les options sont des éléments quelconques.
+ * Slot par défaut : les options, chacune portant un attribut / une prop `value`
+ *   (ex. <Tag :value="role.id">…</Tag>, <p :value="id">…</p>, ou une boucle v-for).
+ * v-model (facultatif) : la valeur choisie. Sans valeur valide, la première option est choisie
+ * et émise (comportement historique).
+ * Props : label (nom accessible) ou labelledby (id d'un libellé visible), placeholder, disabled.
+ * Exposé : firstSlot() → vnode de l'option choisie (historique : .props.value, .children), value() → valeur.
+ * Clavier : Entrée / Espace / flèches ouvrent ; flèches, Début / Fin, Entrée (choisir), Échap (fermer).
+ * Événements : update:modelValue, change.
+ */
+import { Comment, Fragment, Text, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, useId, useSlots } from 'vue';
 
 const props = defineProps({
-  modelValue: String
+    modelValue: {
+        type: [String, Number],
+        default: undefined
+    },
+    label: {
+        type: String,
+        default: null
+    },
+    labelledby: {
+        type: String,
+        default: null
+    },
+    placeholder: {
+        type: String,
+        default: 'Choisir…'
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
-function updateModelValue(value) {
-  emit('update:modelValue', value);
+const slots = useSlots();
+const uid = useId();
+const listId = `select-${uid}`;
+const root = ref(null);
+const trigger = ref(null);
+const list = ref(null);
+const open = ref(false);
+const activeIndex = ref(-1);
+const internal = ref(undefined);
+const listStyle = ref(null);
+// Options du dernier rendu : le slot est relu à chaque rendu (hasSelection, appelé en premier dans le
+// gabarit) pour rester réactif. Variable simple : la modifier pendant le rendu ne doit rien redéclencher.
+let lastOptions = [];
+
+function flatten(vnodes, out = []) {
+    for (const vnode of vnodes || []) {
+        if (!vnode || vnode.type === Comment) continue;
+        if (vnode.type === Text) continue;
+        if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+            flatten(vnode.children, out);
+            continue;
+        }
+        out.push(vnode);
+    }
+    return out;
 }
 
-onMounted(() => {
+function readOptions() {
+    const nodes = flatten(slots.default ? slots.default() : []);
+    return nodes.map((vnode) => ({ vnode, value: vnode.props?.value }));
+}
 
-    window.addEventListener('rightclick', (e) => {
-        e.preventDefault(); // Prevent default context menu
-    });
+function optionId(index) {
+    return `${listId}-opt-${index}`;
+}
 
-    window.addEventListener('click', (e) => {
-      hideMenu(e);
-    });
+function optionKey(option, index) {
+    return option.value !== undefined && option.value !== null ? `v-${String(option.value)}-${index}` : `i-${index}`;
+}
 
-    window.addEventListener('resize', () => {
-     showMenu.value = false; 
+function currentValue() {
+    const options = lastOptions;
+    const has = (value) => value !== undefined && options.some((option) => option.value === value);
+    if (has(props.modelValue)) return props.modelValue;
+    if (has(internal.value)) return internal.value;
+    return options[0]?.value;
+}
 
-    });
-    updateModelValue(firstSlot ? firstSlot.props ? firstSlot.props.value : '' : '');
+function isCurrent(option) {
+    return option.value === currentValue();
+}
 
-});
+function currentIndex() {
+    return lastOptions.findIndex((option) => isCurrent(option));
+}
 
-onUnmounted(() => {
-    window.removeEventListener('rightclick', (e) => {
-        e.preventDefault(); // Prevent default context menu
-    });
-    window.removeEventListener('click', (e) => {
-      hideMenu(e);
-    });
+function hasSelection() {
+    // Relit le slot à chaque rendu : les options suivent les données du parent
+    lastOptions = readOptions();
+    return currentIndex() !== -1;
+}
 
-    window.removeEventListener('resize', () => {
-      showMenu.value = false;
-    });
-});
+function renderedOptions() {
+    return lastOptions;
+}
 
-function hideMenu(e) {
-  // Check if the click is outside the context menu
-    if (box.value && !box.value.contains(e.target)) {
-        showMenu.value = false; // Hide context menu on click outside
+function selectedNode() {
+    return lastOptions[currentIndex()]?.vnode || null;
+}
+
+// Synchronise le v-model quand la valeur affichée (1re option par défaut) n'est pas celle du parent
+function syncModel() {
+    const value = currentValue();
+    if (value === undefined || value === props.modelValue) return;
+    emit('update:modelValue', value);
+}
+
+function setValue(value) {
+    internal.value = value;
+    if (value !== props.modelValue) {
+        emit('update:modelValue', value);
+        emit('change', value);
     }
 }
 
+function positionList() {
+    const button = trigger.value;
+    if (!button) return;
+    const rect = button.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const maxHeight = 260;
+    const above = spaceBelow < Math.min(maxHeight, 160) && rect.top > spaceBelow;
+    listStyle.value = {
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        maxHeight: `${Math.max(120, Math.min(maxHeight, (above ? rect.top : spaceBelow) - 12))}px`,
+        ...(above ? { bottom: `${window.innerHeight - rect.top + 4}px`, top: 'auto' } : { top: `${rect.bottom + 4}px`, bottom: 'auto' })
+    };
+}
+
+function openList(focusIndex) {
+    if (props.disabled || lastOptions.length === 0) return;
+    positionList();
+    open.value = true;
+    activeIndex.value = focusIndex ?? Math.max(0, currentIndex());
+    addGlobalListeners();
+    nextTick(() => {
+        list.value?.focus({ preventScroll: true });
+        scrollActiveIntoView();
+    });
+}
+
+function closeList(focusTrigger = true) {
+    if (!open.value) return;
+    open.value = false;
+    removeGlobalListeners();
+    if (focusTrigger) trigger.value?.focus({ preventScroll: true });
+}
+
+function toggle() {
+    if (open.value) closeList();
+    else openList();
+}
+
+function choose(index) {
+    const option = lastOptions[index];
+    if (!option) return;
+    setValue(option.value);
+    closeList();
+}
+
+function scrollActiveIntoView() {
+    const element = list.value?.querySelector(`#${CSS.escape(optionId(activeIndex.value))}`);
+    element?.scrollIntoView({ block: 'nearest' });
+}
+
+function moveActive(target) {
+    const count = lastOptions.length;
+    if (count === 0) return;
+    activeIndex.value = Math.max(0, Math.min(count - 1, target));
+    nextTick(scrollActiveIntoView);
+}
+
+function onTriggerKeydown(event) {
+    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+        openList(event.key === 'ArrowUp' ? Math.max(0, currentIndex() - 1) : undefined);
+    }
+}
+
+function onListKeydown(event) {
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            moveActive(activeIndex.value + 1);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            moveActive(activeIndex.value - 1);
+            break;
+        case 'Home':
+            event.preventDefault();
+            moveActive(0);
+            break;
+        case 'End':
+            event.preventDefault();
+            moveActive(lastOptions.length - 1);
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault();
+            choose(activeIndex.value);
+            break;
+        case 'Escape':
+            event.preventDefault();
+            event.stopPropagation();
+            closeList();
+            break;
+        case 'Tab':
+            closeList(false);
+            break;
+        default:
+            break;
+    }
+}
+
+function onDocumentPointerDown(event) {
+    if (root.value && !root.value.contains(event.target) && !list.value?.contains(event.target)) closeList(false);
+}
+
+function onScroll(event) {
+    if (list.value && event.target instanceof Node && list.value.contains(event.target)) return;
+    closeList(false);
+}
+
+function onResize() {
+    closeList(false);
+}
+
+function addGlobalListeners() {
+    document.addEventListener('pointerdown', onDocumentPointerDown, true);
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onResize);
+}
+
+function removeGlobalListeners() {
+    document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    window.removeEventListener('scroll', onScroll, true);
+    window.removeEventListener('resize', onResize);
+}
+
+onMounted(syncModel);
+onUpdated(syncModel);
+
+onBeforeUnmount(removeGlobalListeners);
+
 defineExpose({
-   firstSlot: () => {
-    return firstSlot;
-   }
-})
+    firstSlot: () => selectedNode(),
+    value: () => currentValue()
+});
 </script>
 
-<template>
- <section>
-  <div ref="box" :class="showMenu ? `showed firstbox` : 'firstbox'" @click="showMenu = !showMenu">
-    <template  v-if="firstSlot">
-      <component style="white-space: break-spaces;" :is="firstSlot" />
-    </template>
-    <IconAction
-      class="icon"
-      :icon="showMenu ? 'fa-solid fa-angle-up' : 'fa-solid fa-angle-down'"
-    />
-  </div>
-   <template v-if="otherSlots.length && showMenu">
-    <div class="container">
-      <div v-for="(slot, index) in otherSlots" :style="`width: ${box.offsetWidth - 10}px;`" class="option" @click="selectOption(index)" >
-      <component :is="slot" :key="index" />
-      </div>
-    </div>
-    </template>
-    
-  </section>
-
-</template>
-
 <style scoped>
-.firstbox {
-  background-color: var(--tertiary);
-  color: var(--text);
-  border: none;
-  border-radius: 5px;
-  padding: 5px;
-  font-size: 14px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.ui-select {
+    position: relative;
+    min-width: 0;
 }
 
-.container {
-
-  color: var(--text);
-  border: none;
-  border-radius: 0px 0px 5px 5px;
-  font-size: 14px;
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  justify-content: space-between;
-  user-select: none;
-  overflow-y: auto;
-  max-height: 16vh;
-  z-index: 4000;
+.ui-select__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    min-height: 38px;
+    padding: 6px 10px;
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--radius-sm);
+    background-color: var(--tertiary);
+    color: var(--text);
+    font: inherit;
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
 }
 
-.container .option:last-child {
-  border-radius: 0px 0px 5px 5px !important;
+.ui-select__trigger:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--tertiary) 80%, var(--text));
 }
 
-.container .option:only-child {
-  border-radius: 0px 0px 5px 5px !important;
+.ui-select__trigger:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
 }
 
-.container .option:first-child {
-  border-top: 1px solid var(--secondary) !important;
+.ui-select--open .ui-select__trigger {
+    box-shadow: 0 0 0 2px var(--main);
 }
 
-.option {
-  width: 100%;
-  padding: 5px;
-  background-color: var(--tertiary);
-  cursor: pointer;
-  white-space: break-spaces;
+.ui-select__trigger:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
-.option:hover {
-  background-color: var(--primary-hover);
-  color: var(--text-inverse);
-} 
-
-.showed {
-  /* margin-bottom: 0 !important;
-  padding-bottom: 0; */
-  border-radius: 5px 5px 0 0 !important;
+.ui-select__value {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    white-space: break-spaces;
 }
 
-.icon {
-  display: flex;
-  align-items: center;
+.ui-select__placeholder {
+    color: var(--text-secondary);
 }
-</style>
\ No newline at end of file
+
+.ui-select__chevron {
+    flex-shrink: 0;
+    color: var(--text-secondary);
+    transition: transform var(--dur-fast) ease;
+}
+
+.ui-select--open .ui-select__chevron {
+    transform: rotate(180deg);
+}
+
+.ui-select__list {
+    position: fixed;
+    z-index: 4000;
+    margin: 0;
+    padding: 4px;
+    box-sizing: border-box;
+    list-style: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    background-color: var(--secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    outline: none;
+}
+
+.ui-select__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-height: 34px;
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
+    font-size: 0.875rem;
+    cursor: pointer;
+    user-select: none;
+    white-space: break-spaces;
+}
+
+.ui-select__option--active {
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+}
+
+/* L'option active au clavier est entourée (le focus reste sur la liste, aria-activedescendant) */
+.ui-select__list:focus-visible .ui-select__option--active {
+    box-shadow: inset 0 0 0 2px var(--main);
+}
+
+.ui-select__option--selected {
+    font-weight: 600;
+}
+
+.ui-select__option-content {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+}
+
+.ui-select__check {
+    flex-shrink: 0;
+    color: var(--main);
+}
+
+/* Les anciennes options en <p> gardent leur mise en page sans marge */
+.ui-select__value :deep(p),
+.ui-select__option-content :deep(p) {
+    margin: 0;
+}
+</style>
diff --git a/src/components/UI/Server.vue b/src/components/UI/Server.vue
index 47d15b7..b4fc752 100644
--- a/src/components/UI/Server.vue
+++ b/src/components/UI/Server.vue
@@ -3,11 +3,21 @@
         <ServerAvatar :server-id="server.id" :src="server.icon"/>
         <div class="info">
             <p class="name">{{ server.name }}</p>
-            <p class="data"><Icon style="font-size: 10px;" :color="server.connected ? '#0BFF89' : '#FF0A0A'" icon="fa-solid fa-circle"/> {{ server.connected ? 'En ligne' : 'Hors ligne' }} - {{ server.serverMember }} membres</p>
+            <p class="data">
+                <span :class="['status-dot', server.connected ? 'status-dot--on' : 'status-dot--off']" aria-hidden="true"></span>
+                <span>{{ server.connected ? 'En ligne' : 'Hors ligne' }}</span>
+                <span aria-hidden="true">·</span>
+                <span>{{ memberLabel }}</span>
+            </p>
          </div>
     </div>
 </template>
 <script setup>
+/**
+ * Résumé d'un serveur : icône, nom, état du bot (en ligne / hors ligne) et nombre de membres.
+ * Prop : server ({ id, name, icon, connected, serverMember }).
+ */
+import { computed } from 'vue';
 import ServerAvatar from '../UI/ServerAvatar.vue';
 
 const props = defineProps({
@@ -15,7 +25,7 @@ const props = defineProps({
         type: Object,
         default: () => ({
             id: '',
-            name: 'Aucun serveur séléctionné',
+            name: 'Aucun serveur sélectionné',
             owner: false,
             icon: '',
             members: [],
@@ -25,30 +35,59 @@ const props = defineProps({
     }
 });
 
+const memberLabel = computed(() => {
+    const count = Number(props.server?.serverMember) || 0;
+    return `${count} membre${count > 1 ? 's' : ''}`;
+});
 </script>
 <style scoped>
 .container-avatar {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     width: 100%;
+    min-width: 0;
 }
 
 p {
     margin: 0;
 }
 
+.name {
+    font-weight: 600;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+}
+
 .data {
     color: var(--text-secondary);
     font-size: 0.8em;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 3px;
+    gap: 5px;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.status-dot--on {
+    background-color: var(--text-success);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-success) 20%, transparent);
+}
+
+.status-dot--off {
+    background-color: var(--text-error);
 }
 
 .info {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 4px;
+    min-width: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/ServerAvatar.vue b/src/components/UI/ServerAvatar.vue
index 7abb354..2d3ddbb 100644
--- a/src/components/UI/ServerAvatar.vue
+++ b/src/components/UI/ServerAvatar.vue
@@ -1,24 +1,68 @@
 <template>
-    <img v-if="src" :src="src" />
-    <img v-else :src="`https://cdn.discordapp.com/embed/avatars/${serverId % 5}.png`" />
+    <img
+        :src="source"
+        :alt="alt"
+        class="ui-server-avatar"
+        :style="size ? { '--server-avatar-size': size } : null"
+        loading="lazy"
+        decoding="async"
+        @error="failed = true"
+    />
 </template>
 <script setup>
-    const props = defineProps({
-        src: {
-            type: String,
-            default: null
-        },
-        serverId: {
-            type: String,
-            default: null
-        }
-    }); 
+/**
+ * Icône d'un serveur Discord (carré arrondi). Sans icône (ou en cas d'erreur de chargement) :
+ * avatar par défaut de Discord.
+ * Props : src, serverId, alt (vide par défaut : le nom du serveur est affiché à côté),
+ *         size (longueur CSS, 70px par défaut ; aussi réglable par la variable --server-avatar-size
+ *         ou directement par une classe du parent : les styles internes sont de spécificité nulle).
+ */
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+    src: {
+        type: String,
+        default: null
+    },
+    serverId: {
+        type: String,
+        default: null
+    },
+    alt: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: String,
+        default: null
+    }
+});
+
+const failed = ref(false);
+watch(() => props.src, () => {
+    failed.value = false;
+});
+
+const source = computed(() => {
+    if (props.src && !failed.value) return props.src;
+    // Identifiant Discord (chaîne trop longue pour un Number exact) : BigInt, sinon somme des caractères
+    const id = String(props.serverId || '0');
+    let index = 0;
+    try {
+        index = /^\d+$/.test(id) ? Number(BigInt(id) % 5n) : [...id].reduce((sum, char) => sum + char.charCodeAt(0), 0) % 5;
+    } catch {
+        index = 0;
+    }
+    return `https://cdn.discordapp.com/embed/avatars/${index}.png`;
+});
 </script>
 <style scoped>
-    img {
-        width: 70px;
-        height: 70px;
+    :where(.ui-server-avatar) {
+        width: var(--server-avatar-size, 70px);
+        height: var(--server-avatar-size, 70px);
+        flex-shrink: 0;
+        object-fit: cover;
         border-radius: 15px;
         background-color: var(--main);
-    }   
-</style>
\ No newline at end of file
+    }
+</style>
diff --git a/src/components/UI/Spinner.vue b/src/components/UI/Spinner.vue
new file mode 100644
index 0000000..e0ce414
--- /dev/null
+++ b/src/components/UI/Spinner.vue
@@ -0,0 +1,72 @@
+<template>
+    <span :class="['ui-spinner', `ui-spinner--${sizeClass}`]" :style="sizeStyle" role="status">
+        <span class="ui-spinner__ring" aria-hidden="true"></span>
+        <span :class="visibleLabel ? 'ui-spinner__label' : 'sr-only'">{{ label }}</span>
+    </span>
+</template>
+<script setup>
+/**
+ * Petit indicateur de chargement en ligne.
+ * `label` est lu par les lecteurs d'écran (visible si `visibleLabel`).
+ * `size` : 'sm' | 'md' | 'lg' ou une longueur CSS ('24px', '2em'…).
+ */
+import { computed } from 'vue';
+
+const props = defineProps({
+    label: {
+        type: String,
+        default: 'Chargement…'
+    },
+    size: {
+        type: String,
+        default: 'md'
+    },
+    visibleLabel: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const PRESETS = ['sm', 'md', 'lg'];
+const sizeClass = computed(() => (PRESETS.includes(props.size) ? props.size : 'custom'));
+const sizeStyle = computed(() => (PRESETS.includes(props.size) ? null : { '--spinner-size': props.size }));
+</script>
+<style scoped>
+.ui-spinner {
+    --spinner-size: 1.25em;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-secondary);
+    vertical-align: middle;
+}
+
+.ui-spinner--sm { --spinner-size: 14px; }
+.ui-spinner--md { --spinner-size: 20px; }
+.ui-spinner--lg { --spinner-size: 32px; }
+
+.ui-spinner__ring {
+    display: inline-block;
+    flex-shrink: 0;
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    box-sizing: border-box;
+    border: max(2px, calc(var(--spinner-size) / 9)) solid color-mix(in srgb, var(--main) 25%, transparent);
+    border-top-color: var(--main);
+    border-radius: 50%;
+    animation: u-spin 0.75s linear infinite;
+}
+
+.ui-spinner__label {
+    font-size: 0.9em;
+}
+
+/* Le spinner porte une information : il continue de tourner, plus lentement */
+@media (prefers-reduced-motion: reduce) {
+    .ui-spinner__ring {
+        animation-duration: 1.6s !important;
+        animation-iteration-count: infinite !important;
+    }
+}
+</style>
diff --git a/src/components/UI/Splash.vue b/src/components/UI/Splash.vue
index 7c51121..8b0679a 100644
--- a/src/components/UI/Splash.vue
+++ b/src/components/UI/Splash.vue
@@ -1,13 +1,14 @@
 <template>
    <div class="splash-container">
       <div class="splash-title">
-         <LogoWhite class="img"/>
+         <LogoWhite class="img" aria-hidden="true" focusable="false"/>
          <h1>Subsonics</h1>
       </div>
       <span class="high"><slot></slot></span>
       <span v-for="(note, index) in notes" 
          :key="index"
-         class="note delayed" 
+         class="note delayed"
+         aria-hidden="true" 
          :style="{ left: `${note.x}%`, top: `${note.y}%`, '--i': index }"
       >
          {{ note.value }}
@@ -16,6 +17,10 @@
 
 </template>
 <script setup>
+/**
+ * Fond plein écran rose dégradé avec notes de musique flottantes (décoratives) et logo.
+ * Slot par défaut : contenu centré au premier plan.
+ */
 import LogoWhite from '@/assets/LogoWhite.vue';
 import { computed, ref } from 'vue';
 
@@ -85,7 +90,7 @@ generateNotes();
    h1 {
       font-family: 'Gunship';
       font-size: 30px;
-      color: white;
+      color: var(--main-contrast);
       user-select: none;
 
    }
diff --git a/src/components/UI/SubsonicsLogo.vue b/src/components/UI/SubsonicsLogo.vue
index c28fa64..419eee1 100644
--- a/src/components/UI/SubsonicsLogo.vue
+++ b/src/components/UI/SubsonicsLogo.vue
@@ -1,15 +1,18 @@
 <template>
     <div class="subsonics-logo">
-        <LogoDark class="img" v-if="globalStore.theme == 'light'"/>
-        <LogoLight class="img" v-else/>
+        <LogoDark class="img" v-if="globalStore.theme == 'light'" aria-hidden="true" focusable="false"/>
+        <LogoLight class="img" v-else aria-hidden="true" focusable="false"/>
         <div v-if="dev" class="text-p">
             <h1>Subsonics</h1>
-            <p>Developement</p>
+            <p>Développement</p>
         </div>
         <h1 v-if="!dev">Subsonics</h1>
     </div>
 </template>
 <script setup>
+/**
+ * Logo + nom « Subsonics » (mention « Développement » en mode dev). Décoratif : le titre est le texte.
+ */
 import LogoDark from '@/assets/LogoDark.vue';
 import LogoLight from '@/assets/LogoLight.vue';
 import { useGlobalStore } from '@/stores/globalStore';
diff --git a/src/components/UI/Success.vue b/src/components/UI/Success.vue
index 5167d24..ee21d95 100644
--- a/src/components/UI/Success.vue
+++ b/src/components/UI/Success.vue
@@ -1,30 +1,32 @@
 <template>
-    <div>
-     <Icon icon="fa-solid fa-check-circle"></Icon>
-     <div class="success-message">
-        <slot></slot>
-     </div>
-   
+    <div class="feedback" role="status">
+        <Icon class="feedback-icon" icon="fa-solid fa-check-circle" aria-hidden="true"></Icon>
+        <div class="success-message">
+            <slot></slot>
+        </div>
     </div>
-  
 </template>
+<script setup>
+/**
+ * Message de réussite en vert (role="status"). Slot par défaut : le message.
+ */
+</script>
 <style scoped>
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+/* Spécificité de « div » (comme avant) : une classe posée par le parent reste prioritaire */
+div:where(.feedback) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-success);
+    animation: u-fade-in 0.5s ease-in-out;
 }
 
-    div {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        color: var(--text-success);
-        animation: fadeIn 0.5s ease-in-out;
-    }
+.feedback-icon {
+    flex-shrink: 0;
+}
 
-    .success-message {
-        display: flex;
-        text-align: justify;
-    }
+.success-message {
+    display: flex;
+    text-align: justify;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/UI/Switch.vue b/src/components/UI/Switch.vue
new file mode 100644
index 0000000..b4e5852
--- /dev/null
+++ b/src/components/UI/Switch.vue
@@ -0,0 +1,176 @@
+<template>
+    <div :class="['ui-switch', { 'ui-switch--disabled': disabled, 'ui-switch--on': modelValue }, $attrs.class]" :style="$attrs.style">
+        <div v-if="label || description || $slots.default" class="ui-switch__text">
+            <label :id="labelId" :for="controlId()" class="ui-switch__label">
+                <slot>{{ label }}</slot>
+            </label>
+            <span v-if="description" :id="descriptionId" class="ui-switch__description">{{ description }}</span>
+        </div>
+        <button
+            v-bind="controlAttrs()"
+            :id="controlId()"
+            type="button"
+            role="switch"
+            class="ui-switch__control"
+            :aria-checked="modelValue ? 'true' : 'false'"
+            :aria-labelledby="labelledBy()"
+            :aria-describedby="describedBy()"
+            :disabled="disabled"
+            @click="toggle"
+        >
+            <span class="ui-switch__thumb" aria-hidden="true"></span>
+        </button>
+    </div>
+</template>
+<script setup>
+/**
+ * Interrupteur on/off (role="switch").
+ * v-model (Boolean), `label` (ou slot par défaut), `description`, `disabled`.
+ * Sans libellé visible, passer un aria-label : il est transmis au bouton.
+ * Un `id` ou un `aria-labelledby` passés par le parent sont prioritaires (ex. <label for="…"> externe).
+ */
+import { useAttrs, useId, useSlots } from 'vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        default: null
+    },
+    description: {
+        type: String,
+        default: null
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// class / style vont sur le conteneur, le reste (aria-label, data-*…) sur le bouton
+const attrs = useAttrs();
+const slots = useSlots();
+function controlAttrs() {
+    const { class: _class, style: _style, id: _id, 'aria-labelledby': _labelledby, 'aria-describedby': _describedby, ...rest } = attrs;
+    return rest;
+}
+
+const uid = useId();
+const generatedId = `switch-${uid}`;
+// useAttrs() n'est pas réactif : relu à chaque rendu
+function controlId() {
+    return attrs.id || generatedId;
+}
+// aria-describedby du parent conservé et complété par la description
+function describedBy() {
+    const ids = [attrs['aria-describedby'], props.description ? descriptionId : null].filter(Boolean);
+    return ids.length ? ids.join(' ') : undefined;
+}
+function labelledBy() {
+    if (attrs['aria-labelledby']) return attrs['aria-labelledby'];
+    return (props.label || slots.default) ? labelId : undefined;
+}
+const labelId = `switch-label-${uid}`;
+const descriptionId = `switch-desc-${uid}`;
+
+function toggle() {
+    if (props.disabled) return;
+    const value = !props.modelValue;
+    emit('update:modelValue', value);
+    emit('change', value);
+}
+</script>
+<style scoped>
+.ui-switch {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-width: 0;
+}
+
+.ui-switch__text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.ui-switch__label {
+    font-weight: 500;
+    line-height: 1.3;
+    color: var(--text);
+    cursor: pointer;
+}
+
+.ui-switch__description {
+    font-size: 0.85em;
+    line-height: 1.35;
+    color: var(--text-secondary);
+}
+
+.ui-switch__control {
+    position: relative;
+    flex-shrink: 0;
+    width: 42px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-pill);
+    background-color: var(--quaternary);
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur) var(--ease), box-shadow var(--dur-fast) ease;
+}
+
+.ui-switch__control:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.ui-switch__thumb {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--dur) var(--ease);
+}
+
+.ui-switch--on .ui-switch__control {
+    background-color: var(--main);
+}
+
+.ui-switch--on .ui-switch__thumb {
+    transform: translateX(18px);
+}
+
+.ui-switch:not(.ui-switch--disabled) .ui-switch__control:hover {
+    background-color: color-mix(in srgb, var(--quaternary) 80%, var(--text));
+}
+
+.ui-switch--on:not(.ui-switch--disabled) .ui-switch__control:hover {
+    background-color: var(--main-hover);
+}
+
+.ui-switch--disabled {
+    opacity: 0.55;
+}
+
+.ui-switch--disabled .ui-switch__label,
+.ui-switch--disabled .ui-switch__control {
+    cursor: not-allowed;
+}
+</style>
diff --git a/src/components/UI/Tag.vue b/src/components/UI/Tag.vue
index 1cae38c..822e784 100644
--- a/src/components/UI/Tag.vue
+++ b/src/components/UI/Tag.vue
@@ -1,11 +1,19 @@
 <template>
-    <div class="tag" :style="{ borderColor: props.color }">
-        <Icon :color="props.color" :icon="props.icon"/>
-        <p><slot></slot></p>
+    <div :class="['tag', tone ? `tag--${tone}` : null, { 'tag--colored': color || tone }]" :style="tagStyle">
+        <Icon v-if="icon" class="tag-icon" :icon="icon" aria-hidden="true"/>
+        <span class="tag-text"><slot></slot></span>
     </div>
 </template>
 <script setup>
- const props = defineProps({
+/**
+ * Étiquette en pilule.
+ * `tone` (default | main | success | warning | error | info) teinte le fond et la bordure ;
+ * `color` (historique) colore la bordure et l'icône — prioritaire sur le ton s'il est fourni.
+ * `icon` : icône décorative (pastille ronde par défaut). Slot par défaut : le texte (un <span>, utilisable dans un titre).
+ */
+import { computed } from 'vue';
+
+const props = defineProps({
     color: {
         type: String,
         default: ''
@@ -13,26 +21,66 @@
     icon: {
         type: String,
         default: 'fa-circle fa-solid'
+    },
+    tone: {
+        type: String,
+        default: null,
+        validator: (value) => value === null || ['default', 'main', 'success', 'warning', 'error', 'info'].includes(value)
     }
 });
+
+const tagStyle = computed(() => (props.color ? { '--tag-color': props.color } : null));
 </script>
 <style scoped>
 .tag {
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    padding: 5px 6px;
+    --tag-color: color-mix(in srgb, var(--text) 35%, transparent);
+
+    border: 1px solid var(--tag-color);
+    border-radius: var(--radius-pill);
+    padding: 4px 8px;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 0.7em;
+    font-weight: 500;
+    line-height: 1.2;
     width: fit-content;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
-p {
+.tag-icon {
+    flex-shrink: 0;
+}
+
+/* Sans couleur ni ton, l'icône garde la couleur du texte (comme avant) */
+.tag--colored .tag-icon {
+    color: var(--tag-color);
+}
+
+/* Tons : fond teinté à 15 % + bordure de la couleur du ton */
+.tag--default,
+.tag--main,
+.tag--success,
+.tag--warning,
+.tag--error,
+.tag--info {
+    background-color: color-mix(in srgb, var(--tag-color) 15%, transparent);
+}
+
+.tag--default { --tag-color: var(--text-secondary); }
+.tag--main { --tag-color: var(--main); }
+.tag--success { --tag-color: var(--text-success); }
+.tag--warning { --tag-color: var(--text-warning); }
+.tag--error { --tag-color: var(--text-error); }
+.tag--info { --tag-color: var(--text-info); }
+
+.tag-text {
     margin: 0;
     display: flex;
     align-items: center;
+    min-width: 0;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UI/User.vue b/src/components/UI/User.vue
index fd2a8e1..bc74e5f 100644
--- a/src/components/UI/User.vue
+++ b/src/components/UI/User.vue
@@ -11,6 +11,10 @@
     </div>
 </template>
 <script setup>
+/**
+ * Carte utilisateur : avatar (pastille de rôle), nom d'affichage et identifiant Discord.
+ * Props : user ({ identity: { id, avatar, username, global_name, isMod, isOwner, isAdmin } }), mobile (disposition centrée).
+ */
 import Avatar from './Avatar.vue';
 const props = defineProps({
     user: {
diff --git a/src/components/UI/Video.vue b/src/components/UI/Video.vue
index ee9c245..45dec4c 100644
--- a/src/components/UI/Video.vue
+++ b/src/components/UI/Video.vue
@@ -1,17 +1,17 @@
 <template>
 <div ref="videoContainer" :class="{'video': true, 'video-mobile': mobile}">
   <div ref="thumbnailContainer" :class="{'thumbnail-container': true, 'thumbnail-mobile': mobile}">
-  <img v-if="video"  class="thumbnail" :src="video.thumbnail" alt="Video Thumbnail" />
+  <img v-if="video"  class="thumbnail" :src="video.thumbnail" alt="" loading="lazy" decoding="async" />
   <div v-else class="thumbnail-placeholder"></div>
   <p v-if="video && typeof video.duration === 'number' && video.duration != 0 && !mobile" class="duration">{{ getVideoDuration(video.duration) }}</p>
-  <p v-else-if="video && video.duration === 0 && !mobile" class="duration align"><Icon font-size="10px" color="red" icon="fa-solid fa-circle"></Icon> LIVE</p>
+  <p v-else-if="video && video.duration === 0 && !mobile" class="duration align"><Icon class="live-dot" icon="fa-solid fa-circle" aria-hidden="true"></Icon> LIVE</p>
   <span v-else></span>
   <slot></slot>
   </div>
   <div :class="{'info-mobile': mobile, 'info': !mobile}">
     <Marquee v-if="video && mobile"><p>{{ video.title }}</p></Marquee>
     <p v-else-if="video" class="title">{{ video.title }}</p>
-    <p v-else class="title">Aucun titre jouée</p>
+    <p v-else class="title">Aucun titre joué</p>
 
     <p v-if="video" class="author">{{ video.author }}</p>
     <p v-else class="author">Aucun auteur</p>
@@ -19,6 +19,12 @@
 </div>
 </template>
 <script setup>
+/**
+ * Carte d'un titre : miniature 16:9 (durée ou LIVE en surimpression), titre et auteur.
+ * Props : video ({ title, author, thumbnail, duration } ou null), mobile (disposition en ligne, titre défilant).
+ * Slot par défaut : superposé à la miniature (boutons d'action de VideoComposable).
+ * Exposé : getThumbnailContainer(), getVideoContainer() (éléments DOM).
+ */
 import { getVideoDuration } from '@/utils/TimeConverter';
 import { ref } from 'vue';
 import Marquee from './Marquee.vue';
@@ -59,6 +65,11 @@ defineExpose({
     gap: 3px;
 }
 
+.live-dot {
+    font-size: 0.7em;
+    color: var(--text-error);
+}
+
 .thumbnail {
     width: 100%;
     height: auto;
@@ -98,8 +109,9 @@ defineExpose({
     position: absolute;
     bottom: 0px;
     right: 0px;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
+    background-color: rgba(0, 0, 0, 0.65);
+    color: var(--on-media);
+    font-variant-numeric: tabular-nums;
     padding: 2px 5px;
     border-radius: 15px;
     font-size: 0.8em;
diff --git a/src/components/UI/VideoList.vue b/src/components/UI/VideoList.vue
index d346801..660b395 100644
--- a/src/components/UI/VideoList.vue
+++ b/src/components/UI/VideoList.vue
@@ -1,24 +1,27 @@
 <template>
 <div :data-theme="mobile ? 'dark' : null" :class="'video'" >
   <div :class="mobile ? 'mobile-thumbnail-container' : 'thumbnail-container'">
-    <img v-if="video && video.thumbnail && !playerOffline" :class="mobile ? 'mobile-thumbnail' : 'thumbnail'" :src="video.thumbnail" alt="Video Thumbnail" />
+    <img v-if="video && video.thumbnail && !playerOffline" :class="mobile ? 'mobile-thumbnail' : 'thumbnail'" :src="video.thumbnail" alt="" />
     <div v-else :class="mobile ? 'mobile-thumbnail-placeholder' : 'thumbnail-placeholder'"></div>
   </div>
   <div class="info">
     <p v-if="playerOffline" class="title secondary">Subsonics est hors-ligne</p>
     <Marquee v-else-if="video" :class="{'title': true}">
-      <span :style="{ color: mobile ? 'white' : '' }">{{ video.title }}</span>
+      <span :style="{ color: mobile ? 'var(--text)' : '' }">{{ video.title }}</span>
     </Marquee>
-    <p v-else class="title">Aucun titre jouée</p>
+    <p v-else class="title">Aucun titre joué</p>
 
-    <p v-if="playerOffline" class="author">Connectez vous d'abord à un salon audio pour lancer un titre</p>
+    <p v-if="playerOffline" class="author">Connectez-vous d'abord à un salon vocal pour lancer un titre</p>
     <p v-else-if="video" class="author">{{ video.author }}</p>
     <p v-else class="author">Aucun auteur</p>
   </div>
 </div>
 </template>
 <script setup>
-import { ref, onMounted, watch } from "vue";
+/**
+ * Ligne « titre » compacte : miniature, titre (défilant s'il est long) et auteur.
+ * Props : video ({ title, author, thumbnail } ou null), playerOffline (message hors ligne), mobile (miniature carrée, thème sombre).
+ */
 import Marquee from "./Marquee.vue";
 
 const props = defineProps({
@@ -94,7 +97,7 @@ const props = defineProps({
     bottom: 0px;
     right: 0px;
     background-color: rgba(0, 0, 0, 0.5);
-    color: white;
+    color: var(--on-media);
     padding: 2px 5px;
     border-radius: 15px;
     font-size: 0.8em;
diff --git a/src/components/UI/VideoQueue.vue b/src/components/UI/VideoQueue.vue
index 8309434..097329b 100644
--- a/src/components/UI/VideoQueue.vue
+++ b/src/components/UI/VideoQueue.vue
@@ -2,24 +2,27 @@
 <div :data-theme="mobile ? 'dark' : null" :class="'video'" >
   <div :class="mobile ? 'mobile-thumbnail-container' : 'thumbnail-container'">
     <div v-if="playerOffline" :class="mobile ? 'mobile-thumbnail-placeholder' : 'thumbnail-placeholder'"></div>
-    <img v-else-if="video && video.thumbnail" :class="mobile ? 'mobile-thumbnail' : 'thumbnail'" :src="video.thumbnail" alt="Video Thumbnail" />
+    <img v-else-if="video && video.thumbnail" :class="mobile ? 'mobile-thumbnail' : 'thumbnail'" :src="video.thumbnail" alt="" />
     <div v-else :class="mobile ? 'mobile-thumbnail-placeholder' : 'thumbnail-placeholder'"></div>
   </div>
   <div class="info">
     <p v-if="playerOffline" class="title secondary">Subsonics est hors-ligne</p>
     <Marquee v-else-if="video" :class="{'title': true}">
-      <span :style="{ color: mobile ? 'white' : '' }">{{ video.title }}</span>
+      <span :style="{ color: mobile ? 'var(--text)' : '' }">{{ video.title }}</span>
     </Marquee>
-    <p v-else class="title">Aucun titre jouée</p>
+    <p v-else class="title">Aucun titre joué</p>
 
-    <p v-if="playerOffline" class="author">Connectez vous d'abord à un salon audio pour lancer un titre</p>
+    <p v-if="playerOffline" class="author">Connectez-vous d'abord à un salon vocal pour lancer un titre</p>
     <p v-else-if="video" class="author">{{ video.author }}</p>
     <p v-else class="author">Aucun auteur</p>
   </div>
 </div>
 </template>
 <script setup>
-import { ref, onMounted, watch } from "vue";
+/**
+ * Ligne « titre » compacte : miniature, titre (défilant s'il est long) et auteur.
+ * Props : video ({ title, author, thumbnail } ou null), playerOffline (message hors ligne), mobile (miniature carrée, thème sombre).
+ */
 import Marquee from "./Marquee.vue";
 
 const props = defineProps({
@@ -95,7 +98,7 @@ const props = defineProps({
     bottom: 0px;
     right: 0px;
     background-color: rgba(0, 0, 0, 0.5);
-    color: white;
+    color: var(--on-media);
     padding: 2px 5px;
     border-radius: 15px;
     font-size: 0.8em;
diff --git a/src/components/Widget/Dispatcher.vue b/src/components/Widget/Dispatcher.vue
index 6247e29..c4db180 100644
--- a/src/components/Widget/Dispatcher.vue
+++ b/src/components/Widget/Dispatcher.vue
@@ -1,6 +1,6 @@
 <template>
     <Box class="box" padding="closed">
-        <Carousel only-mobile :auto-play="false" disable-arrow class="carousel">
+        <Carousel only-mobile :auto-play="false" disable-arrow class="carousel" :page-labels="['Playlists', 'File de lecture', 'Compte']">
            <Playlist/>
            <Queue class="dispatch-mobile"/>
            <AccountMobile mobile class="account"/>
diff --git a/src/components/Widget/Guild/GuildHeaderUsers.vue b/src/components/Widget/Guild/GuildHeaderUsers.vue
index 0e9cb82..2a065e2 100644
--- a/src/components/Widget/Guild/GuildHeaderUsers.vue
+++ b/src/components/Widget/Guild/GuildHeaderUsers.vue
@@ -1,44 +1,53 @@
 <template>
-    <div class="container" v-for="(member, index) in server.members" :key="index">
-        <User :user="{identity: member}" /> 
-        <IconAction :title="`Action sur ${member.username}`" @click="setTargetUser(member)" v-if="(userStore.userInfo.labels.includes('ADMIN') || (userStore.userInfo.labels.includes('MOD_' + server.id) && !member.isMod) || server.owner == userStore.userInfo.identity.id) && (member.id != server.owner && !member.isAdmin) "
+    <li class="member" v-for="member in server.members" :key="member.id">
+        <User :user="{identity: member}" />
+        <IconAction
+            v-if="canActOn(member)"
             icon="fa-solid fa-ellipsis-vertical"
+            :label="`Actions sur ${member.global_name || member.username}`"
+            aria-haspopup="menu"
+            @click="setTargetUser(member, $event)"
         />
-        
-    </div>
-    <ContextMenu ref="menuRef" v-if="userStore.userInfo.labels.includes('ADMIN') || userStore.userInfo.labels.includes('MOD_' + server.id) || server.owner == userStore.userInfo.identity.id">
-            <div v-if="!targetUser?.isMod" @click="banUser()">
-                <Icon icon="fa-solid fa-hammer"/>
-                <p>Bannir</p>
-            </div>
-            <div @click="toogleMod()" v-if="userStore.userInfo.labels.includes('ADMIN') || userStore.userInfo.identity.id == server.owner">
-                <Icon icon="fa-solid fa-user-shield"/>
-                <p v-if="!targetUser?.isMod">Nommer modérateur</p>
-                <p v-else>Retirer les droits de modérateur</p>
-            </div>
+    </li>
+    <ContextMenu
+        v-if="isStaff"
+        ref="menuRef"
+        :label="targetUser ? `Actions sur ${targetUser.global_name || targetUser.username}` : 'Actions'"
+    >
+        <button v-if="canSwitchMod" type="button" @click="toogleMod()">
+            <Icon icon="fa-solid fa-user-shield" aria-hidden="true"/>
+            <span>{{ targetUser?.isMod ? 'Retirer les droits de modérateur' : 'Nommer modérateur' }}</span>
+        </button>
+        <button v-if="!targetUser?.isMod" type="button" class="ui-menu__danger" @click="askBan()">
+            <Icon icon="fa-solid fa-hammer" aria-hidden="true"/>
+            <span>Bannir du serveur</span>
+        </button>
     </ContextMenu>
-
+    <Modal v-if="isStaff" ref="banModal" size="sm" icon="fa-solid fa-hammer" title="Bannir cet utilisateur ?">
+        <p class="ban-text">
+            <strong>{{ banTarget?.global_name || banTarget?.username }}</strong> ne pourra plus utiliser Subsonics sur ce serveur.
+            Un modérateur pourra lever le bannissement depuis la gestion du serveur.
+        </p>
+        <template #footer>
+            <Button variant="secondary" @click="banModal.close()">Annuler</Button>
+            <Button variant="danger" icon="fa-solid fa-hammer" @click="banUser()">Bannir</Button>
+        </template>
+    </Modal>
 </template>
 <script setup>
+/**
+ * Lignes (<li>) des utilisateurs connectés d'un serveur, avec menu de modération
+ * (nommer / retirer modérateur, bannir après confirmation). À placer dans une <ul>.
+ * Requêtes : /OWNER/USERS/SWITCH_MOD id, /MOD/USERS/BAN id.
+ */
+import { computed, ref } from 'vue';
 import User from '@/components/UI/User.vue';
-import { ref } from 'vue';
 import IconAction from '@/components/UI/IconAction.vue';
 import ContextMenu from '@/components/UI/ContextMenu.vue';
+import Modal from '@/components/UI/Modal.vue';
+import Button from '@/components/UI/Button.vue';
 import { useUserStore } from '@/stores/userStore';
 import { IORequest } from '@/utils/IORequest';
-import Events from '@/utils/Events';
-
-const userStore = useUserStore();
-
-const targetUser = ref(null);
-const menuRef = ref(null);
-
-function setTargetUser(user) {
-    targetUser.value = user;
-    if (menuRef.value && targetUser.value) {
-        menuRef.value.show();
-    }
-}   
 
 const props = defineProps({
     server: {
@@ -47,27 +56,68 @@ const props = defineProps({
     }
 });
 
+const userStore = useUserStore();
+
+const targetUser = ref(null);
+const banTarget = ref(null);
+const menuRef = ref(null);
+const banModal = ref(null);
+
+const labels = computed(() => userStore.userInfo?.labels || []);
+const myId = computed(() => userStore.userInfo?.identity?.id);
+const isAdmin = computed(() => labels.value.includes('ADMIN'));
+const isOwner = computed(() => props.server?.owner == myId.value);
+const isMod = computed(() => labels.value.includes('MOD_' + props.server?.id));
+const isStaff = computed(() => isAdmin.value || isMod.value || isOwner.value);
+const canSwitchMod = computed(() => isAdmin.value || isOwner.value);
+
+// Mêmes règles qu'avant : jamais sur le propriétaire ni un administrateur ; un modérateur n'agit pas sur un autre
+function canActOn(member) {
+    if (member.id == props.server.owner || member.isAdmin) return false;
+    return isAdmin.value || isOwner.value || (isMod.value && !member.isMod);
+}
+
+function setTargetUser(user, event) {
+    targetUser.value = user;
+    if (menuRef.value && targetUser.value) {
+        menuRef.value.show(event);
+    }
+}
+
 function toogleMod() {
     if (!targetUser.value) return;
-    IORequest("/OWNER/USERS/SWITCH_MOD", () => {
-        console.log("Mod switched for user", targetUser.value.id);
-    }, targetUser.value.id)
+    IORequest("/OWNER/USERS/SWITCH_MOD", null, targetUser.value.id);
+}
+
+function askBan() {
+    if (!targetUser.value) return;
+    banTarget.value = targetUser.value;
+    banModal.value?.open();
 }
 
 function banUser() {
-    // : /MOD/USERS/BAN
-    if (!targetUser.value) return;
-    IORequest("/MOD/USERS/BAN", () => {
-        console.log("User banned:", targetUser.value.id);
-    }, targetUser.value.id);
-
+    if (!banTarget.value) return;
+    IORequest("/MOD/USERS/BAN", null, banTarget.value.id);
+    banModal.value?.close();
 }
 </script>
 <style scoped>
-
-.container {
+.member {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 8px;
+    padding: 4px 6px;
+    border-radius: var(--radius-sm);
 }
-</style>
\ No newline at end of file
+
+.member:hover,
+.member:focus-within {
+    background-color: var(--surface-hover);
+}
+
+.ban-text {
+    margin: 0;
+    line-height: 1.5;
+}
+</style>
diff --git a/src/components/Widget/Guild/GuildSettings.vue b/src/components/Widget/Guild/GuildSettings.vue
index a58c0a7..2468a53 100644
--- a/src/components/Widget/Guild/GuildSettings.vue
+++ b/src/components/Widget/Guild/GuildSettings.vue
@@ -3,9 +3,12 @@
         <ModalTree title="Utilisateurs" icon="fa-solid fa-users">
             <GuildUsers :server="server"/>
         </ModalTree>
-        <ModalTree v-if="userStore.userInfo.labels.includes('ADMIN') || userStore.userInfo.identity.id == server.owner" title="Sécurité" icon="fa-solid fa-shield-halved">
+        <ModalTree v-if="canManage" title="Sécurité" icon="fa-solid fa-shield-halved">
            <GuildSecurity :server="server"/>
         </ModalTree>
+        <ModalTree v-if="canManage" title="Playlists partagées" icon="fa-solid fa-list-ul">
+           <GuildPlaylists :server="server"/>
+        </ModalTree>
         <ModalTree title="Statistiques" icon="fa-solid fa-chart-simple">
             <GuildStats :server="server"/>
         </ModalTree>
@@ -14,10 +17,11 @@
 <script setup>
 import Modal from '@/components/UI/Modal.vue';
 import ModalTree from '@/components/UI/ModalTree.vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import GuildUsers from './Settings/GuildUsers.vue';
 import GuildStats from './Settings/GuildStats.vue';
 import GuildSecurity from './Settings/GuildSecurity.vue';
+import GuildPlaylists from './Settings/GuildPlaylists.vue';
 import Events from '@/utils/Events';
 import { useUserStore } from '@/stores/userStore';
 const userStore = useUserStore();
@@ -34,6 +38,14 @@ const props = defineProps({
     }
 });
 
+// Propriétaire du serveur ou administrateur du bot (même règle que le backend : isGuildOwnerOrAdmin)
+const canManage = computed(() => {
+    const info = userStore.userInfo;
+    if (!info || !props.server) return false;
+    const labels = Array.isArray(info.labels) ? info.labels : [];
+    return labels.includes('ADMIN') || (!!info.identity?.id && info.identity.id == props.server.owner);
+});
+
 defineExpose({
     open() {
         if (modal.value) {
@@ -47,4 +59,4 @@ defineExpose({
         }
     }
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Widget/Guild/Settings/GuildPlaylists.vue b/src/components/Widget/Guild/Settings/GuildPlaylists.vue
new file mode 100644
index 0000000..7e25fcd
--- /dev/null
+++ b/src/components/Widget/Guild/Settings/GuildPlaylists.vue
@@ -0,0 +1,190 @@
+<template>
+    <div class="guild-pl">
+        <p class="guild-pl__intro">
+            Une liste de playlists commune à tout le serveur, affichée à côté des playlists personnelles de chaque membre.
+        </p>
+
+        <Switch
+            :model-value="settings.enabled"
+            label="Activer les playlists partagées"
+            :description="settings.enabled ? 'Les membres voient l\'onglet « Serveur » dans leurs playlists.' : 'Désactivées : les playlists existantes sont conservées et réapparaîtront à la réactivation.'"
+            :disabled="saving !== null || !loaded"
+            @update:model-value="update({ enabled: $event })"
+        />
+
+        <div :class="['guild-pl__editors', { 'guild-pl__editors--off': !settings.enabled }]">
+            <p :id="editorsLabelId" class="guild-pl__label">Qui peut les modifier ?</p>
+            <SegmentedControl
+                :model-value="settings.editors"
+                :options="EDITOR_OPTIONS"
+                :aria-labelledby="editorsLabelId"
+                :aria-describedby="editorsHintId"
+                @update:model-value="update({ editors: $event })"
+            />
+            <p :id="editorsHintId" class="guild-pl__hint">
+                {{ settings.editors === 'mods'
+                    ? 'Les membres peuvent écouter et copier les playlists ; seuls les modérateurs et le propriétaire créent, renomment et modifient.'
+                    : 'Tous les membres peuvent créer des playlists et ajouter, retirer ou réordonner des titres.' }}
+                Seuls leur créateur et les modérateurs peuvent supprimer une playlist.
+            </p>
+        </div>
+
+        <p v-if="settings.enabled" class="guild-pl__count">
+            <Icon icon="fa-solid fa-list-ul" aria-hidden="true" />
+            {{ countLabel }}
+        </p>
+
+        <p class="guild-pl__status" aria-live="polite">
+            <template v-if="saving !== null"><Spinner size="sm" label="Enregistrement…" visible-label /></template>
+            <template v-else-if="feedback">
+                <Icon :class="feedback.ok ? 'guild-pl__ok' : 'guild-pl__ko'" :icon="feedback.ok ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-exclamation'" aria-hidden="true" />
+                {{ feedback.text }}
+            </template>
+        </p>
+    </div>
+</template>
+<script setup>
+/**
+ * Réglage « Playlists partagées » du serveur actif (propriétaire du serveur ou administrateur du bot,
+ * même règle que le backend : /OWNER/PLAYLISTS/SETTINGS).
+ */
+import { computed, onBeforeUnmount, ref, useId } from 'vue';
+import Switch from '@/components/UI/Switch.vue';
+import SegmentedControl from '@/components/UI/SegmentedControl.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import { usePlaylistStore } from '@/stores/playlistStore';
+import { onModalOpen } from '@/utils/ModalContext';
+
+const props = defineProps({
+    server: {
+        type: Object,
+        required: true
+    }
+});
+
+const EDITOR_OPTIONS = [
+    { value: 'members', label: 'Tous les membres', icon: 'fa-solid fa-users' },
+    { value: 'mods', label: 'Modérateurs seulement', icon: 'fa-solid fa-user-shield' }
+];
+
+const playlistStore = usePlaylistStore();
+
+const uid = useId();
+const editorsLabelId = `guild-pl-editors-${uid}`;
+const editorsHintId = `guild-pl-editors-hint-${uid}`;
+
+const saving = ref(null);
+const feedback = ref(null);
+let feedbackTimer = null;
+
+// Réglage connu par le store (chargé avec la liste), sinon celui reçu avec /GUILD/INFO
+const loaded = computed(() => playlistStore.guildLoaded || !!props.server?.sharedPlaylists);
+const settings = computed(() => {
+    if (playlistStore.guildLoaded && playlistStore.guildId === props.server?.id) return playlistStore.guildSettings;
+    const info = props.server?.sharedPlaylists;
+    return { enabled: !!info?.enabled, editors: info?.editors === 'mods' ? 'mods' : 'members' };
+});
+
+const countLabel = computed(() => {
+    const n = playlistStore.counts.guild;
+    if (n === 0) return 'Aucune playlist partagée pour le moment.';
+    return `${n} playlist${n > 1 ? 's' : ''} partagée${n > 1 ? 's' : ''}`;
+});
+
+onModalOpen(() => {
+    feedback.value = null;
+    if (!playlistStore.guildLoading) playlistStore.fetchGuild();
+});
+
+function showFeedback(ok, text) {
+    feedback.value = { ok, text };
+    clearTimeout(feedbackTimer);
+    feedbackTimer = setTimeout(() => {
+        feedback.value = null;
+    }, ok ? 4000 : 8000);
+}
+
+async function update(patch) {
+    if (saving.value !== null) return;
+    saving.value = Object.keys(patch)[0];
+    feedback.value = null;
+    const result = await playlistStore.updateGuildSettings(patch);
+    saving.value = null;
+    if (!result.ok) {
+        showFeedback(false, result.message);
+        return;
+    }
+    if (patch.enabled !== undefined) {
+        showFeedback(true, patch.enabled ? 'Playlists partagées activées.' : 'Playlists partagées désactivées (rien n\'a été supprimé).');
+    } else {
+        showFeedback(true, patch.editors === 'mods' ? 'Seuls les modérateurs peuvent désormais les modifier.' : 'Tous les membres peuvent désormais les modifier.');
+    }
+}
+
+onBeforeUnmount(() => clearTimeout(feedbackTimer));
+</script>
+<style scoped>
+.guild-pl {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin-top: 8px;
+}
+
+.guild-pl__intro {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--text-secondary);
+}
+
+.guild-pl__editors {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    transition: opacity var(--dur-fast) ease;
+}
+
+/* Réglable même désactivé (préparé avant l'activation), mais visuellement secondaire */
+.guild-pl__editors--off {
+    opacity: 0.6;
+}
+
+.guild-pl__label {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.guild-pl__hint,
+.guild-pl__count {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
+
+.guild-pl__count svg {
+    margin-top: 0.2em;
+}
+
+.guild-pl__status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 1.4em;
+    margin: 0;
+    font-size: 0.85rem;
+}
+
+.guild-pl__ok {
+    color: var(--text-success);
+}
+
+.guild-pl__ko {
+    color: var(--text-error);
+}
+</style>
diff --git a/src/components/Widget/Guild/Settings/GuildSecurity.vue b/src/components/Widget/Guild/Settings/GuildSecurity.vue
index 0c8d6ce..4fa36d9 100644
--- a/src/components/Widget/Guild/Settings/GuildSecurity.vue
+++ b/src/components/Widget/Guild/Settings/GuildSecurity.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="setting">
     <p class="text-secondary"><Icon icon="fa-solid fa-user-shield" /> Autoriser les utilisateurs avec un rôle spécifique</p>
-    <Selector v-model="roleSelected" ref="roleSelector" v-if="roles.length > 0 && modalOpen">
+    <Selector v-model="roleSelected" ref="roleSelector" label="Rôle autorisé" v-if="roles.length > 0 && modalOpen">
       <Tag v-for="role in roles" :key="role.id" :value="role.id" :color="decimalToHex(role.color)">{{role.name.replace("@everyone", "Tout le monde (@everyone)")}}</Tag>
     </Selector>
     <Button @click="updateRole" icon="fa-solid fa-rotate">Mettre à jour</Button>
@@ -13,7 +13,7 @@ import { onMounted, ref, watch } from 'vue';
 import Selector from '@/components/UI/Selector.vue';
 import { IORequest } from '@/utils/IORequest';
 import Tag from '@/components/UI/Tag.vue';
-import Events from '@/utils/Events';
+import { onModalClose, onModalOpen, useModalContext } from '@/utils/ModalContext';
 import Button from '@/components/UI/Button.vue';
 import Success from '@/components/UI/Success.vue';
 
@@ -21,7 +21,9 @@ const roles = ref([])
 const roleSelector = ref(null);
 const roleUpdated = ref(false); 
 const roleSelected = ref(null);
-const modalOpen = ref(false);
+// État de la modale « Gestion » qui contient ce réglage (et non plus de n'importe quelle modale)
+const modalContext = useModalContext();
+const modalOpen = ref(modalContext ? modalContext.isOpen.value : true);
 
 const props = defineProps({
     server: {
@@ -34,13 +36,13 @@ onMounted(() => {
     actualizeRoles();
 })
 
-Events.on("modal:open", () => {
+onModalOpen(() => {
     actualizeRoles();
     modalOpen.value = true;
     roleUpdated.value = false;
 })
 
-Events.on("modal:close", () => {
+onModalClose(() => {
     modalOpen.value = false;
     roleSelected.value = null;
     roleUpdated.value = false;
diff --git a/src/components/Widget/Playlist/ActionMenu.vue b/src/components/Widget/Playlist/ActionMenu.vue
new file mode 100644
index 0000000..dee4c1d
--- /dev/null
+++ b/src/components/Widget/Playlist/ActionMenu.vue
@@ -0,0 +1,376 @@
+<template>
+    <div class="action-menu">
+        <button
+            ref="trigger"
+            type="button"
+            :class="['action-menu__trigger', text ? 'action-menu__trigger--text' : 'action-menu__trigger--icon', { 'action-menu__trigger--open': isOpen }]"
+            aria-haspopup="menu"
+            :aria-expanded="isOpen ? 'true' : 'false'"
+            :aria-controls="isOpen ? menuId : undefined"
+            :aria-label="text ? undefined : label"
+            :title="text ? undefined : label"
+            :disabled="disabled"
+            @click="toggle()"
+            @keydown="onTriggerKeydown"
+        >
+            <Icon :icon="icon" aria-hidden="true" />
+            <span v-if="text">{{ text }}</span>
+            <Icon v-if="text" class="action-menu__chevron" icon="fa-solid fa-chevron-down" aria-hidden="true" />
+        </button>
+        <!-- Hors du flux : les conteneurs défilants coupent ce qui dépasse -->
+        <Teleport to="body">
+            <Transition name="action-pop">
+                <div
+                    v-if="isOpen"
+                    :id="menuId"
+                    ref="menu"
+                    class="action-menu__panel"
+                    role="menu"
+                    :aria-label="label"
+                    @keydown="onMenuKeydown"
+                >
+                    <template v-for="item in items" :key="item.key">
+                        <div v-if="item.separatorBefore" class="action-menu__separator" role="separator"></div>
+                        <button
+                            type="button"
+                            role="menuitem"
+                            tabindex="-1"
+                            :class="['action-menu__item', { 'action-menu__item--danger': item.danger }]"
+                            :aria-disabled="item.disabled ? 'true' : undefined"
+                            @click="choose(item)"
+                        >
+                            <Icon class="action-menu__icon" :icon="item.icon || 'fa-solid fa-circle'" aria-hidden="true" />
+                            <span class="action-menu__label">
+                                {{ item.label }}
+                                <span v-if="item.hint" class="action-menu__hint">{{ item.hint }}</span>
+                            </span>
+                        </button>
+                    </template>
+                </div>
+            </Transition>
+        </Teleport>
+    </div>
+</template>
+<script setup>
+/**
+ * Bouton « Plus d'actions » + menu déroulant accessible (role="menu").
+ * items : [{ key, label, icon?, hint?, danger?, disabled?, separatorBefore? }] ; émet select(key).
+ * Clavier : Entrée / Espace / flèche bas ouvrent ; flèches, Début / Fin parcourent ; Échap ferme.
+ */
+import { nextTick, onBeforeUnmount, ref, useId } from 'vue';
+
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => []
+    },
+    label: {
+        type: String,
+        default: "Plus d'actions"
+    },
+    icon: {
+        type: String,
+        default: 'fa-solid fa-ellipsis'
+    },
+    // Texte visible du bouton (sinon bouton icône seul)
+    text: {
+        type: String,
+        default: null
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['select']);
+
+const menuId = `action-menu-${useId()}`;
+const trigger = ref(null);
+const menu = ref(null);
+const isOpen = ref(false);
+const MARGIN = 8;
+
+function enabledItems() {
+    if (!menu.value) return [];
+    return Array.from(menu.value.querySelectorAll('[role="menuitem"]'))
+        .filter((item) => item.getAttribute('aria-disabled') !== 'true');
+}
+
+function focusItem(index) {
+    const list = enabledItems();
+    if (list.length === 0) return;
+    list[(index + list.length) % list.length].focus();
+}
+
+// Position fixe sous le bouton (au-dessus s'il manque de place), gardée dans la fenêtre
+function placePanel() {
+    if (!trigger.value || !menu.value) return;
+    const rect = trigger.value.getBoundingClientRect();
+    const width = menu.value.offsetWidth;
+    const height = menu.value.offsetHeight;
+    const viewportWidth = document.documentElement.clientWidth;
+    const viewportHeight = window.innerHeight;
+    const left = Math.min(Math.max(rect.right - width, MARGIN), Math.max(MARGIN, viewportWidth - width - MARGIN));
+    let top = rect.bottom + 6;
+    if (top + height > viewportHeight - MARGIN && rect.top - height - 6 >= MARGIN) top = rect.top - height - 6;
+    menu.value.style.top = `${Math.max(MARGIN, top)}px`;
+    menu.value.style.left = `${left}px`;
+}
+
+function onViewportChange(event) {
+    if (event?.type === 'scroll' && menu.value && menu.value.contains(event.target)) return;
+    close(false);
+}
+
+function onOutsidePointer(event) {
+    const inside = trigger.value?.contains(event.target) || menu.value?.contains(event.target);
+    if (!inside) close(false);
+}
+
+function addGlobalListeners() {
+    document.addEventListener('pointerdown', onOutsidePointer, true);
+    window.addEventListener('resize', onViewportChange);
+    window.addEventListener('scroll', onViewportChange, true);
+}
+
+function removeGlobalListeners() {
+    document.removeEventListener('pointerdown', onOutsidePointer, true);
+    window.removeEventListener('resize', onViewportChange);
+    window.removeEventListener('scroll', onViewportChange, true);
+}
+
+function open(focus = 'first') {
+    if (isOpen.value || props.disabled) return;
+    isOpen.value = true;
+    addGlobalListeners();
+    nextTick(() => {
+        placePanel();
+        focusItem(focus === 'last' ? -1 : 0);
+    });
+}
+
+function close(restoreFocus = true) {
+    if (!isOpen.value) return;
+    isOpen.value = false;
+    removeGlobalListeners();
+    if (restoreFocus) nextTick(() => trigger.value?.focus());
+}
+
+function toggle() {
+    if (isOpen.value) close();
+    else open();
+}
+
+function onTriggerKeydown(event) {
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        open();
+    } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        open('last');
+    }
+}
+
+function onMenuKeydown(event) {
+    const list = enabledItems();
+    const index = list.indexOf(document.activeElement);
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            focusItem(index + 1);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            focusItem(index - 1);
+            break;
+        case 'Home':
+            event.preventDefault();
+            focusItem(0);
+            break;
+        case 'End':
+            event.preventDefault();
+            focusItem(list.length - 1);
+            break;
+        case 'Escape':
+            event.preventDefault();
+            // Ne ferme pas la modale qui contiendrait le menu
+            event.stopPropagation();
+            close();
+            break;
+        case 'Tab':
+            close(false);
+            break;
+        default:
+            break;
+    }
+}
+
+function choose(item) {
+    if (item.disabled) return;
+    // Focus rendu au bouton d'abord : une modale ouverte par l'action le restituera ensuite au bon endroit
+    close();
+    nextTick(() => emit('select', item.key));
+}
+
+onBeforeUnmount(removeGlobalListeners);
+
+defineExpose({ open, close });
+</script>
+<style scoped>
+.action-menu {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+}
+
+.action-menu__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border: 1px solid transparent;
+    background-color: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
+}
+
+.action-menu__trigger--icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+}
+
+.action-menu__trigger--text {
+    min-height: 38px;
+    padding: 0 14px;
+    border-color: var(--border);
+    border-radius: var(--radius-pill);
+    color: var(--text);
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.action-menu__trigger:hover:not(:disabled),
+.action-menu__trigger--open {
+    background-color: color-mix(in srgb, var(--text) 9%, transparent);
+    color: var(--text);
+}
+
+.action-menu__trigger:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.action-menu__trigger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.action-menu__chevron {
+    font-size: 0.75em;
+    transition: transform var(--dur-fast) ease;
+}
+
+.action-menu__trigger--open .action-menu__chevron {
+    transform: rotate(180deg);
+}
+
+.action-menu__panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 3900;
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    min-width: 220px;
+    max-width: min(320px, calc(100vw - 30px));
+    padding: 6px;
+    box-sizing: border-box;
+    background-color: var(--primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+}
+
+.action-menu__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    min-height: 36px;
+    padding: 6px 10px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+}
+
+.action-menu__item:hover,
+.action-menu__item:focus {
+    background-color: color-mix(in srgb, var(--text) 9%, transparent);
+}
+
+.action-menu__item:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--main);
+}
+
+.action-menu__item[aria-disabled='true'] {
+    color: var(--text-tertiary);
+    cursor: not-allowed;
+    background: transparent;
+}
+
+.action-menu__item--danger {
+    color: var(--text-error);
+}
+
+.action-menu__item--danger .action-menu__icon {
+    color: var(--text-error);
+}
+
+.action-menu__icon {
+    width: 1em;
+    flex-shrink: 0;
+    color: var(--text-secondary);
+}
+
+.action-menu__label {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    flex: 1;
+    min-width: 0;
+}
+
+.action-menu__hint {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+.action-menu__separator {
+    height: 1px;
+    margin: 6px 4px;
+    background-color: var(--border);
+}
+
+.action-pop-enter-active,
+.action-pop-leave-active {
+    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
+}
+
+.action-pop-enter-from,
+.action-pop-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+}
+</style>
diff --git a/src/components/Widget/Playlist/PlaylistCreateModal.vue b/src/components/Widget/Playlist/PlaylistCreateModal.vue
new file mode 100644
index 0000000..40a9d2a
--- /dev/null
+++ b/src/components/Widget/Playlist/PlaylistCreateModal.vue
@@ -0,0 +1,707 @@
+<template>
+    <Modal ref="modal" :title="modalTitle" icon="fa-solid fa-square-plus" size="md">
+        <form :id="formId" class="create" novalidate @submit.prevent="submit()">
+            <!-- Type de playlist : deux grandes cartes (vrais boutons radio, masqués visuellement) -->
+            <fieldset class="create__fieldset" :disabled="busy">
+                <legend class="create__legend">Que voulez-vous faire ?</legend>
+                <div class="create__modes">
+                    <label
+                        v-for="option in MODES"
+                        :key="option.value"
+                        :class="['create__mode', { 'create__mode--selected': mode === option.value }]"
+                    >
+                        <input
+                            v-model="mode"
+                            class="sr-only"
+                            type="radio"
+                            :name="`${formId}-mode`"
+                            :value="option.value"
+                            :aria-describedby="`${formId}-mode-${option.value}`"
+                        />
+                        <span class="create__mode-icon" aria-hidden="true"><Icon :icon="option.icon" /></span>
+                        <span class="create__mode-text">
+                            <span class="create__mode-title">{{ option.label }}</span>
+                            <span :id="`${formId}-mode-${option.value}`" class="create__mode-desc">{{ option.description }}</span>
+                        </span>
+                        <Icon v-if="mode === option.value" class="create__mode-check" icon="fa-solid fa-circle-check" aria-hidden="true" />
+                    </label>
+                </div>
+            </fieldset>
+
+            <!-- Import : lien avec détection en direct de la plateforme -->
+            <div v-if="mode === 'import'" class="create__group">
+                <Field label="Lien de la playlist" :for="urlId" required>
+                    <div :class="['create__url', `create__url--${detection?.platform || 'none'}`, { 'create__url--invalid': showUrlProblem }]">
+                        <span class="create__url-icon" aria-hidden="true">
+                            <Icon :icon="detection?.icon || 'fa-solid fa-link'" />
+                        </span>
+                        <input
+                            :id="urlId"
+                            ref="urlInput"
+                            v-model="url"
+                            class="create__url-input"
+                            type="url"
+                            inputmode="url"
+                            autocomplete="off"
+                            autocapitalize="off"
+                            spellcheck="false"
+                            maxlength="2000"
+                            placeholder="https://www.youtube.com/playlist?list=…"
+                            :disabled="busy"
+                            :aria-invalid="showUrlProblem ? 'true' : 'false'"
+                            :aria-describedby="`${urlId}-status ${urlId}-sources`"
+                            data-autofocus
+                            @blur="urlTouched = true"
+                            @paste="urlTouched = true"
+                            @keydown.enter.prevent="submit()"
+                        />
+                        <button
+                            v-if="canPaste && !url"
+                            type="button"
+                            class="create__paste"
+                            :disabled="busy"
+                            @click="pasteFromClipboard()"
+                        >
+                            <Icon icon="fa-solid fa-paste" aria-hidden="true" />
+                            Coller
+                        </button>
+                        <button
+                            v-else-if="url"
+                            type="button"
+                            class="create__paste create__paste--icon"
+                            :disabled="busy"
+                            aria-label="Effacer le lien"
+                            title="Effacer le lien"
+                            @click="clearUrl()"
+                        >
+                            <Icon icon="fa-solid fa-xmark" aria-hidden="true" />
+                        </button>
+                    </div>
+                </Field>
+                <p
+                    :id="`${urlId}-status`"
+                    :class="['create__status', `create__status--${urlStatus.tone}`]"
+                    aria-live="polite"
+                >
+                    <Icon v-if="urlStatus.icon" :icon="urlStatus.icon" aria-hidden="true" />
+                    <span>{{ urlStatus.text }}</span>
+                </p>
+                <ul :id="`${urlId}-sources`" class="create__sources" aria-label="Sources acceptées">
+                    <li v-for="source in SOURCES" :key="source.key" :class="['create__source', `create__source--${source.key}`, { 'create__source--active': isActiveSource(source.key) }]">
+                        <Icon :icon="source.icon" aria-hidden="true" />
+                        <span>{{ source.label }}</span>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Nom : obligatoire pour une playlist vide, facultatif pour un import -->
+            <Field
+                :label="mode === 'import' ? 'Nom personnalisé (facultatif)' : 'Nom de la playlist'"
+                :for="nameId"
+                :required="mode === 'empty'"
+                :hint="mode === 'import' ? 'Laissez vide pour garder le titre d\'origine.' : null"
+                :error="nameError"
+            >
+                <template #aside>
+                    <span :class="['create__counter', { 'create__counter--full': name.length >= MAX_NAME }]" aria-hidden="true">{{ name.length }}/{{ MAX_NAME }}</span>
+                </template>
+                <template #default="{ id, describedby, invalid }">
+                    <input
+                        :id="id"
+                        ref="nameInput"
+                        v-model="name"
+                        class="create__input"
+                        type="text"
+                        autocomplete="off"
+                        :maxlength="MAX_NAME"
+                        :placeholder="mode === 'import' ? 'Titre de la playlist d\'origine' : 'Ex. : Soirée du vendredi'"
+                        :disabled="busy"
+                        :aria-describedby="describedby"
+                        :aria-invalid="invalid ? 'true' : 'false'"
+                        :data-autofocus="mode === 'empty' ? '' : null"
+                        @keydown.enter.prevent="submit()"
+                    />
+                </template>
+            </Field>
+
+            <!-- Destination : seulement si l'option du serveur est active et que l'on peut y écrire -->
+            <div v-if="canChooseScope" class="create__group">
+                <p :id="`${formId}-scope`" class="create__label">Enregistrer dans</p>
+                <SegmentedControl
+                    v-model="scope"
+                    block
+                    :options="scopeOptions"
+                    :aria-labelledby="`${formId}-scope`"
+                    :aria-describedby="`${formId}-scope-hint`"
+                />
+                <p :id="`${formId}-scope-hint`" class="create__hint">
+                    <Icon :icon="scope === 'guild' ? 'fa-solid fa-users' : 'fa-solid fa-lock'" aria-hidden="true" />
+                    {{ scopeHint }}
+                </p>
+            </div>
+
+            <div v-if="busy" class="create__progress">
+                <Spinner :label="mode === 'import' ? 'Import en cours…' : 'Création en cours…'" visible-label />
+                <p v-if="mode === 'import'" class="create__hint">
+                    Les titres sont récupérés un par un : comptez jusqu'à une minute pour une grande playlist Spotify.
+                    Vous pouvez fermer cette fenêtre, une notification vous préviendra.
+                </p>
+            </div>
+
+            <p v-if="submitError" class="create__error" role="alert">
+                <Icon icon="fa-solid fa-circle-exclamation" aria-hidden="true" />
+                <span>{{ submitError }}</span>
+            </p>
+        </form>
+
+        <template #footer>
+            <Button variant="ghost" @click="modal?.close()">{{ busy ? 'Fermer' : 'Annuler' }}</Button>
+            <Button
+                type="submit"
+                :form="formId"
+                :icon="mode === 'import' ? 'fa-solid fa-file-import' : 'fa-solid fa-plus'"
+                :loading="busy"
+            >{{ submitLabel }}</Button>
+        </template>
+    </Modal>
+</template>
+<script setup>
+/**
+ * Création d'une playlist : vide (nom) ou importée depuis un lien YouTube / YouTube Music / Spotify / SoundCloud.
+ * Ouverte par playlistStore.requestCreate(scope) (événement du bus PLAYLIST_CREATE_OPEN {scope?}).
+ * Une seule instance (Widget/Playlist/PlaylistHost.vue). La playlist créée est ouverte dans la vue.
+ */
+import { computed, nextTick, ref, useId, watch } from 'vue';
+import Modal from '@/components/UI/Modal.vue';
+import Button from '@/components/UI/Button.vue';
+import Field from '@/components/UI/Field.vue';
+import SegmentedControl from '@/components/UI/SegmentedControl.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import { useGlobalStore } from '@/stores/globalStore';
+import { usePlaylistStore } from '@/stores/playlistStore';
+import { detectPlaylistLink, formatSongCount } from './playlistMeta';
+
+const MAX_NAME = 100;
+
+const MODES = [
+    { value: 'empty', label: 'Playlist vide', icon: 'fa-solid fa-pen-to-square', description: 'Donnez-lui un nom, puis ajoutez des titres depuis vos recherches.' },
+    { value: 'import', label: 'Importer depuis un lien', icon: 'fa-solid fa-link', description: 'Copiez une playlist publique existante.' }
+];
+
+const SOURCES = [
+    { key: 'youtube', label: 'YouTube', icon: 'fa-brands fa-youtube' },
+    { key: 'youtube-music', label: 'YouTube Music', icon: 'fa-solid fa-circle-play' },
+    { key: 'spotify', label: 'Spotify', icon: 'fa-brands fa-spotify' },
+    { key: 'soundcloud', label: 'SoundCloud', icon: 'fa-brands fa-soundcloud' }
+];
+
+const playlistStore = usePlaylistStore();
+const globalStore = useGlobalStore();
+
+const uid = useId();
+const formId = `playlist-create-${uid}`;
+const urlId = `${formId}-url`;
+const nameId = `${formId}-name`;
+
+const modal = ref(null);
+const urlInput = ref(null);
+const nameInput = ref(null);
+
+const mode = ref('empty');
+const url = ref('');
+const name = ref('');
+const scope = ref('personal');
+const urlTouched = ref(false);
+const attempted = ref(false);
+const busy = ref(false);
+const submitError = ref(null);
+
+const canPaste = typeof navigator !== 'undefined' && !!navigator.clipboard?.readText;
+
+const detection = computed(() => detectPlaylistLink(url.value));
+
+const canChooseScope = computed(() => playlistStore.canEditScope('guild'));
+
+const serverName = computed(() => globalStore.actualServer?.name || null);
+
+const scopeOptions = computed(() => [
+    { value: 'personal', label: 'Mes playlists', icon: 'fa-solid fa-user' },
+    { value: 'guild', label: 'Playlists du serveur', icon: 'fa-solid fa-users' }
+]);
+
+const scopeHint = computed(() => {
+    if (scope.value !== 'guild') return 'Visible par vous seul.';
+    const where = serverName.value ? ` de ${serverName.value}` : ' du serveur';
+    return playlistStore.guildSettings.editors === 'mods'
+        ? `Visible par tous les membres${where} ; seuls les modérateurs pourront la modifier.`
+        : `Visible et modifiable par tous les membres${where}.`;
+});
+
+const modalTitle = computed(() => (scope.value === 'guild' && canChooseScope.value ? 'Nouvelle playlist partagée' : 'Nouvelle playlist'));
+
+const submitLabel = computed(() => {
+    if (busy.value) return mode.value === 'import' ? 'Import…' : 'Création…';
+    return mode.value === 'import' ? 'Importer' : 'Créer la playlist';
+});
+
+// Problème de lien affiché seulement quand l'utilisateur a fini de saisir (sortie du champ, collage, envoi)
+const showUrlProblem = computed(() => mode.value === 'import' && (urlTouched.value || attempted.value) && !detection.value?.valid);
+
+const urlStatus = computed(() => {
+    const found = detection.value;
+    if (!found) {
+        return attempted.value
+            ? { tone: 'error', icon: 'fa-solid fa-circle-exclamation', text: "Collez le lien d'une playlist." }
+            : { tone: 'muted', icon: null, text: 'Collez le lien de la playlist à copier (playlist publique ou non répertoriée).' };
+    }
+    if (found.valid) {
+        return { tone: 'success', icon: 'fa-solid fa-circle-check', text: found.message };
+    }
+    if (!showUrlProblem.value) {
+        return { tone: 'muted', icon: null, text: found.label ? `Lien ${found.label}…` : 'Analyse du lien…' };
+    }
+    return { tone: 'error', icon: 'fa-solid fa-circle-exclamation', text: found.message };
+});
+
+const nameError = computed(() => {
+    if (!attempted.value || mode.value !== 'empty') return null;
+    return name.value.trim() === '' ? 'Donnez un nom à la playlist.' : null;
+});
+
+function isActiveSource(key) {
+    return detection.value?.valid === true && detection.value.platform === key;
+}
+
+function reset(requestedScope) {
+    mode.value = 'empty';
+    url.value = '';
+    name.value = '';
+    urlTouched.value = false;
+    attempted.value = false;
+    submitError.value = null;
+    scope.value = requestedScope === 'guild' && canChooseScope.value ? 'guild' : 'personal';
+}
+
+// Ouverture demandée par le store (barre latérale, accueil, page de recherche…)
+watch(() => playlistStore.createRequest, (request) => {
+    if (!request) return;
+    // Un import en cours garde son état : on rouvre simplement la fenêtre
+    if (!busy.value) reset(request.scope);
+    modal.value?.open();
+});
+
+// Changement de mode : les erreurs de l'autre formulaire disparaissent (le focus reste sur le bouton radio)
+watch(mode, () => {
+    submitError.value = null;
+    attempted.value = false;
+});
+
+// L'option du serveur a été désactivée pendant la saisie
+watch(canChooseScope, (allowed) => {
+    if (!allowed && scope.value === 'guild') scope.value = 'personal';
+});
+
+async function pasteFromClipboard() {
+    try {
+        const text = await navigator.clipboard.readText();
+        if (typeof text === 'string' && text.trim() !== '') {
+            url.value = text.trim();
+            urlTouched.value = true;
+        }
+    } catch {
+        submitError.value = "Le presse-papiers n'est pas accessible : collez le lien avec Ctrl+V.";
+    }
+    nextTick(() => urlInput.value?.focus());
+}
+
+function clearUrl() {
+    url.value = '';
+    urlTouched.value = false;
+    nextTick(() => urlInput.value?.focus());
+}
+
+function focusFirstProblem() {
+    nextTick(() => {
+        if (mode.value === 'import' && !detection.value?.valid) urlInput.value?.focus();
+        else nameInput.value?.focus();
+    });
+}
+
+async function submit() {
+    if (busy.value) return;
+    attempted.value = true;
+    submitError.value = null;
+
+    const isImport = mode.value === 'import';
+    const trimmed = name.value.trim();
+    if ((isImport && !detection.value?.valid) || (!isImport && trimmed === '')) {
+        focusFirstProblem();
+        return;
+    }
+
+    const target = scope.value === 'guild' && canChooseScope.value ? 'guild' : 'personal';
+    busy.value = true;
+    const result = await playlistStore.createPlaylist({
+        scope: target,
+        name: trimmed,
+        url: isImport ? detection.value.normalized : null
+    });
+    busy.value = false;
+
+    if (!result.ok) {
+        submitError.value = result.message;
+        // Fenêtre fermée pendant l'import : l'erreur est signalée par une notification
+        if (!modal.value?.isOpen) playlistStore.notify(result.message, { tone: 'error' });
+        return;
+    }
+
+    const playlist = result.playlist;
+    const message = successMessage(playlist, isImport, target);
+    const show = () => {
+        playlistStore.setScope(target);
+        playlistStore.openPlaylist(target, playlist.playlistId);
+    };
+
+    if (modal.value?.isOpen) {
+        modal.value.close();
+        show();
+        playlistStore.notify(message, { tone: 'success' });
+    } else {
+        playlistStore.notify(message, { tone: 'success', action: { label: 'Ouvrir', run: show } });
+    }
+    reset(target);
+}
+
+function successMessage(playlist, isImport, target) {
+    const title = playlist?.title || 'Playlist';
+    const where = target === 'guild' ? ' sur le serveur' : '';
+    if (!isImport) return `Playlist « ${title} » créée${where}.`;
+    const count = Array.isArray(playlist?.songs) ? playlist.songs.length : 0;
+    const cut = playlist?.truncated ? ' (limitée aux 5000 premiers titres)' : '';
+    return `« ${title} » importée${where} : ${formatSongCount(count)}${cut}.`;
+}
+</script>
+<style scoped>
+.create {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.create__fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-width: 0;
+}
+
+.create__legend,
+.create__label {
+    margin: 0 0 8px 0;
+    padding: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.create__modes {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.create__mode {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--primary);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
+}
+
+.create__mode:hover {
+    border-color: color-mix(in srgb, var(--main) 50%, transparent);
+}
+
+.create__mode--selected {
+    border-color: var(--main);
+    background-color: color-mix(in srgb, var(--main) 9%, var(--primary));
+}
+
+/* Le vrai bouton radio est masqué : l'anneau de focus clavier va sur la carte */
+.create__mode:has(input:focus-visible) {
+    box-shadow: var(--focus-ring);
+}
+
+.create__fieldset:disabled .create__mode {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.create__mode-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    background-color: var(--tertiary);
+    color: var(--text-secondary);
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
+}
+
+.create__mode--selected .create__mode-icon {
+    background-color: var(--main);
+    color: var(--main-contrast);
+}
+
+.create__mode-text {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+    padding-right: 18px;
+}
+
+.create__mode-title {
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.create__mode-desc {
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.create__mode-check {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: var(--main);
+}
+
+.create__group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Champ de lien : icône de la plateforme détectée + bouton Coller / Effacer */
+.create__url {
+    --platform-color: var(--text-secondary);
+
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 4px 0 0;
+    border-radius: var(--radius-sm);
+    background-color: var(--tertiary);
+    transition: box-shadow var(--dur-fast) ease;
+}
+
+.create__url:focus-within {
+    box-shadow: var(--focus-ring);
+}
+
+.create__url--invalid {
+    box-shadow: 0 0 0 1px var(--text-error);
+}
+
+.create__url--youtube { --platform-color: #ff3b3b; }
+.create__url--youtube-music { --platform-color: #ff3b3b; }
+.create__url--spotify { --platform-color: #1ed760; }
+.create__url--soundcloud { --platform-color: #ff7700; }
+
+.create__url-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 38px;
+    color: var(--platform-color);
+    font-size: 1.1em;
+    transition: color var(--dur-fast) ease;
+}
+
+.create__url-input {
+    flex: 1;
+    min-width: 0;
+    padding-left: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+.create__paste {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    min-height: 30px;
+    padding: 0 10px;
+    border: none;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+    color: var(--text);
+    font: inherit;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color var(--dur-fast) ease;
+}
+
+.create__paste--icon {
+    width: 30px;
+    padding: 0;
+    justify-content: center;
+    background-color: transparent;
+    color: var(--text-secondary);
+}
+
+.create__paste:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--text) 16%, transparent);
+    color: var(--text);
+}
+
+.create__paste:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--main);
+}
+
+.create__paste:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.create__status {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    min-height: 1.4em;
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.create__status svg {
+    margin-top: 0.2em;
+    flex-shrink: 0;
+}
+
+.create__status--muted { color: var(--text-secondary); }
+.create__status--success { color: var(--text-success); }
+.create__status--error { color: var(--text-error); }
+
+.create__sources {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.create__source {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease;
+}
+
+.create__source--youtube svg,
+.create__source--youtube-music svg { color: #ff3b3b; }
+.create__source--spotify svg { color: #1ed760; }
+.create__source--soundcloud svg { color: #ff7700; }
+
+.create__source--active {
+    border-color: currentColor;
+    color: var(--text);
+    background-color: color-mix(in srgb, var(--text) 7%, transparent);
+    font-weight: 600;
+}
+
+.create__input {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.create__counter {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    font-variant-numeric: tabular-nums;
+}
+
+.create__counter--full {
+    color: var(--text-warning);
+}
+
+.create__hint {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
+
+.create__hint svg {
+    margin-top: 0.2em;
+    flex-shrink: 0;
+}
+
+.create__progress {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 14px;
+    border-radius: var(--radius);
+    background-color: var(--primary);
+    border: 1px solid var(--border);
+}
+
+.create__error {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin: 0;
+    padding: 10px 12px;
+    border-radius: var(--radius);
+    background-color: color-mix(in srgb, var(--text-error) 12%, transparent);
+    color: var(--text);
+    font-size: 0.875rem;
+    line-height: 1.45;
+}
+
+.create__error svg {
+    margin-top: 0.2em;
+    flex-shrink: 0;
+    color: var(--text-error);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .create {
+        gap: 14px;
+    }
+
+    .create__modes {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .create__mode {
+        padding: 12px;
+    }
+}
+</style>
diff --git a/src/components/Widget/Playlist/PlaylistHost.vue b/src/components/Widget/Playlist/PlaylistHost.vue
new file mode 100644
index 0000000..75d15b8
--- /dev/null
+++ b/src/components/Widget/Playlist/PlaylistHost.vue
@@ -0,0 +1,25 @@
+<template>
+    <PlaylistCreateModal />
+    <SaveToPlaylistModal />
+    <PlaylistToasts />
+</template>
+<script setup>
+/**
+ * Hôte unique des playlists (monté une fois dans App.vue) :
+ * - branche les poussées serveur et les événements du bus du store (réenregistrés après chaque navigation,
+ *   routes.js vidant le bus et les écouteurs socket) ;
+ * - porte les modales globales (création / import, enregistrement d'un titre) et les notifications.
+ * La barre latérale peut être démontée (carrousel mobile) : rien de tout cela ne doit dépendre d'elle.
+ */
+import { onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import { usePlaylistStore } from '@/stores/playlistStore';
+import PlaylistCreateModal from './PlaylistCreateModal.vue';
+import SaveToPlaylistModal from './SaveToPlaylistModal.vue';
+import PlaylistToasts from './PlaylistToasts.vue';
+
+const playlistStore = usePlaylistStore();
+const stop = playlistStore.listen(useRouter());
+
+onBeforeUnmount(stop);
+</script>
diff --git a/src/components/Widget/Playlist/PlaylistSongList.vue b/src/components/Widget/Playlist/PlaylistSongList.vue
new file mode 100644
index 0000000..3ebcbf7
--- /dev/null
+++ b/src/components/Widget/Playlist/PlaylistSongList.vue
@@ -0,0 +1,451 @@
+<template>
+    <section class="songs" :aria-labelledby="headingId">
+        <div class="songs__toolbar">
+            <h3 :id="headingId" class="songs__heading">
+                Titres
+                <span class="songs__count">{{ songs.length.toLocaleString('fr-FR') }}</span>
+            </h3>
+            <div v-if="songs.length > FILTER_THRESHOLD" class="songs__filter">
+                <Icon class="songs__filter-icon" icon="fa-solid fa-magnifying-glass" aria-hidden="true" />
+                <label :for="filterId" class="sr-only">Rechercher dans la playlist</label>
+                <input
+                    :id="filterId"
+                    v-model="filter"
+                    type="search"
+                    class="songs__filter-input"
+                    placeholder="Rechercher dans la playlist…"
+                    autocomplete="off"
+                    @keydown.esc.stop="filter = ''"
+                />
+            </div>
+        </div>
+
+        <p v-if="canReorder && songs.length > 1" :id="helpId" class="songs__help">
+            <Icon icon="fa-solid fa-grip-vertical" aria-hidden="true" />
+            Glissez la poignée pour réordonner, ou utilisez les flèches haut / bas quand elle a le focus.
+        </p>
+        <p v-else-if="filtering && editable" class="songs__help">
+            <Icon icon="fa-solid fa-circle-info" aria-hidden="true" />
+            Effacez la recherche pour réordonner les titres.
+        </p>
+
+        <EmptyState v-if="songs.length === 0" icon="fa-solid fa-music" title="Aucun titre pour l'instant" class="songs__empty">
+            <template v-if="editable">Recherchez un titre, puis utilisez « Enregistrer dans une playlist » pour l'ajouter ici.</template>
+            <template v-else>Cette playlist est vide.</template>
+            <template v-if="editable" #actions>
+                <Button size="sm" icon="fa-solid fa-magnifying-glass" @click="Events.emit('SEARCH_FOCUS')">Rechercher un titre</Button>
+            </template>
+        </EmptyState>
+
+        <EmptyState v-else-if="visible.length === 0" icon="fa-solid fa-magnifying-glass" title="Aucun résultat" compact>
+            Aucun titre ne correspond à « {{ filter.trim() }} ».
+            <template #actions>
+                <Button size="sm" variant="ghost" icon="fa-solid fa-xmark" @click="clearFilter()">Effacer la recherche</Button>
+            </template>
+        </EmptyState>
+
+        <draggable
+            v-else-if="canReorder"
+            :model-value="visible"
+            item-key="key"
+            tag="ol"
+            class="songs__list"
+            :aria-labelledby="headingId"
+            handle=".songs__handle"
+            :animation="160"
+            ghost-class="songs__row--ghost"
+            chosen-class="songs__row--chosen"
+            @change="onDragChange"
+        >
+            <template #item="{ element }">
+                <li class="songs__row songs__row--sortable">
+                    <button
+                        type="button"
+                        class="songs__handle"
+                        :data-song-handle="element.key"
+                        :aria-label="`Déplacer « ${element.song.title} », position ${element.index + 1} sur ${songs.length}`"
+                        :aria-describedby="helpId"
+                        @keydown="onHandleKeydown($event, element)"
+                    >
+                        <Icon icon="fa-solid fa-grip-vertical" aria-hidden="true" />
+                    </button>
+                    <PlaylistSongRow
+                        :song="element.song"
+                        :index="element.index"
+                        :removable="editable"
+                        :can-play="canPlay"
+                        :busy="busyKey === element.key"
+                        @play="play(element, $event)"
+                        @save="playlistStore.requestSave(element.song)"
+                        @remove="remove(element)"
+                    />
+                </li>
+            </template>
+        </draggable>
+
+        <ol v-else class="songs__list" :aria-labelledby="headingId">
+            <li v-for="element in visible" :key="element.key" class="songs__row">
+                <PlaylistSongRow
+                    :song="element.song"
+                    :index="element.index"
+                    :removable="editable"
+                    :can-play="canPlay"
+                    :busy="busyKey === element.key"
+                    @play="play(element, $event)"
+                    @save="playlistStore.requestSave(element.song)"
+                    @remove="remove(element)"
+                />
+            </li>
+        </ol>
+
+        <div v-if="hiddenCount > 0" class="songs__more">
+            <Button variant="secondary" size="sm" icon="fa-solid fa-angles-down" @click="limit += PAGE">
+                Afficher {{ Math.min(PAGE, hiddenCount) }} titres de plus
+            </Button>
+            <span class="songs__more-count">{{ hiddenCount.toLocaleString('fr-FR') }} restant{{ hiddenCount > 1 ? 's' : '' }}</span>
+        </div>
+
+        <p class="sr-only" aria-live="polite">{{ announcement }}</p>
+    </section>
+</template>
+<script setup>
+/**
+ * Titres d'une playlist enregistrée : lecture / ajout à la file / enregistrement ailleurs,
+ * retrait et réordonnancement (glisser-déposer ou flèches sur la poignée) si l'on a le droit de la modifier.
+ * Affichage progressif (les playlists importées peuvent compter 5000 titres).
+ */
+import { computed, nextTick, ref, useId, watch } from 'vue';
+import draggable from 'vuedraggable';
+import Button from '@/components/UI/Button.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import PlaylistSongRow from './PlaylistSongRow.vue';
+import Events from '@/utils/Events';
+import { IORequestAsync } from '@/utils/IORequest';
+import { useGlobalStore } from '@/stores/globalStore';
+import { usePlaylistStore } from '@/stores/playlistStore';
+import { isSyncedPlaylist, normalizeScope } from './playlistMeta';
+
+const PAGE = 150;
+const FILTER_THRESHOLD = 8;
+
+const props = defineProps({
+    playlist: {
+        type: Object,
+        required: true
+    },
+    scope: {
+        type: String,
+        default: 'personal'
+    }
+});
+
+const globalStore = useGlobalStore();
+const playlistStore = usePlaylistStore();
+
+const uid = useId();
+const headingId = `songs-heading-${uid}`;
+const filterId = `songs-filter-${uid}`;
+const helpId = `songs-help-${uid}`;
+
+const filter = ref('');
+const limit = ref(PAGE);
+const announcement = ref('');
+const busyKey = ref(null);
+
+const where = computed(() => normalizeScope(props.scope));
+const songs = computed(() => (Array.isArray(props.playlist?.songs) ? props.playlist.songs : []));
+const canPlay = computed(() => !!globalStore.currentChannel);
+
+// Une playlist synchronisée avec YouTube est remplacée à chaque synchronisation : modifications locales inutiles
+const editable = computed(() => playlistStore.canEditScope(where.value) && !isSyncedPlaylist(props.playlist));
+
+// Clé stable par occurrence (un même titre peut figurer plusieurs fois)
+const entries = computed(() => {
+    const seen = new Map();
+    return songs.value.map((song, index) => {
+        const base = String(song?.id ?? song?.url ?? 'titre');
+        const occurrence = (seen.get(base) || 0) + 1;
+        seen.set(base, occurrence);
+        return { key: `${base}#${occurrence}`, song, index };
+    });
+});
+
+function fold(text) {
+    return String(text || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+}
+
+const filtering = computed(() => filter.value.trim() !== '');
+
+const matching = computed(() => {
+    const query = fold(filter.value.trim());
+    if (!query) return entries.value;
+    return entries.value.filter(({ song }) => fold(`${song?.title} ${song?.author}`).includes(query));
+});
+
+const visible = computed(() => matching.value.slice(0, limit.value));
+const hiddenCount = computed(() => Math.max(0, matching.value.length - visible.value.length));
+
+// Réordonnancement : droit d'écriture, pas de recherche (les positions affichées sont alors les vraies)
+const canReorder = computed(() => editable.value && !filtering.value && songs.value.length > 1);
+
+// Autre playlist ouverte dans la même vue : on repart du début
+watch(() => props.playlist?.playlistId, () => {
+    filter.value = '';
+    limit.value = PAGE;
+});
+
+watch(filter, () => {
+    limit.value = PAGE;
+});
+
+function announce(message) {
+    announcement.value = '';
+    nextTick(() => {
+        announcement.value = message;
+    });
+}
+
+function clearFilter() {
+    filter.value = '';
+    nextTick(() => document.getElementById(filterId)?.focus());
+}
+
+async function move(from, to, title) {
+    const result = await playlistStore.moveSong(where.value, props.playlist.playlistId, from, to);
+    if (!result.ok) {
+        announce("Le nouvel ordre n'a pas pu être enregistré.");
+        playlistStore.notify(result.message, { tone: 'error' });
+        return false;
+    }
+    if (title) announce(`« ${title} » déplacé en position ${to + 1} sur ${songs.value.length}.`);
+    return true;
+}
+
+function onDragChange(event) {
+    const moved = event?.moved;
+    if (!moved || moved.oldIndex === moved.newIndex) return;
+    // Liste affichée = début de la playlist (aucune recherche) : indices identiques
+    move(moved.oldIndex, moved.newIndex, moved.element?.song?.title);
+}
+
+async function onHandleKeydown(event, element) {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+    event.preventDefault();
+    const to = element.index + (event.key === 'ArrowUp' ? -1 : 1);
+    if (to < 0 || to >= songs.value.length) {
+        announce(to < 0 ? 'Déjà en première position.' : 'Déjà en dernière position.');
+        return;
+    }
+    // Déplacement au-delà de la partie affichée : on l'agrandit pour garder le focus visible
+    if (to >= limit.value) limit.value += PAGE;
+    const pending = move(element.index, to, element.song?.title);
+    await nextTick();
+    document.querySelector(`[data-song-handle="${CSS.escape(element.key)}"]`)?.focus();
+    await pending;
+}
+
+async function play(element, now) {
+    if (!canPlay.value || busyKey.value) return;
+    busyKey.value = element.key;
+    const response = await IORequestAsync('/SEARCH/PLAY', { song: JSON.parse(JSON.stringify(element.song)), now: !!now });
+    busyKey.value = null;
+    const title = element.song?.title || 'Titre';
+    if (response === true) {
+        playlistStore.notify(now ? `Lecture de « ${title} »` : `« ${title} » ajouté à la file`, { tone: 'success' });
+    } else {
+        playlistStore.notify("Lecture impossible : rejoignez d'abord un salon vocal de ce serveur.", { tone: 'error' });
+    }
+}
+
+async function remove(element) {
+    if (busyKey.value) return;
+    const playlistId = props.playlist.playlistId;
+    const target = where.value;
+    const song = element.song;
+    const position = element.index;
+    busyKey.value = element.key;
+    const result = await playlistStore.removeSong(target, playlistId, song?.id, position);
+    busyKey.value = null;
+    if (!result.ok) {
+        playlistStore.notify(result.message, { tone: 'error' });
+        return;
+    }
+    announce(`« ${song?.title} » retiré de la playlist.`);
+    playlistStore.notify(`« ${song?.title || 'Titre'} » retiré`, {
+        tone: 'info',
+        action: { label: 'Annuler', run: () => restore(target, playlistId, song, position) }
+    });
+}
+
+// Annulation d'un retrait : ajout en fin de playlist puis retour à la position d'origine
+async function restore(target, playlistId, song, position) {
+    const added = await playlistStore.addSong(target, playlistId, song);
+    if (!added.ok) {
+        playlistStore.notify(added.message, { tone: 'error' });
+        return;
+    }
+    const last = (added.playlist?.songs?.length || 1) - 1;
+    const to = Math.min(position, last);
+    if (to !== last) await playlistStore.moveSong(target, playlistId, last, to);
+}
+</script>
+<style scoped>
+.songs {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+}
+
+.songs__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.songs__heading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 1.05em;
+    font-weight: 600;
+}
+
+.songs__count {
+    padding: 1px 8px;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.songs__filter {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 0 1 280px;
+    min-width: 0;
+}
+
+.songs__filter-icon {
+    position: absolute;
+    left: 10px;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    pointer-events: none;
+}
+
+.songs__filter-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding-left: 30px !important;
+    font-size: 0.875rem;
+}
+
+.songs__help {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+}
+
+.songs__empty {
+    padding: 30px 10px;
+}
+
+.songs__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.songs__row {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    border-radius: var(--radius);
+}
+
+.songs__row :deep(.song-row) {
+    flex: 1;
+}
+
+.songs__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    height: 44px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-tertiary);
+    font-size: 0.85em;
+    cursor: grab;
+    opacity: 0.35;
+    touch-action: none;
+    outline: 2px solid transparent;
+    transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease;
+}
+
+.songs__row:hover .songs__handle,
+.songs__row:focus-within .songs__handle {
+    opacity: 1;
+}
+
+.songs__handle:hover {
+    color: var(--text);
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.songs__handle:focus-visible {
+    outline: none;
+    opacity: 1;
+    color: var(--text);
+    box-shadow: inset 0 0 0 2px var(--main);
+}
+
+.songs__handle:active {
+    cursor: grabbing;
+}
+
+@media (hover: none) {
+    .songs__handle {
+        opacity: 1;
+    }
+}
+
+.songs__row--ghost {
+    opacity: 0.45;
+    background-color: var(--main-soft);
+}
+
+.songs__row--chosen :deep(.song-row) {
+    background-color: color-mix(in srgb, var(--text) 9%, transparent);
+}
+
+.songs__more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 6px 0 10px 0;
+}
+
+.songs__more-count {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+</style>
diff --git a/src/components/Widget/Playlist/PlaylistSongRow.vue b/src/components/Widget/Playlist/PlaylistSongRow.vue
new file mode 100644
index 0000000..15ff26e
--- /dev/null
+++ b/src/components/Widget/Playlist/PlaylistSongRow.vue
@@ -0,0 +1,267 @@
+<template>
+    <div :class="['song-row', { 'song-row--busy': busy }]">
+        <span class="song-row__index" aria-hidden="true">{{ index + 1 }}</span>
+        <span class="song-row__thumb-wrap">
+            <img
+                v-if="thumbnail && !thumbFailed"
+                class="song-row__thumb"
+                :src="thumbnail"
+                alt=""
+                loading="lazy"
+                decoding="async"
+                @error="thumbFailed = true"
+            />
+            <span v-else class="song-row__thumb song-row__thumb--empty" aria-hidden="true">
+                <Icon :icon="typeIcon" />
+            </span>
+        </span>
+        <span class="song-row__text">
+            <span class="song-row__title u-ellipsis" :title="song.title">{{ song.title || 'Titre sans nom' }}</span>
+            <span class="song-row__author u-ellipsis">
+                <Icon v-if="song.type && song.type !== 'youtube'" class="song-row__type" :icon="typeIcon" aria-hidden="true" />
+                {{ song.author || 'Auteur inconnu' }}
+            </span>
+        </span>
+        <span v-if="duration" class="song-row__duration">
+            <span class="sr-only">Durée : </span>{{ duration }}
+        </span>
+        <span class="song-row__actions">
+            <Spinner v-if="busy" size="sm" label="En cours…" />
+            <IconAction
+                v-else
+                class="song-row__play"
+                icon="fa-solid fa-play"
+                :label="`Lire maintenant « ${song.title} »`"
+                :disabled="!canPlay"
+                @click="emit('play', true)"
+            />
+            <ActionMenu :label="`Actions pour « ${song.title} »`" :items="menuItems" @select="onSelect" />
+        </span>
+    </div>
+</template>
+<script setup>
+/**
+ * Ligne d'un titre dans une playlist enregistrée (PlaylistSongList).
+ * Émet play(now), save, remove ; l'ordre (poignée) est géré par la liste.
+ */
+import { computed, ref, watch } from 'vue';
+import IconAction from '@/components/UI/IconAction.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import ActionMenu from './ActionMenu.vue';
+
+const props = defineProps({
+    song: {
+        type: Object,
+        required: true
+    },
+    index: {
+        type: Number,
+        default: 0
+    },
+    removable: {
+        type: Boolean,
+        default: false
+    },
+    canPlay: {
+        type: Boolean,
+        default: false
+    },
+    busy: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['play', 'save', 'remove']);
+
+const thumbFailed = ref(false);
+
+// Image par défaut du backend : n'apporte rien
+const thumbnail = computed(() => {
+    const value = props.song?.thumbnail;
+    return typeof value === 'string' && /^https?:\/\//i.test(value) && !/radomisol/i.test(value) ? value : null;
+});
+
+watch(thumbnail, () => {
+    thumbFailed.value = false;
+});
+
+const typeIcon = computed(() => {
+    switch (props.song?.type) {
+        case 'youtube': return 'fa-brands fa-youtube';
+        case 'spotify': return 'fa-brands fa-spotify';
+        case 'soundcloud': return 'fa-brands fa-soundcloud';
+        case 'attachment': return 'fa-solid fa-file-audio';
+        default: return 'fa-solid fa-music';
+    }
+});
+
+const duration = computed(() => {
+    const seconds = Number(props.song?.duration);
+    if (Number.isFinite(seconds) && seconds > 0) {
+        const total = Math.floor(seconds);
+        const h = Math.floor(total / 3600);
+        const m = Math.floor((total % 3600) / 60);
+        const s = String(total % 60).padStart(2, '0');
+        return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${s}` : `${m}:${s}`;
+    }
+    return typeof props.song?.readduration === 'string' && props.song.readduration !== '0:00' ? props.song.readduration : null;
+});
+
+const menuItems = computed(() => {
+    const items = [
+        { key: 'queue', label: 'Ajouter à la file', icon: 'fa-solid fa-list-ul', disabled: !props.canPlay, hint: props.canPlay ? null : 'Rejoignez un salon vocal' },
+        { key: 'now', label: 'Lire maintenant', icon: 'fa-solid fa-play', disabled: !props.canPlay }
+    ];
+    if (props.song?.type !== 'attachment') {
+        items.push({ key: 'save', label: 'Enregistrer dans une playlist', icon: 'fa-regular fa-bookmark' });
+    }
+    if (props.song?.url && /^https?:\/\//i.test(props.song.url) && props.song.type !== 'attachment') {
+        items.push({ key: 'open', label: 'Ouvrir la source', icon: 'fa-solid fa-arrow-up-right-from-square' });
+    }
+    if (props.removable) {
+        items.push({ key: 'remove', label: 'Retirer de la playlist', icon: 'fa-solid fa-trash', danger: true, separatorBefore: true });
+    }
+    return items;
+});
+
+function onSelect(key) {
+    switch (key) {
+        case 'queue':
+            emit('play', false);
+            break;
+        case 'now':
+            emit('play', true);
+            break;
+        case 'save':
+            emit('save');
+            break;
+        case 'open':
+            window.open(props.song.url, '_blank', 'noopener');
+            break;
+        case 'remove':
+            emit('remove');
+            break;
+        default:
+            break;
+    }
+}
+</script>
+<style scoped>
+.song-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    padding: 6px 6px 6px 4px;
+    border-radius: var(--radius);
+    transition: background-color var(--dur-fast) ease;
+}
+
+.song-row:hover,
+.song-row:focus-within {
+    background-color: color-mix(in srgb, var(--text) 6%, transparent);
+}
+
+.song-row--busy {
+    opacity: 0.7;
+}
+
+.song-row__index {
+    flex-shrink: 0;
+    width: 2.2em;
+    text-align: right;
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    font-variant-numeric: tabular-nums;
+}
+
+.song-row__thumb-wrap {
+    flex-shrink: 0;
+    display: inline-flex;
+}
+
+.song-row__thumb {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius-sm);
+    object-fit: cover;
+    background-color: var(--tertiary);
+    color: var(--text-secondary);
+}
+
+.song-row__text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+
+.song-row__title {
+    font-size: 0.92em;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.song-row__author {
+    font-size: 0.8em;
+    line-height: 1.3;
+    color: var(--text-secondary);
+}
+
+.song-row__type {
+    margin-right: 3px;
+}
+
+.song-row__duration {
+    flex-shrink: 0;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+.song-row__actions {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+    flex-shrink: 0;
+    min-width: 72px;
+}
+
+/* Lecture rapide visible au survol / au focus (toujours sur écran tactile) */
+.song-row__play {
+    opacity: 0;
+    transition: opacity var(--dur-fast) ease;
+}
+
+.song-row:hover .song-row__play,
+.song-row:focus-within .song-row__play {
+    opacity: 1;
+}
+
+@media (hover: none) {
+    .song-row__play {
+        opacity: 1;
+    }
+}
+
+@media screen and (max-width: 768px), screen and (max-height: 607px) {
+    .song-row {
+        gap: 10px;
+    }
+
+    .song-row__index,
+    .song-row__duration {
+        display: none;
+    }
+
+    .song-row__thumb {
+        width: 52px;
+    }
+}
+</style>
diff --git a/src/components/Widget/Playlist/PlaylistSortMenu.vue b/src/components/Widget/Playlist/PlaylistSortMenu.vue
new file mode 100644
index 0000000..42a0e31
--- /dev/null
+++ b/src/components/Widget/Playlist/PlaylistSortMenu.vue
@@ -0,0 +1,437 @@
+<template>
+    <div ref="root" class="sort-menu">
+        <button
+            ref="trigger"
+            type="button"
+            :class="['sort-menu__trigger', { 'sort-menu__trigger--open': isOpen }]"
+            aria-haspopup="menu"
+            :aria-expanded="isOpen ? 'true' : 'false'"
+            :aria-controls="isOpen ? menuId : undefined"
+            :aria-label="`Trier les playlists (actuellement : ${summary})`"
+            :title="`Trier : ${summary}`"
+            @click="toggle()"
+            @keydown="onTriggerKeydown"
+        >
+            <Icon :icon="triggerIcon" aria-hidden="true" />
+            <span class="sort-menu__trigger-label">{{ shortLabel }}</span>
+            <Icon class="sort-menu__chevron" icon="fa-solid fa-chevron-down" aria-hidden="true" />
+        </button>
+        <!-- Hors du flux (body) : la barre latérale coupe ce qui dépasse -->
+        <Teleport to="body">
+        <Transition name="sort-pop">
+            <div
+                v-if="isOpen"
+                :id="menuId"
+                ref="menu"
+                class="sort-menu__panel"
+                :style="panelStyle"
+                role="menu"
+                aria-label="Trier les playlists"
+                @keydown="onMenuKeydown"
+            >
+                <div role="group" :aria-labelledby="`${menuId}-modes`">
+                    <p :id="`${menuId}-modes`" class="sort-menu__group">Trier par</p>
+                    <button
+                        v-for="mode in SORT_MODES"
+                        :key="mode"
+                        type="button"
+                        role="menuitemradio"
+                        tabindex="-1"
+                        :aria-checked="modelValue.mode === mode ? 'true' : 'false'"
+                        class="sort-menu__item"
+                        @click="chooseMode(mode)"
+                    >
+                        <Icon class="sort-menu__icon" :icon="MODE_ICONS[mode]" aria-hidden="true" />
+                        <span class="sort-menu__label">{{ SORT_LABELS[mode] }}</span>
+                        <Icon v-if="modelValue.mode === mode" class="sort-menu__check" icon="fa-solid fa-check" aria-hidden="true" />
+                    </button>
+                </div>
+                <div class="sort-menu__separator" role="separator"></div>
+                <div role="group" :aria-labelledby="`${menuId}-dir`">
+                    <p :id="`${menuId}-dir`" class="sort-menu__group">Ordre</p>
+                    <button
+                        v-for="dir in ['asc', 'desc']"
+                        :key="dir"
+                        type="button"
+                        role="menuitemradio"
+                        tabindex="-1"
+                        :aria-checked="!isManual && modelValue.dir === dir ? 'true' : 'false'"
+                        :aria-disabled="isManual ? 'true' : undefined"
+                        class="sort-menu__item"
+                        @click="chooseDir(dir)"
+                    >
+                        <Icon class="sort-menu__icon" :icon="dir === 'asc' ? 'fa-solid fa-arrow-up-short-wide' : 'fa-solid fa-arrow-down-wide-short'" aria-hidden="true" />
+                        <span class="sort-menu__label">{{ dirLabel(dir) }}</span>
+                        <Icon v-if="!isManual && modelValue.dir === dir" class="sort-menu__check" icon="fa-solid fa-check" aria-hidden="true" />
+                    </button>
+                    <p v-if="isManual" class="sort-menu__hint">Glissez les playlists (ou utilisez les flèches sur la poignée) pour choisir leur ordre.</p>
+                </div>
+            </div>
+        </Transition>
+        </Teleport>
+    </div>
+</template>
+<script setup>
+/**
+ * Menu de tri des playlists (bouton + menu déroulant accessible).
+ * v-model : { mode: 'manual'|'name'|'created'|'updated'|'songs'|'duration', dir: 'asc'|'desc' }.
+ * Clavier : Entrée / Espace / flèche bas ouvrent ; flèches, Début / Fin parcourent ; Échap ferme.
+ */
+import { computed, nextTick, onBeforeUnmount, ref, useId } from 'vue';
+import { SORT_MODES, SORT_LABELS, SORT_DEFAULT_DIR } from '@/stores/playlistStore';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const MODE_ICONS = {
+    manual: 'fa-solid fa-grip-lines',
+    name: 'fa-solid fa-font',
+    created: 'fa-solid fa-calendar-plus',
+    updated: 'fa-solid fa-clock-rotate-left',
+    songs: 'fa-solid fa-list-ol',
+    duration: 'fa-solid fa-hourglass-half'
+};
+
+const SHORT_LABELS = {
+    manual: 'Perso',
+    name: 'Nom',
+    created: 'Création',
+    updated: 'Modifiée',
+    songs: 'Titres',
+    duration: 'Durée'
+};
+
+const menuId = `sort-menu-${useId()}`;
+const root = ref(null);
+const trigger = ref(null);
+const menu = ref(null);
+const isOpen = ref(false);
+
+const isManual = computed(() => props.modelValue.mode === 'manual');
+const shortLabel = computed(() => SHORT_LABELS[props.modelValue.mode] || 'Trier');
+
+const triggerIcon = computed(() => {
+    if (isManual.value) return 'fa-solid fa-sort';
+    return props.modelValue.dir === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-short-wide';
+});
+
+function dirLabel(dir, mode = props.modelValue.mode) {
+    switch (mode) {
+        case 'name':
+            return dir === 'asc' ? 'De A à Z' : 'De Z à A';
+        case 'created':
+        case 'updated':
+            return dir === 'asc' ? "Plus anciennes d'abord" : "Plus récentes d'abord";
+        case 'songs':
+        case 'duration':
+            return dir === 'asc' ? "Plus petites d'abord" : "Plus grandes d'abord";
+        default:
+            return dir === 'asc' ? 'Croissant' : 'Décroissant';
+    }
+}
+
+const summary = computed(() => {
+    const label = SORT_LABELS[props.modelValue.mode] || SORT_LABELS.manual;
+    return isManual.value ? label : `${label}, ${dirLabel(props.modelValue.dir).toLowerCase()}`;
+});
+
+function items() {
+    if (!menu.value) return [];
+    return Array.from(menu.value.querySelectorAll('[role="menuitemradio"]'))
+        .filter((item) => item.getAttribute('aria-disabled') !== 'true');
+}
+
+function focusItem(index) {
+    const list = items();
+    if (list.length === 0) return;
+    const target = list[(index + list.length) % list.length];
+    target.focus();
+}
+
+// Position fixe sous le bouton, aligné à droite, gardée dans la fenêtre (retourné vers le haut si besoin)
+const panelStyle = ref({ top: '0px', left: '0px' });
+const MARGIN = 8;
+
+function placePanel() {
+    if (!trigger.value || !menu.value) return;
+    const rect = trigger.value.getBoundingClientRect();
+    const width = menu.value.offsetWidth;
+    const height = menu.value.offsetHeight;
+    const viewportWidth = document.documentElement.clientWidth;
+    const viewportHeight = window.innerHeight;
+    const left = Math.min(Math.max(rect.right - width, MARGIN), Math.max(MARGIN, viewportWidth - width - MARGIN));
+    let top = rect.bottom + 6;
+    if (top + height > viewportHeight - MARGIN && rect.top - height - 6 >= MARGIN) {
+        top = rect.top - height - 6;
+    }
+    // Appliqué aussi directement : le focus est posé juste après, avant le prochain rendu
+    panelStyle.value = { top: `${Math.max(MARGIN, top)}px`, left: `${left}px` };
+    Object.assign(menu.value.style, panelStyle.value);
+}
+
+// La page bouge (redimensionnement, défilement d'un conteneur) : le menu se ferme plutôt que de flotter
+function onViewportChange(event) {
+    if (event?.type === 'scroll' && menu.value && menu.value.contains(event.target)) return;
+    close(false);
+}
+
+function open(focus = 'checked') {
+    if (isOpen.value) return;
+    isOpen.value = true;
+    document.addEventListener('pointerdown', onOutsidePointer, true);
+    window.addEventListener('resize', onViewportChange);
+    window.addEventListener('scroll', onViewportChange, true);
+    nextTick(() => {
+        placePanel();
+        const list = items();
+        if (focus === 'last') {
+            focusItem(list.length - 1);
+            return;
+        }
+        const checked = list.findIndex((item) => item.getAttribute('aria-checked') === 'true');
+        focusItem(checked === -1 ? 0 : checked);
+    });
+}
+
+function close(restoreFocus = true) {
+    if (!isOpen.value) return;
+    isOpen.value = false;
+    removeGlobalListeners();
+    if (restoreFocus) nextTick(() => trigger.value?.focus());
+}
+
+function removeGlobalListeners() {
+    document.removeEventListener('pointerdown', onOutsidePointer, true);
+    window.removeEventListener('resize', onViewportChange);
+    window.removeEventListener('scroll', onViewportChange, true);
+}
+
+function toggle() {
+    if (isOpen.value) close();
+    else open();
+}
+
+function onOutsidePointer(event) {
+    const inside = root.value?.contains(event.target) || menu.value?.contains(event.target);
+    if (!inside) close(false);
+}
+
+function onTriggerKeydown(event) {
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        open();
+    } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        open('last');
+    }
+}
+
+function onMenuKeydown(event) {
+    const list = items();
+    const index = list.indexOf(document.activeElement);
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            focusItem(index + 1);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            focusItem(index - 1);
+            break;
+        case 'Home':
+            event.preventDefault();
+            focusItem(0);
+            break;
+        case 'End':
+            event.preventDefault();
+            focusItem(list.length - 1);
+            break;
+        case 'Escape':
+            event.preventDefault();
+            // Ne ferme pas une éventuelle modale parente
+            event.stopPropagation();
+            close();
+            break;
+        case 'Tab':
+            close(false);
+            break;
+        default:
+            break;
+    }
+}
+
+function chooseMode(mode) {
+    if (mode !== props.modelValue.mode) {
+        emit('update:modelValue', { mode, dir: SORT_DEFAULT_DIR[mode] });
+    }
+    close();
+}
+
+function chooseDir(dir) {
+    if (isManual.value) return;
+    if (dir !== props.modelValue.dir) {
+        emit('update:modelValue', { mode: props.modelValue.mode, dir });
+    }
+    close();
+}
+
+onBeforeUnmount(removeGlobalListeners);
+</script>
+<style scoped>
+.sort-menu {
+    position: relative;
+    flex-shrink: 0;
+}
+
+.sort-menu__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 30px;
+    padding: 0 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
+    background-color: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
+}
+
+.sort-menu__trigger:hover,
+.sort-menu__trigger--open {
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+    color: var(--text);
+}
+
+.sort-menu__trigger:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.sort-menu__chevron {
+    font-size: 0.75em;
+    transition: transform var(--dur-fast) ease;
+}
+
+.sort-menu__trigger--open .sort-menu__chevron {
+    transform: rotate(180deg);
+}
+
+.sort-menu__panel {
+    position: fixed;
+    z-index: 3000;
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    min-width: 220px;
+    max-width: min(300px, calc(100vw - 30px));
+    padding: 6px;
+    box-sizing: border-box;
+    background-color: var(--primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+}
+
+.sort-menu__group {
+    margin: 4px 8px 4px 8px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+}
+
+.sort-menu__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    min-height: 34px;
+    padding: 0 10px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+}
+
+.sort-menu__item:hover,
+.sort-menu__item:focus-visible,
+.sort-menu__item:focus {
+    background-color: color-mix(in srgb, var(--text) 9%, transparent);
+}
+
+.sort-menu__item:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--main);
+}
+
+.sort-menu__item[aria-checked='true'] {
+    color: var(--main);
+    font-weight: 600;
+}
+
+.sort-menu__item[aria-disabled='true'] {
+    color: var(--text-tertiary);
+    cursor: not-allowed;
+    background: transparent;
+}
+
+.sort-menu__icon {
+    width: 1em;
+    flex-shrink: 0;
+    color: var(--text-secondary);
+}
+
+.sort-menu__item[aria-checked='true'] .sort-menu__icon {
+    color: var(--main);
+}
+
+.sort-menu__label {
+    flex: 1;
+}
+
+.sort-menu__check {
+    flex-shrink: 0;
+}
+
+.sort-menu__separator {
+    height: 1px;
+    margin: 6px 4px;
+    background-color: var(--border);
+}
+
+.sort-menu__hint {
+    margin: 4px 8px 6px 8px;
+    max-width: 260px;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.sort-pop-enter-active,
+.sort-pop-leave-active {
+    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
+}
+
+.sort-pop-enter-from,
+.sort-pop-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+}
+</style>
diff --git a/src/components/Widget/Playlist/PlaylistToasts.vue b/src/components/Widget/Playlist/PlaylistToasts.vue
new file mode 100644
index 0000000..f313a89
--- /dev/null
+++ b/src/components/Widget/Playlist/PlaylistToasts.vue
@@ -0,0 +1,203 @@
+<template>
+    <Teleport to="body">
+        <!-- Région toujours présente : les lecteurs d'écran n'annoncent que ce qui change dans une région déjà connue -->
+        <section class="toasts" aria-label="Notifications des playlists">
+            <div class="sr-only" aria-live="polite" aria-atomic="true">{{ politeText }}</div>
+            <div class="sr-only" aria-live="assertive" aria-atomic="true">{{ alertText }}</div>
+            <TransitionGroup name="toast" tag="ul" class="toasts__list">
+                <li
+                    v-for="toast in playlistStore.toasts"
+                    :key="toast.id"
+                    :class="['toast', `toast--${toast.tone || 'info'}`]"
+                >
+                    <Icon class="toast__icon" :icon="ICONS[toast.tone] || ICONS.info" aria-hidden="true" />
+                    <p class="toast__message">{{ toast.message }}</p>
+                    <button
+                        v-if="toast.action && typeof toast.action.run === 'function'"
+                        type="button"
+                        class="toast__action"
+                        @click="runAction(toast)"
+                    >{{ toast.action.label }}</button>
+                    <IconAction
+                        class="toast__close"
+                        icon="fa-solid fa-xmark"
+                        label="Fermer la notification"
+                        @click="playlistStore.dismissToast(toast.id)"
+                    />
+                </li>
+            </TransitionGroup>
+        </section>
+    </Teleport>
+</template>
+<script setup>
+/**
+ * Notifications courtes du store des playlists (playlistStore.notify).
+ * Annonce vocale séparée de l'affichage : « polite » pour les succès / infos, « assertive » pour les erreurs.
+ */
+import { nextTick, ref, watch } from 'vue';
+import IconAction from '@/components/UI/IconAction.vue';
+import { usePlaylistStore } from '@/stores/playlistStore';
+
+const playlistStore = usePlaylistStore();
+
+const ICONS = {
+    success: 'fa-solid fa-circle-check',
+    error: 'fa-solid fa-circle-exclamation',
+    info: 'fa-solid fa-circle-info'
+};
+
+const politeText = ref('');
+const alertText = ref('');
+let lastAnnounced = 0;
+
+// Seules les nouvelles notifications sont lues (pas celles qui restent après une fermeture)
+watch(() => playlistStore.toasts, (list) => {
+    let polite = null;
+    let alert = null;
+    for (const toast of list) {
+        if (toast.id <= lastAnnounced) continue;
+        lastAnnounced = toast.id;
+        if (toast.tone === 'error') alert = toast.message;
+        else polite = toast.message;
+    }
+    // Vidé puis rempli : un message identique au précédent est relu
+    if (polite !== null) {
+        politeText.value = '';
+        nextTick(() => { politeText.value = polite; });
+    }
+    if (alert !== null) {
+        alertText.value = '';
+        nextTick(() => { alertText.value = alert; });
+    }
+});
+
+function runAction(toast) {
+    playlistStore.dismissToast(toast.id);
+    try {
+        toast.action.run();
+    } catch (error) {
+        console.error('[PlaylistToasts] Action en échec', error);
+    }
+}
+</script>
+<style scoped>
+.toasts {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    z-index: 4000;
+    pointer-events: none;
+}
+
+.toasts__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: max-content;
+    max-width: min(420px, calc(100vw - 30px));
+    box-sizing: border-box;
+    padding: 10px 8px 10px 14px;
+    border: 1px solid var(--border);
+    border-left: 4px solid var(--toast-color);
+    border-radius: var(--radius);
+    background-color: var(--primary);
+    color: var(--text);
+    box-shadow: var(--shadow-lg);
+    pointer-events: auto;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+.toast--success { --toast-color: var(--text-success); }
+.toast--error { --toast-color: var(--text-error); }
+.toast--info { --toast-color: var(--text-info); }
+
+.toast__icon {
+    flex-shrink: 0;
+    color: var(--toast-color);
+}
+
+.toast__message {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.toast__action {
+    flex-shrink: 0;
+    min-height: 30px;
+    padding: 0 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
+    background-color: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color var(--dur-fast) ease;
+}
+
+.toast__action:hover {
+    background-color: color-mix(in srgb, var(--text) 9%, transparent);
+}
+
+.toast__action:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.toast__close {
+    flex-shrink: 0;
+    font-size: 0.85em;
+}
+
+.toast-enter-active,
+.toast-leave-active {
+    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+
+.toast-enter-from,
+.toast-leave-to {
+    opacity: 0;
+    transform: translateY(8px);
+}
+
+.toast-leave-active {
+    position: absolute;
+    right: 0;
+}
+
+.toast-move {
+    transition: transform var(--dur) var(--ease);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .toasts {
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+    }
+
+    .toasts__list {
+        align-items: stretch;
+    }
+
+    .toast {
+        width: 100%;
+        max-width: none;
+    }
+}
+</style>
diff --git a/src/components/Widget/Playlist/SaveToPlaylistModal.vue b/src/components/Widget/Playlist/SaveToPlaylistModal.vue
new file mode 100644
index 0000000..3fa03ea
--- /dev/null
+++ b/src/components/Widget/Playlist/SaveToPlaylistModal.vue
@@ -0,0 +1,452 @@
+<template>
+    <Modal ref="modal" title="Enregistrer dans une playlist" icon="fa-solid fa-bookmark" size="md" @close="onClose()">
+        <div v-if="video" class="save">
+            <!-- Titre à enregistrer -->
+            <div class="save__song">
+                <img v-if="video.thumbnail" class="save__thumb" :src="video.thumbnail" alt="" loading="lazy" />
+                <span v-else class="save__thumb save__thumb--empty" aria-hidden="true"><Icon icon="fa-solid fa-music" /></span>
+                <span class="save__song-text">
+                    <span class="save__song-title u-ellipsis">{{ video.title || 'Titre sans nom' }}</span>
+                    <span class="save__song-author u-ellipsis">{{ video.author || 'Auteur inconnu' }}</span>
+                </span>
+            </div>
+
+            <div v-if="totalCount > FILTER_THRESHOLD" class="save__filter">
+                <Icon class="save__filter-icon" icon="fa-solid fa-magnifying-glass" aria-hidden="true" />
+                <label :for="filterId" class="sr-only">Filtrer les playlists</label>
+                <input
+                    :id="filterId"
+                    v-model="filter"
+                    type="search"
+                    class="save__filter-input"
+                    placeholder="Filtrer les playlists…"
+                    autocomplete="off"
+                    @keydown.esc.stop="filter = ''"
+                />
+            </div>
+
+            <section v-for="group in groups" :key="group.scope" class="save__group" :aria-labelledby="`${uid}-${group.scope}`">
+                <h3 :id="`${uid}-${group.scope}`" class="save__group-title">
+                    <Icon :icon="group.icon" aria-hidden="true" />
+                    {{ group.title }}
+                    <span class="save__group-count">{{ group.items.length }}</span>
+                </h3>
+                <p v-if="!group.loaded" class="save__empty"><Spinner size="sm" label="Chargement…" visible-label /></p>
+                <p v-else-if="group.items.length === 0" class="save__empty">
+                    {{ filter.trim() ? 'Aucune playlist ne correspond.' : group.emptyText }}
+                </p>
+                <ul v-else class="save__list">
+                    <li v-for="playlist in group.items" :key="playlist.playlistId">
+                        <PlaylistItem
+                            :playlist="playlist"
+                            :scope="group.scope"
+                            compact
+                            :disabled="isLocked(playlist) || busyKey !== null"
+                            :aria-describedby="hintIdOf(group.scope, playlist)"
+                            :class="{ 'save__item--locked': isLocked(playlist) }"
+                            @click="save(group.scope, playlist)"
+                        >
+                            <template #end>
+                                <Spinner v-if="busyKey === keyOf(group.scope, playlist)" size="sm" label="Ajout en cours…" />
+                                <span v-else-if="isLocked(playlist)" class="save__badge" :id="hintIdOf(group.scope, playlist)">
+                                    <Icon icon="fa-solid fa-lock" aria-hidden="true" /> Synchronisée
+                                </span>
+                                <span v-else-if="contains(playlist)" class="save__badge save__badge--present" :id="hintIdOf(group.scope, playlist)">
+                                    <Icon icon="fa-solid fa-check" aria-hidden="true" /> Déjà présent
+                                </span>
+                                <Icon v-else class="save__plus" icon="fa-solid fa-plus" aria-hidden="true" />
+                            </template>
+                        </PlaylistItem>
+                    </li>
+                </ul>
+            </section>
+
+            <!-- Création rapide : nouvelle playlist contenant ce titre -->
+            <form v-if="creating" class="save__create" @submit.prevent="createAndSave()">
+                <Field label="Nom de la nouvelle playlist" :for="nameId" :error="createError">
+                    <template #default="{ id, describedby, invalid }">
+                        <input
+                            :id="id"
+                            ref="nameInput"
+                            v-model="newName"
+                            type="text"
+                            maxlength="100"
+                            autocomplete="off"
+                            placeholder="Ex. : Découvertes"
+                            :disabled="busyKey !== null"
+                            :aria-describedby="describedby"
+                            :aria-invalid="invalid ? 'true' : 'false'"
+                        />
+                    </template>
+                </Field>
+                <SegmentedControl
+                    v-if="canUseGuild"
+                    v-model="newScope"
+                    size="sm"
+                    label="Enregistrer dans"
+                    :options="scopeOptions"
+                />
+                <div class="save__create-actions">
+                    <Button variant="ghost" size="sm" @click="creating = false">Annuler</Button>
+                    <Button type="submit" size="sm" icon="fa-solid fa-plus" :loading="busyKey === 'create'">Créer et ajouter</Button>
+                </div>
+            </form>
+        </div>
+
+        <template #footer>
+            <Button v-if="!creating" variant="secondary" icon="fa-solid fa-plus" class="save__new" @click="startCreate()">Nouvelle playlist</Button>
+            <Button variant="ghost" @click="modal?.close()">Fermer</Button>
+        </template>
+    </Modal>
+</template>
+<script setup>
+/**
+ * « Enregistrer dans une playlist » : mes playlists et, si l'option est active et que j'ai le droit d'y écrire,
+ * celles du serveur. Un clic ajoute le titre ; création rapide d'une playlist contenant le titre.
+ * Ouverte par playlistStore.requestSave(video) (événement du bus PLAYLIST_SAVE_OPEN {video}).
+ */
+import { computed, nextTick, ref, useId, watch } from 'vue';
+import Modal from '@/components/UI/Modal.vue';
+import Button from '@/components/UI/Button.vue';
+import Field from '@/components/UI/Field.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import SegmentedControl from '@/components/UI/SegmentedControl.vue';
+import PlaylistItem from '@/components/UI/PlaylistItem.vue';
+import { useGlobalStore } from '@/stores/globalStore';
+import { usePlaylistStore } from '@/stores/playlistStore';
+import { isSyncedPlaylist } from './playlistMeta';
+
+const FILTER_THRESHOLD = 6;
+
+const playlistStore = usePlaylistStore();
+const globalStore = useGlobalStore();
+
+const uid = `save-${useId()}`;
+const filterId = `${uid}-filter`;
+const nameId = `${uid}-name`;
+
+const modal = ref(null);
+const nameInput = ref(null);
+const video = ref(null);
+const filter = ref('');
+const busyKey = ref(null);
+const creating = ref(false);
+const newName = ref('');
+const newScope = ref('personal');
+const createError = ref(null);
+
+const canUseGuild = computed(() => playlistStore.canEditScope('guild'));
+
+const scopeOptions = [
+    { value: 'personal', label: 'Mes playlists', icon: 'fa-solid fa-user' },
+    { value: 'guild', label: 'Serveur', icon: 'fa-solid fa-users' }
+];
+
+function fold(text) {
+    return String(text || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+}
+
+function filtered(list) {
+    const query = fold(filter.value.trim());
+    return query ? list.filter((playlist) => fold(playlist.title).includes(query)) : list;
+}
+
+const groups = computed(() => {
+    const result = [{
+        scope: 'personal',
+        title: 'Mes playlists',
+        icon: 'fa-solid fa-user',
+        loaded: playlistStore.personalLoaded,
+        emptyText: "Vous n'avez pas encore de playlist : créez-en une ci-dessous.",
+        items: filtered(playlistStore.sortedPersonal)
+    }];
+    if (canUseGuild.value) {
+        result.push({
+            scope: 'guild',
+            title: globalStore.actualServer?.name ? `Serveur ${globalStore.actualServer.name}` : 'Playlists du serveur',
+            icon: 'fa-solid fa-users',
+            loaded: playlistStore.guildLoaded,
+            emptyText: 'Aucune playlist partagée pour le moment.',
+            items: filtered(playlistStore.sortedGuild)
+        });
+    }
+    return result;
+});
+
+const totalCount = computed(() => playlistStore.counts.personal + (canUseGuild.value ? playlistStore.counts.guild : 0));
+
+function keyOf(scope, playlist) {
+    return `${scope}:${playlist.playlistId}`;
+}
+
+function hintIdOf(scope, playlist) {
+    if (!isLocked(playlist) && !contains(playlist)) return undefined;
+    return `${uid}-hint-${scope}-${playlist.playlistId}`;
+}
+
+// Playlist synchronisée avec YouTube : remplacée à chaque synchronisation, un ajout local serait perdu
+function isLocked(playlist) {
+    return isSyncedPlaylist(playlist);
+}
+
+function contains(playlist) {
+    const id = video.value?.id;
+    if (id === undefined || id === null) return false;
+    return Array.isArray(playlist.songs) && playlist.songs.some((song) => String(song?.id) === String(id));
+}
+
+watch(() => playlistStore.saveRequest, (request) => {
+    if (!request?.video) return;
+    video.value = request.video;
+    filter.value = '';
+    creating.value = false;
+    createError.value = null;
+    busyKey.value = null;
+    // Listes pas encore chargées (page ouverte depuis peu)
+    if (!playlistStore.personalLoaded && !playlistStore.personalLoading) playlistStore.fetchPersonal();
+    modal.value?.open();
+});
+
+function onClose() {
+    creating.value = false;
+}
+
+async function save(scope, playlist) {
+    if (busyKey.value !== null || isLocked(playlist) || !video.value) return;
+    busyKey.value = keyOf(scope, playlist);
+    const result = await playlistStore.addSong(scope, playlist.playlistId, video.value);
+    busyKey.value = null;
+    if (!result.ok) {
+        playlistStore.notify(result.message, { tone: 'error' });
+        return;
+    }
+    modal.value?.close();
+    const id = playlist.playlistId;
+    playlistStore.notify(`Ajouté à « ${result.playlist?.title || playlist.title} »`, {
+        tone: 'success',
+        action: { label: 'Ouvrir', run: () => playlistStore.openPlaylist(scope, id) }
+    });
+}
+
+function startCreate() {
+    creating.value = true;
+    newName.value = '';
+    createError.value = null;
+    newScope.value = playlistStore.defaultCreateScope();
+    nextTick(() => nameInput.value?.focus());
+}
+
+async function createAndSave() {
+    if (busyKey.value !== null || !video.value) return;
+    const name = newName.value.trim();
+    if (!name) {
+        createError.value = 'Donnez un nom à la playlist.';
+        nameInput.value?.focus();
+        return;
+    }
+    createError.value = null;
+    const scope = newScope.value === 'guild' && canUseGuild.value ? 'guild' : 'personal';
+    busyKey.value = 'create';
+    const created = await playlistStore.createPlaylist({ scope, name });
+    if (!created.ok) {
+        busyKey.value = null;
+        createError.value = created.message;
+        return;
+    }
+    const added = await playlistStore.addSong(scope, created.playlist.playlistId, video.value);
+    busyKey.value = null;
+    modal.value?.close();
+    const id = created.playlist.playlistId;
+    if (added.ok) {
+        playlistStore.notify(`Playlist « ${created.playlist.title} » créée avec ce titre`, {
+            tone: 'success',
+            action: { label: 'Ouvrir', run: () => playlistStore.openPlaylist(scope, id) }
+        });
+    } else {
+        playlistStore.notify(`Playlist « ${created.playlist.title} » créée, mais le titre n'a pas pu y être ajouté : ${added.message}`, { tone: 'error' });
+    }
+}
+</script>
+<style scoped>
+.save {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.save__song {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px;
+    border-radius: var(--radius);
+    background-color: var(--primary);
+    border: 1px solid var(--border);
+    min-width: 0;
+}
+
+.save__thumb {
+    flex-shrink: 0;
+    width: 64px;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius-sm);
+    object-fit: cover;
+    background-color: var(--tertiary);
+}
+
+.save__thumb--empty {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+}
+
+.save__song-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.save__song-title {
+    font-weight: 600;
+}
+
+.save__song-author {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.save__filter {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.save__filter-icon {
+    position: absolute;
+    left: 10px;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    pointer-events: none;
+}
+
+.save__filter-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding-left: 30px !important;
+}
+
+.save__group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.save__group-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+}
+
+.save__group-count {
+    padding: 0 7px;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.save__empty {
+    margin: 0;
+    padding: 8px 2px;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.save__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.save__list :deep(.playlist-item:disabled) {
+    cursor: default;
+}
+
+.save__item--locked {
+    opacity: 0.6;
+}
+
+.save__plus {
+    flex-shrink: 0;
+    margin-right: 6px;
+    color: var(--text-secondary);
+    opacity: 0;
+    transition: opacity var(--dur-fast) ease;
+}
+
+.save__list :deep(.playlist-item:hover) .save__plus,
+.save__list :deep(.playlist-item:focus-visible) .save__plus {
+    opacity: 1;
+    color: var(--main);
+}
+
+@media (hover: none) {
+    .save__plus {
+        opacity: 1;
+    }
+}
+
+.save__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    flex-shrink: 0;
+    padding: 2px 8px;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 9%, transparent);
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.save__badge--present {
+    color: var(--text-success);
+}
+
+.save__create {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px;
+    border-radius: var(--radius);
+    border: 1px dashed color-mix(in srgb, var(--main) 55%, transparent);
+    background-color: color-mix(in srgb, var(--main) 5%, transparent);
+}
+
+.save__create input {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.save__create-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+.save__new {
+    margin-right: auto;
+}
+</style>
diff --git a/src/components/Widget/Playlist/playlistMeta.js b/src/components/Widget/Playlist/playlistMeta.js
new file mode 100644
index 0000000..884f715
--- /dev/null
+++ b/src/components/Widget/Playlist/playlistMeta.js
@@ -0,0 +1,233 @@
+// Aides d'affichage des playlists (sidebar, en-tête, sélecteurs) : source, pochette, durée, dates,
+// détection des liens d'import. Fonctions pures, sans état.
+
+export const SCOPES = ['personal', 'guild'];
+
+export function normalizeScope(scope) {
+    return scope === 'guild' ? 'guild' : 'personal';
+}
+
+// Pochette par défaut du constructeur backend : n'apporte rien visuellement
+const PLACEHOLDER_THUMBNAIL = /radomisol/i;
+
+function isImageUrl(value) {
+    return typeof value === 'string' && /^https?:\/\//i.test(value) && !PLACEHOLDER_THUMBNAIL.test(value);
+}
+
+/**
+ * Origine d'une playlist : clé, libellé et icône FontAwesome.
+ * @returns {{key: 'google'|'youtube'|'spotify'|'soundcloud'|'manual', label: string, icon: string}}
+ */
+export function playlistSource(playlist) {
+    if (playlist?.source === 'google') {
+        return { key: 'google', label: 'Synchronisée avec YouTube', icon: 'fa-solid fa-arrows-rotate' };
+    }
+    switch (playlist?.type) {
+        case 'youtube':
+            return { key: 'youtube', label: 'Importée de YouTube', icon: 'fa-brands fa-youtube' };
+        case 'spotify':
+            return { key: 'spotify', label: 'Importée de Spotify', icon: 'fa-brands fa-spotify' };
+        case 'soundcloud':
+            return { key: 'soundcloud', label: 'Importée de SoundCloud', icon: 'fa-brands fa-soundcloud' };
+        default:
+            return { key: 'manual', label: 'Playlist personnalisée', icon: 'fa-solid fa-music' };
+    }
+}
+
+// Playlist importée depuis un lien (peut être mise à jour depuis sa source)
+export function isImportedPlaylist(playlist) {
+    return !!playlist && playlist.source !== 'google' && !!playlist.url && playlist.type !== 'playlist';
+}
+
+// Playlist synchronisée par l'API YouTube : remplacée en entier à chaque synchronisation
+export function isSyncedPlaylist(playlist) {
+    return playlist?.source === 'google';
+}
+
+/** Image de couverture : celle de la playlist, sinon celle du premier titre qui en a une, sinon null */
+export function playlistCover(playlist) {
+    if (!playlist) return null;
+    if (isImageUrl(playlist.thumbnail)) return playlist.thumbnail;
+    const songs = Array.isArray(playlist.songs) ? playlist.songs : [];
+    for (let i = 0; i < songs.length && i < 10; i++) {
+        if (isImageUrl(songs[i]?.thumbnail)) return songs[i].thumbnail;
+    }
+    return null;
+}
+
+export function playlistSongCount(playlist) {
+    return Array.isArray(playlist?.songs) ? playlist.songs.length : 0;
+}
+
+export function playlistDuration(playlist) {
+    const value = Number(playlist?.duration);
+    return Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
+}
+
+/** "45 s", "12 min", "1 h 05" (durée cumulée, lisible dans une ligne de métadonnées) */
+export function formatPlaylistDuration(seconds) {
+    const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+    if (total < 60) return `${total} s`;
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    if (hours === 0) return `${minutes} min`;
+    return `${hours} h ${String(minutes).padStart(2, '0')}`;
+}
+
+/** "1 titre", "12 titres" */
+export function formatSongCount(count) {
+    const n = Number.isFinite(count) ? count : 0;
+    return `${n.toLocaleString('fr-FR')} titre${n > 1 ? 's' : ''}`;
+}
+
+/** Ligne de métadonnées "12 titres · 45 min" (sans durée pour une playlist vide) */
+export function playlistMetaLine(playlist) {
+    const count = playlistSongCount(playlist);
+    const parts = [formatSongCount(count)];
+    const duration = playlistDuration(playlist);
+    if (count > 0 && duration > 0) parts.push(formatPlaylistDuration(duration));
+    return parts.join(' · ');
+}
+
+function isoTime(value) {
+    if (typeof value !== 'string' || value === '') return NaN;
+    const time = Date.parse(value);
+    return Number.isFinite(time) ? time : NaN;
+}
+
+/** Date de création en ms (createdAt, sinon l'identifiant qui est un Date.now() historique), 0 si inconnue */
+export function playlistCreatedTime(playlist) {
+    const created = isoTime(playlist?.createdAt);
+    if (Number.isFinite(created)) return created;
+    const fromId = Number(playlist?.playlistId);
+    // Identifiants historiques = horodatages ms (après 2001)
+    return Number.isFinite(fromId) && fromId > 1e12 ? fromId : 0;
+}
+
+export function playlistUpdatedTime(playlist) {
+    const updated = isoTime(playlist?.updatedAt);
+    if (Number.isFinite(updated)) return updated;
+    const synced = isoTime(playlist?.syncedAt);
+    if (Number.isFinite(synced)) return synced;
+    return playlistCreatedTime(playlist);
+}
+
+const DATE_FORMAT = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
+
+/** "7 octobre 2026" ou null si la date est inconnue */
+export function formatPlaylistDate(time) {
+    if (!Number.isFinite(time) || time <= 0) return null;
+    return DATE_FORMAT.format(new Date(time));
+}
+
+/** URL d'avatar Discord (avatar par défaut si l'utilisateur n'en a pas) */
+export function discordAvatarUrl(userId, avatar, size = 64) {
+    if (typeof avatar === 'string' && /^https?:\/\//i.test(avatar)) return avatar;
+    if (userId && typeof avatar === 'string' && avatar !== '') {
+        const ext = avatar.startsWith('a_') ? 'gif' : 'png';
+        return `https://cdn.discordapp.com/avatars/${userId}/${avatar}.${ext}?size=${size}`;
+    }
+    let index = 0;
+    try {
+        index = userId ? Number((BigInt(userId) >> 22n) % 6n) : 0;
+    } catch {
+        index = 0;
+    }
+    return `https://cdn.discordapp.com/embed/avatars/${index}.png`;
+}
+
+/** Nom affiché du créateur d'une playlist partagée */
+export function creatorName(playlist) {
+    const creator = playlist?.createdBy;
+    return creator?.global_name || creator?.username || null;
+}
+
+// === Détection des liens d'import ===
+
+const PLATFORMS = {
+    youtube: { label: 'YouTube', icon: 'fa-brands fa-youtube' },
+    'youtube-music': { label: 'YouTube Music', icon: 'fa-solid fa-circle-play' },
+    spotify: { label: 'Spotify', icon: 'fa-brands fa-spotify' },
+    soundcloud: { label: 'SoundCloud', icon: 'fa-brands fa-soundcloud' }
+};
+
+function result(platform, valid, kindLabel, normalized, message) {
+    const info = platform ? PLATFORMS[platform] : null;
+    return {
+        platform,
+        label: info?.label || null,
+        icon: info?.icon || 'fa-solid fa-link',
+        valid,
+        kindLabel,
+        normalized: valid ? normalized : null,
+        message
+    };
+}
+
+/**
+ * Analyse un lien collé dans le formulaire d'import.
+ * @returns {null | {platform, label, icon, valid: boolean, kindLabel: string|null, normalized: string|null, message: string}}
+ *   null si le champ est vide ; `normalized` = lien envoyé au serveur (forme reconnue par le backend).
+ */
+export function detectPlaylistLink(input) {
+    if (typeof input !== 'string') return null;
+    let text = input.trim();
+    if (text === '') return null;
+
+    // URI Spotify (spotify:playlist:ID) → lien web
+    const uri = /^spotify:(playlist|album):([A-Za-z0-9]+)$/i.exec(text);
+    if (uri) text = `https://open.spotify.com/${uri[1].toLowerCase()}/${uri[2]}`;
+
+    if (!/^[a-z][a-z0-9+.-]*:\/\//i.test(text)) text = `https://${text}`;
+    let url;
+    try {
+        url = new URL(text);
+    } catch {
+        return result(null, false, null, null, "Ce texte n'est pas un lien valide.");
+    }
+    if (!/^https?:$/.test(url.protocol) || /\s/.test(input.trim())) {
+        return result(null, false, null, null, "Ce texte n'est pas un lien valide.");
+    }
+
+    const host = url.hostname.toLowerCase().replace(/^(www\.|m\.)/, '');
+
+    if (host === 'youtube.com' || host === 'music.youtube.com' || host === 'youtu.be') {
+        const platform = host === 'music.youtube.com' ? 'youtube-music' : 'youtube';
+        const list = url.searchParams.get('list');
+        if (!list || !/^[A-Za-z0-9_-]{10,64}$/.test(list)) {
+            return result(platform, false, null, null, "Ce lien mène à une vidéo, pas à une playlist : ouvrez la playlist puis copiez son lien.");
+        }
+        // Mix générés automatiquement (RD…) : pas de page playlist stable, sauf les albums YouTube Music (RDCLAK…)
+        if (/^RD/.test(list) && !/^RDCLAK/.test(list)) {
+            return result(platform, false, null, null, 'Les mix générés automatiquement par YouTube ne peuvent pas être importés.');
+        }
+        // Forme canonique comprise par le serveur (les liens youtu.be ou musique y sont ramenés)
+        const normalized = `https://www.youtube.com/playlist?list=${list}`;
+        return result(platform, true, 'Playlist', normalized, `Playlist ${PLATFORMS[platform].label} détectée`);
+    }
+
+    if (host === 'open.spotify.com' || host === 'spotify.link' || host === 'play.spotify.com') {
+        if (host === 'spotify.link') {
+            return result('spotify', true, 'Lien court', url.href, 'Lien court Spotify détecté (playlist ou album public)');
+        }
+        const match = /\/(playlist|album)\/([A-Za-z0-9]+)/.exec(url.pathname);
+        if (!match) {
+            return result('spotify', false, null, null, "Seules les playlists et albums Spotify peuvent être importés.");
+        }
+        const kind = match[1] === 'album' ? 'Album' : 'Playlist';
+        return result('spotify', true, kind, `https://open.spotify.com/${match[1]}/${match[2]}`, `${kind} Spotify détecté${kind === 'Playlist' ? 'e' : ''}`);
+    }
+
+    if (host === 'soundcloud.com' || host === 'on.soundcloud.com') {
+        if (host === 'on.soundcloud.com') {
+            return result('soundcloud', true, 'Lien court', url.href, 'Lien court SoundCloud détecté');
+        }
+        if (!/^\/[^/]+\/sets\/[^/]+/.test(url.pathname)) {
+            return result('soundcloud', false, null, null, "Ce lien SoundCloud ne mène pas à une playlist (« sets »).");
+        }
+        url.hash = '';
+        return result('soundcloud', true, 'Playlist', url.href, 'Playlist SoundCloud détectée');
+    }
+
+    return result(null, false, null, null, 'Lien non reconnu : utilisez un lien YouTube, YouTube Music, Spotify ou SoundCloud.');
+}
diff --git a/src/components/Widget/Queue/NextList.vue b/src/components/Widget/Queue/NextList.vue
index 5c502a3..d8f359e 100644
--- a/src/components/Widget/Queue/NextList.vue
+++ b/src/components/Widget/Queue/NextList.vue
@@ -1,226 +1,454 @@
 <template>
-    <section class="list-global">
-        <Button :disabled="!online || !nextList || nextList.length === 0" @click="clearList()" icon="fa-trash">Vider la liste</Button>
-        <section class="list-container">
-            <draggable v-model="localNextList" v-bind="dragOptions" @end="onDragEnd" item-key="id" :disabled="!online" :class="{ 'drag-disabled': !online }">
-                <template #item="{ element: video, index }">
-                    <div class="list-video">
-                        <VideoQueue little :video="video"></VideoQueue>
-                        <IconAction @click="setSelectedIndex(index, $event)" icon="fa-ellipsis-vertical"></IconAction>
-                    </div>
+    <section ref="root" class="list-global">
+        <div class="list-toolbar">
+            <p class="list-count" aria-live="polite">
+                <template v-if="!online">Player hors ligne</template>
+                <template v-else-if="totalCount === 0">File vide</template>
+                <template v-else>{{ totalCount }} titre{{ totalCount > 1 ? 's' : '' }} à suivre</template>
+            </p>
+            <Button
+                size="sm"
+                variant="ghost"
+                icon="fa-solid fa-trash"
+                :disabled="!online || !nextList || nextList.length === 0"
+                @click="askClear()"
+            >Vider</Button>
+        </div>
+
+        <p :id="helpId" class="sr-only">
+            Flèches haut et bas sur la poignée pour déplacer un titre, Suppr pour le retirer de la file.
+        </p>
+        <p class="sr-only" aria-live="polite">{{ announcement }}</p>
+
+        <div class="list-container" @touchstart="onListTouchStart">
+            <div v-if="!online" class="list-state">
+                <EmptyState icon="fa-solid fa-link-slash" title="Subsonics est hors ligne" compact>
+                    Rejoignez un salon vocal et lancez un titre pour démarrer le player.
+                </EmptyState>
+            </div>
+            <div v-else-if="!nextList || nextList.length === 0" class="list-state">
+                <EmptyState icon="fa-solid fa-list-ol" title="Rien à suivre" compact>
+                    Ajoutez des titres depuis la recherche ou une playlist.
+                </EmptyState>
+            </div>
+
+            <draggable
+                v-else
+                v-model="localNextList"
+                v-bind="dragOptions"
+                tag="ol"
+                class="queue-list"
+                aria-label="Titres à suivre"
+                item-key="uid"
+                :disabled="!online"
+                @end="onDragEnd"
+            >
+                <template #item="{ element, index }">
+                    <li class="queue-row">
+                        <button
+                            type="button"
+                            class="queue-row__handle"
+                            :data-queue-handle="index"
+                            :aria-label="`Déplacer « ${element.video.title} », position ${index + 1} sur ${localNextList.length}`"
+                            :aria-describedby="helpId"
+                            @keydown="onHandleKeydown($event, index)"
+                        >
+                            <Icon icon="fa-solid fa-grip-vertical" aria-hidden="true" />
+                        </button>
+                        <span class="queue-row__position" aria-hidden="true">{{ index + 1 }}</span>
+                        <VideoQueue class="queue-row__main" little :video="element.video" />
+                        <IconAction
+                            class="queue-row__more"
+                            icon="fa-solid fa-ellipsis-vertical"
+                            :label="`Actions pour « ${element.video.title} »`"
+                            aria-haspopup="menu"
+                            @click="openMenu(index, $event)"
+                        />
+                    </li>
                 </template>
             </draggable>
+
             <!-- Le serveur limite la liste envoyée (100 titres) : indiquer les titres non affichés -->
-            <p class="more-items" v-if="online && hiddenCount > 0">+ {{ hiddenCount }} titre{{ hiddenCount > 1 ? 's' : '' }} dans la liste de lecture</p>
-            <div class="allSpace" v-if="online && (!nextList || nextList.length === 0)">
-                <p class="text-secondary"><Icon font-size="2em" icon="fa-solid fa-circle-xmark"/> Aucun élément dans la liste de lecture</p>
-            </div>
-            <div class="allSpace" v-else-if="!online">
-                <p class="text-secondary"><Icon font-size="2em" icon="fa-solid fa-link-slash"/> Subsonics est hors ligne</p>
-            </div>
-            <ContextMenu ref="contextMenu">
-                <div @click="playNow()">
-                    <Icon icon="fa-solid fa-play"/>
-                    <p>Jouer maintenant</p>
-                </div>
-                <div @click="moveUp()">
-                    <Icon icon="fa-solid fa-list-ol"/>
-                    <p>Déplacer en première position</p>
-                </div>
-                <div v-if="!isAFile" @click="savePlaylist()">
-                    <Icon icon="fa-solid fa-floppy-disk"/>
-                    <p>Sauvegarder dans une playlist</p>
-                </div>
-                <div @click="deleteItem()">
-                    <Icon icon="fa-solid fa-trash"/>
-                    <p>Supprimer</p>
-                </div>
-            </ContextMenu>
-        </section>
-        <Modal ref="saveModal" icon="fa-save" title="Sauvegarder dans une playlist">
-            <Video v-if="selectedIndex" class="save-video" :video="nextList[selectedIndex]"/>
-            <Selector ref="playlistSelector" v-if="userStore.playlists?.length > 0">
-                <p class="selectorp" :value="playlist.playlistId" v-for="playlist in userStore.playlists" :key="playlist.playlistId"><Icon :icon="playlist.type === 'youtube' ? 'fa-brands fa-youtube' : 'fa-solid fa-music'" /> {{ playlist.title }}</p>
-            </Selector>
-            <p v-else class="info-no">Vous n'avez pas encore de playlist. Créez-en une pour sauvegarder ce titre.</p>
-            <Button :disabled="userStore.playlists?.length === 0" @click="Events.emit('video:add', { video: nextList[selectedIndex], playlistId: playlistSelector.firstSlot().props.value }); saveModal.close()" icon="fa-solid fa-save">Sauvegarder</Button>
+            <p class="more-items" v-if="online && hiddenCount > 0">
+                + {{ hiddenCount }} titre{{ hiddenCount > 1 ? 's' : '' }} dans la file, non affiché{{ hiddenCount > 1 ? 's' : '' }}
+            </p>
+        </div>
+
+        <ContextMenu ref="contextMenu" :label="menuLabel">
+            <button type="button" @click="playNow()">
+                <Icon icon="fa-solid fa-play" aria-hidden="true"/>
+                <span>Jouer maintenant</span>
+            </button>
+            <button v-if="selectedIndex !== 0" type="button" @click="moveUp()">
+                <Icon icon="fa-solid fa-arrow-up-wide-short" aria-hidden="true"/>
+                <span>Placer en tête de file</span>
+            </button>
+            <button v-if="!isAFile" type="button" @click="savePlaylist()">
+                <Icon icon="fa-solid fa-floppy-disk" aria-hidden="true"/>
+                <span>Enregistrer dans une playlist</span>
+            </button>
+            <hr />
+            <button type="button" class="ui-menu__danger" @click="deleteItem()">
+                <Icon icon="fa-solid fa-trash" aria-hidden="true"/>
+                <span>Retirer de la file</span>
+            </button>
+        </ContextMenu>
+
+        <Modal ref="clearModal" size="sm" icon="fa-solid fa-trash" title="Vider la file">
+            <p class="modal-text">
+                Retirer les {{ totalCount }} titre{{ totalCount > 1 ? 's' : '' }} à suivre ? Le titre en cours continue de jouer.
+            </p>
+            <template #footer>
+                <Button variant="secondary" @click="clearModal.close()">Annuler</Button>
+                <Button variant="danger" icon="fa-solid fa-trash" @click="clearList()">Vider la file</Button>
+            </template>
         </Modal>
     </section>
 </template>
 
 <script setup>
+/**
+ * Onglet « À suivre » de la file : glisser-déposer (souris, toucher après un appui court),
+ * poignée clavier (flèches haut / bas, Suppr), menu d'actions par titre.
+ * Requêtes : /QUEUE/NEXT/MOVE {index, newIndex}, /QUEUE/NEXT/DELETE index, /QUEUE/NEXT/DELETEALL,
+ * /QUEUE/PLAY {index, now, listType: "next"}.
+ */
+import { computed, nextTick, ref, useId, watch } from 'vue';
+import draggable from 'vuedraggable';
 import VideoQueue from '@/components/UI/VideoQueue.vue';
 import IconAction from '@/components/UI/IconAction.vue';
-import { useId, ref, onMounted, watch, computed } from 'vue';
 import ContextMenu from '@/components/UI/ContextMenu.vue';
 import Button from '@/components/UI/Button.vue';
-import { IORequest } from '@/utils/IORequest';
 import Modal from '@/components/UI/Modal.vue';
-import Selector from '@/components/UI/Selector.vue';
-import Video from '@/components/UI/Video.vue';
-import { useUserStore } from '@/stores/userStore';
-import Events from '@/utils/Events';
-import draggable from 'vuedraggable';
-
-const id = useId()
-const contextMenu = ref(null)
-const selectedIndex = ref(null)
-const saveModal = ref(null)
-const userStore = useUserStore()
-const playlistSelector = ref(null)
-const localNextList = ref([])
-
-const isAFile = computed(() => {
-    if(selectedIndex.value == null) return false;
-    const video = props.nextList?.[selectedIndex.value];
-    return video?.type === "attachment";
-})
-
-// Titres présents côté serveur mais non envoyés (nextCount = taille réelle de la file)
-const hiddenCount = computed(() => {
-    const shown = props.nextList ? props.nextList.length : 0;
-    return Number.isFinite(props.nextCount) ? Math.max(0, props.nextCount - shown) : 0;
-})
-
-const dragOptions = {
-    animation: 200,
-    disabled: false,
-    ghostClass: 'ghost',
-    handle: '.list-video',
-    forceFallback: false,
-    fallbackClass: 'dragging',
-    dragClass: 'dragging',
-
-    fallbackOnBody: false,
-    swapThreshold: 0.65,
-};
+import EmptyState from '@/components/UI/EmptyState.vue';
+import { IORequest } from '@/utils/IORequest';
+import { usePlaylistStore } from '@/stores/playlistStore';
 
 const props = defineProps({
     selectedTab: Number,
     online: {},
     nextList: Array,
     nextCount: Number
-})
+});
 
-// Copie locale : le drag réordonne cette copie sans modifier l'état du store
-watch(() => props.nextList, (newList) => {
-    localNextList.value = newList ? [...newList] : []
-})
+const helpId = `queue-help-${useId()}`;
+const playlistStore = usePlaylistStore();
+const root = ref(null);
+const contextMenu = ref(null);
+const clearModal = ref(null);
+const selectedIndex = ref(null);
+// Titre visé par le menu : l'index est revérifié avant chaque action (la file peut changer entre-temps)
+const selectedVideo = ref(null);
+const localNextList = ref([]);
+const announcement = ref('');
+let pendingFocus = null;
 
-onMounted(() => {
-    localNextList.value = props.nextList ? [...props.nextList] : []
-})
+const dragOptions = {
+    animation: 180,
+    ghostClass: 'queue-row--ghost',
+    chosenClass: 'queue-row--chosen',
+    dragClass: 'queue-row--drag',
+    handle: '.queue-row__handle, .queue-row__main',
+    // Écran tactile : un appui court est nécessaire, pour que le doigt puisse faire défiler la liste
+    delay: 220,
+    delayOnTouchOnly: true,
+    swapThreshold: 0.65,
+};
 
-
-
-const emit = defineEmits(['update:nextList']);
-
-function clearList() {
-    IORequest("/QUEUE/NEXT/DELETEALL")
+function wrap(list) {
+    return (list || []).map((video, index) => ({ uid: `${index}:${video?.id ?? video?.url ?? ''}`, video }));
 }
 
-function setSelectedIndex(index, event) {
-    selectedIndex.value = index;
-    // Check if the ctrl key is pressed without using event
+// Copie locale : le glisser-déposer réordonne cette copie sans modifier l'état du store
+watch(() => props.nextList, (newList) => {
+    localNextList.value = wrap(newList);
+    if (pendingFocus !== null) {
+        const target = pendingFocus;
+        pendingFocus = null;
+        focusHandle(target);
+    }
+}, { immediate: true });
 
-   const isCtrlPressed = event.ctrlKey || event.metaKey; 
-   if(isCtrlPressed) {
-       deleteItem()
-   } else {
-       contextMenu.value.show()
-   }
+const totalCount = computed(() => {
+    const shown = props.nextList ? props.nextList.length : 0;
+    return Number.isFinite(props.nextCount) ? Math.max(props.nextCount, shown) : shown;
+});
+
+// Titres présents côté serveur mais non envoyés (nextCount = taille réelle de la file)
+const hiddenCount = computed(() => {
+    const shown = props.nextList ? props.nextList.length : 0;
+    return Math.max(0, totalCount.value - shown);
+});
+
+const isAFile = computed(() => selectedVideo.value?.type === "attachment");
+const menuLabel = computed(() => selectedVideo.value?.title ? `Actions pour « ${selectedVideo.value.title} »` : 'Actions');
+
+function sameVideo(a, b) {
+    if (!a || !b) return false;
+    if (a === b) return true;
+    return (a.id ?? a.url) === (b.id ?? b.url) && a.title === b.title;
+}
+
+// Index courant du titre visé (il a pu bouger si la file a changé depuis l'ouverture du menu)
+function resolveIndex() {
+    const list = props.nextList || [];
+    const index = selectedIndex.value;
+    if (index == null) return null;
+    if (sameVideo(list[index], selectedVideo.value)) return index;
+    const found = list.findIndex((video) => sameVideo(video, selectedVideo.value));
+    return found === -1 ? null : found;
+}
+
+function openMenu(index, event) {
+    selectedIndex.value = index;
+    selectedVideo.value = props.nextList?.[index] || null;
+    // Ctrl / Cmd + clic : suppression directe (raccourci historique)
+    if (event.ctrlKey || event.metaKey) {
+        deleteItem();
+        return;
+    }
+    contextMenu.value.show(event);
+}
+
+function askClear() {
+    clearModal.value.open();
+}
+
+function clearList() {
+    IORequest("/QUEUE/NEXT/DELETEALL");
+    clearModal.value.close();
+    announcement.value = 'File vidée';
 }
 
 function deleteItem() {
-    if(selectedIndex.value == null) return;
-    IORequest("/QUEUE/NEXT/DELETE", null, selectedIndex.value)
+    const index = resolveIndex();
+    if (index == null) return;
+    IORequest("/QUEUE/NEXT/DELETE", null, index);
+    announcement.value = `« ${selectedVideo.value?.title || 'Titre'} » retiré de la file`;
 }
 
 function moveUp() {
-    if(selectedIndex.value == null) return;
-    IORequest("/QUEUE/NEXT/MOVE", null, {index: selectedIndex.value, newIndex: 0} )
+    const index = resolveIndex();
+    if (index == null || index === 0) return;
+    IORequest("/QUEUE/NEXT/MOVE", null, { index, newIndex: 0 });
+    announcement.value = `« ${selectedVideo.value?.title || 'Titre'} » placé en tête de file`;
 }
 
 function playNow() {
-    if(selectedIndex.value == null) return;
-     IORequest("/QUEUE/PLAY", null, {index: selectedIndex.value, now: true, listType: "next"} )
+    const index = resolveIndex();
+    if (index == null) return;
+    IORequest("/QUEUE/PLAY", null, { index, now: true, listType: "next" });
 }
 
 function savePlaylist() {
-   if(selectedIndex.value == null) return;
-   saveModal.value.open()
+    if (!selectedVideo.value) return;
+    playlistStore.requestSave(selectedVideo.value);
 }
 
 function onDragEnd(event) {
     if (!props.online) return;
-    const oldIndex = event.oldIndex;
-    const newIndex = event.newIndex;
+    const { oldIndex, newIndex } = event;
     if (oldIndex !== newIndex) {
-        IORequest("/QUEUE/NEXT/MOVE", null, { index: oldIndex, newIndex: newIndex });
+        IORequest("/QUEUE/NEXT/MOVE", null, { index: oldIndex, newIndex });
     }
 }
+
+function focusHandle(index) {
+    nextTick(() => {
+        if (index < 0) return;
+        const handle = root.value?.querySelector(`[data-queue-handle="${index}"]`);
+        handle?.focus({ preventScroll: false });
+    });
+}
+
+// Poignée au clavier : déplacement immédiat de la copie locale, puis requête au serveur
+function onHandleKeydown(event, index) {
+    if (!props.online) return;
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+        event.preventDefault();
+        selectedIndex.value = index;
+        selectedVideo.value = props.nextList?.[index] || null;
+        deleteItem();
+        // Le focus suivra le titre suivant une fois la nouvelle file reçue
+        pendingFocus = Math.min(index, localNextList.value.length - 2);
+        return;
+    }
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+    event.preventDefault();
+    const target = index + (event.key === 'ArrowUp' ? -1 : 1);
+    if (target < 0 || target >= localNextList.value.length) return;
+    const list = [...localNextList.value];
+    const [moved] = list.splice(index, 1);
+    list.splice(target, 0, moved);
+    localNextList.value = list;
+    pendingFocus = target;
+    focusHandle(target);
+    announcement.value = `« ${moved.video.title} » en position ${target + 1} sur ${list.length}`;
+    IORequest("/QUEUE/NEXT/MOVE", null, { index, newIndex: target });
+}
+
+// Sur mobile, la file est dans un carrousel qui change de page au glissement : un geste qui part de la
+// poignée est un déplacement de titre, pas un changement de page
+function onListTouchStart(event) {
+    if (event.target instanceof Element && event.target.closest('.queue-row__handle')) event.stopPropagation();
+}
 </script>
 
 <style scoped>
+.list-global {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+}
+
+.list-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-height: 30px;
+}
+
+.list-count {
+    margin: 0;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
 .list-container {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    width: 100%;
-    height: 100%;
+    gap: 8px;
+    min-height: 0;
     overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-right: 4px;
     user-select: none;
 }
 
-.dragging {
-    opacity: 0;
-    display: none;
+.list-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.list-global {
-    flex: 1;
+.queue-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
-    position: absolute;
     flex-direction: column;
-    gap: 10px;
-    overflow: hidden;
-    padding-right: 5px;
-    width: 100%;
-    height: 100%;
+    gap: 2px;
 }
-.text-secondary {
-    color: var(--text-secondary);
+
+.queue-row {
     display: flex;
     align-items: center;
-    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    padding: 4px 6px 4px 0;
+    border-radius: var(--radius);
+    transition: background-color var(--dur-fast) ease;
+}
+
+.queue-row:hover,
+.queue-row:focus-within {
+    background-color: var(--surface-hover);
+}
+
+.queue-row__main {
     flex: 1;
-    gap: 10px;
+    min-width: 0;
+    cursor: grab;
+}
+
+.queue-row__position {
+    width: 1.6em;
+    flex-shrink: 0;
+    text-align: right;
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    font-variant-numeric: tabular-nums;
+}
+
+/* Poignée : visible au survol / au focus (toujours sur écran tactile) */
+.queue-row__handle {
+    display: inline-flex;
+    align-items: center;
     justify-content: center;
-    font-size: 1.3em;
-    text-align: center;
+    flex-shrink: 0;
+    width: 20px;
+    height: 36px;
+    margin-right: -6px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-tertiary);
+    font-size: 0.8em;
+    cursor: grab;
+    opacity: 0;
+    touch-action: none;
+    outline: 2px solid transparent;
+    transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease;
 }
-.list-video {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    margin-top: 2.5px;
-    margin-bottom: 2.5px;
-    padding-right: 5px;
+
+.queue-row:hover .queue-row__handle,
+.queue-row:focus-within .queue-row__handle {
+    opacity: 1;
 }
-.allSpace {
-    flex: 1;
-    display: flex;
+
+.queue-row__handle:hover {
+    color: var(--text);
+}
+
+.queue-row__handle:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring-inset);
+    color: var(--text);
+}
+
+@media (hover: none) {
+    .queue-row__handle {
+        opacity: 1;
+    }
+}
+
+.queue-row__more {
+    margin-right: 2px;
+    font-size: 0.85em;
+}
+
+.queue-row--ghost {
+    opacity: 0.45;
+    background-color: var(--main-soft);
+}
+
+.queue-row--chosen {
+    background-color: var(--surface-active);
+}
+
+.queue-row--drag {
+    background-color: var(--tertiary);
+    box-shadow: var(--shadow);
 }
 
 .more-items {
     margin: 0;
+    padding: 4px 0 8px;
     text-align: center;
-    font-size: 0.8em;
+    font-size: 0.78rem;
     color: var(--text-secondary);
 }
 
-
-
+.modal-text {
+    margin: 0;
+    line-height: 1.5;
+}
 </style>
diff --git a/src/components/Widget/Queue/PreviousList.vue b/src/components/Widget/Queue/PreviousList.vue
index a402aaf..d6490f5 100644
--- a/src/components/Widget/Queue/PreviousList.vue
+++ b/src/components/Widget/Queue/PreviousList.vue
@@ -1,126 +1,169 @@
 <template>
     <section class="list-container">
-            <div v-if="previousList && previousList.length > 0" v-for="(video, index) in previousList" :key="index" class="list-video">
-                <VideoQueue little :video="video" :index="index"></VideoQueue>
-                <IconAction @click="setSelectedIndex(index)" icon="fa-ellipsis-vertical"></IconAction>
-            </div>
-            <div class="allSpace" v-else>
-                <p class="text-secondary"><Icon font-size="2em" icon="fa-solid fa-circle-xmark"/> Aucun élément dans l'historique</p>
-            </div>
+        <p class="list-count">
+            <template v-if="previousList && previousList.length > 0">{{ previousList.length }} titre{{ previousList.length > 1 ? 's' : '' }} joué{{ previousList.length > 1 ? 's' : '' }} récemment</template>
+            <template v-else>Historique vide</template>
+        </p>
 
-            <ContextMenu ref="contextMenu">
-                 <div v-if="globalStore.currentChannel" @click="playNow(false)">
-                    <AddList/>
-                    <p>Ajouter à la liste de lecture</p>
-                </div>
-                <div  v-if="globalStore.currentChannel" @click="playNow(true)">
-                    <Icon icon="fa-solid fa-play"/>
-                    <p>Jouer maintenant</p>
-                </div>
-                <div v-if="!isAFile" @click="savePlaylist()">
-                    <Icon icon="fa-solid fa-floppy-disk"/>
-                    <p>Sauvegarder dans une playlist</p>
-                </div>
-    
-            </ContextMenu>
+        <ol v-if="previousList && previousList.length > 0" class="queue-list" aria-label="Titres joués récemment">
+            <li v-for="(video, index) in previousList" :key="`${index}:${video?.id ?? video?.url ?? ''}`" class="queue-row">
+                <VideoQueue class="queue-row__main" little :video="video" :index="index"></VideoQueue>
+                <IconAction
+                    class="queue-row__more"
+                    icon="fa-solid fa-ellipsis-vertical"
+                    :label="`Actions pour « ${video.title} »`"
+                    aria-haspopup="menu"
+                    @click="openMenu(index, $event)"
+                />
+            </li>
+        </ol>
+        <div v-else class="list-state">
+            <EmptyState icon="fa-solid fa-clock-rotate-left" title="Aucun titre joué" compact>
+                Les titres joués sur ce serveur apparaîtront ici.
+            </EmptyState>
+        </div>
 
-            <Modal ref="saveModal" icon="fa-save" title="Sauvegarder dans une playlist">
-            <Video v-if="selectedIndex" class="save-video" :video="previousList[selectedIndex]"/>
-            <Selector ref="playlistSelector" v-if="userStore.playlists?.length > 0">
-                <p class="selectorp" :value="playlist.playlistId" v-for="playlist in userStore.playlists" :key="playlist.playlistId"><Icon :icon="playlist.type === 'youtube' ? 'fa-brands fa-youtube' : 'fa-solid fa-music'" /> {{ playlist.title }}</p>
-            </Selector>
-            <p v-else class="info-no">Vous n'avez pas encore de playlist. Créez-en une pour sauvegarder ce titre.</p>
-            <Button :disabled="userStore.playlists?.length === 0" @click="Events.emit('video:add', { video: previousList[selectedIndex], playlistId: playlistSelector.firstSlot().props.value }); saveModal.close()" icon="fa-solid fa-save">Sauvegarder</Button>
-        </Modal>
+        <ContextMenu ref="contextMenu" :label="menuLabel">
+            <button v-if="globalStore.currentChannel" type="button" @click="playNow(false)">
+                <AddList aria-hidden="true"/>
+                <span>Ajouter à la file</span>
+            </button>
+            <button v-if="globalStore.currentChannel" type="button" @click="playNow(true)">
+                <Icon icon="fa-solid fa-play" aria-hidden="true"/>
+                <span>Jouer maintenant</span>
+            </button>
+            <button v-if="!isAFile" type="button" @click="savePlaylist()">
+                <Icon icon="fa-solid fa-floppy-disk" aria-hidden="true"/>
+                <span>Enregistrer dans une playlist</span>
+            </button>
+            <button v-if="!globalStore.currentChannel" type="button" disabled>
+                <Icon icon="fa-solid fa-headphones" aria-hidden="true"/>
+                <span>Rejoignez un salon vocal pour rejouer ce titre</span>
+            </button>
+        </ContextMenu>
     </section>
 </template>
 <script setup>
+/**
+ * Onglet « Historique » de la file : derniers titres joués, avec menu (ajouter à la file, jouer, enregistrer).
+ * Requête : /QUEUE/PLAY {index, now, listType: "previous"}.
+ */
+import { computed, ref } from 'vue';
 import VideoQueue from '@/components/UI/VideoQueue.vue';
 import IconAction from '@/components/UI/IconAction.vue';
-import { ref, computed, useId } from 'vue';
 import ContextMenu from '@/components/UI/ContextMenu.vue';
-import Button from '@/components/UI/Button.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
 import { IORequest } from '@/utils/IORequest';
-import Modal from '@/components/UI/Modal.vue';
-import Selector from '@/components/UI/Selector.vue';
-import Video from '@/components/UI/Video.vue';
-import { useUserStore } from '@/stores/userStore';
-import Events from '@/utils/Events';
 import AddList from '@/assets/Icons/AddList.vue';
 import { useGlobalStore } from '@/stores/globalStore';
-
-const id = useId()
-const userStore = useUserStore();
-const globalStore = useGlobalStore();
-
-const selectedIndex = ref(null)
-const contextMenu = ref(null)
-const saveModal = ref(null)
-const playlistSelector = ref(null)
-
-const isAFile = computed(() => {
-    if(selectedIndex.value == null) return false;
-    const video = props.previousList?.[selectedIndex.value];
-    return video?.type === "attachment";
-})
-
-function setSelectedIndex(index) {
-    selectedIndex.value = index;
-    contextMenu.value.show()
-}
-
-function playNow(now) {
-    if(selectedIndex.value == null) return;
-     IORequest("/QUEUE/PLAY", null, {index: selectedIndex.value, now: now, listType: "previous"} )
-}
-
-function savePlaylist() {
-   if(selectedIndex.value == null) return;
-   saveModal.value.open()
-}
-
+import { usePlaylistStore } from '@/stores/playlistStore';
 
 const props = defineProps({
     selectedTab: Number,
     online: {},
     previousList: Array
-})
+});
+
+const globalStore = useGlobalStore();
+const playlistStore = usePlaylistStore();
+
+const selectedIndex = ref(null);
+const selectedVideo = ref(null);
+const contextMenu = ref(null);
+
+const isAFile = computed(() => selectedVideo.value?.type === "attachment");
+const menuLabel = computed(() => selectedVideo.value?.title ? `Actions pour « ${selectedVideo.value.title} »` : 'Actions');
+
+function openMenu(index, event) {
+    selectedIndex.value = index;
+    selectedVideo.value = props.previousList?.[index] || null;
+    contextMenu.value.show(event);
+}
+
+// Index courant du titre visé (l'historique a pu avancer depuis l'ouverture du menu)
+function resolveIndex() {
+    const list = props.previousList || [];
+    const index = selectedIndex.value;
+    const target = selectedVideo.value;
+    if (index == null || !target) return null;
+    const same = (video) => video && (video === target || ((video.id ?? video.url) === (target.id ?? target.url) && video.title === target.title));
+    if (same(list[index])) return index;
+    const found = list.findIndex(same);
+    return found === -1 ? null : found;
+}
+
+function playNow(now) {
+    const index = resolveIndex();
+    if (index == null) return;
+    IORequest("/QUEUE/PLAY", null, { index, now, listType: "previous" });
+}
+
+function savePlaylist() {
+    if (!selectedVideo.value) return;
+    playlistStore.requestSave(selectedVideo.value);
+}
 </script>
 <style scoped>
-
 .list-container {
-    flex: 1;
+    position: absolute;
+    inset: 0;
     display: flex;
-      position: absolute;
     flex-direction: column;
-    gap: 5px;
+    gap: 8px;
     overflow-y: auto;
-    padding-right: 5px;
-    width: 100%;
-    height: 100%;
+    overscroll-behavior: contain;
+    padding-right: 4px;
 }
 
-.text-secondary {
+.list-count {
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    margin: 0;
+    font-size: 0.8rem;
     color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+.list-state {
+    flex: 1;
     display: flex;
     align-items: center;
-    flex-direction: column;
-    flex: 1;
-    gap: 10px;
     justify-content: center;
-    font-size: 1.3em;
-    text-align: center;
 }
 
-.list-video {
+.queue-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.queue-row {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
+    min-width: 0;
+    padding: 4px 6px;
+    border-radius: var(--radius);
+    transition: background-color var(--dur-fast) ease;
 }
 
-.allSpace {
-    flex: 1;
-    display: flex;
+.queue-row:hover,
+.queue-row:focus-within {
+    background-color: var(--surface-hover);
 }
-</style>
\ No newline at end of file
+
+.queue-row__main {
+    flex: 1;
+    min-width: 0;
+    cursor: default;
+}
+
+.queue-row__more {
+    margin-right: 2px;
+    font-size: 0.85em;
+}
+</style>
diff --git a/src/components/Widget/ReturnHomeButton.vue b/src/components/Widget/ReturnHomeButton.vue
index f8ed831..cb68f2a 100644
--- a/src/components/Widget/ReturnHomeButton.vue
+++ b/src/components/Widget/ReturnHomeButton.vue
@@ -1,7 +1,17 @@
 <template>
-     <IconAction color="white" class="return-home" v-if="globalStore.lastRoute" icon="fa-solid fa-xmark" @click="router.push(globalStore.lastRoute)"/>
+     <IconAction
+        v-if="globalStore.lastRoute"
+        class="return-home"
+        color="var(--main-contrast)"
+        icon="fa-solid fa-xmark"
+        label="Revenir à la page précédente"
+        @click="router.push(globalStore.lastRoute)"
+     />
 </template>
 <script setup>
+/**
+ * Croix en haut à droite des pages plein écran (serveurs, conditions…) : retour à la page précédente.
+ */
 import IconAction from '@/components/UI/IconAction.vue';
 import { useRouter } from 'vue-router';
 import { useGlobalStore } from '@/stores/globalStore';
@@ -13,18 +23,7 @@ const router = useRouter();
     position: absolute;
     top: 20px;
     right: 20px;
-    color: #FFFFFF;
-    cursor: pointer;
-}
-.return-home:hover {
-    color: var(--text-hover);
-}
-.icon {
-    font-size: 1.3em;
-    transition: filter 0.3s ease;
-}
-.icon:hover {
-   cursor: pointer;
-   filter: brightness(0.8);
+    z-index: 200;
+    font-size: 1.1em;
 }
 </style>
diff --git a/src/components/Widget/Server/ServerListItem.vue b/src/components/Widget/Server/ServerListItem.vue
index 32cca21..a753289 100644
--- a/src/components/Widget/Server/ServerListItem.vue
+++ b/src/components/Widget/Server/ServerListItem.vue
@@ -1,66 +1,181 @@
 <template>
-    <Box no-shadow level="second" padding="closed">
-        <div class="container-list">
-            <Server :server="server"/>
-            <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members.length > 0" :members="server.members"/>
-            <section>
-            <Error v-if="userStore.userInfo.labels.includes('BAN_' + server.id)">Banni</Error>
-            <Error v-else-if="server.restricted">Restreint</Error>
-            <Button color-lower :disabled="userStore.userInfo.labels.includes('BAN_' + server.id) || server.restricted" class="btn" @click="access()"  icon="fa-solid fa-right-to-bracket">Accéder</Button>
-            </section>
+    <article :class="['server-item', { 'server-item--current': isCurrent, 'server-item--locked': locked }]" :aria-labelledby="nameId">
+        <div class="server-main">
+            <ServerAvatar class="server-avatar" :server-id="server.id" :src="server.icon" size="56px" />
+            <div class="server-info">
+                <h3 :id="nameId" class="server-name">
+                    <span class="u-ellipsis">{{ server.name }}</span>
+                    <Tag v-if="isCurrent" tone="main" icon="fa-solid fa-location-dot">Serveur actuel</Tag>
+                </h3>
+                <p class="server-meta">
+                    <span :class="['status-dot', server.connected ? 'status-dot--on' : 'status-dot--off']" aria-hidden="true"></span>
+                    <span>{{ server.connected ? 'Bot en ligne' : 'Bot hors ligne' }}</span>
+                    <span aria-hidden="true">·</span>
+                    <span>{{ memberLabel }}</span>
+                </p>
+            </div>
         </div>
-    </Box>
+        <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members?.length > 0" :members="server.members"/>
+        <div class="server-side">
+            <Tag v-if="banned" tone="error" icon="fa-solid fa-ban">Banni</Tag>
+            <Tag v-else-if="server.restricted" tone="warning" icon="fa-solid fa-lock">Accès restreint</Tag>
+            <Button
+                class="btn"
+                :variant="isCurrent ? 'secondary' : 'primary'"
+                :disabled="locked"
+                :icon="isCurrent ? 'fa-solid fa-arrow-left' : 'fa-solid fa-right-to-bracket'"
+                :aria-label="`${isCurrent ? 'Revenir sur' : 'Accéder à'} ${server.name}`"
+                @click="access()"
+            >{{ isCurrent ? 'Revenir' : 'Accéder' }}</Button>
+        </div>
+    </article>
 </template>
 <script setup>
-import Box from '@/components/UI/Box.vue';
-import Button from '@/components/UI/Button.vue';
-import { useGlobalStore } from '@/stores/globalStore';
+/**
+ * Carte d'un serveur dans « Mes serveurs » : icône, nom, état du bot, membres, utilisateurs en ligne,
+ * bouton d'accès (désactivé si banni ou accès restreint). Le serveur ouvert en dernier est mis en avant.
+ * Prop : server ({ id, name, icon, connected, serverMember, members, restricted }).
+ */
+import { computed, useId } from 'vue';
 import { useRouter } from 'vue-router';
+import Button from '@/components/UI/Button.vue';
+import Tag from '@/components/UI/Tag.vue';
+import ServerAvatar from '@/components/UI/ServerAvatar.vue';
 import ServerOnlinePicture from '@/components/Widget/Server/ServerOnlinePicture.vue';
-import Server from '@/components/UI/Server.vue';
 import { useUserStore } from '@/stores/userStore';
-import Error from '@/components/UI/Error.vue';
-const router = useRouter();
-
-const userStore = useUserStore();
-
-const globalStore = useGlobalStore();
+import { useGlobalStore } from '@/stores/globalStore';
 
 const props = defineProps({
     server: {
         type: Object,
-        required: true,
-        default: () => ({
-            id: '',
-            name: '',
-            owner: false,
-            icon: '',
-            members: [],
-            serverMember: 0,
-            connected: false
-        })
+        required: true
     }
 });
 
+const router = useRouter();
+const userStore = useUserStore();
+const globalStore = useGlobalStore();
+const nameId = `server-${useId()}`;
+
+const banned = computed(() => !!userStore.userInfo?.labels?.includes('BAN_' + props.server.id));
+const locked = computed(() => banned.value || !!props.server.restricted);
+const isCurrent = computed(() => !!globalStore.lastGuild && globalStore.lastGuild === props.server.id);
+const memberLabel = computed(() => {
+    const count = Number(props.server?.serverMember) || 0;
+    return `${count} membre${count > 1 ? 's' : ''}`;
+});
+
 function access() {
+    if (locked.value) return;
     router.push(`/servers/${props.server.id}`);
 }
 </script>
 <style scoped>
+.server-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 12px 14px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background-color: var(--surface-2);
+    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
+}
 
-.actions {
+.server-item:hover {
+    border-color: color-mix(in srgb, var(--main) 50%, var(--border));
+    box-shadow: var(--shadow-sm);
+}
+
+.server-item--current {
+    border-color: var(--main);
+    box-shadow: inset 4px 0 0 var(--main);
+}
+
+.server-item--locked {
+    opacity: 0.8;
+}
+
+.server-main {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    flex: 1;
+}
+
+.server-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.server-name {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px 8px;
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.3;
+    min-width: 0;
+}
+
+.server-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
+    margin: 0;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.status-dot--on {
+    background-color: var(--text-success);
+}
+
+.status-dot--off {
+    background-color: var(--text-error);
+}
+
+.server-side {
     display: flex;
     align-items: center;
     gap: 10px;
-}   
+    flex-shrink: 0;
+}
+
+.sop {
+    flex-shrink: 0;
+}
 
 @media screen and (max-width: 768px),
        screen and (max-height: 607px) {
-       
-    .container-list {
+    .server-item {
         flex-direction: column;
-        gap: 20px;
+        align-items: stretch;
+        gap: 12px;
+    }
 
+    .server-side {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .server-side :deep(.tag) {
+        align-self: center;
     }
 
     .btn {
@@ -70,38 +185,5 @@ function access() {
     .sop {
         display: none;
     }
-    
-    section {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        gap: 10px;
-    }
 }
-
-.container-list {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;    
-}
-
-.btn svg {
-    font-size: 1.1em;
-}
-
-.sop {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-section {
-    display: flex;
-    align-items: center;
-    gap: 10px;  
-}
-
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Widget/Server/ServerOnlinePicture.vue b/src/components/Widget/Server/ServerOnlinePicture.vue
index c881196..70451d0 100644
--- a/src/components/Widget/Server/ServerOnlinePicture.vue
+++ b/src/components/Widget/Server/ServerOnlinePicture.vue
@@ -1,48 +1,69 @@
 <template>
-    <div>
-    <Avatar v-for="member in members"
-        :key="member.id"
-        :user-id="member.id"
-        :avatar-url="member.avatar"
-        :isMod="member.isMod"
-        :isOwner="member.isOwner"
-        :isAdmin="member.isAdmin"
-        :class="`avatar`"/>
-        
-    <Circle style="z-index: 10;" class="avatar" v-if="length > 4">+ {{ length - 4}}</Circle>
+    <div class="online-stack" role="img" :aria-label="ariaLabel" :title="ariaLabel">
+        <Avatar
+            v-for="member in visibleMembers"
+            :key="member.id"
+            :user-id="member.id"
+            :avatar-url="member.avatar"
+            :isMod="member.isMod"
+            :isOwner="member.isOwner"
+            :isAdmin="member.isAdmin"
+            width="36px"
+            class="avatar"
+        />
+        <Circle class="avatar more" v-if="members.length > MAX_VISIBLE">+{{ members.length - MAX_VISIBLE }}</Circle>
     </div>
-   
-
 </template>
 <script setup>
+/**
+ * Pile d'avatars des utilisateurs connectés à Subsonics sur un serveur (4 au maximum, puis « +N »).
+ * Prop : members ([{ id, avatar, username, global_name, isMod, isOwner, isAdmin }]).
+ */
+import { computed } from 'vue';
 import Avatar from '@/components/UI/Avatar.vue';
 import Circle from '@/components/UI/Circle.vue';
-import { ref, watch } from 'vue';
+
+const MAX_VISIBLE = 4;
 
 const props = defineProps({
     members: {
         type: Array,
         default: () => []
-    },  
-})
+    },
+});
 
-// ne garder que les quatres premiers membres
-const length = ref(props.members.length);
-const members = ref(props.members.slice(0, 4));
-
-watch(() => props.members, (newMembers) => {
-    members.value = newMembers.slice(0, 4);
-    length.value = newMembers.length;
-}, { immediate: true });
+const visibleMembers = computed(() => props.members.slice(0, MAX_VISIBLE));
 
+const ariaLabel = computed(() => {
+    const names = props.members.slice(0, MAX_VISIBLE).map((m) => m.global_name || m.username).filter(Boolean);
+    const count = props.members.length;
+    const base = `${count} utilisateur${count > 1 ? 's' : ''} en ligne`;
+    if (names.length === 0) return base;
+    const rest = count - names.length;
+    return `${base} : ${names.join(', ')}${rest > 0 ? ` et ${rest} autre${rest > 1 ? 's' : ''}` : ''}`;
+});
 </script>
 <style scoped>
-div{
-  display: flex;
-  align-items: center;
+.online-stack {
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
 }
 
 .avatar {
-  margin-left: -10px; /* Ajustez cette valeur pour contrôler le chevauchement */
+    margin-left: -8px;
 }
-</style>
\ No newline at end of file
+
+.avatar :deep(img) {
+    box-shadow: 0 0 0 2px var(--surface-2);
+}
+
+.more {
+    width: 36px;
+    height: 36px;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--surface-2);
+    font-size: 0.72rem;
+}
+</style>
diff --git a/src/components/Widget/User/GoogleCallback.vue b/src/components/Widget/User/GoogleCallback.vue
index aee1a35..9e030ab 100644
--- a/src/components/Widget/User/GoogleCallback.vue
+++ b/src/components/Widget/User/GoogleCallback.vue
@@ -1,19 +1,21 @@
 <template>
     <DefaultSplash width="600px;">
+        <div class="callback" role="status" aria-live="polite">
         <template v-if="state === 'pending'">
-            <h1><Icon spin-pulse icon="fa-solid fa-spinner"/> Connexion à YouTube</h1>
+            <h2 class="callback-title"><Icon spin-pulse icon="fa-solid fa-spinner" aria-hidden="true"/> Connexion à YouTube</h2>
             <p>Liaison de votre compte en cours, veuillez patienter.</p>
         </template>
         <template v-else-if="state === 'success'">
-            <h1><Icon icon="fa-brands fa-youtube"/> Compte YouTube connecté</h1>
+            <h2 class="callback-title"><Icon icon="fa-brands fa-youtube" aria-hidden="true"/> Compte YouTube connecté</h2>
             <Success>{{ message }}</Success>
             <p class="second">Redirection en cours…</p>
         </template>
         <template v-else>
-            <h1><Icon icon="fa-brands fa-youtube"/> Connexion à YouTube impossible</h1>
+            <h2 class="callback-title"><Icon icon="fa-brands fa-youtube" aria-hidden="true"/> Connexion à YouTube impossible</h2>
             <Error>{{ message }}</Error>
             <Button icon="fa-solid fa-arrow-left" @click="goBack()">Retour aux paramètres</Button>
         </template>
+        </div>
     </DefaultSplash>
 </template>
 <script setup>
@@ -96,6 +98,28 @@ onUnmounted(() => {
 });
 </script>
 <style scoped>
+.callback {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+    width: 100%;
+}
+
+.callback-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin: 0;
+    font-size: 1.3rem;
+    font-weight: 700;
+}
+
+.callback-title svg {
+    color: var(--main);
+}
+
 .second {
     color: var(--text-secondary);
     font-size: 12px;
diff --git a/src/components/Widget/User/Settings/BugReport.vue b/src/components/Widget/User/Settings/BugReport.vue
index abca8e1..3d57dd6 100644
--- a/src/components/Widget/User/Settings/BugReport.vue
+++ b/src/components/Widget/User/Settings/BugReport.vue
@@ -1,100 +1,162 @@
-<script setup lang="ts">
+<script setup>
+/**
+ * Signalement d'un problème ou suggestion (/REPORT {level: "bug" | "suggestion", desc}).
+ * La description envoyée est préfixée par la catégorie choisie (format historique « Catégorie - texte »).
+ */
+import { computed, ref, useId, watch } from 'vue';
 import Button from '@/components/UI/Button.vue';
-import Selector from '@/components/UI/Selector.vue';
-import { onMounted, ref, watch } from 'vue';
-import { IORequest } from '@/utils/IORequest';
+import Field from '@/components/UI/Field.vue';
 import Success from '@/components/UI/Success.vue';
-import Events from '@/utils/Events.js';
+import Error from '@/components/UI/Error.vue';
+import { IORequestAsync } from '@/utils/IORequest';
+import { onModalClose } from '@/utils/ModalContext';
 
-const reportDesc = ref(null)
-const category = ref(null); // Default category
-const sended = ref(false);
-const selector = ref(null);
+const MAX_LENGTH = 3500;
+
+const CATEGORIES = [
+    { key: 'auth', level: 'bug', label: "Problème d'authentification (déconnexion intempestive, serveurs)" },
+    { key: 'ui', level: 'bug', label: "Problème avec l'interface (affichage)" },
+    { key: 'bot', level: 'bug', label: 'Problème avec le bot Discord (réponse vide, erreur)' },
+    { key: 'player', level: 'bug', label: 'Problème avec le player (musique)' },
+    { key: 'other', level: 'bug', label: 'Problème de fonctionnalité (non spécifié)' },
+    { key: 'suggestion', level: 'suggestion', label: 'Suggestion' },
+];
+
+const uid = useId();
+const categoryId = `report-category-${uid}`;
+const descId = `report-desc-${uid}`;
 
 const showForm = ref(false);
+const category = ref(CATEGORIES[0].key);
+const reportDesc = ref('');
+const sending = ref(false);
+const sended = ref(false);
+const failed = ref(false);
+const descInput = ref(null);
 
-function sendReport() {
-    if (reportDesc.value && category.value) {
-        IORequest('/REPORT', (answer) => {
-            if(answer) {
-                sended.value = true;
-                reportDesc.value = null;    
-                category.value = null; // Reset category after sending
-                showForm.value = false; // Hide the form after sending
-            }
-        }, {
-            level: category.value,
-            desc: selector.value.firstSlot().children + " - " + reportDesc.value
-        })
+const selected = computed(() => CATEGORIES.find((item) => item.key === category.value) || CATEGORIES[0]);
+const length = computed(() => reportDesc.value.length);
+const canSend = computed(() => reportDesc.value.trim().length >= 5 && length.value <= MAX_LENGTH && !sending.value);
+
+function openForm() {
+    showForm.value = true;
+    sended.value = false;
+    failed.value = false;
+    setTimeout(() => descInput.value?.focus(), 0);
+}
+
+function resetForm() {
+    showForm.value = false;
+    reportDesc.value = '';
+    category.value = CATEGORIES[0].key;
+    failed.value = false;
+}
+
+async function sendReport() {
+    if (!canSend.value) return;
+    sending.value = true;
+    failed.value = false;
+    const answer = await IORequestAsync('/REPORT', {
+        level: selected.value.level,
+        desc: selected.value.label + " - " + reportDesc.value.trim()
+    }, 15000);
+    sending.value = false;
+    if (answer === true) {
+        sended.value = true;
+        resetForm();
+    } else {
+        failed.value = true;
     }
 }
 
-watch(reportDesc, (newValue) => {
-    if (newValue) {
-        sended.value = false; // Reset sent status when description changes
-    }
+watch(reportDesc, (value) => {
+    if (value) sended.value = false;
 });
 
-Events.on('modal:close', () => {
-    showForm.value = false; // Close the form when modal is closed
-    reportDesc.value = null; // Reset the description
-    category.value = null; // Reset the category
-    sended.value = false; // Reset sent status
+// Réinitialise le formulaire à la fermeture de la modale qui le contient (les paramètres)
+onModalClose(() => {
+    resetForm();
+    sended.value = false;
 });
-
-watch(showForm, (newValue) => {
-    if (newValue) {
-        reportDesc.value = null; // Reset description when form is shown
-        category.value = null; // Reset category when form is shown
-        sended.value = false; // Reset sent status when form is shown
-    }
-});
-
 </script>
 
 <template>
-    <p>Si vous rencontrez un problème, vous pouvez le signaler via ce formulaire. Vous pouvez être contacté en cas de besoin par Raphix pour plus d'informations.</p>
-    <Button v-if="!showForm" @click="showForm = !showForm" class="margin" icon="fa-solid fa-paper-plane"> Faire un rapport de bug</Button>
-    <Success class="margin" v-if="sended">Votre rapport a été envoyé avec succès</Success>
-    <div v-if="showForm" class="report-content">
-            <p>Catégorie</p>
-            <Selector ref="selector" v-model="category">
-                <option value="bug">Problème d'authentification (Déconnexion intempestive, Serveurs)</option>
-                <option value="bug">Problème avec l'interface (Affichage)</option>
-                <option value="bug">Problème avec le Bot Discord (Réponse vide, Erreur)</option>
-                <option value="bug">Problème avec le Player (Musique)</option>
-                <option value="bug">Problème de fonctionnalité (Non spécifié)</option>
-                <option value="suggestion">Suggestion</option>
-            </Selector>
-            <p>Description</p>
-            <textarea v-model="reportDesc" name="report-desc" class="report-desc"></textarea>
-            <Button @click="sendReport()" :disabled="!reportDesc" id="report-send-confirm" class="report-send">Envoyer</Button>
+    <p class="report-intro">
+        Un problème, une idée ? Décrivez-le ici : Raphix pourra vous recontacter sur Discord si besoin.
+    </p>
+    <div aria-live="polite">
+        <Success v-if="sended" class="report-feedback">Merci ! Votre rapport a bien été envoyé.</Success>
     </div>
+    <Button v-if="!showForm" variant="secondary" icon="fa-solid fa-paper-plane" @click="openForm()">Signaler un problème</Button>
+    <form v-else class="report-content" @submit.prevent="sendReport()">
+        <Field label="Catégorie" :for="categoryId">
+            <select :id="categoryId" v-model="category">
+                <option v-for="item in CATEGORIES" :key="item.key" :value="item.key">{{ item.label }}</option>
+            </select>
+        </Field>
+        <Field
+            label="Description"
+            :for="descId"
+            required
+            hint="Que faisiez-vous, que s'est-il passé, sur quel appareil ?"
+            :error="length > MAX_LENGTH ? `Description trop longue (${MAX_LENGTH} caractères maximum).` : null"
+        >
+            <template #aside>{{ length }} / {{ MAX_LENGTH }}</template>
+            <template #default="{ id, describedby, invalid }">
+            <textarea
+                :id="id"
+                ref="descInput"
+                v-model="reportDesc"
+                name="report-desc"
+                class="report-desc"
+                rows="4"
+                :aria-describedby="describedby"
+                :aria-invalid="invalid ? 'true' : undefined"
+                required
+            ></textarea>
+            </template>
+        </Field>
+        <Error v-if="failed">L'envoi a échoué. Réessayez dans quelques instants.</Error>
+        <div class="report-actions">
+            <Button variant="ghost" :disabled="sending" @click="resetForm()">Annuler</Button>
+            <Button type="submit" icon="fa-solid fa-paper-plane" :loading="sending" :disabled="!canSend">Envoyer</Button>
+        </div>
+    </form>
 </template>
 <style scoped>
-    p {
-        font-size: 0.8em;
-        color: var(--text-secondary);
-        margin: 10px 0;
-    }   
+.report-intro {
+    margin: 6px 0 10px;
+    font-size: 0.85em;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
 
-    .report-content {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        animation: unfold 1.3s ease-in-out;
-    }
+.report-feedback {
+    margin-bottom: 10px;
+}
 
+.report-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    animation: u-fade-in var(--dur) ease-out;
+}
 
-    .report-content p {
-        margin: 0;
-        font-size: 0.9em;
-        color: var(--text);
-    }
+.report-content select,
+.report-desc {
+    width: 100%;
+    box-sizing: border-box;
+}
 
-    .margin {
-        margin: 10px 0;
-    }
-    
-</style>
\ No newline at end of file
+.report-desc {
+    min-height: 90px;
+    max-height: 30vh;
+}
+
+.report-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+</style>
diff --git a/src/components/Widget/User/Settings/InformationSettings.vue b/src/components/Widget/User/Settings/InformationSettings.vue
index e4bb060..d30dd0d 100644
--- a/src/components/Widget/User/Settings/InformationSettings.vue
+++ b/src/components/Widget/User/Settings/InformationSettings.vue
@@ -1,16 +1,16 @@
 <template>
     <div class="info">
-        <p class="name">Chopin - Fait avec <IconAction @click="modal.open()" size="10px" color="var(--text-secondary)" icon="fa-solid fa-heart"/> par Raphix</p>
+        <p class="name">Chopin · Fait avec <IconAction @click="modal.open()" size="10px" color="var(--main)" icon="fa-solid fa-heart" label="Remerciements"/> par Raphix</p>
         <div class="version">
-             <p>Frontend: {{ versionFrontend }}</p>
-             <p>Backend: {{ versionBackend }}</p>
+             <p>Interface <span class="u-mono">{{ versionFrontend }}</span></p>
+             <p>Serveur <span class="u-mono">{{ versionBackend }}</span></p>
         </div>
-        <Modal title="Merci" icon="fa-solid fa-heart" ref="modal">
+        <Modal title="Merci" icon="fa-solid fa-heart" ref="modal" size="lg">
             <div class="thanks">
                 <Logo/>
             </div>
             <div class="text">
-                <p>Subsonics a été développé avec ❤️ par Raphix et existe depuis le 9 avril 2023.</p>
+                <p>Subsonics a été développé avec <span aria-hidden="true">❤️</span> par Raphix et existe depuis le 9 avril 2023.</p>
             <p>❤️ Merci énormément  à tous le CLP en particulier :</p>
             <ul>
                 <li>IcePlayer: Pour ses conseils, son "RAAAPHIX", sa confiance accordée et pour avoir créer le CLP</li>
@@ -46,7 +46,6 @@ import { onMounted } from 'vue';
 import { ref } from 'vue';
 import Modal from '@/components/UI/Modal.vue';
 import Logo from '@/components/UI/Logo.vue';
-import Avatar from '@/components/UI/Avatar.vue';
 
 const modal = ref(null);
 
@@ -54,7 +53,7 @@ const versionBackend = ref("X.X.X");
 
 onMounted(() => {
     IORequest("/VERSION", (data) => {
-        versionBackend.value = data;
+        if (data) versionBackend.value = data;
     });
 })
 
@@ -64,10 +63,15 @@ onMounted(() => {
 
 .text {
     color: var(--text-secondary);
-    font-size: 12px;
+    font-size: 0.85rem;
+    line-height: 1.55;
     margin: 5px 0;
 }
 
+.text li {
+    margin-bottom: 4px;
+}
+
 .name {
     font-size: 12px;
     color: var(--text-secondary);
diff --git a/src/components/Widget/User/Settings/PrivacySettings.vue b/src/components/Widget/User/Settings/PrivacySettings.vue
index 7974a0b..ab61b94 100644
--- a/src/components/Widget/User/Settings/PrivacySettings.vue
+++ b/src/components/Widget/User/Settings/PrivacySettings.vue
@@ -1,29 +1,31 @@
 <template>
     <p class="privacy">Toutes les données récupérées sont à des fins <strong>strictement</strong> nécessaires au bon fonctionnement de l'application.</p>
 
-    <Button @click="openModal()" icon="fa-solid fa-trash"> Supprimer mon compte</Button>
-    <Modal icon="fa-solid fa-trash" ref="deleteAccountModal" title="Supprimer mon compte">
+    <Button variant="danger" @click="openModal()" icon="fa-solid fa-trash">Supprimer mon compte</Button>
+    <Modal icon="fa-solid fa-trash" ref="deleteAccountModal" size="sm" title="Supprimer mon compte" @close="deleteAccount = false">
         <p class="warning">
-            Êtes-vous sûr de vouloir supprimer votre compte ? <br/> 
+            Êtes-vous sûr de vouloir supprimer votre compte ? <br/>
             Cette action est irréversible et supprime vos playlists, votre historique, vos rôles ! <br/>
             <span class="text-second">Cependant, en vertu de la politique de confidentialité, votre identifiant Discord sera conservé ainsi que les informations générées par Subsonics.</span>
         </p>
-        <div @click="deleteAccount = !deleteAccount" class="options">
-        <input v-model="deleteAccount" type="checkbox" id="deleteAccount"/>
-        <p class="text-second">Je suis sûr de vouloir supprimer mon compte et toutes les données associées.</p>
-        </div>
-        <Button @click="closeModal()">Annuler</Button>
-        <Button :disabled="!deleteAccount" @click="deleteAcc()">Confirmer la suppression</Button>
+        <label class="options">
+            <input v-model="deleteAccount" type="checkbox"/>
+            <span class="text-second">Je suis sûr de vouloir supprimer mon compte et toutes les données associées.</span>
+        </label>
+        <template #footer>
+            <Button variant="secondary" @click="closeModal()">Annuler</Button>
+            <Button variant="danger" icon="fa-solid fa-trash" :disabled="!deleteAccount" :loading="deleting" @click="deleteAcc()">Confirmer la suppression</Button>
+        </template>
     </Modal>
-    <div class="privacy-link">
-        <p class="secondtext"><router-link to="/terms">Conditions d'utilisation</router-link> </p>
-        <p class="secondtext"><router-link to="/privacy">Confidentialité</router-link></p>
-    </div>
+    <nav class="privacy-link" aria-label="Informations légales">
+        <router-link to="/terms">Conditions d'utilisation</router-link>
+        <span aria-hidden="true">·</span>
+        <router-link to="/privacy">Confidentialité</router-link>
+    </nav>
     
 </template>
 <script setup>
 import Button from '@/components/UI/Button.vue';
-import Events from '@/utils/Events';
 import { ref } from 'vue';
 import Modal from '@/components/UI/Modal.vue';
 import { IORequest } from '@/utils/IORequest';
@@ -33,26 +35,26 @@ import { useUserStore } from '@/stores/userStore';
 import { useLoginStore } from '@/stores/loginStore';
 
 const deleteAccount = ref(false);
+const deleting = ref(false);
 const deleteAccountModal = ref(null);
 const loginStore = useLoginStore();
 const router = useRouter();
 
-Events.on('modal:close', () => {
-    deleteAccount.value = false; // Reset checkbox when modal is closed
-});
-
+// La case est décochée par l'événement @close de la modale de suppression (et non plus par
+// l'événement global "modal:close", déclenché par n'importe quelle modale).
 function openModal() {
     deleteAccountModal.value.open()
 }
 
 function closeModal() {
     deleteAccountModal.value.close();
-    deleteAccount.value = false; // Reset checkbox when modal is closed
 }
 
 function deleteAcc() {
     if (deleteAccount.value) {
+        deleting.value = true;
         IORequest('/USER/DELETE', () => {
+            deleting.value = false;
             loginStore.setToken(null); // Clear the token
             router.push("/login?message=" + encodeURIComponent("Votre compte a été supprimé avec succès."));
         });
@@ -63,15 +65,18 @@ function deleteAcc() {
 
 .privacy {
     color: var(--text-secondary);
-    font-size: 14px;
- 
+    font-size: 0.875rem;
+    line-height: 1.5;
 }
 
 .privacy-link {
     display: flex;
-    margin-top: 10px;
-    gap: 10px;
-    font-size: 12px;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 12px;
+    gap: 8px;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
 }
 
 .secondtext {
diff --git a/src/components/Widget/User/Settings/ThemeSelector.vue b/src/components/Widget/User/Settings/ThemeSelector.vue
index 70ffff8..3f1b26a 100644
--- a/src/components/Widget/User/Settings/ThemeSelector.vue
+++ b/src/components/Widget/User/Settings/ThemeSelector.vue
@@ -1,101 +1,155 @@
 <template>
-     <div class="theme-selector">
-                <div @click="lightTheme.click()" class="theme-option">
-                    <div>
-                    <input ref="lightTheme" type="radio" name="theme" value="light" v-model="selectedTheme" />
-                    <p>Clair</p>
-                    </div>
-                </div>
-                <div @click="darkTheme.click()" class="theme-option">
-                    <div>
-                    <input ref="darkTheme" type="radio" name="theme" value="dark" v-model="selectedTheme" />
-                    <p>Sombre</p>
-                    </div>
-                </div>
-                <div @click="systemThemeInput.click()" class="theme-option">
-                    <div>
-                    <input ref="systemThemeInput" type="radio" name="theme" value="system" v-model="selectedTheme" />
-                    <p>Système ({{ systemTheme }})</p>
-                    </div>
-                </div>
-    </div>
+    <fieldset class="theme-selector">
+        <legend class="sr-only">Thème de l'interface</legend>
+        <label v-for="option in options" :key="option.value" :class="['theme-option', { 'theme-option--selected': selectedTheme === option.value }]">
+            <input v-model="selectedTheme" class="sr-only" type="radio" name="theme" :value="option.value" />
+            <span :class="['theme-preview', `theme-preview--${option.value}`]" aria-hidden="true">
+                <span class="theme-preview__bar"></span>
+                <span class="theme-preview__line"></span>
+                <span class="theme-preview__line theme-preview__line--short"></span>
+            </span>
+            <span class="theme-name">
+                <Icon :icon="option.icon" aria-hidden="true" />
+                {{ option.label }}
+            </span>
+            <span v-if="option.value === 'system'" class="theme-hint">Actuellement : {{ systemTheme }}</span>
+        </label>
+    </fieldset>
 </template>
 <script setup>
+/**
+ * Choix du thème (clair, sombre, système) : vrais boutons radio, aperçus miniatures.
+ */
 import { useGlobalStore } from '@/stores/globalStore';
-import { ref, watch } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
+
 const globalStore = useGlobalStore();
 
-const selectedTheme = ref(localStorage.getItem('theme') || 'dark');
-const systemTheme = ref(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Sombre' : 'Clair');
+const options = [
+    { value: 'light', label: 'Clair', icon: 'fa-solid fa-sun' },
+    { value: 'dark', label: 'Sombre', icon: 'fa-solid fa-moon' },
+    { value: 'system', label: 'Système', icon: 'fa-solid fa-desktop' },
+];
 
-const lightTheme = ref(null);
-const darkTheme = ref(null);
-const systemThemeInput = ref(null);
+function readStoredTheme() {
+    try {
+        return localStorage.getItem('theme') || 'dark';
+    } catch {
+        return 'dark';
+    }
+}
+
+const selectedTheme = ref(readStoredTheme());
+const media = window.matchMedia('(prefers-color-scheme: dark)');
+const systemTheme = ref(media.matches ? 'sombre' : 'clair');
+
+function onSystemChange(event) {
+    systemTheme.value = event.matches ? 'sombre' : 'clair';
+}
+media.addEventListener?.('change', onSystemChange);
+onBeforeUnmount(() => media.removeEventListener?.('change', onSystemChange));
 
 watch(() => selectedTheme.value, (newTheme) => {
     globalStore.setTheme(newTheme);
 });
-
 </script>
 
-
 <style scoped>
 .theme-selector {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 10px;
-}   
-.theme-selector div {
-    display: flex;
-    align-items: center;
-    gap: 5px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-width: 0;
 }
 
-.theme-selector span {
-    font-size: 1em;
-    color: var(--text-primary);
-}
-.theme-selector input[type="radio"]:checked + span {
-    opacity: 0.9;
-}
 .theme-option {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    padding: 10px;;
-    gap: 20px !important; 
-    transition: all 0.2s ease-in-out;
-    border-radius: 10px;
-  
+    gap: 8px;
+    padding: 10px;
+    border: 2px solid transparent;
+    border-radius: var(--radius);
+    background-color: var(--tertiary);
+    cursor: pointer;
+    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
 }
 
 .theme-option:hover {
-    transition: backgroundColor 0s ease-in-out;
-    background-color: var(--primary);
-    cursor: pointer;
+    background-color: color-mix(in srgb, var(--tertiary) 85%, var(--text));
 }
 
-.theme-selector p {
-    margin: 0;
-    font-size: 0.9em;
+.theme-option--selected {
+    border-color: var(--main);
+}
+
+/* Le radio est masqué visuellement : son focus clavier est reporté sur la carte */
+.theme-option:has(input:focus-visible) {
+    box-shadow: var(--focus-ring);
+}
+
+/* Aperçus : couleurs fixes, ils représentent chaque thème quel que soit le thème actif */
+.theme-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    max-width: 96px;
+    aspect-ratio: 16 / 10;
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.theme-preview--light { background: #FFFFFF; --preview-line: #cccccc; }
+.theme-preview--dark { background: #111210; --preview-line: #404040; }
+.theme-preview--system { background: linear-gradient(135deg, #FFFFFF 50%, #111210 50%); --preview-line: #9b9a9a; }
+
+.theme-preview__bar {
+    height: 6px;
+    width: 60%;
+    border-radius: 3px;
+    background: var(--main);
+}
+
+.theme-preview__line {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--preview-line);
+}
+
+.theme-preview__line--short {
+    width: 70%;
+}
+
+.theme-name {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.theme-hint {
+    font-size: 0.72rem;
     color: var(--text-secondary);
     text-align: center;
-    vertical-align: middle;
 }
 
-.theme-samples {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-    gap: 10px;
-    margin-top: 20px;
-}
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .theme-selector {
+        gap: 6px;
+    }
 
-input[type="radio"] {
-    margin: 0 !important;
-    margin-right: 5px;
+    .theme-option {
+        padding: 8px 6px;
+    }
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Widget/User/UserSettings.vue b/src/components/Widget/User/UserSettings.vue
index 305bdae..e3ecaf3 100644
--- a/src/components/Widget/User/UserSettings.vue
+++ b/src/components/Widget/User/UserSettings.vue
@@ -55,11 +55,13 @@ const userStore = useUserStore();
 const isAdmin = computed(() => !!userStore.userInfo?.labels?.includes('ADMIN'));
 const showAdmin = computed(() => isAdmin.value && !route.path.startsWith('/admin'));
 
-function open() {
+// section facultative : 'accounts' amène la section « Comptes connectés » à l'écran
+function open(section) {
     if (!modal.value) return;
     modal.value.open();
     if (accountsLoaded.value) youtubeAccount.value?.refresh();
     else accountsLoaded.value = true;
+    if (section === 'accounts') nextTick(() => accountsSection.value?.scrollIntoView({ block: 'nearest' }));
 }
 
 function close() {
diff --git a/src/components/Widget/User/YoutubeAccount.vue b/src/components/Widget/User/YoutubeAccount.vue
index 1f0c878..1136813 100644
--- a/src/components/Widget/User/YoutubeAccount.vue
+++ b/src/components/Widget/User/YoutubeAccount.vue
@@ -8,17 +8,17 @@
         <Info secondary>Sans rapport avec les cookies YouTube du bot, gérés par les administrateurs pour la lecture des musiques.</Info>
 
         <p v-if="!status && !loadFailed" class="yt-state">
-            <Icon icon="fa-solid fa-spinner" spin-pulse /> Chargement de l'état du compte…
+            <Spinner size="sm" label="Chargement de l'état du compte…" visible-label />
         </p>
         <div v-else-if="!status" class="yt-state-error">
             <Error>Impossible de récupérer l'état de votre compte YouTube.</Error>
-            <Button icon="fa-solid fa-rotate-right" :disabled="loading" @click="loadStatus()">Réessayer</Button>
+            <Button variant="secondary" icon="fa-solid fa-rotate-right" :loading="loading" @click="loadStatus()">Réessayer</Button>
         </div>
 
         <div v-else class="yt-card" :class="{ disabled: !status.configured }">
             <div class="yt-header">
                 <img v-if="avatar" class="yt-avatar" :src="avatar" alt="" referrerpolicy="no-referrer" @error="avatarFailed = true">
-                <Icon v-else class="yt-icon" icon="fa-brands fa-youtube" />
+                <Icon v-else class="yt-icon" icon="fa-brands fa-youtube" aria-hidden="true" />
                 <div class="yt-info">
                     <p class="yt-title" :title="title">{{ title }}</p>
                     <p class="yt-sub">{{ subtitle }}</p>
@@ -28,11 +28,11 @@
 
             <ul v-if="linkedOk" class="yt-details">
                 <li :class="{ syncing: status.syncing }">
-                    <Icon :icon="status.syncing ? 'fa-solid fa-spinner' : 'fa-solid fa-clock-rotate-left'" :spin-pulse="status.syncing" />
+                    <Icon :icon="status.syncing ? 'fa-solid fa-spinner' : 'fa-solid fa-clock-rotate-left'" :spin-pulse="status.syncing" aria-hidden="true" />
                     {{ lastSyncText }}
                 </li>
                 <li v-if="status.lastSync?.ok && !status.syncing">
-                    <Icon icon="fa-solid fa-list" />
+                    <Icon icon="fa-solid fa-list" aria-hidden="true" />
                     {{ countText(status.lastSync) }}
                 </li>
             </ul>
@@ -51,8 +51,8 @@
             <div v-if="confirmRevoke" class="yt-confirm">
                 <p>Déconnecter ce compte YouTube ? Les playlists déjà importées sont conservées mais ne seront plus synchronisées.</p>
                 <div class="yt-actions">
-                    <Button class="yt-cancel" icon="fa-solid fa-xmark" :disabled="busy" @click="confirmRevoke = false">Annuler</Button>
-                    <Button icon="fa-solid fa-link-slash" :disabled="busy" @click="revoke()">
+                    <Button variant="secondary" icon="fa-solid fa-xmark" :disabled="busy" @click="confirmRevoke = false">Annuler</Button>
+                    <Button variant="danger" icon="fa-solid fa-link-slash" :disabled="busy" :loading="pending === 'revoke'" @click="revoke()">
                         {{ pending === 'revoke' ? 'Déconnexion…' : 'Déconnecter' }}
                     </Button>
                 </div>
@@ -70,7 +70,7 @@
                         title="Importer / mettre à jour les playlists du compte">
                         {{ status.syncing || pending === 'sync' ? 'Synchronisation…' : 'Synchroniser' }}
                     </Button>
-                    <Button class="yt-cancel" icon="fa-solid fa-link-slash" :disabled="busy" @click="confirmRevoke = true">Déconnecter</Button>
+                    <Button variant="secondary" icon="fa-solid fa-link-slash" :disabled="busy" @click="confirmRevoke = true">Déconnecter</Button>
                 </template>
             </div>
             <p v-if="linkedOk && !status.syncing && cooldownLeft > 0" class="yt-hint">
@@ -78,7 +78,7 @@
             </p>
         </div>
 
-        <div class="yt-feedback" v-if="feedback">
+        <div class="yt-feedback" v-if="feedback" aria-live="polite">
             <Error v-if="feedback.error">{{ feedback.text }}</Error>
             <Success v-else>{{ feedback.text }}</Success>
         </div>
@@ -92,6 +92,7 @@ import Error from '@/components/UI/Error.vue';
 import Info from '@/components/UI/Info.vue';
 import Success from '@/components/UI/Success.vue';
 import Tag from '@/components/UI/Tag.vue';
+import Spinner from '@/components/UI/Spinner.vue';
 import { socket } from '@/socket';
 import { IORequestAsync } from '@/utils/IORequest';
 import { RETURN_KEY, storageSet } from './googleOAuthReturn';
@@ -456,14 +457,6 @@ defineExpose({
     flex: 1;
 }
 
-/* Action secondaire (Annuler / Déconnecter) : moins mise en avant que l'action principale */
-.yt-cancel:not(.disabled) {
-    background-color: var(--tertiary);
-}
-
-.yt-cancel:not(.disabled):hover {
-    background-color: var(--quaternary);
-}
 
 .yt-hint {
     font-size: 0.75em;
diff --git a/src/components/Widget/VideoComposable.vue b/src/components/Widget/VideoComposable.vue
index 6765768..8d34308 100644
--- a/src/components/Widget/VideoComposable.vue
+++ b/src/components/Widget/VideoComposable.vue
@@ -1,55 +1,83 @@
 <template>
-<Video :video="video" ref="videoContainer">
-    <div ref="controls" class="controls">
-        <span title="Ajouter à la liste de lecture" @click="disableAction(); playSong(false)" :class="{'control-icon': globalStore.currentChannel, 'control-icon-disable': !globalStore.currentChannel}"><AddList /></span>
-        <span title="Lire maintenant" @click="disableAction(); playSong(true)" :class="{'control-icon': globalStore.currentChannel, 'control-icon-disable': !globalStore.currentChannel}"><Icon icon="fa-play" /></span>
-        <span v-if="!props.delete && video.type != 'attachment'" title="Enregistrer dans une playlist" @click="disableAction(); saveModal.open()" class="control-icon"><Icon icon="fa-save" /></span>
-        <span v-if="props.delete" title="Supprimer" @click="disableAction(); Events.emit('video:delete', { video: props.video })" class="control-icon"><Icon icon="fa-trash" /></span>
-    </div>
-</Video>
-<Modal icon="fa-solid fa-video" title="Actions" ref="modal">
-    <Video :video="video"/>
-    <Button v-if="globalStore.currentChannel" @click="playSong(false)"><AddList /> Ajouter à la liste de lecture</Button>
-    <Button icon="fa-solid fa-play" v-if="globalStore.currentChannel" @click="playSong(true)"> Lire maintenant</Button>
-    <div v-if="!globalStore.currentChannel" >
-        <p class="text-secondary">Connectez vous à un salon audio sur le serveur {{ globalStore.actualServer ? globalStore.actualServer.name : '' }}, pour lancer un titre</p>
-        <ActualChannel/>
-    </div>
-    <Button v-if="!props.delete && video.type != 'attachment'" @click="saveModal.open()" icon="fa-solid fa-save"> Enregistrer dans une playlist</Button>
-    <Button v-if="props.delete" @click="Events.emit('video:delete', { video: props.video })" icon="fa-solid fa-trash"> Supprimer</Button>
-</Modal>
-<Modal ref="saveModal" icon="fa-save" title="Sauvegarder dans une playlist">
-    <Video class="save-video" :video="video"/>
-    <Selector ref="playlistSelector" v-if="userStore.playlists?.length > 0">
-        <p class="selectorp" :value="playlist.playlistId" v-for="playlist in userStore.playlists" :key="playlist.playlistId"><Icon :icon="playlist.type === 'youtube' ? 'fa-brands fa-youtube' : 'fa-solid fa-music'" /> {{ playlist.title }}</p>
-    </Selector>
-    <p v-else class="info-no">Vous n'avez pas encore de playlist. Créez-en une pour sauvegarder ce titre.</p>
-    <Button :disabled="userStore.playlists?.length === 0" @click="Events.emit('video:add', { video: props.video, playlistId: playlistSelector.firstSlot().props.value }); saveModal.close()" icon="fa-solid fa-save" > Sauvegarder</Button>
-</Modal>
+<div
+    class="vc"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="resetGesture"
+>
+    <Video :video="displayVideo">
+        <div class="vc__controls" role="group" :aria-label="`Actions pour « ${displayVideo.title || 'ce titre'} »`">
+            <button
+                type="button"
+                :class="['vc__control', { 'vc__control--off': !canPlay }]"
+                :aria-label="canPlay ? 'Ajouter à la file' : 'Ajouter à la file (rejoignez d\'abord un salon vocal)'"
+                :title="canPlay ? 'Ajouter à la file' : 'Rejoignez un salon vocal pour lancer un titre'"
+                :aria-disabled="canPlay ? undefined : 'true'"
+                @click.stop="onControl(false)"
+            ><AddList aria-hidden="true" /></button>
+            <button
+                type="button"
+                :class="['vc__control', 'vc__control--main', { 'vc__control--off': !canPlay }]"
+                :aria-label="canPlay ? 'Lire maintenant' : 'Lire maintenant (rejoignez d\'abord un salon vocal)'"
+                :title="canPlay ? 'Lire maintenant' : 'Rejoignez un salon vocal pour lancer un titre'"
+                :aria-disabled="canPlay ? undefined : 'true'"
+                @click.stop="onControl(true)"
+            ><Icon icon="fa-solid fa-play" aria-hidden="true" /></button>
+            <button
+                v-if="!props.delete && video.type != 'attachment'"
+                type="button"
+                class="vc__control"
+                aria-label="Enregistrer dans une playlist"
+                title="Enregistrer dans une playlist"
+                @click.stop="save()"
+            ><Icon icon="fa-solid fa-floppy-disk" aria-hidden="true" /></button>
+            <button
+                v-if="props.delete"
+                type="button"
+                class="vc__control vc__control--danger"
+                aria-label="Supprimer"
+                title="Supprimer"
+                @click.stop="remove()"
+            ><Icon icon="fa-solid fa-trash" aria-hidden="true" /></button>
+        </div>
+    </Video>
+    <Modal icon="fa-solid fa-music" :title="displayVideo.title || 'Actions'" size="sm" ref="modal">
+        <Video class="vc__preview" :video="displayVideo"/>
+        <div v-if="!canPlay" class="vc__notice">
+            <p>Connectez-vous à un salon vocal{{ globalStore.actualServer ? ` du serveur ${globalStore.actualServer.name}` : '' }} pour lancer un titre.</p>
+            <ActualChannel/>
+        </div>
+        <div class="vc__actions">
+            <Button v-if="canPlay" block @click="playSong(false)"><AddList aria-hidden="true" /> Ajouter à la file</Button>
+            <Button v-if="canPlay" block icon="fa-solid fa-play" @click="playSong(true)">Lire maintenant</Button>
+            <Button v-if="!props.delete && video.type != 'attachment'" block variant="secondary" icon="fa-solid fa-floppy-disk" @click="save()">Enregistrer dans une playlist</Button>
+            <Button v-if="props.delete" block variant="danger" icon="fa-solid fa-trash" @click="remove()">Supprimer</Button>
+        </div>
+    </Modal>
+</div>
 </template>
 <script setup>
-import { onMounted, onBeforeUnmount, ref } from 'vue';
+/**
+ * Carte d'un titre avec ses actions (résultats de recherche, fichiers, historique, playlists).
+ * Souris / clavier : boutons superposés à la miniature (au survol ou au focus).
+ * Écran tactile : un appui (sans glisser) ouvre la fenêtre d'actions.
+ * Props : video (titre ; un fichier envoyé porte createdAt), delete (bouton Supprimer au lieu d'Enregistrer),
+ *         index (facultatif, transmis dans video:delete).
+ * Événements du bus : video:delete {video, index?} ; enregistrement via playlistStore.requestSave(video).
+ */
+import { computed, ref } from 'vue';
 import Modal from '@/components/UI/Modal.vue';
 import Button from '@/components/UI/Button.vue';
 import Video from '@/components/UI/Video.vue';
 import Events from '@/utils/Events';
-import Selector from '../UI/Selector.vue';
 import { useUserStore } from '@/stores/userStore';
 import { IORequest } from '@/utils/IORequest';
 import { useGlobalStore } from '@/stores/globalStore';
+import { usePlaylistStore } from '@/stores/playlistStore';
 import ActualChannel from './View/Player/ActualChannel.vue';
 import AddList from '@/assets/Icons/AddList.vue';
 
-const controls = ref(null)
-const thumbnailContainer = ref(null)
-const videoContainer = ref(null)
-const modal = ref(null)
-const saveModal = ref(null)
-const userStore = useUserStore();
-const playlistSelector = ref(null)
-const globalStore = useGlobalStore();
-
-
 const props = defineProps({
     video: {
         type: Object,
@@ -58,213 +86,214 @@ const props = defineProps({
     delete: {
         type: Boolean,
         default: false
+    },
+    index: {
+        type: Number,
+        default: null
     }
 });
 
-let nativeVideo = {}
+const modal = ref(null);
+const userStore = useUserStore();
+const globalStore = useGlobalStore();
+const playlistStore = usePlaylistStore();
 
-function disableAction() {
-    if(!globalStore.currentChannel) return;
-    controls.value.style.display = "none";
-}
+const canPlay = computed(() => !!globalStore.currentChannel);
 
-let touchStartX = 0;
-let touchStartY = 0;
-let isSliding = false;
-let activePointerId = null;
-const SLIDE_THRESHOLD = 10; // ajuster si besoin
+// Fichier envoyé (createdAt) : affiché avec sa date d'ajout et une pochette par défaut (sans modifier la prop)
+const displayVideo = computed(() => {
+    const video = props.video || {};
+    if (!video.createdAt) return video;
+    return {
+        ...video,
+        author: 'Ajouté le ' + new Date(video.createdAt).toLocaleString('fr-FR'),
+        thumbnail: '/default_thumbnail.png'
+    };
+});
+
+// Titre envoyé au player : un fichier est attribué à l'utilisateur qui l'a envoyé
+const playableVideo = computed(() => {
+    const video = props.video || {};
+    if (!video.createdAt) return { ...video };
+    return { ...video, author: userStore.userInfo?.identity?.username || video.author };
+});
 
 function playSong(now) {
-    if(!globalStore.currentChannel) return;
-    IORequest("/SEARCH/PLAY", (data) => {
-        modal.value.close();    
-    }, {song: nativeVideo, now: now})
+    if (!canPlay.value) return;
+    IORequest("/SEARCH/PLAY", () => {
+        modal.value?.close();
+    }, { song: playableVideo.value, now });
 }
 
-onMounted(() => {
-    Object.assign(nativeVideo, props.video);
-    if(props.video.createdAt) {
-       props.video.author = 'Ajoutée le ' + new Date(props.video.createdAt).toLocaleString()
-       props.video.thumbnail = '/default_thumbnail.png';
-       nativeVideo.author = userStore.userInfo.identity.username;
+// Bouton superposé : sans salon vocal, la fenêtre d'actions explique quoi faire
+function onControl(now) {
+    if (!canPlay.value) {
+        modal.value?.open();
+        return;
     }
-    if(!videoContainer.value) return
-    thumbnailContainer.value = videoContainer.value.getThumbnailContainer();
-    videoContainer.value = videoContainer.value.getVideoContainer();
-    thumbnailContainer.value.addEventListener('pointerenter', (ev) => {
-        if(!ev) return;
-        if (ev.pointerType === 'mouse') {
-            controls.value.style.display = "flex";
-        }
-    });
+    playSong(now);
+}
 
-    thumbnailContainer.value.addEventListener('pointerleave', (ev) => {
-        if(!ev) return;
-        if (ev.pointerType === 'mouse') {
-            controls.value.style.display = "none";
-        }
-    });
+function save() {
+    modal.value?.close();
+    playlistStore.requestSave(props.video);
+}
 
- const onPointerMove = (ev) => {
-        if (ev.pointerId !== activePointerId) return;
-        const dx = Math.abs(ev.clientX - touchStartX);
-        const dy = Math.abs(ev.clientY - touchStartY);
-        if (dx > SLIDE_THRESHOLD || dy > SLIDE_THRESHOLD) {
-            isSliding = true;
-        }
-    };
+function remove() {
+    modal.value?.close();
+    const payload = { video: props.video };
+    if (Number.isInteger(props.index)) payload.index = props.index;
+    Events.emit('video:delete', payload);
+}
 
-    const cleanupPointerListeners = () => {
-        try { 
-            if (activePointerId != null) videoContainer.value.releasePointerCapture(activePointerId);
-        } catch (e) { /* ignore */ }
-        if(!videoContainer.value) return
-        try {
-        videoContainer.value.removeEventListener('pointermove', onPointerMove);
-        videoContainer.value.removeEventListener('pointerup', onPointerUp);
-        videoContainer.value.removeEventListener('pointercancel', onPointerCancel);
-        } catch (e) { console.log(videoContainer.value) }
-  
-        activePointerId = null;
-    };
+// === Toucher : un appui sans glissement ouvre la fenêtre d'actions ===
+const SLIDE_THRESHOLD = 10;
+let gesture = null;
 
-    const onPointerUp = (ev) => {
-        if (ev.pointerId !== activePointerId) return;
-        // fin du geste : si ce n'est pas un slide, on ouvre le modal
-        const wasSliding = isSliding;
-        cleanupPointerListeners();
-        isSliding = false;
-        if (!wasSliding) {
-            modal.value.open();
-        }
-    };
-
-    const onPointerCancel = (ev) => {
-        if (ev.pointerId !== activePointerId) return;
-        cleanupPointerListeners();
-        isSliding = false;
-    };
-
-    const onPointerDown = (ev) => {
-        if (!ev) return;
-        if (ev.pointerType !== 'touch') return; // on gère seulement le touch ici
-        touchStartX = ev.clientX;
-        touchStartY = ev.clientY;
-        isSliding = false;
-        activePointerId = ev.pointerId;
-        if(!videoContainer.value) return
-        try {
-            thumbnailContainer.value = videoContainer.value.getThumbnailContainer();
-            videoContainer.value = videoContainer.value.getVideoContainer();
-        } catch (e) { }
-        try { videoContainer.value.setPointerCapture(activePointerId); } catch (e) { /* ignore */ }
-        try {
-             videoContainer.value.addEventListener('pointermove', onPointerMove);
-            videoContainer.value.addEventListener('pointerup', onPointerUp);
-            videoContainer.value.addEventListener('pointercancel', onPointerCancel);
-        } catch (e) { console.log(videoContainer.value) }
-    };
-
-    videoContainer.value.addEventListener('pointerdown', onPointerDown);
-
-    const onResize = () => {
-        if (modal.value) modal.value.close();
-    };
-    window.addEventListener('resize', onResize);
-
-    onBeforeUnmount(() => {
-        // cleanup
-        if(!videoContainer.value) return
-        window.removeEventListener('resize', onResize);
-    });
-});
+function onPointerDown(event) {
+    if (event.pointerType !== 'touch') return;
+    if (event.target instanceof Element && event.target.closest('button')) return;
+    gesture = { id: event.pointerId, x: event.clientX, y: event.clientY, sliding: false };
+}
 
+function onPointerMove(event) {
+    if (!gesture || event.pointerId !== gesture.id) return;
+    if (Math.abs(event.clientX - gesture.x) > SLIDE_THRESHOLD || Math.abs(event.clientY - gesture.y) > SLIDE_THRESHOLD) {
+        gesture.sliding = true;
+    }
+}
 
+function onPointerUp(event) {
+    if (!gesture || event.pointerId !== gesture.id) return;
+    const sliding = gesture.sliding;
+    gesture = null;
+    if (!sliding) modal.value?.open();
+}
 
+function resetGesture() {
+    gesture = null;
+}
 </script>
 <style scoped>
-
-.selectorp {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 3px;
+.vc {
+    min-width: 0;
 }
 
-.info-no {
-    color: var(--text-secondary);
-    font-size: 0.8em;
-    text-align: center;
-}
-
-.save-video {
-    max-width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.controls {
+.vc__controls {
     position: absolute;
-    display: none;
+    inset: 0;
+    display: flex;
     justify-content: center;
     align-items: center;
-    gap: 25px;
-    width: 100%;
-    bottom: 32%;
-    animation: fadeInMap 0.2s ease-in-out;
+    gap: 16px;
+    border-radius: 10px;
+    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15));
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-fast) ease, gap var(--dur) var(--ease);
 }
 
+/* Visibles au survol (souris) et dès qu'un bouton a le focus (clavier) */
+@media (hover: hover) {
+    .vc:hover .vc__controls {
+        opacity: 1;
+        pointer-events: auto;
+        gap: 20px;
+    }
+}
 
-.control-icon {
-    font-size: 1.2em;
+.vc__controls:focus-within {
+    opacity: 1;
+    pointer-events: auto;
+    gap: 20px;
+}
+
+.vc__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
     background-color: var(--text);
     color: var(--text-inverse);
-    border-radius: 100%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.8;
+    font: inherit;
+    font-size: 1.05em;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    outline: 2px solid transparent;
+    transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
 }
 
-.control-icon-disable {
-    font-size: 1.2em;
-    background-color: var(--text-inverse);
-    color: var(--secondary);
-    border-radius: 100%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.8;
+.vc__control :deep(svg) {
+    width: 1em;
+    height: 1em;
 }
 
-
-
-.video:hover .controls {
-    opacity: 1;
+.vc__control:hover {
+    transform: scale(1.08);
 }
 
-.text-secondary {
-    text-align: center;
+.vc__control:active {
+    transform: scale(0.96);
+}
+
+.vc__control:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.vc__control--main {
+    width: 46px;
+    height: 46px;
+    background-color: var(--main);
+    color: var(--main-contrast);
+}
+
+.vc__control--danger:hover {
+    background-color: var(--text-error);
+    color: var(--on-media);
+}
+
+/* Sans salon vocal : grisé, mais toujours focalisable (il ouvre l'explication) */
+.vc__control--off {
+    background-color: var(--tertiary);
     color: var(--text-secondary);
-    font-size: 0.8em;
 }
 
-@keyframes fadeInMap {
-    0% {
-        opacity: 0;
-        gap: 5px;
-    }
-    100% {
-        opacity: 1;
-        gap: 25px;
-    }
+.vc__preview {
+    max-width: 260px;
+    width: 100%;
+    margin: 0 auto;
+    cursor: default;
 }
 
+.vc__notice {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    text-align: center;
+}
 
+.vc__notice p {
+    margin: 0;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
 
+.vc__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
 
-</style>
\ No newline at end of file
+@media (prefers-reduced-motion: reduce) {
+    .vc__control:hover,
+    .vc__control:active {
+        transform: none;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Default.vue b/src/components/Widget/View/Default.vue
index cbf0588..0adfeac 100644
--- a/src/components/Widget/View/Default.vue
+++ b/src/components/Widget/View/Default.vue
@@ -1,70 +1,94 @@
 <template>
- <div class="default">
-    <Changelog/>
-  <p v-show="loading" class="loading">
-    <Icon icon="fa-spinner fa-solid" spin-pulse/> Chargement en cours
-  </p>
- </div>
+    <div class="home" role="region" aria-label="Accueil">
+        <div class="home__grid">
+            <HomeHero class="span-12" @open-changelog="openChangelog()" />
+            <HomeNowPlaying class="span-7" />
+            <HomeQuickActions class="span-5" />
+            <HomeRecent class="span-12" />
+            <HomeStats class="span-6" @availability="statsAvailable = $event" />
+            <HomeTip :class="statsAvailable ? 'span-6' : 'span-12'" />
+        </div>
+        <ChangelogModal ref="changelogModal" />
+    </div>
 </template>
 
 <script setup>
-import Welcome from './Home/Welcome.vue';
-import Carousel from '@/components/UI/Carousel.vue';
-import Changelog from './Home/Changelog.vue';
-import Advice from './Home/Advice.vue';
-import History from './Home/History.vue';
-
+/**
+ * Accueil (vue par défaut du panneau central ; sur mobile, ouvert par l'icône « Accueil » de la recherche).
+ * Grille de 12 colonnes qui passe en une colonne quand la vue est étroite (requêtes de conteneur).
+ */
 import { ref } from 'vue';
-import Events from '@/utils/Events';
-
-const loading = ref(true);
-
-Events.on("CHANGELOG_LOADED", () => {
-    loading.value = false;
-});
-
+import HomeHero from './Home/HomeHero.vue';
+import HomeNowPlaying from './Home/HomeNowPlaying.vue';
+import HomeQuickActions from './Home/HomeQuickActions.vue';
+import HomeRecent from './Home/HomeRecent.vue';
+import HomeStats from './Home/HomeStats.vue';
+import HomeTip from './Home/HomeTip.vue';
+import ChangelogModal from './Home/ChangelogModal.vue';
 
+const changelogModal = ref(null);
+const statsAvailable = ref(true);
 
+function openChangelog() {
+    changelogModal.value?.open();
+}
 </script>
 
 <style scoped>
-.textSecond {
-    font-size: 0.8em;
-    color: var(--text-secondary);
-    opacity: 0.8;
-
-}   
-
-p {
-    margin: 0 0 0.5em 0;
-    font-size: 1.5em;
-    font-weight: 600;
-
+.home {
+    container-type: inline-size;
+    container-name: home;
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
 }
 
-.default  {
-    display: flex;
-    gap: 5px;
-    flex: 1;
+/* Positionnée en absolu : la hauteur de l'accueil ne fait pas grandir la grille de l'interface
+   (même principe que les résultats de recherche) ; c'est .home qui défile */
+.home__grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 14px;
+    align-content: start;
+    padding: 2px 4px 6px 2px;
+}
+
+.span-12 { grid-column: span 12; }
+.span-7 { grid-column: span 7; }
+.span-6 { grid-column: span 6; }
+.span-5 { grid-column: span 5; }
+
+/* Vue centrale étroite (écran moyen, file d'attente affichée) : une colonne */
+@container home (max-width: 760px) {
+    .span-7,
+    .span-6,
+    .span-5 {
+        grid-column: span 12;
+    }
 }
 
 @media screen and (max-width: 768px),
        screen and (max-height: 607px) {
-}
+    .home__grid {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 12px;
+        padding: 0 0 4px 0;
+    }
 
-.child {
-     grid-column: 1 / -1;
-    
-    width: 100%;
+    .span-12,
+    .span-7,
+    .span-6,
+    .span-5 {
+        grid-column: 1 / -1;
+    }
 }
-
-.loading {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;;
-    color: var(--text-secondary);
-}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Widget/View/Home/AccountMobile.vue b/src/components/Widget/View/Home/AccountMobile.vue
index 1a12cf8..eca9bc6 100644
--- a/src/components/Widget/View/Home/AccountMobile.vue
+++ b/src/components/Widget/View/Home/AccountMobile.vue
@@ -1,49 +1,56 @@
 <template>
-    <section>
+    <section ref="root" class="account-mobile" aria-label="Mon compte">
         <User mobile :user="userStore.userInfo" />
-            <div class="user-action">
-                <Button title="Paramètres" icon="fa-solid fa-gear" @click="userSettings.open()">Paramètres</Button>
-                <Button title="Déconnexion" color="red" icon="fa-solid fa-right-from-bracket" @click="signOut(router)">Déconnexion</Button>
-            </div>
+        <div class="user-action">
+            <Button icon="fa-solid fa-gear" @click="openSettings()">Paramètres</Button>
+            <Button variant="danger" icon="fa-solid fa-right-from-bracket" @click="signOut(router)">Déconnexion</Button>
+        </div>
         <UserSettings ref="userSettings"/>
     </section>
 </template>
 <script setup>
-import IconAction from '@/components/UI/IconAction.vue';
-import User from '@/components/UI/User.vue';
-import { signOut } from '@/utils/UserRequest';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { socket } from '@/socket.js';
+import User from '@/components/UI/User.vue';
 import Button from '@/components/UI/Button.vue';
+import UserSettings from '@/components/Widget/User/UserSettings.vue';
+import { signOut } from '@/utils/UserRequest';
+import { socket } from '@/socket.js';
+import { useUserStore } from '@/stores/userStore';
+import { useUserSettingsOpener } from './userSettingsOpener';
 
 if(!socket.connected) {
     socket.connect();
 }
 
-import { useUserStore } from '@/stores/userStore';
-import UserSettings from '@/components/Widget/User/UserSettings.vue';
-import { ref, onMounted } from 'vue';
 const userStore = useUserStore();
 const router = useRouter();
 
+const root = ref(null);
 const userSettings = ref(null);
 
-</script>
-<style scoped>
-.user-action {
-    display: flex;
-    align-items: center;
-    gap: 15px;
+function openSettings(section) {
+    userSettings.value?.open(section);
 }
 
-section {
+// Events.emit('USER_SETTINGS_OPEN', section?) : la modale visible est choisie par userSettingsOpener
+useUserSettingsOpener(() => root.value, openSettings);
+</script>
+<style scoped>
+.account-mobile {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
-    gap: 10px;
+    gap: 16px;
 }
 
-
-</style>
\ No newline at end of file
+.user-action {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+}
+</style>
diff --git a/src/components/Widget/View/Home/Advice.vue b/src/components/Widget/View/Home/Advice.vue
index 18a3339..660b704 100644
--- a/src/components/Widget/View/Home/Advice.vue
+++ b/src/components/Widget/View/Home/Advice.vue
@@ -1,92 +1,100 @@
 <template>
-    <section class="advice">
-        <h2>☀️ Conseils du moment</h2>
-        <div class="advice-list">
-            <AdviceItem v-for="(advice, index) in randomAdvice" :key="index" :text="advice.text" :icon="advice.icon" />
+    <section class="advice" aria-labelledby="advice-title">
+        <header class="advice__header">
+            <span class="advice__chip" aria-hidden="true"><Icon icon="fa-solid fa-lightbulb" /></span>
+            <div>
+                <h2 id="advice-title" class="advice__title">Conseils</h2>
+                <p class="advice__subtitle">{{ TIPS.length }} astuces pour profiter pleinement de Subsonics.</p>
+            </div>
+        </header>
+        <div class="advice__body">
+            <ul class="advice__list">
+                <li v-for="advice in tips" :key="advice.text">
+                    <AdviceItem :text="advice.text" :icon="advice.icon" />
+                </li>
+            </ul>
         </div>
     </section>
 </template>
 <script setup>
-import { onMounted, ref } from 'vue';
 import AdviceItem from '@/components/Widget/View/Home/AdviceItem.vue';
+import { TIPS, shuffled } from './tips';
 
-const adviceList = ref([
-    {
-    text: "Les recherches acceptent aussi les liens YouTube, SoundCloud et Spotify.",
-    icon: "fa-search"
-},
-{
-    text: "Jouez vos propres musiques en cliquant sur le petit nuage à côté de la barre de recherche.",
-    icon: "fa-cloud-upload"
-},
-{
-    text: "Faites attention à ne pas couper la musique de quelqu’un d’autre lorsque vous lancez un titre.",
-    icon: "fa-warning"
-},
-{
-    text: "Synchronisez votre compte YouTube pour récupérer toutes vos playlists, même privées.",
-    icon: "fa-youtube fa-brands"
-},
-{
-    text: "Vous devez être dans un salon vocal pour connecter le bot.",
-    icon: "fa-headset"
-},
-{
-    text: "Ajoutez vos titres préférés à une playlist personnelle pour les retrouver facilement.",
-    icon: "fa-heart"
-},
-{
-    text: "Recherchez un morceau directement en tapant un mot-clé dans la barre de recherche.",
-    icon: "fa-keyboard"
-},
-{
-    text: "Activez le mode 'shuffle' pour varier les plaisirs et découvrir de nouveaux titres.",
-    icon: "fa-shuffle"
-},
-{
-    text: "Un bug, un souci ou une idée ? Rendez-vous dans les paramètres pour envoyer un rapport.",
-    icon: "fa-bug"
-},
-{
-    text: "Votre playlist déchire ? Partagez-la avec vos amis !",
-    icon: "fa-share"
-}
-
-
-
-]);
-
-// Get 3 random advice
-const randomAdvice = ref([]);
-
-const getRandomAdvice = () => {
-    const shuffled = adviceList.value.sort(() => 0.5 - Math.random());
-    randomAdvice.value = shuffled.slice(0, 5);
-};
-
-onMounted(() => {
-    getRandomAdvice();
-});
-
-
+// Ordre mélangé à chaque ouverture, sans modifier la liste source
+const tips = shuffled(TIPS);
 </script>
 <style scoped>
-
 .advice {
     display: flex;
     flex-direction: column;
+    gap: 16px;
     flex: 1;
-    
+    min-width: 0;
+    min-height: 0;
 }
-.advice-list {
-    display: flex;
+
+/* Liste en position absolue : sa hauteur ne fait pas grandir la grille de l'interface */
+.advice__body {
+    position: relative;
     flex: 1;
-    flex-direction: column;
+    min-height: 0;
+}
+
+/* Place pour le bouton de fermeture de la vue (en haut à droite) */
+.advice__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 4px 44px 0 4px;
+}
+
+.advice__chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1.1em;
+}
+
+.advice__title {
+    margin: 0;
+    font-size: 1.4em;
+    font-weight: 700;
+}
+
+.advice__subtitle {
+    margin: 2px 0 0 0;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
+
+.advice__list {
+    position: absolute;
+    inset: 0;
     overflow-y: auto;
-    justify-content: space-around;
+    align-content: start;
+    list-style: none;
+    margin: 0;
+    padding: 0 4px 4px 4px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 10px;
 }
-h2 {
-    font-size: 1.7em;
+
+.advice__list li {
+    display: flex;
+    min-width: 0;
 }
-</style>
\ No newline at end of file
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .advice__list {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/AdviceItem.vue b/src/components/Widget/View/Home/AdviceItem.vue
index 8302362..e1016eb 100644
--- a/src/components/Widget/View/Home/AdviceItem.vue
+++ b/src/components/Widget/View/Home/AdviceItem.vue
@@ -1,52 +1,68 @@
 <template>
     <div class="advice-item">
-        <Icon class="advice-icon" :icon="`fa-solid ${props.icon}`"/>
-        <p>{{ props.text }}</p>
+        <span class="advice-icon" aria-hidden="true"><Icon :icon="iconName" /></span>
+        <p>{{ text }}</p>
     </div>
 </template>
 <script setup>
+import { computed } from 'vue';
 
 const props = defineProps({
-    text: String,
-    icon: String
+    text: {
+        type: String,
+        required: true
+    },
+    // Chaîne FontAwesome complète ("fa-solid fa-bug", "fa-brands fa-youtube") ; un suffixe seul vaut fa-solid
+    icon: {
+        type: String,
+        default: 'fa-solid fa-lightbulb'
+    }
 });
+
+const iconName = computed(() => (/\bfa-(solid|regular|brands)\b/.test(props.icon) ? props.icon : `fa-solid ${props.icon}`));
 </script>
 <style scoped>
 .advice-item {
     display: flex;
     align-items: center;
+    gap: 14px;
+    width: 100%;
+    padding: 14px;
+    box-sizing: border-box;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
     background-color: var(--tertiary);
-    border-radius: 10px;
-    padding: 12px;
-    font-size: 1.1em;
-    gap: 10px;
+}
+
+.advice-item p {
+    margin: 0;
+    font-size: 0.92em;
+    line-height: 1.5;
 }
 
 .advice-icon {
-    background-color: var(--quaternary);
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 20px;
-    border-radius: 100%;
-    font-size: 1.5em;
-    width: 30px;
-    height: 30px;
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1.15em;
 }
 
 @media screen and (max-width: 768px),
        screen and (max-height: 607px) {
     .advice-item {
-        font-size: 0.8em;
+        padding: 12px;
     }
 
     .advice-icon {
-        width: 20px;
-        height: 20px;
-        padding: 20px;
-        font-size: 1.2em;
+        width: 38px;
+        height: 38px;
+        font-size: 1em;
     }
-    
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Widget/View/Home/Changelog.vue b/src/components/Widget/View/Home/Changelog.vue
deleted file mode 100644
index 145b2fa..0000000
--- a/src/components/Widget/View/Home/Changelog.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-    <section class="changelog">
-    <Welcome/>
-    <h2 class="changelog-title">📝 Changelog</h2>
-    <div v-if="changelog" class="changelog-overflow">
-        <div class="changelog-container" v-html="changelog" ></div>
-    </div>
-    <div class="textSecond" v-else-if="!error"><Icon icon="fa-spinner fa-solid" spin-pulse/> Chargement en cours</div>
-    <Error v-if="error">{{ error }}</Error>
-  </section>
-</template>
-<script setup>
-import { ref, onMounted, shallowRef } from 'vue';
-import { IORequest } from '@/utils/IORequest';
-import Events from '@/utils/Events';
-import Error from '@/components/UI/Error.vue';
-import Welcome from './Welcome.vue';
-const changelog = shallowRef(null);
-const error = ref(null);
-
-onMounted(() => {
-    loadChangelog();
-});
-
-function loadChangelog() {
-    Events.emit("CHANGELOG_LOADING");
-    IORequest("/CHANGELOG", (data) => {
-        if(data) {
-            data = data.replaceAll("[FRONTEND]", "<span class='tags frontend-tag'>Client</span>");
-            data = data.replaceAll("[BACKEND]", "<span class='tags backend-tag'>Serveur</span>");
-            data = data.replaceAll("[DISCORD]", "<span class='tags discord-tag'>Discord</span>");
-            data = data.replaceAll("[PLAYER]", "<span class='tags player-tag'>Player</span>");
-            data = data.replaceAll("[AUTRE]", "<span class='tags other-tag'>Autre</span>");
-            data = data.replaceAll("[FIX]", "<span class='tags bug-tag'>Fix</span>");
-            data = data.replaceAll("[AJOUT]", "<span class='tags add-tag'>Ajout</span>");
-            data = data.replaceAll("/*", "<span class='changelog-rounded'>");
-            data = data.replaceAll("*/", "</span>");
-            data = data.replaceAll("*-", "<span class='changelog-date-rounded'>");
-            data = data.replaceAll("-*", "</span>");
-            data = data.replaceAll("*_", "<span class='underline'>");
-            data = data.replaceAll("_*", "</span>");
-            data = data.replaceAll('/#', "<span class='changelog-tags'>");
-            data = data.replaceAll('#/', "</span>");
-
-            changelog.value = data;
-        } else {
-            error.value = "Aucun changelog trouvé";
-        }
-         Events.emit("CHANGELOG_LOADED");
-    });
-}
-</script>
-<style> 
-
-.changelog-title {
-    font-size: 1.7em;
-    font-weight: bold;
-}
-
-.changelog-version {
-    background-color: var(--tertiary);
-    padding: 10px;
-    border-radius: 10px;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-    word-break: break-word;
-    overflow-wrap: anywhere;
-}
-
-.changelog-version h2 {
-    margin: 0 0 10px 0;
-}
-
-/* .changelog-version h2::before {
-    content: '🕐 ';
-} */
-
-
-.changelog-version ul {
-    border-radius: 10px;
-    color: var(--text-secondary);
-    max-width: 100%;
-    font-size: 0.8em;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    padding-left: 20px;
-}
-
-.changelog-version ul li {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.changelog-version ul li::before {
-    content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 100%;
-    background-color: var(--text-secondary);
-    font-size: 0.8em;
-}
-
-.changelog-container {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    overflow-y: auto;
-    position: absolute;
-    flex: 1;
-    width: 100%;
-}
-
-.changelog {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-}
-
-.changelog-overflow {
-    overflow-y: auto;
-    position: relative;
-    max-height: 100%;
-    flex: 1;
-  
-}
-
-.tags {
-    border-radius: 15px;
-    padding: 2px 6px;
-    color: var(--text);
-    white-space: nowrap; /* Prevent line breaks */
-    background-color: var(--secondary);
-}
-
-/* Make a circle before */
-.tags::before {
-    content: '#';
-    display: inline-block;
-    font-size: 15px;
-    border-radius: 50%;
-    margin-right: 4px;
-}
-
-.backend-tag {
-    border: 1px solid rgb(255, 0, 221);
-}
-/* Make a circle before */
-.backend-tag::before {
-    color: rgb(255, 0, 221);
-}
-
-.frontend-tag {
-    border: 1px solid rgb(29, 191, 255);
-}
-
-.frontend-tag::before {
-    color: rgb(29, 191, 255);
-}
-
-.other-tag {
-    border: 1px solid rgb(255, 29, 116);
-}
-
-.other-tag::before {
-    color: rgb(255, 29, 116);
-}
-
-.discord-tag {
-    border: 1px solid rgb(88, 101, 242);
-}
-
-.discord-tag::before {
-     color: rgb(88, 101, 242);
-}
-
-.player-tag {
-    border: 1px solid var(--text-warning);
-}
-.player-tag::before {
-    color: var(--text-warning);
-}
-
-.bug-tag {
-    border: 1px solid var(--text-error);
-}
-.bug-tag::before {
-    color: var(--text-error);
-}
-
-.add-tag {
-    border: 1px solid var(--text-success);
-}
-.add-tag::before {
-    color: var(--text-success);
-}
-
-/* .changelog-date::before {
-    content: '📆 ';
-} */
-
-.underline {
-    text-decoration: underline;
-}
-
-.changelog-actual h2 {
-    font-size: 1.4em;
-}
-
-/* .changelog-actual h2::before {
-    content: '✨ ';
-} */
-
-.changelog-date-rounded {
-    border-radius: 5px;
-    background-color: var(--secondary);
-    font-family: "Courier", sans-serif;
-    text-decoration: none;
-    padding: 2px 7px;
-}
-
-.changelog-rounded {
-    border-radius: 10px;
-    background-color: var(--secondary);
-    padding: 2px 7px;
-    border-radius: 15px;
-    border: 1px solid var(--text-secondary);
-    white-space: nowrap; /* Prevent line breaks */
-}
-
-.changelog-overflow {
-  position: relative;
-}
-
-
-    .changelog-container ul {
-     
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    .changelog-tags {
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-    background-color: var(--quaternary);
-    padding: 5px;
-    border-radius: 10px;
-   }
-
-@media screen and (max-width: 768px),
-       screen and (max-height: 607px) {
-    
-        .changelog-container ul {
-             padding: 0;
-        }
-
-
-
-    .changelog-version ul li::before {
-        display: none;
-    }
-    
-    .welcome-container {
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-        width: 100%;
-    }
-
-    .welcome-actions {
-        flex-direction: column;
-        width: 100%;
-    }
-
-    .changelog-tags {
-         flex-direction: column;
-    }
-
- 
-}
-
-</style>
diff --git a/src/components/Widget/View/Home/ChangelogModal.vue b/src/components/Widget/View/Home/ChangelogModal.vue
new file mode 100644
index 0000000..f9f7e2f
--- /dev/null
+++ b/src/components/Widget/View/Home/ChangelogModal.vue
@@ -0,0 +1,643 @@
+<template>
+    <Modal ref="modal" title="Nouveautés" icon="fa-solid fa-wand-magic-sparkles" size="lg" @open="onOpen">
+        <div v-if="status === 'loading' && !hasEntries" class="cl-state">
+            <Spinner size="lg" label="Chargement des nouveautés…" visible-label />
+        </div>
+
+        <EmptyState
+            v-else-if="status === 'error' && !hasEntries"
+            icon="fa-solid fa-triangle-exclamation"
+            title="Impossible de charger les nouveautés"
+        >
+            <p>Le serveur n'a pas répondu à temps.</p>
+            <template #actions>
+                <Button variant="secondary" icon="fa-solid fa-rotate-right" @click="load(true)">Réessayer</Button>
+            </template>
+        </EmptyState>
+
+        <EmptyState v-else-if="!hasEntries" icon="fa-solid fa-scroll" title="Aucune note de version">
+            <p>Les nouveautés de Subsonics apparaîtront ici.</p>
+        </EmptyState>
+
+        <div v-else class="cl">
+            <!-- Dernière version -->
+            <div v-if="latest" class="cl-latest">
+                <span class="cl-latest__pill">v{{ latest.version }}</span>
+                <div class="cl-latest__text">
+                    <p class="cl-latest__title">{{ latest.title || 'Subsonics' }}, dernière version</p>
+                    <p class="cl-latest__meta">
+                        <span v-if="latest.date">Publiée le <time :datetime="latest.date.iso">{{ latest.date.label }}</time></span>
+                        <span v-if="latest.date" aria-hidden="true">·</span>
+                        <span>{{ latest.items.length }} {{ latest.items.length > 1 ? 'changements' : 'changement' }}</span>
+                        <template v-if="installedVersion">
+                            <span aria-hidden="true">·</span>
+                            <span>Version installée : <strong class="u-mono">{{ installedVersion }}</strong></span>
+                        </template>
+                    </p>
+                </div>
+            </div>
+
+            <!-- Filtres -->
+            <div class="cl-filters" role="group" aria-label="Filtrer les changements par étiquette">
+                <button
+                    v-for="tag in availableTags"
+                    :key="tag.key"
+                    type="button"
+                    :class="['cl-filter', `cl-tone--${tag.tone}`]"
+                    :aria-pressed="activeFilters.includes(tag.key) ? 'true' : 'false'"
+                    @click="toggleFilter(tag.key)"
+                >
+                    <Icon :icon="tag.icon" class="cl-filter__icon" aria-hidden="true" />
+                    <span>{{ tag.label }}</span>
+                    <span class="cl-filter__count" aria-hidden="true">{{ tag.count }}</span>
+                    <span class="sr-only">({{ tag.count }})</span>
+                </button>
+                <button v-if="activeFilters.length" type="button" class="cl-reset" @click="activeFilters = []">
+                    <Icon icon="fa-solid fa-xmark" aria-hidden="true" /> Effacer les filtres
+                </button>
+            </div>
+            <p class="sr-only" role="status" aria-live="polite">{{ filterSummary }}</p>
+
+            <!-- Frise des versions -->
+            <ol v-if="visibleEntries.length" class="cl-timeline">
+                <li
+                    v-for="entry in visibleEntries"
+                    :key="entry.version"
+                    :class="['cl-entry', { 'cl-entry--current': entry.version === latest?.version }]"
+                >
+                    <span class="cl-entry__dot" aria-hidden="true"></span>
+                    <section class="cl-entry__card" :aria-labelledby="headingId(entry)">
+                        <h3 :id="headingId(entry)" class="cl-entry__heading">
+                            <button
+                                type="button"
+                                class="cl-entry__toggle"
+                                :aria-expanded="isExpanded(entry) ? 'true' : 'false'"
+                                :aria-controls="listId(entry)"
+                                @click="toggleEntry(entry)"
+                            >
+                                <span class="cl-entry__version">Version {{ entry.version }}</span>
+                                <span v-if="entry.version === latest?.version" class="cl-entry__current"><Icon icon="fa-solid fa-star" aria-hidden="true" /> Actuelle</span>
+                                <span v-if="entry.version === unseenVersion" class="cl-entry__new">Nouveau</span>
+                                <span class="cl-entry__spacer"></span>
+                                <span class="cl-entry__count">{{ entry.visibleItems.length }} {{ entry.visibleItems.length > 1 ? 'changements' : 'changement' }}</span>
+                                <Icon class="cl-entry__chevron" icon="fa-solid fa-chevron-down" aria-hidden="true" />
+                            </button>
+                        </h3>
+                        <p v-if="entry.date || entry.title" class="cl-entry__meta">
+                            <span v-if="entry.title">{{ entry.title }}</span>
+                            <span v-if="entry.title && entry.date" aria-hidden="true">·</span>
+                            <time v-if="entry.date" :datetime="entry.date.iso">{{ entry.date.label }}</time>
+                        </p>
+                        <ul v-show="isExpanded(entry)" :id="listId(entry)" class="cl-items">
+                            <li v-for="(item, index) in entry.visibleItems" :key="index" class="cl-item">
+                                <span v-if="item.tags.length" class="cl-item__tags">
+                                    <span
+                                        v-for="tagKey in item.tags"
+                                        :key="tagKey"
+                                        :class="['cl-chip', `cl-tone--${tagInfo(tagKey).tone}`]"
+                                    >{{ tagInfo(tagKey).label }}</span>
+                                </span>
+                                <span class="cl-item__text">{{ item.text }}</span>
+                            </li>
+                        </ul>
+                    </section>
+                </li>
+            </ol>
+
+            <EmptyState v-else icon="fa-solid fa-filter-circle-xmark" title="Aucun changement ne correspond" compact>
+                <p>Essaie une autre combinaison d'étiquettes.</p>
+                <template #actions>
+                    <Button variant="secondary" size="sm" @click="activeFilters = []">Effacer les filtres</Button>
+                </template>
+            </EmptyState>
+        </div>
+
+        <template #footer>
+            <Button variant="secondary" @click="close()">Fermer</Button>
+        </template>
+    </Modal>
+</template>
+<script setup>
+/**
+ * Fenêtre « Nouveautés » : frise des versions de CHANGELOG.html (analysé par DOMParser, rendu sans v-html),
+ * filtres par étiquette, versions anciennes repliées. Marque la dernière version comme vue à l'ouverture.
+ */
+import { computed, ref, useId, watch } from 'vue';
+import Modal from '@/components/UI/Modal.vue';
+import Button from '@/components/UI/Button.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import { IORequestAsync } from '@/utils/IORequest';
+import { CHANGELOG_FILTER_ORDER, CHANGELOG_TAGS, useChangelog } from './changelog';
+
+// Les deux versions les plus récentes sont dépliées par défaut
+const OPEN_BY_DEFAULT = 2;
+
+const modal = ref(null);
+const uid = useId();
+const { entries, status, latest, seenVersion, load, markSeen } = useChangelog();
+
+const installedVersion = ref(null);
+const activeFilters = ref([]);
+const expanded = ref(new Set());
+// Version « nouvelle » au moment de l'ouverture (avant markSeen), pour la pastille dans la frise
+const unseenVersion = ref(null);
+
+const hasEntries = computed(() => Array.isArray(entries.value) && entries.value.length > 0);
+
+function tagInfo(key) {
+    return CHANGELOG_TAGS[key] || { label: key.charAt(0) + key.slice(1).toLowerCase(), group: 'area', tone: 'other', icon: 'fa-solid fa-tag' };
+}
+
+const availableTags = computed(() => {
+    const counts = new Map();
+    for (const entry of entries.value || []) {
+        for (const item of entry.items) {
+            for (const tag of item.tags) counts.set(tag, (counts.get(tag) || 0) + 1);
+        }
+    }
+    const known = CHANGELOG_FILTER_ORDER.filter((key) => counts.has(key));
+    const others = [...counts.keys()].filter((key) => !CHANGELOG_FILTER_ORDER.includes(key)).sort();
+    return [...known, ...others].map((key) => ({ key, count: counts.get(key), ...tagInfo(key) }));
+});
+
+// OU à l'intérieur d'un groupe (Ajout / Fix), ET entre les groupes (type × partie concernée)
+function matches(item) {
+    if (activeFilters.value.length === 0) return true;
+    const byGroup = new Map();
+    for (const key of activeFilters.value) {
+        const group = tagInfo(key).group;
+        if (!byGroup.has(group)) byGroup.set(group, []);
+        byGroup.get(group).push(key);
+    }
+    for (const keys of byGroup.values()) {
+        if (!keys.some((key) => item.tags.includes(key))) return false;
+    }
+    return true;
+}
+
+const visibleEntries = computed(() => (entries.value || [])
+    .map((entry) => ({ ...entry, visibleItems: entry.items.filter(matches) }))
+    .filter((entry) => activeFilters.value.length === 0 || entry.visibleItems.length > 0));
+
+const filterSummary = computed(() => {
+    if (activeFilters.value.length === 0) return '';
+    const total = visibleEntries.value.reduce((sum, entry) => sum + entry.visibleItems.length, 0);
+    if (total === 0) return 'Aucun changement ne correspond aux filtres.';
+    return `${total} ${total > 1 ? 'changements affichés' : 'changement affiché'} dans ${visibleEntries.value.length} ${visibleEntries.value.length > 1 ? 'versions' : 'version'}.`;
+});
+
+function toggleFilter(key) {
+    activeFilters.value = activeFilters.value.includes(key)
+        ? activeFilters.value.filter((item) => item !== key)
+        : [...activeFilters.value, key];
+}
+
+// Un filtre actif déplie toutes les versions concernées (les résultats ne restent pas cachés)
+watch(() => activeFilters.value.length, (count, previous) => {
+    if (count > 0 && previous === 0) {
+        expanded.value = new Set((entries.value || []).map((entry) => entry.version));
+    }
+});
+
+function resetExpanded() {
+    expanded.value = new Set((entries.value || []).slice(0, OPEN_BY_DEFAULT).map((entry) => entry.version));
+}
+
+watch(entries, resetExpanded, { immediate: true });
+
+function isExpanded(entry) {
+    return expanded.value.has(entry.version);
+}
+
+function toggleEntry(entry) {
+    const next = new Set(expanded.value);
+    if (next.has(entry.version)) next.delete(entry.version);
+    else next.add(entry.version);
+    expanded.value = next;
+}
+
+function slug(version) {
+    return String(version).replace(/[^a-zA-Z0-9_-]/g, '-');
+}
+
+function headingId(entry) {
+    return `cl-${uid}-h-${slug(entry.version)}`;
+}
+
+function listId(entry) {
+    return `cl-${uid}-l-${slug(entry.version)}`;
+}
+
+let versionRequested = false;
+
+async function onOpen() {
+    activeFilters.value = [];
+    resetExpanded();
+    if (!versionRequested) {
+        versionRequested = true;
+        IORequestAsync('/VERSION', undefined, 8000).then((value) => {
+            if (typeof value === 'string' && value.trim()) installedVersion.value = value.trim();
+            else versionRequested = false;
+        });
+    }
+    if (status.value === 'error' || status.value === 'idle') await load(true);
+    else await load();
+    const version = latest.value?.version ?? null;
+    unseenVersion.value = version && seenVersion.value !== version ? version : null;
+    markSeen();
+}
+
+function open() {
+    modal.value?.open();
+}
+
+function close() {
+    modal.value?.close();
+}
+
+defineExpose({ open, close });
+</script>
+<style scoped>
+.cl-state {
+    display: flex;
+    justify-content: center;
+    padding: 40px 0;
+}
+
+.cl {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+/* Dernière version */
+.cl-latest {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 14px 16px;
+    border-radius: var(--radius);
+    border: 1px solid color-mix(in srgb, var(--main) 35%, transparent);
+    background:
+        radial-gradient(100% 140% at 100% 0%, color-mix(in srgb, var(--main) 22%, transparent), transparent 60%),
+        var(--tertiary);
+}
+
+.cl-latest__pill {
+    flex-shrink: 0;
+    padding: 8px 14px;
+    border-radius: var(--radius-pill);
+    background: linear-gradient(120deg, var(--main-active), var(--main));
+    color: var(--main-contrast);
+    font-weight: 700;
+    font-size: 1.15em;
+    font-variant-numeric: tabular-nums;
+    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--main) 70%, transparent);
+}
+
+.cl-latest__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.cl-latest__text p {
+    margin: 0;
+}
+
+.cl-latest__title {
+    font-weight: 600;
+}
+
+.cl-latest__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px 8px;
+    font-size: 0.82em;
+    color: var(--text-secondary);
+}
+
+.cl-latest__meta strong {
+    color: var(--text);
+    font-weight: 600;
+}
+
+/* Couleurs des étiquettes */
+.cl-tone--success { --tag-tone: var(--text-success); }
+.cl-tone--error { --tag-tone: var(--text-error); }
+.cl-tone--warning { --tag-tone: var(--text-warning); }
+.cl-tone--client { --tag-tone: #1DBFFF; }
+.cl-tone--server { --tag-tone: #FF00DD; }
+.cl-tone--discord { --tag-tone: #5865F2; }
+.cl-tone--other { --tag-tone: var(--text-secondary); }
+
+/* Filtres */
+.cl-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+.cl-filter {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 32px;
+    padding: 0 10px;
+    border: 1px solid color-mix(in srgb, var(--tag-tone) 45%, transparent);
+    border-radius: var(--radius-pill);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.82em;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
+}
+
+.cl-filter:hover {
+    background-color: color-mix(in srgb, var(--tag-tone) 12%, transparent);
+}
+
+.cl-filter[aria-pressed='true'] {
+    border-color: var(--tag-tone);
+    background-color: color-mix(in srgb, var(--tag-tone) 22%, transparent);
+    font-weight: 600;
+}
+
+.cl-filter__icon {
+    color: var(--tag-tone);
+}
+
+.cl-filter__count {
+    min-width: 18px;
+    padding: 1px 6px;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+    font-size: 0.85em;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+}
+
+.cl-reset {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 32px;
+    padding: 0 10px;
+    border: none;
+    border-radius: var(--radius-pill);
+    background: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    font-size: 0.82em;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+.cl-reset:hover {
+    color: var(--text);
+}
+
+/* Frise */
+.cl-timeline {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.cl-entry {
+    position: relative;
+    padding-left: 28px;
+}
+
+/* Rail vertical reliant les versions */
+.cl-entry::before {
+    content: '';
+    position: absolute;
+    left: 7px;
+    top: 0;
+    bottom: -12px;
+    width: 2px;
+    background-color: var(--quaternary);
+    opacity: 0.6;
+}
+
+.cl-entry:first-child::before {
+    top: 18px;
+}
+
+.cl-entry:last-child::before {
+    bottom: calc(100% - 18px);
+}
+
+.cl-entry__dot {
+    position: absolute;
+    left: 2px;
+    top: 13px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--secondary);
+    border: 2px solid var(--quaternary);
+    box-sizing: border-box;
+}
+
+.cl-entry--current .cl-entry__dot {
+    left: 0;
+    top: 11px;
+    width: 16px;
+    height: 16px;
+    border: none;
+    background-color: var(--main);
+    box-shadow: 0 0 0 4px var(--main-soft);
+}
+
+.cl-entry__card {
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--tertiary);
+    overflow: hidden;
+}
+
+.cl-entry--current .cl-entry__card {
+    border-color: color-mix(in srgb, var(--main) 45%, transparent);
+}
+
+.cl-entry__heading {
+    margin: 0;
+    font-size: 1em;
+}
+
+.cl-entry__toggle {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+    padding: 10px 14px;
+    border: none;
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color var(--dur-fast) ease;
+}
+
+.cl-entry__toggle:hover {
+    background-color: color-mix(in srgb, var(--text) 5%, transparent);
+}
+
+.cl-entry__toggle:focus-visible {
+    outline: 2px solid var(--main);
+    outline-offset: -2px;
+}
+
+.cl-entry__version {
+    font-weight: 700;
+    font-size: 1.02em;
+}
+
+.cl-entry__current {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 8px;
+    border: 1px solid color-mix(in srgb, var(--main) 60%, transparent);
+    border-radius: var(--radius-pill);
+    background-color: var(--main-soft);
+    font-size: 0.72em;
+    font-weight: 600;
+}
+
+.cl-entry__current svg {
+    color: var(--main);
+}
+
+.cl-entry__new {
+    padding: 2px 8px;
+    border-radius: var(--radius-pill);
+    background-color: var(--main);
+    color: var(--main-contrast);
+    font-size: 0.7em;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.cl-entry__spacer {
+    flex: 1;
+}
+
+.cl-entry__count {
+    font-size: 0.78em;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.cl-entry__chevron {
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    transition: transform var(--dur) var(--ease);
+}
+
+.cl-entry__toggle[aria-expanded='true'] .cl-entry__chevron {
+    transform: rotate(180deg);
+}
+
+.cl-entry__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px 8px;
+    margin: -4px 0 0 0;
+    padding: 0 14px 10px 14px;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+.cl-items {
+    list-style: none;
+    margin: 0;
+    padding: 4px 14px 12px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border-top: 1px solid var(--border);
+    padding-top: 12px;
+}
+
+.cl-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    font-size: 0.88em;
+    line-height: 1.45;
+}
+
+.cl-item__tags {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    flex-shrink: 0;
+    width: 132px;
+    padding-top: 1px;
+}
+
+.cl-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 1px 7px;
+    border: 1px solid color-mix(in srgb, var(--tag-tone) 55%, transparent);
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--tag-tone) 15%, transparent);
+    font-size: 0.78em;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.cl-chip::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--tag-tone);
+}
+
+.cl-item__text {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .cl-latest {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .cl-entry {
+        padding-left: 22px;
+    }
+
+    .cl-item {
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .cl-item__tags {
+        width: auto;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/History.vue b/src/components/Widget/View/Home/History.vue
index 9cbd82b..3db6947 100644
--- a/src/components/Widget/View/Home/History.vue
+++ b/src/components/Widget/View/Home/History.vue
@@ -1,120 +1,127 @@
 <template>
-    <div class="history-container">
-    <h2>🔄️ Historique personnel</h2>
-    <p class="info">Voici les derniers titres que tu as écoutés (tout serveur confondu) !</p>
-    <div v-if="history && history.length" class="history-list">
-        <VideoComposable v-for="(video, index) in reversedHistory" :key="index" :video="video" />
-    </div>
-    <p v-else-if="loading" class="none"><Icon icon="fa-spinner" spin-pulse /> Chargement en cours</p>
-    <p v-else class="none">
-        <span><Icon icon="fa-volume-xmark" /> Aucune chanson écoutée récemment.</span>
-        <span class="sub-info">Dès que tu écoutes une chanson, elle apparaîtra ici.</span>
-    </p>
-    </div>
+    <section class="history" aria-labelledby="history-title" :aria-busy="loading ? 'true' : undefined">
+        <header class="history__header">
+            <span class="history__chip" aria-hidden="true"><Icon icon="fa-solid fa-clock-rotate-left" /></span>
+            <div>
+                <h2 id="history-title" class="history__title">Historique personnel</h2>
+                <p class="history__subtitle">Les derniers titres que tu as écoutés, tous serveurs confondus.</p>
+            </div>
+        </header>
+
+        <div v-if="recent.length" class="history__body">
+            <ul class="history__list" aria-label="Titres écoutés, du plus récent au plus ancien">
+                <li v-for="(video, index) in recent" :key="`${index}-${video.id ?? video.url}`">
+                    <VideoComposable :video="video" />
+                </li>
+            </ul>
+        </div>
+        <div v-else-if="loading" class="history__state">
+            <Spinner size="lg" label="Chargement de l'historique…" visible-label />
+        </div>
+        <EmptyState v-else-if="failed" icon="fa-solid fa-plug-circle-exclamation" title="Historique indisponible">
+            <p>Le serveur n'a pas répondu.</p>
+            <template #actions>
+                <Button variant="secondary" icon="fa-solid fa-rotate-right" @click="refresh()">Réessayer</Button>
+            </template>
+        </EmptyState>
+        <EmptyState v-else icon="fa-solid fa-headphones-simple" title="Aucune chanson écoutée récemment">
+            <p>Dès que tu écoutes une chanson, elle apparaîtra ici.</p>
+        </EmptyState>
+    </section>
 </template>
 <script setup>
-import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
-import { IORequestAsync } from '@/utils/IORequest';
 import VideoComposable from '@/components/Widget/VideoComposable.vue';
-import { usePlayerStore } from '@/stores/playerStore';
-
-const playerStore = usePlayerStore();
-
-const history = ref([]);
-const loading = ref(true);
-let mounted = false;
-let requestInFlight = false;
-let requestAgain = false;
-
-// Du plus récent au plus ancien (copie : ne jamais inverser le tableau source pendant le rendu)
-const reversedHistory = computed(() => Array.isArray(history.value) ? [...history.value].reverse() : []);
-
-// Une seule requête en vol ; une relance si un nouveau changement survient entre-temps
-async function refreshHistory() {
-    if (requestInFlight) {
-        requestAgain = true;
-        return;
-    }
-    requestInFlight = true;
-    loading.value = true;
-    const data = await IORequestAsync('/USER/HISTORY', undefined, 10000);
-    requestInFlight = false;
-    if (!mounted) return;
-    loading.value = false;
-    if (data !== null) history.value = Array.isArray(data) ? data : [];
-    if (requestAgain) {
-        requestAgain = false;
-        refreshHistory();
-    }
-}
-
-onMounted(() => {
-    mounted = true;
-    refreshHistory();
-})
-
-onUnmounted(() => {
-    mounted = false;
-})
-
-// Ne recharger l'historique que lorsque le morceau courant change (pas à chaque mise à jour du player).
-// undefined = aucun état reçu : le premier état ne déclenche rien (déjà chargé au montage).
-watch(() => playerStore.hasState ? (playerStore.current?.id ?? null) : undefined, (newId, oldId) => {
-    if (oldId === undefined || newId === undefined) return;
-    refreshHistory();
-})
+import Spinner from '@/components/UI/Spinner.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import Button from '@/components/UI/Button.vue';
+import { useHistory } from './useHistory';
 
+const { recent, loading, failed, refresh } = useHistory();
 </script>
 <style scoped>
-    .history-container {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        gap: 8px;
-    }
+.history {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+}
 
-    h2 {    
-        font-size: 1.7em;
-        margin: 0;
-    }
+/* Place pour le bouton de fermeture de la vue (en haut à droite) */
+.history__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 4px 44px 0 4px;
+}
 
-    .none {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        color: var(--text-secondary);
-        font-size: 1.5em;
-        gap: 10px;
-        flex: 1;
-    }
+.history__chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1.1em;
+}
 
-    .none span {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-    }
+.history__title {
+    margin: 0;
+    font-size: 1.4em;
+    font-weight: 700;
+}
 
-    .sub-info {
-        font-size: 0.7em;
-        margin: 0;
-        color: var(--text-secondary);
-   
-    }
+.history__subtitle {
+    margin: 2px 0 0 0;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
 
-    .info {
-        font-size: 0.9em;
-        color: var(--text-secondary);
-    }
-    
-    .history-list {
-        flex: 1;
-        overflow-y: auto;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 10px;
-    }
+/* Liste en position absolue : sa hauteur ne fait pas grandir la grille de l'interface */
+.history__body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+}
 
-</style>
\ No newline at end of file
+.history__list {
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+    margin: 0;
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    align-content: start;
+    gap: 12px;
+    padding: 0 4px 4px 4px;
+}
+
+.history__list li {
+    display: flex;
+    min-width: 0;
+}
+
+.history__list li > * {
+    flex: 1;
+    min-width: 0;
+}
+
+.history__state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .history__list {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/HomeHero.vue b/src/components/Widget/View/Home/HomeHero.vue
new file mode 100644
index 0000000..287c06b
--- /dev/null
+++ b/src/components/Widget/View/Home/HomeHero.vue
@@ -0,0 +1,517 @@
+<template>
+    <section class="hero" aria-labelledby="home-hero-title">
+        <img
+            v-if="bannerUrl && !bannerFailed"
+            class="hero__banner"
+            :src="bannerUrl"
+            alt=""
+            decoding="async"
+            @error="bannerFailed = true"
+        />
+        <div class="hero__scrim" :class="{ 'hero__scrim--banner': bannerUrl && !bannerFailed }" aria-hidden="true"></div>
+        <div class="hero__decor" aria-hidden="true">
+            <span v-for="bar in 7" :key="bar" class="hero__bar"></span>
+        </div>
+
+        <div class="hero__content">
+            <div class="hero__identity">
+                <img
+                    class="hero__avatar"
+                    :src="avatarSrc"
+                    alt=""
+                    width="72"
+                    height="72"
+                    decoding="async"
+                    @error="avatarFailed = true"
+                />
+                <div class="hero__text">
+                    <p class="hero__date">{{ todayLabel }}</p>
+                    <h2 id="home-hero-title" class="hero__title">{{ greeting }}, <span class="hero__name">{{ displayName }}</span></h2>
+                    <Motivation class="hero__motto" />
+                </div>
+            </div>
+
+            <div class="hero__side">
+                <div v-if="server" class="hero__guild">
+                    <img class="hero__guild-icon" :src="guildIcon" alt="" width="40" height="40" @error="guildIconFailed = true" />
+                    <div class="hero__guild-text">
+                        <p class="hero__guild-name" :title="server.name">{{ server.name }}</p>
+                        <p class="hero__guild-meta">
+                            <span v-if="memberCount !== null">{{ formatCount(memberCount) }} {{ memberCount > 1 ? 'membres' : 'membre' }}</span>
+                            <span v-if="memberCount !== null" aria-hidden="true">·</span>
+                            <span>{{ panelCount }} sur le panel</span>
+                        </p>
+                        <p v-if="liveChannel" class="hero__guild-live">
+                            <span class="hero__live-dot" aria-hidden="true"></span>
+                            <span class="u-ellipsis">Subsonics est dans {{ liveChannel }}</span>
+                        </p>
+                    </div>
+                </div>
+
+                <div class="hero__actions">
+                    <button type="button" class="hero-btn hero-btn--solid" @click="emit('open-changelog')">
+                        <Icon icon="fa-solid fa-wand-magic-sparkles" aria-hidden="true" />
+                        <span>Nouveautés</span>
+                        <span v-if="hasUnseen" class="hero-btn__badge" aria-hidden="true"></span>
+                        <span v-if="hasUnseen" class="sr-only">(version {{ latestVersion }} pas encore consultée)</span>
+                    </button>
+                    <button type="button" class="hero-btn" @click="Events.emit('VIEW_HELP')">
+                        <Icon icon="fa-solid fa-lightbulb" aria-hidden="true" />
+                        <span>Conseils</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+<script setup>
+/**
+ * Bandeau d'accueil : salutation, phrase du jour, serveur actif, accès aux nouveautés et aux conseils.
+ * Toujours sur fond framboise (les deux thèmes) : textes en blanc.
+ */
+import { computed, onMounted, ref, watch } from 'vue';
+import Events from '@/utils/Events';
+import Motivation from './Motivation.vue';
+import { useUserStore } from '@/stores/userStore';
+import { useGlobalStore } from '@/stores/globalStore';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useChangelog } from './changelog';
+import { formatStatCount } from '@/utils/TimeConverter';
+
+const emit = defineEmits(['open-changelog']);
+
+const userStore = useUserStore();
+const globalStore = useGlobalStore();
+const playerStore = usePlayerStore();
+const { hasUnseen, latestVersion, load } = useChangelog();
+
+const avatarFailed = ref(false);
+const bannerFailed = ref(false);
+const guildIconFailed = ref(false);
+
+const identity = computed(() => userStore.userInfo?.identity ?? {});
+const displayName = computed(() => identity.value.global_name || identity.value.username || 'toi');
+
+// Avatar par défaut de Discord : (id >> 22) % 6 pour les comptes récents
+function defaultAvatar(id) {
+    let index = 0;
+    try {
+        index = Number((BigInt(id) >> 22n) % 6n);
+    } catch {
+        index = 0;
+    }
+    return `https://cdn.discordapp.com/embed/avatars/${index}.png`;
+}
+
+const avatarSrc = computed(() => {
+    const { id, avatar } = identity.value;
+    if (!id || !avatar || avatarFailed.value) return defaultAvatar(id);
+    return `https://cdn.discordapp.com/avatars/${id}/${avatar}.png?size=160`;
+});
+
+watch(() => identity.value.avatar, () => {
+    avatarFailed.value = false;
+});
+
+const now = new Date();
+const greeting = now.getHours() >= 5 && now.getHours() < 18 ? 'Bonjour' : 'Bonsoir';
+const todayLabel = (() => {
+    const label = new Intl.DateTimeFormat('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' }).format(now);
+    return label.charAt(0).toUpperCase() + label.slice(1);
+})();
+
+const server = computed(() => globalStore.actualServer || null);
+
+// La bannière n'est connue que par la liste des serveurs de l'utilisateur (pas par /GUILD/INFO)
+const bannerUrl = computed(() => {
+    const id = server.value?.id || globalStore.lastGuild;
+    const guild = userStore.userInfo?.guilds?.find((item) => item.id === id);
+    return typeof guild?.banner === 'string' && guild.banner ? guild.banner : null;
+});
+
+watch(bannerUrl, () => {
+    bannerFailed.value = false;
+});
+
+const guildIcon = computed(() => {
+    const icon = server.value?.icon;
+    if (icon && !guildIconFailed.value) return icon;
+    let index = 0;
+    try {
+        index = Number(BigInt(server.value?.id || 0) % 5n);
+    } catch {
+        index = 0;
+    }
+    return `https://cdn.discordapp.com/embed/avatars/${index}.png`;
+});
+
+watch(() => server.value?.icon, () => {
+    guildIconFailed.value = false;
+});
+
+const memberCount = computed(() => {
+    const value = Number(server.value?.serverMember);
+    return Number.isFinite(value) && value >= 0 ? value : null;
+});
+
+// members = autres utilisateurs connectés au panel (moi exclu)
+const panelCount = computed(() => (Array.isArray(server.value?.members) ? server.value.members.length : 0) + 1);
+
+const liveChannel = computed(() => (playerStore.online ? playerStore.connection?.channelName || null : null));
+
+function formatCount(value) {
+    return formatStatCount(value);
+}
+
+onMounted(() => {
+    // Nécessaire pour la pastille « nouveau » (réponse mise en cache pour la modale)
+    load();
+});
+</script>
+<style scoped>
+.hero {
+    --hero-fg: #FFFFFF;
+    --hero-fg-soft: rgba(255, 255, 255, 0.82);
+
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    padding: 22px 24px;
+    color: var(--hero-fg);
+    background:
+        radial-gradient(120% 140% at 100% 0%, rgba(255, 120, 170, 0.35) 0%, transparent 55%),
+        linear-gradient(120deg, var(--main-active) 0%, var(--main) 58%, color-mix(in srgb, var(--main) 82%, #ff7aa8) 100%);
+    box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--main) 60%, transparent);
+}
+
+.hero__banner {
+    position: absolute;
+    inset: 0;
+    z-index: -2;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.hero__scrim {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* Bannière du serveur : voile framboise + sombre pour garder le texte lisible */
+.hero__scrim--banner {
+    background:
+        linear-gradient(90deg, rgba(20, 2, 10, 0.88) 0%, color-mix(in srgb, var(--main-active) 78%, transparent) 55%, color-mix(in srgb, var(--main) 55%, transparent) 100%);
+}
+
+/* Égaliseur décoratif en filigrane, à droite */
+.hero__decor {
+    position: absolute;
+    right: 18px;
+    bottom: -6px;
+    z-index: -1;
+    display: flex;
+    align-items: flex-end;
+    gap: 6px;
+    height: 120px;
+    opacity: 0.16;
+    pointer-events: none;
+}
+
+.hero__bar {
+    width: 12px;
+    border-radius: 6px 6px 0 0;
+    background: #FFFFFF;
+    height: 30%;
+    animation: hero-eq 3.2s var(--ease) infinite alternate;
+}
+
+.hero__bar:nth-child(2) { height: 55%; animation-delay: -0.4s; }
+.hero__bar:nth-child(3) { height: 85%; animation-delay: -0.9s; }
+.hero__bar:nth-child(4) { height: 60%; animation-delay: -1.3s; }
+.hero__bar:nth-child(5) { height: 100%; animation-delay: -1.8s; }
+.hero__bar:nth-child(6) { height: 45%; animation-delay: -2.2s; }
+.hero__bar:nth-child(7) { height: 70%; animation-delay: -2.7s; }
+
+@keyframes hero-eq {
+    from { transform: scaleY(0.55); }
+    to { transform: scaleY(1); }
+}
+
+.hero__bar {
+    transform-origin: bottom;
+}
+
+.hero__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px 28px;
+    flex-wrap: wrap;
+}
+
+.hero__identity {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    min-width: 0;
+    flex: 1 1 320px;
+}
+
+.hero__avatar {
+    flex-shrink: 0;
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    object-fit: cover;
+    background-color: var(--main-active);
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 8px 20px rgba(0, 0, 0, 0.3);
+}
+
+.hero__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.hero__date {
+    margin: 0;
+    font-size: 0.78em;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--hero-fg-soft);
+}
+
+.hero__title {
+    margin: 0;
+    font-family: 'Gunship', var(--font);
+    font-weight: 400;
+    font-size: 1.55em;
+    line-height: 1.2;
+    letter-spacing: 0.01em;
+    overflow-wrap: anywhere;
+}
+
+.hero__name {
+    white-space: nowrap;
+}
+
+/* Motivation.vue : sa racine est le <p> (classe du parent prioritaire sur son style) */
+.hero__motto {
+    margin: 2px 0 0 0;
+    font-size: 0.95em;
+    text-align: start;
+    color: var(--hero-fg-soft);
+}
+
+.hero__side {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 14px;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.hero__guild {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    max-width: 340px;
+    padding: 8px 14px 8px 8px;
+    border-radius: var(--radius);
+    background: rgba(0, 0, 0, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+}
+
+.hero__guild-icon {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    object-fit: cover;
+    background-color: var(--main-active);
+}
+
+.hero__guild-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.hero__guild-text p {
+    margin: 0;
+}
+
+.hero__guild-name {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.hero__guild-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 6px;
+    font-size: 0.8em;
+    color: var(--hero-fg-soft);
+}
+
+.hero__guild-live {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    font-size: 0.8em;
+    color: var(--hero-fg);
+}
+
+.hero__live-dot {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #3dff8b;
+    box-shadow: 0 0 0 3px rgba(61, 255, 139, 0.25);
+}
+
+.hero__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.hero-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 38px;
+    padding: 0 16px;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    border-radius: var(--radius-pill);
+    background: rgba(255, 255, 255, 0.14);
+    color: #FFFFFF;
+    font: inherit;
+    font-size: 0.9em;
+    font-weight: 600;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
+}
+
+.hero-btn:hover {
+    background: rgba(255, 255, 255, 0.24);
+}
+
+.hero-btn:active {
+    transform: scale(0.98);
+}
+
+/* Le contour rose global serait invisible sur le bandeau : contour blanc */
+.hero-btn:focus-visible {
+    outline: 2px solid #FFFFFF;
+    outline-offset: 2px;
+}
+
+.hero-btn--solid {
+    background: #FFFFFF;
+    border-color: #FFFFFF;
+    color: var(--main-active);
+    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
+}
+
+.hero-btn--solid:hover {
+    background: #fff0f5;
+}
+
+.hero-btn__badge {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #ffd400;
+    box-shadow: 0 0 0 2px var(--main);
+    animation: hero-badge 2s ease-out infinite;
+}
+
+@keyframes hero-badge {
+    0% { box-shadow: 0 0 0 2px var(--main), 0 0 0 2px rgba(255, 212, 0, 0.6); }
+    70% { box-shadow: 0 0 0 2px var(--main), 0 0 0 9px rgba(255, 212, 0, 0); }
+    100% { box-shadow: 0 0 0 2px var(--main), 0 0 0 9px rgba(255, 212, 0, 0); }
+}
+
+@container home (max-width: 640px) {
+    .hero__side {
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .hero__guild {
+        max-width: none;
+    }
+
+    .hero__actions {
+        justify-content: flex-start;
+    }
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .hero {
+        padding: 18px 16px;
+        border-radius: var(--radius);
+    }
+
+    /* Bouton de fermeture de la vue (mobile) posé en haut à droite */
+    .hero__identity {
+        padding-right: 28px;
+        gap: 14px;
+    }
+
+    .hero__avatar {
+        width: 56px;
+        height: 56px;
+    }
+
+    .hero__title {
+        font-size: 1.25em;
+    }
+
+    .hero__side {
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .hero__guild {
+        max-width: none;
+    }
+
+    .hero__actions {
+        justify-content: stretch;
+    }
+
+    .hero-btn {
+        flex: 1 1 0;
+        justify-content: center;
+    }
+
+    .hero__decor {
+        height: 90px;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/HomeNowPlaying.vue b/src/components/Widget/View/Home/HomeNowPlaying.vue
new file mode 100644
index 0000000..6ee0127
--- /dev/null
+++ b/src/components/Widget/View/Home/HomeNowPlaying.vue
@@ -0,0 +1,347 @@
+<template>
+    <Card title="En cours de lecture" icon="fa-solid fa-compact-disc" tone="main" class="now-playing">
+        <template v-if="song" #actions>
+            <Button variant="ghost" size="sm" icon="fa-solid fa-microphone-lines" @click="Events.emit('VIEW_LYRICS', { toggle: false })">Paroles</Button>
+        </template>
+
+        <template v-if="song">
+            <div class="np">
+                <div class="np__cover">
+                    <img v-if="thumbnail" :src="thumbnail" alt="" decoding="async" @error="thumbnailFailed = true" />
+                    <span v-else class="np__cover-fallback" aria-hidden="true"><Icon icon="fa-solid fa-music" /></span>
+                    <span v-if="playerStore.status === 'playing'" class="np__eq" aria-hidden="true">
+                        <span></span><span></span><span></span>
+                    </span>
+                </div>
+
+                <div class="np__info">
+                    <Tag :tone="statusInfo.tone" :icon="statusInfo.icon">{{ statusInfo.label }}</Tag>
+                    <p class="np__title" :title="song.title">{{ song.title || 'Titre inconnu' }}</p>
+                    <p class="np__author">{{ song.author || 'Auteur inconnu' }}</p>
+
+                    <div
+                        class="np__progress"
+                        role="progressbar"
+                        :aria-label="`Progression de « ${song.title || 'titre en cours'} »`"
+                        aria-valuemin="0"
+                        :aria-valuemax="durationSeconds ?? undefined"
+                        :aria-valuenow="durationSeconds ? positionSeconds : undefined"
+                        :aria-valuetext="progressText"
+                    >
+                        <span v-if="durationSeconds" class="np__progress-fill" :style="{ transform: `scaleX(${ratio})` }"></span>
+                        <span v-else class="np__progress-live"></span>
+                    </div>
+                    <div class="np__times u-mono" aria-hidden="true">
+                        <span>{{ positionLabel }}</span>
+                        <span>{{ durationSeconds ? durationLabel : 'En direct' }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <ul class="np__meta">
+                <li v-if="channelName">
+                    <Icon icon="fa-solid fa-volume-high" aria-hidden="true" />
+                    <span class="u-ellipsis">Dans <strong>{{ channelName }}</strong></span>
+                </li>
+                <li v-if="upNext">
+                    <Icon icon="fa-solid fa-forward" aria-hidden="true" />
+                    <span class="u-ellipsis">À suivre : <strong :title="upNext.title">{{ upNext.title }}</strong></span>
+                    <span v-if="remaining > 0" class="np__more">+{{ remaining }}</span>
+                </li>
+                <li v-else class="np__muted">
+                    <Icon icon="fa-solid fa-list" aria-hidden="true" />
+                    <span>File d'attente vide après ce titre</span>
+                </li>
+            </ul>
+        </template>
+
+        <EmptyState
+            v-else
+            icon="fa-solid fa-headphones"
+            :title="playerStore.status === 'loading' ? 'Chargement du titre…' : 'Rien en lecture pour l\'instant'"
+            compact
+        >
+            <p>Rejoins un salon vocal{{ serverName ? ` de ${serverName}` : '' }}, puis lance un titre.</p>
+            <template #actions>
+                <div class="np__empty-actions">
+                    <ActualChannel />
+                    <Button size="sm" icon="fa-solid fa-magnifying-glass" @click="Events.emit('SEARCH_FOCUS')">Rechercher un titre</Button>
+                </div>
+            </template>
+        </EmptyState>
+    </Card>
+</template>
+<script setup>
+/**
+ * Carte « En cours de lecture » : lit uniquement playerStore (aucune requête).
+ */
+import { computed, ref, watch } from 'vue';
+import Events from '@/utils/Events';
+import Card from '@/components/UI/Card.vue';
+import Button from '@/components/UI/Button.vue';
+import Tag from '@/components/UI/Tag.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import ActualChannel from '@/components/Widget/View/Player/ActualChannel.vue';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useGlobalStore } from '@/stores/globalStore';
+import { getVideoDuration } from '@/utils/TimeConverter';
+
+const playerStore = usePlayerStore();
+const globalStore = useGlobalStore();
+
+const song = computed(() => playerStore.current);
+const thumbnailFailed = ref(false);
+
+watch(() => song.value?.thumbnail, () => {
+    thumbnailFailed.value = false;
+});
+
+const thumbnail = computed(() => (!thumbnailFailed.value && song.value?.thumbnail) || null);
+const serverName = computed(() => globalStore.actualServer?.name || '');
+const channelName = computed(() => playerStore.connection?.channelName || null);
+
+const STATUS = {
+    playing: { label: 'Lecture en cours', tone: 'success', icon: 'fa-solid fa-play' },
+    paused: { label: 'En pause', tone: 'warning', icon: 'fa-solid fa-pause' },
+    loading: { label: 'Chargement…', tone: 'info', icon: 'fa-solid fa-hourglass-half' },
+    stalled: { label: 'Mise en mémoire tampon…', tone: 'warning', icon: 'fa-solid fa-hourglass-half' },
+    idle: { label: 'Inactif', tone: 'default', icon: 'fa-solid fa-circle' },
+    offline: { label: 'Hors ligne', tone: 'default', icon: 'fa-solid fa-power-off' }
+};
+
+const statusInfo = computed(() => {
+    const base = STATUS[playerStore.status] || STATUS.idle;
+    if (playerStore.status === 'loading' && playerStore.loadingLabel) return { ...base, label: playerStore.loadingLabel };
+    return base;
+});
+
+const durationSeconds = computed(() => (playerStore.durationMs ? Math.round(playerStore.durationMs / 1000) : null));
+const positionSeconds = computed(() => Math.floor(playerStore.positionMs / 1000));
+const ratio = computed(() => {
+    if (!playerStore.durationMs) return 0;
+    return Math.min(1, Math.max(0, playerStore.positionMs / playerStore.durationMs));
+});
+
+const positionLabel = computed(() => getVideoDuration(positionSeconds.value));
+const durationLabel = computed(() => getVideoDuration(durationSeconds.value));
+const progressText = computed(() => (durationSeconds.value
+    ? `${positionLabel.value} sur ${durationLabel.value}`
+    : `En direct, ${positionLabel.value} écoulées`));
+
+const upNext = computed(() => playerStore.next?.[0] || null);
+const remaining = computed(() => Math.max(0, (playerStore.nextCount || 0) - 1));
+</script>
+<style scoped>
+.np {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    min-width: 0;
+}
+
+.np__cover {
+    position: relative;
+    flex: 0 0 auto;
+    width: clamp(120px, 38%, 220px);
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+    box-shadow: var(--shadow-sm);
+}
+
+.np__cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.np__cover-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 1.8em;
+    color: var(--text-secondary);
+}
+
+/* Mini égaliseur sur la pochette pendant la lecture */
+.np__eq {
+    position: absolute;
+    left: 8px;
+    bottom: 8px;
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    height: 16px;
+    padding: 4px 5px;
+    border-radius: var(--radius-sm);
+    background: rgba(0, 0, 0, 0.55);
+}
+
+.np__eq span {
+    width: 3px;
+    height: 100%;
+    border-radius: 2px;
+    background: #FFFFFF;
+    transform-origin: bottom;
+    animation: np-eq 0.9s ease-in-out infinite alternate;
+}
+
+.np__eq span:nth-child(2) { animation-delay: -0.3s; }
+.np__eq span:nth-child(3) { animation-delay: -0.6s; }
+
+@keyframes np-eq {
+    from { transform: scaleY(0.25); }
+    to { transform: scaleY(1); }
+}
+
+.np__info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
+}
+
+.np__info p {
+    margin: 0;
+}
+
+.np__title {
+    font-size: 1.05em;
+    font-weight: 600;
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+}
+
+.np__author {
+    font-size: 0.85em;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.np__progress {
+    position: relative;
+    height: 6px;
+    margin-top: 6px;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 14%, transparent);
+    overflow: hidden;
+}
+
+.np__progress-fill {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--main-active), var(--main));
+    transform-origin: left;
+    transition: transform 0.25s linear;
+}
+
+.np__progress-live {
+    position: absolute;
+    inset: 0;
+    width: 40%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, transparent, var(--main), transparent);
+    animation: np-live 1.6s ease-in-out infinite;
+}
+
+@keyframes np-live {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(250%); }
+}
+
+.np__times {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75em;
+    color: var(--text-secondary);
+}
+
+.np__meta {
+    list-style: none;
+    margin: 0;
+    padding: 10px 0 0 0;
+    border-top: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
+
+.np__meta li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+
+.np__meta svg {
+    flex-shrink: 0;
+    width: 14px;
+    color: var(--main);
+}
+
+.np__meta strong {
+    color: var(--text);
+    font-weight: 600;
+}
+
+.np__more {
+    flex-shrink: 0;
+    padding: 1px 7px;
+    border-radius: var(--radius-pill);
+    background-color: var(--main-soft);
+    color: var(--text);
+    font-size: 0.85em;
+    font-weight: 600;
+}
+
+.np__muted svg {
+    color: var(--text-secondary);
+}
+
+.np__empty-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+@container home (max-width: 460px) {
+    .np {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .np__cover {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .np {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .np__cover {
+        width: 100%;
+        max-width: 420px;
+        align-self: center;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/HomeQuickActions.vue b/src/components/Widget/View/Home/HomeQuickActions.vue
new file mode 100644
index 0000000..7e2c658
--- /dev/null
+++ b/src/components/Widget/View/Home/HomeQuickActions.vue
@@ -0,0 +1,133 @@
+<template>
+    <Card title="Accès rapide" icon="fa-solid fa-bolt" tone="main" class="quick">
+        <ul class="quick__grid">
+            <li v-for="action in ACTIONS" :key="action.event">
+                <button type="button" class="quick__tile" @click="Events.emit(action.event, action.payload)">
+                    <span class="quick__icon" aria-hidden="true"><Icon :icon="action.icon" /></span>
+                    <span class="quick__text">
+                        <span class="quick__label">{{ action.label }}</span>
+                        <span class="quick__hint">{{ action.hint }}</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </Card>
+</template>
+<script setup>
+/**
+ * Raccourcis de l'accueil : chaque tuile émet un événement du bus, traité par le composant concerné
+ * (Search.vue, View.vue, barre latérale des playlists).
+ */
+import Events from '@/utils/Events';
+import Card from '@/components/UI/Card.vue';
+
+const ACTIONS = [
+    { event: 'SEARCH_FOCUS', label: 'Rechercher', hint: 'Un titre, un artiste, un lien', icon: 'fa-solid fa-magnifying-glass' },
+    { event: 'VIEW_FILES', label: 'Mes fichiers', hint: 'Tes musiques importées', icon: 'fa-solid fa-cloud-arrow-up' },
+    // Charge utile vide : la modale de création choisit la portée (personnelle par défaut)
+    { event: 'PLAYLIST_CREATE_OPEN', payload: {}, label: 'Nouvelle playlist', hint: 'Vide ou importée d\'un lien', icon: 'fa-solid fa-square-plus' },
+    { event: 'VIEW_HISTORY', label: 'Historique', hint: 'Tes dernières écoutes', icon: 'fa-solid fa-clock-rotate-left' }
+];
+</script>
+<style scoped>
+.quick__grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    flex: 1;
+}
+
+.quick__grid li {
+    display: flex;
+    min-width: 0;
+}
+
+.quick__tile {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    width: 100%;
+    min-height: 96px;
+    padding: 12px;
+    box-sizing: border-box;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--secondary);
+    color: var(--text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+        background-color var(--dur-fast) ease,
+        border-color var(--dur-fast) ease,
+        transform var(--dur-fast) var(--ease),
+        box-shadow var(--dur-fast) ease;
+}
+
+.quick__tile:hover {
+    border-color: color-mix(in srgb, var(--main) 55%, transparent);
+    background-color: color-mix(in srgb, var(--main) 8%, var(--secondary));
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+}
+
+.quick__tile:active {
+    transform: translateY(0) scale(0.98);
+}
+
+.quick__tile:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.quick__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius);
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1.05em;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
+}
+
+.quick__tile:hover .quick__icon {
+    background-color: var(--main);
+    color: var(--main-contrast);
+}
+
+.quick__text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.quick__label {
+    font-weight: 600;
+    font-size: 0.95em;
+}
+
+.quick__hint {
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    line-height: 1.3;
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .quick__tile {
+        min-height: 84px;
+        padding: 10px;
+        gap: 8px;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/HomeRecent.vue b/src/components/Widget/View/Home/HomeRecent.vue
new file mode 100644
index 0000000..692d3e0
--- /dev/null
+++ b/src/components/Widget/View/Home/HomeRecent.vue
@@ -0,0 +1,446 @@
+<template>
+    <Card
+        title="Écoutés récemment"
+        icon="fa-solid fa-clock-rotate-left"
+        :subtitle="subtitle"
+        class="recent"
+    >
+        <template #actions>
+            <div v-if="items.length > 2" class="recent__scroll">
+                <IconAction icon="fa-solid fa-chevron-left" label="Faire défiler vers la gauche" :disabled="atStart" @click="scrollBy(-1)" />
+                <IconAction icon="fa-solid fa-chevron-right" label="Faire défiler vers la droite" :disabled="atEnd" @click="scrollBy(1)" />
+            </div>
+            <Button variant="ghost" size="sm" icon-right="fa-solid fa-arrow-right" @click="Events.emit('VIEW_HISTORY')">Tout voir</Button>
+        </template>
+
+        <ul v-if="loading && items.length === 0" class="recent__strip" aria-hidden="true">
+            <li v-for="n in 5" :key="n" class="rc rc--skeleton">
+                <span class="rc__cover"></span>
+                <span class="rc__line"></span>
+                <span class="rc__line rc__line--short"></span>
+            </li>
+        </ul>
+
+        <ul
+            v-else-if="items.length"
+            ref="strip"
+            class="recent__strip"
+            aria-label="Derniers titres écoutés"
+            @scroll.passive="updateEdges"
+        >
+            <li v-for="(item, index) in items" :key="`${index}-${item.id ?? item.url}`" class="rc">
+                <div class="rc__cover">
+                    <img
+                        v-if="item.thumbnail && !brokenThumbs.has(index)"
+                        :src="item.thumbnail"
+                        alt=""
+                        loading="lazy"
+                        decoding="async"
+                        @error="markBroken(index)"
+                    />
+                    <span v-else class="rc__fallback" aria-hidden="true">
+                        <Icon :icon="item.form === 'PLAYLIST' ? 'fa-solid fa-list' : 'fa-solid fa-music'" />
+                    </span>
+                    <span v-if="item.form === 'PLAYLIST'" class="rc__badge">Playlist</span>
+                    <span v-else-if="durationLabel(item)" class="rc__duration u-mono">{{ durationLabel(item) }}</span>
+
+                    <div class="rc__actions">
+                        <button
+                            type="button"
+                            class="rc__btn rc__btn--play"
+                            :disabled="!canPlay || busyIndex !== null"
+                            :aria-label="`Lire « ${titleOf(item)} » maintenant`"
+                            :title="canPlay ? 'Lire maintenant' : JOIN_HINT"
+                            @click="play(item, index, true)"
+                        >
+                            <span v-if="busyIndex === index && busyNow" class="rc__spinner" aria-hidden="true"></span>
+                            <Icon v-else icon="fa-solid fa-play" aria-hidden="true" />
+                        </button>
+                        <button
+                            type="button"
+                            class="rc__btn"
+                            :disabled="!canPlay || busyIndex !== null"
+                            :aria-label="`Ajouter « ${titleOf(item)} » à la file d'attente`"
+                            :title="canPlay ? 'Ajouter à la file d\'attente' : JOIN_HINT"
+                            @click="play(item, index, false)"
+                        >
+                            <span v-if="busyIndex === index && !busyNow" class="rc__spinner" aria-hidden="true"></span>
+                            <Icon v-else icon="fa-solid fa-plus" aria-hidden="true" />
+                        </button>
+                    </div>
+                </div>
+                <p class="rc__title" :title="titleOf(item)">{{ titleOf(item) }}</p>
+                <p class="rc__author">{{ item.author || '—' }}</p>
+            </li>
+        </ul>
+
+        <EmptyState v-else-if="failed" icon="fa-solid fa-plug-circle-exclamation" title="Historique indisponible" compact>
+            <p>Le serveur n'a pas répondu.</p>
+            <template #actions>
+                <Button variant="secondary" size="sm" icon="fa-solid fa-rotate-right" @click="refresh()">Réessayer</Button>
+            </template>
+        </EmptyState>
+
+        <EmptyState v-else icon="fa-solid fa-headphones-simple" title="Aucune écoute récente" compact>
+            <p>Dès que tu lances un titre, il apparaîtra ici.</p>
+        </EmptyState>
+
+        <p class="sr-only" role="status" aria-live="polite">{{ announcement }}</p>
+        <p v-if="feedback" :class="['recent__feedback', `recent__feedback--${feedback.tone}`]" aria-hidden="true">
+            <Icon :icon="feedback.tone === 'error' ? 'fa-solid fa-circle-exclamation' : 'fa-solid fa-circle-check'" />
+            {{ feedback.text }}
+        </p>
+    </Card>
+</template>
+<script setup>
+/**
+ * Bandeau horizontal des derniers titres écoutés (10 au plus), avec lecture immédiate / ajout à la file.
+ * Aucune modale par élément : deux vrais boutons sur chaque pochette.
+ */
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue';
+import Events from '@/utils/Events';
+import Card from '@/components/UI/Card.vue';
+import Button from '@/components/UI/Button.vue';
+import IconAction from '@/components/UI/IconAction.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import { IORequestAsync } from '@/utils/IORequest';
+import { useGlobalStore } from '@/stores/globalStore';
+import { getVideoDuration } from '@/utils/TimeConverter';
+import { useHistory } from './useHistory';
+
+const MAX_ITEMS = 10;
+const JOIN_HINT = 'Rejoins un salon vocal pour lancer un titre';
+
+const globalStore = useGlobalStore();
+const { recent, loading, failed, refresh } = useHistory();
+
+const items = computed(() => recent.value.slice(0, MAX_ITEMS));
+const canPlay = computed(() => !!globalStore.currentChannel);
+const subtitle = computed(() => (canPlay.value || items.value.length === 0 ? null : JOIN_HINT));
+
+const strip = ref(null);
+const atStart = ref(true);
+const atEnd = ref(false);
+const brokenThumbs = reactive(new Set());
+
+const busyIndex = ref(null);
+const busyNow = ref(false);
+const announcement = ref('');
+const feedback = ref(null);
+let feedbackTimer = null;
+
+function titleOf(item) {
+    return item?.title || 'Titre inconnu';
+}
+
+function durationLabel(item) {
+    const value = Number(item?.duration);
+    if (!Number.isFinite(value)) return null;
+    return value === 0 ? 'LIVE' : getVideoDuration(value);
+}
+
+function markBroken(index) {
+    brokenThumbs.add(index);
+}
+
+function updateEdges() {
+    const el = strip.value;
+    if (!el) return;
+    atStart.value = el.scrollLeft <= 4;
+    atEnd.value = el.scrollLeft + el.clientWidth >= el.scrollWidth - 4;
+}
+
+function scrollBy(direction) {
+    const el = strip.value;
+    if (!el) return;
+    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    el.scrollBy({ left: direction * Math.max(160, el.clientWidth * 0.8), behavior: reduce ? 'auto' : 'smooth' });
+}
+
+watch(items, () => {
+    brokenThumbs.clear();
+    nextTick(updateEdges);
+});
+
+function showFeedback(text, tone) {
+    announcement.value = text;
+    feedback.value = { text, tone };
+    clearTimeout(feedbackTimer);
+    feedbackTimer = setTimeout(() => {
+        feedback.value = null;
+    }, 4000);
+}
+
+// La réponse revient sur le même nom d'événement (sans corrélation) : une action à la fois
+async function play(item, index, now) {
+    if (!canPlay.value || busyIndex.value !== null) return;
+    busyIndex.value = index;
+    busyNow.value = now;
+    const isPlaylist = item.form === 'PLAYLIST' && typeof item.url === 'string';
+    const response = isPlaylist
+        ? await IORequestAsync('/SEARCH/PLAYLIST', { url: item.url, now }, 60000)
+        : await IORequestAsync('/SEARCH/PLAY', { song: item, now }, 15000);
+    busyIndex.value = null;
+
+    const title = titleOf(item);
+    if (response === true) {
+        showFeedback(now ? `Lecture de « ${title} »` : `« ${title} » ajouté à la file d'attente`, 'success');
+    } else if (response === null) {
+        showFeedback('Le serveur ne répond pas, réessaie dans un instant.', 'error');
+    } else {
+        showFeedback(`Impossible de lancer « ${title} ». Es-tu bien dans un salon vocal ?`, 'error');
+    }
+}
+
+onBeforeUnmount(() => {
+    clearTimeout(feedbackTimer);
+});
+</script>
+<style scoped>
+.recent__scroll {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin-right: 6px;
+    font-size: 0.8em;
+}
+
+.recent__strip {
+    list-style: none;
+    margin: 0 -4px;
+    padding: 4px 4px 8px 4px;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 168px;
+    gap: 12px;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scroll-padding: 0 4px;
+}
+
+.rc {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    scroll-snap-align: start;
+}
+
+.rc p {
+    margin: 0;
+}
+
+.rc__cover {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background-color: color-mix(in srgb, var(--text) 8%, transparent);
+    margin-bottom: 4px;
+}
+
+.rc__cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform var(--dur) var(--ease);
+}
+
+.rc:hover .rc__cover img {
+    transform: scale(1.04);
+}
+
+.rc__fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--text-secondary);
+    font-size: 1.4em;
+}
+
+.rc__duration,
+.rc__badge {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    padding: 2px 6px;
+    border-radius: var(--radius-pill);
+    background: rgba(0, 0, 0, 0.65);
+    color: #FFFFFF;
+    font-size: 0.72em;
+    font-weight: 500;
+}
+
+.rc__badge {
+    left: 6px;
+    right: auto;
+}
+
+/* Boutons sur la pochette : visibles au survol et au clavier, toujours sur écran tactile */
+.rc__actions {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
+    opacity: 0;
+    transition: opacity var(--dur-fast) ease;
+}
+
+.rc:hover .rc__actions,
+.rc__actions:focus-within {
+    opacity: 1;
+}
+
+@media (hover: none) {
+    .rc__actions {
+        opacity: 1;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding: 6px;
+        background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55));
+    }
+
+    .rc__duration,
+    .rc__badge {
+        top: 6px;
+        bottom: auto;
+    }
+}
+
+.rc__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.92);
+    color: #111210;
+    font: inherit;
+    font-size: 0.9em;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+    transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) ease;
+}
+
+.rc__btn--play {
+    width: 42px;
+    height: 42px;
+    background: var(--main);
+    color: var(--main-contrast);
+}
+
+.rc__btn:hover:not(:disabled) {
+    transform: scale(1.08);
+}
+
+.rc__btn:focus-visible {
+    outline: 2px solid #FFFFFF;
+    outline-offset: 2px;
+}
+
+.rc__btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.rc__spinner {
+    width: 14px;
+    height: 14px;
+    box-sizing: border-box;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: u-spin 0.7s linear infinite;
+}
+
+.rc__title {
+    font-size: 0.85em;
+    font-weight: 600;
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+}
+
+.rc__author {
+    font-size: 0.78em;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Squelette de chargement */
+.rc--skeleton .rc__cover,
+.rc__line {
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--text) 6%, transparent) 0%,
+        color-mix(in srgb, var(--text) 14%, transparent) 50%,
+        color-mix(in srgb, var(--text) 6%, transparent) 100%);
+    background-size: 200% 100%;
+    animation: rc-shimmer 1.4s ease-in-out infinite;
+}
+
+.rc__line {
+    display: block;
+    height: 10px;
+    width: 90%;
+    border-radius: var(--radius-pill);
+}
+
+.rc__line--short {
+    width: 55%;
+}
+
+@keyframes rc-shimmer {
+    from { background-position: 100% 0; }
+    to { background-position: -100% 0; }
+}
+
+.recent__feedback {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 0.82em;
+    animation: u-fade-in var(--dur) ease;
+}
+
+/* Texte en --text (lisible sur les deux thèmes), seule l'icône porte la couleur */
+.recent__feedback {
+    color: var(--text);
+}
+
+.recent__feedback--success svg {
+    color: var(--text-success);
+}
+
+.recent__feedback--error svg {
+    color: var(--text-error);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .recent__strip {
+        grid-auto-columns: 140px;
+        gap: 10px;
+    }
+
+    .recent__scroll {
+        display: none;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/HomeStats.vue b/src/components/Widget/View/Home/HomeStats.vue
new file mode 100644
index 0000000..41b1305
--- /dev/null
+++ b/src/components/Widget/View/Home/HomeStats.vue
@@ -0,0 +1,251 @@
+<template>
+    <Card
+        v-if="state !== 'hidden'"
+        title="Sur ce serveur"
+        icon="fa-solid fa-chart-simple"
+        tone="info"
+        :subtitle="serverName ? `Statistiques de ${serverName}` : 'Statistiques du serveur'"
+        class="stats"
+        :aria-busy="state === 'loading' ? 'true' : undefined"
+    >
+        <dl class="stats__grid">
+            <div v-for="tile in tiles" :key="tile.key" class="stat" :title="tile.title">
+                <dt class="stat__label">
+                    <span class="stat__icon" aria-hidden="true"><Icon :icon="tile.icon" /></span>
+                    {{ tile.label }}
+                </dt>
+                <dd class="stat__value">
+                    <span v-if="state === 'loading'" class="stat__skeleton" aria-hidden="true"></span>
+                    <span v-if="state === 'loading'" class="sr-only">Chargement…</span>
+                    <template v-else>{{ tile.value }}</template>
+                </dd>
+            </div>
+        </dl>
+    </Card>
+</template>
+<script setup>
+/**
+ * Statistiques du serveur actif (/GUILD/STATS, réponse par acquittement).
+ * La carte disparaît si la route échoue (ancien serveur, droits, délai) ; le parent en est averti
+ * par l'événement `availability` pour élargir la carte voisine.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import Events from '@/utils/Events';
+import Card from '@/components/UI/Card.vue';
+import { IORequestAck } from '@/utils/IORequest';
+import { useGlobalStore } from '@/stores/globalStore';
+import { usePlayerStore } from '@/stores/playerStore';
+import { formatStatCount, formatStatDuration, toFiniteNumber } from '@/utils/TimeConverter';
+
+const emit = defineEmits(['availability']);
+
+const globalStore = useGlobalStore();
+const playerStore = usePlayerStore();
+
+const state = ref('loading'); // loading | ready | hidden
+const stats = ref({ musicPlayed: 0, secondsPlayed: 0, commands: 0 });
+const serverName = computed(() => globalStore.actualServer?.name || '');
+
+let mounted = false;
+let inFlight = false;
+let again = false;
+let waitTimer = null;
+let refreshTimer = null;
+
+function safeCount(value) {
+    const number = toFiniteNumber(value);
+    return Number.isFinite(number) && number > 0 ? Math.round(number) : 0;
+}
+
+// « 3 j 4 h », « 5 h 12 min », « 42 min » : plus lisible qu'un hh:mm:ss pour un cumul
+function compactDuration(totalSeconds) {
+    const seconds = safeCount(totalSeconds);
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    if (days > 0) return hours > 0 ? `${days} j ${hours} h` : `${days} j`;
+    if (hours > 0) return minutes > 0 ? `${hours} h ${String(minutes).padStart(2, '0')} min` : `${hours} h`;
+    if (minutes > 0) return `${minutes} min`;
+    return seconds > 0 ? `${seconds} s` : '0 min';
+}
+
+const tiles = computed(() => [
+    {
+        key: 'music',
+        label: 'Titres joués',
+        icon: 'fa-solid fa-music',
+        value: formatStatCount(stats.value.musicPlayed),
+        title: null
+    },
+    {
+        key: 'time',
+        label: 'Temps d\'écoute',
+        icon: 'fa-solid fa-hourglass-half',
+        value: compactDuration(stats.value.secondsPlayed),
+        title: state.value === 'ready' ? `Exactement ${formatStatDuration(stats.value.secondsPlayed)}` : null
+    },
+    {
+        key: 'commands',
+        label: 'Commandes',
+        icon: 'fa-solid fa-terminal',
+        value: formatStatCount(stats.value.commands),
+        title: null
+    }
+]);
+
+watch(state, (value) => {
+    emit('availability', value !== 'hidden');
+}, { immediate: true });
+
+async function fetchStats() {
+    if (inFlight) {
+        again = true;
+        return;
+    }
+    inFlight = true;
+    clearTimeout(waitTimer);
+    let response = null;
+    try {
+        response = await IORequestAck('/GUILD/STATS', undefined, 8000);
+    } catch {
+        response = null;
+    }
+    inFlight = false;
+    if (!mounted) return;
+
+    if (response && response.ok === true) {
+        stats.value = {
+            musicPlayed: safeCount(response.musicPlayed),
+            secondsPlayed: safeCount(response.secondsPlayed),
+            commands: safeCount(response.commands)
+        };
+        state.value = 'ready';
+    } else if (state.value !== 'ready') {
+        // Échec avant toute donnée : on masque (une mise à jour réussie la refera apparaître)
+        state.value = 'hidden';
+    }
+
+    if (again) {
+        again = false;
+        fetchStats();
+    }
+}
+
+// Le serveur n'est rejoint qu'après /GUILD/JOIN : on attend GUILD_JOINED si l'accueil est monté avant
+function onGuildJoined() {
+    fetchStats();
+}
+
+onMounted(() => {
+    mounted = true;
+    Events.on('GUILD_JOINED', onGuildJoined);
+    if (globalStore.actualServer) {
+        fetchStats();
+    } else {
+        waitTimer = setTimeout(() => {
+            if (state.value === 'loading') fetchStats();
+        }, 10000);
+    }
+});
+
+// Un nouveau titre fait évoluer les compteurs : rafraîchissement groupé
+watch(() => playerStore.current?.id, (newId, oldId) => {
+    if (!newId || newId === oldId) return;
+    clearTimeout(refreshTimer);
+    refreshTimer = setTimeout(fetchStats, 2000);
+});
+
+onBeforeUnmount(() => {
+    mounted = false;
+    Events.off('GUILD_JOINED', onGuildJoined);
+    clearTimeout(waitTimer);
+    clearTimeout(refreshTimer);
+});
+</script>
+<style scoped>
+.stats__grid {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+    flex: 1;
+}
+
+.stat {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--secondary);
+}
+
+.stat__label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.78em;
+    color: var(--text-secondary);
+    line-height: 1.3;
+}
+
+.stat__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: var(--radius-sm);
+    background-color: color-mix(in srgb, var(--text-info) 16%, transparent);
+    color: var(--text-info);
+    font-size: 0.85em;
+}
+
+.stat__value {
+    margin: 0;
+    font-size: 1.45em;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.15;
+    overflow-wrap: anywhere;
+}
+
+.stat__skeleton {
+    display: block;
+    width: 70%;
+    height: 1em;
+    border-radius: var(--radius-sm);
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--text) 6%, transparent) 0%,
+        color-mix(in srgb, var(--text) 14%, transparent) 50%,
+        color-mix(in srgb, var(--text) 6%, transparent) 100%);
+    background-size: 200% 100%;
+    animation: stat-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes stat-shimmer {
+    from { background-position: 100% 0; }
+    to { background-position: -100% 0; }
+}
+
+@container home (max-width: 420px) {
+    .stats__grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .stat {
+        padding: 10px;
+    }
+
+    .stat__value {
+        font-size: 1.2em;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Home/HomeTip.vue b/src/components/Widget/View/Home/HomeTip.vue
new file mode 100644
index 0000000..a5c7d15
--- /dev/null
+++ b/src/components/Widget/View/Home/HomeTip.vue
@@ -0,0 +1,98 @@
+<template>
+    <Card title="Conseil du moment" icon="fa-solid fa-lightbulb" tone="warning" class="tip">
+        <div class="tip__body" aria-live="polite" aria-atomic="true">
+            <Transition name="tip" mode="out-in">
+                <div :key="position" class="tip__content">
+                    <span class="tip__icon" aria-hidden="true"><Icon :icon="tip.icon" /></span>
+                    <p class="tip__text">{{ tip.text }}</p>
+                </div>
+            </Transition>
+        </div>
+
+        <template #footer>
+            <span class="tip__counter">Conseil {{ position + 1 }} sur {{ order.length }}</span>
+            <Button variant="ghost" size="sm" @click="Events.emit('VIEW_HELP')">Tous les conseils</Button>
+            <Button variant="secondary" size="sm" icon-right="fa-solid fa-arrow-right" class="tip__next" @click="next()">Suivant</Button>
+        </template>
+    </Card>
+</template>
+<script setup>
+/**
+ * Un conseil à la fois, dans un ordre mélangé (sans toucher à la liste source) ; « Suivant » fait défiler.
+ * Pas de rotation automatique : le texte ne change que sur demande (lecture tranquille, lecteurs d'écran).
+ */
+import { computed, ref } from 'vue';
+import Events from '@/utils/Events';
+import Card from '@/components/UI/Card.vue';
+import Button from '@/components/UI/Button.vue';
+import { TIPS, shuffled } from './tips';
+
+const order = shuffled(TIPS);
+const position = ref(0);
+const tip = computed(() => order[position.value]);
+
+function next() {
+    position.value = (position.value + 1) % order.length;
+}
+</script>
+<style scoped>
+.tip__body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-height: 72px;
+}
+
+.tip__content {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    width: 100%;
+}
+
+.tip__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--main-soft), color-mix(in srgb, var(--text-warning) 18%, transparent));
+    color: var(--text);
+    font-size: 1.25em;
+}
+
+.tip__text {
+    margin: 0;
+    font-size: 0.95em;
+    line-height: 1.5;
+}
+
+/* Bouton secondaire posé sur la carte (même fond) : on le redescend d'un niveau */
+.tip__next {
+    --btn-bg: var(--secondary);
+    --btn-bg-hover: var(--quaternary);
+}
+
+.tip__counter {
+    margin-right: auto;
+    font-size: 0.78em;
+    color: var(--text-secondary);
+}
+
+.tip-enter-active,
+.tip-leave-active {
+    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+
+.tip-enter-from {
+    opacity: 0;
+    transform: translateX(10px);
+}
+
+.tip-leave-to {
+    opacity: 0;
+    transform: translateX(-10px);
+}
+</style>
diff --git a/src/components/Widget/View/Home/Welcome.vue b/src/components/Widget/View/Home/Welcome.vue
deleted file mode 100644
index e1eb411..0000000
--- a/src/components/Widget/View/Home/Welcome.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <div class="welcome-container">
-    <div class="welcome">
-        <Avatar img-class="avatar-welcome" :user-id='userStore.userInfo.identity.id' :avatar-url="userStore.userInfo.identity.avatar" />
-        <div>
-            <h2>Bienvenue, {{ userStore.userInfo.identity.global_name }} !</h2>
-            <Motivation class="mot"/>
-        </div>
-    </div>
-    <div class="welcome-actions">
-        <Button icon="fa-question" @click="Events.emit('VIEW_HELP')">Conseil</Button>
-        <Button icon="fa-history" @click="Events.emit('VIEW_HISTORY')">Historique personnel</Button>
-    </div>
-    </div>
-</template>
-<script setup>
-import Avatar from '@/components/UI/Avatar.vue';
-import { useUserStore } from '@/stores/userStore';
-import Motivation from '@/components/Widget/View/Home/Motivation.vue';
-import Button from '@/components/UI/Button.vue';
-import Events from '@/utils/Events';
-
-const userStore = useUserStore();
-
-</script>
-<style scoped>
-.welcome {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 20px;
-}
-
-.welcome-actions {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: center;
-    gap: 10px;
-}
-
-.welcome-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 5px;
-}
-
-h2 {
-    margin: 0;
-}
-
-p {
-    margin: 10px 0;
-    color: var(--text-secondary);
-    font-size: 0.9em;
-}
-
-.mot {
-    font-size: 0.8em;
-    text-align: start;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-   
-    .welcome-actions {
-       align-items: initial;
-    }
-}
-
-
-</style>
\ No newline at end of file
diff --git a/src/components/Widget/View/Home/changelog.js b/src/components/Widget/View/Home/changelog.js
new file mode 100644
index 0000000..0b42d0c
--- /dev/null
+++ b/src/components/Widget/View/Home/changelog.js
@@ -0,0 +1,168 @@
+/**
+ * Nouveautés : lecture de backend/CHANGELOG.html (route /CHANGELOG) et suivi de la dernière version vue.
+ *
+ * Le fichier utilise un mini-balisage maison (version entre barre-étoile, date entre étoile-tiret,
+ * tags entre barre-dièse). Il est analysé avec DOMParser puis rendu par interpolation de texte :
+ * aucun v-html, donc aucun HTML du serveur n'est injecté dans la page.
+ * L'état est partagé au niveau du module : une seule requête par session, partagée par l'accueil et la modale.
+ */
+import { computed, ref, shallowRef } from 'vue';
+import { IORequestAsync } from '@/utils/IORequest';
+
+const SEEN_KEY = 'changelogSeen';
+
+// Étiquettes connues : type de changement (kind) ou partie concernée (area)
+export const CHANGELOG_TAGS = {
+    AJOUT: { label: 'Ajout', group: 'kind', tone: 'success', icon: 'fa-solid fa-plus' },
+    FIX: { label: 'Fix', group: 'kind', tone: 'error', icon: 'fa-solid fa-bug' },
+    FRONTEND: { label: 'Client', group: 'area', tone: 'client', icon: 'fa-solid fa-display' },
+    BACKEND: { label: 'Serveur', group: 'area', tone: 'server', icon: 'fa-solid fa-server' },
+    DISCORD: { label: 'Discord', group: 'area', tone: 'discord', icon: 'fa-brands fa-discord' },
+    PLAYER: { label: 'Player', group: 'area', tone: 'warning', icon: 'fa-solid fa-headphones' },
+    AUTRE: { label: 'Autre', group: 'area', tone: 'other', icon: 'fa-solid fa-ellipsis' }
+};
+
+// Ordre d'affichage des filtres
+export const CHANGELOG_FILTER_ORDER = ['AJOUT', 'FIX', 'FRONTEND', 'BACKEND', 'DISCORD', 'PLAYER', 'AUTRE'];
+
+const VERSION_RE = /\/\*\s*([^*]+?)\s*\*\//;
+const SEMVER_RE = /(\d+\.\d+(?:\.\d+)?)/;
+const DATE_RE = /\*-\s*(\d{1,2})\/(\d{1,2})\/(\d{4})\s*-\*/;
+const TAG_GROUP_RE = /^\s*\/#(.*?)#\/\s*/;
+const MARKERS_RE = /\/\*|\*\/|\*-|-\*|\*_|_\*|\/#|#\//g;
+
+const dateFormatter = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
+
+function cleanText(text) {
+    return String(text || '').replace(MARKERS_RE, '').replace(/\s+/g, ' ').trim();
+}
+
+function parseDate(text) {
+    const match = DATE_RE.exec(text || '');
+    if (!match) return null;
+    const day = Number(match[1]);
+    const month = Number(match[2]);
+    const year = Number(match[3]);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    // Rejette les dates impossibles (31/02…)
+    if (date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day) return null;
+    return {
+        iso: `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+        label: dateFormatter.format(new Date(year, month - 1, day))
+    };
+}
+
+function parseItem(li) {
+    const raw = li.textContent || '';
+    const group = TAG_GROUP_RE.exec(raw);
+    const tags = [];
+    let rest = raw;
+    if (group) {
+        for (const tag of group[1].matchAll(/\[([A-Z]+)\]/g)) {
+            if (!tags.includes(tag[1])) tags.push(tag[1]);
+        }
+        rest = raw.slice(group[0].length);
+    }
+    return { text: cleanText(rest), tags };
+}
+
+/**
+ * Analyse le contenu de CHANGELOG.html.
+ * @param {string} html
+ * @returns {Array<{version: string, title: string, date: {iso: string, label: string}|null, current: boolean, items: Array<{text: string, tags: string[]}>}>}
+ */
+export function parseChangelog(html) {
+    if (typeof html !== 'string' || html.trim() === '') return [];
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const entries = [];
+
+    doc.querySelectorAll('.changelog-version').forEach((block, index) => {
+        const heading = block.querySelector('h1, h2, h3');
+        const headingText = heading?.textContent || '';
+        const version = (VERSION_RE.exec(headingText)?.[1] || SEMVER_RE.exec(headingText)?.[1] || '').trim();
+        // « Chopin - Version 1.4.0 » → « Chopin »
+        const title = cleanText(headingText.replace(VERSION_RE, '')).replace(/\s*-?\s*Version\s*$/i, '').trim();
+        const items = Array.from(block.querySelectorAll('li'))
+            .map(parseItem)
+            .filter((item) => item.text !== '');
+
+        entries.push({
+            version: version || `#${index + 1}`,
+            title,
+            date: parseDate(block.textContent),
+            current: block.classList.contains('changelog-actual'),
+            items
+        });
+    });
+
+    return entries;
+}
+
+function readSeen() {
+    try {
+        return localStorage.getItem(SEEN_KEY);
+    } catch {
+        return null;
+    }
+}
+
+// === État partagé (module) ===
+const entries = shallowRef(null);
+const status = ref('idle'); // idle | loading | ready | empty | error
+const seenVersion = ref(readSeen());
+let pending = null;
+
+const latest = computed(() => {
+    const list = entries.value;
+    if (!list || list.length === 0) return null;
+    return list.find((entry) => entry.current) || list[0];
+});
+
+const latestVersion = computed(() => latest.value?.version ?? null);
+const hasUnseen = computed(() => !!latestVersion.value && seenVersion.value !== latestVersion.value);
+
+function load(force = false) {
+    if (pending) return pending;
+    if (!force && (status.value === 'ready' || status.value === 'empty')) return Promise.resolve(entries.value);
+
+    status.value = 'loading';
+    pending = IORequestAsync('/CHANGELOG', undefined, 10000)
+        .then((data) => {
+            if (typeof data !== 'string') {
+                // false : pas de fichier côté serveur ; null : pas de réponse
+                status.value = data === false ? 'empty' : 'error';
+                if (data === false) entries.value = [];
+                return entries.value;
+            }
+            let parsed = [];
+            try {
+                parsed = parseChangelog(data);
+            } catch (error) {
+                console.error('Changelog : analyse impossible', error);
+                status.value = 'error';
+                return entries.value;
+            }
+            entries.value = parsed;
+            status.value = parsed.length ? 'ready' : 'empty';
+            return parsed;
+        })
+        .finally(() => {
+            pending = null;
+        });
+    return pending;
+}
+
+function markSeen() {
+    const version = latestVersion.value;
+    if (!version) return;
+    seenVersion.value = version;
+    try {
+        localStorage.setItem(SEEN_KEY, version);
+    } catch {
+        // Stockage indisponible (navigation privée…) : le badge reviendra au prochain chargement
+    }
+}
+
+export function useChangelog() {
+    return { entries, status, latest, latestVersion, hasUnseen, seenVersion, load, markSeen };
+}
diff --git a/src/components/Widget/View/Home/tips.js b/src/components/Widget/View/Home/tips.js
new file mode 100644
index 0000000..7279186
--- /dev/null
+++ b/src/components/Widget/View/Home/tips.js
@@ -0,0 +1,77 @@
+/**
+ * Conseils affichés sur l'accueil (« Conseil du moment ») et dans la vue « Conseils ».
+ * Les icônes sont des chaînes FontAwesome complètes (préfixe compris : fa-solid / fa-brands).
+ */
+export const TIPS = Object.freeze([
+    {
+        text: "Les recherches acceptent aussi les liens YouTube, YouTube Music, SoundCloud et Spotify.",
+        icon: "fa-solid fa-magnifying-glass"
+    },
+    {
+        text: "Jouez vos propres musiques : ouvrez « Mes fichiers » avec le petit nuage à côté de la barre de recherche.",
+        icon: "fa-solid fa-cloud-arrow-up"
+    },
+    {
+        text: "Affichez les paroles synchronisées du titre en cours avec le bouton micro du lecteur.",
+        icon: "fa-solid fa-microphone-lines"
+    },
+    {
+        text: "Faites attention à ne pas couper la musique de quelqu'un d'autre lorsque vous lancez un titre.",
+        icon: "fa-solid fa-triangle-exclamation"
+    },
+    {
+        text: "Liez votre compte YouTube dans Paramètres → Comptes connectés pour importer vos playlists, même privées.",
+        icon: "fa-brands fa-youtube"
+    },
+    {
+        text: "Vous devez être dans un salon vocal du serveur pour que le bot vous rejoigne.",
+        icon: "fa-solid fa-headset"
+    },
+    {
+        text: "Triez vos playlists par nom, date, nombre de titres ou durée, ou rangez-les à la main par glisser-déposer.",
+        icon: "fa-solid fa-arrow-down-wide-short"
+    },
+    {
+        text: "Le propriétaire du serveur peut activer les playlists partagées depuis « Gestion » : tout le monde en profite.",
+        icon: "fa-solid fa-people-group"
+    },
+    {
+        text: "Ajoutez vos titres préférés à une playlist personnelle pour les retrouver facilement.",
+        icon: "fa-solid fa-heart"
+    },
+    {
+        text: "Activez le mode aléatoire pour varier les plaisirs et redécouvrir votre file d'attente.",
+        icon: "fa-solid fa-shuffle"
+    },
+    {
+        text: "Toute l'interface se pilote au clavier : Tab pour naviguer, Entrée pour valider, Échap pour fermer une fenêtre.",
+        icon: "fa-solid fa-keyboard"
+    },
+    {
+        text: "Un bug, un souci ou une idée ? Envoyez un rapport depuis Paramètres → Support.",
+        icon: "fa-solid fa-bug"
+    },
+    {
+        text: "Thème clair ou sombre ? Changez-le à tout moment dans les paramètres.",
+        icon: "fa-solid fa-palette"
+    },
+    {
+        text: "Votre playlist déchire ? Partagez-la sur le serveur depuis ses paramètres.",
+        icon: "fa-solid fa-share-nodes"
+    }
+]);
+
+/**
+ * Copie mélangée (Fisher-Yates) : ne modifie jamais la liste source.
+ * @template T
+ * @param {T[]} list
+ * @returns {T[]}
+ */
+export function shuffled(list) {
+    const copy = [...list];
+    for (let i = copy.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy;
+}
diff --git a/src/components/Widget/View/Home/useHistory.js b/src/components/Widget/View/Home/useHistory.js
new file mode 100644
index 0000000..cb71704
--- /dev/null
+++ b/src/components/Widget/View/Home/useHistory.js
@@ -0,0 +1,61 @@
+/**
+ * Historique personnel (/USER/HISTORY), partagé par l'accueil et la vue « Historique ».
+ * - Une seule requête en vol ; une relance si un nouveau changement survient entre-temps.
+ * - Rechargé quand le morceau courant change (pas à chaque mise à jour du player).
+ * À appeler dans setup().
+ */
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { IORequestAsync } from '@/utils/IORequest';
+import { usePlayerStore } from '@/stores/playerStore';
+
+export function useHistory() {
+    const playerStore = usePlayerStore();
+
+    const history = ref([]);
+    const loading = ref(true);
+    // true quand la dernière requête n'a reçu aucune réponse (délai dépassé)
+    const failed = ref(false);
+
+    let mounted = false;
+    let requestInFlight = false;
+    let requestAgain = false;
+
+    // Le serveur renvoie du plus ancien au plus récent : copie inversée (jamais le tableau source)
+    const recent = computed(() => (Array.isArray(history.value) ? [...history.value].reverse() : []));
+
+    async function refresh() {
+        if (requestInFlight) {
+            requestAgain = true;
+            return;
+        }
+        requestInFlight = true;
+        loading.value = true;
+        const data = await IORequestAsync('/USER/HISTORY', undefined, 10000);
+        requestInFlight = false;
+        if (!mounted) return;
+        loading.value = false;
+        failed.value = data === null;
+        if (data !== null) history.value = Array.isArray(data) ? data.filter((entry) => entry && typeof entry === 'object') : [];
+        if (requestAgain) {
+            requestAgain = false;
+            refresh();
+        }
+    }
+
+    onMounted(() => {
+        mounted = true;
+        refresh();
+    });
+
+    onUnmounted(() => {
+        mounted = false;
+    });
+
+    // undefined = aucun état reçu : le premier état ne déclenche rien (déjà chargé au montage)
+    watch(() => (playerStore.hasState ? (playerStore.current?.id ?? null) : undefined), (newId, oldId) => {
+        if (oldId === undefined || newId === undefined) return;
+        refresh();
+    });
+
+    return { history, recent, loading, failed, refresh };
+}
diff --git a/src/components/Widget/View/Home/userSettingsOpener.js b/src/components/Widget/View/Home/userSettingsOpener.js
new file mode 100644
index 0000000..2db8f9f
--- /dev/null
+++ b/src/components/Widget/View/Home/userSettingsOpener.js
@@ -0,0 +1,61 @@
+/**
+ * Ouverture des paramètres utilisateur depuis n'importe où : Events.emit('USER_SETTINGS_OPEN', section?).
+ *
+ * Account.vue (bureau) et AccountMobile.vue (carrousel mobile) possèdent chacun leur modale de paramètres
+ * et peuvent être montés en même temps : sans arbitrage, les deux s'ouvriraient. Chaque instance se porte
+ * candidate pendant l'émission (synchrone) ; une micro-tâche choisit ensuite la seule à ouvrir :
+ * la première visible à l'écran, sinon la première inscrite.
+ *
+ * `section` : chaîne ('accounts' = Comptes connectés) ou objet { section }.
+ */
+import { onBeforeUnmount } from 'vue';
+import Events from '@/utils/Events';
+
+export const USER_SETTINGS_OPEN = 'USER_SETTINGS_OPEN';
+
+let candidates = [];
+let requestedSection;
+let scheduled = false;
+
+function normalizeSection(arg) {
+    if (typeof arg === 'string' && arg.trim() !== '') return arg.trim();
+    if (arg && typeof arg === 'object' && typeof arg.section === 'string') return arg.section;
+    return undefined;
+}
+
+function isVisible(element) {
+    return !!element && element.isConnected && element.getClientRects().length > 0;
+}
+
+function flush() {
+    const list = candidates;
+    const section = requestedSection;
+    candidates = [];
+    requestedSection = undefined;
+    scheduled = false;
+    if (list.length === 0) return;
+    const chosen = list.find((candidate) => isVisible(candidate.getElement())) || list[0];
+    chosen.open(section);
+}
+
+/**
+ * @param {() => Element|null} getElement Élément racine du composant (pour savoir s'il est visible)
+ * @param {(section?: string) => void} open Ouvre la modale de paramètres de ce composant
+ */
+export function useUserSettingsOpener(getElement, open) {
+    const candidate = { getElement, open };
+    const handler = (arg) => {
+        if (!candidates.includes(candidate)) candidates.push(candidate);
+        if (requestedSection === undefined) requestedSection = normalizeSection(arg);
+        if (!scheduled) {
+            scheduled = true;
+            queueMicrotask(flush);
+        }
+    };
+
+    Events.on(USER_SETTINGS_OPEN, handler);
+    onBeforeUnmount(() => {
+        Events.off(USER_SETTINGS_OPEN, handler);
+        candidates = candidates.filter((item) => item !== candidate);
+    });
+}
diff --git a/src/components/Widget/View/LoadingView.vue b/src/components/Widget/View/LoadingView.vue
index 84a3a3d..a7bfd43 100644
--- a/src/components/Widget/View/LoadingView.vue
+++ b/src/components/Widget/View/LoadingView.vue
@@ -1,14 +1,16 @@
 <template>
-    <div class="loading">
-        <div class="loading-content">
-        <Icon icon="fa-solid fa-spinner" spin-pulse />
+    <div class="loading" role="status" aria-live="polite">
+        <span class="loading-ring" aria-hidden="true"></span>
         <span class="message">{{ message }}</span>
-        </div>
         <span class="second">Un peu de patience, le groupe se prépare !</span>
     </div>
 </template>
 <script setup>
-const props = defineProps({
+/**
+ * Écran de chargement de la vue centrale (recherche, fichiers, playlist…).
+ * Prop : message.
+ */
+defineProps({
     message: {
         type: String,
         default: 'Chargement en cours'
@@ -21,33 +23,48 @@ const props = defineProps({
     align-items: center;
     flex-direction: column;
     justify-content: center;
+    text-align: center;
     height: 100%;
-    font-size: 2rem;
     flex: 1;
-    gap: 10px;
-    color: var(--text-tertiary);
-}
-
-.loading-content {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.second {
-    font-size: 0.8rem;
+    gap: 12px;
+    padding: 0 16px;
     color: var(--text-secondary);
-    opacity: 0.8;
+    animation: u-fade-in var(--dur) ease-out;
+}
+
+.loading-ring {
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    border: 4px solid color-mix(in srgb, var(--main) 22%, transparent);
+    border-top-color: var(--main);
+    border-radius: 50%;
+    animation: u-spin 0.8s linear infinite;
 }
 
 .message {
-    font-size: 2rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text);
 }
 
-@media screen and (max-width: 768px), 
-       screen and (max-height: 607px) {
-    .message {
-        font-size: 0.8em;
+.second {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+/* Le chargement est une information : l'anneau continue de tourner, plus lentement */
+@media (prefers-reduced-motion: reduce) {
+    .loading-ring {
+        animation-duration: 1.6s !important;
+        animation-iteration-count: infinite !important;
     }
 }
-</style>
\ No newline at end of file
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .message {
+        font-size: 1.05rem;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Lyrics/LyricsSearchModal.vue b/src/components/Widget/View/Lyrics/LyricsSearchModal.vue
new file mode 100644
index 0000000..0194e94
--- /dev/null
+++ b/src/components/Widget/View/Lyrics/LyricsSearchModal.vue
@@ -0,0 +1,432 @@
+<template>
+    <Modal ref="modal" title="Rechercher d'autres paroles" icon="fa-solid fa-magnifying-glass" size="md" @close="onClose">
+        <form class="search-form" role="search" @submit.prevent="search()">
+            <Field
+                label="Artiste et titre"
+                hint="Par exemple : Daft Punk One More Time"
+                v-slot="{ id, describedby }"
+            >
+                <div class="search-row">
+                    <input
+                        :id="id"
+                        v-model="query"
+                        class="search-input"
+                        type="search"
+                        maxlength="200"
+                        autocomplete="off"
+                        spellcheck="false"
+                        data-autofocus
+                        :aria-describedby="describedby"
+                    />
+                    <Button
+                        class="search-submit"
+                        type="submit"
+                        icon="fa-solid fa-magnifying-glass"
+                        :loading="searching"
+                        :disabled="!trimmedQuery"
+                    >Rechercher</Button>
+                </div>
+            </Field>
+        </form>
+
+        <p v-if="statusText" :class="['search-status', { 'search-status--error': statusError }]" :role="statusError ? 'alert' : 'status'">
+            <Icon v-if="statusError" icon="fa-solid fa-circle-exclamation" aria-hidden="true" />
+            {{ statusText }}
+        </p>
+
+        <div v-if="searching && !results.length" class="search-skeleton" aria-hidden="true">
+            <span v-for="n in 4" :key="n" class="skeleton-row"></span>
+        </div>
+
+        <ul v-else-if="results.length" class="results" aria-label="Paroles trouvées">
+            <li v-for="candidate in results" :key="candidate.id">
+                <button
+                    type="button"
+                    class="result"
+                    :disabled="pickingId !== null"
+                    :aria-busy="pickingId === candidate.id ? 'true' : undefined"
+                    @click="pick(candidate)"
+                >
+                    <span :class="['result-chip', 'result-chip--' + kindOf(candidate)]" aria-hidden="true">
+                        <Icon :icon="kindIcon(candidate)" />
+                    </span>
+                    <span class="result-main">
+                        <span class="result-track">{{ candidate.track || 'Sans titre' }}</span>
+                        <span class="result-meta">
+                            {{ candidate.artist || 'Artiste inconnu' }}<template v-if="candidate.album"> · {{ candidate.album }}</template>
+                        </span>
+                    </span>
+                    <span class="result-side">
+                        <span v-if="pickingId === candidate.id" class="result-spinner" aria-hidden="true"></span>
+                        <template v-else>
+                            <span class="result-kind">{{ kindLabel(candidate) }}</span>
+                            <span v-if="candidate.duration" class="result-duration u-mono">
+                                <span class="sr-only">Durée </span>{{ formatTime(candidate.duration) }}
+                            </span>
+                            <span v-if="isSameDuration(candidate)" class="result-match" title="Même durée que le titre en cours">
+                                <Icon icon="fa-solid fa-check" aria-hidden="true" /> Durée identique
+                            </span>
+                        </template>
+                    </span>
+                </button>
+            </li>
+        </ul>
+
+        <EmptyState
+            v-else-if="searched && !searching && !statusError"
+            compact
+            icon="fa-solid fa-microphone-lines-slash"
+            title="Aucun résultat"
+        >
+            Essaie avec moins de mots, ou seulement le titre.
+        </EmptyState>
+
+        <p class="credit">Paroles fournies par <a href="https://lrclib.net" target="_blank" rel="noopener noreferrer">LRCLIB</a>, base libre et collaborative.</p>
+    </Modal>
+</template>
+<script setup>
+/**
+ * Recherche manuelle de paroles (LRCLIB) : /LYRICS/SEARCH puis /LYRICS/GET au choix d'un résultat.
+ * Ouvrir avec open({ query, songKey, duration }) ; émet `pick` (Result, songKey du titre au moment de l'ouverture).
+ */
+import { computed, ref } from 'vue';
+import Modal from '@/components/UI/Modal.vue';
+import Field from '@/components/UI/Field.vue';
+import Button from '@/components/UI/Button.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import { IORequestAck } from '@/utils/IORequest';
+import { formatTime } from './lyricsUtils';
+
+const emit = defineEmits(['pick']);
+
+const REQUEST_TIMEOUT = 20000;
+
+const modal = ref(null);
+const query = ref('');
+const results = ref([]);
+const searching = ref(false);
+const searched = ref(false);
+const pickingId = ref(null);
+const statusText = ref('');
+const statusError = ref(false);
+
+// Morceau visé au moment de l'ouverture (le choix lui reste associé même si le titre change)
+let targetKey = null;
+let targetDuration = 0;
+// Jeton de requête : une réponse arrivée après une nouvelle recherche ou la fermeture est ignorée
+let token = 0;
+
+const trimmedQuery = computed(() => query.value.trim());
+
+function setStatus(text, error = false) {
+    statusText.value = text;
+    statusError.value = error;
+}
+
+function open({ query: initial = '', songKey = null, duration = 0 } = {}) {
+    targetKey = songKey;
+    targetDuration = Number(duration) || 0;
+    // Même recherche que la dernière fois : on garde la liste déjà affichée
+    const reuse = initial === query.value && results.value.length > 0;
+    if (!reuse) {
+        query.value = initial;
+        results.value = [];
+        searched.value = false;
+        setStatus('');
+    }
+    modal.value?.open();
+    if (!reuse && trimmedQuery.value) search();
+}
+
+function onClose() {
+    token++;
+    searching.value = false;
+    pickingId.value = null;
+}
+
+function errorMessage(code) {
+    switch (code) {
+        case 'TIMEOUT': return "Le service de paroles ne répond pas. Réessaie dans un instant.";
+        case 'INVALID_PARAMS': return "Recherche invalide (200 caractères maximum).";
+        case 'NOT_FOUND': return "Ces paroles ne sont plus disponibles.";
+        default: return "Service de paroles indisponible pour le moment.";
+    }
+}
+
+async function search() {
+    const text = trimmedQuery.value.slice(0, 200);
+    if (!text) return;
+    const current = ++token;
+    searching.value = true;
+    setStatus('Recherche en cours…');
+    let reply = null;
+    let failure = null;
+    try {
+        reply = await IORequestAck('/LYRICS/SEARCH', { q: text }, REQUEST_TIMEOUT);
+    } catch (error) {
+        failure = error?.code === 'TIMEOUT' ? 'TIMEOUT' : 'UNAVAILABLE';
+    }
+    if (current !== token) return;
+    searching.value = false;
+    searched.value = true;
+    if (!failure && (!reply || reply.ok !== true || !Array.isArray(reply.results))) failure = reply?.error || 'UNAVAILABLE';
+    if (failure) {
+        results.value = [];
+        setStatus(errorMessage(failure), true);
+        return;
+    }
+    // Même durée que le titre en cours d'abord (presque toujours le bon enregistrement), ordre du serveur sinon
+    const valid = reply.results.filter((candidate) => candidate && Number.isSafeInteger(candidate.id));
+    results.value = [...valid.filter(isSameDuration), ...valid.filter((candidate) => !isSameDuration(candidate))];
+    const count = results.value.length;
+    setStatus(count ? `${count} résultat${count > 1 ? 's' : ''} : choisis celui qui correspond.` : '');
+}
+
+async function pick(candidate) {
+    if (pickingId.value !== null) return;
+    const current = ++token;
+    pickingId.value = candidate.id;
+    setStatus('Chargement des paroles…');
+    let reply = null;
+    let failure = null;
+    try {
+        reply = await IORequestAck('/LYRICS/GET', { id: candidate.id }, REQUEST_TIMEOUT);
+    } catch (error) {
+        failure = error?.code === 'TIMEOUT' ? 'TIMEOUT' : 'UNAVAILABLE';
+    }
+    if (current !== token) return;
+    pickingId.value = null;
+    if (!failure && (!reply || reply.ok !== true)) failure = reply?.error || 'UNAVAILABLE';
+    if (failure) {
+        setStatus(errorMessage(failure), true);
+        return;
+    }
+    setStatus('');
+    emit('pick', reply, targetKey);
+    modal.value?.close();
+}
+
+function kindOf(candidate) {
+    if (candidate.instrumental) return 'instrumental';
+    return candidate.synced ? 'synced' : 'plain';
+}
+
+function kindIcon(candidate) {
+    switch (kindOf(candidate)) {
+        case 'instrumental': return 'fa-solid fa-guitar';
+        case 'synced': return 'fa-solid fa-clock';
+        default: return 'fa-solid fa-align-left';
+    }
+}
+
+function kindLabel(candidate) {
+    switch (kindOf(candidate)) {
+        case 'instrumental': return 'Instrumental';
+        case 'synced': return 'Synchronisées';
+        default: return 'Texte seul';
+    }
+}
+
+// LRCLIB : une durée à ±2 s près est presque toujours le bon enregistrement
+function isSameDuration(candidate) {
+    return targetDuration > 0 && candidate.duration > 0 && Math.abs(candidate.duration - targetDuration) <= 2;
+}
+
+defineExpose({ open });
+</script>
+<style scoped>
+.search-form {
+    margin: 0;
+}
+
+.search-row {
+    display: flex;
+    align-items: stretch;
+    gap: 8px;
+}
+
+.search-input {
+    flex: 1;
+    min-width: 0;
+    min-height: 36px;
+    box-sizing: border-box;
+}
+
+.search-submit {
+    flex-shrink: 0;
+}
+
+.result-spinner {
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border: 2px solid color-mix(in srgb, var(--main) 25%, transparent);
+    border-top-color: var(--main);
+    border-radius: 50%;
+    animation: u-spin 0.75s linear infinite;
+}
+
+.search-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
+
+.search-status--error {
+    color: var(--text-error);
+}
+
+.results {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.result {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--tertiary);
+    color: var(--text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
+}
+
+.result:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--quaternary) 70%, var(--tertiary));
+    border-color: color-mix(in srgb, var(--main) 55%, transparent);
+}
+
+.result:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.result:disabled {
+    cursor: progress;
+}
+
+.result:disabled:not([aria-busy]) {
+    opacity: 0.6;
+}
+
+.result-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    border-radius: var(--radius-sm);
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+    color: var(--text-secondary);
+}
+
+.result-chip--synced {
+    background-color: var(--main-soft);
+    color: var(--main);
+}
+
+.result-main {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+
+.result-track {
+    font-weight: 600;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+}
+
+.result-meta {
+    font-size: 0.85em;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.result-side {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+    flex-shrink: 0;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+.result-kind {
+    font-weight: 500;
+}
+
+.result-match {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--text-success);
+    font-weight: 500;
+}
+
+.search-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.skeleton-row {
+    display: block;
+    height: 56px;
+    border-radius: var(--radius);
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--text) 6%, transparent) 0%,
+        color-mix(in srgb, var(--text) 12%, transparent) 50%,
+        color-mix(in srgb, var(--text) 6%, transparent) 100%);
+    background-size: 200% 100%;
+    animation: lyrics-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes lyrics-shimmer {
+    from { background-position: 100% 0; }
+    to { background-position: -100% 0; }
+}
+
+.credit {
+    margin: 4px 0 0 0;
+    font-size: 0.78em;
+    color: var(--text-secondary);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .search-row {
+        flex-direction: column;
+    }
+
+    .result {
+        gap: 10px;
+        padding: 10px;
+    }
+
+    .result-chip {
+        width: 30px;
+        height: 30px;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Lyrics/LyricsSynced.vue b/src/components/Widget/View/Lyrics/LyricsSynced.vue
new file mode 100644
index 0000000..2e9d5b2
--- /dev/null
+++ b/src/components/Widget/View/Lyrics/LyricsSynced.vue
@@ -0,0 +1,471 @@
+<template>
+    <div :class="['synced', { 'synced--seekable': seekable }]">
+        <div
+            ref="scroller"
+            class="synced-scroller"
+            :tabindex="seekable ? -1 : 0"
+            role="region"
+            aria-label="Paroles synchronisées"
+            @wheel.passive="pauseAutoScroll"
+            @touchstart.passive="pauseAutoScroll"
+            @touchmove.passive="pauseAutoScroll"
+            @pointerdown="onScrollerPointerDown"
+            @keydown="onScrollerKeydown"
+        >
+            <div class="synced-spacer" aria-hidden="true"></div>
+            <ol class="synced-lines" @focusout="onFocusOut">
+                <li
+                    v-for="(item, index) in items"
+                    :key="item.key"
+                    :ref="(el) => { lineEls[index] = el }"
+                    :class="lineClass(item, index)"
+                    :aria-hidden="item.gap ? 'true' : undefined"
+                >
+                    <!-- Pause instrumentale : trois points qui se remplissent jusqu'à la ligne suivante -->
+                    <span v-if="item.gap && index === active && gapLength(item) >= GAP_MIN" class="gap-dots">
+                        <span v-for="dot in 3" :key="dot" class="gap-dot" :style="dotStyle(dot - 1)"></span>
+                    </span>
+                    <button
+                        v-else-if="!item.gap && seekable"
+                        type="button"
+                        class="line-text"
+                        :tabindex="index === rovingIndex ? 0 : -1"
+                        :aria-current="index === active ? 'true' : undefined"
+                        :title="'Aller à ' + formatTime(item.t / 1000)"
+                        @click="onLineClick(item)"
+                        @keydown="onLineKeydown($event, index)"
+                        @focus="focusIndex = index"
+                    >{{ item.text }}</button>
+                    <span
+                        v-else-if="!item.gap"
+                        class="line-text"
+                        :aria-current="index === active ? 'true' : undefined"
+                    >{{ item.text }}</span>
+                </li>
+            </ol>
+            <div class="synced-spacer" aria-hidden="true"></div>
+        </div>
+
+        <Transition name="return">
+            <Button
+                v-if="paused && items.length"
+                class="return-button"
+                size="sm"
+                icon="fa-solid fa-location-crosshairs"
+                @click="returnToActive"
+            >Revenir à la ligne en cours</Button>
+        </Transition>
+
+        <!-- Annonce seulement sur action de l'utilisateur (retour à la ligne en cours) : lire chaque
+             ligne au fil de la chanson submergerait le lecteur d'écran ; la ligne active porte aria-current -->
+        <p class="sr-only" role="status" aria-atomic="true">{{ announced }}</p>
+    </div>
+</template>
+<script setup>
+/**
+ * Paroles synchronisées : ligne en cours mise en avant, défilement automatique centré
+ * (suspendu quelques secondes après un défilement manuel), clic sur une ligne = seek.
+ * Clavier (lignes cliquables) : Tab entre sur la ligne en cours, flèches / Début / Fin pour
+ * se déplacer, Entrée ou Espace pour y aller.
+ * Lecteurs d'écran : la ligne en cours porte aria-current ; rien n'est annoncé automatiquement.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import Button from '@/components/UI/Button.vue';
+import { findActiveIndex, formatTime } from './lyricsUtils';
+
+const props = defineProps({
+    // [{ t: ms, text }] triées (une ligne vide = pause)
+    lines: {
+        type: Array,
+        required: true
+    },
+    // Position effective (décalage déjà appliqué), en ms
+    positionMs: {
+        type: Number,
+        default: 0
+    },
+    seekable: {
+        type: Boolean,
+        default: false
+    },
+    // Taille du texte : seulement pour recentrer après un changement
+    size: {
+        type: String,
+        default: 'm'
+    }
+});
+
+const emit = defineEmits(['seek']);
+
+// Durée minimale d'une pause pour afficher les points (ms)
+const GAP_MIN = 4000;
+// Reprise du défilement automatique après une interaction manuelle (ms)
+const PAUSE_MS = 4000;
+const SCROLL_KEYS = ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '];
+// Touches qui font défiler la zone même quand le focus est sur une ligne
+const PAGE_KEYS = ['PageUp', 'PageDown'];
+
+const scroller = ref(null);
+// Éléments <li> par index (tableau simple : seulement pour mesurer / donner le focus)
+let lineEls = [];
+
+const paused = ref(false);
+const focusIndex = ref(null);
+const announced = ref('');
+let resumeTimer = null;
+
+// Lignes vides consécutives fusionnées ; intro ajoutée si la première ligne arrive tard
+const items = computed(() => {
+    const out = [];
+    const source = Array.isArray(props.lines) ? props.lines : [];
+    const firstText = source.find((line) => line && line.text && line.text.trim());
+    if (firstText && firstText.t >= GAP_MIN) out.push({ t: 0, text: '', gap: true });
+    for (const line of source) {
+        if (!line || !Number.isFinite(line.t)) continue;
+        const text = typeof line.text === 'string' ? line.text.trim() : '';
+        const gap = text === '';
+        if (gap && out.length && out[out.length - 1].gap) continue;
+        out.push({ t: line.t, text, gap });
+    }
+    return out.map((item, index) => ({ ...item, key: index, end: out[index + 1]?.t ?? null }));
+});
+
+const active = computed(() => findActiveIndex(items.value, props.positionMs));
+
+function isText(index) {
+    const item = items.value[index];
+    return !!item && !item.gap;
+}
+
+// Ligne de texte la plus proche (pour le tabindex itinérant quand la ligne active est une pause)
+function nearestText(index) {
+    for (let i = Math.max(0, index); i < items.value.length; i++) if (isText(i)) return i;
+    for (let i = Math.min(index, items.value.length - 1); i >= 0; i--) if (isText(i)) return i;
+    return -1;
+}
+
+const rovingIndex = computed(() => {
+    if (focusIndex.value !== null && isText(focusIndex.value)) return focusIndex.value;
+    return nearestText(active.value);
+});
+
+function lineClass(item, index) {
+    return {
+        line: true,
+        'line--gap': item.gap,
+        'line--past': index < active.value,
+        'line--active': index === active.value,
+        'line--upcoming': index > active.value
+    };
+}
+
+function gapLength(item) {
+    return item.end === null ? 0 : item.end - item.t;
+}
+
+// Remplissage progressif des trois points pendant la pause en cours
+function dotStyle(dot) {
+    const item = items.value[active.value];
+    if (!item || !item.gap) return null;
+    const length = gapLength(item);
+    const progress = length > 0 ? (props.positionMs - item.t) / length : 0;
+    const fill = Math.max(0, Math.min(1, progress * 3 - dot));
+    return { opacity: 0.25 + 0.75 * fill, transform: `scale(${0.8 + 0.2 * fill})` };
+}
+
+// === DÉFILEMENT ===
+function prefersReducedMotion() {
+    try {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    } catch {
+        return false;
+    }
+}
+
+function scrollToIndex(index, smooth) {
+    const container = scroller.value;
+    if (!container) return;
+    const element = index >= 0 ? lineEls[index] : null;
+    // Avant la première ligne : tout en haut
+    const top = element ? element.offsetTop + element.offsetHeight / 2 - container.clientHeight / 2 : 0;
+    container.scrollTo({ top: Math.max(0, top), behavior: smooth && !prefersReducedMotion() ? 'smooth' : 'auto' });
+}
+
+function pauseAutoScroll() {
+    if (!items.value.length) return;
+    paused.value = true;
+    clearTimeout(resumeTimer);
+    resumeTimer = setTimeout(autoResume, PAUSE_MS);
+}
+
+// Pas de reprise automatique tant que le clavier navigue dans les lignes
+function autoResume() {
+    if (focusIndex.value !== null) {
+        resumeTimer = setTimeout(autoResume, PAUSE_MS);
+        return;
+    }
+    resume(true);
+}
+
+function resume(smooth) {
+    clearTimeout(resumeTimer);
+    resumeTimer = null;
+    paused.value = false;
+    scrollToIndex(active.value, smooth);
+}
+
+// Bouton « Revenir à la ligne en cours » : le lecteur d'écran lit la ligne retrouvée
+function returnToActive() {
+    resume(true);
+    const item = items.value[active.value];
+    announced.value = item && !item.gap ? `Ligne en cours : ${item.text}` : 'Pause instrumentale';
+}
+
+// Clic sur la barre de défilement elle-même
+function onScrollerPointerDown(event) {
+    if (event.target === scroller.value) pauseAutoScroll();
+}
+
+function onScrollerKeydown(event) {
+    if (PAGE_KEYS.includes(event.key) || (event.target === scroller.value && SCROLL_KEYS.includes(event.key))) pauseAutoScroll();
+}
+
+// === LIGNES CLIQUABLES ===
+function onLineClick(item) {
+    emit('seek', item.t);
+    // Après un seek, on suit de nouveau la lecture
+    focusIndex.value = null;
+    resume(true);
+}
+
+function focusLine(index) {
+    const button = lineEls[index]?.querySelector('button');
+    if (!button) return;
+    focusIndex.value = index;
+    button.focus({ preventScroll: true });
+    pauseAutoScroll();
+    scrollToIndex(index, true);
+}
+
+function onLineKeydown(event, index) {
+    let target = -1;
+    switch (event.key) {
+        case 'ArrowDown':
+            for (let i = index + 1; i < items.value.length; i++) if (isText(i)) { target = i; break; }
+            break;
+        case 'ArrowUp':
+            for (let i = index - 1; i >= 0; i--) if (isText(i)) { target = i; break; }
+            break;
+        case 'Home':
+            target = nearestText(0);
+            break;
+        case 'End':
+            for (let i = items.value.length - 1; i >= 0; i--) if (isText(i)) { target = i; break; }
+            break;
+        default:
+            return;
+    }
+    event.preventDefault();
+    if (target !== -1) focusLine(target);
+}
+
+function onFocusOut(event) {
+    const list = event.currentTarget;
+    if (!event.relatedTarget || !list.contains(event.relatedTarget)) focusIndex.value = null;
+}
+
+// === RÉACTIONS ===
+watch(active, (index) => {
+    if (!paused.value) scrollToIndex(index, true);
+});
+
+// Nouvelles paroles : on repart de la ligne en cours, sans animation
+watch(items, () => {
+    lineEls = [];
+    focusIndex.value = null;
+    paused.value = false;
+    clearTimeout(resumeTimer);
+    announced.value = '';
+    nextTick(() => scrollToIndex(active.value, false));
+});
+
+watch(() => props.size, () => {
+    nextTick(() => {
+        if (!paused.value) scrollToIndex(active.value, false);
+    });
+});
+
+useResizeObserver(scroller, () => {
+    if (!paused.value) scrollToIndex(active.value, false);
+});
+
+onMounted(() => {
+    nextTick(() => scrollToIndex(active.value, false));
+});
+
+onBeforeUnmount(() => {
+    clearTimeout(resumeTimer);
+});
+
+defineExpose({
+    recenter: () => resume(false)
+});
+</script>
+<style scoped>
+.synced {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+/* Positionné en absolu : la hauteur des paroles ne fait pas grandir la grille de l'interface */
+.synced-scroller {
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+    /* La ligne active est agrandie (scale) : pas de barre horizontale pour autant */
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+    padding: 0 6px;
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
+    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
+}
+
+.synced-scroller:focus-visible {
+    outline-offset: -2px;
+}
+
+/* Marges haute et basse : la première et la dernière ligne peuvent être centrées */
+.synced-spacer {
+    height: 42%;
+}
+
+.synced-lines {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+    font-size: var(--lyrics-size, 1.35em);
+}
+
+.line {
+    position: relative;
+}
+
+/* Repère de la ligne en cours (en plus de la couleur) */
+.line::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0.5em;
+    bottom: 0.5em;
+    width: 3px;
+    border-radius: var(--radius-pill);
+    background-color: var(--main);
+    opacity: 0;
+    transform: scaleY(0.4);
+    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+
+.line--active:not(.line--gap)::before {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+.line-text {
+    display: block;
+    /* 96 % : la ligne active agrandie (× 1,04) tient toujours dans la largeur */
+    width: 96%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0.25em 0.5em 0.25em 0.7em;
+    border: none;
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    font-weight: 600;
+    line-height: 1.35;
+    letter-spacing: -0.01em;
+    text-align: left;
+    overflow-wrap: anywhere;
+    opacity: 0.75;
+    transform-origin: left center;
+    transition:
+        color 0.35s var(--ease),
+        opacity 0.35s var(--ease),
+        transform 0.35s var(--ease),
+        background-color var(--dur-fast) ease;
+}
+
+button.line-text {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+button.line-text:hover {
+    opacity: 1;
+    color: var(--text);
+    background-color: color-mix(in srgb, var(--text) 6%, transparent);
+}
+
+button.line-text:focus-visible {
+    outline: 2px solid var(--main);
+    outline-offset: 0;
+}
+
+.line--past .line-text {
+    opacity: 0.5;
+}
+
+.line--active .line-text {
+    color: var(--text);
+    opacity: 1;
+    transform: scale(1.04);
+}
+
+/* Pause : simple respiration entre deux lignes */
+.line--gap {
+    min-height: 0.35em;
+}
+
+.gap-dots {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35em;
+    padding: 0.45em 0.7em;
+}
+
+.gap-dot {
+    width: 0.42em;
+    height: 0.42em;
+    border-radius: 50%;
+    background-color: var(--text);
+    transition: opacity 0.2s linear, transform 0.2s linear;
+}
+
+.return-button {
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    box-shadow: var(--shadow-lg);
+    z-index: 2;
+    white-space: nowrap;
+}
+
+.return-enter-active,
+.return-leave-active {
+    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+
+.return-enter-from,
+.return-leave-to {
+    opacity: 0;
+    transform: translate(-50%, 8px);
+}
+</style>
diff --git a/src/components/Widget/View/Lyrics/lyricsUtils.js b/src/components/Widget/View/Lyrics/lyricsUtils.js
new file mode 100644
index 0000000..276630a
--- /dev/null
+++ b/src/components/Widget/View/Lyrics/lyricsUtils.js
@@ -0,0 +1,165 @@
+/**
+ * [Subsonics Chopin - Frontend]
+ * File: lyricsUtils.js
+ * Description: Outils de la vue des paroles (clé de morceau, recherche de ligne, préférences, mémoire de session)
+ */
+
+// Doit rester identique à songKeyOf() de backend/src/lyrics/Lyrics.js : sert à écarter
+// les réponses qui concernent un autre morceau que celui affiché
+export function songKeyOf(song) {
+    if (!song || typeof song !== 'object') return null;
+    const id = typeof song.id === 'number' ? String(song.id) : song.id;
+    if (typeof id === 'string' && id) return `${song.type}:${id}`;
+    if (typeof song.url === 'string' && song.url) return song.url;
+    return null;
+}
+
+// Index de la dernière entrée dont t <= ms (recherche dichotomique), -1 avant la première
+export function findActiveIndex(items, ms) {
+    let lo = 0;
+    let hi = items.length - 1;
+    let found = -1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (items[mid].t <= ms) {
+            found = mid;
+            lo = mid + 1;
+        } else {
+            hi = mid - 1;
+        }
+    }
+    return found;
+}
+
+// Secondes -> "m:ss" (ou "h:mm:ss")
+export function formatTime(seconds) {
+    const total = Math.max(0, Math.floor(Number(seconds) || 0));
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = String(total % 60).padStart(2, '0');
+    return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${s}` : `${m}:${s}`;
+}
+
+// Décalage en ms -> "+0,5 s" / "−1 s" / "0 s"
+export function formatOffset(ms) {
+    if (!ms) return '0 s';
+    const value = Math.abs(ms) / 1000;
+    const text = value.toLocaleString('fr-FR', { maximumFractionDigits: 1 });
+    return (ms > 0 ? '+' : '−') + text + ' s';
+}
+
+// Mentions parasites des titres YouTube (« (Official Video) », « [HD] »…)
+const NOISE = /\s*[([][^)\]]*\b(official|officiel(le)?|video|vidéo|clip|audio|lyrics?|paroles|visuali[sz]er|remaster(ed)?|hd|4k|hq|live|explicit)\b[^)\]]*[)\]]/gi;
+
+function cleanText(text) {
+    return String(text || '')
+        .replace(NOISE, ' ')
+        .replace(/\s+(ft\.?|feat\.?)\s.*$/i, '')
+        .replace(/\s*[|•].*$/, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+
+function cleanAuthor(author) {
+    return String(author || '')
+        .replace(/\s*-\s*topic$/i, '')
+        .replace(/vevo$/i, '')
+        .replace(/\bofficial\b/gi, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+
+/**
+ * Texte proposé dans la recherche manuelle : la correspondance trouvée si elle existe,
+ * sinon « artiste titre » deviné depuis le morceau.
+ */
+export function guessSearchQuery(song, result) {
+    const match = result && result.ok ? result.match : null;
+    if (match && match.track) return `${match.artist || ''} ${match.track}`.trim().slice(0, 200);
+    if (!song) return '';
+    const title = cleanText(song.title);
+    // « Artiste - Titre » : le titre contient déjà l'artiste
+    if (/\s[-–—]\s/.test(title)) return title.replace(/\s[-–—]\s/, ' ').slice(0, 200);
+    const author = cleanAuthor(song.author);
+    const unknown = !author || /^auteur inconnu$/i.test(author);
+    return (unknown ? title : `${author} ${title}`).trim().slice(0, 200);
+}
+
+// === PRÉFÉRENCES (propres à ce navigateur) ===
+const OFFSET_KEY = 'subsonics.lyrics.offset';
+const SIZE_KEY = 'subsonics.lyrics.size';
+
+export const OFFSET_STEP = 500;
+export const OFFSET_MAX = 10000;
+export const TEXT_SIZES = [
+    { value: 's', label: 'petite' },
+    { value: 'm', label: 'moyenne' },
+    { value: 'l', label: 'grande' },
+    { value: 'xl', label: 'très grande' }
+];
+
+function readStorage(key) {
+    try {
+        return window.localStorage.getItem(key);
+    } catch {
+        return null;
+    }
+}
+
+function writeStorage(key, value) {
+    try {
+        if (value === null) window.localStorage.removeItem(key);
+        else window.localStorage.setItem(key, value);
+    } catch {
+        // Stockage indisponible (navigation privée, quota) : la préférence vaut pour cette session seulement
+    }
+}
+
+export function loadOffset() {
+    const value = Number(readStorage(OFFSET_KEY));
+    if (!Number.isFinite(value)) return 0;
+    return Math.max(-OFFSET_MAX, Math.min(OFFSET_MAX, Math.round(value / 100) * 100));
+}
+
+export function saveOffset(ms) {
+    writeStorage(OFFSET_KEY, ms ? String(ms) : null);
+}
+
+export function loadTextSize() {
+    const value = readStorage(SIZE_KEY);
+    return TEXT_SIZES.some((size) => size.value === value) ? value : 'm';
+}
+
+export function saveTextSize(value) {
+    writeStorage(SIZE_KEY, value === 'm' ? null : value);
+}
+
+// === MÉMOIRE DE SESSION (perdue au rechargement de la page) ===
+// Choix manuels : songKey -> Result choisi dans la recherche
+export const manualPicks = new Map();
+
+// Résultats automatiques déjà reçus (rouvrir la vue ne refait pas la requête)
+const AUTO_CACHE_MAX = 30;
+const autoCache = new Map();
+
+export function getCachedLyrics(key) {
+    if (!key || !autoCache.has(key)) return null;
+    const value = autoCache.get(key);
+    // Réinsertion : l'entrée devient la plus récente
+    autoCache.delete(key);
+    autoCache.set(key, value);
+    return value;
+}
+
+export function setCachedLyrics(key, value) {
+    if (!key) return;
+    autoCache.delete(key);
+    autoCache.set(key, value);
+    while (autoCache.size > AUTO_CACHE_MAX) {
+        autoCache.delete(autoCache.keys().next().value);
+    }
+}
+
+export function forgetCachedLyrics(key) {
+    autoCache.delete(key);
+}
diff --git a/src/components/Widget/View/LyricsView.vue b/src/components/Widget/View/LyricsView.vue
new file mode 100644
index 0000000..2b09345
--- /dev/null
+++ b/src/components/Widget/View/LyricsView.vue
@@ -0,0 +1,906 @@
+<template>
+    <section :class="['lyrics', `lyrics--size-${textSize}`]" :aria-labelledby="titleId">
+        <div v-if="coverStyle" class="lyrics-backdrop" :style="coverStyle" aria-hidden="true"></div>
+
+        <!-- EN-TÊTE : morceau en cours + origine des paroles -->
+        <header class="lyrics-head">
+            <div class="lyrics-cover">
+                <img v-if="cover" :src="cover" alt="" loading="lazy" referrerpolicy="no-referrer" />
+                <span v-else class="lyrics-cover-fallback" aria-hidden="true"><Icon icon="fa-solid fa-music" /></span>
+            </div>
+            <div class="lyrics-meta">
+                <p class="lyrics-eyebrow"><Icon icon="fa-solid fa-microphone-lines" aria-hidden="true" /> Paroles</p>
+                <h2 :id="titleId" class="lyrics-title" :title="song ? song.title : null">{{ song ? song.title : 'Aucun titre en cours' }}</h2>
+                <p v-if="song" class="lyrics-artist">{{ song.author }}</p>
+                <div v-if="tags.length" class="lyrics-tags">
+                    <Tag v-for="tag in tags" :key="tag.key" :tone="tag.tone" :icon="tag.icon" :title="tag.title">{{ tag.text }}</Tag>
+                </div>
+            </div>
+        </header>
+
+        <!-- BARRE D'OUTILS -->
+        <div v-if="song" class="lyrics-toolbar">
+            <div v-if="kind === 'synced'" class="tool-group" role="group" aria-label="Synchronisation des paroles">
+                <button
+                    type="button"
+                    class="tool-btn"
+                    :disabled="offsetMs <= -OFFSET_MAX"
+                    :aria-label="`Retarder les paroles de 0,5 seconde`"
+                    title="Retarder les paroles (−0,5 s)"
+                    @click="changeOffset(-OFFSET_STEP)"
+                ><Icon icon="fa-solid fa-minus" aria-hidden="true" /></button>
+                <button
+                    type="button"
+                    :class="['tool-value', { 'tool-value--set': offsetMs !== 0 }]"
+                    :disabled="offsetMs === 0"
+                    :aria-label="offsetMs === 0 ? 'Décalage : aucun' : `Décalage : ${formatOffset(offsetMs)}, remettre à zéro`"
+                    :title="offsetMs === 0 ? 'Décalage des paroles' : 'Remettre le décalage à zéro'"
+                    @click="resetOffset"
+                >
+                    <Icon icon="fa-solid fa-stopwatch" aria-hidden="true" />
+                    <span class="u-mono">{{ formatOffset(offsetMs) }}</span>
+                </button>
+                <button
+                    type="button"
+                    class="tool-btn"
+                    :disabled="offsetMs >= OFFSET_MAX"
+                    aria-label="Avancer les paroles de 0,5 seconde"
+                    title="Avancer les paroles (+0,5 s)"
+                    @click="changeOffset(OFFSET_STEP)"
+                ><Icon icon="fa-solid fa-plus" aria-hidden="true" /></button>
+            </div>
+
+            <div v-if="kind === 'synced' || kind === 'plain'" class="tool-group" role="group" :aria-label="`Taille du texte : ${sizeLabel}`">
+                <button
+                    type="button"
+                    class="tool-btn tool-btn--text"
+                    :disabled="sizeIndex === 0"
+                    aria-label="Réduire la taille du texte"
+                    title="Texte plus petit"
+                    @click="changeSize(-1)"
+                ><span class="glyph glyph--small" aria-hidden="true">A</span></button>
+                <button
+                    type="button"
+                    class="tool-btn tool-btn--text"
+                    :disabled="sizeIndex === TEXT_SIZES.length - 1"
+                    aria-label="Agrandir la taille du texte"
+                    title="Texte plus grand"
+                    @click="changeSize(1)"
+                ><span class="glyph glyph--large" aria-hidden="true">A</span></button>
+            </div>
+
+            <div class="tool-spacer"></div>
+
+            <Button
+                v-if="manual"
+                variant="ghost"
+                size="sm"
+                icon="fa-solid fa-rotate-left"
+                @click="clearManualPick"
+            >Choix automatique</Button>
+            <Button
+                variant="secondary"
+                size="sm"
+                icon="fa-solid fa-magnifying-glass"
+                @click="openSearch"
+            >Rechercher d'autres paroles</Button>
+        </div>
+
+        <!-- PAROLES -->
+        <div class="lyrics-stage">
+            <div v-if="phase === 'waiting' || phase === 'loading'" class="lyrics-skeleton" role="status">
+                <span class="sr-only">Recherche des paroles…</span>
+                <span v-for="(width, index) in SKELETON" :key="index" class="skeleton-line" :style="{ width: width + '%' }" aria-hidden="true"></span>
+            </div>
+
+            <EmptyState v-else-if="phase === 'nomusic'" icon="fa-solid fa-microphone-lines-slash" :title="noMusicView.title">
+                {{ noMusicView.text }}
+            </EmptyState>
+
+            <EmptyState v-else-if="phase === 'error'" :icon="errorView.icon" :title="errorView.title">
+                {{ errorView.text }}
+                <template #actions>
+                    <Button v-if="errorView.retry" icon="fa-solid fa-rotate-right" @click="retry">Réessayer</Button>
+                    <Button
+                        v-if="song"
+                        :variant="errorView.retry ? 'secondary' : 'primary'"
+                        icon="fa-solid fa-magnifying-glass"
+                        @click="openSearch"
+                    >Rechercher manuellement</Button>
+                </template>
+            </EmptyState>
+
+            <EmptyState v-else-if="kind === 'instrumental'" icon="fa-solid fa-guitar" title="Morceau instrumental">
+                Pas de paroles sur ce titre : profite de la musique.
+            </EmptyState>
+
+            <LyricsSynced
+                v-else-if="kind === 'synced'"
+                :lines="result.lines"
+                :position-ms="effectiveMs"
+                :seekable="playerStore.seekable"
+                :size="textSize"
+                @seek="seekTo"
+            />
+
+            <div v-else class="lyrics-plain">
+                <div class="lyrics-plain-scroller" tabindex="0" role="region" aria-label="Paroles">
+                    <p class="lyrics-plain-note">
+                        <Icon icon="fa-solid fa-circle-info" aria-hidden="true" />
+                        Paroles non synchronisées : elles ne suivent pas la lecture.
+                    </p>
+                    <p v-for="(paragraph, index) in paragraphs" :key="index" class="lyrics-paragraph">{{ paragraph }}</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Origine des paroles (crédit de la base libre) + astuce -->
+        <p v-if="credit" class="lyrics-credit">
+            Paroles fournies par
+            <a :href="credit.url" target="_blank" rel="noopener noreferrer">{{ credit.name }}</a>
+            <template v-if="kind === 'synced' && playerStore.seekable">
+                <span aria-hidden="true">·</span> Choisis une ligne pour t'y rendre
+            </template>
+        </p>
+
+        <!-- Message ponctuel (seek refusé…) -->
+        <div class="lyrics-notice-region" role="status" aria-live="polite">
+            <Transition name="notice">
+                <p v-if="notice" class="lyrics-notice">
+                    <Icon icon="fa-solid fa-circle-exclamation" aria-hidden="true" />
+                    {{ notice }}
+                </p>
+            </Transition>
+        </div>
+
+        <LyricsSearchModal ref="searchModal" @pick="onPick" />
+    </section>
+</template>
+<script setup>
+/**
+ * Vue des paroles du morceau en cours (suit le player en direct).
+ * - /PLAYER/LYRICS à chaque changement de morceau (réponse d'un autre morceau ignorée via songKey).
+ * - Paroles synchronisées : position extrapolée finement (playerStore.positionAt) + décalage réglable.
+ * - Recherche manuelle (LRCLIB) : le choix est retenu pour ce morceau jusqu'au rechargement de la page.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from 'vue';
+import { usePlayerStore } from '@/stores/playerStore';
+import { IORequestAck, IORequestAsync } from '@/utils/IORequest';
+import Tag from '@/components/UI/Tag.vue';
+import Button from '@/components/UI/Button.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import LyricsSynced from './Lyrics/LyricsSynced.vue';
+import LyricsSearchModal from './Lyrics/LyricsSearchModal.vue';
+import {
+    songKeyOf,
+    formatOffset,
+    guessSearchQuery,
+    loadOffset,
+    saveOffset,
+    loadTextSize,
+    saveTextSize,
+    manualPicks,
+    getCachedLyrics,
+    setCachedLyrics,
+    forgetCachedLyrics,
+    OFFSET_STEP,
+    OFFSET_MAX,
+    TEXT_SIZES
+} from './Lyrics/lyricsUtils';
+
+const playerStore = usePlayerStore();
+
+const REQUEST_TIMEOUT = 20000;
+// Nouvel essai quand le serveur répond pour un autre morceau (état pas encore reçu ici)
+const MISMATCH_RETRY_MS = 1500;
+const MISMATCH_RETRIES = 2;
+// Rafraîchissement de la position pendant la lecture (ms)
+const FRAME_MS = 80;
+const NOTICE_MS = 5000;
+const SKELETON = [72, 54, 86, 40, 66, 78, 48, 60, 70];
+
+const titleId = `lyrics-title-${useId()}`;
+const searchModal = ref(null);
+
+// waiting (aucun état player) | nomusic | loading | ready | error
+const phase = ref('waiting');
+const result = shallowRef(null);
+const errorCode = ref(null);
+const manual = ref(false);
+const notice = ref('');
+
+const offsetMs = ref(loadOffset());
+const textSize = ref(loadTextSize());
+
+let token = 0;
+// Vrai dès le setup : le premier chargement part avant le montage
+let mounted = true;
+let retryTimer = null;
+let noticeTimer = null;
+
+// === MORCEAU EN COURS ===
+const song = computed(() => playerStore.current);
+const songKey = computed(() => songKeyOf(song.value));
+
+const cover = computed(() => {
+    const url = song.value?.thumbnail;
+    return typeof url === 'string' && /^https?:\/\//i.test(url) ? url : null;
+});
+
+// JSON.stringify échappe guillemets et antislashs : chaîne CSS sûre
+const coverStyle = computed(() => (cover.value ? { backgroundImage: `url(${JSON.stringify(cover.value)})` } : null));
+
+// synced | plain | instrumental | null
+const kind = computed(() => {
+    if (phase.value !== 'ready' || !result.value) return null;
+    const r = result.value;
+    if (r.instrumental) return 'instrumental';
+    if (r.synced && Array.isArray(r.lines) && r.lines.length) return 'synced';
+    if (typeof r.plain === 'string' && r.plain.trim()) return 'plain';
+    return 'instrumental';
+});
+
+const paragraphs = computed(() => {
+    const text = result.value?.plain;
+    if (typeof text !== 'string') return [];
+    return text.split(/\n\s*\n/).map((part) => part.trim()).filter(Boolean);
+});
+
+const tags = computed(() => {
+    const list = [];
+    if (phase.value === 'loading') {
+        list.push({ key: 'loading', tone: 'default', icon: 'fa-solid fa-hourglass-half', text: 'Recherche…', title: 'Recherche des paroles en cours' });
+        return list;
+    }
+    if (phase.value !== 'ready' || !result.value) return list;
+    const r = result.value;
+    const source = r.source === 'lyrics.ovh' ? 'lyrics.ovh' : 'LRCLIB';
+    const match = r.match || {};
+    const matchText = match.track ? `« ${match.track} »${match.artist ? ' de ' + match.artist : ''}${match.album ? ' (' + match.album + ')' : ''}` : '';
+    list.push({ key: 'source', tone: 'main', icon: 'fa-solid fa-database', text: source, title: `Paroles fournies par ${source}${matchText ? ' : ' + matchText : ''}` });
+    if (kind.value === 'synced') list.push({ key: 'kind', tone: 'success', icon: 'fa-solid fa-clock', text: 'Synchronisées', title: 'Les paroles suivent la lecture' });
+    else if (kind.value === 'plain') list.push({ key: 'kind', tone: 'default', icon: 'fa-solid fa-align-left', text: 'Texte seul', title: 'Paroles sans minutage' });
+    else list.push({ key: 'kind', tone: 'default', icon: 'fa-solid fa-guitar', text: 'Instrumental', title: 'Morceau sans paroles' });
+    if (manual.value) list.push({ key: 'manual', tone: 'info', icon: 'fa-solid fa-hand-pointer', text: 'Choix manuel', title: matchText ? 'Choisi à la main : ' + matchText : 'Choisi à la main' });
+    return list;
+});
+
+const SOURCES = {
+    lrclib: { name: 'LRCLIB', url: 'https://lrclib.net' },
+    'lyrics.ovh': { name: 'lyrics.ovh', url: 'https://lyrics.ovh' }
+};
+
+const credit = computed(() => {
+    if (phase.value !== 'ready' || !result.value || kind.value === 'instrumental') return null;
+    return SOURCES[result.value.source] || SOURCES.lrclib;
+});
+
+const noMusicView = computed(() => (playerStore.online
+    ? { title: 'Aucun titre en cours', text: "Lance un titre : ses paroles s'afficheront ici et suivront la lecture." }
+    : { title: "Subsonics n'est pas connecté", text: 'Rejoins un salon vocal puis lance un titre pour afficher ses paroles.' }));
+
+const errorView = computed(() => {
+    switch (errorCode.value) {
+        case 'NOT_FOUND':
+            return { icon: 'fa-solid fa-magnifying-glass', title: 'Paroles introuvables', text: "Aucune parole n'a été trouvée pour ce titre. Une recherche manuelle donne souvent de meilleurs résultats.", retry: false };
+        case 'INVALID_PARAMS':
+            return { icon: 'fa-solid fa-circle-question', title: 'Titre non reconnu', text: "Impossible d'identifier l'artiste et le titre de ce morceau. Essaie la recherche manuelle.", retry: false };
+        case 'NO_MUSIC':
+            return { icon: 'fa-solid fa-microphone-lines-slash', title: 'Aucun titre en cours', text: "Le serveur n'a pas de titre en cours de lecture pour le moment.", retry: true };
+        case 'TIMEOUT':
+            return { icon: 'fa-solid fa-hourglass-half', title: 'Le service met trop de temps', text: 'Le service de paroles ne répond pas. Réessaie dans quelques instants.', retry: true };
+        default:
+            return { icon: 'fa-solid fa-cloud-bolt', title: 'Service de paroles indisponible', text: 'Les paroles ne peuvent pas être récupérées pour le moment. Réessaie dans quelques instants.', retry: true };
+    }
+});
+
+// === CHARGEMENT ===
+function show(value, isManual) {
+    clearTimeout(retryTimer);
+    result.value = value;
+    manual.value = isManual;
+    errorCode.value = null;
+    phase.value = 'ready';
+}
+
+function fail(code) {
+    clearTimeout(retryTimer);
+    result.value = null;
+    manual.value = false;
+    errorCode.value = code || 'UNAVAILABLE';
+    phase.value = 'error';
+}
+
+// Charge les paroles du morceau en cours (clé null = morceau sans identifiant : accepté tel quel)
+function load({ force = false, attempt = 0 } = {}) {
+    const current = ++token;
+    const key = songKey.value;
+    clearTimeout(retryTimer);
+    if (!playerStore.hasState) {
+        result.value = null;
+        phase.value = 'waiting';
+        return;
+    }
+    if (!song.value) {
+        result.value = null;
+        manual.value = false;
+        phase.value = 'nomusic';
+        return;
+    }
+    const picked = key ? manualPicks.get(key) : null;
+    if (picked) return show(picked, true);
+    if (!force) {
+        const cached = getCachedLyrics(key);
+        if (cached) return cached.ok ? show(cached, false) : fail(cached.error);
+    }
+    result.value = null;
+    manual.value = false;
+    errorCode.value = null;
+    phase.value = 'loading';
+    fetchLyrics(current, key, attempt);
+}
+
+async function fetchLyrics(current, key, attempt) {
+    let reply = null;
+    let failure = null;
+    try {
+        reply = await IORequestAck('/PLAYER/LYRICS', undefined, REQUEST_TIMEOUT);
+    } catch (error) {
+        failure = error?.code === 'TIMEOUT' ? 'TIMEOUT' : 'UNAVAILABLE';
+    }
+    // Réponse devenue inutile (autre morceau, vue fermée) : gardée en cache si elle est exploitable
+    if (!mounted || current !== token) {
+        if (reply && reply.ok === true && reply.songKey) setCachedLyrics(reply.songKey, reply);
+        return;
+    }
+    if (failure) return fail(failure);
+    if (!reply || typeof reply !== 'object' || typeof reply.ok !== 'boolean') return fail('UNAVAILABLE');
+
+    // Le serveur parle d'un autre morceau, ou n'en a plus : l'état poussé va suivre, on réessaie un peu plus tard
+    const otherSong = reply.songKey && key && reply.songKey !== key;
+    if (otherSong || (reply.ok === false && reply.error === 'NO_MUSIC')) {
+        if (otherSong && reply.ok) setCachedLyrics(reply.songKey, reply);
+        if (attempt >= MISMATCH_RETRIES) return fail(reply.ok ? 'UNAVAILABLE' : reply.error);
+        retryTimer = setTimeout(() => {
+            if (mounted && current === token) load({ force: true, attempt: attempt + 1 });
+        }, MISMATCH_RETRY_MS);
+        return;
+    }
+
+    if (reply.ok) {
+        setCachedLyrics(key, reply);
+        show(reply, false);
+    } else {
+        // Une absence de paroles est mémorisée (pas de nouvelle requête à chaque ouverture)
+        if (reply.error === 'NOT_FOUND' || reply.error === 'INVALID_PARAMS') setCachedLyrics(key, reply);
+        fail(reply.error);
+    }
+}
+
+function retry() {
+    forgetCachedLyrics(songKey.value);
+    load({ force: true });
+}
+
+// Identité du morceau affiché : undefined = aucun état reçu, null = rien en cours.
+// Une boucle (même morceau) ou un simple changement de position ne relance rien.
+const trackIdentity = computed(() => {
+    if (!playerStore.hasState) return undefined;
+    return song.value ? 'song:' + (songKey.value ?? '') : null;
+});
+
+watch(trackIdentity, () => load(), { immediate: true });
+
+// === RECHERCHE MANUELLE ===
+function openSearch() {
+    searchModal.value?.open({
+        query: guessSearchQuery(song.value, result.value),
+        songKey: songKey.value,
+        duration: song.value?.duration
+    });
+}
+
+function onPick(value, key) {
+    if (!value || value.ok !== true) return;
+    if (key) manualPicks.set(key, value);
+    // Le titre a changé pendant la recherche : le choix reste retenu pour l'ancien titre
+    if (key === songKey.value) {
+        ++token;
+        show(value, true);
+    }
+}
+
+function clearManualPick() {
+    if (songKey.value) manualPicks.delete(songKey.value);
+    load();
+}
+
+// === POSITION (fine, sans attendre le pas de 250 ms du store) ===
+const livePosition = ref(playerStore.positionAt());
+let rafId = null;
+let lastFrame = 0;
+
+function clockShouldRun() {
+    return mounted && kind.value === 'synced' && playerStore.advancing && !document.hidden;
+}
+
+function frame(now) {
+    rafId = null;
+    if (now - lastFrame >= FRAME_MS) {
+        lastFrame = now;
+        livePosition.value = playerStore.positionAt(now);
+    }
+    if (clockShouldRun()) rafId = requestAnimationFrame(frame);
+}
+
+function syncClock() {
+    livePosition.value = playerStore.positionAt();
+    if (clockShouldRun()) {
+        if (rafId === null) rafId = requestAnimationFrame(frame);
+    } else if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+    }
+}
+
+watch([() => playerStore.revision, () => playerStore.advancing, kind], syncClock);
+
+const effectiveMs = computed(() => livePosition.value + offsetMs.value);
+
+// === ACTIONS ===
+function isRefused(response) {
+    return response === null || response === false || response === 'no_music' || (response && typeof response === 'object' && response.ok === false);
+}
+
+function showNotice(text) {
+    notice.value = text;
+    clearTimeout(noticeTimer);
+    noticeTimer = setTimeout(() => { notice.value = ''; }, NOTICE_MS);
+}
+
+// Clic sur une ligne : seek au début de la ligne (décalage retiré, seconde entière comme la barre de progression)
+async function seekTo(lineMs) {
+    if (!playerStore.seekable) return;
+    const target = Math.max(0, lineMs - offsetMs.value);
+    const response = await IORequestAsync('/PLAYER/SEEK', { time: Math.floor(target / 1000) }, 10000);
+    if (isRefused(response)) {
+        const reason = response && typeof response === 'object' ? response.reason : null;
+        showNotice(reason === 'not_seekable' ? 'Ce titre ne permet pas de se déplacer.' : 'Impossible de se déplacer dans le morceau.');
+    }
+}
+
+function changeOffset(delta) {
+    offsetMs.value = Math.max(-OFFSET_MAX, Math.min(OFFSET_MAX, offsetMs.value + delta));
+    saveOffset(offsetMs.value);
+}
+
+function resetOffset() {
+    offsetMs.value = 0;
+    saveOffset(0);
+}
+
+const sizeIndex = computed(() => Math.max(0, TEXT_SIZES.findIndex((size) => size.value === textSize.value)));
+const sizeLabel = computed(() => TEXT_SIZES[sizeIndex.value].label);
+
+function changeSize(step) {
+    const next = TEXT_SIZES[Math.max(0, Math.min(TEXT_SIZES.length - 1, sizeIndex.value + step))];
+    textSize.value = next.value;
+    saveTextSize(next.value);
+}
+
+function onVisibilityChange() {
+    syncClock();
+}
+
+onMounted(() => {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    syncClock();
+    // Aucun état reçu (première requête du lecteur restée sans réponse) : on le redemande
+    if (!playerStore.hasState) playerStore.requestState();
+});
+
+onBeforeUnmount(() => {
+    mounted = false;
+    token++;
+    clearTimeout(retryTimer);
+    clearTimeout(noticeTimer);
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    rafId = null;
+    document.removeEventListener('visibilitychange', onVisibilityChange);
+});
+</script>
+<style scoped>
+.lyrics {
+    --lyrics-size: 1.35em;
+
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    padding: 6px 6px 0 6px;
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+
+.lyrics--size-s { --lyrics-size: 1.1em; }
+.lyrics--size-m { --lyrics-size: 1.35em; }
+.lyrics--size-l { --lyrics-size: 1.65em; }
+.lyrics--size-xl { --lyrics-size: 2em; }
+
+/* Halo de la pochette derrière l'en-tête */
+.lyrics-backdrop {
+    position: absolute;
+    inset: -40px -40px auto -40px;
+    height: 260px;
+    z-index: -1;
+    background-position: center;
+    background-size: cover;
+    filter: blur(48px) saturate(1.4);
+    opacity: 0.3;
+    pointer-events: none;
+    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
+}
+
+[data-theme='light'] .lyrics-backdrop {
+    opacity: 0.22;
+}
+
+/* === EN-TÊTE === */
+.lyrics-head {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    min-width: 0;
+    /* Place pour le bouton de fermeture de la vue */
+    padding-right: 36px;
+}
+
+.lyrics-cover {
+    flex-shrink: 0;
+    width: 76px;
+    height: 76px;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background-color: var(--tertiary);
+    box-shadow: var(--shadow);
+}
+
+.lyrics-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.lyrics-cover-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--text-secondary);
+    font-size: 1.6em;
+}
+
+.lyrics-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+    flex: 1;
+}
+
+.lyrics-eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.72em;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--main);
+}
+
+.lyrics-title {
+    margin: 0;
+    font-size: 1.3em;
+    font-weight: 700;
+    line-height: 1.25;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow-wrap: anywhere;
+}
+
+.lyrics-artist {
+    margin: 0;
+    font-size: 0.9em;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.lyrics-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+}
+
+/* === BARRE D'OUTILS === */
+.lyrics-toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.tool-spacer {
+    flex: 1;
+}
+
+.tool-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--tertiary) 70%, transparent);
+}
+
+.tool-btn,
+.tool-value {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 30px;
+    height: 30px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-pill);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: 0.8rem;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
+}
+
+.tool-value {
+    padding: 0 10px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.tool-value--set {
+    color: var(--main);
+}
+
+.tool-btn:hover:not(:disabled),
+.tool-value:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--text) 12%, transparent);
+}
+
+.tool-btn:focus-visible,
+.tool-value:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.tool-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
+/* Le décalage nul n'est pas « désactivé » visuellement : c'est juste une valeur */
+.tool-value:disabled {
+    cursor: default;
+}
+
+.glyph {
+    font-weight: 700;
+    line-height: 1;
+}
+
+.glyph--small {
+    font-size: 0.8rem;
+}
+
+.glyph--large {
+    font-size: 1.15rem;
+}
+
+/* === PAROLES === */
+.lyrics-stage {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-height: 220px;
+}
+
+.lyrics-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    align-self: stretch;
+    margin: auto 0;
+    padding: 0 0.7em;
+    font-size: var(--lyrics-size);
+}
+
+.skeleton-line {
+    display: block;
+    height: 1em;
+    border-radius: var(--radius-sm);
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--text) 7%, transparent) 0%,
+        color-mix(in srgb, var(--text) 14%, transparent) 50%,
+        color-mix(in srgb, var(--text) 7%, transparent) 100%);
+    background-size: 200% 100%;
+    animation: lyrics-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes lyrics-shimmer {
+    from { background-position: 100% 0; }
+    to { background-position: -100% 0; }
+}
+
+.lyrics-plain {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.lyrics-plain-scroller {
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 4px 10px 24px 10px;
+}
+
+.lyrics-plain-scroller:focus-visible {
+    outline-offset: -2px;
+}
+
+.lyrics-plain-note {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 0 14px 0;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+}
+
+.lyrics-paragraph {
+    margin: 0 0 1.1em 0;
+    font-size: calc(var(--lyrics-size) * 0.82);
+    font-weight: 500;
+    line-height: 1.6;
+    white-space: pre-line;
+    overflow-wrap: anywhere;
+    color: var(--text);
+}
+
+/* === ORIGINE === */
+.lyrics-credit {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0 6px;
+    margin: 0;
+    padding: 2px 8px 8px 8px;
+    font-size: 0.75em;
+    color: var(--text-secondary);
+    text-align: center;
+}
+
+.lyrics-credit a {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.lyrics-credit a:hover {
+    color: var(--text);
+}
+
+/* === MESSAGE PONCTUEL === */
+.lyrics-notice-region {
+    position: absolute;
+    left: 50%;
+    top: 12px;
+    transform: translateX(-50%);
+    z-index: 3;
+    max-width: calc(100% - 24px);
+    pointer-events: none;
+}
+
+.lyrics-notice {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    padding: 8px 14px;
+    border: 1px solid color-mix(in srgb, var(--text-error) 45%, transparent);
+    border-radius: var(--radius-pill);
+    background-color: var(--secondary);
+    color: var(--text);
+    font-size: 0.85em;
+    box-shadow: var(--shadow-lg);
+}
+
+.lyrics-notice svg {
+    color: var(--text-error);
+}
+
+.notice-enter-active,
+.notice-leave-active {
+    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+
+.notice-enter-from,
+.notice-leave-to {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .lyrics {
+        gap: 10px;
+        padding: 2px 2px 0 2px;
+    }
+
+    .lyrics--size-s { --lyrics-size: 1em; }
+    .lyrics--size-m { --lyrics-size: 1.2em; }
+    .lyrics--size-l { --lyrics-size: 1.45em; }
+    .lyrics--size-xl { --lyrics-size: 1.75em; }
+
+    .lyrics-head {
+        gap: 12px;
+    }
+
+    .lyrics-cover {
+        width: 56px;
+        height: 56px;
+    }
+
+    .lyrics-title {
+        font-size: 1.1em;
+    }
+
+    .lyrics-toolbar {
+        gap: 6px;
+    }
+
+    /* Sur mobile, la recherche passe sous les réglages, en pleine largeur */
+    .tool-spacer {
+        display: none;
+    }
+
+    .lyrics-toolbar > .ui-btn {
+        flex: 1 1 auto;
+    }
+
+    .lyrics-stage {
+        min-height: 180px;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Playlist/PlaylistView.vue b/src/components/Widget/View/Playlist/PlaylistView.vue
index 4100181..b99e83a 100644
--- a/src/components/Widget/View/Playlist/PlaylistView.vue
+++ b/src/components/Widget/View/Playlist/PlaylistView.vue
@@ -1,95 +1,81 @@
 <template>
     <div class="playlist-view">
-        <PlaylistHeader :is-playlist="true" :results="props.playlist"/>
-        <p ref="successMessage" v-if="hasBeenActualized"> <Success>Cette playlist vient d'être mise à jour.</Success> </p>
-        <div class="search-playlist-results-container">
-        <div v-if="props.playlist?.songs?.length > 0" class="search-playlist-results">
-            <VideoComposable delete v-for="result in props.playlist.songs" :key="result.id" :video="result"/>
-        </div>
-        <div v-else class="search-playlist-no-results">
-            <p><Icon icon="fa-ban"/> Aucun titre</p>
-            <p class="info-no">Vous n'avez pas encore ajouté de titre à cette playlist. <br/> Faites une recherche et sauvegarder les avec <Icon icon="fa-solid fa-save"/> </p>
-        </div>
+        <!-- Défilement interne : la grille de l'interface ne doit pas grandir avec une longue playlist -->
+        <div class="playlist-view__scroll">
+            <PlaylistHeader :is-playlist="true" :results="live" :scope="scope" />
+            <PlaylistSongList :playlist="live" :scope="scope" class="playlist-view__songs" />
         </div>
     </div>
 </template>
 <script setup>
-import { useUserStore } from '@/stores/userStore';
+/**
+ * Vue d'une playlist enregistrée (événement VIEW_PLAYLIST → Layout/View.vue).
+ * La playlist est relue en direct dans le store : ajouts, retraits, déplacements et renommages
+ * (ici, ailleurs ou par un autre membre du serveur) s'affichent sans rouvrir la vue.
+ */
+import { computed } from 'vue';
 import PlaylistHeader from '../Search/PlaylistHeader.vue';
-import VideoComposable from '@/components/Widget/VideoComposable.vue';
-import Success from '@/components/UI/Success.vue';
-import { onMounted, ref } from 'vue';
-
-const userStore = useUserStore();
-const successMessage = ref(null);
+import PlaylistSongList from '@/components/Widget/Playlist/PlaylistSongList.vue';
+import { useGlobalStore } from '@/stores/globalStore';
+import { usePlaylistStore } from '@/stores/playlistStore';
+import { normalizeScope } from '@/components/Widget/Playlist/playlistMeta';
 
 const props = defineProps({
     playlist: {
         type: Object,
         required: true
     },
+    // Facultatif : sinon déduit de la playlist (scope:"guild") ou de la playlist ouverte
+    scope: {
+        type: String,
+        default: null
+    },
+    // Conservé pour compatibilité (la notification de mise à jour est affichée par le store)
     hasBeenActualized: {
         type: Boolean,
         default: false
     }
-})
+});
 
-onMounted(() => {
-    setTimeout(() => {
-        if(successMessage.value)
-            successMessage.value.style.display = "none";
-    }, 5000);
-})
+const globalStore = useGlobalStore();
+const playlistStore = usePlaylistStore();
 
+const scope = computed(() => {
+    if (props.scope) return normalizeScope(props.scope);
+    if (props.playlist?.scope === 'guild') return 'guild';
+    if (String(globalStore.actualPlaylistId) === String(props.playlist?.playlistId)) return normalizeScope(globalStore.actualPlaylistScope);
+    return 'personal';
+});
 
+const live = computed(() => playlistStore.findPlaylist(scope.value, props.playlist?.playlistId) || props.playlist);
 </script>
 <style scoped>
 .playlist-view {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+}
+
+.playlist-view__scroll {
+    position: absolute;
+    inset: 0;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    flex: 1;
-}
-
-.info-no {
-    font-size: 0.5em;
-    color: var(--text-secondary);
-}
-
-.search-playlist-no-results {
-     text-align: center;
-     flex-direction: column;
-    font-size: 1.7em;
-    color: var(--text-secondary);
-    opacity: 0.8;
-    flex: 1;
-    display: flex;
-    gap: 5px;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-}
-
-.search-playlist-results-container {
-    display: flex;
-    position: relative;
+    gap: 22px;
+    padding: 4px;
     overflow-y: auto;
-    justify-content: center;
-    flex: 1;
+    overscroll-behavior: contain;
 }
 
-.search-playlist-no-results p {
-    margin: 0;
+.playlist-view__songs {
+    flex: 1 0 auto;
 }
 
-.search-playlist-results {
-    display: grid;
-    grid-template-columns: repeat(auto-fill,minmax(200px,auto));
-    gap: 10px;
-    flex: 1;
-    width: 100%;
-    position: absolute;
+@media screen and (max-width: 768px), screen and (max-height: 607px) {
+    .playlist-view__scroll {
+        gap: 18px;
+        padding: 0;
+    }
 }
-
-
 </style>
diff --git a/src/components/Widget/View/Search/PlaylistHeader.vue b/src/components/Widget/View/Search/PlaylistHeader.vue
index 566517b..e3f8014 100644
--- a/src/components/Widget/View/Search/PlaylistHeader.vue
+++ b/src/components/Widget/View/Search/PlaylistHeader.vue
@@ -1,449 +1,730 @@
 <template>
-    <div class="search-playlist-container">
-        <div class="search-playlist-header">
-                <img v-if="results.thumbnail" class="search-playlist-thumbnail" :src="results.thumbnail" alt="Playlist Thumbnail" />
-                <div v-else class="search-playlist-thumbnail"><div class="defaultIcon"><Icon icon="fa-music" /></div></div>
-                <div class="search-playlist-info">
-                    <p class="search-playlist-title">{{ results.title }} <Icon v-if="results.url" @click="openPlaylistPage()" class="link-icon" icon="fa-solid fa-link" /></p>
-                    <p class="search-playlist-stats"><Tag color="var(--text-warning)">{{ results.truncated ? `Aperçu : ${results.songs.length} titres sur ${results.totalTracks}` : `${results.songs.length} titres` }}</Tag><Tag v-if="results.views" color="var(--text-success)">{{ results.views }} vues</Tag ><Tag v-if="results.songs.length > 0">Durée : {{ results.readduration }}</Tag></p>
-                    <div @click="openAuthorPage()" class="search-playlist-author-info">
-                        <img v-if="results.authorAvatar" :src="results.authorAvatar" alt="Author Thumbnail" class="search-playlist-author" />
-                        <div v-else class="search-playlist-author-placeholder"></div>
-                        <p v-if="results.author" class="search-playlist-author-name">{{ results.author }}</p>
-                        <p v-else class="search-playlist-author-name">Aucun auteur trouvé</p>
-                    </div>
-                    
-                </div>
+    <header class="pl-header">
+        <div class="pl-header__cover-wrap">
+            <img
+                v-if="cover && !coverFailed"
+                class="pl-header__cover"
+                :src="cover"
+                alt=""
+                @error="coverFailed = true"
+            />
+            <span v-else :class="['pl-header__cover', 'pl-header__cover--empty', `pl-header__cover--${source.key}`]" aria-hidden="true">
+                <Icon :icon="source.icon" />
+            </span>
+            <span v-if="cover && !coverFailed && source.key !== 'manual'" :class="['pl-header__badge', `pl-header__badge--${source.key}`]" aria-hidden="true">
+                <Icon :icon="source.icon" />
+            </span>
         </div>
-        <section :class="{'search-playlist-act-container': true, 'search-playlist-act-container-box': messagePlaylist}">
-            <div class="search-playlist-actions">
-                <AddList
-                    icon-action
-                    title="Ajouter à la liste de lecture"
-                    @click="playPlaylist()"
-                    v-if="globalStore.currentChannel"
-                
-                />
-                <IconAction
+
+        <div class="pl-header__body">
+            <p class="pl-header__eyebrow">
+                <Icon :icon="eyebrow.icon" aria-hidden="true" />
+                <span>{{ eyebrow.text }}</span>
+            </p>
+            <h2 class="pl-header__title">{{ live.title || 'Playlist sans titre' }}</h2>
+
+            <ul class="pl-header__meta" aria-label="Informations sur la playlist">
+                <li>
+                    <Icon icon="fa-solid fa-list-ol" aria-hidden="true" />
+                    {{ countLabel }}
+                </li>
+                <li v-if="durationLabel">
+                    <Icon icon="fa-regular fa-clock" aria-hidden="true" />
+                    {{ durationLabel }}
+                </li>
+                <li v-if="live.views">
+                    <Icon icon="fa-regular fa-eye" aria-hidden="true" />
+                    {{ live.views }} vues
+                </li>
+                <li v-if="isPlaylist && updatedLabel">
+                    <Icon icon="fa-solid fa-clock-rotate-left" aria-hidden="true" />
+                    Modifiée le {{ updatedLabel }}
+                </li>
+                <li v-if="synced" class="pl-header__meta--info">
+                    <Icon icon="fa-solid fa-arrows-rotate" aria-hidden="true" />
+                    Synchronisée avec YouTube
+                </li>
+            </ul>
+
+            <p v-if="creator" class="pl-header__byline">
+                <img class="pl-header__avatar" :src="creatorAvatar" alt="" loading="lazy" />
+                <span>Partagée par <strong>{{ creator }}</strong></span>
+            </p>
+            <p v-else-if="live.author && source.key !== 'manual'" class="pl-header__byline">
+                <img v-if="live.authorAvatar" class="pl-header__avatar" :src="live.authorAvatar" alt="" loading="lazy" />
+                <a v-if="authorUrl" :href="authorUrl" target="_blank" rel="noopener noreferrer" class="pl-header__link">
+                    {{ live.author }}<span class="sr-only"> (s'ouvre dans un nouvel onglet)</span>
+                </a>
+                <span v-else>{{ live.author }}</span>
+            </p>
+
+            <div class="pl-header__actions">
+                <Button
                     icon="fa-solid fa-play"
-                    title="Lire maintenant la playlist"
-                    @click="playPlaylist(true)"
-                    v-if="globalStore.currentChannel"
+                    :disabled="!canPlay || songCount === 0"
+                    :loading="pending === 'play'"
+                    :aria-describedby="!canPlay ? playHintId : undefined"
+                    @click="play(true)"
+                >Lire</Button>
+                <Button
+                    variant="secondary"
+                    icon="fa-solid fa-list-ul"
+                    :disabled="!canPlay || songCount === 0"
+                    :loading="pending === 'queue'"
+                    :aria-describedby="!canPlay ? playHintId : undefined"
+                    @click="play(false)"
+                >Ajouter à la file</Button>
+
+                <!-- Résultat de recherche : enregistrement (dans mes playlists ou sur le serveur) -->
+                <template v-if="!isPlaylist && live.url">
+                    <ActionMenu
+                        v-if="playlistStore.canShareToGuild"
+                        text="Enregistrer"
+                        icon="fa-solid fa-bookmark"
+                        label="Enregistrer la playlist"
+                        :disabled="pending === 'save'"
+                        :items="saveItems"
+                        @select="saveSearch($event)"
+                    />
+                    <Button
+                        v-else
+                        variant="secondary"
+                        icon="fa-solid fa-bookmark"
+                        :loading="pending === 'save'"
+                        @click="saveSearch('personal')"
+                    >Enregistrer</Button>
+                </template>
+
+                <!-- Playlist enregistrée : partage / copie, puis menu des autres actions -->
+                <Button
+                    v-if="isPlaylist && scope === 'personal' && playlistStore.canShareToGuild"
+                    variant="ghost"
+                    icon="fa-solid fa-share-nodes"
+                    :loading="pending === 'share'"
+                    @click="share()"
+                >Partager sur le serveur</Button>
+                <Button
+                    v-if="isPlaylist && scope === 'guild'"
+                    variant="ghost"
+                    icon="fa-regular fa-copy"
+                    :loading="pending === 'copy'"
+                    @click="copy()"
+                >Copier dans mes playlists</Button>
+                <ActionMenu
+                    v-if="moreItems.length > 0"
+                    label="Plus d'actions sur la playlist"
+                    :items="moreItems"
+                    @select="onMore"
                 />
-                <IconAction v-if="!isPlaylist"
-                    icon="fa-solid fa-save"
-                    title="Sauvegarder la playlist" 
-                    @click="savePlaylist()"    
-                />
-                <IconAction v-if="isPlaylist"
-                    icon="fa-solid fa-sliders"
-                    title="Configurer la playlist"
-                    @click="settingsModal.open()"/>
-          
             </div>
-            <Success class="playlist-message" v-if="messagePlaylist">{{ messagePlaylist }}</Success>
-        </section>
-       
-    </div>
-    <Modal ref="settingsModal" title="Configuration de la playlist" icon="fa-solid fa-sliders">
-        <ModalTree title="Actions">
-            <div class="modal-actions">
-            <Button v-if="isPlaylist && results.type != 'youtube'"
-                icon="fa-solid fa-pen-to-square"
-                @click="renameModal.open(); renameInput = results.title"
-            >Renommer la playlist</Button>
-            <Button v-if="isPlaylist && results.type == 'youtube'"
-                @click="Events.emit('playlist:refresh', results); isRefreshing = true"
-            ><YoutubeRefresh /> Mettre à jour la playlist</Button>
-            <Button
-                icon="fa-solid fa-trash"
-                @click="deleteModal.open()"
-            >Supprimer la playlist</Button>
-            </div>
-            <p class="info-loading" v-if="isRefreshing"><Icon icon="fa-solid fa-spinner" spin-pulse /> Mise à jour en cours ...</p>
-        </ModalTree>
-        <ModalTree icon="fa-solid fa-circle-info" title="Informations">
-            <div class="playlist-conf-info">
-            <p><Icon :icon="results.type == 'youtube' ? 'fa-brands fa-youtube' : 'fa-solid fa-music'" /> <span class="pconf-key">Titre:</span> <span class="pconf-value">{{ results.title }}</span></p>
-            <p><Icon icon="fa-solid fa-user" /> <span class="pconf-key">Auteur:</span> <span class="pconf-value">{{ results.author }}</span></p>
-            <p><Icon icon="fa-solid fa-clock" /> <span class="pconf-key">Durée:</span> <span class="pconf-value">{{ results.readduration ? results.readduration : 'Inconnue' }}</span></p>
-            <p><Icon icon="fa-solid fa-list" /> <span class="pconf-key">Nombre de titres:</span> <span class="pconf-value">{{ results.songs.length }}</span></p>
-            <p v-if="results.views"><Icon icon="fa-solid fa-eye" /> <span class="pconf-key">Vues:</span> <span class="pconf-value">{{ results.views }}</span></p>
-            <p v-if="results.url"><Icon icon="fa-solid fa-link" /> <span class="pconf-key">Lien:</span> <a :href="results.url" target="_blank">{{ results.url }}</a></p>
-            </div>
-        </ModalTree>
+
+            <p v-if="!canPlay" :id="playHintId" class="pl-header__hint">
+                <Icon icon="fa-solid fa-headphones" aria-hidden="true" />
+                Rejoignez un salon vocal de {{ globalStore.actualServer?.name || 'ce serveur' }} pour lancer la lecture.
+            </p>
+            <p v-if="readOnlyNote" class="pl-header__hint">
+                <Icon icon="fa-solid fa-lock" aria-hidden="true" />
+                {{ readOnlyNote }}
+            </p>
+            <p class="sr-only" aria-live="polite">{{ status }}</p>
+            <p v-if="pending === 'refresh'" class="pl-header__hint pl-header__hint--busy">
+                <Spinner size="sm" label="Mise à jour depuis la source…" visible-label />
+            </p>
+        </div>
+    </header>
+
+    <!-- Renommer -->
+    <Modal ref="renameModal" title="Renommer la playlist" icon="fa-solid fa-pen-to-square" size="sm">
+        <form :id="renameFormId" class="pl-form" @submit.prevent="rename()">
+            <Field label="Nouveau nom" :error="renameError" required>
+                <template #aside>
+                    <span class="pl-form__counter" aria-hidden="true">{{ renameInput.length }}/100</span>
+                </template>
+                <template #default="{ id, describedby, invalid }">
+                    <input
+                        :id="id"
+                        v-model="renameInput"
+                        type="text"
+                        maxlength="100"
+                        autocomplete="off"
+                        data-autofocus
+                        :aria-describedby="describedby"
+                        :aria-invalid="invalid ? 'true' : 'false'"
+                    />
+                </template>
+            </Field>
+            <p v-if="live.url && !synced" class="pl-form__hint">Le nom choisi est conservé lors des mises à jour depuis la source.</p>
+        </form>
+        <template #footer>
+            <Button variant="ghost" @click="renameModal?.close()">Annuler</Button>
+            <Button type="submit" :form="renameFormId" icon="fa-solid fa-check" :loading="pending === 'rename'">Renommer</Button>
+        </template>
     </Modal>
 
-    <Modal ref="renameModal" title="Renommer la playlist" icon="fa-solid fa-pen-to-square">
-        <div class="modal-rename">
-            <input type="text" v-model="renameInput" placeholder="Nouveau nom de la playlist" />
-            <Button :disabled="!renameInput.trim('')" @click="Events.emit('playlist:rename', { id: results.playlistId, newName: renameInput })">Renommer</Button>
-        </div>
-    </Modal>
-
-    <Modal ref="deleteModal" title="Supprimer une playlist" icon="fa-solid fa-trash">
-        <p>Êtes-vous sûr de vouloir supprimer cette playlist ?</p>
-        <p class="info-no">Cette action est irréversible et la playlist ne pourra pas être récupéré.</p>
-        <p class="info-name"><Icon :icon="results.type == 'youtube' ? 'fa-brands fa-youtube' : 'fa-solid fa-music'" /> {{ results.title }}</p>
-        <div class="info-actions">
-            <Button @click="deleteModal.close()">Annuler</Button>
-            <Button @click="Events.emit('playlist:delete', results); deleteModal.close()">Supprimer</Button>
-        </div>
+    <!-- Suppression -->
+    <Modal ref="deleteModal" title="Supprimer la playlist ?" icon="fa-solid fa-trash" size="sm">
+        <p class="pl-form__text">
+            « <strong>{{ live.title }}</strong> » et ses {{ countLabel }} seront supprimés définitivement.
+        </p>
+        <p v-if="scope === 'guild'" class="pl-form__hint">
+            <Icon icon="fa-solid fa-users" aria-hidden="true" />
+            Elle disparaîtra pour tous les membres du serveur.
+        </p>
+        <p v-if="deleteError" class="pl-form__error" role="alert">{{ deleteError }}</p>
+        <template #footer>
+            <Button variant="ghost" @click="deleteModal?.close()">Annuler</Button>
+            <Button variant="danger" icon="fa-solid fa-trash" :loading="pending === 'delete'" @click="remove()">Supprimer</Button>
+        </template>
     </Modal>
 </template>
 <script setup>
-import Tag from '@/components/UI/Tag.vue';
-import IconAction from '@/components/UI/IconAction.vue';
-import Events from '@/utils/Events';
-import Modal from '@/components/UI/Modal.vue';
+/**
+ * En-tête d'une playlist : playlist enregistrée (vue playlist, `isPlaylist`) ou résultat de recherche.
+ * Une playlist enregistrée est relue en direct dans le store (renommage, ajouts, mises à jour).
+ * Actions selon les droits : lire, ajouter à la file, partager sur le serveur / copier dans mes playlists,
+ * renommer, mettre à jour depuis la source, supprimer.
+ */
+import { computed, ref, useId, watch } from 'vue';
 import Button from '@/components/UI/Button.vue';
-import { onMounted, ref } from 'vue';
-import ModalTree from '@/components/UI/ModalTree.vue';
-import { IORequest } from '@/utils/IORequest';
+import Modal from '@/components/UI/Modal.vue';
+import Field from '@/components/UI/Field.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import ActionMenu from '@/components/Widget/Playlist/ActionMenu.vue';
 import { useGlobalStore } from '@/stores/globalStore';
-import AddList from '@/assets/Icons/AddList.vue';
-import YoutubeRefresh from '@/assets/Icons/YoutubeRefresh.vue';
-import Success from '@/components/UI/Success.vue';
-
-const deleteModal = ref(null);
-const renameModal = ref(null);
-const renameInput = ref('');
-const settingsModal = ref(null);
-const isRefreshing = ref(false);
-const globalStore = useGlobalStore();
-const messagePlaylist = ref(null);
+import { usePlaylistStore } from '@/stores/playlistStore';
+import {
+    playlistSource,
+    playlistCover,
+    playlistSongCount,
+    playlistDuration,
+    playlistUpdatedTime,
+    formatPlaylistDuration,
+    formatPlaylistDate,
+    formatSongCount,
+    isImportedPlaylist,
+    isSyncedPlaylist,
+    creatorName,
+    discordAvatarUrl,
+    normalizeScope
+} from '@/components/Widget/Playlist/playlistMeta';
 
 const props = defineProps({
     results: {
         type: Object,
         required: true
     },
+    // Playlist enregistrée (sinon : résultat de recherche)
     isPlaylist: {
         type: Boolean,
         required: false
+    },
+    // Liste de la playlist enregistrée ; déduite de la playlist si absente
+    scope: {
+        type: String,
+        default: null
     }
 });
 
-function openAuthorPage() {
-    if (!props.results.authorId) return;
-    if(!props.results.author) return;
-    window.open(props.results.authorId, '_blank');
-}
+const globalStore = useGlobalStore();
+const playlistStore = usePlaylistStore();
 
-function openPlaylistPage() {
-    if (!props.results.url) return;
-    window.open(props.results.url, '_blank');
-}
+const uid = useId();
+const playHintId = `pl-play-hint-${uid}`;
+const renameFormId = `pl-rename-${uid}`;
 
-function savePlaylist() {  
-    if (!props.results.url) return;
-    IORequest("/PLAYLISTS/CREATE", (response) => {
-        if(response) {
-            Events.emit("playlist:open", response);
-            Events.emit("logic:init")
-        }
-    }, { name: 'default', url: props.results.url });
+const renameModal = ref(null);
+const deleteModal = ref(null);
+const renameInput = ref('');
+const renameError = ref(null);
+const deleteError = ref(null);
+const pending = ref(null);
+const status = ref('');
+const coverFailed = ref(false);
 
-}
+const scope = computed(() => normalizeScope(props.scope || props.results?.scope));
 
-Events.on("playlist:hasRefresh", (playlist) => {
-    isRefreshing.value = false;
-    if(settingsModal.value) settingsModal.value.close();
- 
+// Version à jour dans le store (playlist enregistrée), sinon l'objet reçu
+const live = computed(() => {
+    if (!props.isPlaylist) return props.results || {};
+    return playlistStore.findPlaylist(scope.value, props.results?.playlistId) || props.results || {};
 });
 
-function playPlaylist(now) {
-    IORequest("/PLAYLISTS/PLAY", (data) => {
-    }, { name: props.results.playlistId, now: now });
-    if(now) {
-        setMessage("Lecture de la Playlist");
-    } else {
-        setMessage("Playlist ajoutée");
-    }
-}
+const source = computed(() => playlistSource(live.value));
+const cover = computed(() => playlistCover(live.value));
+const songCount = computed(() => playlistSongCount(live.value));
+const synced = computed(() => isSyncedPlaylist(live.value));
 
-function setMessage(message) {
-    messagePlaylist.value = message;
+watch(cover, () => {
+    coverFailed.value = false;
+});
+
+const eyebrow = computed(() => {
+    if (!props.isPlaylist) return { icon: 'fa-solid fa-magnifying-glass', text: `Résultat de recherche · ${platformName.value}` };
+    if (scope.value === 'guild') return { icon: 'fa-solid fa-users', text: 'Playlist du serveur' };
+    return { icon: 'fa-solid fa-user', text: 'Ma playlist' };
+});
+
+const platformName = computed(() => {
+    switch (live.value.type) {
+        case 'spotify': return 'Spotify';
+        case 'soundcloud': return 'SoundCloud';
+        case 'youtube': return 'YouTube';
+        default: return 'Playlist';
+    }
+});
+
+const countLabel = computed(() => {
+    if (live.value.truncated && live.value.totalTracks) {
+        return `${formatSongCount(songCount.value)} sur ${Number(live.value.totalTracks).toLocaleString('fr-FR')}`;
+    }
+    return formatSongCount(songCount.value);
+});
+
+const durationLabel = computed(() => {
+    const seconds = playlistDuration(live.value);
+    if (songCount.value === 0) return null;
+    if (seconds > 0) return formatPlaylistDuration(seconds);
+    return typeof live.value.readduration === 'string' && live.value.readduration ? live.value.readduration : null;
+});
+
+const updatedLabel = computed(() => formatPlaylistDate(playlistUpdatedTime(live.value)));
+
+const creator = computed(() => (props.isPlaylist && scope.value === 'guild' ? creatorName(live.value) : null));
+const creatorAvatar = computed(() => discordAvatarUrl(live.value.createdBy?.id, live.value.createdBy?.avatar, 32));
+
+const authorUrl = computed(() => {
+    const value = live.value.authorId;
+    return typeof value === 'string' && /^https?:\/\//i.test(value) ? value : null;
+});
+
+const sourceUrl = computed(() => {
+    const value = live.value.url;
+    return typeof value === 'string' && /^https?:\/\//i.test(value) ? value : null;
+});
+
+const canPlay = computed(() => !!globalStore.currentChannel);
+const canEdit = computed(() => props.isPlaylist && playlistStore.canEditScope(scope.value));
+const canDelete = computed(() => props.isPlaylist && playlistStore.canDeletePlaylist(scope.value, live.value));
+
+const readOnlyNote = computed(() => {
+    if (!props.isPlaylist || scope.value !== 'guild' || canEdit.value) return null;
+    return playlistStore.guildEnabled
+        ? 'Lecture seule : seuls les modérateurs modifient les playlists de ce serveur.'
+        : null;
+});
+
+const saveItems = [
+    { key: 'personal', label: 'Dans mes playlists', icon: 'fa-solid fa-user' },
+    { key: 'guild', label: 'Sur le serveur', icon: 'fa-solid fa-users', hint: 'Visible par tous les membres' }
+];
+
+const moreItems = computed(() => {
+    if (!props.isPlaylist) return [];
+    const items = [];
+    if (canEdit.value) items.push({ key: 'rename', label: 'Renommer', icon: 'fa-solid fa-pen-to-square' });
+    if (canEdit.value && isImportedPlaylist(live.value)) {
+        items.push({ key: 'refresh', label: 'Mettre à jour depuis la source', icon: 'fa-solid fa-arrows-rotate', hint: 'Remplace les titres par ceux de la playlist d\'origine', disabled: pending.value === 'refresh' });
+    }
+    if (sourceUrl.value) items.push({ key: 'source', label: `Ouvrir sur ${source.value.key === 'google' ? 'YouTube' : platformName.value}`, icon: 'fa-solid fa-arrow-up-right-from-square' });
+    if (canDelete.value) items.push({ key: 'delete', label: 'Supprimer', icon: 'fa-solid fa-trash', danger: true, separatorBefore: items.length > 0 });
+    return items;
+});
+
+function announce(message) {
+    status.value = '';
     setTimeout(() => {
-        messagePlaylist.value = null;
-    }, 5000);
+        status.value = message;
+    }, 50);
 }
 
-onMounted(() => {
-    isRefreshing.value = false;
-})
-</script>   
+async function run(key, task) {
+    if (pending.value) return null;
+    pending.value = key;
+    try {
+        return await task();
+    } finally {
+        pending.value = null;
+    }
+}
+
+async function play(now) {
+    await run(now ? 'play' : 'queue', async () => {
+        const result = props.isPlaylist
+            ? await playlistStore.playPlaylist(scope.value, live.value.playlistId, now)
+            : await playlistStore.playUrl(live.value.url, now);
+        if (result.ok) {
+            const message = now ? `Lecture de « ${live.value.title} »` : `« ${live.value.title} » ajoutée à la file`;
+            announce(message);
+            playlistStore.notify(message, { tone: 'success' });
+        } else {
+            playlistStore.notify(result.message, { tone: 'error' });
+        }
+    });
+}
+
+async function saveSearch(target) {
+    await run('save', async () => {
+        const where = target === 'guild' && playlistStore.canShareToGuild ? 'guild' : 'personal';
+        const result = await playlistStore.createPlaylist({ scope: where, url: live.value.url });
+        if (!result.ok) {
+            playlistStore.notify(result.message, { tone: 'error' });
+            return;
+        }
+        playlistStore.setScope(where);
+        playlistStore.openPlaylist(where, result.playlist.playlistId);
+        playlistStore.notify(`« ${result.playlist.title} » enregistrée${where === 'guild' ? ' sur le serveur' : ''}`, { tone: 'success' });
+    });
+}
+
+async function share() {
+    await run('share', async () => {
+        const result = await playlistStore.shareToGuild(live.value.playlistId);
+        if (!result.ok) {
+            playlistStore.notify(result.message, { tone: 'error' });
+            return;
+        }
+        const id = result.playlist.playlistId;
+        playlistStore.notify(`« ${result.playlist.title} » est maintenant partagée sur le serveur`, {
+            tone: 'success',
+            action: {
+                label: 'Voir',
+                run: () => {
+                    playlistStore.setScope('guild');
+                    playlistStore.openPlaylist('guild', id);
+                }
+            }
+        });
+    });
+}
+
+async function copy() {
+    await run('copy', async () => {
+        const result = await playlistStore.copyToPersonal(live.value.playlistId);
+        if (!result.ok) {
+            playlistStore.notify(result.message, { tone: 'error' });
+            return;
+        }
+        const id = result.playlist.playlistId;
+        playlistStore.notify(`« ${result.playlist.title} » copiée dans vos playlists`, {
+            tone: 'success',
+            action: {
+                label: 'Voir',
+                run: () => {
+                    playlistStore.setScope('personal');
+                    playlistStore.openPlaylist('personal', id);
+                }
+            }
+        });
+    });
+}
+
+function onMore(key) {
+    switch (key) {
+        case 'rename':
+            renameInput.value = live.value.title || '';
+            renameError.value = null;
+            renameModal.value?.open();
+            break;
+        case 'refresh':
+            refresh();
+            break;
+        case 'source':
+            if (sourceUrl.value) window.open(sourceUrl.value, '_blank', 'noopener');
+            break;
+        case 'delete':
+            deleteError.value = null;
+            deleteModal.value?.open();
+            break;
+        default:
+            break;
+    }
+}
+
+async function rename() {
+    const name = renameInput.value.trim();
+    if (!name) {
+        renameError.value = 'Le nom ne peut pas être vide.';
+        return;
+    }
+    if (name === live.value.title) {
+        renameModal.value?.close();
+        return;
+    }
+    await run('rename', async () => {
+        const result = await playlistStore.renamePlaylist(scope.value, live.value.playlistId, name);
+        if (!result.ok) {
+            renameError.value = result.message;
+            return;
+        }
+        renameModal.value?.close();
+        playlistStore.notify(`Playlist renommée en « ${result.playlist?.title || name} »`, { tone: 'success' });
+    });
+}
+
+async function refresh() {
+    announce('Mise à jour de la playlist depuis sa source…');
+    await run('refresh', async () => {
+        const result = await playlistStore.refreshPlaylist(scope.value, live.value.playlistId);
+        if (result.ok) {
+            playlistStore.notify(`« ${result.playlist?.title || live.value.title} » est à jour : ${formatSongCount(playlistSongCount(result.playlist))}`, { tone: 'success' });
+        } else {
+            playlistStore.notify(result.message, { tone: 'error' });
+        }
+    });
+}
+
+async function remove() {
+    const title = live.value.title;
+    await run('delete', async () => {
+        const result = await playlistStore.deletePlaylist(scope.value, live.value.playlistId);
+        if (!result.ok) {
+            deleteError.value = result.message;
+            return;
+        }
+        deleteModal.value?.close();
+        playlistStore.notify(`Playlist « ${title} » supprimée`, { tone: 'success' });
+    });
+}
+</script>
 <style scoped>
-
-.info-loading {
-    color: var(--text-secondary);
+.pl-header {
     display: flex;
-    gap: 5px;
-    font-size: 0.8em;
-    justify-content: center;
-    width: 100%;
+    align-items: flex-end;
+    gap: 20px;
+    /* Place du bouton « Fermer » de la vue (en haut à droite) */
+    padding-right: 36px;
+    min-width: 0;
 }
 
-.playlist-conf-info {
-    padding: 10px;
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    background-color: var(--tertiary);
-    border-radius: 10px;
-}
-
-.search-playlist-act-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
+.pl-header__cover-wrap {
     position: relative;
+    flex-shrink: 0;
 }
 
-.playlist-message {
-  bottom: -25px;
-  font-size: 0.8em;
-  position: absolute;
-}
-
-.playlist-conf-info p {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.playlist-conf-info svg {
-    width: 1em;
-    height: 1em;
-}
-
-.pconf-key {
-    font-weight: bold;
-}
-
-.pconf-value {
-    color: var(--text-secondary);
-    font-size: 0.9em;
-}
-
-.playlist-conf-info a {
-    color: var(--text-secondary);
-    font-size: 0.7em;
-    word-break: break-all;
-}
-
-.modal-actions {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-    gap: 10px;
-}
-
-.modal-rename {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-@media screen and (max-width: 768px), screen and (max-height: 607px) {
-    .modal-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-}
-
-.modal-actions Button {
-    flex: 1;
-}
-
-.info-no {
-    color: var(--text-secondary);
-    font-size: 0.8em
-}
-
-.info-name {
-    background-color: var(--tertiary);
-    padding: 5px 10px;
-    border-radius: 5px;
-}
-
-.info-actions {
-    display: flex;
-    justify-content: space-between;
-    flex: 1;
-    gap: 10px;
-}
-
-.info-actions Button {
-    width: 100%;
-}
-
-
-@media screen and (max-width: 768px), 
-       screen and (max-height: 607px) {
-
-    .info-actions {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-
-.link-icon {
-    display: none;
-    font-size: 0.8em;
-    color: var(--text-secondary);
-    animation: fadeIn 0.2s ease;
-    cursor: pointer;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-.search-playlist-title:hover .link-icon {
-    display: flex;
-}
-
-.defaultIcon {
-    border: 2px solid var(--text);
+.pl-header__cover {
     display: flex;
     align-items: center;
     justify-content: center;
-    flex: 1;
-    font-size: 4em;
-    border-radius: 10px;
-}
-
-.search-playlist-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.search-playlist-act-container-box {
-    margin-bottom: 25px;
-}
-
-.search-playlist-actions {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    font-size: 1.2em;
-    gap: 30px;
+    width: 156px;
+    height: 156px;
+    border-radius: var(--radius-lg);
+    object-fit: cover;
     background-color: var(--tertiary);
-    padding: 8px 15px;;
-    border-radius: 30px;
+    box-shadow: var(--shadow);
 }
 
-.search-playlist-author {
-    width: 30px;
-    border-radius: 100%;
-    aspect-ratio: 1/1;
-    object-fit: cover;
-}
-
-.search-playlist-author-info {
-    display: flex;
-    align-items: center;
+.pl-header__cover--empty {
+    font-size: 3.2em;
     color: var(--text-secondary);
-    gap: 5px;
-    cursor: pointer;
 }
 
-.search-playlist-author-name {
-    font-size: 0.8em;
+.pl-header__cover--manual {
+    color: var(--main);
+    background: linear-gradient(135deg, color-mix(in srgb, var(--main) 30%, var(--tertiary)), var(--tertiary));
 }
 
-.search-playlist-thumbnail {
-    aspect-ratio: 1/1;
-    width: 150px;
-    border-radius: 10px;
+.pl-header__cover--youtube { color: #ff3b3b; }
+.pl-header__cover--spotify { color: #1ed760; }
+.pl-header__cover--soundcloud { color: #ff7700; }
+.pl-header__cover--google { color: var(--text-info); }
+
+.pl-header__badge {
+    position: absolute;
+    right: -6px;
+    bottom: -6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: var(--secondary);
+    box-shadow: 0 0 0 3px var(--secondary);
+    font-size: 0.95em;
+}
+
+.pl-header__badge--youtube { color: #ff3b3b; }
+.pl-header__badge--spotify { color: #1ed760; }
+.pl-header__badge--soundcloud { color: #ff7700; }
+.pl-header__badge--google { color: var(--text-info); }
+
+.pl-header__body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+}
+
+.pl-header__eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+}
+
+.pl-header__title {
+    margin: 0;
+    font-size: 1.7em;
+    font-weight: 700;
+    line-height: 1.15;
+    overflow-wrap: anywhere;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.pl-header__meta {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 14px;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.pl-header__meta li {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.pl-header__meta--info {
+    color: var(--text-info);
+}
+
+.pl-header__byline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    min-width: 0;
+}
+
+.pl-header__byline strong {
+    color: var(--text);
+    font-weight: 600;
+}
+
+.pl-header__avatar {
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    border-radius: 50%;
     object-fit: cover;
-    display: flex;
+    background-color: var(--tertiary);
 }
 
-.search-playlist-header {
+.pl-header__link {
+    color: var(--text);
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.pl-header__link:hover {
+    text-decoration: underline;
+}
+
+.pl-header__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-top: 6px;
+}
+
+.pl-header__hint {
     display: flex;
     align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.pl-form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.pl-form input {
     width: 100%;
-    gap: 10px;
+    box-sizing: border-box;
 }
 
-.search-playlist-title {
+.pl-form__counter {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    font-variant-numeric: tabular-nums;
+}
+
+.pl-form__text {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.pl-form__hint {
     display: flex;
     align-items: center;
-    gap: 5px;
-    font-weight: bold;
-    font-size: 1.2em;
+    gap: 6px;
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
+
+.pl-form__error {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--text-error);
 }
 
 @media screen and (max-width: 1020px), screen and (max-height: 607px) {
-    .search-playlist-title {
-        font-size: 1em;
-
+    .pl-header {
+        gap: 16px;
     }
 
-    .search-playlist-container {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
+    .pl-header__cover {
+        width: 112px;
+        height: 112px;
     }
 
-    .search-playlist-actions {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
+    .pl-header__title {
+        font-size: 1.35em;
     }
-
-    .search-playlist-title:hover .link-icon {
-        display: none;
-    }
-}
-
-.search-playlist-info {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.search-playlist-stats {
-    display: flex;
-    gap: 5px;
-}
-
-.search-playlist-duration {
-   display: flex;
-   align-items: center;
-}
-
-.search-playlist-author-placeholder {
-    width: 30px;
-    border-radius: 100%;
-    aspect-ratio: 1/1;
-    background-color: var(--primary);
-    object-fit: cover;
-}
-
-p {
-    margin: 0;
 }
 
 @media screen and (max-width: 768px), screen and (max-height: 607px) {
-   .search-playlist-stats {
+    .pl-header {
         flex-direction: column;
-        align-self: start;
-   }
-    
-}
+        align-items: flex-start;
+        padding-right: 0;
+    }
 
-</style>
\ No newline at end of file
+    .pl-header__cover-wrap {
+        align-self: center;
+    }
+
+    .pl-header__cover {
+        width: 128px;
+        height: 128px;
+    }
+
+    .pl-header__actions :deep(.ui-btn) {
+        flex: 1 1 auto;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/Search/SearchSuggestions.vue b/src/components/Widget/View/Search/SearchSuggestions.vue
index 8a998c8..20d8c7a 100644
--- a/src/components/Widget/View/Search/SearchSuggestions.vue
+++ b/src/components/Widget/View/Search/SearchSuggestions.vue
@@ -1,116 +1,110 @@
 <template>
-    <div ref="suggestions" class="search-suggestions">
-        <ul>
-            <li class="search-suggestion" v-for="result in results" :key="result.id" @click="selectResult(result[0])">
-                {{ result[0] }}
-                <Icon class="search-icon" icon="fa-solid fa-arrow-up-right-from-square" style="float: right;"/>
-            </li>
-        </ul>
-    </div>
+    <ul :id="listId" class="search-suggestions" role="listbox" aria-label="Suggestions de recherche">
+        <li
+            v-for="(item, index) in items"
+            :id="optionId(index)"
+            :key="`${index}-${item}`"
+            role="option"
+            :aria-selected="index === activeIndex ? 'true' : 'false'"
+            :class="['search-suggestion', { 'search-suggestion--active': index === activeIndex }]"
+            @mousedown.prevent
+            @click="emit('select', item)"
+            @mousemove="index !== activeIndex && emit('hover', index)"
+        >
+            <Icon class="suggestion-icon" icon="fa-solid fa-magnifying-glass" aria-hidden="true" />
+            <span class="suggestion-text">{{ item }}</span>
+            <Icon class="suggestion-go" icon="fa-solid fa-arrow-turn-down" aria-hidden="true" />
+        </li>
+    </ul>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue';
-import Events from '@/utils/Events';
-
-const props = defineProps({
-    query: String
-});
-
-const results = ref([]);
-const suggestions = ref(null);
-
-onMounted(() => {
-    window.addEventListener('click', (event) => {
-        if (suggestions.value && !suggestions.value.contains(event.target)) {
-            results.value = [];
-        }
-    });
-    
-    window.addEventListener('keydown', (event) => {
-        if (event.key === 'Escape') {
-            results.value = [];
-        }
-
-        if (event.key === 'Enter') {
-            results.value = [];
-        }
-    });
-})
-
-watch(() => props.query, (newQuery) => {
-    if (newQuery) {
-        fetchSuggest(newQuery)
-            .then(data => {
-                results.value = data[1];
-            });
-    } else {
-        results.value = [];
+/**
+ * Liste de suggestions de la barre de recherche (role="listbox"), pilotée par Layout/Search.vue
+ * (combobox : le focus reste dans le champ, l'option active est signalée par aria-activedescendant).
+ * Props : listId, items (textes), activeIndex, optionId(index) → id DOM d'une option.
+ * Événements : select (texte), hover (index survolé).
+ */
+defineProps({
+    listId: {
+        type: String,
+        required: true
+    },
+    items: {
+        type: Array,
+        default: () => []
+    },
+    activeIndex: {
+        type: Number,
+        default: -1
+    },
+    optionId: {
+        type: Function,
+        required: true
     }
 });
 
-function fetchSuggest(query) {
-  return new Promise((resolve, reject) => {
-    const callbackName = "jsonp_callback_" + Math.random().toString(36).substr(2, 5);
-
-    window[callbackName] = function(data) {
-      resolve(data);
-      delete window[callbackName];
-      script.remove();
-    };
-
-    const script = document.createElement("script");
-    script.src = `https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&q=${encodeURIComponent(query)}&callback=${callbackName}`;
-    script.onerror = reject;
-    document.body.appendChild(script);
-  });
-}
-
-function selectResult(result) {
-    Events.emit("SEARCH_RESULT_SELECTED", result);
-    
-}
-
-Events.on("SEARCH_RESULT_SENDED", () => {
-    results.value = [];
-})
-
+const emit = defineEmits(['select', 'hover']);
 </script>
 
 <style scoped>
 .search-suggestions {
     position: absolute;
-    background: var(--secondary);
-    opacity: 0.95;
+    top: calc(100% + 8px);
+    left: 0;
+    right: 0;
     z-index: 1000;
-    width: 100%;
-    top: 40px;
-    max-height: 30vh;
-    overflow-y: auto;
-    border-radius: 10px;
-}
-
-.search-suggestions ul {
-    list-style: none;
-    padding: 0;
     margin: 0;
+    padding: 4px;
+    list-style: none;
+    max-height: 40vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    background: var(--secondary);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
 }
 
-.search-suggestions li {
-    padding: 10px;
+.search-suggestion {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 36px;
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
     cursor: pointer;
 }
 
-.search-icon {
-    display: none;
-    opacity: 0.5;
+.search-suggestion--active {
+    background-color: var(--surface-active);
+    box-shadow: inset 3px 0 0 var(--main);
 }
 
-.search-suggestion:hover .search-icon {
-    display: block !important;
+.suggestion-icon {
+    flex-shrink: 0;
+    font-size: 0.8em;
+    color: var(--text-tertiary);
 }
 
-.search-suggestions li:hover {
-    background: var(--tertiary);
+.suggestion-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-</style>
\ No newline at end of file
+
+.suggestion-go {
+    flex-shrink: 0;
+    font-size: 0.8em;
+    color: var(--text-secondary);
+    transform: rotate(90deg);
+    opacity: 0;
+}
+
+.search-suggestion--active .suggestion-go {
+    opacity: 1;
+}
+</style>
diff --git a/src/components/Widget/View/SearchResults.vue b/src/components/Widget/View/SearchResults.vue
index cf6eafe..93c1acc 100644
--- a/src/components/Widget/View/SearchResults.vue
+++ b/src/components/Widget/View/SearchResults.vue
@@ -1,26 +1,54 @@
 <template>
     <div class="search-playlist" v-if="props.playlist">
         <PlaylistHeader :results="props.results" />
-        <div class="search-playlist-results">
-            <div class="search-results-container">
-            <VideoComposable v-for="result in props.results.songs" :key="result.id" :video="result"/>
-            </div>
+        <div class="search-scroll">
+            <ul v-if="songs.length > 0" class="search-results-grid" aria-label="Titres de la playlist">
+                <li v-for="(result, index) in songs" :key="`${index}:${result.id ?? result.url}`">
+                    <VideoComposable :video="result"/>
+                </li>
+            </ul>
+            <EmptyState v-else icon="fa-solid fa-compact-disc" title="Playlist vide">
+                Cette playlist ne contient aucun titre lisible.
+            </EmptyState>
         </div>
     </div>
-    <div v-else-if="props.results?.length > 0" class="search-results">
-        <div class="search-results-container">
-            <VideoComposable v-for="result in props.results" :key="result.id" :video="result"/>
+    <section v-else-if="list.length > 0" class="search-results" :aria-labelledby="headingId">
+        <header class="search-header">
+            <h2 :id="headingId" class="u-view-title">
+                <Icon icon="fa-solid fa-magnifying-glass" aria-hidden="true" />
+                <span class="search-title">Résultats pour « {{ query }} »</span>
+            </h2>
+            <p class="search-count">{{ list.length }} résultat{{ list.length > 1 ? 's' : '' }}</p>
+        </header>
+        <div class="search-scroll">
+            <ul class="search-results-grid" aria-label="Résultats de recherche">
+                <li v-for="(result, index) in list" :key="`${index}:${result.id ?? result.url}`">
+                    <VideoComposable :video="result"/>
+                </li>
+            </ul>
         </div>
-    </div>
-    <div v-else class="search-error">
-        <Icon icon="fa-circle-question" />
-        <p>Aucun résultat trouvé pour <strong style="word-wrap: break-word;">"{{ query }}"</strong></p>
+    </section>
+    <div v-else class="search-empty" role="status">
+        <EmptyState icon="fa-solid fa-circle-question" title="Aucun résultat">
+            Rien trouvé pour <strong class="search-query">« {{ query }} »</strong>.
+            Essayez d'autres mots-clés, ou collez directement un lien YouTube, Spotify ou SoundCloud.
+            <template #actions>
+                <Button size="sm" variant="secondary" icon="fa-solid fa-magnifying-glass" @click="Events.emit('SEARCH_FOCUS')">Modifier la recherche</Button>
+            </template>
+        </EmptyState>
     </div>
 </template>
 <script setup>
-import { ref } from 'vue';
+/**
+ * Vue des résultats de recherche (titres, ou une playlist trouvée par lien avec son en-tête).
+ * Props : results (liste de titres, ou playlist { songs, … } si `playlist`), query, playlist.
+ */
+import { computed, useId } from 'vue';
 import VideoComposable from '@/components/Widget/VideoComposable.vue';
 import PlaylistHeader from '@/components/Widget/View/Search/PlaylistHeader.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
+import Button from '@/components/UI/Button.vue';
+import Events from '@/utils/Events';
 
 const props = defineProps({
     results: {
@@ -34,60 +62,81 @@ const props = defineProps({
         type: Boolean,
         default: false
     }
-    
 });
 
+const headingId = `search-${useId()}`;
+const list = computed(() => (Array.isArray(props.results) ? props.results.filter(Boolean) : []));
+const songs = computed(() => (Array.isArray(props.results?.songs) ? props.results.songs.filter(Boolean) : []));
 </script>
-<style lang="css" scoped>
-.search-results {
-    flex: 1;
-    display: flex;
-    overflow-y: auto;
-    position: relative;
-}
-
-.search-results-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill,minmax(200px,auto));
-    gap: 10px;
-    position: absolute;
-    width: 100%;
-}
-
+<style scoped>
+.search-results,
 .search-playlist {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    flex: 1;
+    gap: 12px;
+    min-width: 0;
+    min-height: 0;
 }
 
+.search-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+    /* Laisse la place au bouton de fermeture de la vue */
+    padding-right: 36px;
+}
 
-.search-playlist-results {
-    display: grid;
-    grid-template-columns: repeat(auto-fill,minmax(200px,auto));
-    gap: 10px;
+.search-title {
+    overflow-wrap: anywhere;
+}
+
+.search-count {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.search-scroll {
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
-    position: relative;
-
+    overscroll-behavior: contain;
+    padding-right: 4px;
 }
 
+.search-results-grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+    gap: 16px 12px;
+}
 
+.search-results-grid > li {
+    min-width: 0;
+}
 
-
-.search-error {
+.search-empty {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 10px;
-    font-size: 1.5em;
-    color: var(--text-secondary);
-    
 }
 
-.search-error p {
-    margin: 0;
-    max-width: 50%;
+.search-query {
+    color: var(--text);
+    overflow-wrap: anywhere;
 }
-</style>
\ No newline at end of file
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .search-results-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 12px 10px;
+    }
+}
+</style>
diff --git a/src/components/Widget/View/UploadFiles.vue b/src/components/Widget/View/UploadFiles.vue
index eb4d87c..60273fb 100644
--- a/src/components/Widget/View/UploadFiles.vue
+++ b/src/components/Widget/View/UploadFiles.vue
@@ -1,125 +1,238 @@
 <template>
-    <section class="upload-files">
-        <div class="files-header">
-            <h2><Icon icon="fa-folder"/> Mes fichiers</h2>
-            <Box box-class="area-container" padding="close" level="second">
-                <div class="upload-area">
-                    <Button :color-lower="status === 'download'" :disabled="status === 'download'" class="upload-button" @click="uploadFile()" icon="fa-upload"> Ajouter des fichiers</Button>
-                    <p v-if="status === 'download'" class="upload-file-name" ref="uploadStatus"><Icon icon='fa-spinner' spin-pulse/> Téléchargement en cours...</p>
-                    <p v-else-if="status === 'error'" class="upload-status" ref="uploadStatus"><Error>Erreur lors du téléchargement</Error></p>
-                    <p v-else-if="status === 'toohigh'" class="upload-status" ref="uploadStatus"><Error>Le fichier est trop volumineux</Error></p>
-                    <p v-else-if="status === 'success'" class="upload-status" ref="uploadStatus"><Success>Fichier téléchargé avec succès</Success></p>
-                    <p v-else class="upload-status" ref="uploadStatus">Aucun fichier séléctionné</p>
-                </div>
-                <p class="text-secondary infosup"><Icon icon="fa-circle-info"/> Ce système n'est pas un stockage permanent de données car il dépend du CDN de Discord. Vos fichiers peuvent exprirer à tout moment.</p>
-            </Box>
-        </div>
-        <div  v-if="myFiles && myFiles.length > 0" class="uploaded-files-container">
-        <div class="uploaded-files">
-            <span v-for="file in myFiles" :key="file.id"><VideoComposable  :video="file" delete/></span>
-        </div>
-        </div>
-        <p v-else-if="isLoading" class="none"><Icon icon="fa-spinner" spin-pulse/> Chargement des fichiers...</p>
-        <p v-else class="none"><Icon icon="fa-circle-xmark"/> Aucun fichier enregistré</p>
-        <Modal icon="fa-upload" title="Uploader un fichier" ref="uploadModal">
-            <p>Etes-vous sûr de vouloir uploader ces fichiers ?</p>
-            <p class="text-secondary">Ces fichiers seront stockés sur le CDN de Discord et seront à jamais accessibles. Ne diffusez rien de sensible.</p>
-            <p v-if="fileSelected.length > 0" v-for="value in fileSelected" class="upload-modal-name"><Icon icon="fa-file"/> {{ value.name }}</p>
-            <div class="upload-actions">
-                <Button @click="closeModal()">Annuler</Button>
-                <Button @click="confirmUpload()">Confirmer</Button>
+    <section class="upload-files" :aria-labelledby="headingId">
+        <header class="files-header">
+            <h2 :id="headingId" class="u-view-title">
+                <Icon icon="fa-solid fa-folder-open" aria-hidden="true"/>
+                <span>Mes fichiers</span>
+                <span v-if="!isLoading && myFiles.length > 0" class="files-count">{{ myFiles.length }}</span>
+            </h2>
+        </header>
+
+        <div
+            :class="['dropzone', { 'dropzone--over': dragOver, 'dropzone--busy': status === 'download' }]"
+            @dragenter.prevent="onDragEnter"
+            @dragover.prevent="onDragOver"
+            @dragleave="onDragLeave"
+            @drop.prevent="onDrop"
+        >
+            <span class="dropzone__icon" aria-hidden="true"><Icon icon="fa-solid fa-cloud-arrow-up"/></span>
+            <div class="dropzone__text">
+                <p class="dropzone__title">Glissez vos fichiers audio ici</p>
+                <p class="dropzone__hint">MP3, WAV ou OGG · 300 Mo maximum par fichier</p>
             </div>
-        </Modal> 
+            <input
+                ref="fileInput"
+                class="sr-only"
+                type="file"
+                accept=".mp3,.wav,.ogg,audio/mpeg,audio/wav,audio/ogg"
+                multiple
+                tabindex="-1"
+                aria-hidden="true"
+                @change="onFilesChosen"
+            />
+            <Button
+                class="upload-button"
+                icon="fa-solid fa-upload"
+                :loading="status === 'download'"
+                @click="fileInput.click()"
+            >{{ status === 'download' ? 'Envoi en cours…' : 'Choisir des fichiers' }}</Button>
+        </div>
+
+        <div class="upload-status" aria-live="polite">
+            <p v-if="status === 'download'" class="status-progress">
+                <Spinner size="sm" :label="progressLabel" visible-label />
+            </p>
+            <Error v-else-if="status === 'error'">{{ statusDetail || "Erreur lors de l'envoi d'un fichier." }}</Error>
+            <Error v-else-if="status === 'toohigh'">{{ statusDetail || 'Un fichier est trop volumineux (300 Mo maximum).' }}</Error>
+            <Error v-else-if="status === 'invalid'">Seuls les fichiers MP3, WAV et OGG sont acceptés.</Error>
+            <Success v-else-if="status === 'success'">{{ statusDetail || 'Fichiers envoyés avec succès.' }}</Success>
+        </div>
+
+        <p class="files-note">
+            <Icon icon="fa-solid fa-circle-info" aria-hidden="true"/>
+            Ce n'est pas un stockage permanent : les fichiers sont hébergés sur le CDN de Discord et peuvent expirer à tout moment.
+        </p>
+
+        <div class="files-scroll">
+            <ul v-if="myFiles.length > 0" class="uploaded-files" aria-label="Fichiers envoyés">
+                <li v-for="file in myFiles" :key="file.id">
+                    <VideoComposable :video="file" delete/>
+                </li>
+            </ul>
+            <div v-else-if="isLoading" class="files-state">
+                <Spinner label="Chargement des fichiers…" visible-label />
+            </div>
+            <div v-else class="files-state">
+                <EmptyState icon="fa-solid fa-file-audio" title="Aucun fichier">
+                    Envoyez vos propres fichiers audio pour les écouter dans un salon vocal.
+                </EmptyState>
+            </div>
+        </div>
+
+        <Modal icon="fa-solid fa-upload" title="Envoyer des fichiers" ref="uploadModal" size="sm" @close="onModalClose">
+            <p class="modal-text">Envoyer {{ fileSelected.length > 1 ? `ces ${fileSelected.length} fichiers` : 'ce fichier' }} ?</p>
+            <ul class="upload-modal-list">
+                <li v-for="(value, index) in fileSelected" :key="`${index}-${value.name}`" class="upload-modal-name">
+                    <Icon icon="fa-solid fa-file-audio" aria-hidden="true"/>
+                    <span class="upload-modal-file u-ellipsis">{{ value.name }}</span>
+                    <span class="upload-modal-size">{{ formatSize(value.size) }}</span>
+                </li>
+            </ul>
+            <p class="modal-hint">Les fichiers sont stockés sur le CDN de Discord et accessibles à quiconque possède le lien. N'envoyez rien de sensible.</p>
+            <template #footer>
+                <Button variant="secondary" @click="closeModal()">Annuler</Button>
+                <Button icon="fa-solid fa-upload" @click="confirmUpload()">Envoyer</Button>
+            </template>
+        </Modal>
     </section>
 </template>
 <script setup>
-import Box from '@/components/UI/Box.vue';
+/**
+ * Vue « Mes fichiers » : envoi de fichiers audio (bouton ou glisser-déposer), liste des fichiers envoyés.
+ * Requêtes : /UPLOAD/FILE {name, file: ArrayBuffer} → {url, name} | "TOOHIGH" | false, /UPLOAD/FILES,
+ * /UPLOAD/FILE/DELETE (via l'événement du bus video:delete émis par VideoComposable).
+ */
+import { computed, onMounted, onUnmounted, ref, useId } from 'vue';
 import Button from '@/components/UI/Button.vue';
 import Modal from '@/components/UI/Modal.vue';
 import Success from '@/components/UI/Success.vue';
 import Error from '@/components/UI/Error.vue';
+import Spinner from '@/components/UI/Spinner.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
 import VideoComposable from '@/components/Widget/VideoComposable.vue';
 import { IORequest } from '@/utils/IORequest';
-import { onMounted, onUnmounted, ref } from 'vue';
 import Events from '@/utils/Events';
 
+const MAX_SIZE = 300 * 1024 * 1024;
+const ACCEPTED = /\.(mp3|wav|ogg)$/i;
+
+const headingId = `files-${useId()}`;
+const fileInput = ref(null);
 const fileSelected = ref([]);
+// false | 'download' | 'error' | 'toohigh' | 'invalid' | 'success'
 const status = ref(false);
+const statusDetail = ref('');
+const progress = ref({ done: 0, total: 0 });
 const uploadModal = ref(null);
 const myFiles = ref([]);
 const isLoading = ref(true);
+const dragOver = ref(false);
+let dragDepth = 0;
+let confirmed = false;
+
+const progressLabel = computed(() => `Envoi en cours (${Math.min(progress.value.done + 1, progress.value.total)} sur ${progress.value.total})…`);
 
 onMounted(() => {
     refreshUploadedFiles();
     Events.on("video:delete", deleteFile);
-})
+});
 
 onUnmounted(() => {
     Events.off("video:delete", deleteFile);
 });
 
 function deleteFile(data) {
-    IORequest('/UPLOAD/FILE/DELETE', (response) => {
-        refreshUploadedFiles();
+    IORequest('/UPLOAD/FILE/DELETE', () => {
+        refreshUploadedFiles(false);
     }, data.video);
 }
 
-function uploadFile() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.mp3,.wav,.ogg'; // Accept audio files
-    input.multiple = true;
-    input.onchange = (event) => {
-       const files = Array.from(event.target.files);
-       if (files.length > 0) {
-            fileSelected.value = files;
-            console.log(`Files selected:`, files.map(f => f.name));
-            input.value = '';
-            input.remove();
-            uploadModal.value.open();
-        } else {
-            fileSelected.value = [];
-        }
-    };
-    input.click();
+function formatSize(bytes) {
+    const size = Number(bytes) || 0;
+    if (size < 1024 * 1024) return `${Math.max(1, Math.round(size / 1024))} Ko`;
+    return `${(size / (1024 * 1024)).toFixed(1).replace('.', ',')} Mo`;
+}
+
+function selectFiles(list) {
+    const files = Array.from(list || []);
+    if (files.length === 0) return;
+    const accepted = files.filter((file) => ACCEPTED.test(file.name));
+    if (accepted.length === 0) {
+        status.value = 'invalid';
+        return;
+    }
+    fileSelected.value = accepted;
+    status.value = false;
+    uploadModal.value.open();
+}
+
+function onFilesChosen(event) {
+    selectFiles(event.target.files);
+    // Permet de rechoisir le même fichier
+    event.target.value = '';
+}
+
+function onDragEnter() {
+    dragDepth++;
+    dragOver.value = true;
+}
+
+function onDragOver(event) {
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+}
+
+function onDragLeave() {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (dragDepth === 0) dragOver.value = false;
+}
+
+function onDrop(event) {
+    dragDepth = 0;
+    dragOver.value = false;
+    if (status.value === 'download') return;
+    selectFiles(event.dataTransfer?.files);
 }
 
 async function confirmUpload() {
     if (fileSelected.value.length === 0) return;
-    status.value = 'download';
+    const files = [...fileSelected.value];
+    confirmed = true;
     uploadModal.value.close();
+    status.value = 'download';
+    statusDetail.value = '';
+    progress.value = { done: 0, total: files.length };
 
-    let errorOccurred = false;
+    let errorStatus = null;
+    let sent = 0;
 
-    for (const file of fileSelected.value) {
+    for (const file of files) {
         try {
-            const fileBuffer = await readFileAsArrayBuffer(file);
-
-            if (fileBuffer.byteLength > 300 * 1024 * 1024) {
-                status.value = 'toohigh';
-                errorOccurred = true;
+            if (file.size > MAX_SIZE) {
+                errorStatus = 'toohigh';
+                statusDetail.value = `« ${file.name} » est trop volumineux (300 Mo maximum).`;
                 continue;
             }
-
-            await new Promise(resolve => {
+            const fileBuffer = await readFileAsArrayBuffer(file);
+            await new Promise((resolve) => {
                 IORequest('/UPLOAD/FILE', (response) => {
                     if (!response || response === "TOOHIGH") {
-                        errorOccurred = true;
-                        status.value = (response === "TOOHIGH") ? 'toohigh' : 'error';
+                        errorStatus = response === "TOOHIGH" ? 'toohigh' : 'error';
+                        statusDetail.value = response === "TOOHIGH"
+                            ? `« ${file.name} » est trop volumineux.`
+                            : `Échec de l'envoi de « ${file.name} ».`;
+                    } else {
+                        sent++;
                     }
                     resolve();
                 }, { name: file.name, file: fileBuffer });
             });
-
         } catch (err) {
             console.error("Erreur upload fichier:", file.name, err);
-            errorOccurred = true;
+            errorStatus = 'error';
+            statusDetail.value = `Lecture impossible de « ${file.name} ».`;
+        } finally {
+            progress.value = { ...progress.value, done: progress.value.done + 1 };
         }
     }
 
-    status.value = errorOccurred ? status.value : 'success';
-    refreshUploadedFiles();
+    if (errorStatus) {
+        status.value = errorStatus;
+    } else {
+        status.value = 'success';
+        statusDetail.value = sent > 1 ? `${sent} fichiers envoyés.` : 'Fichier envoyé.';
+    }
     fileSelected.value = [];
+    refreshUploadedFiles(false);
 }
 
 // Petite fonction utilitaire pour transformer FileReader en promesse
@@ -132,154 +245,227 @@ function readFileAsArrayBuffer(file) {
     });
 }
 
-
-
 function closeModal() {
     uploadModal.value.close();
-    fileSelected.value = null;
-    status.value = false;
 }
 
-function refreshUploadedFiles() {
-    myFiles.value = [];
-    isLoading.value = true;
+function onModalClose() {
+    // Fermée sans confirmer (Annuler, Échap, clic extérieur) : sélection abandonnée
+    if (!confirmed) fileSelected.value = [];
+    confirmed = false;
+}
+
+// showLoader = false : rafraîchissement discret (la liste reste affichée pendant la requête)
+function refreshUploadedFiles(showLoader = true) {
+    if (showLoader) {
+        myFiles.value = [];
+        isLoading.value = true;
+    }
     IORequest('/UPLOAD/FILES', (response) => {
-        if (response) {
-            myFiles.value = response;
-        } else {
-            myFiles.value = [];
-        }
+        myFiles.value = Array.isArray(response) ? response : [];
         isLoading.value = false;
     });
 }
-
 </script>
 <style scoped>
-
-.infosup {
-    margin: 0 10px 10px 10px;
-    text-align: justify;
-}
-
-.uploaded-files {
-    flex: 1;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-    position: absolute;
-    width: 100%;
-}
-
-.uploaded-files-container {
-    position: relative;
-    flex: 1;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-}
-
-.none {
-    text-align: center;
-    font-size: 1.5em;
-    color: var(--text-secondary);
-    opacity: 0.8;
-    flex: 1;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-}
-
-.files-header {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 5px;
-}
-
-.text-secondary {
-    font-size: 0.8em;
-    color: var(--text-secondary);
-    opacity: 0.8;
-}
-
-.upload-actions {
-    display: flex;
-    gap: 10px;
-}
-
-.upload-actions Button {
-    width: 100%;
-}
-
-.upload-status {
-    font-size: 0.9em;
-    color: var(--text-secondary);
-    opacity: 0.8;
-}
-
-.upload-file-name {
-    font-size: 1em;
-    color: var(--text-primary);
-    font-weight: bold;
-}
-
-.upload-modal-name {
-    font-size: 0.8em;
-    color: var(--text-primary);
-    background-color: var(--tertiary);
-    padding: 5px 10px;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.upload-area {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    padding: 10px 10px;
-    gap: 10px;
-}
-
 .upload-files {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 12px;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+}
+
+.files-header {
+    /* Laisse la place au bouton de fermeture de la vue */
+    padding-right: 36px;
+}
+
+.files-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 22px;
+    padding: 0 8px;
+    box-sizing: border-box;
+    border-radius: var(--radius-pill);
+    background-color: color-mix(in srgb, var(--text) 10%, transparent);
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.dropzone {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 16px;
+    border: 2px dashed var(--border);
+    border-radius: var(--radius);
+    background-color: var(--tertiary);
+    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
+}
+
+.dropzone--over {
+    border-color: var(--main);
+    background-color: color-mix(in srgb, var(--main) 12%, var(--tertiary));
+}
+
+.dropzone--busy {
+    opacity: 0.85;
+}
+
+.dropzone__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1.2em;
+}
+
+.dropzone__text {
+    flex: 1;
+    min-width: 0;
+}
+
+.dropzone__text p {
+    margin: 0;
+}
+
+.dropzone__title {
+    font-weight: 600;
+}
+
+.dropzone__hint {
+    margin-top: 2px !important;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.upload-button {
+    flex-shrink: 0;
+}
+
+.upload-status:empty {
+    display: none;
+}
+
+.status-progress {
+    margin: 0;
+}
+
+.files-note {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin: 0;
+    font-size: 0.78rem;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
+
+.files-note svg {
+    margin-top: 2px;
+    flex-shrink: 0;
+}
+
+.files-scroll {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-right: 4px;
+    display: flex;
+    flex-direction: column;
+}
+
+.uploaded-files {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+    gap: 16px 12px;
+}
+
+.uploaded-files > li {
+    min-width: 0;
+}
+
+.files-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 160px;
+}
+
+.modal-text {
+    margin: 0;
+    font-weight: 500;
+}
+
+.modal-hint {
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.45;
+    color: var(--text-secondary);
+}
+
+.upload-modal-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 220px;
+    overflow-y: auto;
+}
+
+.upload-modal-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
+    background-color: var(--tertiary);
+    font-size: 0.85rem;
+}
+
+.upload-modal-file {
     flex: 1;
 }
 
-@media screen and (max-width: 768px), 
+.upload-modal-size {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+@media screen and (max-width: 768px),
        screen and (max-height: 607px) {
-    .upload-area {
+    .dropzone {
         flex-direction: column;
-    }
-
-    .upload-button {
-        order: 1;
-    }
-
-    .area-container {
-        width: 100%;
+        text-align: center;
     }
 
     .upload-button {
         width: 100%;
     }
 
-    .upload-actions {
-        flex-direction: column;
+    .uploaded-files {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     }
 }
-
-p {
-    margin: 0;
-}
-
-.files-header h2 {
-    margin: 0;
-    font-size: 1.5em;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main.js b/src/main.js
index b1d189e..b22453b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,11 +22,10 @@ let app = createApp(App)
 let head = createHead({
     init: [{
         title: 'Subsonics',
+        // charset, viewport et theme-color sont déclarés directement dans index.html
         meta: [
             { name: 'description', content: 'Interface de gestion du Bot Discord Subsonics' },
-            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-            { name: "charset", content: "utf-8" },
-        ]   
+        ]
     }]
 })
 let pinia = createPinia()
diff --git a/src/routes.js b/src/routes.js
index 0cd83d0..265c91a 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -38,7 +38,6 @@ router.beforeEach((to, from, next) => {
   console.log(`Navigation de ${from.path} vers ${to.path}`)
   const loginStore = useLoginStore()
   const globalStore = useGlobalStore()
-  console.log(from.matched)
   events.clear()
   console.log("Clearing events")
   if(from.matched.length == 0) {
diff --git a/src/stores/globalStore.js b/src/stores/globalStore.js
index 72d073c..1488dd8 100644
--- a/src/stores/globalStore.js
+++ b/src/stores/globalStore.js
@@ -9,6 +9,8 @@ export const useGlobalStore = defineStore('global', () => {
     const actualServer = ref(null);
     const theme = ref(localStorage.getItem("theme") || "system");  
     const actualPlaylistId = ref(null);
+    // Liste à laquelle appartient la playlist ouverte : les identifiants ne sont uniques que par liste
+    const actualPlaylistScope = ref('personal');
     const currentChannel = ref(null);
     if(theme.value === "system") {
         const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -62,6 +64,7 @@ export const useGlobalStore = defineStore('global', () => {
         setTheme,
         isViewShowing,
         actualPlaylistId,
+        actualPlaylistScope,
         actualServer,
         currentChannel
     };
diff --git a/src/stores/playerStore.js b/src/stores/playerStore.js
index 9c7d8ba..623b310 100644
--- a/src/stores/playerStore.js
+++ b/src/stores/playerStore.js
@@ -261,15 +261,29 @@ export const usePlayerStore = defineStore('player', () => {
     const connection = computed(() => state.value?.connection ?? { status: null, channelId: null, channelName: null });
     const autoLeaveAt = computed(() => state.value?.autoLeaveAt ?? null);
 
-    // Position affichée (ms) : min(durée, ancre + rate * temps écoulé)
-    const positionMs = computed(() => {
+    // Position extrapolée à l'instant `now` (performance.now()) : même calcul que positionMs,
+    // mais sans attendre le pas de 250 ms (paroles synchronisées, animations fines)
+    function positionAt(now = performance.now()) {
         const a = anchor.value;
         if (!a) return 0;
-        const elapsed = a.rate === 1 ? Math.max(0, clock.value - a.t0) : 0;
+        const elapsed = a.rate === 1 ? Math.max(0, now - a.t0) : 0;
         let ms = a.ms + elapsed;
         if (durationMs.value) ms = Math.min(ms, durationMs.value);
         return Math.max(0, ms);
-    });
+    }
+
+    // Position affichée (ms) : min(durée, ancre + rate * temps écoulé)
+    const positionMs = computed(() => positionAt(clock.value));
+
+    // La position avance-t-elle en ce moment (lecture effective) ?
+    const advancing = computed(() => anchor.value?.rate === 1);
+
+    // Vue des paroles ouverte (posé par Layout/View.vue, lu par le bouton « Paroles » du player).
+    // État d'interface : n'est pas effacé par reset() (changement de serveur, reconnexion).
+    const lyricsOpen = ref(false);
+    function setLyricsOpen(value) {
+        lyricsOpen.value = !!value;
+    }
 
     // Texte « Chargement… (WARP/direct, essai n) »
     const loadingLabel = computed(() => {
@@ -308,7 +322,11 @@ export const usePlayerStore = defineStore('player', () => {
         connection,
         autoLeaveAt,
         positionMs,
+        advancing,
         loadingLabel,
+        lyricsOpen,
+        positionAt,
+        setLyricsOpen,
         ingest,
         setOffline,
         reset,
diff --git a/src/stores/playlistStore.js b/src/stores/playlistStore.js
new file mode 100644
index 0000000..840a9b3
--- /dev/null
+++ b/src/stores/playlistStore.js
@@ -0,0 +1,938 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { socket } from '@/socket';
+import Events from '@/utils/Events';
+import { IORequestAck, IORequestAsync } from '@/utils/IORequest';
+import { useGlobalStore } from './globalStore';
+import { useUserStore } from './userStore';
+import {
+    normalizeScope,
+    playlistCreatedTime,
+    playlistUpdatedTime,
+    playlistSongCount,
+    playlistDuration
+} from '@/components/Widget/Playlist/playlistMeta';
+
+/**
+ * Playlists personnelles (« personal ») et partagées du serveur actif (« guild »).
+ *
+ * Toutes les actions renvoient une Promise qui ne rejette jamais :
+ *   { ok: true, playlist? , settings? } | { ok: false, error: CODE, message }
+ * CODE : NO_GUILD, DISABLED, FORBIDDEN, NOT_FOUND, INVALID_PARAMS, LIMIT, FAILED, TIMEOUT.
+ * Les réponses du serveur sont appliquées tout de suite ; les poussées /PLAYLISTS/UPDATE et
+ * /GUILD/PLAYLISTS/UPDATE déclenchent ensuite un rechargement (regroupé) de la liste concernée.
+ */
+
+export const SORT_MODES = ['manual', 'name', 'created', 'updated', 'songs', 'duration'];
+export const SORT_LABELS = {
+    manual: 'Ordre personnalisé',
+    name: 'Nom',
+    created: 'Date de création',
+    updated: 'Dernière modification',
+    songs: 'Nombre de titres',
+    duration: 'Durée'
+};
+// Sens proposé quand on choisit un mode (le plus utile en premier)
+export const SORT_DEFAULT_DIR = {
+    manual: 'asc',
+    name: 'asc',
+    created: 'desc',
+    updated: 'desc',
+    songs: 'desc',
+    duration: 'desc'
+};
+
+const SORT_KEY = 'playlistSort';
+const SCOPE_KEY = 'playlistScope';
+const TIMEOUT = 10000;
+// Import / mise à jour depuis un lien : une playlist Spotify convertie peut prendre près d'une minute
+export const IMPORT_TIMEOUT = 90000;
+
+const ERROR_MESSAGES = {
+    NO_GUILD: "Aucun serveur actif ou accès refusé à ce serveur.",
+    DISABLED: "Les playlists partagées sont désactivées sur ce serveur.",
+    FORBIDDEN: "Vous n'avez pas les droits nécessaires sur les playlists de ce serveur.",
+    NOT_FOUND: "Playlist introuvable.",
+    INVALID_PARAMS: "Paramètres invalides.",
+    LIMIT: "Limite atteinte.",
+    FAILED: "L'opération a échoué.",
+    TIMEOUT: "Le serveur n'a pas répondu à temps. Réessayez dans un instant."
+};
+
+function failure(error, message) {
+    const code = typeof error === 'string' && error ? error : 'FAILED';
+    return { ok: false, error: code, message: message || ERROR_MESSAGES[code] || ERROR_MESSAGES.FAILED };
+}
+
+function readStorage(key) {
+    try {
+        return localStorage.getItem(key);
+    } catch {
+        return null;
+    }
+}
+
+function writeStorage(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    } catch {
+        // Stockage indisponible : la préférence ne vaut que pour cette session
+    }
+}
+
+function validSort(value) {
+    const mode = SORT_MODES.includes(value?.mode) ? value.mode : 'manual';
+    const dir = value?.dir === 'desc' ? 'desc' : value?.dir === 'asc' ? 'asc' : SORT_DEFAULT_DIR[mode];
+    return { mode, dir };
+}
+
+function loadSort() {
+    let saved = null;
+    try {
+        saved = JSON.parse(readStorage(SORT_KEY) || 'null');
+    } catch {
+        saved = null;
+    }
+    return {
+        personal: validSort(saved?.personal),
+        guild: validSort(saved?.guild)
+    };
+}
+
+const collator = new Intl.Collator('fr', { sensitivity: 'base', numeric: true });
+
+const COMPARATORS = {
+    name: (a, b) => collator.compare(a?.title || '', b?.title || ''),
+    created: (a, b) => playlistCreatedTime(a) - playlistCreatedTime(b),
+    updated: (a, b) => playlistUpdatedTime(a) - playlistUpdatedTime(b),
+    songs: (a, b) => playlistSongCount(a) - playlistSongCount(b),
+    duration: (a, b) => playlistDuration(a) - playlistDuration(b)
+};
+
+/** Tri stable (ordre enregistré en cas d'égalité) ; le mode « manual » garde l'ordre du serveur */
+export function sortPlaylists(list, sort) {
+    if (!Array.isArray(list)) return [];
+    const compare = COMPARATORS[sort?.mode];
+    if (!compare) return list;
+    const factor = sort.dir === 'desc' ? -1 : 1;
+    return list
+        .map((playlist, index) => ({ playlist, index }))
+        .sort((a, b) => (compare(a.playlist, b.playlist) * factor) || (a.index - b.index))
+        .map((entry) => entry.playlist);
+}
+
+function sameId(a, b) {
+    return a !== null && a !== undefined && b !== null && b !== undefined && String(a) === String(b);
+}
+
+function isPlaylistObject(value) {
+    return !!value && typeof value === 'object' && value.playlistId !== undefined && value.playlistId !== null;
+}
+
+// Copie sérialisable d'une musique (les proxys réactifs et champs d'affichage n'ont rien à faire côté serveur)
+function plainSong(song) {
+    try {
+        return JSON.parse(JSON.stringify(song));
+    } catch {
+        return song;
+    }
+}
+
+async function ackRequest(event, data, timeout = TIMEOUT) {
+    try {
+        return { response: await IORequestAck(event, data, timeout) };
+    } catch {
+        return { timeout: true };
+    }
+}
+
+// Réponse « playlist | false » des routes personnelles
+function personalPlaylistResult(raw, message) {
+    if (raw.timeout) return failure('TIMEOUT');
+    if (isPlaylistObject(raw.response)) return { ok: true, playlist: raw.response };
+    return failure('FAILED', message);
+}
+
+// Réponse « true | false » des routes personnelles
+function personalBoolResult(raw, message) {
+    if (raw.timeout) return failure('TIMEOUT');
+    return raw.response === true ? { ok: true } : failure('FAILED', message);
+}
+
+// Enveloppe {ok, ...} des routes partagées (false = exception côté serveur)
+function guildEnvelope(raw) {
+    if (raw.timeout) return failure('TIMEOUT');
+    const response = raw.response;
+    if (response && typeof response === 'object' && response.ok === true) return response;
+    if (response && typeof response === 'object') return failure(response.error, response.message);
+    return failure('FAILED');
+}
+
+export const usePlaylistStore = defineStore('playlists', () => {
+    const globalStore = useGlobalStore();
+    const userStore = useUserStore();
+
+    // === ÉTAT ===
+    const personal = ref([]);
+    const guild = ref([]);
+    const personalLoaded = ref(false);
+    const guildLoaded = ref(false);
+    const personalLoading = ref(false);
+    const guildLoading = ref(false);
+    const personalError = ref(null);
+    const guildError = ref(null);
+    // Serveur auquel appartient la liste « guild » chargée
+    const guildId = ref(null);
+    const guildSettings = ref({ enabled: false, editors: 'members' });
+    const canEdit = ref(false);
+    const canManage = ref(false);
+    // Liste affichée dans la barre latérale (préférence de l'utilisateur, mémorisée)
+    const scope = ref(normalizeScope(readStorage(SCOPE_KEY)));
+    const sort = ref(loadSort());
+    const toasts = ref([]);
+    // Demandes d'ouverture des modales globales (Widget/Playlist/PlaylistHost.vue) : {id, scope} / {id, video}
+    const createRequest = ref(null);
+    const saveRequest = ref(null);
+
+    // === LECTURE ===
+    const guildEnabled = computed(() => !!guildSettings.value.enabled);
+
+    // Liste réellement affichée : « guild » seulement si l'option est active (ou pas encore connue)
+    const activeScope = computed(() => {
+        if (scope.value !== 'guild') return 'personal';
+        if (!guildLoaded.value) return 'guild';
+        return guildEnabled.value ? 'guild' : 'personal';
+    });
+
+    const sortedPersonal = computed(() => sortPlaylists(personal.value, sort.value.personal));
+    const sortedGuild = computed(() => sortPlaylists(guild.value, sort.value.guild));
+
+    const counts = computed(() => ({ personal: personal.value.length, guild: guild.value.length }));
+
+    // Modérateur du serveur actif (label MOD_<id>), propriétaire ou administrateur du bot
+    const isModerator = computed(() => {
+        const info = userStore.userInfo;
+        const server = globalStore.actualServer;
+        const gid = guildId.value || server?.id || globalStore.lastGuild;
+        if (!info || !gid) return false;
+        const labels = Array.isArray(info.labels) ? info.labels : [];
+        if (labels.includes('ADMIN') || labels.includes('MOD_' + gid)) return true;
+        return !!server && server.id === gid && !!info.identity?.id && info.identity.id === server.owner;
+    });
+
+    function listRef(target) {
+        return normalizeScope(target) === 'guild' ? guild : personal;
+    }
+
+    function listFor(target) {
+        return listRef(target).value;
+    }
+
+    function sortedFor(target) {
+        return normalizeScope(target) === 'guild' ? sortedGuild.value : sortedPersonal.value;
+    }
+
+    function findPlaylist(target, id) {
+        if (id === null || id === undefined) return null;
+        return listFor(target).find((playlist) => sameId(playlist.playlistId, id)) || null;
+    }
+
+    function isLoaded(target) {
+        return normalizeScope(target) === 'guild' ? guildLoaded.value : personalLoaded.value;
+    }
+
+    function isOpen(target, id) {
+        return globalStore.actualPlaylistScope === normalizeScope(target) && sameId(globalStore.actualPlaylistId, id);
+    }
+
+    // Playlist ouverte dans la vue, relue en direct dans le store (null si fermée ou disparue)
+    const actualPlaylist = computed(() => findPlaylist(globalStore.actualPlaylistScope, globalStore.actualPlaylistId));
+
+    // === DROITS ===
+    function canEditScope(target) {
+        return normalizeScope(target) === 'guild' ? guildEnabled.value && canEdit.value : true;
+    }
+
+    function canReorder(target) {
+        return canEditScope(target);
+    }
+
+    function canDeletePlaylist(target, playlist) {
+        if (normalizeScope(target) !== 'guild') return true;
+        if (!guildEnabled.value || !playlist) return false;
+        const me = userStore.userInfo?.identity?.id;
+        return isModerator.value || (!!me && playlist.createdBy?.id === me);
+    }
+
+    // Partager une de mes playlists sur le serveur actif
+    const canShareToGuild = computed(() => guildEnabled.value && canEdit.value);
+
+    // === ÉCRITURE LOCALE ===
+    function setPersonal(list) {
+        personal.value = list;
+        userStore.setPlaylists(list);
+        // Ancien événement, gardé pour les éventuels écouteurs historiques
+        Events.emit('playlist:init', list);
+    }
+
+    function setList(target, list) {
+        if (normalizeScope(target) === 'guild') guild.value = list;
+        else setPersonal(list);
+    }
+
+    function upsert(target, playlist) {
+        if (!isPlaylistObject(playlist)) return;
+        const list = listFor(target);
+        const index = list.findIndex((item) => sameId(item.playlistId, playlist.playlistId));
+        const next = list.slice();
+        if (index === -1) next.push(playlist);
+        else next[index] = playlist;
+        setList(target, next);
+    }
+
+    function removeLocal(target, id) {
+        const list = listFor(target);
+        const next = list.filter((item) => !sameId(item.playlistId, id));
+        if (next.length !== list.length) setList(target, next);
+    }
+
+    // Ferme la vue si la playlist affichée n'existe plus (supprimée ici, ailleurs, ou option désactivée)
+    function closeIfOpen(target, id) {
+        if (!isOpen(target, id)) return;
+        globalStore.actualPlaylistId = null;
+        Events.emit('VIEW_RESET');
+    }
+
+    function checkOpenStillExists(target) {
+        const openScope = globalStore.actualPlaylistScope;
+        const openId = globalStore.actualPlaylistId;
+        if (!openId || openScope !== normalizeScope(target)) return;
+        if (findPlaylist(target, openId)) return;
+        closeIfOpen(target, openId);
+        notify("Cette playlist n'est plus disponible.", { tone: 'info' });
+    }
+
+    // === RECHARGEMENTS ===
+    // Une modification en cours sur une liste diffère son rechargement (évite d'afficher un état intermédiaire)
+    const pending = { personal: 0, guild: 0 };
+    const deferred = { personal: false, guild: false };
+    // Après une reconnexion, la liste personnelle est rechargée à la prochaine entrée sur un serveur
+    let personalStale = false;
+
+    async function track(target, task) {
+        const key = normalizeScope(target);
+        pending[key]++;
+        try {
+            return await task();
+        } finally {
+            pending[key]--;
+            if (pending[key] === 0 && deferred[key]) {
+                deferred[key] = false;
+                if (key === 'guild') fetchGuild();
+                else fetchPersonal();
+            }
+        }
+    }
+
+    let personalInFlight = null;
+    let personalAgain = false;
+
+    /** Recharge mes playlists. @returns {Promise<Array>} la liste (inchangée en cas d'échec) */
+    async function fetchPersonal() {
+        if (pending.personal > 0) {
+            deferred.personal = true;
+            return personal.value;
+        }
+        if (personalInFlight) {
+            personalAgain = true;
+            await personalInFlight;
+            return personal.value;
+        }
+        personalLoading.value = true;
+        personalInFlight = (async () => {
+            const raw = await ackRequest('/PLAYLISTS/LIST', undefined, 15000);
+            if (raw.timeout || !Array.isArray(raw.response)) {
+                personalError.value = raw.timeout ? 'TIMEOUT' : 'FAILED';
+                return;
+            }
+            personalError.value = null;
+            personalStale = false;
+            if (pending.personal > 0) {
+                deferred.personal = true;
+                return;
+            }
+            setPersonal(raw.response);
+            personalLoaded.value = true;
+            checkOpenStillExists('personal');
+        })();
+        try {
+            await personalInFlight;
+        } finally {
+            personalInFlight = null;
+            personalLoading.value = false;
+        }
+        if (personalAgain) {
+            personalAgain = false;
+            return fetchPersonal();
+        }
+        return personal.value;
+    }
+
+    let guildInFlight = null;
+    let guildAgain = false;
+    let guildMismatches = 0;
+
+    function applyGuildAccess(response) {
+        guildId.value = typeof response.guildId === 'string' ? response.guildId : guildId.value;
+        guildSettings.value = {
+            enabled: !!response.settings?.enabled,
+            editors: response.settings?.editors === 'mods' ? 'mods' : 'members'
+        };
+        canEdit.value = !!response.canEdit;
+        canManage.value = !!response.canManage;
+    }
+
+    /** Recharge les playlists du serveur actif (et l'option / les droits). @returns {Promise<Array>} */
+    async function fetchGuild() {
+        if (guildInFlight) {
+            guildAgain = true;
+            await guildInFlight;
+            return guild.value;
+        }
+        guildLoading.value = true;
+        guildInFlight = (async () => {
+            const raw = await ackRequest('/GUILD/PLAYLISTS/LIST', undefined, 15000);
+            const response = guildEnvelope(raw);
+            if (!response.ok) {
+                guildError.value = response.error;
+                if (response.error !== 'TIMEOUT') {
+                    // Pas d'accès au serveur : aucune playlist partagée à montrer
+                    guildSettings.value = { enabled: false, editors: 'members' };
+                    canEdit.value = false;
+                    canManage.value = false;
+                    guild.value = [];
+                    guildLoaded.value = true;
+                    checkOpenStillExists('guild');
+                }
+                return;
+            }
+            // Réponse d'un serveur quitté entre-temps : on redemande pour le serveur affiché (deux fois au plus)
+            if (globalStore.lastGuild && response.guildId && response.guildId !== globalStore.lastGuild && guildMismatches < 2) {
+                guildMismatches++;
+                guildAgain = true;
+                return;
+            }
+            guildMismatches = 0;
+            guildError.value = null;
+            applyGuildAccess(response);
+            if (pending.guild > 0) {
+                deferred.guild = true;
+                return;
+            }
+            guild.value = Array.isArray(response.playlists) ? response.playlists : [];
+            guildLoaded.value = true;
+            checkOpenStillExists('guild');
+        })();
+        try {
+            await guildInFlight;
+        } finally {
+            guildInFlight = null;
+            guildLoading.value = false;
+        }
+        if (guildAgain) {
+            guildAgain = false;
+            return fetchGuild();
+        }
+        return guild.value;
+    }
+
+    /** Recharge une liste ou les deux */
+    function fetchScope(target) {
+        return normalizeScope(target) === 'guild' ? fetchGuild() : fetchPersonal();
+    }
+
+    function refreshAll() {
+        return Promise.all([fetchPersonal(), fetchGuild()]);
+    }
+
+    // Changement de serveur : la liste partagée précédente ne doit pas rester affichée
+    function resetGuild() {
+        if (globalStore.actualPlaylistScope === 'guild') closeIfOpen('guild', globalStore.actualPlaylistId);
+        guild.value = [];
+        guildLoaded.value = false;
+        guildError.value = null;
+        guildId.value = null;
+        guildSettings.value = { enabled: false, editors: 'members' };
+        canEdit.value = false;
+        canManage.value = false;
+    }
+
+    // === ACTIONS ===
+
+    /**
+     * Crée une playlist vide ({name}) ou importée depuis un lien ({url, name?}).
+     * @param {{scope?: 'personal'|'guild', name?: string, url?: string|null}} options
+     */
+    async function createPlaylist({ scope: target = 'personal', name = '', url = null } = {}) {
+        const where = normalizeScope(target);
+        const payload = { name: typeof name === 'string' ? name.trim() : '' };
+        if (url) payload.url = url;
+        const timeout = url ? IMPORT_TIMEOUT : TIMEOUT;
+        return track(where, async () => {
+            if (where === 'guild') {
+                const result = guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/CREATE', payload, timeout));
+                if (result.ok) upsert('guild', result.playlist);
+                return result;
+            }
+            const result = personalPlaylistResult(
+                await ackRequest('/PLAYLISTS/CREATE', payload, timeout),
+                url
+                    ? "Import impossible : vérifiez que le lien mène à une playlist publique (et que vous n'avez pas atteint la limite de 500 playlists), puis réessayez."
+                    : "La playlist n'a pas pu être créée (limite de 500 playlists atteinte ?)."
+            );
+            if (result.ok) upsert('personal', result.playlist);
+            return result;
+        });
+    }
+
+    async function deletePlaylist(target, id) {
+        const where = normalizeScope(target);
+        return track(where, async () => {
+            const result = where === 'guild'
+                ? guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/DELETE', { id: String(id) }))
+                : personalBoolResult(await ackRequest('/PLAYLISTS/DELETE', { id: String(id) }), "La playlist n'a pas pu être supprimée.");
+            if (result.ok) {
+                closeIfOpen(where, id);
+                removeLocal(where, id);
+            }
+            return result;
+        });
+    }
+
+    async function renamePlaylist(target, id, newName) {
+        const where = normalizeScope(target);
+        const payload = { id: String(id), newName: typeof newName === 'string' ? newName.trim() : '' };
+        return track(where, async () => {
+            const result = where === 'guild'
+                ? guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/RENAME', payload))
+                : personalPlaylistResult(await ackRequest('/PLAYLISTS/RENAME', payload), "La playlist n'a pas pu être renommée.");
+            if (result.ok) upsert(where, result.playlist);
+            return result;
+        });
+    }
+
+    async function addSong(target, id, song) {
+        const where = normalizeScope(target);
+        const payload = { id: String(id), song: plainSong(song) };
+        return track(where, async () => {
+            const result = where === 'guild'
+                ? guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/ADD_SONG', payload))
+                : personalPlaylistResult(
+                    await ackRequest('/PLAYLISTS/ADD_SONG', payload),
+                    "Le titre n'a pas pu être ajouté (titre non pris en charge ou limite de 5000 titres atteinte)."
+                );
+            if (result.ok) upsert(where, result.playlist);
+            return result;
+        });
+    }
+
+    /** index (facultatif) : position exacte du titre, utile quand il est présent plusieurs fois */
+    async function removeSong(target, id, songId, index) {
+        const where = normalizeScope(target);
+        const payload = { id: String(id), songId };
+        if (Number.isInteger(index) && index >= 0) payload.index = index;
+        return track(where, async () => {
+            const result = where === 'guild'
+                ? guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/REMOVE_SONG', payload))
+                : personalPlaylistResult(await ackRequest('/PLAYLISTS/REMOVE_SONG', payload), "Le titre n'a pas pu être retiré.");
+            if (result.ok) upsert(where, result.playlist);
+            return result;
+        });
+    }
+
+    /** Déplace un titre (optimiste : affiché tout de suite, annulé si le serveur refuse) */
+    async function moveSong(target, id, from, to) {
+        const where = normalizeScope(target);
+        const current = findPlaylist(where, id);
+        if (!current) return failure('NOT_FOUND');
+        const songs = Array.isArray(current.songs) ? current.songs : [];
+        if (!Number.isInteger(from) || !Number.isInteger(to) || from < 0 || to < 0 || from >= songs.length || to >= songs.length) {
+            return failure('INVALID_PARAMS');
+        }
+        if (from === to) return { ok: true, playlist: current };
+        if (!canEditScope(where)) return failure('FORBIDDEN');
+
+        const moved = songs.slice();
+        const [song] = moved.splice(from, 1);
+        moved.splice(to, 0, song);
+        const optimistic = { ...current, songs: moved };
+        upsert(where, optimistic);
+
+        return track(where, async () => {
+            const payload = { id: String(id), from, to };
+            const result = where === 'guild'
+                ? guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/MOVE_SONG', payload))
+                : personalPlaylistResult(await ackRequest('/PLAYLISTS/MOVE_SONG', payload), "Le titre n'a pas pu être déplacé.");
+            if (result.ok) {
+                upsert(where, result.playlist);
+            } else if (findPlaylist(where, id) === optimistic) {
+                // Rien n'a changé entre-temps : on revient à l'ordre d'avant
+                upsert(where, current);
+            }
+            return result;
+        });
+    }
+
+    /**
+     * Ordre « personnalisé » des playlists : identifiants dans l'ordre voulu (les absents gardent
+     * leur ordre relatif à la suite). Optimiste, annulé si le serveur refuse.
+     */
+    async function reorder(target, order) {
+        const where = normalizeScope(target);
+        if (!Array.isArray(order)) return failure('INVALID_PARAMS');
+        if (!canReorder(where)) return failure('FORBIDDEN');
+
+        const previous = listFor(where);
+        const byId = new Map(previous.map((playlist) => [String(playlist.playlistId), playlist]));
+        const seen = new Set();
+        const next = [];
+        for (const raw of order) {
+            const id = String(raw);
+            if (seen.has(id) || !byId.has(id)) continue;
+            seen.add(id);
+            next.push(byId.get(id));
+        }
+        for (const playlist of previous) {
+            if (!seen.has(String(playlist.playlistId))) next.push(playlist);
+        }
+        if (next.every((playlist, index) => playlist === previous[index])) return { ok: true };
+
+        setList(where, next);
+        const ids = next.map((playlist) => String(playlist.playlistId));
+        return track(where, async () => {
+            const result = where === 'guild'
+                ? guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/REORDER', { order: ids }))
+                : personalBoolResult(await ackRequest('/PLAYLISTS/REORDER', { order: ids }), "Le nouvel ordre n'a pas pu être enregistré.");
+            if (!result.ok && listFor(where) === next) setList(where, previous);
+            return result;
+        });
+    }
+
+    /** Déplace une playlist d'un cran (delta -1 / +1) dans l'ordre personnalisé (alternative clavier au glisser-déposer) */
+    function movePlaylist(target, id, delta) {
+        const list = listFor(target);
+        const from = list.findIndex((playlist) => sameId(playlist.playlistId, id));
+        const to = from + delta;
+        if (from === -1 || to < 0 || to >= list.length) return Promise.resolve({ ok: false, error: 'INVALID_PARAMS', message: 'Déplacement impossible.' });
+        const ids = list.map((playlist) => String(playlist.playlistId));
+        const [moved] = ids.splice(from, 1);
+        ids.splice(to, 0, moved);
+        return reorder(target, ids);
+    }
+
+    /** Met à jour une playlist importée depuis sa source (peut durer) */
+    async function refreshPlaylist(target, id) {
+        const where = normalizeScope(target);
+        return track(where, async () => {
+            const result = where === 'guild'
+                ? guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/REFRESH', { id: String(id) }, IMPORT_TIMEOUT))
+                : personalPlaylistResult(
+                    await ackRequest('/PLAYLISTS/REFRESH', { id: String(id) }, IMPORT_TIMEOUT),
+                    "La mise à jour a échoué : la playlist d'origine est peut-être privée ou supprimée."
+                );
+            if (result.ok) upsert(where, result.playlist);
+            return result;
+        });
+    }
+
+    /** Lit (now) ou ajoute à la file une playlist enregistrée */
+    async function playPlaylist(target, id, now = false) {
+        const where = normalizeScope(target);
+        if (where === 'guild') {
+            return guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/PLAY', { id: String(id), now: !!now }));
+        }
+        return personalBoolResult(
+            await ackRequest('/PLAYLISTS/PLAY', { id: String(id), now: !!now }),
+            "Lecture impossible : rejoignez d'abord un salon vocal de ce serveur."
+        );
+    }
+
+    /** Lit une playlist non enregistrée (résultat de recherche) depuis son lien */
+    async function playUrl(url, now = false) {
+        if (typeof url !== 'string' || url === '') return failure('INVALID_PARAMS');
+        const response = await IORequestAsync('/SEARCH/PLAYLIST', { url, now: !!now }, IMPORT_TIMEOUT);
+        if (response === null) return failure('TIMEOUT');
+        return response === true
+            ? { ok: true }
+            : failure('FAILED', "Lecture impossible : rejoignez d'abord un salon vocal de ce serveur, ou vérifiez le lien.");
+    }
+
+    /** Partage sur le serveur actif une copie d'une de MES playlists */
+    async function shareToGuild(personalId) {
+        return track('guild', async () => {
+            const result = guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/IMPORT', { playlistId: String(personalId) }));
+            if (result.ok) upsert('guild', result.playlist);
+            return result;
+        });
+    }
+
+    /** Copie une playlist du serveur dans MES playlists */
+    async function copyToPersonal(guildPlaylistId) {
+        return track('personal', async () => {
+            const result = guildEnvelope(await ackRequest('/GUILD/PLAYLISTS/COPY', { id: String(guildPlaylistId) }));
+            if (result.ok) upsert('personal', result.playlist);
+            return result;
+        });
+    }
+
+    /** Option du serveur actif (propriétaire ou administrateur) : {enabled?, editors?} → {ok, settings} */
+    async function updateGuildSettings(patch = {}) {
+        const payload = {};
+        if (typeof patch.enabled === 'boolean') payload.enabled = patch.enabled;
+        if (patch.editors === 'members' || patch.editors === 'mods') payload.editors = patch.editors;
+        const result = guildEnvelope(await ackRequest('/OWNER/PLAYLISTS/SETTINGS', payload));
+        if (result.ok && result.settings) {
+            guildSettings.value = {
+                enabled: !!result.settings.enabled,
+                editors: result.settings.editors === 'mods' ? 'mods' : 'members'
+            };
+            canEdit.value = guildSettings.value.enabled && (guildSettings.value.editors === 'members' || isModerator.value);
+            // Réactivation : les playlists conservées réapparaissent
+            fetchGuild();
+        }
+        return result;
+    }
+
+    /**
+     * Ouvre une playlist dans la vue centrale.
+     * @param {'personal'|'guild'} target
+     * @param {Object|string} playlistOrId - objet playlist ou identifiant
+     * @param {{hasBeenActualized?: boolean}} [options]
+     * @returns {boolean} false si la playlist est introuvable
+     */
+    function openPlaylist(target, playlistOrId, { hasBeenActualized = false } = {}) {
+        const where = normalizeScope(target);
+        const id = isPlaylistObject(playlistOrId) ? playlistOrId.playlistId : playlistOrId;
+        const playlist = findPlaylist(where, id) || (isPlaylistObject(playlistOrId) ? playlistOrId : null);
+        if (!playlist) return false;
+        globalStore.actualPlaylistScope = where;
+        globalStore.actualPlaylistId = String(playlist.playlistId);
+        Events.emit('VIEW_PLAYLIST', { playlist, scope: where, hasBeenActualized: !!hasBeenActualized });
+        return true;
+    }
+
+    // === MODALES GLOBALES ===
+    let requestSeq = 0;
+
+    /**
+     * Liste proposée par défaut à la création : celle demandée si elle est modifiable, sinon celle
+     * affichée dans la barre latérale si c'est la liste du serveur et qu'elle est modifiable, sinon mes playlists.
+     */
+    function defaultCreateScope(requested) {
+        if (requested === 'guild' || requested === 'personal') {
+            return requested === 'guild' && canEditScope('guild') ? 'guild' : 'personal';
+        }
+        return activeScope.value === 'guild' && canEditScope('guild') ? 'guild' : 'personal';
+    }
+
+    /** Ouvre la modale de création / import (scope facultatif : 'personal' | 'guild') */
+    function requestCreate(target) {
+        createRequest.value = { id: ++requestSeq, scope: defaultCreateScope(target) };
+    }
+
+    /** Ouvre la modale « Enregistrer dans une playlist » pour un titre */
+    function requestSave(video) {
+        if (!video || typeof video !== 'object') return;
+        saveRequest.value = { id: ++requestSeq, video: plainSong(video) };
+    }
+
+    // === PRÉFÉRENCES D'AFFICHAGE ===
+    function setScope(value) {
+        scope.value = normalizeScope(value);
+        writeStorage(SCOPE_KEY, scope.value);
+    }
+
+    /** @param {{mode?: string, dir?: 'asc'|'desc'}} value - sans dir, le sens par défaut du mode est appliqué */
+    function setSort(target, value = {}) {
+        const key = normalizeScope(target);
+        const current = sort.value[key];
+        const mode = SORT_MODES.includes(value.mode) ? value.mode : current.mode;
+        let dir = value.dir === 'asc' || value.dir === 'desc' ? value.dir : null;
+        if (!dir) dir = mode !== current.mode ? SORT_DEFAULT_DIR[mode] : current.dir;
+        sort.value = { ...sort.value, [key]: { mode, dir } };
+        writeStorage(SORT_KEY, JSON.stringify(sort.value));
+    }
+
+    function toggleSortDir(target) {
+        const key = normalizeScope(target);
+        setSort(key, { dir: sort.value[key].dir === 'asc' ? 'desc' : 'asc' });
+    }
+
+    // === NOTIFICATIONS ===
+    let toastSeq = 0;
+
+    /**
+     * Message court affiché par Widget/Playlist/PlaylistToasts.vue.
+     * @param {string} message
+     * @param {{tone?: 'success'|'error'|'info', action?: {label: string, run: Function}, timeout?: number}} [options]
+     * @returns {number} identifiant (pour dismissToast)
+     */
+    function notify(message, { tone = 'info', action = null, timeout } = {}) {
+        if (typeof message !== 'string' || message === '') return 0;
+        const id = ++toastSeq;
+        const duration = Number.isFinite(timeout) ? timeout : tone === 'error' ? 7000 : 4500;
+        toasts.value = [...toasts.value.slice(-2), { id, message, tone, action }];
+        if (duration > 0) setTimeout(() => dismissToast(id), duration);
+        return id;
+    }
+
+    function dismissToast(id) {
+        toasts.value = toasts.value.filter((toast) => toast.id !== id);
+    }
+
+    // === ÉCOUTEURS ===
+    // routes.js retire tous les écouteurs socket ET vide le bus d'événements à chaque navigation :
+    // ils sont réenregistrés après chacune. Un seul jeu d'écouteurs actif à la fois.
+    let detachActive = null;
+
+    function onPersonalUpdate() {
+        fetchPersonal();
+    }
+
+    function onGuildUpdate(payload) {
+        // Poussée d'un autre serveur (socket pas encore sorti de son ancienne room) : ignorée
+        const pushed = payload && typeof payload.guildId === 'string' ? payload.guildId : null;
+        if (pushed && globalStore.lastGuild && pushed !== globalStore.lastGuild) return;
+        fetchGuild();
+    }
+
+    function onGuildJoined() {
+        const current = globalStore.lastGuild || globalStore.actualServer?.id || null;
+        if (guildId.value && current && current !== guildId.value) resetGuild();
+        fetchGuild();
+        if (!personalLoaded.value || personalStale) fetchPersonal();
+    }
+
+    function onReconnect() {
+        personalStale = true;
+    }
+
+    // Événements du bus : Events.emit('PLAYLIST_CREATE_OPEN', {scope?}) / Events.emit('PLAYLIST_SAVE_OPEN', {video})
+    function onCreateOpen(payload) {
+        requestCreate(payload && typeof payload === 'object' ? payload.scope : undefined);
+    }
+
+    function onSaveOpen(payload) {
+        requestSave(payload && typeof payload === 'object' ? payload.video : null);
+    }
+
+    /**
+     * Branche les poussées serveur, GUILD_JOINED et les demandes d'ouverture des modales.
+     * Appelé une seule fois pour toute l'application par Widget/Playlist/PlaylistHost.vue (monté dans App.vue).
+     * @param {import('vue-router').Router} [router] - pour se réenregistrer après chaque navigation
+     * @returns {Function} désinscription
+     */
+    function listen(router) {
+        if (detachActive) detachActive();
+        const attach = () => {
+            socket.off('/PLAYLISTS/UPDATE', onPersonalUpdate);
+            socket.off('/GUILD/PLAYLISTS/UPDATE', onGuildUpdate);
+            socket.off('connect', onReconnect);
+            socket.on('/PLAYLISTS/UPDATE', onPersonalUpdate);
+            socket.on('/GUILD/PLAYLISTS/UPDATE', onGuildUpdate);
+            socket.on('connect', onReconnect);
+            Events.off('GUILD_JOINED', onGuildJoined);
+            Events.on('GUILD_JOINED', onGuildJoined);
+            Events.off('PLAYLIST_CREATE_OPEN', onCreateOpen);
+            Events.on('PLAYLIST_CREATE_OPEN', onCreateOpen);
+            Events.off('PLAYLIST_SAVE_OPEN', onSaveOpen);
+            Events.on('PLAYLIST_SAVE_OPEN', onSaveOpen);
+        };
+        attach();
+        const removeHook = router && typeof router.afterEach === 'function' ? router.afterEach(attach) : null;
+        const stop = () => {
+            socket.off('/PLAYLISTS/UPDATE', onPersonalUpdate);
+            socket.off('/GUILD/PLAYLISTS/UPDATE', onGuildUpdate);
+            socket.off('connect', onReconnect);
+            Events.off('GUILD_JOINED', onGuildJoined);
+            Events.off('PLAYLIST_CREATE_OPEN', onCreateOpen);
+            Events.off('PLAYLIST_SAVE_OPEN', onSaveOpen);
+            if (removeHook) removeHook();
+            if (detachActive === stop) detachActive = null;
+        };
+        detachActive = stop;
+        return stop;
+    }
+
+    return {
+        // état
+        personal,
+        guild,
+        personalLoaded,
+        guildLoaded,
+        personalLoading,
+        guildLoading,
+        personalError,
+        guildError,
+        guildId,
+        guildSettings,
+        canEdit,
+        canManage,
+        scope,
+        sort,
+        toasts,
+        createRequest,
+        saveRequest,
+        // lecture
+        guildEnabled,
+        activeScope,
+        sortedPersonal,
+        sortedGuild,
+        counts,
+        isModerator,
+        actualPlaylist,
+        canShareToGuild,
+        listFor,
+        sortedFor,
+        findPlaylist,
+        isLoaded,
+        isOpen,
+        canEditScope,
+        canReorder,
+        canDeletePlaylist,
+        // chargements
+        fetchPersonal,
+        fetchGuild,
+        fetchScope,
+        refreshAll,
+        // actions
+        createPlaylist,
+        deletePlaylist,
+        renamePlaylist,
+        addSong,
+        removeSong,
+        moveSong,
+        reorder,
+        movePlaylist,
+        refreshPlaylist,
+        playPlaylist,
+        playUrl,
+        shareToGuild,
+        copyToPersonal,
+        updateGuildSettings,
+        openPlaylist,
+        // modales
+        defaultCreateScope,
+        requestCreate,
+        requestSave,
+        // préférences
+        setScope,
+        setSort,
+        toggleSortDir,
+        // notifications
+        notify,
+        dismissToast,
+        // écouteurs
+        listen
+    };
+});
diff --git a/src/stores/userStore.js b/src/stores/userStore.js
index 0450357..f17a9ae 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -3,13 +3,19 @@ import { ref, watch } from 'vue';
 
 export const useUserStore = defineStore('user', () => {
     const userInfo = ref(null);
+    // Playlists personnelles : miroir de playlistStore.personal (tenu à jour par ce store),
+    // conservé pour les composants qui le lisent encore
     const playlists = ref(null);
 
     watch(userInfo, (newValue) => {
-        if (newValue) {
-            localStorage.setItem('userInfo', JSON.stringify(newValue));
-        } else {
-            localStorage.removeItem('userInfo');
+        try {
+            if (newValue) {
+                localStorage.setItem('userInfo', JSON.stringify(newValue));
+            } else {
+                localStorage.removeItem('userInfo');
+            }
+        } catch {
+            // Stockage indisponible (navigation privée, quota) : sans conséquence, l'information est relue au /USER/INFO
         }
     });
 
@@ -23,10 +29,15 @@ export const useUserStore = defineStore('user', () => {
         userInfo.value = null;
     }
 
+    function setPlaylists(list) {
+        playlists.value = Array.isArray(list) ? list : null;
+    }
+
     return {
         userInfo,
         playlists,
         setUserInfo,
         clearUserInfo,
+        setPlaylists,
     };
 })
diff --git a/src/utils/Loader.vue b/src/utils/Loader.vue
index d4ddc24..e22119c 100644
--- a/src/utils/Loader.vue
+++ b/src/utils/Loader.vue
@@ -17,20 +17,29 @@ const props = defineProps({
 </script>
 <template>
     <DefaultSplash gap="0">
+        <div class="loader-status" role="status" aria-live="polite">
             <h1 v-if="!interuptionMessage" class="separate"> Chargement de l'interface</h1>
-            <h1 v-else-if="interuptionMessage == connectMsg"><Icon icon="fa-solid fa-circle-exclamation"/> Echec de connexion</h1>
-            <h1 v-else><Icon icon="fa-solid fa-warning"/> Connexion interrompue</h1>
+            <h1 v-else-if="interuptionMessage == connectMsg"><Icon icon="fa-solid fa-circle-exclamation" aria-hidden="true"/> Échec de connexion</h1>
+            <h1 v-else><Icon icon="fa-solid fa-warning" aria-hidden="true"/> Connexion interrompue</h1>
             <div class="separate-col">
-                <p v-if="interuptionMessage" class="retry"><Icon spin-pulse icon="fa-solid fa-spinner"/> Tentative de reconnexion en cours</p>
+                <p v-if="interuptionMessage" class="retry"><Icon spin-pulse icon="fa-solid fa-spinner" aria-hidden="true"/> Tentative de reconnexion en cours</p>
                 <p v-if="interuptionMessage" class="second">Si vous rencontrez des problèmes, contactez le support.</p>
             </div>
-            <p v-if="interuptionMessage" class="error"><Icon icon="fa-solid fa-circle-xmark"/> {{ interuptionMessage }}</p>
+            <p v-if="interuptionMessage" class="error"><Icon icon="fa-solid fa-circle-xmark" aria-hidden="true"/> {{ interuptionMessage }}</p>
             <p v-else>{{ defaultMessage }}</p>
+        </div>
             <MusicAnimation />
              <p class="version">Version : {{ version }} - Chopin</p>
     </DefaultSplash>
 </template>
 <style scoped>
+.loader-status {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
 .retry {
     font-size: 1.2em;
     margin-top: 10px;
diff --git a/src/utils/Logic.js b/src/utils/Logic.js
index 26ef227..79b5b9c 100644
--- a/src/utils/Logic.js
+++ b/src/utils/Logic.js
@@ -1,103 +1,148 @@
 import Events from "@/utils/Events";
-import { IORequest, IOListener } from "@/utils/IORequest";
+import { IORequest } from "@/utils/IORequest";
 import { useGlobalStore } from "@/stores/globalStore";
-import { useUserStore } from "@/stores/userStore";
+import { usePlaylistStore } from "@/stores/playlistStore";
+import { normalizeScope } from "@/components/Widget/Playlist/playlistMeta";
+
+// Événements historiques du bus traduits en actions du store des playlists.
+// La vue d'une playlist relit le store en direct : inutile de la rouvrir après une modification.
+
+// Liste visée par un événement : `scope` explicite, sinon celle portée par l'objet playlist
+// (les playlists partagées ont scope:"guild"), sinon mes playlists (anciens émetteurs sans scope)
+function scopeOf(data, playlist) {
+    if (data && typeof data === "object" && data.scope) return normalizeScope(data.scope);
+    if (playlist && typeof playlist === "object" && playlist.scope === "guild") return "guild";
+    return "personal";
+}
+
+function playlistIdOf(data) {
+    if (data === null || data === undefined) return null;
+    if (typeof data !== "object") return String(data);
+    const id = data.playlistId ?? data.id;
+    return id === null || id === undefined ? null : String(id);
+}
+
+function titleOf(store, scope, id, fallback) {
+    return store.findPlaylist(scope, id)?.title || fallback?.title || "la playlist";
+}
 
 export function loadLogic() {
     const globalStore = useGlobalStore();
+    const playlistStore = usePlaylistStore();
 
-    Events.on("playlist:delete", (playlist) => {
-    IORequest("/PLAYLISTS/DELETE", () => {
-        Events.emit("VIEW_RESET")
-        Events.emit("playlistComponent:update")
-        refreshPlaylist()
-    }, playlist.playlistId);
+    // playlist (objet) ou {scope, id | playlistId}
+    Events.on("playlist:delete", async (data) => {
+        const id = playlistIdOf(data);
+        if (!id) return;
+        const scope = scopeOf(data, data);
+        const title = titleOf(playlistStore, scope, id, data);
+        const result = await playlistStore.deletePlaylist(scope, id);
+        if (result.ok) {
+            playlistStore.notify(`Playlist « ${title} » supprimée`, { tone: "success" });
+        } else {
+            playlistStore.notify(result.message, { tone: "error" });
+        }
     });
 
-    Events.on("video:add", (video) => {
-        IORequest("/PLAYLISTS/ADD_SONG", (response) => {
-            if(response) {
-                refreshPlaylist()
-                openPlaylist(response);
-            } else {
-                console.error("Failed to add video");
-            }
-        }, { id: video.playlistId, song: video.video });
+    // {video, playlistId, scope?}
+    Events.on("video:add", async (data) => {
+        const id = playlistIdOf({ playlistId: data?.playlistId ?? data?.id });
+        if (!id || !data?.video) return;
+        const scope = scopeOf(data);
+        const result = await playlistStore.addSong(scope, id, data.video);
+        if (result.ok) {
+            const playlist = result.playlist;
+            playlistStore.notify(`Ajouté à « ${playlist?.title || "la playlist"} »`, {
+                tone: "success",
+                action: { label: "Ouvrir", run: () => playlistStore.openPlaylist(scope, id) }
+            });
+        } else {
+            playlistStore.notify(result.message, { tone: "error" });
+        }
     });
 
-    Events.on("playlist:refresh", (playlist) => {
-    IORequest("/PLAYLISTS/REFRESH", async (data) => {
-        Events.emit("playlist:hasRefresh");
-        refreshPlaylist()
-        if(!data) return
-        await openPlaylist(data, true);
-    }, playlist.playlistId)
-    })
-
-    Events.on("playlist:rename", (data) => {
-        IORequest("/PLAYLISTS/RENAME", async (response) => {
-            if(response) {
-                refreshPlaylist()
-                openPlaylist(response);
-            } else {
-                console.error("Failed to rename playlist");
-            }
-        }, { id: data.id, newName: data.newName });
+    // playlist (objet) ou {scope, id}
+    Events.on("playlist:refresh", async (data) => {
+        const id = playlistIdOf(data);
+        if (!id) return;
+        const scope = scopeOf(data, data);
+        const result = await playlistStore.refreshPlaylist(scope, id);
+        Events.emit("playlist:hasRefresh", result);
+        if (result.ok) {
+            playlistStore.notify(`« ${result.playlist?.title || "La playlist"} » est à jour`, { tone: "success" });
+        } else {
+            playlistStore.notify(result.message, { tone: "error" });
+        }
     });
 
-    Events.on("video:delete", (video) => {
-        if(!globalStore.actualPlaylistId) return;
-        IORequest("/PLAYLISTS/REMOVE_SONG", (response) => {
-            if(response) {
-                refreshPlaylist()
-                openPlaylist(response);
-            } else {
-                console.error("Failed to delete video");
-            }
-        }, { id: globalStore.actualPlaylistId, songId: video.video.id });
+    // {id, newName, scope?}
+    Events.on("playlist:rename", async (data) => {
+        const id = playlistIdOf(data);
+        if (!id) return;
+        const scope = scopeOf(data);
+        const result = await playlistStore.renamePlaylist(scope, id, data.newName);
+        Events.emit("playlist:hasRenamed", result);
+        if (result.ok) {
+            playlistStore.notify(`Playlist renommée en « ${result.playlist?.title} »`, { tone: "success" });
+        } else {
+            playlistStore.notify(result.message, { tone: "error" });
+        }
+    });
+
+    // {video, index?, scope?, playlistId?} : par défaut, la playlist ouverte
+    // (Mes fichiers écoute aussi cet événement : rien à faire ici quand aucune playlist n'est ouverte)
+    Events.on("video:delete", async (data) => {
+        const id = data?.playlistId != null ? String(data.playlistId) : globalStore.actualPlaylistId;
+        const songId = data?.video?.id;
+        if (!id || !songId) return;
+        const scope = data?.scope ? normalizeScope(data.scope) : normalizeScope(globalStore.actualPlaylistScope);
+        const result = await playlistStore.removeSong(scope, id, songId, data.index);
+        if (!result.ok) playlistStore.notify(result.message, { tone: "error" });
     });
 
     Events.on("view:change", (component) => {
-        if(component.__name === "PlaylistView") return;
-        if(component.__name === "LoadingView") return;
+        if (component.__name === "PlaylistView") return;
+        if (component.__name === "LoadingView") return;
         globalStore.actualPlaylistId = null;
     });
 
-    Events.on("playlist:open", openPlaylist);
+    // playlist (objet) ou {scope, playlist | id}
+    Events.on("playlist:open", (data) => {
+        if (!data) return;
+        if (data.playlist && typeof data.playlist === "object") {
+            playlistStore.openPlaylist(scopeOf(data, data.playlist), data.playlist, { hasBeenActualized: !!data.hasBeenActualized });
+            return;
+        }
+        if (data.playlistId === undefined && data.id !== undefined) {
+            playlistStore.openPlaylist(scopeOf(data), String(data.id));
+            return;
+        }
+        playlistStore.openPlaylist(scopeOf(data, data), data);
+    });
+
     Events.on("logic:init", refreshPlaylist);
-
 }
 
+// Recharge mes playlists (nom historique)
 export function refreshPlaylist() {
-    const userStore = useUserStore();
-    IORequest("/PLAYLISTS/LIST", (data) => {
-        userStore.playlists = data;
-        Events.emit("playlist:init", data);
-    })
+    return usePlaylistStore().fetchPersonal();
 }
 
+// Ancienne signature : ouvre une playlist (personnelle, ou partagée si l'objet porte scope:"guild")
 export function openPlaylist(playlist, hasBeenActualized) {
-    const globalStore = useGlobalStore();
-    Events.emit("VIEW_PLAYLIST", {playlist, hasBeenActualized});
-    globalStore.actualPlaylistId = playlist.playlistId;
-    console.log("Opening playlist:", playlist.title, "with ID:", playlist.playlistId);
+    return usePlaylistStore().openPlaylist(scopeOf(null, playlist), playlist, { hasBeenActualized: !!hasBeenActualized });
 }
 
 export function updateChannel() {
-  const globalStore = useGlobalStore();
-  globalStore.currentChannel = null;
-  IORequest("/CHANNEL", (data) => {
-    if(data) {
-        console.log(globalStore.actualServer)
-        console.log(data.guildId)
-      if(data.guildId === globalStore.actualServer.id) {
-        globalStore.currentChannel = data;
-      }
-      if(globalStore.currentChannel.id === globalStore.actualServer.id) {
-        globalStore.currentChannel = null;
-      } 
-    } else {
-      globalStore.currentChannel = null;
-    }
-  })
-}
\ No newline at end of file
+    const globalStore = useGlobalStore();
+    IORequest("/CHANNEL", (data) => {
+        // Serveur affiché : actualServer arrive avec /GUILD/INFO, parfois après /GUILD/JOIN
+        const guildId = globalStore.actualServer?.id || globalStore.lastGuild;
+        // Le bot n'est dans un salon que si la réponse en décrit un (un id égal à celui du serveur n'en est pas un)
+        if (data && typeof data === "object" && guildId && data.guildId === guildId && data.id !== guildId) {
+            globalStore.currentChannel = data;
+        } else {
+            globalStore.currentChannel = null;
+        }
+    });
+}
diff --git a/src/utils/ModalContext.js b/src/utils/ModalContext.js
new file mode 100644
index 0000000..fe5f992
--- /dev/null
+++ b/src/utils/ModalContext.js
@@ -0,0 +1,33 @@
+/**
+ * Contexte fourni par UI/Modal.vue à son contenu.
+ * Un composant placé DANS une modale (sans en posséder la référence) peut réagir à SA modale
+ * seulement, au lieu des événements globaux "modal:open" / "modal:close" partagés par toutes.
+ *
+ *   import { onModalOpen, onModalClose, useModalContext } from '@/utils/ModalContext';
+ *   onModalClose(() => resetForm());
+ *   const modal = useModalContext(); // { isOpen, open, close } ou null hors modale
+ */
+import { inject, onBeforeUnmount } from 'vue';
+
+export const MODAL_CONTEXT = Symbol('modal-context');
+
+export function useModalContext() {
+    return inject(MODAL_CONTEXT, null);
+}
+
+function subscribe(kind, callback) {
+    const context = useModalContext();
+    if (!context) return () => {};
+    const unsubscribe = context.subscribe(kind, callback);
+    onBeforeUnmount(unsubscribe);
+    return unsubscribe;
+}
+
+// À appeler dans setup() : désinscription automatique au démontage
+export function onModalOpen(callback) {
+    return subscribe('open', callback);
+}
+
+export function onModalClose(callback) {
+    return subscribe('close', callback);
+}
diff --git a/src/utils/SocketEnvironment.vue b/src/utils/SocketEnvironment.vue
index 3066019..608fa64 100644
--- a/src/utils/SocketEnvironment.vue
+++ b/src/utils/SocketEnvironment.vue
@@ -78,6 +78,7 @@ import Events from '@/utils/Events.js';
     })
 
     socket.on("connect", () => {
+        stopReconnect();
         interuptionMessage.value = null;
         globalStore.actualPlaylistId = null;
         globalStore.setLoading(true);
@@ -102,23 +103,36 @@ import Events from '@/utils/Events.js';
     })
 
 
+    // Une seule boucle de reconnexion à la fois (avant : un nouvel intervalle à chaque erreur / déconnexion,
+    // qui s'empilaient et multipliaient les tentatives)
+    let reconnectTimer = null;
+
+    function stopReconnect() {
+        clearInterval(reconnectTimer);
+        reconnectTimer = null;
+    }
+
     function tryReconnect() {
-     
-        if(socket.connected) {
+        if (socket.connected) {
             interuptionMessage.value = null;
             return;
         }
-        const intervalId = setInterval(() => {
-            console.log("Tentative de reconnexion au serveur...");
-            if(!socket.connected || !needReload.value) {
-                socket.auth.token = loginStore.token;
-                socket.disconnect()
-               // Avoid multiple connections attempts at the same time
-                socket.connect();
-            } else {
-                console.log("Already connected, no need to reconnect.");
-                clearInterval(intervalId);
+        if (reconnectTimer) return;
+        reconnectTimer = setInterval(() => {
+            if (!needReload.value) {
+                stopReconnect();
+                return;
             }
-        }, 3000); // Essai de reconnexion après 5 secondes
+            if (socket.connected) {
+                stopReconnect();
+                return;
+            }
+            console.log("Tentative de reconnexion au serveur...");
+            socket.auth.token = loginStore.token;
+            socket.disconnect();
+            socket.connect();
+        }, 3000);
     }
+
+    onUnmounted(stopReconnect);
 </script>
\ No newline at end of file
diff --git a/src/views/Interface.vue b/src/views/Interface.vue
index f37f326..2609555 100644
--- a/src/views/Interface.vue
+++ b/src/views/Interface.vue
@@ -43,15 +43,16 @@ const props = defineProps({
 
 loadLogic()
 
+// Stores et routeur avant tout usage (avant : globalStore utilisé avant sa déclaration → ReferenceError)
+const globalStore = useGlobalStore();
+const userStore = useUserStore();
+const router = useRouter();
+
 const guildId = props.guildId;
 if (!guildId) {
     globalStore.setLastGuild(null);
     router.push('/servers');
-} 
-
-const globalStore = useGlobalStore();
-const userStore = useUserStore();
-const router = useRouter();
+}
 
 watch(() => globalStore.isLoading, (value, oldValue) => {
     if(!value && oldValue != value) {
@@ -83,7 +84,7 @@ function loadInteface() {
 
 function checkGuildAvailability() {
     console.log("Checking guild availability for ID:", guildId);
-   if(userStore.userInfo.guilds.filter(guild => guild.id === guildId).length === 0) {
+   if(!userStore.userInfo?.guilds?.some(guild => guild.id === guildId)) {
         globalStore.setLastGuild(null);
         console.warn("Guild not found, redirecting to servers list.");
         router.push('/servers');
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 501a184..f44678e 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,19 +1,35 @@
 <template>
-    <DefaultSplash width="500px;" gap="30px">
-        <h1>Votre ticket ?</h1>
-        <p>Connexion par Discord (obligatoire)</p>
-        <Button :disabled='!loginReady' @click="handleLogin()"><Icon v-if="loading" spin-pulse icon="fa-solid fa-spinner"/><img src="/discord-logo-white.png"></Button>
-        <div v-if="error || errorServer || callbackError || message" class="error-container">
-            <Error v-if="callbackError">{{ callbackError }}</Error>
-            <Error v-if="error">{{ error }}</Error>
-            <Error v-if="errorServer">{{ errorServer }}</Error>
-            <Success v-if="message">{{ message }}</Success>
+    <DefaultSplash width="460px" gap="20px">
+        <div class="login">
+            <div class="login-head">
+                <h2 class="login-title">Votre ticket ?</h2>
+                <p class="login-text">Connectez-vous avec votre compte Discord pour retrouver vos serveurs, vos playlists et le player.</p>
+            </div>
+            <Button
+                size="lg"
+                block
+                class="login-button"
+                :loading="loading && !errorServer && !error"
+                :disabled="!loginReady"
+                @click="handleLogin()"
+            >
+                <span>Se connecter avec</span>
+                <img class="discord-logo" src="/discord-logo-white.png" alt="Discord" width="94" height="18">
+            </Button>
+            <p v-if="!loginReady && !error && !errorServer" class="login-wait" aria-live="polite">Préparation de la connexion…</p>
+            <div v-if="error || errorServer || callbackError || message" class="error-container">
+                <Error v-if="callbackError">{{ callbackError }}</Error>
+                <Error v-if="error">{{ error }}</Error>
+                <Error v-if="errorServer && errorServer !== error">{{ errorServer }}</Error>
+                <Success v-if="message">{{ message }}</Success>
+            </div>
+            <nav class="footer" aria-label="Informations légales">
+                <router-link to="/terms">Conditions d'utilisation</router-link>
+                <span aria-hidden="true">·</span>
+                <router-link to="/privacy">Confidentialité</router-link>
+            </nav>
+            <p class="second">Session : <span class="u-mono">{{ sessionId }}</span></p>
         </div>
-        <div class="footer">
-            <p class="secondtext"><router-link to="/terms">Conditions d'utilisation</router-link> </p>
-            <p class="secondtext"><router-link to="/privacy">Confidentialité</router-link></p>
-        </div>
-        <p class="second">Session : {{ sessionId }}</p>
     </DefaultSplash>
 </template>
 
@@ -21,7 +37,6 @@
 import DefaultSplash from '@/components/UI/DefaultSplash.vue';
 import Button from '@/components/UI/Button.vue';
 import Error from '@/components/UI/Error.vue';
-import Info from '@/components/UI/Info.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useLoginStore } from '@/stores/loginStore';
 import { computed, ref, watch, onMounted } from 'vue';
@@ -140,58 +155,73 @@ onMounted(() => {
 
 </script>
 <style scoped>
-img {
-    width: 80%;
-    height: 100%;
-}
-
-h1 {
-    margin: 0 !important;
-    font-size: 25px;
-
-}
-
-Button {
-  width: 160px;;
-}
-
-p { 
-    max-width: 100vh;
-    margin: 0 !important;
-}
-
-.secondtext {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-top: 10px;
-    text-align: justify;
-}
-
-.footer {
+.login {
     display: flex;
     flex-direction: column;
+    align-items: stretch;
+    gap: 18px;
+    width: 100%;
+}
+
+.login-head {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.login-title {
+    margin: 0;
+    font-family: 'Gunship', var(--font);
+    font-size: 1.6rem;
+    font-weight: 400;
+}
+
+.login-text {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: var(--text-secondary);
+}
+
+.login-button {
     gap: 10px;
-    text-align: center;
-    align-items: center;
+}
+
+.discord-logo {
+    width: auto;
+    height: 18px;
+}
+
+.login-wait {
+    margin: -8px 0 0;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
 }
 
 .error-container {
     display: flex;
     flex-direction: column;
     align-items: center;
-
     gap: 10px;
     width: 100%;
-}   
-
-.second {
-    color: var(--text-secondary);
-    font-size: 8px;
-    margin-top: 10px;
-    text-align: center;
-    padding-right: 5px;
-    padding-left: 5px;
-    word-break: break-all;
+    font-size: 0.9rem;
 }
 
+.footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.second {
+    margin: 0;
+    color: var(--text-tertiary);
+    font-size: 0.65rem;
+    text-align: center;
+    word-break: break-all;
+}
 </style>
diff --git a/src/views/PageError.vue b/src/views/PageError.vue
index 8418784..9a8728d 100644
--- a/src/views/PageError.vue
+++ b/src/views/PageError.vue
@@ -1,24 +1,16 @@
 <template>
-    <DefaultSplash width="600px">
-        <div class="error-page">
-            <h1>Erreur ! </h1>
-            <strong><p>On s'est trompé de mesure !</p></strong>
-            <Box no-shadow  level="second" padding="closed">
-                <p>Raison : {{ message }}</p>
-            </Box>
-            
+    <DefaultSplash width="520px" gap="16px">
+        <div class="error-page" role="alert">
+            <span class="error-icon" aria-hidden="true"><Icon icon="fa-solid fa-music" /></span>
+            <h2 class="error-title">On s'est trompé de mesure !</h2>
+            <p class="error-reason">{{ message }}</p>
         </div>
-        <br>
-        <router-link class="no-decoration" to="/">
-            <Button icon="fa-solid fa-house"> Revenir au concert</Button>
-        </router-link>
+        <Button icon="fa-solid fa-house" to="/">Revenir au concert</Button>
     </DefaultSplash>
-
 </template>
 <script setup>
 import DefaultSplash from '@/components/UI/DefaultSplash.vue';
 import Button from '@/components/UI/Button.vue'
-import Box from '@/components/UI/Box.vue';
 import { socket } from '@/socket';
 import { onMounted } from 'vue';
 
@@ -39,11 +31,40 @@ onMounted(() => {
 
 </script>
 <style scoped>
-
 .error-page {
-    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
     width: 100%;
-    text-align: center;;
+    text-align: center;
 }
 
-</style>
\ No newline at end of file
+.error-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background-color: var(--main-soft);
+    color: var(--main);
+    font-size: 1.6rem;
+}
+
+.error-title {
+    margin: 0;
+    font-size: 1.35rem;
+    font-weight: 700;
+}
+
+.error-reason {
+    margin: 0;
+    padding: 8px 14px;
+    border-radius: var(--radius);
+    background-color: var(--tertiary);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    overflow-wrap: anywhere;
+}
+</style>
diff --git a/src/views/Privacy.vue b/src/views/Privacy.vue
index 09c6cc1..7e68868 100644
--- a/src/views/Privacy.vue
+++ b/src/views/Privacy.vue
@@ -13,9 +13,9 @@ onMounted(() => {
 <template>
     <DefaultSplash>
         <ReturnHomeButton/>
-        <h1>Confidentialité</h1>
+        <h2 class="legal-title">Confidentialité</h2>
         <Box no-shadow  level="second" padding="closed">
-            <div class="terms-content">
+            <div class="terms-content" tabindex="0" role="region" aria-label="Politique de confidentialité">
                 <p><strong>Date d'entrée en vigueur :</strong> 22 juillet 2025</p>
                 <p><strong>Responsable du traitement des données :</strong> Raphix (<code>raphixscrap</code> sur Discord)</p>
 
@@ -101,11 +101,7 @@ onMounted(() => {
             </div>
        
         </Box>
-        <br/>
-        <router-link class="no-decoration" to="/">
-            <Button icon="fa-solid fa-house"> Revenir au concert</Button>
-        </router-link>
-        <!-- Add more content here as needed -->
+        <Button class="legal-back" icon="fa-solid fa-house" to="/">Revenir au concert</Button>
     </DefaultSplash>
 </template>
 <style scoped>
@@ -114,16 +110,26 @@ onMounted(() => {
         margin: 0 auto;
         padding-right: 10px;
         padding-left: 10px;
-        font-size: 12px;
+        font-size: 0.85rem;
         line-height: 1.6;
         max-height: 35vh;
         overflow-y: auto;
         color: var(--text-secondary);
-         text-align: justify;
+         text-align: left;
     }
-    h1 {
-        font-size: 1.6em;
-        margin-bottom: 10px;
+    .legal-title {
+        margin: 0 0 4px;
+        font-size: 1.4rem;
+        font-weight: 700;
         color: var(--text);
+    }
+
+    .terms-content:focus-visible {
+        outline-offset: 4px;
+        border-radius: var(--radius-sm);
+    }
+
+    .legal-back {
+        margin-top: 8px;
     }   
 </style>
\ No newline at end of file
diff --git a/src/views/Servers.vue b/src/views/Servers.vue
index 6786365..3b4819c 100644
--- a/src/views/Servers.vue
+++ b/src/views/Servers.vue
@@ -1,134 +1,206 @@
 <script setup>
+/**
+ * Page « Mes serveurs » : serveurs communs avec le bot (le dernier ouvert en tête), filtre, invitation du bot.
+ */
+import { computed, onMounted, ref, useId } from 'vue';
 import Splash from '@/components/UI/Splash.vue';
-import Box from '@/components/UI/Box.vue';
-import SocketEnvironment from "../utils/SocketEnvironment.vue"
-import { useRouter } from 'vue-router';
+import SocketEnvironment from "../utils/SocketEnvironment.vue";
 import { useGlobalStore } from '@/stores/globalStore';
 import { useUserStore } from '@/stores/userStore';
 import Button from '@/components/UI/Button.vue';
+import EmptyState from '@/components/UI/EmptyState.vue';
 import ReturnHomeButton from '@/components/Widget/ReturnHomeButton.vue';
-import { ref, onMounted } from 'vue';
 import ServerListItem from '@/components/Widget/Server/ServerListItem.vue';
-import Info from '@/components/UI/Info.vue';
 import Account from '@/components/Layout/Account.vue';
 
+const FILTER_THRESHOLD = 5;
+
 const globalStore = useGlobalStore();
-
-onMounted(() => {
-    document.title = "Mes Serveurs - Subsonics";
-});
-
 const userStore = useUserStore();
-console.log("Last route:", globalStore.lastRoute);    
-const router = useRouter();
 const hasLink = ref(false);
 const botInviteUrl = ref("");
+const filter = ref('');
+const headingId = `servers-${useId()}`;
+const filterId = `servers-filter-${useId()}`;
 
-console.log(globalStore.lastGuild);
+onMounted(() => {
+    document.title = "Mes serveurs - Subsonics";
+});
 
 fetch('/information.json')
     .then(response => response.json())
     .then(data => {
         botInviteUrl.value = import.meta.env.DEV ? data.bot_invite.development : data.bot_invite.production;
-        hasLink.value = true
+        hasLink.value = !!botInviteUrl.value;
     })
     .catch(error => {
         console.error("Error fetching bot invite URL:", error);
         hasLink.value = false;
     });
 
+const guilds = computed(() => {
+    const list = Array.isArray(userStore.userInfo?.guilds) ? [...userStore.userInfo.guilds] : [];
+    // Le serveur ouvert en dernier en premier
+    const current = globalStore.lastGuild;
+    return list.sort((a, b) => (b.id === current) - (a.id === current));
+});
+
+const visibleGuilds = computed(() => {
+    const query = filter.value.trim().toLocaleLowerCase('fr');
+    if (!query) return guilds.value;
+    return guilds.value.filter((guild) => String(guild.name || '').toLocaleLowerCase('fr').includes(query));
+});
+
 function inviteSubsonics() {
-    
     window.open(botInviteUrl.value, '_blank', `popup,width=600,height=600,left=${(window.innerWidth - 600) / 2},top=${(window.innerHeight - 600) / 2}`);
 }
-
-
-// Vérifier RaphX pourquoi ca plante !
-
 </script>
 
 <template>
     <SocketEnvironment>
         <Splash>
             <ReturnHomeButton v-if="globalStore.lastGuild"/>
-            <div class="servers-div">
-            <Box box-class="server-box" padding="closed">
-                <div class="servers-content">
-                    <div class="servers-container">
-                        <div class="servers-list">
-                            <ServerListItem v-if="userStore.userInfo.guilds.length > 0" v-for="server in userStore.userInfo.guilds" :key="server.id" :server="server" />
-                        <Info class="center" v-else>Aucun de tes serveurs n'est référencé dans le bot. Invite le bot sur un serveur pour le voir ici.</Info>
+            <main class="servers-page">
+                <section class="servers-card" :aria-labelledby="headingId">
+                    <header class="servers-header">
+                        <div>
+                            <h2 :id="headingId" class="servers-title">Mes serveurs</h2>
+                            <p class="servers-subtitle">Choisissez le serveur sur lequel écouter de la musique.</p>
                         </div>
+                        <Button variant="secondary" icon="fa-solid fa-user-plus" :disabled="!hasLink" @click="inviteSubsonics()">Inviter Subsonics</Button>
+                    </header>
+
+                    <div v-if="guilds.length > FILTER_THRESHOLD" class="servers-filter">
+                        <Icon class="servers-filter__icon" icon="fa-solid fa-magnifying-glass" aria-hidden="true" />
+                        <label :for="filterId" class="sr-only">Filtrer les serveurs</label>
+                        <input
+                            :id="filterId"
+                            v-model="filter"
+                            type="search"
+                            class="servers-filter__input input-inset"
+                            placeholder="Filtrer les serveurs…"
+                            autocomplete="off"
+                            @keydown.esc="filter = ''"
+                        />
                     </div>
-                    
-                    <Button :disabled="!hasLink" @click="inviteSubsonics()"  icon="fa-solid fa-user-plus">Inviter Subsonics</Button>
-                </div>
-            </Box>
-            <Account class="full"/>
-            </div>
+
+                    <div class="servers-container">
+                        <ul v-if="visibleGuilds.length > 0" class="servers-list" :aria-labelledby="headingId">
+                            <li v-for="server in visibleGuilds" :key="server.id">
+                                <ServerListItem :server="server" />
+                            </li>
+                        </ul>
+                        <EmptyState v-else-if="guilds.length > 0" icon="fa-solid fa-magnifying-glass" title="Aucun serveur trouvé" compact>
+                            Aucun serveur ne correspond à « {{ filter.trim() }} ».
+                        </EmptyState>
+                        <EmptyState v-else icon="fa-solid fa-server" title="Aucun serveur">
+                            Aucun de vos serveurs n'utilise encore Subsonics. Invitez le bot sur un serveur pour le voir apparaître ici.
+                            <template #actions>
+                                <Button icon="fa-solid fa-user-plus" :disabled="!hasLink" @click="inviteSubsonics()">Inviter Subsonics</Button>
+                            </template>
+                        </EmptyState>
+                    </div>
+                </section>
+                <Account class="servers-account"/>
+            </main>
         </Splash>
     </SocketEnvironment>
-    
-
-
 </template>
 <style scoped>
-.servers-div {
+.servers-page {
     display: flex;
     flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    width: calc(100% - 32px);
+    max-width: 820px;
+    margin: 0 16px;
+}
+
+.servers-card {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: var(--secondary);
+    color: var(--text);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+}
+
+.servers-header {
+    display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 10px;
-    width: 90%;
-    max-width: 800px;;
-    margin-left: 20px;
-    margin-right: 20px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
 }
 
-.servers-content {
+.servers-title {
+    margin: 0;
+    font-size: 1.35rem;
+    font-weight: 700;
+}
+
+.servers-subtitle {
+    margin: 4px 0 0;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.servers-filter {
+    position: relative;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    gap: 20px;
-
 }
 
-.center {
-    margin-left: auto;
-    margin-right: auto;
-    padding: 10px;;
+.servers-filter__icon {
+    position: absolute;
+    left: 12px;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+    pointer-events: none;
 }
 
-.server-box {
+.servers-filter__input {
     width: 100%;
-    max-width: 800px;
-
-}
-
-.servers-list {
-    display: flex;
-    flex-direction: column;
-    gap:10px;
-    overflow-y: auto;
-    width: 100%;
-
-
-    
+    box-sizing: border-box;
+    padding-left: 34px;
 }
 
 .servers-container {
     overflow-y: auto;
-    flex: 1;
-    padding-right: 5px;
-    padding-left: 5px;
-    width: 100%;
-    position: relative;
-    max-height: 45vh;
+    overscroll-behavior: contain;
+    max-height: 50vh;
+    padding: 2px 4px 2px 2px;
 }
 
-h1 {
-    font-size: 20px;;
+.servers-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
-</style>
\ No newline at end of file
+.servers-account {
+    box-shadow: var(--shadow-lg);
+}
+
+@media screen and (max-width: 768px),
+       screen and (max-height: 607px) {
+    .servers-card {
+        padding: 14px;
+    }
+
+    .servers-header > :deep(button) {
+        width: 100%;
+    }
+
+    .servers-container {
+        max-height: 55vh;
+    }
+}
+</style>
diff --git a/src/views/Terms.vue b/src/views/Terms.vue
index 05c210e..06cc3bd 100644
--- a/src/views/Terms.vue
+++ b/src/views/Terms.vue
@@ -13,9 +13,9 @@ onMounted(() => {
 <template>
     <DefaultSplash>
         <ReturnHomeButton/>
-        <h1>Conditions d'utilisation</h1>
+        <h2 class="legal-title">Conditions d'utilisation</h2>
         <Box no-shadow level="second" padding="closed">
-            <div class="terms-content">
+            <div class="terms-content" tabindex="0" role="region" aria-label="Conditions d'utilisation">
                 <p>En accédant à cette plateforme et en vous connectant via Discord <Icon icon="fa-solid fa-copyright"/>, vous acceptez automatiquement les présentes conditions d’utilisation ainsi que la <strong>politique de confidentialité</strong>.
                      Les données fournies par Discord sont utilisées uniquement pour assurer le bon fonctionnement du service. Vous pouvez à tout moment demander la suppression de vos données en contactant <strong>Raphix</strong> (<code>raphixscrap</code>) ou bien en allant dans les paramètres de votre compte en utilisant le petit engrenage à coté de votre photo de profil et en cliquant sur le boutton "Supprimer mon compte".</p>
                      <p>En vous connectant, vous acceptez que votre identifiant Discord (ID et @) soit gardé à jamais pour des raisons de sécurité (bannissement). Cependant toutes les playlists crées, votre historique de musique, les informations  seront supprimés.</p>
@@ -29,11 +29,7 @@ onMounted(() => {
             </div>
        
         </Box>
-        <br>
-        <router-link class="no-decoration" to="/">
-            <Button icon="fa-solid fa-house">Revenir au concert</Button>
-        </router-link>
-        <!-- Add more content here as needed -->
+        <Button class="legal-back" icon="fa-solid fa-house" to="/">Revenir au concert</Button>
     </DefaultSplash>
 </template>
 <style scoped>
@@ -42,17 +38,26 @@ onMounted(() => {
         margin: 0 auto;
         padding-right: 10px;
         padding-left: 10px;
-        font-size: 12px;
+        font-size: 0.85rem;
         line-height: 1.6;
         max-height: 35vh;
         overflow-y: auto;
         color: var(--text-secondary);
-        text-align: justify;
+        text-align: left;
+    }
+    .legal-title {
+        margin: 0 0 4px;
+        font-size: 1.4rem;
+        font-weight: 700;
+        color: var(--text);
     }
 
-     h1 {
-        font-size: 1.6em;
-        margin-bottom: 10px;
-        color: var(--text);
+    .terms-content:focus-visible {
+        outline-offset: 4px;
+        border-radius: var(--radius-sm);
+    }
+
+    .legal-back {
+        margin-top: 8px;
     }   
 </style>
\ No newline at end of file