diff --git a/app/static/app.css b/app/static/app.css
index 1d328ad..8a5958c 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -25,8 +25,8 @@ header { background: var(--blue-dark); color: #fff; }
 .brand-sub { opacity: .7; font-weight: 300; }
 .brand img { border-radius: 5px; }
 
-.header-nav { display: flex; gap: .2rem; flex: 1; }
-.header-nav a { color: rgba(255,255,255,.8); padding: .4rem .8rem; border-radius: 6px; font-size: .9rem; transition: background .15s; }
+.header-nav { display: flex; gap: .15rem; flex: 1; }
+.header-nav a { color: rgba(255,255,255,.8); padding: .4rem .6rem; border-radius: 6px; font-size: .88rem; white-space: nowrap; transition: background .15s; }
 .header-nav a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
 .header-nav a.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
 .nav-trash { position: relative; }
@@ -35,9 +35,17 @@ header { background: var(--blue-dark); color: #fff; }
                font-weight: 700; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem;
                margin-left: .3rem; vertical-align: middle; line-height: 1; }
 
-.header-user { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,.85); font-size: .9rem; white-space: nowrap; }
-.btn-logout { color: rgba(255,255,255,.75); font-size: .85rem; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: .3rem .7rem; }
-.btn-logout:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
+.header-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
+.user-chip { display: flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.9); font-size: .88rem; }
+.user-avatar { display: inline-flex; align-items: center; justify-content: center;
+               width: 1.6rem; height: 1.6rem; border-radius: 50%;
+               background: rgba(255,255,255,.25); color: #fff;
+               font-size: .75rem; font-weight: 700; flex-shrink: 0; }
+.btn-logout-icon { display: inline-flex; align-items: center; justify-content: center;
+                   width: 1.8rem; height: 1.8rem; border-radius: 50%;
+                   color: rgba(255,255,255,.7); font-size: 1rem;
+                   border: 1px solid rgba(255,255,255,.3); transition: background .15s, color .15s; }
+.btn-logout-icon:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
 
 /* ── Mise en page ─────────────────────────────────────────────── */
 main { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
diff --git a/app/templates/base.html b/app/templates/base.html
index 4fa2d47..3a672c2 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -32,8 +32,11 @@
     </form>
     <div class="header-user">
       {% if user %}
-        <span>{{ user.name }}</span>
-        <a href="{{ url_for('logout') }}" class="btn-logout">Déconnexion</a>
+        <span class="user-chip" title="{{ user.name }}">
+          <span class="user-avatar">{{ user.name[0] }}</span>
+          {{ user.name.split()[0] }}
+        </span>
+        <a href="{{ url_for('logout') }}" class="btn-logout-icon" title="Se déconnecter">⎋</a>
       {% endif %}
     </div>
   </div>