diff --git a/public/icons/logo-master.png b/public/icons/logo-master.png
old mode 100755
new mode 100644
diff --git a/src/styles/topbar.css b/src/styles/topbar.css
index bee3aca..1834e23 100644
--- a/src/styles/topbar.css
+++ b/src/styles/topbar.css
@@ -1,168 +1,71 @@
-/* ========== TOP BAR (SOCIOWIRE header, version avec belle barre) ========== */
+/* ===== SOCIOWIRE Topbar — clean gradient, tight spacing, solid mobile ===== */
 
-.topbar {
-  width: 100%;
-  padding: 0.55rem 0.9rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.6rem;
-
-  /* Bandeau bleu en haut, comme ton dessin */
-  background: linear-gradient(135deg, #050b18 0%, #0b2b5f 35%, #0e65c0 70%, #27a8ff 100%);
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
-
-  box-shadow:
-    0 10px 24px rgba(0, 0, 0, 0.65),
-    0 0 18px rgba(56, 189, 248, 0.5);
+.topbar{
+  position: sticky; top:0; z-index:100;
+  width:100%;
+  padding: .55rem .9rem;
+  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
+  background: linear-gradient(135deg,#071225 0%,#0b2b5f 38%,#0e65c0 72%,#27a8ff 100%);
+  border-bottom-left-radius:18px; border-bottom-right-radius:18px;
+  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 18px rgba(56,189,248,.45);
+  overflow:hidden;
 }
 
-/* Bloc gauche : logo + titre */
-
-.logo-circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  flex-shrink: 0;
-
-  /* utilise ton logo dans public/icons/logo-master.png */
-  background-image: url("/icons/logo-master.png");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-
-  /* halo autour du logo */
-  box-shadow:
-    0 0 12px rgba(37, 99, 235, 0.85),
-    0 0 20px rgba(56, 189, 248, 0.8);
-
-  /* cache le texte "SW" à l'intérieur si présent */
-  color: transparent;
+/* LEFT: logo + titles */
+.logo-circle{
+  width:40px; height:40px; border-radius:50%; flex-shrink:0;
+  background-image:url("/icons/logo-master.png");
+  background-size:cover; background-position:center; background-repeat:no-repeat;
+  box-shadow: 0 0 10px rgba(37,99,235,.8), 0 0 18px rgba(56,189,248,.6);
+  color:transparent; /* cache texte éventuel */
 }
 
-.title-block {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.1;
-  min-width: 0;
+.title-block{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
+.main-title{ font-size:1.02rem; font-weight:800; letter-spacing:.04em; color:#f9fafb; }
+.sub-title{ font-size:.74rem; color:#dbeafe; opacity:.95; }
+
+/* RIGHT: theme dots + auth buttons */
+.topbar-right{ display:flex; align-items:center; gap:.5rem; margin-left:auto; flex-wrap:wrap; }
+
+.theme-switch{ display:flex; gap:.28rem; }
+.theme-dot{
+  width:22px; height:22px; border-radius:999px;
+  border:1px solid rgba(148,163,184,.85);
+  background:rgba(15,23,42,.9); color:#e5e7eb; font-size:.65rem;
+  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
+  box-shadow:0 0 6px rgba(15,23,42,.9); transition:transform .12s ease;
+}
+.theme-dot:hover{ transform:scale(1.06); }
+.theme-dot-active{ border-color:#facc15; box-shadow:0 0 10px rgba(250,204,21,.9),0 0 14px rgba(56,189,248,.55); }
+
+.btn-primary, .btn-secondary{
+  padding:.32rem .85rem; font-size:.78rem; border-radius:999px; font-weight:700; cursor:pointer;
+  white-space:nowrap; line-height:1;
+}
+.btn-primary{ border:1px solid #22c55e; background:radial-gradient(circle at 30% 30%,#22c55e,#16a34a); color:#f9fafb;
+  box-shadow:0 4px 10px rgba(22,163,74,.5),0 0 8px rgba(22,163,74,.6);
+}
+.btn-primary:disabled{ opacity:.6; cursor:default; }
+.btn-secondary{ border:1px solid #bfdbfe; background:rgba(15,23,42,.25); color:#e0f2fe; box-shadow:0 3px 10px rgba(15,23,42,.6); }
+.btn-secondary:hover{ background:rgba(15,23,42,.45); }
+
+/* Auth label (AUTH: anon) plus discret, ne casse pas la ligne */
+.topbar .title-block + div,
+.topbar .auth-label{
+  font-size:.65rem; opacity:.7; color:#dbeafe; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 }
 
-.main-title {
-  font-size: 1rem;
-  letter-spacing: 0.06em;
-  font-weight: 700;
-  color: #f9fafb;
+/* Mobile tweaks */
+@media (max-width:640px){
+  .topbar{ padding:.5rem .7rem; border-bottom-left-radius:16px; border-bottom-right-radius:16px; }
+  .main-title{ font-size:1rem; }
+  .sub-title{ font-size:.7rem; }
+  .topbar-right{ width:100%; justify-content:flex-start; gap:.45rem; }
 }
 
-.sub-title {
-  font-size: 0.7rem;
-  color: #dbeafe;
-  opacity: 0.9;
-}
-
-/* Bloc de droite : thèmes + login */
-
-.topbar-right {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-left: auto;
-}
-
-/* Switch de thème D/B/L */
-
-.theme-switch {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.theme-dot {
-  width: 22px;
-  height: 22px;
-  border-radius: 999px;
-  border: 1px solid rgba(148, 163, 184, 0.85);
-  background: rgba(15, 23, 42, 0.85);
-  color: #e5e7eb;
-  font-size: 0.65rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  cursor: pointer;
-  box-shadow: 0 0 6px rgba(15, 23, 42, 0.9);
-}
-
-.theme-dot-active {
-  border-color: #facc15;
-  box-shadow:
-    0 0 10px rgba(250, 204, 21, 0.9),
-    0 0 16px rgba(56, 189, 248, 0.7);
-}
-
-/* Boutons login / logout */
-
-.btn-primary {
-  padding: 0.25rem 0.85rem;
-  font-size: 0.75rem;
-  border-radius: 999px;
-  border: 1px solid #22c55e;
-  background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
-  color: #f9fafb;
-  cursor: pointer;
-  font-weight: 600;
-  box-shadow:
-    0 4px 12px rgba(22, 163, 74, 0.6),
-    0 0 10px rgba(22, 163, 74, 0.7);
-}
-
-.btn-primary:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-/* Si tu as un bouton secondaire (signup) */
-.btn-secondary {
-  padding: 0.25rem 0.85rem;
-  font-size: 0.75rem;
-  border-radius: 999px;
-  border: 1px solid #bfdbfe;
-  background: rgba(15, 23, 42, 0.35);
-  color: #e0f2fe;
-  cursor: pointer;
-  font-weight: 600;
-  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.7);
-}
-
-.btn-secondary:hover {
-  background: rgba(15, 23, 42, 0.6);
-}
-
-/* Mobile : la partie droite passe proprement en dessous */
-
-@media (max-width: 640px) {
-  .topbar {
-    flex-wrap: wrap;
-    padding-inline: 0.65rem;
-  }
-
-  .topbar-right {
-    width: 100%;
-    justify-content: flex-start;
-  }
-}
-
-/* Thème clair : on éclaircit la barre mais on garde ton logo */
-body[data-theme="light"] .topbar {
-  background: linear-gradient(135deg, #e5f0ff, #f9fafb);
-  box-shadow:
-    0 6px 18px rgba(148, 163, 184, 0.6),
-    0 0 10px rgba(129, 140, 248, 0.35);
-}
-
-body[data-theme="light"] .main-title,
-body[data-theme="light"] .sub-title {
-  color: #0f172a;
+/* Light theme compatibility */
+body[data-theme="light"] .topbar{
+  background:linear-gradient(135deg,#e6f0ff 0%,#f9fafb 100%);
+  box-shadow:0 8px 20px rgba(148,163,184,.45),0 0 10px rgba(129,140,248,.25);
 }
+body[data-theme="light"] .main-title, body[data-theme="light"] .sub-title{ color:#0f172a; }