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/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 ? (