feat: auto-save notes candidat au blur avec indicateur de modification

Le champ "Notes candidat" passe en bordure ambre tant qu'il y a des
changements non sauvegardés. Au défocus, la sauvegarde se déclenche
automatiquement et la bordure revient à la normale.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/DimensionCard.tsx

@@ -51,6 +51,7 @@ interface DimensionCardProps {
   index: number;
   evaluationId?: string;
   onScoreChange: (dimensionId: string, data: Partial<DimensionScore>) => void;
+  onSave?: () => void;
   /** Increment to collapse this card (e.g. from "Tout fermer" button) */
   collapseAllTrigger?: number;
 }
@@ -78,8 +79,9 @@ function parseQuestions(s: string | null | undefined): string[] {
 const inputClass =
   "w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700/80 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30";
 
-export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, collapseAllTrigger }: DimensionCardProps) {
+export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, onSave, collapseAllTrigger }: DimensionCardProps) {
   const [notes, setNotes] = useState(score?.candidateNotes ?? "");
+  const [notesDirty, setNotesDirty] = useState(false);
   const hasQuestions = parseQuestions(dimension.suggestedQuestions).length > 0;
   const [expanded, setExpanded] = useState(hasQuestions);
 
@@ -191,10 +193,19 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
               value={notes}
               onChange={(e) => {
                 setNotes(e.target.value);
+                setNotesDirty(true);
                 onScoreChange(dimension.id, { candidateNotes: e.target.value });
               }}
+              onBlur={() => {
+                if (notesDirty) {
+                  setNotesDirty(false);
+                  onSave?.();
+                }
+              }}
               rows={2}
-              className={inputClass}
+              className={`${inputClass} transition-colors duration-200 ${
+                notesDirty ? "!border-amber-400 dark:!border-amber-500" : ""
+              }`}
               placeholder="Réponses du candidat..."
             />
           </div>

src/components/EvaluationEditor.tsx

@@ -318,6 +318,7 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
                 evaluationId={id}
                 score={scoreMap.get(dim.id) ?? null}
                 onScoreChange={handleScoreChange}
+                onSave={() => handleSave()}
                 collapseAllTrigger={collapseAllTrigger}
               />
             </div>