From 8de20ba62e6906694612c9481ba00b2b28a2789d Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Wed, 10 Jun 2026 09:01:42 +0000
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Remplacement=20de=20bg-inherit=20?=
 =?UTF-8?q?par=20des=20couleurs=20de=20fond=20explicites=20(hsl=20CSS=20va?=
 =?UTF-8?q?rs)=20sur=20toutes=20les=20cellules=20sticky=20(Code,=20=C3=89t?=
 =?UTF-8?q?ablissement,=20Total)=20dans=20le=20tableau=20OPEX=20vue=20?=
 =?UTF-8?q?=C3=89tablissements.=20Ajout=20de=20border-separate=20+=20borde?=
 =?UTF-8?q?r-spacing-0=20sur=20le=20tableau=20et=20d'ombres=20port=C3=A9es?=
 =?UTF-8?q?=20pour=20mat=C3=A9rialiser=20la=20s=C3=A9paration=20visuelle?=
 =?UTF-8?q?=20lors=20du=20scroll=20horizontal.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/DsiOpex.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/DsiOpex.tsx b/client/src/pages/DsiOpex.tsx
index f70f05e..9df37aa 100644
--- a/client/src/pages/DsiOpex.tsx
+++ b/client/src/pages/DsiOpex.tsx
@@ -1249,11 +1249,11 @@ export default function DsiOpex() {
               {/* Tableau scrollable horizontalement avec tous les postes */}
               <div className="bg-card border border-border rounded-xl overflow-hidden">
                 <div className="overflow-x-auto">
-                  <table className="text-xs" style={{ minWidth: 'max-content', width: '100%' }}>
+                  <table className="text-xs border-separate border-spacing-0" style={{ minWidth: 'max-content', width: '100%' }}>
                     <thead>
                       <tr className="border-b border-border bg-muted/40">
-                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky left-0 bg-muted/40 z-10 min-w-[80px]">Code</th>
-                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky left-[80px] bg-muted/40 z-10 min-w-[200px]">
+                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky left-0 z-20 min-w-[80px]" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 0 0 hsl(var(--border))' }}>Code</th>
+                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky left-[80px] z-20 min-w-[200px]" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 4px -2px rgba(0,0,0,0.15)' }}>
                           <SortBtn col="nom" label="Établissement" />
                         </th>
                         {/* Colonnes postes — vert = prorata auto, bleu = manuel */}
@@ -1285,10 +1285,10 @@ export default function DsiOpex() {
                     <tbody>
                       {sortedEtabs.map((etab, idx) => (
                         <tr key={etab.code} className={`border-b border-border/50 hover:bg-muted/20 transition-colors ${idx % 2 === 0 ? '' : 'bg-muted/5'}`}>
-                          <td className="px-3 py-2 sticky left-0 bg-inherit z-10">
+                          <td className="px-3 py-2 sticky left-0 z-10 whitespace-nowrap" style={{ background: idx % 2 === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.05)', boxShadow: '2px 0 0 0 hsl(var(--border))' }}>
                             <span className="font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground">{etab.code}</span>
                           </td>
-                          <td className="px-3 py-2 font-medium text-foreground sticky left-[80px] bg-inherit z-10 whitespace-nowrap">{etab.nom}</td>
+                          <td className="px-3 py-2 font-medium text-foreground sticky left-[80px] z-10 whitespace-nowrap" style={{ background: idx % 2 === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.05)', boxShadow: '2px 0 4px -2px rgba(0,0,0,0.15)' }}>{etab.nom}</td>
                           {opexState.lignes.map(ligne => {
                             const srcPoste = getOpexDataForAnnee(annee).postes.find(p => p.libelle === ligne.libelle);
                             const isManuel = srcPoste?.mode_ventilation === 'Manuel' || ligne.isCustom;
@@ -1341,7 +1341,7 @@ export default function DsiOpex() {
                               </td>
                             );
                           })}
-                          <td className="px-3 py-2 text-right font-semibold tabular-nums sticky right-0 bg-card z-10 border-l border-border">
+                          <td className="px-3 py-2 text-right font-semibold tabular-nums sticky right-0 z-10 border-l border-border" style={{ background: idx % 2 === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.05)', boxShadow: '-2px 0 4px -2px rgba(0,0,0,0.15)' }}>
                             <span className={etab.total > 0 ? 'text-orange-600' : 'text-muted-foreground'}>
                               {etab.total > 0 ? formatEuros(etab.total) : '—'}
                             </span>
@@ -1351,7 +1351,7 @@ export default function DsiOpex() {
                     </tbody>
                     <tfoot>
                       <tr className="bg-muted/40 border-t-2 border-border">
-                        <td colSpan={2} className="px-3 py-3 font-bold text-foreground sticky left-0 bg-muted/40 z-10">
+                        <td colSpan={2} className="px-3 py-3 font-bold text-foreground sticky left-0 z-10" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 4px -2px rgba(0,0,0,0.15)' }}>
                           TOTAL — {sortedEtabs.length} établissements
                         </td>
                         {opexState.lignes.map(ligne => {
@@ -1371,7 +1371,7 @@ export default function DsiOpex() {
                             </td>
                           );
                         })}
-                        <td className="px-3 py-3 text-right font-bold text-orange-600 text-sm tabular-nums sticky right-0 bg-muted/40 z-10 border-l border-border">
+                        <td className="px-3 py-3 text-right font-bold text-orange-600 text-sm tabular-nums sticky right-0 z-10 border-l border-border" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '-2px 0 4px -2px rgba(0,0,0,0.15)' }}>
                           {formatEuros(sortedEtabs.reduce((s, e) => s + e.total, 0))}
                         </td>
                       </tr>