feat: use saved colors in assessment_grading

docs/CONFIGURATION_SCALES.md

@@ -122,29 +122,63 @@ function calculateNoteColor(note, maxPoints, minColor, maxColor) {
 
 ## Utilisation dans le Code
 
-### Calcul des Couleurs de Notes
+### Application dans la Page de Notation
+
+Le dégradé HSL est **automatiquement appliqué dans la page de notation** (`/assessments/<id>/grading`) pour tous les éléments de type `"notes"`.
+
+#### Transmission de la Configuration
 
 ```python
-# Côté serveur : Transmission de la configuration
+# routes/grading.py - Route assessment_grading()
 notes_gradient = {
     'min_color': config_manager.get('grading.notes_gradient.min_color', '#dc2626'),
     'max_color': config_manager.get('grading.notes_gradient.max_color', '#059669'),
     'enabled': config_manager.get('grading.notes_gradient.enabled', False)
 }
+
+return render_template('assessment_grading.html', 
+                     notes_gradient=notes_gradient,  # ← Nouvelle transmission
+                     # ... autres paramètres
+                     )
 ```
 
+#### Calcul Dynamique des Couleurs
+
 ```javascript
-// Côté client : Calcul dynamique
+// Fonction globale pour calculer la couleur d'une note
 window.getNotesGradientColor = function(note, maxPoints) {
-    const minColor = '{{ notes_gradient.min_color }}';
-    const maxColor = '{{ notes_gradient.max_color }}';
-    const enabled = {{ notes_gradient.enabled|tojson }};
+    if (!GRADING_CONFIG.notes_gradient.enabled) return '#6b7280';
     
-    if (!enabled) return '#6b7280';
-    return calculateNoteColor(note, maxPoints, minColor, maxColor);
+    const factor = Math.min(1, Math.max(0, note / maxPoints));
+    return interpolateColorHSL(
+        GRADING_CONFIG.notes_gradient.min_color,
+        GRADING_CONFIG.notes_gradient.max_color,
+        factor
+    );
 };
 ```
 
+#### Application Automatique
+
+```javascript
+// ColorManager.applyColorToInput() - Logique de colorisation
+if (type === 'notes') {
+    // Valeurs spéciales (., d, etc.) → couleurs échelle
+    if (GRADING_CONFIG.scale_values[value] && isNaN(value)) {
+        // Couleur spéciale avec style italique
+    }
+    
+    // Notes numériques (2, 2.0, 15.5, etc.) → dégradé HSL
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+        const noteColor = window.getNotesGradientColor(numValue, maxPoints);
+        input.style.color = '#374151';              // Texte gris doux
+        input.style.backgroundColor = hexToRgba(noteColor, 0.25);  // Fond coloré
+        input.style.borderColor = hexToRgba(noteColor, 0.5);       // Bordure accentuée
+    }
+}
+```
+
 ### Accès aux Valeurs d'Échelle
 
 ```python
@@ -267,21 +301,54 @@ Dégradé notes : Orange → Bleu (évaluations /10)
 Valeurs spéciales : "NA" pour non applicable, "O" pour oral seulement
 ```
 
+## Indicateurs Visuels d'Erreur
+
+### Validation des Saisies
+
+Le système détecte automatiquement les **valeurs interdites** et applique un indicateur visuel très visible :
+
+```javascript
+// Valeurs interdites → Indicateur rouge vif
+if (!isValid) {
+    input.style.color = '#ffffff';           // Texte blanc
+    input.style.backgroundColor = '#dc2626'; // Fond rouge vif
+    input.style.borderColor = '#dc2626';     // Bordure rouge
+    input.style.borderWidth = '2px';         // Bordure épaisse
+    input.style.boxShadow = '0 0 0 3px rgba(220, 38, 38, 0.3)'; // Ombre rouge
+    input.style.fontWeight = 'bold';         // Texte en gras
+}
+```
+
+### Exemples d'Erreurs Détectées
+
+**Pour les scores (type="score")** :
+- Valeurs autres que 0, 1, 2, 3 ou valeurs spéciales configurées
+- Exemples : `"5"`, `"1.5"`, `"abc"`, `"-1"`
+
+**Pour les notes (type="notes")** :
+- Valeurs négatives : `"-5"`
+- Valeurs supérieures au maximum : `"25"` (si max=20)
+- Format invalide : `"abc"`, `"2.5.3"`, `"10,5,2"`
+
+### Reset Automatique
+Dès qu'une valeur valide est saisie, tous les styles d'erreur sont automatiquement effacés et remplacés par la colorisation normale.
+
 ## Impact UX
 
 ### Bénéfices Utilisateur
 - **Cohérence visuelle** : Couleurs automatiques selon performance
-- **Simplicité** : Un seul bouton de sauvegarde
-- **Feedback immédiat** : Prévisualisation temps réel
+- **Feedback immédiat** : Erreurs visibles instantanément + dégradé temps réel
+- **Distinction claire** : Notes vs Scores vs Valeurs spéciales
+- **Simplicité** : Configuration centralisée, application automatique
 - **Flexibilité** : Adaptation aux pratiques pédagogiques
 
 ### Performance
-- **Client** : Calculs JavaScript optimisés
-- **Serveur** : Configuration mise en cache
+- **Client** : Calculs JavaScript optimisés avec interpolation HSL native
+- **Serveur** : Configuration mise en cache, transmission optimisée
 - **Base** : Index sur valeurs d'échelle
-- **Rendu** : Templates précompilés
+- **Rendu** : Colorisation temps réel sans rechargement
 
 ---
 
 **Documentation maintenue à jour - Version 2025**  
-*Dernière modification : Janvier 2025*
+*Dernière modification : 9 août 2025 - Ajout dégradé HSL et indicateurs d'erreur*

docs/backend/README.md

@@ -156,6 +156,8 @@ notytex/
 - ✅ **Dynamic Settings** : Configuration runtime modifiable
 - ✅ **Scales Management** : Échelles de notation configurables (0-3 + spéciales)
 - ✅ **Color Gradients** : Système dégradé couleurs notes avec HSL
+- ✅ **Visual Feedback** : Indicateurs d'erreur visuels pour validation
+- ✅ **Grading Integration** : Application automatique dans page de notation
 - ✅ **Business Rules** : Règles métier configurables
 - ✅ **Unified Interface** : Interface de configuration unifiée