feat: visionneuse XLSX - ruban groupe, onglets permanents et badges d'etat #154

frontend/style.css

@@ -57,6 +57,13 @@
   --mono: "JetBrains Mono", monospace;
   --radius: 6px;
   --radius-lg: 10px;
+  /* #154-A1 — data-grid tokens: the sheet reads slightly lighter than the
+     chrome (toolbar/panels), headers are clearly distinct from cells. */
+  --grid-bg: #161b22;
+  --grid-header-bg: #1f2430;
+  --grid-header-text: #e6edf3;
+  --grid-border: #30363d;
+  --grid-zebra: rgba(255, 255, 255, 0.025);
 }
 
 /* ===== THEME — DARK (explicit) ===== */
@@ -101,6 +108,11 @@
   --mono: "JetBrains Mono", monospace;
   --radius: 6px;
   --radius-lg: 10px;
+  --grid-bg: #161b22;
+  --grid-header-bg: #1f2430;
+  --grid-header-text: #e6edf3;
+  --grid-border: #30363d;
+  --grid-zebra: rgba(255, 255, 255, 0.025);
 }
 
 /* ===== THEME — LIGHT ===== */
@@ -145,6 +157,11 @@
   --mono: "JetBrains Mono", monospace;
   --radius: 6px;
   --radius-lg: 10px;
+  --grid-bg: #ffffff;
+  --grid-header-bg: #eaeef2;
+  --grid-header-text: #1f2328;
+  --grid-border: #d0d7de;
+  --grid-zebra: rgba(0, 0, 0, 0.025);
 }
 
 /* ===== BASE ===== */
@@ -10925,21 +10942,54 @@ body.desktop-mode .editor-container {
 }
 
 /* ── XLSX Viewer ── */
+/* #154-A1 — the viewer shell is a grouped command bar: sheet tabs on the left,
+   action groups (Formules · Insertion · Vue · Fichier) on the right, then a
+   status row stating the viewer's limits (read-only, formulas not recalculated). */
 .xlsx-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface2);
+  position: relative; /* anchors the A14 structure menu */
+}
+.xlsx-cmdbar {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 8px;
   flex-wrap: wrap;
-  position: relative; /* anchors the A14 structure menu */
 }
 .xlsx-toolbar-actions {
   margin-left: auto;
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
+}
+.xlsx-cmd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.xlsx-cmd-sep {
+  width: 1px;
+  height: 20px;
+  flex: 0 0 auto;
+  background: var(--border);
+}
+.xlsx-save-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.xlsx-save-primary:disabled {
+  opacity: 0.5;
 }
 .xlsx-tabs {
   display: flex;
+  align-items: center;
   gap: 4px;
   flex-wrap: wrap;
 }
@@ -10957,15 +11007,73 @@ body.desktop-mode .editor-container {
   border-color: var(--accent, #4a90d9);
   color: #fff;
 }
+.xlsx-tab-add {
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 0.9rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.xlsx-tab-add:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.xlsx-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.xlsx-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  white-space: nowrap;
+}
+.xlsx-status-icon {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+}
+.xlsx-status-readonly {
+  border-color: var(--warning, #e0a800);
+  color: var(--warning, #e0a800);
+}
+.xlsx-status-formula {
+  color: var(--accent);
+}
+.xlsx-table {
+  background: var(--grid-bg);
+}
+.xlsx-table td {
+  border-bottom: 1px solid var(--grid-border);
+}
+/* #154-A1 — zebra + hover make rows scannable; headers use dedicated tokens so
+   they are visually distinct from the cells. */
+.xlsx-table tbody tr:nth-child(even) td {
+  background: var(--grid-zebra);
+}
+.xlsx-table tbody tr:hover td {
+  background: var(--bg-hover);
+}
 .xlsx-table th.xlsx-corner,
 .xlsx-table th.xlsx-rownum {
-  background: var(--surface);
-  color: var(--text-secondary);
-  font-weight: 400;
+  background: var(--grid-header-bg);
+  color: var(--grid-header-text);
+  font-weight: 500;
   text-align: right;
   padding: 6px 8px;
-  border-bottom: 2px solid var(--border);
-  border-right: 1px solid var(--border-light, var(--border));
+  border-bottom: 2px solid var(--grid-border);
+  border-right: 1px solid var(--grid-border);
   position: sticky;
   left: 0;
   /* #153 A8 — `top: auto` is load-bearing: `.csv-table th` pins EVERY `th`
@@ -10986,7 +11094,9 @@ body.desktop-mode .editor-container {
   position: sticky;
   top: 0;
   z-index: 3;
-  background: var(--surface);
+  background: var(--grid-header-bg);
+  color: var(--grid-header-text);
+  border-bottom: 2px solid var(--grid-border);
 }
 .xlsx-table td[contenteditable] {
   cursor: text;
@@ -10998,9 +11108,10 @@ body.desktop-mode .editor-container {
   outline-offset: -2px;
 }
 /* #153 A7 — the active cell keeps its outline even when focus moves to the
-   formula bar, so the user never loses track of what the bar edits. */
+   formula bar, so the user never loses track of what the bar edits.
+   #154-A1 — solid (not dashed) for a stronger active-cell affordance. */
 .xlsx-table td.xlsx-active:not(:focus) {
-  outline: 2px dashed var(--accent, #4a90d9);
+  outline: 2px solid var(--accent, #4a90d9);
   outline-offset: -2px;
 }
 
@@ -11099,12 +11210,12 @@ body.desktop-mode .editor-container {
   position: sticky;
   top: 33px; /* thead height — keeps the frozen row below the header */
   z-index: 2;
-  background: var(--surface);
+  background: var(--grid-header-bg);
 }
 .xlsx-table td.xlsx-frozen-col {
   position: sticky;
   left: 44px; /* the row-number column width */
-  background: var(--surface);
+  background: var(--grid-bg);
 }
 
 /* #153 A14 — structure menu (sheets / rows / columns) */
@@ -11232,7 +11343,9 @@ body.desktop-mode .editor-container {
 mark {
   font: inherit;
 }
-.xlsx-table td.xlsx-dirty {
+/* #154-A1 — scoped to tbody so a dirty cell keeps its highlight even on the
+   zebra/hover backgrounds (specificity beats the zebra + hover rules). */
+.xlsx-table tbody td.xlsx-dirty {
   background: rgba(255, 196, 0, 0.18);
 }