Grille : case mauve quand un créneau est en sureffectif

- GrillePage : quand assigned > ideal_staff, la case passe en mauve (glyphe ▼)
  et prend le pas sur l'état « complet ».
- Nouvelle entrée de légende « SUREFFECTIF ».
- tailwind : couleurs mauve / mauve-hover.
- mock : quelques créneaux volontairement en sureffectif pour la démo.

typecheck + lint + build + smoke OK.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017uUsRg7XzopkCPWimwg9ZM

frontend/src/api/mock/dataset.ts

@@ -210,6 +210,7 @@ export function buildMockState(): MockState {
     if (slotIndex % 7 === 0) target = Math.max(1, shift.min_staff - 1);
     else if (slotIndex % 5 === 0) target = shift.min_staff;
     else if (slotIndex % 3 === 0) target = Math.max(shift.min_staff, shift.ideal_staff - 1);
+    else if (slotIndex % 8 === 0) target = shift.ideal_staff + 2; // sureffectif
 
     const duration = hoursBetween(shift.starts_at, shift.ends_at);
     const dateStr = shift.starts_at.slice(0, 10);

frontend/src/i18n/locales/fr.json

@@ -85,6 +85,7 @@
   "grille.legend.critical": "SOUS-EFFECTIF CRITIQUE",
   "grille.legend.incomplete": "INCOMPLET",
   "grille.legend.complete": "COMPLET",
+  "grille.legend.overstaffed": "SUREFFECTIF",
   "grille.positionsCount": "{count} POSTES",
   "grille.assignedRequired": "AFFECTÉS / IDÉAL",
   "grille.footnote": "Chaque cellule est un créneau. Nombre = bénévoles affectés, / = effectif idéal. Cliquer ouvre le panneau d'affectation à droite.",

frontend/src/pages/GrillePage.tsx

@@ -83,6 +83,9 @@ export function GrillePage() {
           <LegendItem swatch="bg-paper" glyph="✓">
             {t('grille.legend.complete')}
           </LegendItem>
+          <LegendItem swatch="bg-mauve" glyph="▼">
+            {t('grille.legend.overstaffed')}
+          </LegendItem>
         </div>
       </div>
 
@@ -212,8 +215,10 @@ function PositionRow({
         }
         const assigned = shift.assigned;
         const isCrit = assigned < shift.min_staff;
-        const isInc = !isCrit && assigned < shift.ideal_staff;
-        const glyph = isCrit ? '▲' : isInc ? '◧' : '✓';
+        const isOver = assigned > shift.ideal_staff;
+        const isInc = !isCrit && !isOver && assigned < shift.ideal_staff;
+        const isOk = !isCrit && !isOver && !isInc;
+        const glyph = isCrit ? '▲' : isOver ? '▼' : isInc ? '◧' : '✓';
         const selected = selectedShiftId === shift.shift_id;
         return (
           <div
@@ -222,14 +227,15 @@ function PositionRow({
             className={cx(
               'relative flex h-9 cursor-pointer items-center justify-center gap-[3px] border-b border-r border-ink',
               isCrit && 'bg-hatch-orange',
+              isOver && 'bg-mauve hover:bg-mauve-hover',
               isInc && 'bg-yellow-soft hover:bg-yellow',
-              !isCrit && !isInc && 'bg-paper hover:bg-green/10',
+              isOk && 'bg-paper hover:bg-green/10',
             )}
             title={`${assigned} affecté(s) · min ${shift.min_staff} · idéal ${shift.ideal_staff}`}
           >
             <span className="font-mono text-[13px] font-bold">{assigned}</span>
             <span className="font-mono text-[9px] opacity-50">/{shift.ideal_staff}</span>
-            <span className={cx('font-mono text-[10px] font-bold', !isCrit && !isInc && 'text-green')}>
+            <span className={cx('font-mono text-[10px] font-bold', isOk && 'text-green')}>
               {glyph}
             </span>
             {selected ? (