feat(formation): ajout de la page de formation et des animations d'entrée

- Création d'une nouvelle page de formation avec des sections pour les plans tarifaires et les FAQ.
- Ajout de nouvelles animations CSS pour les entrées de page et les éléments.
- Mise à jour des traductions pour inclure la section de formation en anglais et en français.
- Intégration de la nouvelle route pour accéder à la page de formation.
- Amélioration des styles CSS pour la page de formation.

src/assets/main.css

@@ -718,6 +718,18 @@ a:hover {
 }
 
 /* Animations */
+/* Page Entrance Animations */
+@keyframes pageEnter {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -749,16 +761,57 @@ a:hover {
   }
 }
 
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Page Animation Classes */
+.page-enter {
+  animation: pageEnter 0.6s ease-out;
+}
+
+/* Enhanced Load Animation Classes */
 .animate-fade-in-up {
-  animation: fadeInUp 0.6s ease-out;
+  animation: fadeInUp 0.6s ease-out forwards;
+  opacity: 0;
 }
 
 .animate-fade-in {
-  animation: fadeIn 0.6s ease-out;
+  animation: fadeIn 0.6s ease-out forwards;
+  opacity: 0;
 }
 
 .animate-slide-in-right {
-  animation: slideInRight 0.6s ease-out;
+  animation: slideInRight 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.6s ease-out forwards;
+  opacity: 0;
 }
 
 /* Mobile Menu */