v2026.5.16 — Passage au schéma de versionning ANNÉE.MAJEURE.PATCH + faux input date custom (Mardi 24.04.2026)

viewer.css

@@ -320,6 +320,19 @@ html, body {
   display: flex;
   align-items: center;
   gap: 4px;
+  flex-wrap: nowrap;
+}
+
+/* v2026.5.16 : nom court du jour (Mardi, Lundi, ...) à gauche du date-picker */
+.date-picker-day {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  padding: 0 6px 0 2px;
+  min-width: 58px;
+  text-align: right;
+  white-space: nowrap;
+  user-select: none;
 }
 
 .btn-nav {
@@ -1937,18 +1950,36 @@ body.modal-open {
 /* ─────────────────────────────────────────────────────────────────────────
    v5.0.0 : horloge au milieu de la topbar (HH:MM, pas de secondes)
    ───────────────────────────────────────────────────────────────────────── */
+/* v2026.5.16 : app-clock contient maintenant 2 lignes empilées :
+   - app-clock-date : "Mardi 21 avril 2026" (petit)
+   - app-clock-time : "12:34" (grand) */
 .app-clock {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.1;
+  color: var(--text);
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+}
+.app-clock-date {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  letter-spacing: 0.3px;
+  text-transform: capitalize;
+}
+.app-clock-time {
   font-size: 22px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  color: var(--text);
   letter-spacing: 1px;
-  pointer-events: none;
-  user-select: none;
 }
 .topbar { position: sticky; /* déja défini plus haut */ }
 /* topbar doit être en position: relative parent pour que .app-clock absolute
@@ -2407,3 +2438,63 @@ header.topbar::before {
 .banner-reconnect-failed .banner-btn-primary:hover {
   background: #f8d7da;
 }
+
+/* ==========================================================================
+   v2026.5.16 : responsive topbar
+   ========================================================================== */
+
+/* Breakpoint medium : entre 1000 et 1300px, on compacte un peu */
+@media (max-width: 1300px) {
+  .app-clock-date { font-size: 11px; }
+  .app-clock-time { font-size: 20px; }
+  .topbar-right .btn-action .btn-action-label,
+  .topbar-right .btn-refresh .btn-refresh-label {
+    font-size: 12px;
+  }
+}
+
+/* Breakpoint small : moins de 1000px, on masque les labels de boutons action
+   et on réduit encore l'horloge. Les icônes restent, titres restent. */
+@media (max-width: 1000px) {
+  .topbar { padding: 8px 14px; gap: 8px; }
+  .topbar h1 { font-size: 16px; }
+  .app-clock { font-size: smaller; }
+  .app-clock-date { font-size: 10px; }
+  .app-clock-time { font-size: 18px; }
+  .btn-action .btn-action-label,
+  .btn-refresh .btn-refresh-label {
+    display: none;
+  }
+  .btn-action, .btn-refresh {
+    padding: 6px 10px;
+  }
+  .capture-info { display: none; }
+}
+
+/* Breakpoint très petit : moins de 720px, on cache la date complète (garde
+   juste l'heure) et on autorise le wrap total */
+@media (max-width: 720px) {
+  .topbar {
+    flex-wrap: wrap;
+    padding: 6px 10px;
+  }
+  .app-clock {
+    position: static;
+    transform: none;
+    margin: 0 auto;
+  }
+  .app-clock-date { display: none; }
+  .topbar-left { flex-wrap: wrap; }
+  .date-nav { margin-top: 4px; }
+  .date-picker-day { min-width: 46px; font-size: 12px; }
+  .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
+}
+
+/* Breakpoint minuscule : masque aussi les labels de refresh, boutons deviennent
+   vraiment iconifiés */
+@media (max-width: 520px) {
+  .app-clock-time { font-size: 16px; }
+  .topbar h1 { font-size: 14px; }
+  .btn-today { padding: 4px 6px; font-size: 11px; }
+  .btn-nav { min-width: 26px; padding: 4px 6px; }
+}