diff --git a/frontend/src/pages/Communication.jsx b/frontend/src/pages/Communication.jsx
index f6f8d92..ac75c33 100644
--- a/frontend/src/pages/Communication.jsx
+++ b/frontend/src/pages/Communication.jsx
@@ -718,6 +718,16 @@ export default function Communication() {
     setBcSending(false);
   };
 
+  // ── Supprimer une notification ────────────────────────────────────────────
+  const deleteNotif = async (id) => {
+    try {
+      await api.del(`/notifications/${id}`);
+      setNotifs(prev => prev.filter(n => n.id !== id));
+      setSelectedNotif(null);
+      window.dispatchEvent(new CustomEvent('notif:refresh'));
+    } catch { /* silencieux */ }
+  };
+
   // ── Marquer toutes notifs lues ───────────────────────────────────────
   const markAllRead = async () => {
     try {
@@ -1200,17 +1210,43 @@ export default function Communication() {
                 </div>
               </div>
               {selectedNotif.body && (
-                <div style={{ padding: '20px 24px', color: 'var(--text)', lineHeight: 1.6 }}>
+                <div style={{
+                  background: '#fff',
+                  borderTop: '1px solid var(--border)',
+                  borderBottom: '1px solid var(--border)',
+                  padding: '16px 24px',
+                  height: 250,
+                  overflowY: 'auto',
+                  color: 'var(--text)',
+                  lineHeight: 1.6,
+                  fontSize: 14,
+                }}>
                   {selectedNotif.body}
                 </div>
               )}
-              {selectedNotif.link && (
-                <div style={{ padding: '0 24px 20px' }}>
+              <div style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                gap: 8,
+                padding: '10px 16px',
+                background: '#fff',
+                borderBottom: '1px solid var(--border)',
+              }}>
+                <button
+                  className="btn btn-sm btn-ghost"
+                  style={{ color: 'var(--danger)' }}
+                  onClick={() => deleteNotif(selectedNotif.id)}
+                >
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: 5 }}><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+                  Supprimer
+                </button>
+                {selectedNotif.link && (
                   <button className="btn btn-primary btn-sm" onClick={() => navigate(selectedNotif.link)}>
                     Voir le détail →
                   </button>
-                </div>
-              )}
+                )}
+              </div>
             </div>
           )}