diff --git a/templates/assessment_form.html b/templates/assessment_form.html
index 541bc3b..392f204 100644
--- a/templates/assessment_form.html
+++ b/templates/assessment_form.html
@@ -23,159 +23,146 @@ window.notytexDisableAutoload = true;
         {% endif %}
     </div>
 
-    <div class="bg-white shadow rounded-lg">
-        <div class="px-4 py-3 border-b border-gray-200">
-            <h1 class="text-xl font-semibold text-gray-900">{{ title }}</h1>
-            {% if is_edit %}
-                <p class="text-sm text-gray-600 mt-1">Modifiez votre évaluation avec exercices et éléments de notation</p>
-            {% else %}
-                <p class="text-sm text-gray-600 mt-1">Créez votre évaluation avec exercices et éléments de notation</p>
-            {% endif %}
+    <div class="bg-white shadow-sm rounded-lg border border-gray-200">
+        <div class="px-6 py-4 border-b border-gray-200">
+            <h1 class="text-2xl font-bold text-gray-900">{{ title }}</h1>
+            <p class="text-sm text-gray-600 mt-1">
+                {% if is_edit %}
+                    Modifiez votre évaluation avec exercices et éléments de notation
+                {% else %}
+                    Créez votre évaluation avec exercices et éléments de notation
+                {% endif %}
+            </p>
         </div>
 
-        <form id="unified-form" method="POST" class="px-4 py-4 space-y-4">
+        <form id="unified-form" method="POST" class="px-6 py-6">
             {{ form.hidden_tag() }}
 
-            <!-- Section Évaluation - Optimisée 3 colonnes -->
-            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
-                <h2 class="text-lg font-medium text-blue-900 mb-3">📝 Informations de l'évaluation</h2>
+            <!-- Section Informations générales -->
+            <div class="mb-8">
+                <h2 class="text-lg font-semibold text-gray-900 mb-4">Informations générales</h2>
 
-                <!-- Première ligne : Titre, Classe, Date -->
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-3">
-                    <div>
-                        <label for="{{ form.title.id }}" class="block text-sm font-medium text-gray-700 mb-1">
-                            {{ form.title.label.text }}
-                        </label>
-                        {{ form.title(class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-blue-500 focus:border-blue-500") }}
-                        {% if form.title.errors %}
-                            <div class="mt-1 text-sm text-red-600">
-                                {% for error in form.title.errors %}
-                                    <p>{{ error }}</p>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                    </div>
+                <!-- Ligne 1 : Titre -->
+                <div class="mb-4">
+                    <label for="{{ form.title.id }}" class="block text-xs font-medium text-gray-600 mb-1">
+                        {{ form.title.label.text }}
+                    </label>
+                    {{ form.title(class="block w-full text-base px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors font-medium") }}
+                    {% if form.title.errors %}
+                        <p class="mt-1 text-sm text-red-600">{{ form.title.errors[0] }}</p>
+                    {% endif %}
+                </div>
 
+                <!-- Ligne 2 : Classe, Date, Trimestre, Coefficient -->
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                     <div>
-                        <label for="{{ form.class_group_id.id }}" class="block text-sm font-medium text-gray-700 mb-1">
+                        <label for="{{ form.class_group_id.id }}" class="block text-xs font-medium text-gray-600 mb-1">
                             {{ form.class_group_id.label.text }}
                         </label>
-                        {{ form.class_group_id(class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-blue-500 focus:border-blue-500") }}
+                        {{ form.class_group_id(class="block w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors cursor-pointer") }}
                         {% if form.class_group_id.errors %}
-                            <div class="mt-1 text-sm text-red-600">
-                                {% for error in form.class_group_id.errors %}
-                                    <p>{{ error }}</p>
-                                {% endfor %}
-                            </div>
+                            <p class="mt-1 text-sm text-red-600">{{ form.class_group_id.errors[0] }}</p>
                         {% endif %}
                     </div>
 
                     <div>
-                        <label for="{{ form.date.id }}" class="block text-sm font-medium text-gray-700 mb-1">
+                        <label for="{{ form.date.id }}" class="block text-xs font-medium text-gray-600 mb-1">
                             {{ form.date.label.text }}
                         </label>
-                        {{ form.date(class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-blue-500 focus:border-blue-500") }}
+                        {{ form.date(class="block w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors") }}
                         {% if form.date.errors %}
-                            <div class="mt-1 text-sm text-red-600">
-                                {% for error in form.date.errors %}
-                                    <p>{{ error }}</p>
-                                {% endfor %}
-                            </div>
+                            <p class="mt-1 text-sm text-red-600">{{ form.date.errors[0] }}</p>
+                        {% endif %}
+                    </div>
+
+                    <div>
+                        <label for="{{ form.trimester.id }}" class="block text-xs font-medium text-gray-600 mb-1">
+                            {{ form.trimester.label.text }}
+                        </label>
+                        {{ form.trimester(class="block w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors cursor-pointer") }}
+                        {% if form.trimester.errors %}
+                            <p class="mt-1 text-sm text-red-600">{{ form.trimester.errors[0] }}</p>
+                        {% endif %}
+                    </div>
+
+                    <div>
+                        <label for="{{ form.coefficient.id }}" class="block text-xs font-medium text-gray-600 mb-1">
+                            {{ form.coefficient.label.text }}
+                        </label>
+                        {{ form.coefficient(class="block w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors", step="0.5") }}
+                        {% if form.coefficient.errors %}
+                            <p class="mt-1 text-sm text-red-600">{{ form.coefficient.errors[0] }}</p>
                         {% endif %}
                     </div>
                 </div>
 
-                <!-- Deuxième ligne : Trimestre, Coefficient, Description -->
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                    <div>
-                        <label for="{{ form.trimester.id }}" class="block text-sm font-medium text-gray-700 mb-1">
-                            {{ form.trimester.label.text }}
-                        </label>
-                        {{ form.trimester(class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-blue-500 focus:border-blue-500") }}
-                        {% if form.trimester.errors %}
-                            <div class="mt-1 text-sm text-red-600">
-                                {% for error in form.trimester.errors %}
-                                    <p>{{ error }}</p>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <div>
-                        <label for="{{ form.coefficient.id }}" class="block text-sm font-medium text-gray-700 mb-1">
-                            {{ form.coefficient.label.text }}
-                        </label>
-                        {{ form.coefficient(class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-blue-500 focus:border-blue-500", step="0.5") }}
-                        {% if form.coefficient.errors %}
-                            <div class="mt-1 text-sm text-red-600">
-                                {% for error in form.coefficient.errors %}
-                                    <p>{{ error }}</p>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <div>
-                        <label for="{{ form.description.id }}" class="block text-sm font-medium text-gray-700 mb-1">
-                            {{ form.description.label.text }}
-                        </label>
-                        {{ form.description(class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-blue-500 focus:border-blue-500", rows="1") }}
-                        {% if form.description.errors %}
-                            <div class="mt-1 text-sm text-red-600">
-                                {% for error in form.description.errors %}
-                                    <p>{{ error }}</p>
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                    </div>
+                <!-- Ligne 3 : Description -->
+                <div>
+                    <label for="{{ form.description.id }}" class="block text-xs font-medium text-gray-600 mb-1">
+                        {{ form.description.label.text }} <span class="text-gray-500 text-xs">(optionnel)</span>
+                    </label>
+                    {{ form.description(class="block w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors", rows="1") }}
+                    {% if form.description.errors %}
+                        <p class="mt-1 text-sm text-red-600">{{ form.description.errors[0] }}</p>
+                    {% endif %}
                 </div>
             </div>
 
-            <!-- Section Exercices - Compacte -->
-            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
-                <div class="mb-3">
-                    <h2 class="text-lg font-medium text-green-900">🏃 Exercices</h2>
-                </div>
+            <!-- Séparateur -->
+            <div class="border-t-2 border-gray-200 mb-8"></div>
 
-                <div id="exercises-container" class="space-y-3">
+            <!-- Section Exercices - Hybrid Design -->
+            <div class="mb-8">
+                <h2 class="text-lg font-semibold text-gray-900 mb-4">Exercices et barème</h2>
+
+                <div id="exercises-container" class="space-y-6">
                     <!-- Les exercices seront ajoutés ici dynamiquement -->
                 </div>
 
-                <div id="no-exercises" class="text-center py-4 text-green-700">
+                <div id="no-exercises" class="text-center py-8 text-gray-500 border-2 border-dashed border-gray-300 rounded-lg">
                     <p class="text-sm">Aucun exercice ajouté. Utilisez le bouton ci-dessous pour commencer.</p>
                 </div>
 
-                <!-- Bouton d'ajout compacte -->
-                <div class="mt-3 pt-3 border-t border-green-200">
-                    <button type="button" id="add-exercise" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
-                        ➕ Ajouter un exercice
+                <div class="mt-6">
+                    <button type="button" id="add-exercise" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                        </svg>
+                        Ajouter un exercice
                     </button>
                 </div>
             </div>
 
-            <!-- Guide d'aide compact -->
-            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                <h3 class="text-sm font-medium text-gray-900 mb-1">💡 Guide rapide</h3>
-                <div class="text-xs text-gray-700 space-y-1">
-                    <p><strong>Points :</strong> Notation classique (ex: 2.5/4 points) | <strong>Score :</strong> Niveaux 0-3 (0=non acquis, 1=en cours, 2=acquis, 3=expert)</p>
-                </div>
+            <!-- Guide rapide compact -->
+            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+                <h3 class="text-sm font-medium text-blue-900 mb-2">💡 Guide rapide</h3>
+                <p class="text-xs text-blue-800">
+                    <strong>Points :</strong> Notation classique décimale (ex: 2.5 sur 4 points) •
+                    <strong>Score :</strong> Niveaux de compétences 0-3 (0=non acquis, 1=en cours, 2=acquis, 3=expert)
+                </p>
             </div>
 
             <!-- Actions -->
-            <div class="flex justify-end space-x-3 pt-3 border-t border-gray-200">
+            <div class="flex items-center justify-between pt-6 border-t-2 border-gray-200">
                 {% if is_edit %}
-                    <a href="{{ url_for('assessments.detail', id=assessment.id) }}" class="px-4 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
+                    <a href="{{ url_for('assessments.detail', id=assessment.id) }}" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                         Annuler
                     </a>
-                    <button type="submit" class="px-4 py-1.5 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-                        💾 Modifier l'évaluation
+                    <button type="submit" class="inline-flex items-center px-6 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                        </svg>
+                        Modifier l'évaluation
                     </button>
                 {% else %}
-                    <a href="{{ url_for('assessments.list') }}" class="px-4 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
+                    <a href="{{ url_for('assessments.list') }}" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                         Annuler
                     </a>
-                    <button type="submit" class="px-4 py-1.5 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-                        💾 Créer l'évaluation
+                    <button type="submit" class="inline-flex items-center px-6 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                        </svg>
+                        Créer l'évaluation
                     </button>
                 {% endif %}
             </div>
@@ -183,136 +170,161 @@ window.notytexDisableAutoload = true;
     </div>
 </div>
 
-<!-- Bandeau sticky résumé temps réel (desktop uniquement) -->
-<div id="summary-banner" class="fixed bottom-0 left-0 right-0 bg-white border-t shadow-lg px-4 py-2 hidden lg:block z-40">
-    <div class="max-w-6xl mx-auto flex items-center justify-between">
-        <div class="flex items-center space-x-6 text-sm">
-            <span class="font-medium">📊 Total: <span id="total-points" class="text-blue-600 font-bold">0</span> points</span>
-            <span>🏃 <span id="exercise-count" class="text-green-600 font-semibold">0</span> exercices</span>
-            <span>📝 <span id="element-count" class="text-purple-600 font-semibold">0</span> éléments</span>
+<!-- Bandeau sticky résumé temps réel -->
+<div id="summary-banner" class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-gray-200 shadow-lg px-4 py-3 hidden z-40">
+    <div class="max-w-6xl mx-auto flex flex-wrap items-center justify-between gap-4">
+        <div class="flex flex-wrap items-center gap-6 text-sm">
+            <span class="font-medium">
+                📊 Total: <span id="total-points" class="text-blue-600 font-bold text-lg">0</span> points
+            </span>
+            <span>
+                🏃 <span id="exercise-count" class="text-green-600 font-semibold">0</span> exercices
+            </span>
+            <span>
+                📝 <span id="element-count" class="text-purple-600 font-semibold">0</span> éléments
+            </span>
         </div>
-        <div class="flex items-center space-x-4 text-xs">
-            <div id="competence-summary" class="text-orange-600">
+        <div class="flex flex-wrap items-center gap-4 text-xs">
+            <div id="competence-summary" class="text-orange-600 font-medium">
                 <!-- Compétences dynamiques -->
             </div>
-            <div id="domain-summary" class="text-cyan-600">
+            <div id="domain-summary" class="text-cyan-600 font-medium">
                 <!-- Domaines dynamiques -->
             </div>
         </div>
     </div>
 </div>
 
-<!-- Template pour un exercice - Version compacte -->
+<!-- Template pour un exercice - Design Hybrid -->
 <template id="exercise-template">
-    <div class="exercise-item border border-green-300 rounded-lg p-3 bg-white">
-        <div class="flex justify-between items-start mb-3">
-            <h3 class="text-md font-medium text-green-800">Exercice <span class="exercise-number"></span></h3>
-            <button type="button" class="remove-exercise text-red-600 hover:text-red-800 text-sm font-medium">
-                Supprimer
-            </button>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Titre de l'exercice</label>
-                <input type="text" class="exercise-title block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-green-500 focus:border-green-500" required>
+    <div class="exercise-item mb-8">
+        <!-- Header exercice avec ligne pointillée -->
+        <div class="flex items-center justify-between py-3 border-b-2 border-dotted border-gray-400">
+            <div class="flex items-center space-x-3">
+                <span class="text-base font-semibold text-gray-700">Exercice <span class="exercise-number"></span></span>
+                <span class="text-gray-400">·</span>
+                <input type="text" class="exercise-title text-base font-medium border-0 border-b border-transparent hover:border-gray-300 focus:border-blue-500 bg-transparent focus:outline-none transition-colors px-2 py-1 w-64" placeholder="Titre de l'exercice" required>
             </div>
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Ordre</label>
-                <input type="number" class="exercise-order block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-green-500 focus:border-green-500" min="1" required>
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Description (optionnel)</label>
-                <input type="text" class="exercise-description block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-green-500 focus:border-green-500">
+            <div class="flex items-center space-x-3">
+                <span class="exercise-total text-sm font-semibold text-blue-600">0 pts</span>
+                <button type="button" class="remove-exercise text-red-500 hover:text-red-700 transition-colors p-1">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
             </div>
         </div>
 
-        <!-- Éléments de notation - Version compacte -->
-        <div class="bg-purple-50 border border-purple-200 rounded p-3">
-            <div class="mb-2">
-                <h4 class="text-sm font-medium text-purple-900">Éléments de notation</h4>
+        <!-- Description exercice (optionnelle) -->
+        <div class="mt-2 px-3">
+            <input type="text" class="exercise-description w-full text-sm px-2 py-1 border-0 border-b border-transparent hover:border-gray-300 focus:border-blue-500 bg-transparent focus:outline-none transition-colors text-gray-600" placeholder="Description de l'exercice (optionnel)">
+        </div>
+
+        <!-- Ordre caché (auto-calculé) -->
+        <input type="hidden" class="exercise-order">
+
+        <!-- Tableau des éléments de notation -->
+        <div class="mt-4">
+            <!-- Header tableau -->
+            <div class="grid grid-cols-[auto_1fr_auto_auto_auto_auto_auto] gap-2 text-xs font-semibold text-gray-600 px-3 pb-2">
+                <div class="w-12">#</div>
+                <div>Description</div>
+                <div class="w-32">Compétence</div>
+                <div class="w-32">Domaine</div>
+                <div class="w-20">Points</div>
+                <div class="w-16">Type</div>
+                <div class="w-8"></div>
             </div>
 
+            <!-- Conteneur des éléments -->
             <div class="grading-elements-container space-y-2">
-                <!-- Les éléments de notation seront ajoutés ici -->
+                <!-- Les éléments seront ajoutés ici -->
             </div>
 
-            <div class="no-grading-elements text-center py-2 text-purple-700 text-xs">
-                Aucun élément de notation. Utilisez le bouton ci-dessous pour commencer.
+            <!-- Message si aucun élément -->
+            <div class="no-grading-elements text-center py-6 text-gray-400 text-sm">
+                Aucun élément de notation. Cliquez sur "Ajouter un élément" ci-dessous.
             </div>
 
-            <!-- Bouton d'ajout compacte -->
-            <div class="mt-2 pt-2 border-t border-purple-200">
-                <button type="button" class="add-grading-element bg-purple-600 hover:bg-purple-700 text-white px-2 py-1 rounded text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-1">
-                    ➕ Ajouter élément
+            <!-- Bouton ajouter élément -->
+            <div class="mt-3 px-3">
+                <button type="button" class="add-grading-element text-sm text-blue-600 hover:text-blue-800 font-medium transition-colors">
+                    + Ajouter un élément
                 </button>
             </div>
         </div>
     </div>
 </template>
 
-<!-- Template pour un élément de notation - Version compacte -->
+<!-- Template pour un élément de notation - Design tableau simple -->
 <template id="grading-element-template">
-    <div class="grading-element-item border border-purple-300 rounded p-2 bg-white">
-        <div class="flex justify-between items-start mb-2">
-            <h5 class="text-sm font-medium text-purple-800">Élément de notation</h5>
-            <button type="button" class="remove-grading-element text-red-600 hover:text-red-800 text-xs font-medium">
-                Supprimer
+    <div class="grading-element-item grid grid-cols-[auto_1fr_auto_auto_auto_auto_auto] gap-2 items-center px-3 py-2 hover:bg-gray-50 rounded-md transition-colors">
+        <!-- # -->
+        <div class="w-12">
+            <input type="text" class="element-label w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors" placeholder="1a" required>
+        </div>
+
+        <!-- Description -->
+        <div>
+            <input type="text" class="element-description w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors" placeholder="Description...">
+        </div>
+
+        <!-- Compétence -->
+        <div class="w-32">
+            <select class="element-skill w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors cursor-pointer">
+                <option value="">Non spécifiée</option>
+                {% for competence in competences %}
+                    <option value="{{ competence.name }}" data-color="{{ competence.color }}" data-icon="{{ competence.icon }}">
+                        {{ competence.name }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <!-- Domaine avec autocomplétion -->
+        <div class="w-32 relative">
+            <input type="text" class="element-domain-input w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors" placeholder="Domaine..." autocomplete="off">
+            <input type="hidden" class="element-domain-id">
+            <div class="element-domain-suggestions absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-32 overflow-y-auto hidden">
+                <!-- Suggestions dynamiques -->
+            </div>
+        </div>
+
+        <!-- Points max -->
+        <div class="w-20">
+            <input type="number" step="0.1" min="0" class="element-max-points w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors" placeholder="0" required>
+        </div>
+
+        <!-- Type -->
+        <div class="w-16">
+            <select class="element-grading-type w-full text-sm px-2 py-1 border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 bg-transparent focus:outline-none transition-colors cursor-pointer" required>
+                <option value="">...</option>
+                <option value="notes">Pts</option>
+                <option value="score">Scr</option>
+            </select>
+        </div>
+
+        <!-- Bouton supprimer -->
+        <div class="w-8 flex justify-center">
+            <button type="button" class="remove-grading-element text-gray-400 hover:text-red-600 transition-colors p-1">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
             </button>
         </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-5 gap-2 mb-2">
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1">Label</label>
-                <input type="text" class="element-label block w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:ring-purple-500 focus:border-purple-500" required>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1">Compétence</label>
-                <select class="element-skill block w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:ring-purple-500 focus:border-purple-500">
-                    <option value="">Non spécifiée</option>
-                    {% for competence in competences %}
-                        <option value="{{ competence.name }}" data-color="{{ competence.color }}" data-icon="{{ competence.icon }}">
-                            {{ competence.name }}
-                        </option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1">Domaine</label>
-                <div class="relative">
-                    <input type="text" class="element-domain-input block w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:ring-purple-500 focus:border-purple-500" placeholder="Domaine..." autocomplete="off">
-                    <input type="hidden" class="element-domain-id">
-                    <div class="element-domain-suggestions absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-32 overflow-y-auto hidden">
-                        <!-- Suggestions dynamiques -->
-                    </div>
-                </div>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1">Points max</label>
-                <input type="number" step="0.1" min="0" class="element-max-points block w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:ring-purple-500 focus:border-purple-500" required>
-            </div>
-            <div>
-                <label class="block text-xs font-medium text-gray-700 mb-1">Type</label>
-                <select class="element-grading-type block w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:ring-purple-500 focus:border-purple-500" required>
-                    <option value="">Type...</option>
-                    <option value="notes">Points</option>
-                    <option value="score">Score</option>
-                </select>
-            </div>
-        </div>
-
-        <div class="mt-2">
-            <label class="block text-xs font-medium text-gray-700 mb-1">Description (optionnel)</label>
-            <input type="text" class="element-description block w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:ring-purple-500 focus:border-purple-500">
-        </div>
     </div>
 </template>
 
-<!-- Modal pour création de domaine - Version compacte -->
+<!-- Toast container pour notifications -->
+<div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2">
+    <!-- Les toasts seront ajoutés ici dynamiquement -->
+</div>
+
+<!-- Modal pour création de domaine -->
 <div id="domain-creation-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
-    <div class="relative top-20 mx-auto p-4 border w-96 shadow-lg rounded-md bg-white">
-        <div class="mt-2">
-            <div class="flex items-center justify-between mb-3">
+    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <div class="mt-3">
+            <div class="flex items-center justify-between mb-4">
                 <h3 class="text-lg font-medium text-gray-900">Créer un nouveau domaine</h3>
                 <button type="button" class="close-modal text-gray-400 hover:text-gray-600">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -321,36 +333,36 @@ window.notytexDisableAutoload = true;
                 </button>
             </div>
 
-            <div class="space-y-3">
+            <div class="space-y-4">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">Nom du domaine</label>
-                    <input type="text" id="new-domain-name" class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-purple-500 focus:border-purple-500" placeholder="Ex: Calcul mental">
+                    <input type="text" id="new-domain-name" class="block w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Calcul mental">
                 </div>
 
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">Couleur associée</label>
                     <div class="flex flex-wrap gap-2 mb-2">
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #3b82f6" data-color="#3b82f6"></button>
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #10b981" data-color="#10b981"></button>
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #f59e0b" data-color="#f59e0b"></button>
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #8b5cf6" data-color="#8b5cf6"></button>
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #ef4444" data-color="#ef4444"></button>
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #06b6d4" data-color="#06b6d4"></button>
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #84cc16" data-color="#84cc16"></button>
-                        <button type="button" class="color-option w-6 h-6 rounded-full border-2 border-gray-300 hover:border-gray-400" style="background-color: #f97316" data-color="#f97316"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #3b82f6" data-color="#3b82f6"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #10b981" data-color="#10b981"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #f59e0b" data-color="#f59e0b"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #8b5cf6" data-color="#8b5cf6"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #ef4444" data-color="#ef4444"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #06b6d4" data-color="#06b6d4"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #84cc16" data-color="#84cc16"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors" style="background-color: #f97316" data-color="#f97316"></button>
                     </div>
-                    <input type="color" id="custom-color" class="w-full h-8 border border-gray-300 rounded cursor-pointer" value="#3b82f6">
+                    <input type="color" id="custom-color" class="w-full h-10 border border-gray-300 rounded cursor-pointer" value="#3b82f6">
                 </div>
 
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">Description (optionnel)</label>
-                    <input type="text" id="new-domain-description" class="block w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-purple-500 focus:border-purple-500" placeholder="Description du domaine...">
+                    <input type="text" id="new-domain-description" class="block w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Description du domaine...">
                 </div>
             </div>
 
-            <div class="flex justify-end space-x-2 mt-4">
-                <button type="button" class="close-modal px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md">Annuler</button>
-                <button type="button" id="confirm-domain-creation" class="px-3 py-1.5 text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 rounded-md">Créer</button>
+            <div class="flex justify-end space-x-3 mt-5">
+                <button type="button" class="close-modal px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">Annuler</button>
+                <button type="button" id="confirm-domain-creation" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">Créer</button>
             </div>
         </div>
     </div>
@@ -358,8 +370,6 @@ window.notytexDisableAutoload = true;
 
 <script>
 let exerciseCounter = 0;
-
-// Variables globales pour les domaines
 let availableDomains = [];
 let currentDomainInput = null;
 let selectedColor = '#3b82f6';
@@ -373,14 +383,66 @@ let summaryState = {
     byDomain: {}
 };
 
-// Fonctions de calcul temps réel
+// ============================================================================
+// FONCTIONS UTILITAIRES
+// ============================================================================
+
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+
+    const colors = {
+        success: 'bg-green-500',
+        error: 'bg-red-500',
+        warning: 'bg-orange-500',
+        info: 'bg-blue-500'
+    };
+
+    const icons = {
+        success: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>',
+        error: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>',
+        warning: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>',
+        info: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
+    };
+
+    toast.className = `${colors[type]} text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-3 min-w-[300px] animate-slide-in`;
+    toast.innerHTML = `
+        <div class="flex-shrink-0">${icons[type]}</div>
+        <div class="flex-1 text-sm font-medium">${message}</div>
+        <button class="flex-shrink-0 hover:bg-white hover:bg-opacity-20 rounded p-1 transition-colors" onclick="this.parentElement.remove()">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+    `;
+
+    container.appendChild(toast);
+
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateX(100%)';
+        setTimeout(() => toast.remove(), 300);
+    }, 5000);
+}
+
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+}
+
+// ============================================================================
+// CALCUL DU RÉSUMÉ TEMPS RÉEL
+// ============================================================================
+
 function calculateLiveSummary() {
     const exercises = collectFormData();
 
     let totalPoints = 0;
     let elementCount = 0;
     let byCompetence = {};
-    let byDomain = {};
 
     exercises.forEach(exercise => {
         exercise.grading_elements.forEach(element => {
@@ -397,16 +459,6 @@ function calculateLiveSummary() {
                     byCompetence[element.skill].count++;
                     byCompetence[element.skill].points += points;
                 }
-
-                // Grouper par domaine (nom du domaine depuis l'input text)
-                const domainInput = element.domainInput;
-                if (domainInput && domainInput.trim()) {
-                    if (!byDomain[domainInput]) {
-                        byDomain[domainInput] = { count: 0, points: 0 };
-                    }
-                    byDomain[domainInput].count++;
-                    byDomain[domainInput].points += points;
-                }
             }
         });
     });
@@ -415,8 +467,7 @@ function calculateLiveSummary() {
         totalPoints: totalPoints,
         exerciseCount: exercises.length,
         elementCount: elementCount,
-        byCompetence: byCompetence,
-        byDomain: byDomain
+        byCompetence: byCompetence
     };
 }
 
@@ -433,21 +484,10 @@ function updateSummaryBanner() {
     if (Object.keys(summary.byCompetence).length > 0) {
         const competenceList = Object.entries(summary.byCompetence)
             .map(([comp, data]) => `${comp}: ${data.count}`)
-            .join(' | ');
+            .join(' • ');
         competenceDiv.innerHTML = `🏷️ ${competenceList}`;
     } else {
-        competenceDiv.innerHTML = '🏷️ Aucune compétence';
-    }
-
-    // Mettre à jour le résumé domaines
-    const domainDiv = document.getElementById('domain-summary');
-    if (Object.keys(summary.byDomain).length > 0) {
-        const domainList = Object.entries(summary.byDomain)
-            .map(([domain, data]) => `${domain}: ${data.points.toFixed(1)}pts`)
-            .join(' | ');
-        domainDiv.innerHTML = `🌐 ${domainList}`;
-    } else {
-        domainDiv.innerHTML = '🌐 Aucun domaine';
+        competenceDiv.innerHTML = '';
     }
 
     // Afficher/masquer le bandeau selon le contenu
@@ -459,22 +499,12 @@ function updateSummaryBanner() {
     }
 }
 
-// Debounced version pour les performances
 const debouncedUpdateSummary = debounce(updateSummaryBanner, 300);
 
-function debounce(func, wait) {
-    let timeout;
-    return function executedFunction(...args) {
-        const later = () => {
-            clearTimeout(timeout);
-            func(...args);
-        };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-    };
-}
+// ============================================================================
+// COLLECTE DES DONNÉES DU FORMULAIRE
+// ============================================================================
 
-// Fonction globale pour collecter les données du formulaire
 function collectFormData() {
     const exercisesContainer = document.getElementById('exercises-container');
     if (!exercisesContainer) return [];
@@ -482,14 +512,14 @@ function collectFormData() {
     const exercises = [];
     const exerciseItems = exercisesContainer.querySelectorAll('.exercise-item');
 
-    exerciseItems.forEach(exerciseItem => {
+    exerciseItems.forEach((exerciseItem, index) => {
         const titleInput = exerciseItem.querySelector('.exercise-title');
         const descriptionInput = exerciseItem.querySelector('.exercise-description');
         const orderInput = exerciseItem.querySelector('.exercise-order');
 
         const title = titleInput ? titleInput.value : '';
         const description = descriptionInput ? descriptionInput.value : '';
-        const order = orderInput ? parseInt(orderInput.value) || 0 : 0;
+        const order = index + 1; // Auto-calculé
 
         if (!title.trim()) return;
 
@@ -514,15 +544,13 @@ function collectFormData() {
                 max_points: maxPoints,
                 grading_type: gradingType,
                 description: description.trim(),
-                domainInput: domainTextInput ? domainTextInput.value.trim() : '' // Pour le résumé
+                domainInput: domainTextInput ? domainTextInput.value.trim() : ''
             };
 
             // Gestion du domaine
             if (domainHiddenInput && domainHiddenInput.value) {
-                // Domaine existant sélectionné via autocomplétion
                 elementData.domain_id = parseInt(domainHiddenInput.value);
             } else if (domainTextInput && domainTextInput.value.trim() && !domainHiddenInput.value) {
-                // Nouveau domaine à créer (texte saisi mais pas d'ID)
                 elementData.domain_name = domainTextInput.value.trim();
             }
 
@@ -540,7 +568,10 @@ function collectFormData() {
     return exercises;
 }
 
-// Charger les domaines disponibles
+// ============================================================================
+// GESTION DES DOMAINES
+// ============================================================================
+
 async function loadDomains() {
     try {
         const response = await fetch('/api/domains/');
@@ -553,7 +584,6 @@ async function loadDomains() {
     }
 }
 
-// Configuration de l'autocomplétion pour les domaines
 function setupDomainAutocomplete(container) {
     const inputElement = container.querySelector('.element-domain-input');
     const hiddenElement = container.querySelector('.element-domain-id');
@@ -564,12 +594,13 @@ function setupDomainAutocomplete(container) {
     }
 
     let debounceTimer = null;
+    let selectedIndex = -1;
 
     inputElement.addEventListener('input', function() {
         const query = this.value.trim();
         clearTimeout(debounceTimer);
+        selectedIndex = -1;
 
-        // Mettre à jour le résumé à chaque changement
         debouncedUpdateSummary();
 
         if (query.length === 0) {
@@ -584,7 +615,6 @@ function setupDomainAutocomplete(container) {
     });
 
     inputElement.addEventListener('blur', function(e) {
-        // Délai plus long pour permettre le clic sur les suggestions
         setTimeout(() => {
             if (!suggestionsElement.contains(document.activeElement) &&
                 !suggestionsElement.matches(':hover')) {
@@ -599,53 +629,60 @@ function setupDomainAutocomplete(container) {
         }
     });
 
-    // Gestion des touches clavier avec navigation
-    let selectedIndex = -1;
-
+    // Navigation clavier
     inputElement.addEventListener('keydown', function(e) {
         const suggestions = suggestionsElement.querySelectorAll('.suggestion-item');
 
-        if (e.key === 'Escape') {
-            hideSuggestions(suggestionsElement);
-            selectedIndex = -1;
-            this.blur();
-        } else if (e.key === 'ArrowDown') {
+        if (suggestions.length === 0) return;
+
+        if (e.key === 'ArrowDown') {
             e.preventDefault();
-            if (suggestions.length > 0) {
-                selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1);
-                updateSelection(suggestions, selectedIndex);
-            }
+            selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1);
+            updateSelection(suggestions, selectedIndex);
         } else if (e.key === 'ArrowUp') {
             e.preventDefault();
-            if (suggestions.length > 0) {
-                selectedIndex = Math.max(selectedIndex - 1, -1);
-                updateSelection(suggestions, selectedIndex);
-            }
+            selectedIndex = Math.max(selectedIndex - 1, -1);
+            updateSelection(suggestions, selectedIndex);
         } else if (e.key === 'Enter') {
             e.preventDefault();
             if (selectedIndex >= 0 && suggestions[selectedIndex]) {
-                suggestions[selectedIndex].dispatchEvent(new Event('mousedown'));
+                // Trigger mousedown event instead of click
+                const mousedownEvent = new MouseEvent('mousedown', {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window
+                });
+                suggestions[selectedIndex].dispatchEvent(mousedownEvent);
             } else if (suggestions.length > 0) {
-                suggestions[0].dispatchEvent(new Event('mousedown'));
+                const mousedownEvent = new MouseEvent('mousedown', {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window
+                });
+                suggestions[0].dispatchEvent(mousedownEvent);
             }
+        } else if (e.key === 'Escape') {
+            hideSuggestions(suggestionsElement);
+            selectedIndex = -1;
         } else if (e.key === 'Tab') {
             if (suggestions.length > 0 && selectedIndex === -1) {
                 e.preventDefault();
-                suggestions[0].dispatchEvent(new Event('mousedown'));
+                const mousedownEvent = new MouseEvent('mousedown', {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window
+                });
+                suggestions[0].dispatchEvent(mousedownEvent);
             }
         }
     });
 
-    // Reset de la sélection quand on tape
-    inputElement.addEventListener('input', function() {
-        selectedIndex = -1;
-    });
-
     function updateSelection(suggestions, index) {
         suggestions.forEach((suggestion, i) => {
-            suggestion.classList.remove('bg-purple-100', 'bg-blue-100', 'ring-2', 'ring-purple-500');
+            suggestion.classList.remove('bg-blue-100', 'ring-2', 'ring-blue-500');
             if (i === index) {
                 suggestion.classList.add('bg-blue-100', 'ring-2', 'ring-blue-500');
+                suggestion.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
             }
         });
     }
@@ -671,21 +708,19 @@ async function searchAndShowSuggestions(query, inputElement, hiddenElement, sugg
             });
         }
 
-        // Vérifier s'il y a une correspondance exacte
         const exactMatch = domains.find(domain =>
             domain.name.toLowerCase() === query.toLowerCase()
         );
 
-        // Option "Créer nouveau domaine" si pas de correspondance exacte
         if (!exactMatch) {
             const createDiv = document.createElement('div');
-            createDiv.className = 'suggestion-item px-2 py-1 text-sm cursor-pointer hover:bg-purple-100 border-t border-gray-200';
+            createDiv.className = 'suggestion-item px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 border-t border-gray-200 transition-colors';
             createDiv.innerHTML = `
                 <div class="flex items-center">
-                    <svg class="w-3 h-3 text-purple-600 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                    <svg class="w-4 h-4 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                         <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
                     </svg>
-                    <span class="text-purple-600 font-medium text-xs">Créer "${query}"</span>
+                    <span class="text-blue-600 font-medium text-xs">Créer "${query}"</span>
                 </div>
             `;
 
@@ -699,7 +734,6 @@ async function searchAndShowSuggestions(query, inputElement, hiddenElement, sugg
             suggestionsElement.appendChild(createDiv);
         }
 
-        // Affichage conditionnel des suggestions
         if (domains.length > 0 || !exactMatch) {
             suggestionsElement.classList.remove('hidden');
         } else {
@@ -714,9 +748,9 @@ async function searchAndShowSuggestions(query, inputElement, hiddenElement, sugg
 
 function createSuggestionItem(domain, query, inputElement, hiddenElement, suggestionsElement) {
     const div = document.createElement('div');
-    div.className = 'suggestion-item px-2 py-1 text-sm cursor-pointer hover:bg-gray-100 flex items-center';
+    div.className = 'suggestion-item px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 flex items-center transition-colors';
 
-    const colorIndicator = `<div class="w-2 h-2 rounded-full mr-1" style="background-color: ${domain.color}"></div>`;
+    const colorIndicator = `<div class="w-3 h-3 rounded-full mr-2" style="background-color: ${domain.color}"></div>`;
     const highlightedName = highlightMatch(domain.name, query);
 
     div.innerHTML = `${colorIndicator}<span class="text-xs">${highlightedName}</span>`;
@@ -727,7 +761,6 @@ function createSuggestionItem(domain, query, inputElement, hiddenElement, sugges
         hiddenElement.value = domain.id;
         hideSuggestions(suggestionsElement);
         inputElement.focus();
-        // Mettre à jour le résumé après sélection
         debouncedUpdateSummary();
     });
 
@@ -752,7 +785,6 @@ function hideSuggestions(suggestionsElement) {
     suggestionsElement.classList.add('hidden');
 }
 
-// Gestion du modal de création de domaine
 function showDomainCreationModal(suggestedName = '') {
     const modal = document.getElementById('domain-creation-modal');
     const nameInput = document.getElementById('new-domain-name');
@@ -775,7 +807,6 @@ function showDomainCreationModal(suggestedName = '') {
 }
 
 function setupModalEvents() {
-    // Bouton créer
     const confirmBtn = document.getElementById('confirm-domain-creation');
     if (confirmBtn) {
         confirmBtn.replaceWith(confirmBtn.cloneNode(true));
@@ -787,7 +818,6 @@ function setupModalEvents() {
         });
     }
 
-    // Boutons fermer
     document.querySelectorAll('.close-modal').forEach(btn => {
         btn.replaceWith(btn.cloneNode(true));
     });
@@ -799,7 +829,6 @@ function setupModalEvents() {
         });
     });
 
-    // Couleurs prédéfinies
     document.querySelectorAll('.color-option').forEach(btn => {
         btn.addEventListener('click', function(e) {
             e.preventDefault();
@@ -807,7 +836,6 @@ function setupModalEvents() {
         });
     });
 
-    // Sélecteur de couleur personnalisé
     const customColorInput = document.getElementById('custom-color');
     if (customColorInput) {
         customColorInput.addEventListener('input', function() {
@@ -829,22 +857,20 @@ function updateColorSelection(color) {
         customColorInput.value = color;
     }
 
-    // Mettre à jour la sélection visuelle
     document.querySelectorAll('.color-option').forEach(btn => {
-        btn.classList.remove('ring-2', 'ring-purple-500');
+        btn.classList.remove('ring-2', 'ring-blue-500');
         if (btn.dataset.color === color) {
-            btn.classList.add('ring-2', 'ring-purple-500');
+            btn.classList.add('ring-2', 'ring-blue-500');
         }
     });
 }
 
-// Créer un nouveau domaine via API
 async function createNewDomain() {
     const nameInput = document.getElementById('new-domain-name');
     const descriptionInput = document.getElementById('new-domain-description');
 
     if (!nameInput) {
-        alert('Erreur: champ nom non trouvé');
+        showToast('Erreur: champ nom non trouvé', 'error');
         return;
     }
 
@@ -852,7 +878,7 @@ async function createNewDomain() {
     const description = descriptionInput ? descriptionInput.value.trim() : '';
 
     if (!name) {
-        alert('Le nom du domaine est obligatoire');
+        showToast('Le nom du domaine est obligatoire', 'error');
         return;
     }
 
@@ -872,56 +898,302 @@ async function createNewDomain() {
         const data = await response.json();
 
         if (data.success) {
-            // Ajouter le nouveau domaine à la liste
             availableDomains.push(data.domain);
 
-            // Mettre à jour l'input actuel s'il existe
             if (currentDomainInput) {
                 currentDomainInput.value = data.domain.name;
                 const hiddenInput = currentDomainInput.parentElement.querySelector('.element-domain-id');
                 if (hiddenInput) {
                     hiddenInput.value = data.domain.id;
                 }
-                // Mettre à jour le résumé
                 debouncedUpdateSummary();
             }
 
             hideDomainCreationModal();
-            showNotification('Domaine créé avec succès !', 'success');
+            showToast('Domaine créé avec succès !', 'success');
         } else {
-            showNotification(data.error || 'Erreur lors de la création du domaine', 'error');
+            showToast(data.error || 'Erreur lors de la création du domaine', 'error');
         }
     } catch (error) {
         console.error('Erreur:', error);
-        showNotification('Erreur de connexion', 'error');
+        showToast('Erreur de connexion', 'error');
     }
 }
 
-function showNotification(message, type) {
-    // Notification améliorée avec toast
-    const toast = document.createElement('div');
-    toast.className = `fixed top-4 right-4 px-3 py-2 rounded-md text-white font-medium z-50 text-sm ${
-        type === 'success' ? 'bg-green-500' : 'bg-red-500'
-    }`;
-    toast.textContent = message;
+// ============================================================================
+// GESTION DES EXERCICES
+// ============================================================================
 
-    document.body.appendChild(toast);
+function addExercise(existingData = null) {
+    exerciseCounter++;
+    const template = document.getElementById('exercise-template');
+    const exerciseDiv = template.content.cloneNode(true);
 
-    setTimeout(() => {
-        toast.remove();
-    }, 3000);
+    // Mettre à jour le numéro d'exercice
+    exerciseDiv.querySelector('.exercise-number').textContent = exerciseCounter;
+    exerciseDiv.querySelector('.exercise-order').value = exerciseCounter;
+
+    if (existingData) {
+        exerciseDiv.querySelector('.exercise-title').value = existingData.title;
+        exerciseDiv.querySelector('.exercise-description').value = existingData.description || '';
+        exerciseDiv.querySelector('.exercise-order').value = existingData.order;
+    } else {
+        // Pré-remplir avec "Exercice X" pour les nouveaux exercices
+        exerciseDiv.querySelector('.exercise-title').value = `Exercice ${exerciseCounter}`;
+    }
+
+    // Ajouter les event listeners
+    const exerciseElement = document.createElement('div');
+    exerciseElement.appendChild(exerciseDiv);
+    const actualExercise = exerciseElement.firstElementChild;
+
+    actualExercise.querySelector('.remove-exercise').addEventListener('click', function() {
+        removeExercise(this);
+    });
+
+    actualExercise.querySelector('.add-grading-element').addEventListener('click', function() {
+        addGradingElement(this);
+    });
+
+    actualExercise.querySelector('.exercise-title').addEventListener('input', () => {
+        debouncedUpdateSummary();
+    });
+
+    document.getElementById('exercises-container').appendChild(actualExercise);
+
+    // Charger les éléments existants si en mode édition
+    if (existingData && existingData.grading_elements) {
+        const elementsContainer = actualExercise.querySelector('.grading-elements-container');
+        existingData.grading_elements.forEach(elementData => {
+            addGradingElement(actualExercise.querySelector('.add-grading-element'), elementData);
+        });
+        actualExercise.querySelector('.no-grading-elements').style.display = 'none';
+    }
+
+    updateExercisesVisibility();
+    debouncedUpdateSummary();
+
+    // Focus sur le titre si nouvel exercice
+    if (!existingData) {
+        setTimeout(() => {
+            actualExercise.querySelector('.exercise-title').focus();
+        }, 100);
+    }
 }
 
+function removeExercise(btn) {
+    const exerciseItem = btn.closest('.exercise-item');
+
+    // Confirmation uniquement si l'exercice contient des éléments
+    const elementsCount = exerciseItem.querySelectorAll('.grading-element-item').length;
+    if (elementsCount > 0) {
+        if (!confirm(`Supprimer cet exercice et ses ${elementsCount} élément(s) de notation ?`)) {
+            return;
+        }
+    }
+
+    exerciseItem.remove();
+    updateExercisesVisibility();
+    renumberExercises();
+    debouncedUpdateSummary();
+    showToast('Exercice supprimé', 'info');
+}
+
+function updateExercisesVisibility() {
+    const container = document.getElementById('exercises-container');
+    const noExercisesMsg = document.getElementById('no-exercises');
+    const hasExercises = container.children.length > 0;
+    noExercisesMsg.style.display = hasExercises ? 'none' : 'block';
+}
+
+function renumberExercises() {
+    const exercises = document.querySelectorAll('.exercise-item');
+    exercises.forEach((exercise, index) => {
+        const number = index + 1;
+        exercise.querySelector('.exercise-number').textContent = number;
+        exercise.querySelector('.exercise-order').value = number;
+    });
+    exerciseCounter = exercises.length;
+}
+
+// ============================================================================
+// GESTION DES ÉLÉMENTS DE NOTATION
+// ============================================================================
+
+function addGradingElement(btn, existingData = null) {
+    const exerciseDiv = btn.closest('.exercise-item');
+    const elementsContainer = exerciseDiv.querySelector('.grading-elements-container');
+    const noElementsMsg = exerciseDiv.querySelector('.no-grading-elements');
+
+    const template = document.getElementById('grading-element-template');
+    const elementDiv = template.content.cloneNode(true);
+
+    if (existingData) {
+        elementDiv.querySelector('.element-label').value = existingData.label;
+        elementDiv.querySelector('.element-skill').value = existingData.skill || '';
+        elementDiv.querySelector('.element-max-points').value = existingData.max_points;
+        elementDiv.querySelector('.element-grading-type').value = existingData.grading_type;
+        elementDiv.querySelector('.element-description').value = existingData.description || '';
+
+        // Remplir le domaine s'il existe
+        if (existingData.domain_id) {
+            const domainHiddenInput = elementDiv.querySelector('.element-domain-id');
+            const domainTextInput = elementDiv.querySelector('.element-domain-input');
+            if (domainHiddenInput && domainTextInput) {
+                domainHiddenInput.value = existingData.domain_id;
+                // Trouver le nom du domaine correspondant
+                const domain = availableDomains.find(d => d.id === existingData.domain_id);
+                if (domain) {
+                    domainTextInput.value = domain.name;
+                }
+            }
+        }
+    }
+
+    const elementElement = document.createElement('div');
+    elementElement.appendChild(elementDiv);
+    const actualElement = elementElement.firstElementChild;
+
+    actualElement.querySelector('.remove-grading-element').addEventListener('click', function() {
+        removeGradingElement(this);
+    });
+
+    // Listeners pour mise à jour temps réel
+    actualElement.querySelectorAll('input, select').forEach(input => {
+        input.addEventListener('input', () => {
+            updateExerciseTotal(exerciseDiv);
+            debouncedUpdateSummary();
+        });
+        input.addEventListener('change', () => {
+            updateExerciseTotal(exerciseDiv);
+            debouncedUpdateSummary();
+        });
+    });
+
+    elementsContainer.appendChild(actualElement);
+    noElementsMsg.style.display = 'none';
+
+    // Configurer l'autocomplétion des domaines pour ce nouvel élément
+    setupDomainAutocomplete(actualElement);
+
+    updateExerciseTotal(exerciseDiv);
+    debouncedUpdateSummary();
+
+    if (!existingData) {
+        setTimeout(() => {
+            actualElement.querySelector('.element-label').focus();
+        }, 100);
+    }
+}
+
+function removeGradingElement(btn) {
+    const exerciseDiv = btn.closest('.exercise-item');
+    const elementsContainer = exerciseDiv.querySelector('.grading-elements-container');
+    const noElementsMsg = exerciseDiv.querySelector('.no-grading-elements');
+
+    btn.closest('.grading-element-item').remove();
+
+    if (elementsContainer.children.length === 0) {
+        noElementsMsg.style.display = 'block';
+    }
+
+    updateExerciseTotal(exerciseDiv);
+    debouncedUpdateSummary();
+}
+
+function updateExerciseTotal(exerciseDiv) {
+    const elements = exerciseDiv.querySelectorAll('.grading-element-item');
+    let total = 0;
+
+    elements.forEach(element => {
+        const pointsInput = element.querySelector('.element-max-points');
+        if (pointsInput && pointsInput.value) {
+            total += parseFloat(pointsInput.value) || 0;
+        }
+    });
+
+    const totalSpan = exerciseDiv.querySelector('.exercise-total');
+    if (totalSpan) {
+        totalSpan.textContent = `${total.toFixed(1)} pts`;
+    }
+}
+
+// ============================================================================
+// SOUMISSION DU FORMULAIRE
+// ============================================================================
+
+function submitForm() {
+    const form = document.getElementById('unified-form');
+    const formData = new FormData(form);
+    const exercises = collectFormData();
+
+    // Validation côté client
+    if (exercises.length === 0) {
+        showToast('Vous devez ajouter au moins un exercice.', 'error');
+        return;
+    }
+
+    let hasElementsWithoutGrading = false;
+    exercises.forEach(ex => {
+        if (ex.grading_elements.length === 0) {
+            hasElementsWithoutGrading = true;
+        }
+    });
+
+    if (hasElementsWithoutGrading) {
+        showToast('Certains exercices n\'ont pas d\'éléments de notation.', 'warning');
+        if (!confirm('Certains exercices n\'ont pas d\'éléments de notation. Voulez-vous continuer ?')) {
+            return;
+        }
+    }
+
+    // Préparer les données
+    const data = {
+        title: formData.get('title'),
+        description: formData.get('description'),
+        date: formData.get('date'),
+        trimester: formData.get('trimester'),
+        class_group_id: formData.get('class_group_id'),
+        coefficient: formData.get('coefficient'),
+        exercises: exercises,
+        csrf_token: formData.get('csrf_token')
+    };
+
+    // Envoyer via AJAX
+    fetch(form.action, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            showToast('Évaluation créée avec succès !', 'success');
+            setTimeout(() => {
+                window.location.href = `/assessments/${data.assessment_id}`;
+            }, 500);
+        } else {
+            showToast('Erreur lors de la création : ' + (data.error || 'Erreur inconnue'), 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+        showToast('Une erreur est survenue lors de la création de l\'évaluation.', 'error');
+    });
+}
+
+// ============================================================================
+// INITIALISATION
+// ============================================================================
+
 document.addEventListener('DOMContentLoaded', function() {
     const addExerciseBtn = document.getElementById('add-exercise');
-    const exercisesContainer = document.getElementById('exercises-container');
-    const noExercisesMsg = document.getElementById('no-exercises');
     const form = document.getElementById('unified-form');
 
-    // Pré-remplir les données en mode édition
-    {% if is_edit %}
-        loadExistingData();
-    {% endif %}
+    // Initialiser les domaines
+    loadDomains();
 
     // Ajouter un exercice
     addExerciseBtn.addEventListener('click', function() {
@@ -934,279 +1206,6 @@ document.addEventListener('DOMContentLoaded', function() {
         submitForm();
     });
 
-    function addExercise() {
-        exerciseCounter++;
-        const template = document.getElementById('exercise-template');
-        const exerciseDiv = template.content.cloneNode(true);
-
-        // Mettre à jour le numéro d'exercice
-        exerciseDiv.querySelector('.exercise-number').textContent = exerciseCounter;
-        exerciseDiv.querySelector('.exercise-order').value = exerciseCounter;
-
-        // Ajouter les event listeners
-        const removeBtn = exerciseDiv.querySelector('.remove-exercise');
-        removeBtn.addEventListener('click', function() {
-            removeExercise(this);
-        });
-
-        const addElementBtn = exerciseDiv.querySelector('.add-grading-element');
-        addElementBtn.addEventListener('click', function() {
-            addGradingElement(this);
-        });
-
-        exercisesContainer.appendChild(exerciseDiv);
-        updateExercisesVisibility();
-
-        // Mettre à jour le résumé
-        debouncedUpdateSummary();
-
-        // Focus automatique sur le champ titre du nouvel exercice
-        setTimeout(() => {
-            const titleInput = exercisesContainer.lastElementChild.querySelector('.exercise-title');
-            if (titleInput) {
-                titleInput.focus();
-                // Ajouter listener pour mise à jour résumé
-                titleInput.addEventListener('input', debouncedUpdateSummary);
-            }
-        }, 100);
-    }
-
-    function removeExercise(btn) {
-        btn.closest('.exercise-item').remove();
-        updateExercisesVisibility();
-        renumberExercises();
-        // Mettre à jour le résumé
-        debouncedUpdateSummary();
-    }
-
-    function addGradingElement(btn) {
-        const exerciseDiv = btn.closest('.exercise-item');
-        const elementsContainer = exerciseDiv.querySelector('.grading-elements-container');
-        const noElementsMsg = exerciseDiv.querySelector('.no-grading-elements');
-
-        const template = document.getElementById('grading-element-template');
-        const elementDiv = template.content.cloneNode(true);
-
-        // Ajouter l'event listener pour supprimer
-        const removeBtn = elementDiv.querySelector('.remove-grading-element');
-        removeBtn.addEventListener('click', function() {
-            removeGradingElement(this);
-        });
-
-        elementsContainer.appendChild(elementDiv);
-        noElementsMsg.style.display = 'none';
-
-        // Configurer l'autocomplétion des domaines pour ce nouvel élément
-        setupDomainAutocomplete(elementsContainer.lastElementChild);
-
-        // Ajouter listeners pour mise à jour résumé sur tous les champs
-        setTimeout(() => {
-            const newElement = elementsContainer.lastElementChild;
-            if (newElement) {
-                newElement.querySelectorAll('input, select').forEach(input => {
-                    input.addEventListener('input', debouncedUpdateSummary);
-                    input.addEventListener('change', debouncedUpdateSummary);
-                });
-                // Mettre à jour le résumé après ajout des listeners
-                debouncedUpdateSummary();
-            }
-        }, 50);
-
-        // Focus automatique sur le champ label du nouvel élément
-        setTimeout(() => {
-            const labelInput = elementsContainer.lastElementChild.querySelector('.element-label');
-            if (labelInput) {
-                labelInput.focus();
-            }
-        }, 100);
-    }
-
-    function removeGradingElement(btn) {
-        const exerciseDiv = btn.closest('.exercise-item');
-        const elementsContainer = exerciseDiv.querySelector('.grading-elements-container');
-        const noElementsMsg = exerciseDiv.querySelector('.no-grading-elements');
-
-        btn.closest('.grading-element-item').remove();
-
-        if (elementsContainer.children.length === 0) {
-            noElementsMsg.style.display = 'block';
-        }
-
-        // Mettre à jour le résumé
-        debouncedUpdateSummary();
-    }
-
-    function updateExercisesVisibility() {
-        const hasExercises = exercisesContainer.children.length > 0;
-        noExercisesMsg.style.display = hasExercises ? 'none' : 'block';
-    }
-
-    function renumberExercises() {
-        const exercises = exercisesContainer.querySelectorAll('.exercise-item');
-        exercises.forEach((exercise, index) => {
-            const number = index + 1;
-            exercise.querySelector('.exercise-number').textContent = number;
-            exercise.querySelector('.exercise-order').value = number;
-        });
-        exerciseCounter = exercises.length;
-    }
-
-    // La fonction collectFormData est maintenant déclarée en portée globale
-
-    function submitForm() {
-        const formData = new FormData(form);
-        const exercises = collectFormData();
-
-        // Validation côté client
-        if (exercises.length === 0) {
-            alert('Vous devez ajouter au moins un exercice.');
-            return;
-        }
-
-        let hasElementsWithoutGrading = false;
-        exercises.forEach(ex => {
-            if (ex.grading_elements.length === 0) {
-                hasElementsWithoutGrading = true;
-            }
-        });
-
-        if (hasElementsWithoutGrading) {
-            if (!confirm('Certains exercices n\'ont pas d\'éléments de notation. Voulez-vous continuer ?')) {
-                return;
-            }
-        }
-
-        // Envoyer via AJAX
-        const data = {
-            title: formData.get('title'),
-            description: formData.get('description'),
-            date: formData.get('date'),
-            trimester: formData.get('trimester'),
-            class_group_id: formData.get('class_group_id'),
-            coefficient: formData.get('coefficient'),
-            exercises: exercises
-        };
-
-        // Ajouter le CSRF token aux données
-        data.csrf_token = formData.get('csrf_token');
-
-        fetch(form.action, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(data)
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                window.location.href = `/assessments/${data.assessment_id}`;
-            } else {
-                alert('Erreur lors de la création : ' + JSON.stringify(data.errors));
-            }
-        })
-        .catch(error => {
-            console.error('Erreur:', error);
-            alert('Une erreur est survenue lors de la création de l\'évaluation.');
-        });
-    }
-
-    {% if is_edit %}
-    function loadExistingData() {
-        // Charger les exercices existants
-        const existingExercises = {{ exercises_json|tojson if exercises_json else "[]" }};
-
-        existingExercises.forEach(exercise => {
-            exerciseCounter++;
-            const template = document.getElementById('exercise-template');
-            const exerciseDiv = template.content.cloneNode(true);
-
-            // Remplir les données de l'exercice
-            exerciseDiv.querySelector('.exercise-number').textContent = exerciseCounter;
-            exerciseDiv.querySelector('.exercise-title').value = exercise.title;
-            exerciseDiv.querySelector('.exercise-description').value = exercise.description || '';
-            exerciseDiv.querySelector('.exercise-order').value = exercise.order;
-
-            // Ajouter les event listeners
-            const removeBtn = exerciseDiv.querySelector('.remove-exercise');
-            removeBtn.addEventListener('click', function() {
-                removeExercise(this);
-            });
-
-            const addElementBtn = exerciseDiv.querySelector('.add-grading-element');
-            addElementBtn.addEventListener('click', function() {
-                addGradingElement(this);
-            });
-
-            const elementsContainer = exerciseDiv.querySelector('.grading-elements-container');
-            const noElementsMsg = exerciseDiv.querySelector('.no-grading-elements');
-
-            // Charger les éléments de notation existants
-            exercise.grading_elements.forEach(element => {
-                const elementTemplate = document.getElementById('grading-element-template');
-                const elementDiv = elementTemplate.content.cloneNode(true);
-
-                // Remplir les données de l'élément
-                elementDiv.querySelector('.element-label').value = element.label;
-                elementDiv.querySelector('.element-skill').value = element.skill || '';
-                elementDiv.querySelector('.element-max-points').value = element.max_points;
-                elementDiv.querySelector('.element-grading-type').value = element.grading_type;
-                elementDiv.querySelector('.element-description').value = element.description || '';
-
-                // Remplir le domaine s'il existe
-                if (element.domain_id) {
-                    const domainHiddenInput = elementDiv.querySelector('.element-domain-id');
-                    const domainTextInput = elementDiv.querySelector('.element-domain-input');
-                    if (domainHiddenInput && domainTextInput) {
-                        domainHiddenInput.value = element.domain_id;
-                        // Trouver le nom du domaine correspondant
-                        const domain = availableDomains.find(d => d.id === element.domain_id);
-                        if (domain) {
-                            domainTextInput.value = domain.name;
-                        }
-                    }
-                }
-
-                // Ajouter l'event listener pour supprimer
-                const removeElementBtn = elementDiv.querySelector('.remove-grading-element');
-                removeElementBtn.addEventListener('click', function() {
-                    removeGradingElement(this);
-                });
-
-                elementsContainer.appendChild(elementDiv);
-
-                // Configurer l'autocomplétion pour cet élément
-                setupDomainAutocomplete(elementsContainer.lastElementChild);
-
-                // Ajouter listeners pour mise à jour résumé
-                const newElement = elementsContainer.lastElementChild;
-                newElement.querySelectorAll('input, select').forEach(input => {
-                    input.addEventListener('input', debouncedUpdateSummary);
-                    input.addEventListener('change', debouncedUpdateSummary);
-                });
-            });
-
-            if (exercise.grading_elements.length > 0) {
-                noElementsMsg.style.display = 'none';
-            }
-
-            exercisesContainer.appendChild(exerciseDiv);
-
-            // Ajouter listeners pour mise à jour résumé sur les champs d'exercice
-            const exerciseElement = exercisesContainer.lastElementChild;
-            exerciseElement.querySelector('.exercise-title').addEventListener('input', debouncedUpdateSummary);
-        });
-
-        updateExercisesVisibility();
-
-        // Mettre à jour le résumé initial
-        setTimeout(updateSummaryBanner, 500);
-    }
-    {% endif %}
-
-    // Initialisation des domaines
-    loadDomains();
-
     // Fermer le modal avec Escape
     document.addEventListener('keydown', function(e) {
         if (e.key === 'Escape') {
@@ -1214,34 +1213,38 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Configurer l'autocomplétion pour les éléments existants au chargement
-    setTimeout(() => {
-        document.querySelectorAll('.grading-element-item').forEach(setupDomainAutocomplete);
-    }, 500);
+    // Pré-remplir les données en mode édition
+    {% if is_edit %}
+        const existingExercises = {{ exercises_json|tojson if exercises_json else "[]" }};
+        existingExercises.forEach(exercise => {
+            addExercise(exercise);
+        });
+    {% endif %}
 
     // Mettre à jour le résumé initial
     setTimeout(updateSummaryBanner, 100);
-
-    // Ajouter listeners pour mise à jour résumé sur les champs de base
-    form.querySelectorAll('input[type="text"], input[type="number"], select, textarea').forEach(input => {
-        if (!input.id.includes('csrf')) {
-            input.addEventListener('input', debouncedUpdateSummary);
-            input.addEventListener('change', debouncedUpdateSummary);
-        }
-    });
-
-    // Event listener global avec délégation d'événements pour les champs dynamiques
-    form.addEventListener('input', function(e) {
-        if (e.target.matches('.element-label, .element-max-points, .element-grading-type, .element-skill, .element-domain-input, .exercise-title')) {
-            debouncedUpdateSummary();
-        }
-    });
-
-    form.addEventListener('change', function(e) {
-        if (e.target.matches('.element-label, .element-max-points, .element-grading-type, .element-skill, .element-domain-input, .exercise-title')) {
-            debouncedUpdateSummary();
-        }
-    });
 });
 </script>
-{% endblock %}
\ No newline at end of file
+
+<style>
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.animate-slide-in {
+    animation: slide-in 0.3s ease-out;
+}
+
+#toast-container > div {
+    transition: opacity 0.3s, transform 0.3s;
+}
+</style>
+
+{% endblock %}