feat: en-tete allege, compte utilisateur en sidebar et pellicule d'images defilable (molette + fleches) #112

frontend/style.css

@@ -3815,8 +3815,8 @@ body.resizing-v {
     gap: 8px;
   }
 
-  .user-display-name {
-    display: none; /* Masquer le nom d'utilisateur sur mobile pour gagner de la place */
+  .header-right .user-display-name {
+    display: none; /* Masquer le nom d'utilisateur dans le header sur mobile */
   }
 
   .search-wrapper {
@@ -6039,6 +6039,100 @@ body.resizing-v {
   color: var(--danger);
 }
 
+/* ---------------------------------------------------------------------------
+   Sidebar account section (#112) — identity + logout pinned at the bottom
+   --------------------------------------------------------------------------- */
+.sidebar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-sidebar);
+  flex-shrink: 0;
+}
+.sidebar-user[hidden] {
+  display: none;
+}
+.sidebar-user-profile {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: background 150ms ease, border-color 150ms ease;
+}
+.sidebar-user-profile:hover {
+  background: var(--bg-hover);
+  border-color: var(--border);
+}
+.sidebar-user-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
+}
+.sidebar-user-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.sidebar-user-name {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  max-width: none;
+}
+.sidebar-user-role {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+.sidebar-user-logout {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
+}
+.sidebar-user-logout:hover {
+  color: var(--danger);
+  background: var(--bg-hover);
+  border-color: var(--border);
+}
+
+/* Version row inside the header options menu (#112) */
+.menu-list-version {
+  cursor: default;
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+  padding-top: 8px;
+}
+.menu-list-version .version-badge {
+  margin-left: 4px;
+}
+
 /* ---------------------------------------------------------------------------
    Admin Panel
    --------------------------------------------------------------------------- */
@@ -9785,18 +9879,66 @@ body.desktop-mode .editor-container {
     opacity: 0.55;
   }
 }
+/* #112 — filmstrip wrapper so the scroll arrows stay fixed over the film */
+.image-nav {
+  position: relative;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+}
+.image-nav[hidden] {
+  display: none;
+}
 .image-nav-strip {
   display: flex;
   gap: 6px;
-  padding: 8px;
+  padding: 8px 40px;
   overflow-x: auto;
-  background: var(--surface);
-  border-top: 1px solid var(--border);
+  scroll-behavior: smooth;
+  scrollbar-width: thin;
   flex-shrink: 0;
 }
 .image-nav-strip[hidden] {
   display: none;
 }
+/* Translucent arrows that scroll the film left/right (revealed on hover). */
+.image-strip-arrow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  color: var(--text-primary);
+  opacity: 0;
+  cursor: pointer;
+  z-index: 2;
+  transition: opacity 160ms ease;
+}
+.image-strip-arrow-prev {
+  left: 0;
+  background: linear-gradient(to right, var(--surface) 55%, transparent);
+}
+.image-strip-arrow-next {
+  right: 0;
+  background: linear-gradient(to left, var(--surface) 55%, transparent);
+}
+.image-nav:hover .image-strip-arrow {
+  opacity: 0.6;
+}
+.image-strip-arrow:hover,
+.image-strip-arrow:focus-visible {
+  opacity: 1;
+  outline: none;
+}
+@media (hover: none) {
+  .image-strip-arrow {
+    opacity: 0.55;
+  }
+}
 .image-thumb {
   width: 72px;
   height: 72px;
@@ -9848,6 +9990,7 @@ body.desktop-mode .editor-container {
   z-index: 2000;
   background: rgba(0, 0, 0, 0.9);
 }
+.image-viewer-container.lightbox .image-nav,
 .image-viewer-container.lightbox .image-nav-strip {
   display: none;
 }