diff --git a/public/img/add.svg b/public/img/add.svg
new file mode 100644
index 0000000..0af9a73
--- /dev/null
+++ b/public/img/add.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/img/adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg b/public/img/adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
new file mode 100644
index 0000000..3fa5223
--- /dev/null
+++ b/public/img/adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/public/img/arrow-down.svg b/public/img/arrow-down.svg
new file mode 100644
index 0000000..338045e
--- /dev/null
+++ b/public/img/arrow-down.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/arrow-left.svg b/public/img/arrow-left.svg
new file mode 100644
index 0000000..edf01fc
--- /dev/null
+++ b/public/img/arrow-left.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/arrow-right.svg b/public/img/arrow-right.svg
new file mode 100644
index 0000000..2951829
--- /dev/null
+++ b/public/img/arrow-right.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/border.svg b/public/img/border.svg
new file mode 100644
index 0000000..eb52106
--- /dev/null
+++ b/public/img/border.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/cap.svg b/public/img/cap.svg
new file mode 100644
index 0000000..c69993c
--- /dev/null
+++ b/public/img/cap.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/cellular.svg b/public/img/cellular.svg
new file mode 100644
index 0000000..c21daa6
--- /dev/null
+++ b/public/img/cellular.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/check-2.svg b/public/img/check-2.svg
new file mode 100644
index 0000000..10594e9
--- /dev/null
+++ b/public/img/check-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/check.svg b/public/img/check.svg
new file mode 100644
index 0000000..b21077c
--- /dev/null
+++ b/public/img/check.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/check_17.png b/public/img/check_17.png
new file mode 100644
index 0000000..c41d128
Binary files /dev/null and b/public/img/check_17.png differ
diff --git a/public/img/container.svg b/public/img/container.svg
new file mode 100644
index 0000000..03dabba
--- /dev/null
+++ b/public/img/container.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/img/divider.svg b/public/img/divider.svg
new file mode 100644
index 0000000..148c885
--- /dev/null
+++ b/public/img/divider.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets.zip b/public/img/fonctionnalite_img/assets.zip
new file mode 100644
index 0000000..0110941
Binary files /dev/null and b/public/img/fonctionnalite_img/assets.zip differ
diff --git a/public/img/fonctionnalite_img/assets/img-adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg b/public/img/fonctionnalite_img/assets/img-adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
new file mode 100644
index 0000000..e091797
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-arrow-left.svg b/public/img/fonctionnalite_img/assets/img-arrow-left.svg
new file mode 100644
index 0000000..4e4ac7f
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-arrow-left.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-arrow-right.svg b/public/img/fonctionnalite_img/assets/img-arrow-right.svg
new file mode 100644
index 0000000..56e8cb0
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-arrow-right.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-divider.svg b/public/img/fonctionnalite_img/assets/img-divider.svg
new file mode 100644
index 0000000..56eaf5f
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-divider.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-icon.svg b/public/img/fonctionnalite_img/assets/img-icon.svg
new file mode 100644
index 0000000..9af88c1
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-icon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-icons-2.svg b/public/img/fonctionnalite_img/assets/img-icons-2.svg
new file mode 100644
index 0000000..ba71866
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-icons-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-icons.svg b/public/img/fonctionnalite_img/assets/img-icons.svg
new file mode 100644
index 0000000..4f9dbe3
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-icons.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-14.png b/public/img/fonctionnalite_img/assets/img-illustration-14.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-14.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-15.png b/public/img/fonctionnalite_img/assets/img-illustration-15.png
new file mode 100644
index 0000000..0ba232d
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-15.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-17.png b/public/img/fonctionnalite_img/assets/img-illustration-17.png
new file mode 100644
index 0000000..032942c
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-17.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-2.png b/public/img/fonctionnalite_img/assets/img-illustration-2.png
new file mode 100644
index 0000000..2a5e518
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-2.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-5.png b/public/img/fonctionnalite_img/assets/img-illustration-5.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-5.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-6.png b/public/img/fonctionnalite_img/assets/img-illustration-6.png
new file mode 100644
index 0000000..40fb7e2
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-6.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-7.png b/public/img/fonctionnalite_img/assets/img-illustration-7.png
new file mode 100644
index 0000000..29e7cf4
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-7.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration-9.png b/public/img/fonctionnalite_img/assets/img-illustration-9.png
new file mode 100644
index 0000000..9c5ff09
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration-9.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-illustration.png b/public/img/fonctionnalite_img/assets/img-illustration.png
new file mode 100644
index 0000000..56afbc4
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-illustration.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-image-1.svg b/public/img/fonctionnalite_img/assets/img-image-1.svg
new file mode 100644
index 0000000..2e62b2d
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-image-1.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-image-2.png b/public/img/fonctionnalite_img/assets/img-image-2.png
new file mode 100644
index 0000000..37b8acd
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-image-2.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-image-3.png b/public/img/fonctionnalite_img/assets/img-image-3.png
new file mode 100644
index 0000000..e2665a7
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-image-3.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-image-4.png b/public/img/fonctionnalite_img/assets/img-image-4.png
new file mode 100644
index 0000000..5753703
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-image-4.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-image-here.png b/public/img/fonctionnalite_img/assets/img-image-here.png
new file mode 100644
index 0000000..66c4f60
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-image-here.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-image.png b/public/img/fonctionnalite_img/assets/img-image.png
new file mode 100644
index 0000000..5aa1195
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-image.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-play-2.svg b/public/img/fonctionnalite_img/assets/img-play-2.svg
new file mode 100644
index 0000000..e805bc7
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-play-2.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-social-icons-2.svg b/public/img/fonctionnalite_img/assets/img-social-icons-2.svg
new file mode 100644
index 0000000..9a9f8c4
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-social-icons-2.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-social-icons-3.svg b/public/img/fonctionnalite_img/assets/img-social-icons-3.svg
new file mode 100644
index 0000000..f6e30f4
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-social-icons-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-social-icons-4.svg b/public/img/fonctionnalite_img/assets/img-social-icons-4.svg
new file mode 100644
index 0000000..9d63f1e
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-social-icons-4.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-social-icons.svg b/public/img/fonctionnalite_img/assets/img-social-icons.svg
new file mode 100644
index 0000000..18165ff
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-social-icons.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-star.svg b/public/img/fonctionnalite_img/assets/img-star.svg
new file mode 100644
index 0000000..552fd9e
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-star.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-10.svg b/public/img/fonctionnalite_img/assets/img-union-10.svg
new file mode 100644
index 0000000..5a7355d
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-10.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-11.svg b/public/img/fonctionnalite_img/assets/img-union-11.svg
new file mode 100644
index 0000000..a654438
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-11.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-12.svg b/public/img/fonctionnalite_img/assets/img-union-12.svg
new file mode 100644
index 0000000..d4e7f6a
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-12.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-13.svg b/public/img/fonctionnalite_img/assets/img-union-13.svg
new file mode 100644
index 0000000..02fd02c
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-13.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-14.svg b/public/img/fonctionnalite_img/assets/img-union-14.svg
new file mode 100644
index 0000000..6aa0dba
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-14.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-15.svg b/public/img/fonctionnalite_img/assets/img-union-15.svg
new file mode 100644
index 0000000..83f9446
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-15.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-16.svg b/public/img/fonctionnalite_img/assets/img-union-16.svg
new file mode 100644
index 0000000..a00a151
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-16.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-17.svg b/public/img/fonctionnalite_img/assets/img-union-17.svg
new file mode 100644
index 0000000..20bc073
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-17.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-18.svg b/public/img/fonctionnalite_img/assets/img-union-18.svg
new file mode 100644
index 0000000..5f57572
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-18.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-19.svg b/public/img/fonctionnalite_img/assets/img-union-19.svg
new file mode 100644
index 0000000..ddbd18b
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-19.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-2.svg b/public/img/fonctionnalite_img/assets/img-union-2.svg
new file mode 100644
index 0000000..8dc8017
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-20.svg b/public/img/fonctionnalite_img/assets/img-union-20.svg
new file mode 100644
index 0000000..9fa2581
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-20.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-21.svg b/public/img/fonctionnalite_img/assets/img-union-21.svg
new file mode 100644
index 0000000..dc59946
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-21.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-22.svg b/public/img/fonctionnalite_img/assets/img-union-22.svg
new file mode 100644
index 0000000..0695b2e
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-22.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-3.svg b/public/img/fonctionnalite_img/assets/img-union-3.svg
new file mode 100644
index 0000000..46c2bba
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-4.svg b/public/img/fonctionnalite_img/assets/img-union-4.svg
new file mode 100644
index 0000000..48ad364
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-4.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-5.svg b/public/img/fonctionnalite_img/assets/img-union-5.svg
new file mode 100644
index 0000000..e5dcc65
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-5.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-6.svg b/public/img/fonctionnalite_img/assets/img-union-6.svg
new file mode 100644
index 0000000..7ec926e
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-6.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-7.svg b/public/img/fonctionnalite_img/assets/img-union-7.svg
new file mode 100644
index 0000000..e31d696
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-7.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-8.svg b/public/img/fonctionnalite_img/assets/img-union-8.svg
new file mode 100644
index 0000000..887ef4a
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-8.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union-9.svg b/public/img/fonctionnalite_img/assets/img-union-9.svg
new file mode 100644
index 0000000..cfaa3d9
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union-9.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-union.svg b/public/img/fonctionnalite_img/assets/img-union.svg
new file mode 100644
index 0000000..e7db8e8
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-union.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-user.svg b/public/img/fonctionnalite_img/assets/img-user.svg
new file mode 100644
index 0000000..20ac270
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-user.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-vector-2.svg b/public/img/fonctionnalite_img/assets/img-vector-2.svg
new file mode 100644
index 0000000..6d668c1
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-vector-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-vector-3.svg b/public/img/fonctionnalite_img/assets/img-vector-3.svg
new file mode 100644
index 0000000..92a20af
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-vector-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-vector-4.svg b/public/img/fonctionnalite_img/assets/img-vector-4.svg
new file mode 100644
index 0000000..fd5bc64
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-vector-4.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-vector.svg b/public/img/fonctionnalite_img/assets/img-vector.svg
new file mode 100644
index 0000000..adcdc0f
--- /dev/null
+++ b/public/img/fonctionnalite_img/assets/img-vector.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/fonctionnalite_img/assets/img-video-2.png b/public/img/fonctionnalite_img/assets/img-video-2.png
new file mode 100644
index 0000000..11041e6
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-video-2.png differ
diff --git a/public/img/fonctionnalite_img/assets/img-video.png b/public/img/fonctionnalite_img/assets/img-video.png
new file mode 100644
index 0000000..6593506
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img-video.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_avis_participant.png b/public/img/fonctionnalite_img/assets/img_avis_participant.png
new file mode 100644
index 0000000..c4e34f5
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_avis_participant.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_catalog.png b/public/img/fonctionnalite_img/assets/img_catalog.png
new file mode 100644
index 0000000..f7db824
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_catalog.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_class_virtuelle.png b/public/img/fonctionnalite_img/assets/img_class_virtuelle.png
new file mode 100644
index 0000000..b57623e
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_class_virtuelle.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_client_financeur.png b/public/img/fonctionnalite_img/assets/img_client_financeur.png
new file mode 100644
index 0000000..200b2d3
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_client_financeur.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_collaborateur.png b/public/img/fonctionnalite_img/assets/img_collaborateur.png
new file mode 100644
index 0000000..c218ac0
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_collaborateur.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_cours_td_tp.png b/public/img/fonctionnalite_img/assets/img_cours_td_tp.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_cours_td_tp.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_devis.png b/public/img/fonctionnalite_img/assets/img_devis.png
new file mode 100644
index 0000000..b51ae6e
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_devis.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_echange_prof_apprenant.png b/public/img/fonctionnalite_img/assets/img_echange_prof_apprenant.png
new file mode 100644
index 0000000..ef33d25
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_echange_prof_apprenant.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_emargement.png b/public/img/fonctionnalite_img/assets/img_emargement.png
new file mode 100644
index 0000000..3d53a3c
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_emargement.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_evaluation.png b/public/img/fonctionnalite_img/assets/img_evaluation.png
new file mode 100644
index 0000000..80cbfec
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_evaluation.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_facture_avoir.png b/public/img/fonctionnalite_img/assets/img_facture_avoir.png
new file mode 100644
index 0000000..68d1baa
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_facture_avoir.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_formateur.png b/public/img/fonctionnalite_img/assets/img_formateur.png
new file mode 100644
index 0000000..faeab71
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_formateur.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_inscription.png b/public/img/fonctionnalite_img/assets/img_inscription.png
new file mode 100644
index 0000000..27018ec
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_inscription.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_intranet_apprenant.png b/public/img/fonctionnalite_img/assets/img_intranet_apprenant.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_intranet_apprenant.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_opportunite.png b/public/img/fonctionnalite_img/assets/img_opportunite.png
new file mode 100644
index 0000000..ec4d1b3
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_opportunite.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_paiement.png b/public/img/fonctionnalite_img/assets/img_paiement.png
new file mode 100644
index 0000000..c697261
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_paiement.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_partage_fichiers.png b/public/img/fonctionnalite_img/assets/img_partage_fichiers.png
new file mode 100644
index 0000000..ed15e90
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_partage_fichiers.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_personnalisation.png b/public/img/fonctionnalite_img/assets/img_personnalisation.png
new file mode 100644
index 0000000..303a2e4
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_personnalisation.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_qualipi_checklist.png b/public/img/fonctionnalite_img/assets/img_qualipi_checklist.png
new file mode 100644
index 0000000..66f27ca
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_qualipi_checklist.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_ressources.png b/public/img/fonctionnalite_img/assets/img_ressources.png
new file mode 100644
index 0000000..49affe1
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_ressources.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_session_formation.png b/public/img/fonctionnalite_img/assets/img_session_formation.png
new file mode 100644
index 0000000..5392dbe
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_session_formation.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_signat_electro.png b/public/img/fonctionnalite_img/assets/img_signat_electro.png
new file mode 100644
index 0000000..cc3c9cd
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_signat_electro.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_social_learning.png b/public/img/fonctionnalite_img/assets/img_social_learning.png
new file mode 100644
index 0000000..6b37a4d
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_social_learning.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_storage.png b/public/img/fonctionnalite_img/assets/img_storage.png
new file mode 100644
index 0000000..6e90ad9
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_storage.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_suivi_tps_connexion.png b/public/img/fonctionnalite_img/assets/img_suivi_tps_connexion.png
new file mode 100644
index 0000000..6a7be37
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_suivi_tps_connexion.png differ
diff --git a/public/img/fonctionnalite_img/assets/img_tableau_bord.png b/public/img/fonctionnalite_img/assets/img_tableau_bord.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/img_tableau_bord.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-calendar.png b/public/img/fonctionnalite_img/assets/type-calendar.png
new file mode 100644
index 0000000..120c690
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-calendar.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-catalogue.png b/public/img/fonctionnalite_img/assets/type-catalogue.png
new file mode 100644
index 0000000..f7db824
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-catalogue.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-coach.png b/public/img/fonctionnalite_img/assets/type-coach.png
new file mode 100644
index 0000000..e6208b5
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-coach.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-dashboard.png b/public/img/fonctionnalite_img/assets/type-dashboard.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-dashboard.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-devis.png b/public/img/fonctionnalite_img/assets/type-devis.png
new file mode 100644
index 0000000..36d3c31
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-devis.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-inscription.png b/public/img/fonctionnalite_img/assets/type-inscription.png
new file mode 100644
index 0000000..27018ec
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-inscription.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-opportunity.png b/public/img/fonctionnalite_img/assets/type-opportunity.png
new file mode 100644
index 0000000..ec4d1b3
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-opportunity.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-payment.png b/public/img/fonctionnalite_img/assets/type-payment.png
new file mode 100644
index 0000000..032942c
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-payment.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-ressources.png b/public/img/fonctionnalite_img/assets/type-ressources.png
new file mode 100644
index 0000000..927fa4d
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-ressources.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-sharing-files.png b/public/img/fonctionnalite_img/assets/type-sharing-files.png
new file mode 100644
index 0000000..40fb7e2
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-sharing-files.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-signature.png b/public/img/fonctionnalite_img/assets/type-signature.png
new file mode 100644
index 0000000..cc3c9cd
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-signature.png differ
diff --git a/public/img/fonctionnalite_img/assets/type-social-learning.png b/public/img/fonctionnalite_img/assets/type-social-learning.png
new file mode 100644
index 0000000..a4986e9
Binary files /dev/null and b/public/img/fonctionnalite_img/assets/type-social-learning.png differ
diff --git a/public/img/fonctionnalite_img/img_avis_participant.png b/public/img/fonctionnalite_img/img_avis_participant.png
new file mode 100644
index 0000000..c4e34f5
Binary files /dev/null and b/public/img/fonctionnalite_img/img_avis_participant.png differ
diff --git a/public/img/fonctionnalite_img/img_catalog.png b/public/img/fonctionnalite_img/img_catalog.png
new file mode 100644
index 0000000..f7db824
Binary files /dev/null and b/public/img/fonctionnalite_img/img_catalog.png differ
diff --git a/public/img/fonctionnalite_img/img_class_virtuelle.png b/public/img/fonctionnalite_img/img_class_virtuelle.png
new file mode 100644
index 0000000..b57623e
Binary files /dev/null and b/public/img/fonctionnalite_img/img_class_virtuelle.png differ
diff --git a/public/img/fonctionnalite_img/img_client_financeur.png b/public/img/fonctionnalite_img/img_client_financeur.png
new file mode 100644
index 0000000..200b2d3
Binary files /dev/null and b/public/img/fonctionnalite_img/img_client_financeur.png differ
diff --git a/public/img/fonctionnalite_img/img_collaborateur.png b/public/img/fonctionnalite_img/img_collaborateur.png
new file mode 100644
index 0000000..c218ac0
Binary files /dev/null and b/public/img/fonctionnalite_img/img_collaborateur.png differ
diff --git a/public/img/fonctionnalite_img/img_cours_td_tp.png b/public/img/fonctionnalite_img/img_cours_td_tp.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/public/img/fonctionnalite_img/img_cours_td_tp.png differ
diff --git a/public/img/fonctionnalite_img/img_crm.png b/public/img/fonctionnalite_img/img_crm.png
new file mode 100644
index 0000000..9c5ff09
Binary files /dev/null and b/public/img/fonctionnalite_img/img_crm.png differ
diff --git a/public/img/fonctionnalite_img/img_devis.png b/public/img/fonctionnalite_img/img_devis.png
new file mode 100644
index 0000000..b51ae6e
Binary files /dev/null and b/public/img/fonctionnalite_img/img_devis.png differ
diff --git a/public/img/fonctionnalite_img/img_echange_prof_apprenant.png b/public/img/fonctionnalite_img/img_echange_prof_apprenant.png
new file mode 100644
index 0000000..ef33d25
Binary files /dev/null and b/public/img/fonctionnalite_img/img_echange_prof_apprenant.png differ
diff --git a/public/img/fonctionnalite_img/img_emargement.png b/public/img/fonctionnalite_img/img_emargement.png
new file mode 100644
index 0000000..3d53a3c
Binary files /dev/null and b/public/img/fonctionnalite_img/img_emargement.png differ
diff --git a/public/img/fonctionnalite_img/img_evaluation.png b/public/img/fonctionnalite_img/img_evaluation.png
new file mode 100644
index 0000000..80cbfec
Binary files /dev/null and b/public/img/fonctionnalite_img/img_evaluation.png differ
diff --git a/public/img/fonctionnalite_img/img_export_scorm.png b/public/img/fonctionnalite_img/img_export_scorm.png
new file mode 100644
index 0000000..cb450d2
Binary files /dev/null and b/public/img/fonctionnalite_img/img_export_scorm.png differ
diff --git a/public/img/fonctionnalite_img/img_facture_avoir.png b/public/img/fonctionnalite_img/img_facture_avoir.png
new file mode 100644
index 0000000..68d1baa
Binary files /dev/null and b/public/img/fonctionnalite_img/img_facture_avoir.png differ
diff --git a/public/img/fonctionnalite_img/img_formateur.png b/public/img/fonctionnalite_img/img_formateur.png
new file mode 100644
index 0000000..faeab71
Binary files /dev/null and b/public/img/fonctionnalite_img/img_formateur.png differ
diff --git a/public/img/fonctionnalite_img/img_gestion_admin.png b/public/img/fonctionnalite_img/img_gestion_admin.png
new file mode 100644
index 0000000..66c4f60
Binary files /dev/null and b/public/img/fonctionnalite_img/img_gestion_admin.png differ
diff --git a/public/img/fonctionnalite_img/img_inscription.png b/public/img/fonctionnalite_img/img_inscription.png
new file mode 100644
index 0000000..27018ec
Binary files /dev/null and b/public/img/fonctionnalite_img/img_inscription.png differ
diff --git a/public/img/fonctionnalite_img/img_intranet_apprenant.png b/public/img/fonctionnalite_img/img_intranet_apprenant.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/public/img/fonctionnalite_img/img_intranet_apprenant.png differ
diff --git a/public/img/fonctionnalite_img/img_lms.png b/public/img/fonctionnalite_img/img_lms.png
new file mode 100644
index 0000000..29e7cf4
Binary files /dev/null and b/public/img/fonctionnalite_img/img_lms.png differ
diff --git a/public/img/fonctionnalite_img/img_opportunite.png b/public/img/fonctionnalite_img/img_opportunite.png
new file mode 100644
index 0000000..ec4d1b3
Binary files /dev/null and b/public/img/fonctionnalite_img/img_opportunite.png differ
diff --git a/public/img/fonctionnalite_img/img_paiement.png b/public/img/fonctionnalite_img/img_paiement.png
new file mode 100644
index 0000000..c697261
Binary files /dev/null and b/public/img/fonctionnalite_img/img_paiement.png differ
diff --git a/public/img/fonctionnalite_img/img_partage_fichiers.png b/public/img/fonctionnalite_img/img_partage_fichiers.png
new file mode 100644
index 0000000..ed15e90
Binary files /dev/null and b/public/img/fonctionnalite_img/img_partage_fichiers.png differ
diff --git a/public/img/fonctionnalite_img/img_personnalisation.png b/public/img/fonctionnalite_img/img_personnalisation.png
new file mode 100644
index 0000000..303a2e4
Binary files /dev/null and b/public/img/fonctionnalite_img/img_personnalisation.png differ
diff --git a/public/img/fonctionnalite_img/img_qualiopi_checklist.png b/public/img/fonctionnalite_img/img_qualiopi_checklist.png
new file mode 100644
index 0000000..66f27ca
Binary files /dev/null and b/public/img/fonctionnalite_img/img_qualiopi_checklist.png differ
diff --git a/public/img/fonctionnalite_img/img_ressources.png b/public/img/fonctionnalite_img/img_ressources.png
new file mode 100644
index 0000000..49affe1
Binary files /dev/null and b/public/img/fonctionnalite_img/img_ressources.png differ
diff --git a/public/img/fonctionnalite_img/img_session_formation.png b/public/img/fonctionnalite_img/img_session_formation.png
new file mode 100644
index 0000000..5392dbe
Binary files /dev/null and b/public/img/fonctionnalite_img/img_session_formation.png differ
diff --git a/public/img/fonctionnalite_img/img_signat_electro.png b/public/img/fonctionnalite_img/img_signat_electro.png
new file mode 100644
index 0000000..cc3c9cd
Binary files /dev/null and b/public/img/fonctionnalite_img/img_signat_electro.png differ
diff --git a/public/img/fonctionnalite_img/img_social_learning.png b/public/img/fonctionnalite_img/img_social_learning.png
new file mode 100644
index 0000000..6b37a4d
Binary files /dev/null and b/public/img/fonctionnalite_img/img_social_learning.png differ
diff --git a/public/img/fonctionnalite_img/img_storage.png b/public/img/fonctionnalite_img/img_storage.png
new file mode 100644
index 0000000..6e90ad9
Binary files /dev/null and b/public/img/fonctionnalite_img/img_storage.png differ
diff --git a/public/img/fonctionnalite_img/img_suivi_tps_connexion.png b/public/img/fonctionnalite_img/img_suivi_tps_connexion.png
new file mode 100644
index 0000000..6a7be37
Binary files /dev/null and b/public/img/fonctionnalite_img/img_suivi_tps_connexion.png differ
diff --git a/public/img/fonctionnalite_img/img_tableau_bord.png b/public/img/fonctionnalite_img/img_tableau_bord.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/public/img/fonctionnalite_img/img_tableau_bord.png differ
diff --git a/public/img/fonctionnalite_img/img_top_mini_crm.png b/public/img/fonctionnalite_img/img_top_mini_crm.png
new file mode 100644
index 0000000..69fcab0
Binary files /dev/null and b/public/img/fonctionnalite_img/img_top_mini_crm.png differ
diff --git a/public/img/fonctionnalite_img/img_top_mini_gestion_admin.png b/public/img/fonctionnalite_img/img_top_mini_gestion_admin.png
new file mode 100644
index 0000000..f1096d7
Binary files /dev/null and b/public/img/fonctionnalite_img/img_top_mini_gestion_admin.png differ
diff --git a/public/img/fonctionnalite_img/img_top_mini_lms.png b/public/img/fonctionnalite_img/img_top_mini_lms.png
new file mode 100644
index 0000000..be6460f
Binary files /dev/null and b/public/img/fonctionnalite_img/img_top_mini_lms.png differ
diff --git a/public/img/icon.svg b/public/img/icon.svg
new file mode 100644
index 0000000..dc8fd28
--- /dev/null
+++ b/public/img/icon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/image-1.svg b/public/img/image-1.svg
new file mode 100644
index 0000000..e086613
--- /dev/null
+++ b/public/img/image-1.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/image-2.png b/public/img/image-2.png
new file mode 100644
index 0000000..37b8acd
Binary files /dev/null and b/public/img/image-2.png differ
diff --git a/public/img/image-3.png b/public/img/image-3.png
new file mode 100644
index 0000000..5753703
Binary files /dev/null and b/public/img/image-3.png differ
diff --git a/public/img/image.png b/public/img/image.png
new file mode 100644
index 0000000..e2665a7
Binary files /dev/null and b/public/img/image.png differ
diff --git a/public/img/image.svg b/public/img/image.svg
new file mode 100644
index 0000000..25a8b20
--- /dev/null
+++ b/public/img/image.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/line-arrow-left.svg b/public/img/line-arrow-left.svg
new file mode 100644
index 0000000..4604c25
--- /dev/null
+++ b/public/img/line-arrow-left.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/img/rectangle-2.svg b/public/img/rectangle-2.svg
new file mode 100644
index 0000000..8866b54
--- /dev/null
+++ b/public/img/rectangle-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/social-icons-container.svg b/public/img/social-icons-container.svg
new file mode 100644
index 0000000..0dcb355
--- /dev/null
+++ b/public/img/social-icons-container.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/public/img/star.svg b/public/img/star.svg
new file mode 100644
index 0000000..552fd9e
--- /dev/null
+++ b/public/img/star.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/trust.svg b/public/img/trust.svg
new file mode 100644
index 0000000..55bc024
--- /dev/null
+++ b/public/img/trust.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/union-2.svg b/public/img/union-2.svg
new file mode 100644
index 0000000..16e56e3
--- /dev/null
+++ b/public/img/union-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/union-3.svg b/public/img/union-3.svg
new file mode 100644
index 0000000..cf449dd
--- /dev/null
+++ b/public/img/union-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/union-4.svg b/public/img/union-4.svg
new file mode 100644
index 0000000..a654438
--- /dev/null
+++ b/public/img/union-4.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/union-5.svg b/public/img/union-5.svg
new file mode 100644
index 0000000..9892359
--- /dev/null
+++ b/public/img/union-5.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/union-6.svg b/public/img/union-6.svg
new file mode 100644
index 0000000..919ce60
--- /dev/null
+++ b/public/img/union-6.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/union.svg b/public/img/union.svg
new file mode 100644
index 0000000..fe43207
--- /dev/null
+++ b/public/img/union.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/user.svg b/public/img/user.svg
new file mode 100644
index 0000000..0b5d155
--- /dev/null
+++ b/public/img/user.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/img/wifi.svg b/public/img/wifi.svg
new file mode 100644
index 0000000..a232bf5
--- /dev/null
+++ b/public/img/wifi.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public_et_src_sauvegarde_06022025.zip b/public_et_src_sauvegarde_06022025.zip
new file mode 100644
index 0000000..005ddc0
Binary files /dev/null and b/public_et_src_sauvegarde_06022025.zip differ
diff --git a/src/App.js b/src/App.js
index 4130644..9d9ea93 100644
--- a/src/App.js
+++ b/src/App.js
@@ -53,23 +53,32 @@ import TestUrl_New from "./pages/testurl_new";
import QuiSommesNous_v3 from "./pages/quisommesnous_v3";
import Fonctionnalites from "./pages/fonctionnalite";
import Test_Drag_Drop from "./pages/test_drag_drop";
-
-
import Test_Drag_Drop2 from "./pages/test_dnd";
-
import ESign from "./pages/eSigne";
import ESignDiplayDignedDocument from "./pages/edigndiplaydigneddocument";
import SurveyDocument from "./pages/surveydocument";
import UpdateAttendeeList from "./pages/updateattendeelist";
import Emarge_QR_Code from "./pages/emarge_qr_code";
import AutomaticQuotation from "./pages/automaticquotation";
-
import MySyIA from "./pages/iamysy";
-
import Maintenance from "./pages/maintenance_page";
-
import Subdomain_Recherche_new_v2 from "./pages/subdomain_recherche_new_v2";
+
+// New Design 2025
+import New_Sign_In_2025 from "./pages/new_p_sign_in_2025";
+import New_Sign_Up_2025 from "./pages/new_p_sign_up_2025";
+import New_Tarif_2025 from "./pages/new_p_tarif_2025";
+import New_Contact_2025 from "./pages/new_p_contact_2025";
+import New_Article_Detail_2025 from "./pages/new_p_article_detail_2025";
+import New_Formation_Detail_2025 from "./pages/new_p_detail_formation_2025";
+import New_Marktplace_2025 from "./pages/new_p_marketplace_2025"
+import New_Fonctionnalite_2025 from "./pages/new_p_fonctionnalite_2025"
+
+
+import New_Test_Header_Footer_2025 from "./pages/new_p_test_header_footer_2025";
+
+
function App() {
const [screenSizeh, getDimension] = useState({
@@ -92,7 +101,7 @@ function App() {
let myurl = window.location.host;
let myurl_pathname = window.location.pathname;
-
+
var domain = myurl;
if (domain.includes('://')) {
@@ -139,7 +148,7 @@ function App() {
-
+
@@ -162,9 +171,8 @@ function App() {
-
-
-
+
+
@@ -181,10 +189,6 @@ function App() {
-
-
-
-
@@ -200,7 +204,7 @@ function App() {
-
+
{/* */}
@@ -232,7 +236,34 @@ function App() {
- */
+ {/**** New design 2025 */}
+
+
+
+
+
+
+ {/* ex : http://localhost:3009/detaile-formation/habilitation-electrique-882*/}
+
+
+
+
+
+ {/* Debut Migration */}
+
+
+
+
+
+
+
+
+
+ {/* Fin Migration */}
+
+
+
+
diff --git a/src/components/New_ButtonHilight_2025.js b/src/components/New_ButtonHilight_2025.js
new file mode 100644
index 0000000..bb3bf2e
--- /dev/null
+++ b/src/components/New_ButtonHilight_2025.js
@@ -0,0 +1,496 @@
+
+import React, { useState, useEffect } from 'react';
+//import { slide as Menu } from "react-burger-menu";
+import { NavLink } from "react-router-dom";
+import { getCookie } from 'react-use-cookie';
+import { useHistory } from "react-router-dom";
+
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import Button from '@mui/material/Button';
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+import { useCookies } from "react-cookie";
+import { Helmet } from "react-helmet";
+import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
+import connect_white from "../mysy_img/connect_white_v2.png";
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
+import connect_green from "../mysy_img/connect_green.png";
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { format } from 'date-fns'
+import moment from "moment";
+import SendIcon from '@mui/icons-material/Send';
+import axios from "axios";
+import mysy_logo2 from "../mysy_img2/Logo_MySy.png"
+
+import New_C_Header_2025_V2 from "./header_automatic_files/Header";
+
+const New_ButtonHilight_2025 = () => {
+ const history = useHistory();
+ const [show, setShow] = useState(true);
+ const [lastScrollY, setLastScrollY] = useState(0);
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+ const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
+
+ const [country_code, setcountry_code] = useState("FR");
+ const [country_name, setcountry_name] = useState("France");
+ const [city, setcity] = useState("Paris");
+ const [postal, setpostal] = useState("75001");
+ const [latitude, setlatitude] = useState("48.861000061035156");
+ const [longitude, setlongitude] = useState("2.3380000591278076");
+ const [IPv4, setIPv4] = useState("172.71.122.128");
+ const [state, setstate] = useState("France");
+ const [userIp, setuserIp] = useState("172.71.122.128");
+
+
+ const controlNavbar = () => {
+
+ if (typeof window !== 'undefined') {
+ if (window.scrollY > lastScrollY && window.scrollY > 100) {
+ setShow(false);
+ } else if (window.scrollY < lastScrollY && window.scrollY < 100) { // if scroll up show the navbar
+ setShow(true);
+ }
+
+ // remember current page location to use in the next move
+ setLastScrollY(window.scrollY);
+ }
+ };
+
+ const [userconnected, setuserconnected] = useState("0");
+ const [someoneconnected, setsomeoneconnected] = useState("0");
+ const [partnerconnected, setpartnerconnected] = useState("0");
+ var stored_user = getCookie('tokenmysych');
+ var stored_part = getCookie('tokenmysypart');
+
+ function whosisconnected() {
+
+ stored_user = getCookie('tokenmysych');
+ stored_part = getCookie('tokenmysypart');
+
+
+
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ setsomeoneconnected("1");
+ local_user_connect = 1;
+ //alert(" user connected OK");
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+
+ setpartnerconnected("0");
+ setsomeoneconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ setsomeoneconnected("1");
+ local_part_connect = 1;
+ // alert(" partner connected OK");
+ }
+ }
+
+ useEffect(() => {
+
+
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ setsomeoneconnected("1");
+ local_user_connect = 1;
+ //alert(" user connected OK");
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+ setpartnerconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ setsomeoneconnected("1");
+ local_part_connect = 1;
+ //alert(" partner connected OK");
+ }
+
+ if (typeof window !== 'undefined') {
+ window.addEventListener('scroll', controlNavbar);
+
+ // cleanup function
+ return () => {
+ window.removeEventListener('scroll', controlNavbar);
+ };
+ }
+
+
+ }, [lastScrollY]);
+
+
+ const [PartnerMenu, setPartnerMenu] = React.useState(null);
+ const [AccountMenu, setAccountMenu] = React.useState(null);
+ const [ProduitMenu, setproduitMenu] = React.useState(null);
+ const [AvisMenu, setavisMenu] = React.useState(null);
+
+
+
+ const PartnerMenu_Close = () => {
+ setPartnerMenu(null);
+ };
+
+ const AccountMenu_Close = () => {
+ setAccountMenu(null);
+ };
+
+
+ const ProduitMenu_Close = () => {
+ setproduitMenu(null);
+ };
+
+ const handlePartnerMenu = (event) => {
+ setPartnerMenu(event.currentTarget);
+ };
+
+ const handleAccountMenu = (event) => {
+ setAccountMenu(event.currentTarget);
+ };
+
+
+ const handleProduitMenu = (event) => {
+ setproduitMenu(event.currentTarget);
+ };
+
+ const handleQuisommesNousMenu = (event) => {
+ history.push("/qui-sommes-nous")
+ };
+
+
+
+
+ const handleClose_Account = () => {
+ alert(" my account");
+ setAccountMenu(null);
+ };
+
+ const handleAccountConnexion = () => {
+ setAccountMenu(null);
+ history.push("/Connexion")
+ };
+
+ const handleMyAccount = () => {
+ setAccountMenu(null);
+ history.push("/mysy-user-account")
+ };
+
+
+
+ const handleAccountCreation = () => {
+ setAccountMenu(null);
+ history.push("/create_account")
+ };
+
+ const handlePartnerConnexion = () => {
+ setAccountMenu(null);
+ history.push("/PartnerLogin")
+ };
+
+
+ const handleProduitService = () => {
+ setproduitMenu(null);
+ history.push("/tarifs_produits_services/")
+ };
+
+ const handleAvis = () => {
+ setavisMenu(null);
+ history.push("/Recherche-Article-formation")
+ };
+
+
+ function user_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+ if (typeof (stored_user) != "undefined") {
+ const stored_cookie = getCookie('tokenmysych');
+ var acces_right_token_name = stored_cookie + "_uar";
+
+ setpartCookie("tokenmysych", "", { path: '/' });
+ setpartCookie(acces_right_token_name, "", { path: '/' });
+ removeCookie(acces_right_token_name, { path: '/' });
+
+ removeCookie("tokenmysych", { path: '/' });
+
+ }
+ history.push("/intranet");
+ }
+
+
+ function user_logout() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion (user)',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => user_logout_confirmation()
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+ }
+ ]
+ });
+ }
+
+
+ function part_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+
+ if (typeof (stored_part) != "undefined") {
+ const stored_cookie = getCookie('tokenmysypart');
+ var acces_right_token_name = stored_cookie + "_uar";
+
+ setpartCookie("tokenmysypart", "", { path: '/' });
+ setpartCookie(acces_right_token_name, "", { path: '/' });
+ removeCookie(acces_right_token_name, { path: '/' });
+
+
+ setpartCookie("mysy_session_display_view", "", { path: '/' });
+ setpartCookie("mysy_menu_gauche_reduit", "", { path: '/' });
+ setpartCookie("mysy_catalog_data_row_grouped_by", "", { path: '/' });
+
+ removeCookie("tokenmysypart", { path: '/' });
+ removeCookie("mysy_session_display_view", { path: '/' });
+ removeCookie("mysy_menu_gauche_reduit", { path: '/' });
+ removeCookie("mysy_catalog_data_row_grouped_by", { path: '/' });
+
+
+ }
+ setsomeoneconnected("0");
+ setDialog_1_open(false);
+ history.push("/recherche-formation");
+ }
+
+ function part_logout() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion (pro)',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => part_logout_confirmation()
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+ }
+ ]
+ });
+ }
+ function handleAccountLogout() {
+
+ if (String(userconnected) === String("1")) {
+ user_logout();
+ }
+ else if (String(partnerconnected) === String("1")) {
+ part_logout();
+ }
+ }
+
+ const [CategorieMenu, setCategorieMenu] = React.useState(null);
+ const CategorieMenu_Close = () => {
+ setCategorieMenu(null);
+ };
+
+ const handleCategorieMenu = (event) => {
+ setCategorieMenu(event.currentTarget);
+ };
+
+
+ const handleMarketplace = (event) => {
+ history.push("/recherche-formation")
+ };
+
+ const handleClassCategorie = (e) => {
+ setCategorieMenu(null);
+ const pieces = window.location.href.split("/")
+ const last = pieces[pieces.length - 1]
+
+
+ var mymetier = "";
+ mymetier = e.target.id
+ if (last === mymetier) {
+ //console.log(" ## RELAOD");
+ window.location.reload(true);
+ } else {
+ history.push("/Recherche_new_v2/0/" + mymetier);
+ }
+ };
+
+ function publiecatalogue() {
+ history.push("/Partner", { mysy_arg: 'partner' });
+ }
+
+
+ function resserver_demo() {
+ history.push("/Partner", { mysy_arg: 'partner' });
+ }
+
+
+ const handleBlogMenu = (event) => {
+ history.push("/Recherche-Article-formation")
+ };
+
+
+
+ const [Dialog_1_message, setDialog_1_message] = React.useState(false);
+ const [Dialog_1_open, setDialog_1_open] = React.useState(false);
+ function Dialog_1_handle_change_participant_session(message) {
+ setDialog_1_message(message);
+ setDialog_1_open(true);
+ }
+
+ const Dialog_1_handleClose = () => {
+ //alert(" Utiliser le bouton 'fermer' ");
+ //setOpen(false);
+ };
+
+ const Dialog_1_handleClose_buton = () => {
+ setDialog_1_open(false);
+ };
+
+
+ const [Dialog_contact_message, setDialog_contact_message] = React.useState(false);
+ const [Dialog_contact_open, setDialog_contact_open] = React.useState(false);
+ function Dialog_contact_handle_change_participant_session(message) {
+ setDialog_contact_message(message);
+ setDialog_contact_open(true);
+ }
+
+ const Dialog_contact_handleClose = () => {
+
+ };
+
+ const Dialog_contact_handleClose_buton = () => {
+
+ setDialog_contact_open(false);
+ clear_contact_message_fields();
+
+ };
+
+ function clear_contact_message_fields() {
+ setcontact_message_nom_prenom("");
+ setcontact_message_email("");
+ setcontact_message_phone("");
+ setcontact_message_sujet("");
+ setcontact_message_sujet("");
+ setcontact_message_message("");
+ }
+
+ const [contact_message_nom_prenom, setcontact_message_nom_prenom] = React.useState("");
+ const [contact_message_email, setcontact_message_email] = React.useState("");
+ const [contact_message_phone, setcontact_message_phone] = React.useState("");
+ const [contact_message_sujet, setcontact_message_sujet] = React.useState("");
+ const [contact_message_message, setcontact_message_message] = React.useState("");
+
+ function Send_Contact_Message(e) {
+
+ var sender_mail = "";
+ var sender_tel = "";
+ var token = "";
+
+ ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
+
+ var mysubject = contact_message_sujet;
+ var mymessage = contact_message_message;
+ var mysender_name = contact_message_nom_prenom;
+ var mysender_email = contact_message_email;
+
+
+ //alert("contacter "+mysender_email+" - "+mymessage+" - url = "
+ //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
+
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(mysender_email) == false) {
+ alert("l'email est incorrecte");
+ return;
+ }
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
+ var form = new FormData();
+ form.append("type", "email");
+ form.append("recever_mail", "contact@mysy-training.com");
+ form.append("recever_tel", "+33769203945");
+ form.append("sender_mail", mysender_email);
+ form.append("sender_tel", sender_tel);
+ form.append("object", mysubject);
+ form.append("message", mymessage);
+ form.append("sender_name", mysender_name);
+ form.append("token", "");
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+
+ // console.log("## form = ", form);
+
+
+
+ axios.post(myurl, form).then(res => {
+
+ if (String(res.data.status) === String("false")) {
+
+ alert(res.data.message);
+ }
+
+ else if (String(res.data.status) === String("true")) {
+ Dialog_contact_handleClose_buton();
+ alert(res.data.message);
+
+ }
+ else {
+
+ }
+ }).catch((error) => {
+ console.warn('contact-nous Not good man :( mysearchtext = ');
+
+
+ })
+
+
+ }
+
+
+ return (
+
+ );
+}
+
+
+
+export default New_ButtonHilight_2025;
\ No newline at end of file
diff --git a/src/components/New_C_Article_2025.js b/src/components/New_C_Article_2025.js
new file mode 100644
index 0000000..fa31b9a
--- /dev/null
+++ b/src/components/New_C_Article_2025.js
@@ -0,0 +1,1134 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Button, } from "reactstrap";
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
+import { SocialIcon } from 'react-social-icons';
+import happyimg from "../mysy_img/happy.png";
+import unhappyimg from "../mysy_img/nothappy.png";
+import middleimg from "../mysy_img/middle.png";
+import parse from 'html-react-parser'
+import img_met_autre from "../mysy_img/met_autre.jpg";
+import img_met_digital from "../mysy_img/met_digital.jpg";
+import { Rating } from 'react-simple-star-rating'
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import moment from "moment";
+import SendIcon from '@mui/icons-material/Send';
+import axios from "axios";
+import { Editor } from '@tinymce/tinymce-react';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { format } from 'date-fns'
+import { FcInfo } from "react-icons/fc";
+import 'react-tooltip/dist/react-tooltip.css'
+import { Tooltip } from 'react-tooltip'
+import { getCookie } from 'react-use-cookie';
+import { useHistory } from "react-router-dom";
+import Checkbox from '@mui/material/Checkbox';
+import Box from '@mui/material/Box';
+import Fab from '@mui/material/Fab';
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import NavigationIcon from '@mui/icons-material/Navigation';
+import { FcPlus } from "react-icons/fc";
+import { MdDeleteForever } from "react-icons/md";
+
+import { AddCircleOutline } from "@mui/icons-material";
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+import TextField from '@mui/material/TextField';
+import { FcRightUp } from "react-icons/fc";
+
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import { IconButton } from '@material-ui/core';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+
+const New_Article_2025 = (props) => {
+
+ const classes = useStyles();
+ const history = useHistory();
+ const [isLoading, setLoading] = useState();
+
+ const [rating, setRating] = useState(props.article.note * 20)
+ //console.log(props.article.note * 10);
+ // Catch Rating value
+
+ function handleRating(rate) {
+ alert(" rate =" + rate);
+ setRating(40);
+ }
+
+ const [country_code, setcountry_code] = useState("FR");
+ const [country_name, setcountry_name] = useState("France");
+ const [city, setcity] = useState("Paris");
+ const [postal, setpostal] = useState("75001");
+ const [latitude, setlatitude] = useState("48.861000061035156");
+ const [longitude, setlongitude] = useState("2.3380000591278076");
+ const [IPv4, setIPv4] = useState("172.71.122.128");
+ const [state, setstate] = useState("France");
+ const [userIp, setuserIp] = useState("172.71.122.128");
+
+ const [title_resized, settitle_resized] = useState("")
+
+ const [article_img, setarticle_img] = useState("")
+
+ const [edit_article, setedit_article] = useState("")
+
+ const [selected_id, setselected_id] = useState(props.article._id)
+
+
+ const editorRef_texte_avis = useRef(null);
+ const [editorRef_texte_avis_limite, seteditorRef_texte_avis] = useState(1000);
+ const [field_texte_avis, setfield_texte_avis] = useState("");
+ const [field_texte_avis_initial_value, setfield_texte_avis_initial_value] = useState("");
+
+ const [is_data_changed, setis_data_changed] = useState("");
+
+ const [editor_tochanged, seteditor_tochanged] = useState("");
+
+ function editor_keyup() {
+ setis_data_changed("1");
+ }
+
+
+
+ const [Get_Partner_Article_Avis_Data_api, setGet_Partner_Article_Avis_Data_api] = useState();
+ const [Get_Partner_Article_Avis_Data_message, setGet_Partner_Article_Avis_Data_message] = useState();
+ const [Get_Partner_Article_Avis_Data_result, setGet_Partner_Article_Avis_Data_result] = useState();
+ function Get_Partner_Article_Avis_Data() {
+
+ var form = new FormData();
+ form.append("_id", props.article._id);
+
+ //console.log(" ## form = ", form);
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis_from_id/";
+ setLoading(true);
+ axios.post(myurl, form).then(res => {
+ setLoading(false);
+ if (String(res.data.status) === "true") {
+ //console.log(" In Get_Partner_Article_Avis_Data res.data.status = " + res.data.status);
+ console.log(" In Get_Partner_Article_Avis_Data res.data.message r_class = " + res.data.message);
+ setGet_Partner_Article_Avis_Data_api("true");
+ setGet_Partner_Article_Avis_Data_result(res.data.message);
+
+ if (res.data.message.length > 0) {
+ var mylocal_document = JSON.parse(res.data.message);
+
+ if (mylocal_document.date_publication) {
+ setarticle_avis_date_publication(moment((String(mylocal_document.date_publication)).substring(0, 10)).format('YYYY-MM-DD'));
+
+ //console.log(" ### mylocal_document.date_publication = ", mylocal_document.date_publication);
+ }
+
+ if (mylocal_document.avis) {
+ setarticle_avis_avis(mylocal_document.avis);
+ setfield_texte_avis_initial_value(mylocal_document.avis);
+ setfield_texte_avis(mylocal_document.avis);
+ }
+ else {
+ setarticle_avis_avis("");
+ setfield_texte_avis_initial_value("");
+ }
+
+
+ if (mylocal_document.internal_url)
+ setarticle_avis_internal_url(mylocal_document.internal_url);
+
+ setarticle_avis_display_header_img(false);
+ if (mylocal_document.display_header_img && String(mylocal_document.display_header_img) === "1") {
+ setarticle_avis_display_header_img(true);
+ }
+
+
+
+ if (mylocal_document.img_path) {
+ setarticle_avis_img_path(mylocal_document.img_path);
+ setimg_img_article_file(mylocal_document.img_path);
+ } else {
+ setarticle_avis_img_path("");
+ setimg_img_article_file("");
+ }
+
+
+ if (mylocal_document.meta_description) {
+ setarticle_avis_meta_description(mylocal_document.meta_description);
+ } else {
+ setarticle_avis_meta_description("");
+ }
+
+
+ } else {
+ alert(" Aucun article recuperé");
+ }
+
+
+ } else if (String(res.data.status) === String("Err_Connexion")) {
+ alert('Erreur: ' + res.data.message);
+ history.push("/Connexion");
+ }
+
+ else {
+ setGet_Partner_Article_Avis_Data_api("false");
+ setGet_Partner_Article_Avis_Data_message(res.data.message);
+ alert(res.data.message);
+ }
+
+ }).catch((error) => {
+ setLoading(false);
+ console.warn('Not good man :( Get_Partner_Article_Avis_Data = ', error);
+ setGet_Partner_Article_Avis_Data_api("false");
+ alert(" Impossible de recuperer les données de l'article");
+ //setmyApimyApiMessage("")
+ })
+ }
+
+
+ useEffect(() => {
+
+ var local_title = "";
+ if (props.article.title_formation && String(props.article.title_formation).length > 45) {
+ local_title = String(props.article.title_formation).substring(0, 43) + " ...";
+
+ } else {
+ local_title = String(props.article.title_formation);
+
+ }
+ settitle_resized(local_title);
+
+
+
+ var img_article = "";
+ if (props.article.img_path && String(props.article.img_path).length > 10) {
+ img_article = String(props.article.img_path)
+ setarticle_img(img_article);
+
+ } else {
+ setarticle_img(img_met_digital);
+ }
+
+
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+ }, []);
+
+
+ const [Dialog_1_avis, setDialog_1_avis] = React.useState(false);
+ const [Dialog_1_open, setDialog_1_open] = React.useState(false);
+ function Dialog_1_handle_change_participant_session(avis) {
+ setDialog_1_avis(avis);
+ setDialog_1_open(true);
+ }
+
+ const Dialog_1_handleClose = () => {
+ //alert(" Utiliser le bouton 'fermer' ");
+ //setOpen(false);
+ };
+
+ const Dialog_1_handleClose_buton = () => {
+ setDialog_1_open(false);
+ };
+
+
+ const [Dialog_article_avis_avis, setDialog_article_avis_avis] = React.useState(false);
+ const [Dialog_article_avis_open, setDialog_article_avis_open] = React.useState(false);
+ function Dialog_article_avis_handle_change_participant_session(avis) {
+ setDialog_article_avis_avis(avis);
+ setDialog_article_avis_open(true);
+ }
+
+ const Dialog_article_avis_handleClose = () => {
+
+ };
+
+ const Dialog_article_avis_handleClose_buton = () => {
+
+ setDialog_article_avis_open(false);
+ sethandleSubmission_img_article_message("");
+ setlogo_file_name("");
+ setimg_img_article_file("");
+ setimg_img_article_file2("");
+ clear_article_avis_fields();
+
+ };
+
+ function clear_article_avis_fields() {
+ setarticle_avis_title_formation("");
+ setarticle_avis_email("");
+ setarticle_avis_url_formation("");
+ setarticle_avis_sujet("");
+ setarticle_avis_avis("");
+ setis_data_changed("");
+ setarticle_avis_meta_description("");
+ setarticle_avis_display_header_img(false);
+ }
+
+ const [article_avis_date_publication, setarticle_avis_date_publication] = useState(new Date().toLocaleDateString('fr-FR'));
+ const [article_avis_title_formation, setarticle_avis_title_formation] = React.useState("");
+ const [article_avis_email, setarticle_avis_email] = React.useState("");
+ const [article_avis_url_formation, setarticle_avis_url_formation] = React.useState("");
+ const [article_avis_sujet, setarticle_avis_sujet] = React.useState("");
+ const [article_avis_avis, setarticle_avis_avis] = React.useState("");
+ const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState("");
+ const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false);
+ const [article_avis_img_path, setarticle_avis_img_path] = React.useState("");
+ const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState("");
+
+ function Add_Update_Article_Avis() {
+
+ var form = new FormData();
+
+ const stored_cookie = getCookie('tokenmysypart');
+ form.append("token", stored_cookie);
+ form.append("title_formation", article_avis_title_formation);
+ form.append("avis", field_texte_avis);
+ form.append("qualite", "");
+ form.append("note", "");
+
+
+ if (img_img_article_file2) {
+ form.append('File', img_img_article_file2);
+ form.append('img_file_name', img_img_article_file2.name);
+ }
+ else {
+ form.append('File', "");
+ form.append('img_file_name', "");
+ }
+
+
+ if (!article_avis_img_path || String(article_avis_img_path).trim() === "") {
+ alert(" Vous devez saisir une image à afficher avec l'article ");
+ return;
+ }
+ form.append("img_path", article_avis_img_path);
+
+ if (article_avis_date_publication.trim() === "") {
+ alert(" Vous devez saisir la date de naissance de l'apprenant");
+ return;
+ }
+
+ var formated_date_tmp = new Date(moment(article_avis_date_publication, "YYYY-MM-DD"));
+ var formated_date_final = moment(formated_date_tmp).format('DD/MM/YYYY');
+
+ form.append("date_publication", formated_date_final);
+
+
+ if (article_avis_display_header_img) {
+ form.append("display_header_img", "1");
+ } else {
+ form.append("display_header_img", "0");
+ }
+
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+ // Si une balise meta description n'est pas fourni, alors on lui donne le titre
+ var local_meta_description = "";
+ if (article_avis_meta_description) {
+ local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 200);
+ } else {
+ local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 200);
+ }
+ form.append("meta_description", local_meta_description);
+
+ setLoading(true);
+
+ // console.log(" ## form = ", form);
+ var myurl = "";
+
+ if (selected_id && String(selected_id).length > 3) {
+ myurl = process.env.REACT_APP_API_URL + "myclass/api/update_articles_avis/";
+ form.append("_id", selected_id);
+ } else {
+ myurl = process.env.REACT_APP_API_URL + "myclass/api/add_articles_avis/";
+ }
+
+
+ axios.post(myurl, form).then(res => {
+ setLoading(false);
+ if (String(res.data.status) === String("false")) {
+ alert(res.data.message);
+ }
+
+ else if (String(res.data.status) === String("true")) {
+ alert(res.data.message);
+ Dialog_article_avis_handleClose_buton();
+ window.location.reload();
+
+ }
+ else {
+
+ }
+ }).catch((error) => {
+ setLoading(false);
+ console.warn('contact-nous Not good man :( mysearchtext = ');
+
+
+ })
+ }
+
+
+ const [Delete_Article_Avis_Data_api, setDelete_Article_Avis_Data_api] = useState();
+ const [Delete_Article_Avis_Data_message, setDelete_Article_Avis_Data_message] = useState();
+ const [Delete_Article_Avis_Data_result, setDelete_Article_Avis_Data_result] = useState();
+ function Delete_Article_Avis_Data(article_id) {
+
+ var form = new FormData();
+ //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
+
+
+ const stored_cookie = getCookie('tokenmysypart');
+ form.append("token", stored_cookie);
+ form.append("_id", article_id);
+
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/delete_articles_avis_from_id/";
+ setLoading(true);
+ axios.post(myurl, form).then(res => {
+ setLoading(false);
+ //console.log(" In Delete_Article_Avis_Data res.data.status = " + res.data.status);
+ //console.log(" In Delete_Article_Avis_Data res.data.message r_class = " + res.data.message);
+
+ if (String(res.data.status) === String("true")) {
+ alert(res.data.message);
+ window.location.reload();
+ }
+ else {
+ setDelete_Article_Avis_Data_api("false");
+ setDelete_Article_Avis_Data_message(res.data.message);
+ alert(res.data.message);
+
+ }
+
+ }).catch((error) => {
+ setLoading(false);
+ console.warn('Delete_Article_Avis_Data : Not good man :( mysearchtext = ' + error);
+ setDelete_Article_Avis_Data_api("false");
+ alert(" Impossible de supprimer le document");
+ })
+ }
+
+
+ /**** Gestion image de l'article */
+
+ const [logo_file_name, setlogo_file_name] = useState();
+ const hiddenFileInput_logo = React.useRef(null);
+
+ const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState("");
+
+ const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState();
+ const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState();
+ const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState();
+
+
+ const [img_img_article_file, setimg_img_article_file] = useState();
+ const [img_bg_file, setimg_bg_file] = useState();
+
+ const [img_img_article_file2, setimg_img_article_file2] = useState();
+ const [img_bg_file2, setimg_bg_file2] = useState();
+
+ const handleSubmission_logo = event => {
+ clear_message();
+ setis_data_changed("1");
+
+ const fileUploaded = event.target.files[0];
+ let file_size = event.target.files[0].size;
+ let file_type = event.target.files[0].type;
+
+ //console.log("file_size = ", file_size, " file_type = ", file_type);
+ //console.log(" fileUploaded = ", fileUploaded);
+ if (file_size > 1000000) {
+ alert("Le fichier ne doit pas dépasser un 1 Méga octets");
+ return;
+ }
+
+ //image/png
+ if (String(file_type) !== "image/png" && String(file_type) !== "image/jpg" && String(file_type) !== "image/webp" &&
+ String(file_type) !== "image/jpeg") {
+ alert("Le fichier n'est pas au format PNG");
+ return;
+ }
+
+ setLoading(true);
+
+ var _URL = window.URL || window.webkitURL;
+ var file, img;
+ var img_height, img_width;
+
+ if ((file = event.target.files[0])) {
+ img = new Image();
+ var objectUrl = _URL.createObjectURL(file);
+ img.onload = function () {
+ img_height = this.height;
+ img_width = this.width;
+ _URL.revokeObjectURL(objectUrl);
+ console.log(" img_width = ", img_width, " img_height = ", img_height)
+
+ if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1100 &&
+ parseFloat(img_height) > 130 && parseFloat(img_height) < 1100) {
+ //console.log(" img_height est = ", img_height, " < Ã 1500 ");
+
+ // Verification que le nom du fichier est alpha numerique
+ /*var regExp = /^[A-Za-z0-9]+$/;
+ if (!regExp.test(event.target.files[0].name)) {
+ sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques");
+ sethandleSubmission_img_article_api("false");
+ setLoading(false);
+
+ return
+ }*/
+
+
+ if (String(event.target.files[0].name).length > 50) {
+ sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère");
+ sethandleSubmission_img_article_api("false");
+ setLoading(false);
+
+ return
+ }
+
+ setlogo_file_name(event.target.files[0].name);
+ setimg_img_article_file(URL.createObjectURL(event.target.files[0]));
+ setimg_img_article_file2(event.target.files[0]);
+
+ } else {
+ sethandleSubmission_img_article_message(" La taille de l'image est incorrecte. Larg = " + String(img_width) + " px Long = " + String(img_height) + " px");
+ sethandleSubmission_img_article_api("false");
+ setLoading(false);
+ return;
+ }
+
+ //console.log(" after img_width = ", img_width, " after img_height = ", img_height)
+ };
+ img.src = objectUrl;
+
+ }
+ setLoading(false);
+ };
+
+ function clear_message() {
+ sethandleSubmission_img_article_message();
+ sethandleSubmission_img_article_api();
+ }
+
+
+ const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState();
+ const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState();
+ const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState();
+ function Send_img_article_Img() {
+ clear_message();
+ setLoading(true);
+ const formData = new FormData();
+ formData.append('File', img_img_article_file2);
+ //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+ const stored_cookie = getCookie('tokenmysypart');
+ formData.append("token", stored_cookie);
+
+ console.log(" ## le nom du fichier est : ", img_img_article_file2.name);
+
+ fetch(
+ process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/",
+ {
+ method: 'POST',
+ body: formData,
+ }
+ )
+ .then((response) => response.json())
+ .then((result) => {
+ //console.log('Success:', result['message']);
+
+ if (String(result['status']) === String("true")) {
+ setSend_img_article_Img_api("true");
+ alert(" La mise à jour du logo a été correctement effectuée. ");
+
+ } else if (String(result['status']) === String("Err_Connexion")) {
+ alert('Erreur: ' + result['message']);
+ history.push("/Connexion");
+ }
+
+ else {
+ setSend_img_article_Img_api("false");
+ setSend_img_article_Img_message(result['message']);
+ }
+ setLoading(false);
+
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ setSend_img_article_Img_api("false");
+
+ setLoading(false);
+ });
+
+ }
+
+
+ const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState();
+ const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState();
+ const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState();
+ function Delete_img_article_Img() {
+ clear_message();
+
+
+ setLoading(true);
+
+
+ const formData = new FormData();
+
+ //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+ const stored_cookie = getCookie('tokenmysypart');
+ formData.append("token", stored_cookie);
+
+
+ fetch(
+ process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/",
+ {
+ method: 'POST',
+ body: formData,
+ }
+ )
+ .then((response) => response.json())
+ .then((result) => {
+ //console.log('Success:', result['message']);
+
+ if (String(result['status']) === String("true")) {
+ setDelete_img_article_Img_api("true");
+ setGetLms_Themes_img_article_Img('');
+ alert(" Le logo a été correctement supprimé ");
+
+ } else if (String(result['status']) === String("Err_Connexion")) {
+ alert('Erreur: ' + result['message']);
+ history.push("/Connexion");
+ }
+
+ else {
+ setDelete_img_article_Img_api("false");
+ setDelete_img_article_Img_message(result['message']);
+ }
+ setLoading(false);
+
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ setDelete_img_article_Img_api("false");
+ setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo");
+ setLoading(false);
+ });
+
+ }
+
+ const changeHandler2_logo = (event) => {
+ clear_message();
+ hiddenFileInput_logo.current.click();
+ };
+
+ function Annule_img_article_img() {
+ clear_message();
+ setimg_img_article_file();
+ setimg_img_article_file2();
+ sethandleSubmission_img_article_message();
+ setSend_img_article_Img_api();
+ setSend_img_article_Img_message();
+ setlogo_file_name();
+ }
+
+ /***** Fin gestion de l'image de l'article */
+
+ // Prevent Bootstrap dialog from blocking focusin
+ document.addEventListener('focusin', (e) => {
+ if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
+ e.stopImmediatePropagation();
+ }
+ });
+
+ return (
+
+
+
+
+
+ {/*** GESTION article */}
+
null}
+
+ PaperProps={{
+
+
+ className: classes.paper, // Apply the paper style
+ style: {
+ overflowY: 'unset',
+ position: 'absolute',
+ top: '5rem',
+ margin: "2px",
+ },
+ }}
+ hideBackdrop={true}
+ disableScrollLock
+ classes={{
+ paper: classes.dialog
+ }}
+
+ PaperComponent={PaperComponent}
+ aria-labelledby="draggable-dialog-title"
+ >
+
+ Votre article
+
+
+
+ {String(is_data_changed) === String("1") &&
+
/!\ Pensez à enregistrer les modifications
+
}
+
+
+
+ Titre
+
+
+
+ {
+ setarticle_avis_title_formation(e.target.value);
+ setis_data_changed("1");
+ }}
+ className='disabled_style_width_100_percent'
+
+ >
+
+
+
+
+
+
+
+
+ Date publication
+
+
+
+
+ {
+ setarticle_avis_date_publication(format(date, 'yyyy-MM-dd'));
+ setis_data_changed("1");
+ }
+ }
+ showTimeSelect={false}
+ dateFormat="dd/MM/yyyy"
+ className="disabled_style session_caract_Dialog_DatePicker"
+ />
+
+
+
+
+
+ Affiche image
+
+
+ {
+ setarticle_avis_display_header_img(e.target.checked);
+ setis_data_changed("1");
+ }}
+
+ />
+
+
+
+
+
+
+
+ Image
+
+
+
+
+
+
+
+
+
+ {logo_file_name &&
{logo_file_name} }
+
+
+ {img_img_article_file &&
Fichier à importer : {img_img_article_file.name}
+
+
+
+
+
+
+ }
+
+ {String(Send_img_article_Img_api) === "true" &&
La mise à jour a été correctement faite
}
+ {String(Send_img_article_Img_api) === "false" &&
{Send_img_article_Img_message}
}
+
+ {String(handleSubmission_img_article_api) === "false" &&
{handleSubmission_img_article_message}
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Meta description
+
+
+ {
+ setarticle_avis_meta_description(e.target.value);
+ setis_data_changed("1");
+ }
+ }
+
+
+ />
+
+
+
+
+
+
+
+
+ Texte Article
+
+
+
+ editorRef_texte_avis.current = editor}
+ // initialValue={field_texte_avis}
+
+ onKeyUp={editor_keyup}
+ value={field_texte_avis}
+ onEditorChange={(newValue, editor) => {
+ setfield_texte_avis(editorRef_texte_avis.current.getContent());
+ setis_data_changed("1");
+
+ }}
+ init={{
+ resize: false,
+ height: 700,
+ menubar: true,
+ plugins: [
+ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', 'searchreplace',
+ 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code', 'help', 'wordcount',
+ 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
+
+ ],
+ toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
+ 'alignleft aligncenter alignright alignjustify | ' +
+ 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
+
+ content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }'
+ }}
+ />
+
+
+
+ {String(is_data_changed) === String("1") &&
+
/!\ Pensez à enregistrer les modifications
+
}
+
+
{
+
+ if (document.getElementsByName('one_detail_document_principal') && document.getElementsByName('one_detail_document_principal')[0])
+ document.getElementsByName('one_detail_document_principal')[0].focus();
+ }}> editer
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fermer
+
+
+ Enregistrer
+
+
+
+
+
+
+
+
+ {/*** FIN GESTION article */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ e.preventDefault();
+ window.location.href = "/Display-Detail-Article/" + props.article.internal_url
+ }} style={{
+ cursor: "pointer"
+ }} > {title_resized}
+
+
+
+
+
+
+ {parse(String(props.article.avis).replace(/(<([^>]+)>)/ig, ''))}
+
+
+
+
+
+
{(String(props.article.date_publication)).substring(0, 10)}
+
+
+
{
+ e.preventDefault();
+ window.location.href = "/Display-Detail-Article/" + props.article.internal_url
+ }}> En savoir plus
+
+
+
+
+ {props.connected_user_article_avis_droit_modif === "1" &&
{
+ e.preventDefault();
+
+ }}>
+
+
+
+ :not(style)': { m: 1 }, }} onClick={(e) => {
+ setarticle_avis_title_formation(props.article.title_formation);
+ // setarticle_avis_avis(props.article.avis);
+ // setfield_texte_avis_initial_value(props.article.avis);
+ setarticle_avis_date_publication(moment((String(props.article.date_avis)).substring(0, 10)).format('YYYY-MM-DD'))
+
+ Get_Partner_Article_Avis_Data();
+ setedit_article("1");
+ setis_data_changed("");
+ setDialog_article_avis_open(true);
+
+ }}>
+
+ Edit
+
+
+
+
+
+ :not(style)': { m: 1 }, }} onClick={(e) => {
+
+
+ }}>
+
+ Supr
+
+
+ }
+ modal
+ nested
+ position="center center"
+ >
+ {close => (
+
+
+ ×
+
+
MySy Information
+
+ {' '}
+
+ En confirmant cette opération, le document sera définitivement supprimé .
+
+
+
+
+ {
+ Delete_Article_Avis_Data(props.article._id);
+ close();
+ }}> Valider
+
+
+
+ {
+ console.log('modal closed ');
+ close();
+ }}
+ >
+ Annuler
+
+
+
+
+ )}
+
+
+
+
}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default New_Article_2025;
\ No newline at end of file
diff --git a/src/components/New_C_Article_Detail_2025.js b/src/components/New_C_Article_Detail_2025.js
new file mode 100644
index 0000000..1f38e6d
--- /dev/null
+++ b/src/components/New_C_Article_Detail_2025.js
@@ -0,0 +1,467 @@
+import React, { useRef, useState, useEffect } from "react";
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+import { Helmet } from "react-helmet";
+import { useCookies } from "react-cookie";
+import Articles from "../components/Article";
+
+import New_Article_2025 from "./New_C_Article_2025";
+
+import 'react-discussion-board/dist/index.css'
+import { useForm } from 'react-hook-form';
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import parse from 'html-react-parser'
+import Fotter_v3 from "./Fotter_v3";
+import Header from "./Header";
+import img_met_digital from "../mysy_img/met_digital.jpg";
+
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { FcRightUp } from "react-icons/fc";
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+import { FcUndo } from "react-icons/fc";
+import IMG_Default_Article from "../mysy_img/img_default_article_detail.jpg";
+
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+
+function New_C_Article_Detail_2025() {
+
+ const classes = useStyles();
+
+ const [img_displayed, setimg_displayed] = useState("");
+
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+ const { articleId } = useParams();
+ const [result, setResult] = useState("");
+
+ const [myApiResponse, setmyApiResponse] = useState("false");
+ const [DetailArticleAvis, setDetailArticleAvis] = useState([]);
+ const [country_code, setcountry_code] = useState("");
+ const [country_name, setcountry_name] = useState("");
+ const [city, setcity] = useState("");
+ const [postal, setpostal] = useState("");
+ const [latitude, setlatitude] = useState("");
+ const [longitude, setlongitude] = useState("");
+ const [IPv4, setIPv4] = useState("");
+ const [state, setstate] = useState("");
+ const [userIp, setuserIp] = useState("");
+ const [action, setaction] = useState("");
+ const [userconnected, setuserconnected] = useState("");
+ const stored_user = cookie.tokenmysych;
+
+
+ const [display_header_img, setdisplay_header_img] = useState("");
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors }
+ } = useForm();
+
+
+ const [pagecanoniktitle, setpagecanoniktitle] = useState("");
+ const [pagecanonikurl, setpagecanonikurl] = useState(window.location.host);
+ const [article_img, setarticle_img] = useState("")
+ const [page_meta_description, setpage_meta_description] = useState("");
+
+
+ useEffect(() => {
+
+ setpagecanonikurl(window.location.host);
+
+ console.log(" hello zzz, articleId = ", articleId);
+
+ async function fetchData() {
+ const result = await axios('https://geolocation-db.com/json/',);
+ setuserIp(result.data.IPv4);
+ setcountry_code(result.data.country_code);
+ setcountry_name(result.data.country_name);
+ setcity(result.data.city);
+ setpostal(result.data.postal);
+ setlatitude(result.data.latitude);
+ setlongitude(result.data.longitude);
+ setIPv4(result.data.IPv4);
+ setstate(result.data.state);
+ setuserIp(result.data.IPv4);
+
+ }
+ fetchData();
+ Display();
+ // Display_article_comment();
+ Get_3_Articles();
+
+ //alert("stored_user = "+stored_user);
+ if (typeof (articleId) === "undefined") {
+ setaction("creation");
+ } else {
+ setaction("affichage");
+
+ }
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ } else {
+ setuserconnected("1");
+ }
+ // setwindowWidth(window.innerWidth);
+ // setwindowheight(window.innerHeight);
+
+
+ //console.log(" articleId = " + articleId);
+ }, []);
+
+
+
+
+ function Display(e) {
+
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis/";
+ var form = new FormData();
+ form.append("internal_url", articleId);
+ form.append("token", "");
+ // Ajout des info IP user
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+
+ //alert("myurl = "+myurl);
+
+ axios.post(myurl, form).then(res => {
+ // console.log(" In test res.data.status = " + res.data.status);
+ //console.log(" In Display iiii res.data.message = " + res.data.message);
+ if (String(res.data.status) === "true") {
+ setmyApiResponse("True");
+
+ setResult(res.data.message);
+ setDetailArticleAvis(JSON.parse(res.data.message));
+
+ var my_avis = JSON.parse(res.data.message)
+
+ if (my_avis && my_avis.display_header_img && String(my_avis.display_header_img) === "0") {
+ setdisplay_header_img("0")
+ }
+
+ if (my_avis && my_avis.title_formation) {
+ setpagecanoniktitle(my_avis.title_formation);
+ }
+
+ if (my_avis && my_avis.meta_description) {
+ setpage_meta_description(my_avis.meta_description);
+ } else {
+ setpage_meta_description(my_avis.title_formation);
+ }
+
+
+ if (my_avis && my_avis.internal_url) {
+ setpagecanonikurl(my_avis.internal_url);
+
+ console.log(process.env.REACT_APP_BASE_URL + "/" + my_avis.internal_url);
+ }
+
+
+ if (my_avis && my_avis.img_path && String(my_avis.img_path).length > 10) {
+ setarticle_img(my_avis.img_path);
+ } else {
+ setarticle_img(img_met_digital);
+ }
+
+ // console.log(" ### my_avis.display_header_img = ", my_avis.display_header_img);
+ }
+ else {
+ //console.log(" In Erreur res.data.status = " + res.data.status);
+ //console.log(" In Erreur res.data.message = " + res.data.message);
+ setmyApiResponse("False");
+ }
+ }).catch((error) => {
+ console.warn('Not good man :( mysearchtext = ');
+ setmyApiResponse("False");
+ })
+ }
+
+ const [Get_3_Articles_api, setGet_3_Articles_api] = useState();
+ const [Get_3_Articles_result, setGet_3_Articles_result] = useState([]);
+ function Get_3_Articles(e) {
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_last_3_articles/";
+ var form = new FormData();
+ form.append("internal_url", articleId);
+ form.append("token", "");
+ // Ajout des info IP user
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+
+ // console.log("#### form = ", form);
+
+ axios.post(myurl, form).then(res => {
+ //console.log(" In Get_3_Articles res.data.status = " + res.data.status);
+ //console.log(" In Get_3_Articles res.data.message = " + res.data.message);
+
+ if (String(res.data.status) === "true") {
+
+ setGet_3_Articles_result(res.data.message);
+
+ }
+ else {
+ //console.log(" In Erreur res.data.status = " + res.data.status);
+ //console.log(" In Erreur res.data.message = " + res.data.message);
+ setGet_3_Articles_result([]);
+ setGet_3_Articles_api("False");
+
+ }
+ }).catch((error) => {
+ console.warn('Not good man :( mysearchtext = ');
+ setGet_3_Articles_api("False");
+ })
+ }
+
+
+ const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+ const [alert_message, setalert_message] = useState("");
+ const [alert_type, setalert_type] = useState("");
+
+ function clear_alert_message() {
+ setalert_message("");
+ }
+ function clear_alert_type() {
+ setalert_type("");
+ }
+
+ function clear_display_alert_mysy() {
+ setdisplay_alert_mysy("");
+ }
+
+
+ return (
+
+
+ {/*** Affichage des messages d'alerte*/}
+ {display_alert_mysy && String(display_alert_mysy) === "1" &&
+
+ }
+ {/*** FIN Affichage des messages d'alerte*/}
+
+
+ {`${pagecanoniktitle}`}
+
+
+
+
+
+
+
+ {(!display_header_img || String(display_header_img) === "0") &&
+
+
}
+
+ {display_header_img && String(display_header_img) !== "0" &&
+
+
}
+
+
+
+
+
+
+ {(!display_header_img || String(display_header_img) === "0") &&
+
+ {DetailArticleAvis.title_formation}
+
+
+ {DetailArticleAvis && DetailArticleAvis.date_avis &&
+ {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
+
}
+
+
+
+
}
+
+ {display_header_img && String(display_header_img) !== "0" &&
+
+ {DetailArticleAvis.title_formation}
+
+
+ {DetailArticleAvis && DetailArticleAvis.date_avis &&
+ {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
+
}
+
+
+
+
}
+
+ {DetailArticleAvis && DetailArticleAvis.avis &&
+
+ {parse(DetailArticleAvis.avis)}
+
+
}
+
+
+
+
+
+
+
+
{
+ e.preventDefault();
+ window.location.href = "/Recherche-Article-formation"
+ }}>
+ Retour vers la liste des articles
+
+
+
+
+
+
+
+
+
+
+ À découvrir également
+
+
+
+
+ {Get_3_Articles_result && Get_3_Articles_result.map((formation) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ À découvrir également
+
+
+
+
+
+
+
+
+
+
+
+
+ How collaboration makes us better designers
+
+
+
+
+
+
+
+
+ Collaboration can make our teams stronger, and our individual designs better.
+
+
+
+
+
+
+
+
+
+
+
+ How collaboration makes us better designers
+
+
+
+
+
+
+
+
+ Collaboration can make our teams stronger, and our individual designs better.
+
+
+
+
+
+
+
+
+
+
+
+ How collaboration makes us better designers
+
+
+
+
+
+
+
+
+ Collaboration can make our teams stronger, and our individual designs better.
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default New_C_Article_Detail_2025;
+
diff --git a/src/components/New_C_Footer_2025.js b/src/components/New_C_Footer_2025.js
new file mode 100644
index 0000000..c9f6d5b
--- /dev/null
+++ b/src/components/New_C_Footer_2025.js
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from "react";
+import { Helmet } from "react-helmet";
+import { useForm } from "react-hook-form";
+import { useHistory } from "react-router-dom";
+import { Button, FormGroup, Label, Input } from "reactstrap";
+import TextField from '@mui/material/TextField';
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { IconButton } from '@material-ui/core';
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+
+
+function New_C_Footer_2025() {
+
+ const classes = useStyles();
+
+ const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+const [alert_message, setalert_message] = useState("");
+const [alert_type, setalert_type] = useState("");
+
+function clear_alert_message() {
+ setalert_message("");
+}
+function clear_alert_type() {
+ setalert_type("");
+}
+
+function clear_display_alert_mysy() {
+ setdisplay_alert_mysy("");
+}
+
+ return (
+
+
+ {/*** Affichage des messages d'alerte*/}
+ {display_alert_mysy && String(display_alert_mysy) === "1" &&
+
+ }
+ {/*** FIN Affichage des messages d'alerte*/}
+
+ FOOTERRRR
+
+
+ );
+}
+
+export default New_C_Footer_2025;
+
diff --git a/src/components/New_C_Formation_2025.js b/src/components/New_C_Formation_2025.js
new file mode 100644
index 0000000..676b7ca
--- /dev/null
+++ b/src/components/New_C_Formation_2025.js
@@ -0,0 +1,933 @@
+import React, { useState, useEffect } from "react";
+import ReactPlayer from 'react-player'
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
+import { SocialIcon } from 'react-social-icons';
+import { Button, } from "reactstrap";
+import { useHistory } from "react-router-dom";
+import { Helmet } from "react-helmet";
+import { useCookies } from "react-cookie";
+import { confirmAlert } from 'react-confirm-alert';
+import topimg from "../mysy_img/top.png";
+import coeurimg from "../mysy_img/coeur.png";
+import img_met_program from "../mysy_img/met_programmation.jpg";
+import img_met_hotel from "../mysy_img/met_hotel.jpg";
+import img_met_graphisme from "../mysy_img/metier_graphisme.jpg";
+
+import img_met_autre from "../mysy_img/met_autre.jpg";
+import img_met_digital from "../mysy_img/met_digital.jpg";
+import img_met_management from "../mysy_img/met_management.jpg";
+import img_met_projet from "../mysy_img/met_projet.jpg";
+
+import img_met_market from "../mysy_img/met_market.jpg";
+import img_met_autre2 from "../mysy_img/met_autre2.jpg";
+import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg";
+import img_met_rh from "../mysy_img/met_rh.jpg";
+
+import img_met_bureautic from "../mysy_img/met_burautic.jpg";
+import img_met_vente from "../mysy_img/met_vente.jpg";
+import axios from "axios";
+//import { Rating } from 'react-simple-star-rating'
+import Rating from '@mui/material/Rating';
+import parse from 'html-react-parser'
+import { CiLocationOn } from "react-icons/ci";
+
+const New_C_Formation_2025 = (props) => {
+ const [userconnected, setuserconnected] = useState("0");
+ const [partnerconnected, setpartnerconnected] = useState("0");
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+ const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
+ const history = useHistory();
+ const [myfilter, setmyfilter] = useState(props.formation.price);
+
+ const [profileimg, setprofileimg] = useState(props.formation.price);
+
+
+ // Gestion des Cookies
+ const stored_partner = cookie_part.tokenmysypart;
+ const stored_user = cookie.tokenmysych;
+
+ function test(val) {
+
+ if (userconnected === "0" && partnerconnected === "0") {
+ confirmAlert({
+ title: 'Activer votre session ?',
+ message: 'Merci de vous connecter pour acceder au detail de cette formation',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => { history.push("/mysy-training-login/training/" + props.formation.internal_url) }
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+
+ }
+ ],
+ closeOnEscape: false,
+ closeOnClickOutside: false,
+ keyCodeForClose: [8, 32],
+ willUnmount: () => { },
+ afterClose: () => { },
+ onClickOutside: () => { },
+ onKeypress: () => { },
+ onKeypressEscape: () => { },
+ });
+ } else {
+ window.open(
+ "/Display-Detail-formation/" + props.formation.internal_url,
+ '_blank'
+ );
+ }
+
+
+ }
+
+ const [myclassimage, setmyclassimage] = useState();
+ const [isclassimage, setisclassimage] = useState("False");
+ const [userimgclassprofil, setuserimgclassprofil] = useState("");
+
+ const [class_img_stored_in_bdd, setclass_img_stored_in_bdd] = useState("");
+
+ function getClassImage_no_token() {
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_no_token/";
+
+
+
+ var form = new FormData();
+
+ form.append("type", "partner");
+ form.append("related_collection", "myclass");
+ form.append("related_collection_recid", props.formation._id);
+ form.append("class_external_code", props.formation.external_code);
+
+
+ axios.post(myurl, form).then(res => {
+
+ if (res.data.status != "False") {
+
+ //console.log(" getClassImage : In test res.data.status = " + res.data.status);
+ //console.log(" getClassImage: res.data.message.img = " + res.data.message);
+
+ if (res.data.message.img.length > 0) {
+ setisclassimage("True");
+ }
+ else {
+ setisclassimage("False");
+ }
+ setisclassimage(res.data.message.img);
+ var ch_img = "data:image/png;base64," + res.data.message.img;
+ setclass_img_stored_in_bdd(ch_img);
+ }
+ else {
+ //console.log(" In Erreur res.data.status = " + res.data.status);
+ //console.log(" In Erreur res.data.message = " + res.data.message);
+ setisclassimage("False");
+ setuserimgclassprofil();
+ setclass_img_stored_in_bdd();
+ }
+ }).catch((error) => {
+
+ console.warn('getClassImage ee: Not good man :( getClassImage = ');
+ setisclassimage("False");
+ setuserimgclassprofil("");
+ setclass_img_stored_in_bdd("");
+ })
+
+ }
+
+
+ /* Cette variable accompagne la gestion des images par defaut.
+ idée : si la valeur de "DetailTraining.metier" != "management, digital, office, rh, vente, dev_perso"
+ alors l'utilisateur à créer une formation avec un metier qui n'est pas geré, donc on met une image par defaut
+ */
+ const [ismetiermanaged, setismetiermanaged] = useState();
+ const liste_metier = ["management", "digital", "office", "rh", "vente", "dev_perso"];
+
+ useEffect(() => {
+ setmyfilter(props.myfil);
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ } else {
+ setuserconnected("1");
+ }
+
+ if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
+ setpartnerconnected("0");
+ } else {
+ setpartnerconnected("1");
+ }
+
+ getClassImage_no_token();
+ GetCurrentClass_trainingsession();
+
+ GetCurrentClass_trainingsession_cities();
+
+ // Verifier si le metier est geré
+ if (props.formation.metier) {
+ if (!liste_metier.includes(props.formation.metier)) {
+ setismetiermanaged("0"); // j'ai une valeur dans metier, mais qui n'est pas geré
+ }
+ }
+ else {
+ setismetiermanaged("0");
+ }
+
+ if (props.formation.img_url && String(props.formation.img_url).length > 0) {
+ setismetiermanaged("1");
+ }
+
+ }, []);
+
+
+ const [GetCurrentClass_api, setGetCurrentClass_api] = useState();
+ const [GetCurrentClass_message, setGetCurrentClass_message] = useState();
+ const [GetCurrentClass_result, setGetCurrentClass_result] = useState();
+ function GetCurrentClass_trainingsession(event) {
+
+ var form = new FormData();
+
+ form.append("class_internal_url", props.formation.internal_url);
+
+ form.append("token", stored_partner);
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/";
+
+ axios.post(myurl, form).then(res => {
+
+ if (res.data.status != "false") {
+ //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status);
+ //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message);
+ setGetCurrentClass_api("true");
+ setGetCurrentClass_result(res.data.message);
+ }
+ else {
+ setGetCurrentClass_api("false");
+ setGetCurrentClass_message(res.data.message);
+ }
+
+ }).catch((error) => {
+ console.warn('Not good man :( GetCurrentClass_trainingsession = ', error);
+ setGetCurrentClass_api("false");
+ //setmyApimyApiMessage("")
+ })
+ }
+
+
+ const [GetCurrentClass_trainingsession_cities_api, setGetCurrentClass_trainingsession_cities_api] = useState();
+ const [GetCurrentClass_trainingsession_cities_message, setGetCurrentClass_trainingsession_cities_message] = useState();
+ const [GetCurrentClass_trainingsession_cities_result, setGetCurrentClass_trainingsession_cities_result] = useState([]);
+ function GetCurrentClass_trainingsession_cities(event) {
+
+ var form = new FormData();
+
+ form.append("class_internal_url", props.formation.internal_url);
+
+ form.append("token", stored_partner);
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSession_Cities_And_Distance_Formation_List/";
+
+ axios.post(myurl, form).then(res => {
+
+ if (res.data.status != "false") {
+ //console.log(" In GetCurrentClass_trainingsession_cities res.data.status = " + res.data.status);
+ //console.log(" In GetCurrentClass_trainingsession_cities res.data.message r_class = " + res.data.message);
+ setGetCurrentClass_trainingsession_cities_api("true");
+ setGetCurrentClass_trainingsession_cities_result(res.data.message);
+ }
+ else {
+ setGetCurrentClass_trainingsession_cities_api("false");
+ setGetCurrentClass_trainingsession_cities_message(res.data.message);
+ }
+
+ }).catch((error) => {
+ console.warn('Not good man :( GetCurrentClass_trainingsession_cities = ', error);
+ setGetCurrentClass_trainingsession_cities_api("false");
+ //setmyApimyApiMessage("")
+ })
+ }
+
+ const styles = {
+ list: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '32px',
+ width: '100%',
+ },
+ row: {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '24px',
+ width: '100%',
+ },
+ card: {
+ flexGrow: 1,
+ backgroundColor: '#fff',
+ borderRadius: '8px',
+ overflow: 'hidden',
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ image: {
+ width: '100%',
+ height: '200px',
+ overflow: 'hidden',
+ marginTop: '-2rem'
+
+ },
+ content: {
+ padding: '16px',
+ },
+ header: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ eligibility: {
+ backgroundColor: '#e2e9fb',
+ padding: '4px 8px',
+ borderRadius: '4px',
+ fontSize: '12px',
+ fontWeight: 'bold',
+ },
+ title: {
+ fontSize: '14px',
+ fontWeight: 'bold',
+ margin: '8px 0',
+ },
+ price: {
+ fontSize: '14px',
+ fontWeight: 'bold',
+ color: '#000',
+ },
+ description: {
+ fontSize: '12px',
+ color: '#666',
+ margin: '8px 0',
+ height: "40px",
+ overflow: "hidden",
+ },
+ details: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ marginTop: '16px',
+ },
+ button: {
+ backgroundColor: '#007bff',
+ color: '#fff',
+ padding: '8px 16px',
+ border: 'none',
+ borderRadius: '4px',
+ cursor: 'pointer',
+ },
+ buttonOutline: {
+ backgroundColor: '#fff',
+ color: '#007bff',
+ padding: '8px 16px',
+ border: '1px solid #007bff',
+ borderRadius: '4px',
+ cursor: 'pointer',
+ },
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ {props.formation.cpf && String(props.formation.cpf) === String("1") &&
+ {"OUI CPF"}
+
+ }
+ {props.formation.cpf && String(props.formation.cpf) !== String("1") &&
+ {"NON CPF"}
+
+ }
+ {!props.formation.cpf && String(props.formation.cpf) !== String("1") &&
+ {"NON CPF"}
+
}
+
+
+
+
+ {class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 &&
+
+ }
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" &&
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("it") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") &&
+ String(isclassimage) === "False" &&
}
+
+ {!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") &&
+ String(isclassimage) === "False" &&
}
+
+ {!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") &&
+ String(isclassimage) === "False" &&
}
+
+ {!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("dev_perso") &&
+ String(isclassimage) === "False" &&
}
+
+ {String(isclassimage) === "True" &&
}
+
+
+
+ }
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 &&
+
+ {/*props.formation.institut_formation &&
Dispensé par :
+ {String(props.formation.institut_formation)}
*/}
+
}
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length <= 100 &&
+
+ {/*props.formation.institut_formation &&
Dispensé par :
+ {String(props.formation.institut_formation)}
*/}
+
}
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "1" &&
+
+ {/*props.formation.institut_formation &&
Dispensé par :
+ {String(props.formation.institut_formation)}
*/}
+
}
+
+
+
+
+
+ {props.formation.note && String(props.formation.note).length === 1 &&
+ parseInt(String(props.formation.note)) <= 5 &&
+
+ }
+
+
+
{String(parse(String(props.formation.title).replace(/(<([^>]+)>)/ig, ''))).substring(0, 50)}
+
{props.formation.price} € HT
+
{String(parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, ''))).substring(0, 80)}...
+
+
+
+
+
+ {
+ e.preventDefault();
+ if (props.formation.url && props.formation.url.length > 5) {
+
+ window.open(
+ props.formation.url,
+ '_blank'
+ );
+ } else {
+ window.open(
+ "/detaile-formation/" + props.formation.internal_url,
+ '_blank'
+ );
+ }
+ }}> Voir les détails
+
+
+
+
+
+ {/*
+
+
+ {class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 &&
+
+
+ }
+
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" &&
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("it") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") &&
+ String(isclassimage) === "False" &&
}
+
+ {(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") &&
+ String(isclassimage) === "False" &&
}
+
+ {!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") &&
+ String(isclassimage) === "False" &&
}
+
+ {!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") &&
+ String(isclassimage) === "False" &&
}
+
+ {!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
+ props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("dev_perso") &&
+ String(isclassimage) === "False" &&
}
+
+ {String(isclassimage) === "True" &&
}
+
+
+
+ }
+
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 &&
+
+ {props.formation.institut_formation &&
Dispensé par : {String(props.formation.institut_formation)}
}
+
}
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length <= 100 &&
+
+ {props.formation.institut_formation &&
Dispensé par : {String(props.formation.institut_formation)}
}
+
}
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "1" &&
+
+ {props.formation.institut_formation &&
Dispensé par : {String(props.formation.institut_formation)}
}
+
}
+
+
+
{
+ e.preventDefault();
+ if (props.formation.url && props.formation.url.length > 5) {
+
+ window.open(
+ props.formation.url,
+ '_blank'
+ );
+ } else {
+ window.open(
+ "/Display-Detail-formation/" + props.formation.internal_url,
+ '_blank'
+ );
+ }
+ }}>
+
+
+
+
+ {props.formation.note && String(props.formation.note).length === 1 &&
+ parseInt(String(props.formation.note)) <= 5 &&
+
+
+
+ }
+
+
+
+
+
+
+
+ {props.formation.cpf && String(props.formation.cpf) === String("1") &&
+
+ OUI Éligible au CPF
+
}
+
+ {props.formation.cpf && String(props.formation.cpf) !== String("1") &&
+
+ NON Éligible au CPF
+
}
+
+ {!props.formation.cpf &&
+
+ NON Éligible au CPF
+
}
+
+
+
+
+
+
+
+
+
+ {String(parse(String(props.formation.title).replace(/(<([^>]+)>)/ig, ''))).substring(0, 100)}
+
+
+
+
+
+
+ {String(props.formation.price).length == 9 &&
+
Prix : Non communiqué
+
+ }
+
+
+ {String(props.formation.price).length != 9 && String(props.formation.price) === String("0") &&
+
Gratuit
+
+ }
+
+ {String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") && (!props.formation.business_prices ||
+ Object.keys(props.formation.business_prices).length <= 0) &&
+
{props.formation.price} € HT
+
+
+ }
+
+ {String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") &&
+ props.formation.business_prices && Object.keys(props.formation.business_prices).length > 0 &&
+
+ {String(props.formation.business_prices[0].discounted_price)} € HT
+
+ {props.formation.price} € HT
+
+
+ (- {String(props.formation.business_prices[0].discount)} % )
+
+
+ }
+
+
+
+
+ {parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, ''))}
+
+
+ {GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.length > 0 &&
+
+
+
+ {GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.sort().slice(0, 5).map((formation_ville) => (
+
+
+
+
+ {formation_ville &&
+
+ {formation_ville.replaceAll('"', '').substring(0, 20).toLocaleLowerCase().charAt(0).toUpperCase() +
+ formation_ville.replaceAll('"', '').substring(0, 20).toLocaleLowerCase().slice(1)}
+
+ }
+
+
+ ))}
+
+
+
+
+ }
+ {!GetCurrentClass_result || GetCurrentClass_result.length <= 0 &&
+
A venir
+ }
+
+
+
+
+
+
+
+
+
+ {!props.formation.extented_search &&
+
+
+
+ {props.formation.duration_unit &&
+
+
Durée
+
+
+ {String(props.formation.duration_unit) === "heure" &&
+
+ {props.formation.duration} hr(s)
+
}
+
+ {String(props.formation.duration_unit) === "heures" &&
+
+ {props.formation.duration} hr(s)
+
}
+
+
+ {String(props.formation.duration_unit) === "jour" &&
+
+ {props.formation.duration} jr(s)
+
}
+
+ {String(props.formation.duration_unit) === "mois" &&
+
+ {props.formation.duration} mois(s)
+
}
+
+ {String(props.formation.duration_unit) === "semaine" &&
+
+ {props.formation.duration} Sem (s)
+
}
+
+ {String(props.formation.duration_unit) === "user_rythme" &&
+
+ A votre rythme
+
}
+
+
+ }
+
+
+ {!props.formation.duration_unit &&
+
+
Durée
+
+
+ {props.formation.duration &&
+ {props.formation.duration} jr(s)
+
}
+
+ {!props.formation.duration &&
+ En traitement
+
}
+
+
+
+
+ }
+
+
+ Certification
+
+
+
+ {props.formation.certif && String(props.formation.certif) === String("1") &&
+
+ Oui
+
}
+
+ {props.formation.certif && String(props.formation.certif) !== String("1") &&
+
+ Non
+
}
+
+ {!props.formation.certif &&
+
+ NC
+
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
}
+
+
+
+ {String(props.formation.coeur) === String("1") &&
+
+
}
+
+
+
+
+
+
+
+ Sur site
+
+ {props.formation.presentiel && props.formation.presentiel.presentiel &&
+ String(props.formation.presentiel.presentiel) === String("1") &&
+ Oui
+
}
+
+ {props.formation.presentiel && props.formation.presentiel.presentiel &&
+ String(props.formation.presentiel.presentiel) !== String("1") &&
+ Non
+
}
+
+ {!props.formation.presentiel || !props.formation.presentiel.presentiel &&
+
+ NC
+
}
+
+
+
+
+ A distance
+
+ {props.formation.presentiel && props.formation.presentiel.distantiel &&
+ String(props.formation.presentiel.distantiel) === String("1") &&
+ Oui
+
}
+
+ {props.formation.presentiel && props.formation.presentiel.distantiel &&
+ String(props.formation.presentiel.distantiel) !== String("1") &&
+ Non
+
}
+
+ {!props.formation.presentiel || !props.formation.presentiel.distantiel &&
+
+ NC
+
}
+
+
+
+
+ Support
+
+ {props.formation.support &&
+
+ {props.formation.support}
+
}
+
+ {!props.formation.support &&
+
+ NC
+
}
+
+
+
+
+
+
+
+
+
+ {!props.formation.extented_search && props.formation.coeur != "1" &&
+
+
+ {
+ e.preventDefault();
+ if (props.formation.url && props.formation.url.length > 5) {
+
+ window.open(
+ props.formation.url,
+ '_blank'
+ );
+ } else {
+
+ window.open(
+ "/Display-Detail-formation/" + props.formation.internal_url + "/Information",
+ '_blank'
+ );
+ }
+
+
+ }}
+
+ >Se renseigner
+
+
+ {
+ e.preventDefault();
+ //test(props.formation.external_code);
+
+ if (props.formation.url && props.formation.url.length > 5) {
+
+ window.open(
+ props.formation.url,
+ '_blank'
+ );
+ } else {
+ window.open(
+ "/Display-Detail-formation/" + props.formation.internal_url,
+ '_blank'
+ );
+ }
+
+ }}
+ >Voir details
+
+ {GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
+ {
+ e.preventDefault();
+
+ window.open(
+ "/Display-Detail-formation/" + props.formation.internal_url + "/Inscription",
+ '_blank'
+ );
+
+ }}
+
+ >S'incrire
+ }
+
+
}
+
+
+
+
+ */}
+
+
+ )
+}
+
+
+export default New_C_Formation_2025;
\ No newline at end of file
diff --git a/src/components/New_C_Header_2025.js b/src/components/New_C_Header_2025.js
new file mode 100644
index 0000000..15b95c0
--- /dev/null
+++ b/src/components/New_C_Header_2025.js
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from "react";
+import { Helmet } from "react-helmet";
+import { useForm } from "react-hook-form";
+import { useHistory } from "react-router-dom";
+import { Button, FormGroup, Label, Input } from "reactstrap";
+import TextField from '@mui/material/TextField';
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { IconButton } from '@material-ui/core';
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+
+function New_C_Header_2025() {
+
+ const classes = useStyles();
+
+ const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+ const [alert_message, setalert_message] = useState("");
+ const [alert_type, setalert_type] = useState("");
+
+ function clear_alert_message() {
+ setalert_message("");
+ }
+ function clear_alert_type() {
+ setalert_type("");
+ }
+
+ function clear_display_alert_mysy() {
+ setdisplay_alert_mysy("");
+ }
+
+
+ return (
+
+
+ {/*** Affichage des messages d'alerte*/}
+ {display_alert_mysy && String(display_alert_mysy) === "1" &&
+
+ }
+ {/*** FIN Affichage des messages d'alerte*/}
+
+
+
+
+
+
+
+
+
+
+
+ Créer un compte
+ Réserver une démo
+
+
+
+
+
Connexion
+
+
+
+
+
+ );
+}
+
+export default New_C_Header_2025;
+
diff --git a/src/components/New_C_Sign_In_2025.js b/src/components/New_C_Sign_In_2025.js
new file mode 100644
index 0000000..e768a8c
--- /dev/null
+++ b/src/components/New_C_Sign_In_2025.js
@@ -0,0 +1,997 @@
+import React, { useState, useEffect } from "react";
+import { Helmet } from "react-helmet";
+import { useForm } from "react-hook-form";
+import { useHistory } from "react-router-dom";
+import { Button, FormGroup, Label, Input } from "reactstrap";
+
+
+import { useCookies } from "react-cookie";
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+
+import 'reactjs-popup/dist/index.css';
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+
+
+import { useLocation } from "react-router-dom";
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import 'react-tooltip/dist/react-tooltip.css'
+
+import TextField from '@mui/material/TextField';
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { IconButton } from '@material-ui/core';
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+
+import Sign_In_Logo_MySy_SVG from '../img_new_design_2025/Logo_MySy.svg';
+import Sign_In_Line_Arrow_Left_SVG from '../img_new_design_2025/line-arrow-left.svg';
+
+
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+
+function New_C_Sign_In_2025() {
+
+ const classes = useStyles();
+ const [isconnected, setisconnected] = useState("");
+ const [cookie_acces_right, setCookie_acces_right, removeCookie_acces_right] = useCookies(['mysy_user_access_right']);
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' });
+ const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart'], { path: '/' });
+ const [retval, setretval] = useState("0");
+ const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
+ const [initpasswd, setinitpasswd] = useState();
+ const [result, setResult] = useState("");
+ const [myApiResponse, setmyApiResponse] = useState("false");
+ const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
+
+ const random1 = Math.floor(Math.random() * 10);
+ const random2 = Math.floor(Math.random() * 10);
+
+ const [closepopup, setclosepopup] = useState(0);
+ const { obj, objid } = useParams();
+ const [menucompte, setmenucompte] = useState("partner");
+ const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
+ const [typecompte, settypecompte] = useState("partner");
+
+ const {
+ register,
+ formState: { errors },
+ handleSubmit,
+ } = useForm();
+
+
+ const history = useHistory();
+
+ function logout_partner_confirmation() {
+ removeCookie_part('tokenmysypart', { path: '/' });
+ }
+
+ function retnull() {
+ setretval("-1");
+ }
+
+ function Logout_Partenaire() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion compte PRO',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => logout_partner_confirmation()
+ },
+
+ ]
+ });
+ }
+
+
+ function logout_user_confirmation() {
+ removeCookie_part('tokenmysych', { path: '/' });
+ }
+
+ function Logout_User() {
+ confirmAlert({
+ title: 'Deconnexion utilisateur ?',
+ message: 'Confirmez la deconnexion utilisateur',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => logout_user_confirmation()
+ },
+ /* {
+ label: 'Non',
+ onClick: () => retnull()
+
+ }*/
+ ]
+ });
+ }
+
+
+ const onSubmit = async (data) => {
+
+ //console.log(" CONNEXION DE = ",menucompte);
+ var partner_connexion = "";
+ var url_login = "";
+
+ if (String(menucompte) === "partner") {
+ url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/";
+ setmenucompte("partner");
+ partner_connexion = "partner";
+ }
+ else if (String(menucompte) === "user") {
+ url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
+ setmenucompte("user");
+ partner_connexion = "user";
+
+ }
+
+ // console.log( " ### full url_login = ", url_login)
+
+ // Gestion des Cookies
+ const stored_partner = cookie_part.tokenmysypart;
+ const stored_user = cookie.tokenmysych;
+
+ const formData = new FormData();
+ var mymail = document.getElementsByName("email")[0].value;
+
+
+ var mypwd = login_pwd; //document.getElementsByName("pwd")[0].value;
+
+ formData.append("email", mymail);
+ formData.append("pwd", mypwd);
+
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(mymail) === false) {
+ // alert("l'adresse email est incorrecte");
+ setdisplay_alert_mysy("1");
+ setalert_message("L'adresse email est incorrecte");
+ setalert_type("error");
+ return;
+ }
+
+ if (mypwd.length <= 0) {
+ // alert("Vous n'avez pas saisi de mot de passe");
+ setdisplay_alert_mysy("1");
+ setalert_message("Vous n'avez pas saisi de mot de passe");
+ setalert_type("error");
+ return;
+ }
+
+
+ // si c'est une connexion partner qui est active
+ if (typeof (stored_partner) != "undefined" && String(stored_partner) !== String('')) {
+ //alert(" c'est une connexion PARTTT qui est active");
+ Logout_Partenaire();
+
+ }
+
+ // si c'est une connexion user qui est active
+ if (typeof (stored_user) != "undefined" && String(stored_user) !== String('')) {
+ //alert(" c'est une connexion USERR qui est active");
+ Logout_User();
+ }
+
+
+ fetch(
+ url_login,
+ {
+ method: 'POST',
+ body: formData,
+ }
+ ).then((response) => response.json())
+ .then((result) => {
+ //console.log('Success:', result['message'], "result['status'] = ", result['status']);
+
+ var val = result['status'];
+
+ if (String(val) === String("true")) {
+
+ if (String(partner_connexion) === String("partner")) {
+
+ // recuperation et stockage des cookies sur les droit d'acces
+ setCookie("tokenmysypart", JSON.parse(result['message']).token, { path: '/' });
+
+ var acces_right_token_name = String(JSON.parse(result['message']).token) + "_uar";
+ var acces_right_token_val = JSON.parse(result['message']).user_access_right;
+
+
+ setCookie_acces_right(acces_right_token_name, acces_right_token_val, { path: '/' });
+
+ // recuperation et stockage des cookie sur les paramettres de connexion
+ var returned_connexion_data = JSON.parse(result['message'])
+ if (returned_connexion_data.list_connexion_context) {
+
+ const new_data = returned_connexion_data.list_connexion_context.map((x) => {
+ // recuperation et stockage des cookies sur les droit d'acces
+ if (x['code'] && x['code_value']) {
+ setCookie(String(x['code']), String(x['code_value']), { path: '/' });
+ }
+
+ });
+ }
+
+ //setCookie("tokenmysypart", result['message']);
+ history.push("/Partner");
+
+ }
+
+ else if (String(partner_connexion) === String("user")) {
+ setCookie("tokenmysych", result['message']);
+
+
+
+ // Verification vers quelle page les renvoyer
+ if (obj === "training" && String(objid).length > 0) {
+ // redirection vers l'affichage d'une formation
+ history.push("/Display-Detail-formation/" + objid);
+ }
+ else {
+ // Redirection par defaut vers la compte utilisateur
+ history.push({
+ pathname: "/mysy-user-account",
+ state: {
+ firstconnexion: String(result['firstconnexion'])
+ }
+ });
+
+
+ }
+ }
+ }
+ else {
+ setisconnected("false");
+ // setmyApimyApiMessage(result['message']);
+ setdisplay_alert_mysy("1");
+ setalert_message(result['message']);
+ setalert_type("error");
+ }
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ setisconnected("false");
+ //setmyApimyApiMessage("Le service est momentanément indisponible, merci de ressayer plus tard. ");
+ setdisplay_alert_mysy("1");
+ setalert_message("Le service est momentanément indisponible, merci de ressayer plus tard.");
+ setalert_type("error");
+
+ });
+ }
+
+ const location = useLocation();
+
+ useEffect(() => {
+ setmenucompte("partner");
+
+ const listener = event => {
+ if (event.code === "Enter" || event.code === "NumpadEnter") {
+
+ event.preventDefault();
+
+ onSubmit();
+ }
+ };
+ document.addEventListener("keydown", listener);
+
+ if (String(menucompte) === String("user")) {
+ menu_user_account();
+ }
+ else {
+ menu_parter_account();
+ }
+
+ if (location && location.state && location.state.mysy_arg && String(location.state.mysy_arg) === "partner") {
+ menu_parter_account();
+ }
+
+
+ }, []);
+
+
+
+ function menu_parter_account() {
+ //alert(" menu_parter_account = "+String(menucompte));
+ setmenucompte("partner");
+
+ if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
+ document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A";
+
+ if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
+ document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff";
+
+
+ }
+
+ function menu_user_account() {
+
+ setmenucompte("user");
+
+ if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
+ document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A";
+
+ if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
+ document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff";
+ }
+
+
+ function resetpasswd_ok(e) {
+
+ // Controle du mail
+ var mymail = reset_login_email;
+ //alert(" le mail de reset = "+mymail);
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(mymail) === false) {
+ // alert("l'adresse email est incorrecte");
+ document.getElementsByName("zoneemail")[0].style.border = "1px solid red";
+ var txt = "L'adresse email est incorrecte"
+
+ setdisplay_alert_mysy("1");
+ setalert_message(txt);
+ setalert_type("error");
+
+ return;
+ }
+
+
+ var total = " ?? ";
+ if (document.getElementsByName("sommerandom")[0].value) {
+ total = document.getElementsByName("sommerandom")[0].value;
+ }
+
+ var calcul_total = parseInt(random1) + parseInt(random2);
+
+ // console.log("### total = ", total);
+
+ if (parseInt(total) != parseInt(calcul_total)) {
+ document.getElementsByName("pasrobot")[0].style.border = "1px solid red";
+
+ // alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");
+
+ var txt = "Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!"
+ // alert(res.data.message);
+ setdisplay_alert_mysy("1");
+ setalert_message(txt);
+ setalert_type("error");
+
+ return;
+ }
+
+
+
+ var form = new FormData();
+
+ form.append("email", mymail);
+ form.append("account_type", typecompte);
+
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/InitUserPasswd/";
+
+ //alert("myurl = "+myurl);
+ axios.post(myurl, form).then(res => {
+ setclosepopup(1);
+ setinitpasswd("true");
+ if (String(res.data.status) != String("false")) {
+ setmyApiResponse("true");
+ setResult(res.data.message);
+ // alert(res.data.message);
+ setdisplay_alert_mysy("1");
+ setalert_message(res.data.message);
+ setalert_type("success");
+ Dialog_reset_pwd_open_handleClose();
+
+ }
+ else {
+
+ setmyApiResponse("false");
+ setResult(res.data.message);
+ // alert(res.data.message);
+ setdisplay_alert_mysy("1");
+ setalert_message(res.data.message);
+ setalert_type("error");
+
+ }
+
+
+ }).catch((error) => {
+ console.warn('Not good man :( mysearchtext = ', error);
+ setmyApiResponse("false");
+ setinitpasswd("false");
+ //setmyApimyApiMessage("")
+
+ // alert(res.data.message);
+ var txt = " Impossible de prendre en compte la demande de réinitialisation"
+ setdisplay_alert_mysy("1");
+ setalert_message(txt);
+ setalert_type("error");
+
+ })
+
+
+ }
+
+ function resetpasswd(e) {
+ confirmAlert({
+ title: 'Reinitialisation Mot de Passe?',
+ message: 'Confirmez la reinitialisation',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => resetpasswd_ok()
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+
+ },
+
+ ],
+ closeOnEscape: false,
+ closeOnClickOutside: false,
+ keyCodeForClose: [8, 32],
+ willUnmount: () => { },
+ afterClose: () => { },
+ onClickOutside: () => { },
+ onKeypress: () => { },
+ onKeypressEscape: () => { },
+ });
+
+ }
+ const [PartnerMenu, setPartnerMenu] = React.useState(null);
+ const [AccountMenu, setAccountMenu] = React.useState(null);
+
+
+
+ // Cette fonction permet de cacher le mot de passer et eviter les
+ // autocompletion
+ const [realpwdvalue, setrealpwdvalue] = useState("");
+ const [realpwdhidenvalue, setrealpwdhidenvalue] = useState("");
+ function realpwd(e) {
+ const val = e.target.value;
+ const last = val.charAt(val.length - 1);
+ var new_val = realpwdvalue;
+ var new_val_hiden = realpwdhidenvalue;
+
+ //alert(" new_val avant saisie= "+new_val);
+ new_val = new_val + last;
+ new_val_hiden = new_val_hiden + "*";
+
+ //alert(" - new_val apres sisie = "+new_val+" new_val_hiden = "+new_val_hiden);
+ setrealpwdhidenvalue(new_val_hiden);
+ setrealpwdvalue(new_val);
+
+ //setrealpwdvalue(val);
+ //document.getElementById("cle_secrete").value = new_val_hiden;
+
+ }
+
+ /* function displayvlaue(){
+ alert(" la valeur secrete = "+realpwdvalue);
+ }*/
+
+
+ const handleClickShowPassword_desktop = () => {
+ if (currentpawdvisible == false) {
+ document.getElementsByName("pwd_desktop")[0].type = "text";
+ setcurrentpawdvisible(true);
+
+ }
+ else if (currentpawdvisible == true) {
+ document.getElementsByName("pwd_desktop")[0].type = "password";
+ setcurrentpawdvisible(false);
+
+ }
+ };
+
+ const handleClickShowPassword_mobile = () => {
+ if (currentpawdvisible == false) {
+ document.getElementsByName("pwd_mobile")[0].type = "text";
+ setcurrentpawdvisible(true);
+
+ }
+ else if (currentpawdvisible == true) {
+ document.getElementsByName("pwd_mobile")[0].type = "password";
+ setcurrentpawdvisible(false);
+
+ }
+ };
+
+ const [login_email, setlogin_email] = useState("");
+ const [login_pwd, setlogin_pwd] = useState("");
+
+
+ const [reset_login_email, setreset_login_email] = useState("");
+ const [reset_somme_random, setreset_somme_random] = useState("");
+
+ const [Dialog_reset_pwd_open, setDialog_reset_pwd_open] = React.useState(false);
+ const Dialog_reset_pwd_open_handleClose = () => {
+
+ setDialog_reset_pwd_open(false)
+ setreset_login_email("");
+
+ };
+
+
+ const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+ const [alert_message, setalert_message] = useState("");
+ const [alert_type, setalert_type] = useState("");
+
+ function clear_alert_message() {
+ setalert_message("");
+ }
+ function clear_alert_type() {
+ setalert_type("");
+ }
+
+ function clear_display_alert_mysy() {
+ setdisplay_alert_mysy("");
+ }
+
+
+ return (
+
+
+ {/*** Affichage des messages d'alerte*/}
+ {display_alert_mysy && String(display_alert_mysy) === "1" &&
+
+ }
+ {/*** FIN Affichage des messages d'alerte*/}
+
+ {/*** GESTION RESET PWD */}
+
null}
+
+ PaperProps={{
+
+
+ className: classes.paper, // Apply the paper style
+ style: {
+ overflowY: 'unset',
+ position: 'absolute',
+ top: '5rem',
+ margin: "2px",
+ },
+ }}
+ hideBackdrop={true}
+ disableScrollLock
+ classes={{
+ paper: classes.dialog
+ }}
+
+ PaperComponent={PaperComponent}
+ aria-labelledby="draggable-dialog-title"
+
+ >
+ Réinitialiser votre mot de passe
+
+
+
+
+ Votre email
+ {
+ setreset_login_email(e.target.value);
+ }
+ }
+ placeholder="Votre email"
+ />
+
+
+
+
+
+
+ Je ne suis un robot : {random1} + {random2} =
+ {
+ setreset_somme_random(e.target.value);
+ }
+ }*/
+ placeholder="Calculez la sommes des valeurs"
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Envoyer
+
+
+
+ Annuler
+
+
+
+
+
+
+
+
+ {/*** FIN GESTION RESET PWD */}
+
+
+
+ Connexion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setlogin_email(event.target.value);
+
+ }}
+
+ />
+
+
+ {
+ setlogin_pwd(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {currentpawdvisible ? : }
+
+
+
+
+
+
+
{
+ setDialog_reset_pwd_open(true);
+ }}>
+ Mot de passe oublié ?
+
+
+
+
+
+
+
+
+
+
+
+
+
Vous n'avez pas de compte ?
+
{
+ history.push("/new_signup");
+ }}>Créez un compte
+
+
+
+
+
+
+
+
+
+
+
TRAINING
+
+
+
+
{
+ history.push("/");
+ }}>Retour à l'accueil
+
+
+
+
+
+
+
{window.location.host}
+
+
+
+
+
+
+
+
+
+
{
+ history.push("/");
+ }}>Retour à l'accueil
+
+
+
+
+
+
+
+ {
+ setlogin_email(event.target.value);
+
+ }}
+
+ />
+
+
+
+ {
+ setlogin_pwd(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+
+
+
+ {currentpawdvisible ? : }
+
+
+
+
+
+
{
+ setDialog_reset_pwd_open(true);
+ }}>
+ Mot de passe oublié ?
+
+
+
+
+
+
+
+
+
+
+
Vous n'avez pas de compte ?
+
{
+ history.push("/new_signup");
+ }}>Créez un compte
+
+
+
+
+
+
+
+
+
+
+
TRAINING
+
+
+
+
+
+
+ );
+}
+
+export default New_C_Sign_In_2025;
diff --git a/src/components/New_C_Sign_Up_2025.js b/src/components/New_C_Sign_Up_2025.js
new file mode 100644
index 0000000..d91be62
--- /dev/null
+++ b/src/components/New_C_Sign_Up_2025.js
@@ -0,0 +1,1666 @@
+import React, { useState, useEffect } from "react";
+import { Helmet } from "react-helmet";
+import { useForm } from "react-hook-form";
+import { useHistory } from "react-router-dom";
+import { Button, FormGroup, Label, Input } from "reactstrap";
+
+
+import { useCookies } from "react-cookie";
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+
+import 'reactjs-popup/dist/index.css';
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+import { FcInfo } from "react-icons/fc";
+
+import { useLocation } from "react-router-dom";
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import 'react-tooltip/dist/react-tooltip.css'
+
+import TextField from '@mui/material/TextField';
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { IconButton } from '@material-ui/core';
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import 'react-tooltip/dist/react-tooltip.css'
+import { Tooltip } from 'react-tooltip'
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+
+import Sign_In_Logo_MySy_SVG from '../img_new_design_2025/Logo_MySy.svg';
+import Sign_In_Line_Arrow_Left_SVG from '../img_new_design_2025/line-arrow-left.svg';
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+
+function New_C_Sign_Up_2025() {
+
+ const classes = useStyles();
+ const [isconnected, setisconnected] = useState("");
+ const [cookie_acces_right, setCookie_acces_right, removeCookie_acces_right] = useCookies(['mysy_user_access_right']);
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' });
+ const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart'], { path: '/' });
+ const [retval, setretval] = useState("0");
+ const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
+ const [initpasswd, setinitpasswd] = useState();
+ const [result, setResult] = useState("");
+ const [myApiResponse, setmyApiResponse] = useState("false");
+ const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
+
+ const random1 = Math.floor(Math.random() * 10);
+ const random2 = Math.floor(Math.random() * 10);
+
+ const [closepopup, setclosepopup] = useState(0);
+ const { obj, objid } = useParams();
+ const [menucompte, setmenucompte] = useState("partner");
+ const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
+ const [typecompte, settypecompte] = useState("partner");
+
+ const {
+ register,
+ formState: { errors },
+ handleSubmit,
+ } = useForm();
+
+
+ const history = useHistory();
+
+ function logout_partner_confirmation() {
+ removeCookie_part('tokenmysypart', { path: '/' });
+ }
+
+ function retnull() {
+ setretval("-1");
+ }
+
+ function Logout_Partenaire() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion compte PRO',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => logout_partner_confirmation()
+ },
+
+ ]
+ });
+ }
+
+
+ function logout_user_confirmation() {
+ removeCookie_part('tokenmysych', { path: '/' });
+ }
+
+ function Logout_User() {
+ confirmAlert({
+ title: 'Deconnexion utilisateur ?',
+ message: 'Confirmez la deconnexion utilisateur',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => logout_user_confirmation()
+ },
+ /* {
+ label: 'Non',
+ onClick: () => retnull()
+
+ }*/
+ ]
+ });
+ }
+
+ const onSubmit = async (data) => {
+
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+
+ const formData = new FormData();
+
+
+ document.getElementsByName("raison_sociale")[0].style.border = "1px solid white";
+ if (!document.getElementsByName("raison_sociale")[0] || document.getElementsByName("raison_sociale")[0].value.length < 3) {
+ document.getElementsByName("raison_sociale")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message("La raison sociale de la société doit faire au moins 3 caractère ");
+ setalert_type("error");
+
+ // alert("La raison sociale du contact principal est incorrecte");
+ return
+ }
+
+ document.getElementsByName("telephone")[0].style.border = "1px solid white";
+ if (!document.getElementsByName("telephone")[0] || document.getElementsByName("telephone")[0].value.length <= 8) {
+ document.getElementsByName("telephone")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message("Le téléphone de l'entreprise doit faire au moins 10 chiffres");
+ setalert_type("error");
+
+ // alert("Le téléphone du contact principal est incorrect ");
+ return
+ }
+
+
+
+
+
+ var mymail = document.getElementsByName("email")[0].value;
+ var re = /\S+@\S+\.\S+/;
+ document.getElementsByName("email")[0].style.border = "1px solid white";
+ if (re.test(mymail) === false) {
+ document.getElementsByName("email")[0].style.border = "1px solid red";
+ //alert("Votre adresse email est incorrecte");
+ setdisplay_alert_mysy("1");
+ setalert_message("L'adresse email de l'entreprise est incorrecte");
+ setalert_type("error");
+ return;
+ }
+
+
+
+ var new_pwd = document.getElementsByName("new_pwd")[0].value;
+ var conf_new_pwd = document.getElementsByName("new_pwd_conf")[0].value;
+
+ document.getElementsByName("new_pwd")[0].style.border = "1px solid white";
+ document.getElementsByName("new_pwd_conf")[0].style.border = "1px solid white";
+
+
+ if (new_pwd.length < 8) {
+ //alert("Le mot de passe doit faire au moins 8 caractères ");
+
+ document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message("Le mot de passe doit faire au moins 8 caractères ");
+ setalert_type("error");
+ return;
+ }
+
+
+ if (new_pwd !== conf_new_pwd) {
+
+ document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
+ document.getElementsByName("new_pwd_conf")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message(" Les mots de passe ne sont pas identiques");
+ setalert_type("error");
+ return
+ }
+
+
+ if (String(new_pwd).length < 8) {
+ document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
+ document.getElementsByName("caractere")[0].style.border = "1px solid red";
+ setdisplay_alert_mysy("1");
+ setalert_message(" Le mot de passe doit faire au moins 8 caractères");
+ setalert_type("error");
+ return
+ }
+
+ var regex = /\d/g;
+ if (!regex.test(new_pwd)) {
+ document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
+ setdisplay_alert_mysy("1");
+ setalert_message(" Le mot de passe doit contenir au un chiffre au moins");
+ setalert_type("error");
+ return
+ }
+
+ const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
+
+ if (!specialChars.test(new_pwd)) {
+ document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
+ setdisplay_alert_mysy("1");
+ setalert_message(" Le mot de passe doit contenir au un caractère spécial au moins");
+ setalert_type("error");
+ return
+ }
+
+
+ var mymail = document.getElementsByName("email")[0].value;
+ var contact_nom = "";
+ var contact_prenom = "";
+ var contact_mail = "";
+ var contact_tel = "";
+
+ var raison_sociale = "";
+ var telephone = "";
+
+
+ var url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
+ if (String(menucompte) === String("partner")) {
+
+ // Verification des champs obligatoires
+ document.getElementsByName("contact_nom")[0].style.border = "1px solid white";
+ if (!document.getElementsByName("contact_nom")[0] || document.getElementsByName("contact_nom")[0].value.length <= 1) {
+ document.getElementsByName("contact_nom")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message(" Le nom du contact principal est incorrect ");
+ setalert_type("error");
+
+ // alert("Le nom du contact principal est incorrect ");
+ return
+ }
+
+ document.getElementsByName("contact_prenom")[0].style.border = "1px solid white";
+ if (!document.getElementsByName("contact_prenom")[0] || document.getElementsByName("contact_prenom")[0].value.length <= 1) {
+ document.getElementsByName("contact_prenom")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message(" Le prenom du contact principal est incorrect ");
+ setalert_type("error");
+
+ // alert("Le prenom du contact principal est incorrect ");
+ return
+ }
+
+ document.getElementsByName("contact_email")[0].style.border = "1px solid white";
+ if (!document.getElementsByName("contact_email")[0] || document.getElementsByName("contact_email")[0].value.length <= 1) {
+ document.getElementsByName("contact_email")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message("L'email du contact principal est incorrect ");
+ setalert_type("error");
+
+ // alert("L'email du contact principal est incorrect ");
+ return
+ }
+ var re2 = /\S+@\S+\.\S+/;
+ if (re2.test(document.getElementsByName("contact_email")[0].value) === false) {
+ setdisplay_alert_mysy("1");
+ setalert_message(" L'email du contact principal est incorrect ");
+ setalert_type("error");
+
+ // alert("L'email du contact principal est incorrect ");
+ document.getElementsByName("contact_email")[0].style.border = "1px solid red";
+ return;
+ }
+
+
+ document.getElementsByName("contact_telephone")[0].style.border = "1px solid white";
+ if (!document.getElementsByName("contact_telephone")[0] || document.getElementsByName("contact_telephone")[0].value.length <= 8) {
+ document.getElementsByName("contact_telephone")[0].style.border = "1px solid red";
+
+ setdisplay_alert_mysy("1");
+ setalert_message("Le téléphone du contact principal doit faire au moins 10 chiffres");
+ setalert_type("error");
+
+ // alert("Le téléphone du contact principal est incorrect ");
+ return
+ }
+
+
+ document.getElementsByName("pasrobot")[0].style.border = "1px solid white";
+ var total = " ?? ";
+ if (document.getElementsByName("sommerandom")[0].value) {
+ total = document.getElementsByName("sommerandom")[0].value;
+ }
+
+ var calcaul_total = parseInt(random1) + parseInt(random2);
+ if (parseInt(total) != parseInt(calcaul_total)) {
+ document.getElementsByName("pasrobot")[0].style.border = "1px solid white";
+ setdisplay_alert_mysy("1");
+ setalert_message(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");
+ setalert_type("error");
+
+ //alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");
+
+ return;
+ }
+
+
+
+ contact_nom = document.getElementsByName("contact_nom")[0].value;
+ contact_prenom = document.getElementsByName("contact_prenom")[0].value;
+ contact_mail = document.getElementsByName("contact_email")[0].value;
+ contact_tel = document.getElementsByName("contact_telephone")[0].value;
+ raison_sociale = document.getElementsByName("raison_sociale")[0].value;
+ telephone = document.getElementsByName("telephone")[0].value;
+
+ formData.append("nom", raison_sociale);
+
+ var new_nom = (raison_sociale).replace(/[^0-9a-z]/gi, '').toLocaleLowerCase();
+ formData.append('subdomaine_catalog_pub', new_nom);
+
+ formData.append("telephone", telephone);
+ formData.append("contact_nom", contact_nom);
+ formData.append("contact_prenom", contact_prenom);
+ formData.append("contact_tel", contact_tel);
+ formData.append("contact_mail", contact_mail);
+
+ url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_partner_account/";
+ }
+
+ if (!document.getElementsByName("cgu")[0].checked) {
+ // alert(" Vous devez accepter les conditions générales d'utilisation du site. Merci.");
+
+ setdisplay_alert_mysy("1");
+ setalert_message("Vous devez accepter les conditions générales d'utilisation du site. Merci. ");
+ setalert_type("error");
+
+
+ document.getElementsByName("cgu")[0].style.backgroundColor = "red";
+ return;
+ }
+ formData.append("email", mymail);
+ formData.append("pwd", new_pwd);
+
+
+ fetch(
+ url_sign_up,
+ {
+ method: 'POST',
+ body: formData,
+ }
+ ).then((response) => response.json())
+ .then((result) => {
+ //console.log('Success:', result['message'], "result['status'] = ", result['status']);
+
+ if (String(result['status']) == String("true")) {
+ alert(String(result['message']));
+ setisconnected("true");
+ setmyApimyApiMessage(result['message']);
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+ if (String(menucompte) === String("user")) {
+ history.push("/Connexion-utilisateur-0");
+ }
+ else if (String(menucompte) === String("partner")) {
+ history.push("/PartnerLogin0");
+ }
+ }
+ else {
+ //alert(" GRR "+String(result['message']+ " result['status'] = "+ result['status']));
+ setisconnected("false");
+ //setmyApimyApiMessage(result['message']);
+
+ setdisplay_alert_mysy("1");
+ setalert_message(result['message']);
+ setalert_type("error");
+
+ }
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ setisconnected("false");
+
+ setdisplay_alert_mysy("1");
+ setalert_message("Le service est momentanémentindisponible, merci de ressayer plus tard. ");
+ setalert_type("error");
+
+
+ // setmyApimyApiMessage("Le service est momentanémentindisponible, merci de ressayer plus tard. ");
+
+ });
+
+ };
+
+
+
+ const handleMouseDownPassword = (event) => {
+ event.preventDefault();
+ };
+
+
+ const location = useLocation();
+
+ useEffect(() => {
+
+ setmenucompte("partner");
+
+ const listener = event => {
+ if (event.code === "Enter" || event.code === "NumpadEnter") {
+ event.preventDefault();
+ onSubmit();
+ }
+
+ };
+ document.addEventListener("keydown", listener);
+ //menu_user_account();
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+ if (String(menucompte) === String("user")) {
+ menu_user_account()
+ }
+ else {
+ menu_parter_account();
+ }
+
+
+ }, []);
+
+
+
+ function menu_parter_account() {
+ //alert(" menu_parter_account = "+String(menucompte));
+ setmenucompte("partner");
+
+ if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
+ document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A";
+
+ if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
+ document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff";
+
+
+ }
+
+ function menu_user_account() {
+
+ setmenucompte("user");
+
+ if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
+ document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A";
+
+ if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
+ document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff";
+ }
+
+
+ function resetpasswd_ok(e) {
+
+ // Controle du mail
+ var mymail = reset_login_email;
+ //alert(" le mail de reset = "+mymail);
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(mymail) === false) {
+ // alert("l'adresse email est incorrecte");
+ document.getElementsByName("zoneemail")[0].style.border = "1px solid red";
+ var txt = "L'adresse email est incorrecte"
+
+ setdisplay_alert_mysy("1");
+ setalert_message(txt);
+ setalert_type("error");
+
+ return;
+ }
+
+
+ var total = " ?? ";
+ if (document.getElementsByName("sommerandom")[0].value) {
+ total = document.getElementsByName("sommerandom")[0].value;
+ }
+
+ var calcul_total = parseInt(random1) + parseInt(random2);
+
+ if (parseInt(total) != parseInt(calcul_total)) {
+ document.getElementsByName("pasrobot")[0].style.border = "1px solid red";
+
+ // alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");
+
+ var txt = "Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!"
+ // alert(res.data.message);
+ setdisplay_alert_mysy("1");
+ setalert_message(txt);
+ setalert_type("error");
+
+ return;
+ }
+
+ var form = new FormData();
+
+ form.append("email", mymail);
+ form.append("account_type", typecompte);
+
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/InitUserPasswd/";
+
+ //alert("myurl = "+myurl);
+ axios.post(myurl, form).then(res => {
+ setclosepopup(1);
+ setinitpasswd("true");
+ if (String(res.data.status) != String("false")) {
+ setmyApiResponse("true");
+ setResult(res.data.message);
+ // alert(res.data.message);
+ setdisplay_alert_mysy("1");
+ setalert_message(res.data.message);
+ setalert_type("success");
+ Dialog_reset_pwd_open_handleClose();
+
+ }
+ else {
+
+ setmyApiResponse("false");
+ setResult(res.data.message);
+ // alert(res.data.message);
+ setdisplay_alert_mysy("1");
+ setalert_message(res.data.message);
+ setalert_type("error");
+
+ }
+
+
+ }).catch((error) => {
+ console.warn('Not good man :( mysearchtext = ', error);
+ setmyApiResponse("false");
+ setinitpasswd("false");
+ //setmyApimyApiMessage("")
+
+ // alert(res.data.message);
+ var txt = " Impossible de prendre en compte la demande de réinitialisation"
+ setdisplay_alert_mysy("1");
+ setalert_message(txt);
+ setalert_type("error");
+
+ })
+
+
+ }
+
+
+ // Cette fonction permet de cacher le mot de passer et eviter les
+ // autocompletion
+ const [realpwdvalue, setrealpwdvalue] = useState("");
+ const [realpwdhidenvalue, setrealpwdhidenvalue] = useState("");
+ function realpwd(e) {
+ const val = e.target.value;
+ const last = val.charAt(val.length - 1);
+ var new_val = realpwdvalue;
+ var new_val_hiden = realpwdhidenvalue;
+
+ //alert(" new_val avant saisie= "+new_val);
+ new_val = new_val + last;
+ new_val_hiden = new_val_hiden + "*";
+
+ //alert(" - new_val apres sisie = "+new_val+" new_val_hiden = "+new_val_hiden);
+ setrealpwdhidenvalue(new_val_hiden);
+ setrealpwdvalue(new_val);
+
+ //setrealpwdvalue(val);
+ //document.getElementById("cle_secrete").value = new_val_hiden;
+
+ }
+
+ /* function displayvlaue(){
+ alert(" la valeur secrete = "+realpwdvalue);
+ }*/
+
+
+ const handleClickShowPassword = () => {
+ if (currentpawdvisible == false) {
+ document.getElementsByName("new_pwd")[0].type = "text";
+ document.getElementsByName("new_pwd_conf")[0].type = "text";
+ setcurrentpawdvisible(true);
+ }
+ else if (currentpawdvisible == true) {
+ document.getElementsByName("new_pwd")[0].type = "password";
+ document.getElementsByName("new_pwd_conf")[0].type = "password";
+ setcurrentpawdvisible(false);
+ }
+ };
+
+ const [login_email, setlogin_email] = useState("");
+ const [login_pwd, setlogin_pwd] = useState("");
+
+ const [compte_raison_sociale, setcompte_raison_sociale] = useState("");
+ const [compte_telephone, setcompte_telephone] = useState("");
+ const [compte_email, setcompte_email] = useState("");
+ const [compte_pwd, setcompte_pwd] = useState("");
+ const [compte_repwd, setcompte_repwd] = useState("");
+
+ const [contact_nom, setcontact_nom] = useState("");
+ const [contact_prenom, setcontact_prenom] = useState("");
+ const [contact_email, setcontact_email] = useState("");
+ const [contact_phone, setcontact_phone] = useState("");
+
+
+
+
+ const [reset_login_email, setreset_login_email] = useState("");
+ const [reset_somme_random, setreset_somme_random] = useState("");
+
+ const [Dialog_reset_pwd_open, setDialog_reset_pwd_open] = React.useState(false);
+ const Dialog_reset_pwd_open_handleClose = () => {
+
+ setDialog_reset_pwd_open(false)
+ setreset_login_email("");
+
+ };
+
+
+ const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+ const [alert_message, setalert_message] = useState("");
+ const [alert_type, setalert_type] = useState("");
+
+ function clear_alert_message() {
+ setalert_message("");
+ }
+ function clear_alert_type() {
+ setalert_type("");
+ }
+
+ function clear_display_alert_mysy() {
+ setdisplay_alert_mysy("");
+ }
+
+
+ return (
+
+
+ {/*** Affichage des messages d'alerte*/}
+ {display_alert_mysy && String(display_alert_mysy) === "1" &&
+
+ }
+ {/*** FIN Affichage des messages d'alerte*/}
+
+ {/*** GESTION RESET PWD */}
+
null}
+
+ PaperProps={{
+
+
+ className: classes.paper, // Apply the paper style
+ style: {
+ overflowY: 'unset',
+ position: 'absolute',
+ top: '5rem',
+ margin: "2px",
+ },
+ }}
+ hideBackdrop={true}
+ disableScrollLock
+ classes={{
+ paper: classes.dialog
+ }}
+
+ PaperComponent={PaperComponent}
+ aria-labelledby="draggable-dialog-title"
+
+ >
+ Réinitialiser votre mot de passe
+
+
+
+
+ Votre email
+ {
+ setreset_login_email(e.target.value);
+ }
+ }
+ placeholder="Votre email"
+ />
+
+
+
+
+
+
+ Je ne suis un robot : {random1} + {random2} =
+ {
+ setreset_somme_random(e.target.value);
+ }
+ }*/
+ placeholder="Calculez la sommes des valeurs"
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Envoyer
+
+
+
+ Annuler
+
+
+
+
+
+
+
+
+ {/*** FIN GESTION RESET PWD */}
+
+
+
+ Connexion
+
+
+
+
+
+
+
+
+
+
+
+
Création de compte
+
+
+
+
+
+ {
+ setcompte_raison_sociale(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcompte_telephone(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+ {
+ setcompte_email(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcompte_pwd(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+
+
+ {
+ setcompte_repwd(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+
+
+
+
+ {currentpawdvisible ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
Contact Principal
+
+
+ {
+ setcontact_nom(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcontact_prenom(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+ {
+ setcontact_email(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcontact_phone(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Vous avez déjà un compte ?
+
{
+ history.push("/new_signin");
+ }}>Connectez-vous
+
+
+
+
+
+
+
+
+
+
+
TRAINING
+
+
+
+
{
+ history.push("/");
+ }}>Retour à l'accueil
+
+
+
+
+
+
+
{window.location.host}
+
+
+
+
+
+
+
+
+
+
+
+
{
+ history.push("/");
+ }}>Retour à l'accueil
+
+
+
+
+
+
+
+ {
+ setcompte_raison_sociale(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcompte_telephone(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+ {
+ setcompte_email(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcompte_pwd(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+
+
+ {
+ setcompte_repwd(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+
+
+
+
+ {currentpawdvisible ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
Contact Principal
+
+
+ {
+ setcontact_nom(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcontact_prenom(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+ {
+ setcontact_email(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+ {
+ setcontact_phone(event.target.value);
+
+ }}
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Vous avez déjà un compte ?
+
{
+ history.push("/new_signin");
+ }}>Connectez-vous
+
+
+
+
+
+
+
+
+
+
+
TRAINING
+
+
+
+
+
+ );
+}
+
+export default New_C_Sign_Up_2025;
+
diff --git a/src/components/New_Navigation_2025.js b/src/components/New_Navigation_2025.js
new file mode 100644
index 0000000..0a6b70f
--- /dev/null
+++ b/src/components/New_Navigation_2025.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { getCookie, } from 'react-use-cookie';
+import { useHistory } from "react-router-dom";
+
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+import New_SideBar_2025 from "./New_Sidebar_2025";
+import { useCookies } from "react-cookie";
+import New_ButtonHilight_2025 from "./New_ButtonHilight_2025";
+
+const New_Navigation_2025 = () => {
+
+ const history = useHistory();
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+ const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
+
+ return (
+
+
+
+ )
+}
+
+
+export default New_Navigation_2025;
\ No newline at end of file
diff --git a/src/components/New_Sidebar_2025.js b/src/components/New_Sidebar_2025.js
new file mode 100644
index 0000000..202e037
--- /dev/null
+++ b/src/components/New_Sidebar_2025.js
@@ -0,0 +1,369 @@
+import React, { useState, useEffect } from 'react';
+import { slide as Menu } from "react-burger-menu";
+import { NavLink } from "react-router-dom";
+import { getCookie } from 'react-use-cookie';
+import { useHistory } from "react-router-dom";
+
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import Button from '@mui/material/Button';
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+import { useCookies } from "react-cookie";
+
+
+
+const New_SideBar_2025 = () => {
+ const stored_cookie = getCookie('tokenmysych');
+ const history = useHistory();
+
+
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+ const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
+ // Gestion des Cookies
+ const stored_partner = cookie_part.tokenmysypart;
+ const stored_user = cookie.tokenmysych;
+
+ const environnment = process.env.REACT_APP_ENV
+
+
+
+ function logout_confirmation() {
+
+ // si c'est une connexion partner qui est active
+ if (typeof (stored_partner) !== "undefined") {
+ //alert(" c'est une connexion PARTTT qui est active");
+ removeCookie_part('tokenmysypart', { path: '/' });
+ history.push("/Connexion");
+ }
+
+ // si c'est une connexion user qui est active
+ if (typeof (stored_user) !== "undefined") {
+ //alert(" c'est une connexion USERR qui est active");
+ removeCookie_part('tokenmysych', { path: '/' });
+ history.push("/intranet");
+ }
+ }
+
+
+ function logout() {
+ confirmAlert({
+ title: 'Deconnexion ?',
+ message: 'Confirmez la deconnexion',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => logout_confirmation()
+ },
+ {
+ label: 'Non',
+
+ }
+ ],
+ closeOnEscape: false,
+ closeOnClickOutside: false,
+ keyCodeForClose: [8, 32],
+ willUnmount: () => { },
+ afterClose: () => { },
+ onClickOutside: () => { },
+ onKeypress: () => { },
+ onKeypressEscape: () => { },
+ overlayClassName: "overlay-custom-class-name"
+ });
+ }
+
+ const [someoneconnected, setsomeoneconnected] = useState("0");
+ const [partnerconnected, setpartnerconnected] = useState("0");
+ const [userconnected, setuserconnected] = useState("0");
+
+ const stored_part = getCookie('tokenmysypart');
+
+
+ function whosisconnected() {
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ setsomeoneconnected("1");
+ local_user_connect = 1;
+ //alert(" user connected OK");
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+ setpartnerconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ setsomeoneconnected("1");
+ local_part_connect = 1;
+ //alert(" partner connected OK");
+ }
+ }
+
+ useEffect(() => {
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ setsomeoneconnected("1");
+ local_user_connect = 1;
+ //alert(" user connected OK");
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+ setpartnerconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ setsomeoneconnected("1");
+ local_part_connect = 1;
+ //alert(" partner connected OK");
+ }
+ }, []);
+
+ return (
+ // Pass on our props
+
+
+ {String(environnment) === "PROD" &&
+
+ {String(someoneconnected) !== String("1") &&
+ Connexion Utilisateur
+ }
+
+ {String(someoneconnected) !== String("1") &&
+ Créer compte
+ }
+
+
+ {String(someoneconnected) === String("1") &&
+ Mon compte
+ }
+
+
+ Recherche formation
+
+
+
+ A propos
+
+
+
+ Solution
+
+
+
+
+
+ Tarifs
+
+
+
+ Partenaires
+
+
+
+ Partenaire Login
+
+
+
+ Liste Articles
+
+
+
+
+ {typeof (stored_partner) !== "undefined" &&
+ /* Connexion partner active */
+
+ Deconnexion
+
+
+
+ }
+
+ {typeof (stored_user) != "undefined" &&
+ /* Connexion utilisateur active */
+ } sx={{ color: "white", background: "green", fontSize: 10 }} >
+ Deconnexion
+
+ }
+ }
+
+ {(String(environnment) === "REC" || String(environnment) === "DEM") &&
+
+ {String(someoneconnected) !== String("1") &&
+ Connexion Utilisateur
+ }
+
+ {String(someoneconnected) !== String("1") &&
+ Créer compte
+ }
+
+ {String(someoneconnected) === String("1") &&
+ Mon compte
+ }
+
+
+ Recherche formation
+
+
+
+ A propos
+
+
+
+
+ Solution
+
+
+
+ Tarifs
+
+
+
+ Partenaires
+
+
+
+ Partenaire Login
+
+
+
+ Liste Articles
+
+
+
+
+ {typeof (stored_partner) != "undefined" &&
+ /* Connexion partner active */
+
+ Deconnexion
+
+
+
+ }
+
+ {typeof (stored_user) != "undefined" &&
+ /* Connexion utilisateur active */
+ } sx={{ color: "white", background: "green", fontSize: 10 }} >
+ Deconnexion
+
+ }
+ }
+
+
+ {String(environnment) === "DEV" &&
+
+
+
+ DEV : someoneconnected = {String(someoneconnected)}
+
+
+
+ {String(someoneconnected) !== String("1") &&
+ Connexion Utilisateur
+ }
+
+ {String(someoneconnected) !== String("1") &&
+ Créer compte
+ }
+
+
+ {String(someoneconnected) === String("1") &&
+ Mon compte
+ }
+
+
+
+ Recherche formation
+
+
+
+ A propos
+
+
+
+ Solution
+
+
+
+
+ Tarifs
+
+
+
+ Detail Formation
+
+
+
+
+ Test url
+
+
+
+
+ Partenaire Login
+
+
+
+
+ Detail Articles
+
+
+
+
+ Liste Articles
+
+
+
+ Reset User Pwd
+
+
+
+ Delete User Accound
+
+
+
+ User Account Activated
+
+
+
+ {typeof (stored_partner) != "undefined" &&
+ /* Connexion partner active */
+
+ Deconnexion
+
+
+
+ }
+
+ {typeof (stored_user) != "undefined" &&
+ /* Connexion utilisateur active */
+ } sx={{ color: "white", background: "green", fontSize: 10 }} >
+ Deconnexion
+
+ }
+ }
+
+
+ );
+};
+
+
+export default New_SideBar_2025;
\ No newline at end of file
diff --git a/src/components/Partner.js b/src/components/Partner.js
index 7527cbd..c29e277 100644
--- a/src/components/Partner.js
+++ b/src/components/Partner.js
@@ -1694,10 +1694,7 @@ const Partner = (props) => {
-
-
-
-
+
{isLoading &&
@@ -3382,14 +3379,7 @@ const Partner = (props) => {
}
-
-
-
-
-
-
-
diff --git a/src/components/RechercheArticles_new_v2.js b/src/components/RechercheArticles_new_v2.js
index c884aef..6debc7e 100644
--- a/src/components/RechercheArticles_new_v2.js
+++ b/src/components/RechercheArticles_new_v2.js
@@ -1520,8 +1520,6 @@ const RechercheArticles_new_v2 = (props) => {
-
-
@@ -1677,14 +1675,7 @@ const RechercheArticles_new_v2 = (props) => {
-
-
-
-
-
-
-
)
}
diff --git a/src/components/article_automatic_files/article_card/BlogPostCard.js b/src/components/article_automatic_files/article_card/BlogPostCard.js
new file mode 100644
index 0000000..cb59ec6
--- /dev/null
+++ b/src/components/article_automatic_files/article_card/BlogPostCard.js
@@ -0,0 +1,91 @@
+import React from 'react';
+
+const BlogPostCard = ({
+ image = "https://dashboard.codeparrot.ai/api/image/Z5x57-xZjZ9DnCB5/image.png",
+ title = "How collaboration makes us better designers",
+ description = "Collaboration can make our teams stronger, and our individual designs better.",
+ arrowIcon = "https://dashboard.codeparrot.ai/api/image/Z5x57-xZjZ9DnCB5/arrow-up.png",
+ onClick = () => {}
+}) => {
+ const styles = {
+ container: {
+ width: '356px',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '32px',
+ cursor: 'pointer',
+ transition: 'transform 0.2s ease',
+ },
+ image: {
+ width: '356px',
+ height: '240px',
+ objectFit: 'cover',
+ },
+ content: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '24px',
+ },
+ headingContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '12px',
+ },
+ titleRow: {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '16px',
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ },
+ title: {
+ flex: 1,
+ fontSize: '24px',
+ lineHeight: '32px',
+ fontFamily: 'Inter, sans-serif',
+ fontWeight: 600,
+ color: '#16274f',
+ margin: 0,
+ },
+ iconWrap: {
+ padding: '4px 0 0 0',
+ },
+ icon: {
+ width: '24px',
+ height: '24px',
+ },
+ description: {
+ fontSize: '16px',
+ lineHeight: '24px',
+ fontFamily: 'Inter, sans-serif',
+ fontWeight: 400,
+ color: '#4b5162',
+ margin: 0,
+ }
+ };
+
+ return (
+ {e.currentTarget.style.transform = 'scale(1.02)'}}
+ onMouseOut={(e) => {e.currentTarget.style.transform = 'scale(1)'}}
+ >
+
+
+
+
+
{title}
+
+
+
+
+
{description}
+
+
+
+ );
+};
+
+export default BlogPostCard;
+
diff --git a/src/components/contact_automatic_files/ContactForm.js b/src/components/contact_automatic_files/ContactForm.js
new file mode 100644
index 0000000..1b50b22
--- /dev/null
+++ b/src/components/contact_automatic_files/ContactForm.js
@@ -0,0 +1,363 @@
+import React, { useState } from 'react';
+import './contact_automatic_files.css';
+import axios from "axios";
+import Module_Alert_Confirmation from "../Module_Alert_Confirmation";
+
+const ContactForm = ({ style = {} }) => {
+
+ const [country_code, setcountry_code] = useState("");
+ const [country_name, setcountry_name] = useState("");
+ const [city, setcity] = useState("");
+ const [postal, setpostal] = useState("");
+ const [latitude, setlatitude] = useState("");
+ const [longitude, setlongitude] = useState("");
+ const [IPv4, setIPv4] = useState("");
+ const [state, setstate] = useState("");
+ const [userIp, setuserIp] = useState("");
+ const [mynote, setmynote] = useState(0);
+ const [usermessage, setusermessage] = useState("");
+ const [object, setobject] = useState("");
+ const [result, setResult] = useState("");
+ const [myApiResponse, setmyApiResponse] = useState("");
+
+ const [formData, setFormData] = useState({
+ name: '',
+ email: '',
+ subject: '',
+ message: '',
+ telephone: ''
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData(prevState => ({
+ ...prevState,
+ [name]: value
+ }));
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ var sender_mail = "";
+ var sender_tel = "";
+ var token = "";
+
+
+
+ ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
+
+ var mysubject = document.getElementsByName("subject")[0].value;
+ var mymessage = document.getElementsByName("message")[0].value;
+ var mysender_name = document.getElementsByName("name")[0].value;
+ var mysender_email = document.getElementsByName("email")[0].value;
+ var sender_tel = document.getElementsByName("telephone")[0].value;
+
+
+ //alert("contacter "+mysender_email+" - "+mymessage+" - url = "
+ //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
+
+ if (String(mysubject).length < 5 || String(sender_tel).length > 250) {
+ //alert("Le numéro de téléphone est incorrect");
+ setdisplay_alert_mysy("1");
+ setalert_message("Le sujet doit faire plus de 5 caractères");
+ setalert_type("error");
+ return;
+ }
+
+ if (String(mymessage).length < 10 || String(mymessage).length > 1500) {
+ //alert("Le numéro de téléphone est incorrect");
+ setdisplay_alert_mysy("1");
+ setalert_message("Le mymessage doit faire plus de 10 caractères");
+ setalert_type("error");
+ return;
+ }
+
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(mysender_email) == false) {
+ // alert("L'adresse email est incorrecte");
+ setdisplay_alert_mysy("1");
+ setalert_message("L'adresse email est incorrecte");
+ setalert_type("error");
+ return;
+ }
+
+ if (String(sender_tel).length < 8 || String(sender_tel).length > 15) {
+ //alert("Le numéro de téléphone est incorrect");
+ setdisplay_alert_mysy("1");
+ setalert_message("Le numéro de téléphone est incorrect");
+ setalert_type("error");
+ return;
+ }
+
+
+
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
+ var form = new FormData();
+ form.append("type", "email");
+ form.append("recever_mail", "contact@mysy-training.com");
+ form.append("recever_tel", "+33769203945");
+ form.append("sender_mail", mysender_email);
+ form.append("sender_tel", sender_tel);
+ form.append("object", mysubject);
+ form.append("message", mymessage);
+ form.append("sender_name", mysender_name);
+ form.append("token", "");
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+ axios.post(myurl, form).then(res => {
+
+ if (String(res.data.status) === String("false")) {
+ //console.log(" In test res.data.status = " + res.data.status);
+ //console.log(" In test res.data.message = " + res.data.message);
+ setmyApiResponse("false");
+ setdisplay_alert_mysy("1");
+ setalert_message(res.data.message);
+ setalert_type("error");
+ }
+
+ else if (String(res.data.status) === String("true")) {
+ //console.log(" In test res.data.status (true) = " + res.data.status);
+ //console.log(" In test res.data.message = " + res.data.message);
+ document.getElementsByName("subject")[0].value = "";
+ document.getElementsByName("message")[0].value = "";
+ document.getElementsByName("name")[0].value = "";
+ document.getElementsByName("email")[0].value = "";
+ document.getElementsByName("telephone")[0].value = "";
+ setmyApiResponse("true");
+
+ setFormData({
+ name: '',
+ email: '',
+ subject: '',
+ message: '',
+ telephone: ''
+ });
+
+ setdisplay_alert_mysy("1");
+ setalert_message(res.data.message);
+ setalert_type("success");
+
+ }
+ else {
+ //console.log(" contact-nous statut = " + res.data.status);
+ //console.log(" contact-nous res.data.message = " + res.data.message);
+ setmyApiResponse("false");
+ setdisplay_alert_mysy("1");
+ setalert_message(res.data.message);
+ setalert_type("error");
+
+ }
+ }).catch((error) => {
+ console.warn('contact-nous Not good man :( mysearchtext = ', error);
+ setmyApiResponse("false");
+
+ setdisplay_alert_mysy("1");
+ setalert_message("Impossible d'enregistrer le message");
+ setalert_type("error");
+
+ })
+
+
+
+ };
+
+ const formStyles = {
+ container: {
+ display: 'flex',
+ flexDirection: 'column',
+ padding: '40px',
+ gap: '20px',
+ background: '#FFFFFF',
+ borderRadius: '8px',
+ boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+ maxWidth: '100%',
+ ...style
+ },
+ rowContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '24px',
+ width: '100%',
+ flexWrap: 'wrap'
+ },
+ inputGroup: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+ flex: 1,
+ minWidth: '250px',
+ textAlign: 'left',
+ },
+ label: {
+ fontFamily: 'DM Sans',
+ fontWeight: 600,
+ fontSize: '14px',
+ letterSpacing: '0.28px',
+ textTransform: 'uppercase',
+ lineHeight: '120%',
+ color: '#16274F'
+ },
+ input: {
+ padding: '15px 16px',
+ background: '#F9FAFB',
+ border: '1px solid #CBD5E0',
+ borderRadius: '4px',
+ fontFamily: 'Inter',
+ fontSize: '14px',
+ lineHeight: '126%',
+ color: '#4B5162',
+ width: '100%'
+ },
+ select: {
+ padding: '12px 16px',
+ background: '#F9FAFB',
+ border: '1px solid #CBD5E0',
+ borderRadius: '4px',
+ fontFamily: 'Inter',
+ fontSize: '14px',
+ lineHeight: '126%',
+ color: '#4B5162',
+ width: '100%'
+ },
+ textarea: {
+ padding: '16px',
+ background: '#F9FAFB',
+ border: '1px solid #CBD5E0',
+ borderRadius: '4px',
+ fontFamily: 'Inter',
+ fontSize: '14px',
+ lineHeight: '126%',
+ color: '#4B5162',
+ minHeight: '153px',
+ resize: 'vertical',
+ width: '100%'
+ },
+ button: {
+ padding: '12px 16px',
+ background: '#3E6EE3',
+ borderRadius: '200px',
+ border: 'none',
+ color: '#FFFFFF',
+ fontFamily: 'DM Sans',
+ fontWeight: 700,
+ fontSize: '14px',
+ lineHeight: '126%',
+ cursor: 'pointer',
+ width: 'fit-content',
+ alignSelf: 'center',
+ minWidth: '250px',
+
+ }
+ };
+
+
+ const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+ const [alert_message, setalert_message] = useState("");
+ const [alert_type, setalert_type] = useState("");
+
+ function clear_alert_message() {
+ setalert_message("");
+ }
+ function clear_alert_type() {
+ setalert_type("");
+ }
+
+ function clear_display_alert_mysy() {
+ setdisplay_alert_mysy("");
+ }
+
+
+ return (
+
+ );
+};
+
+export default ContactForm;
+
diff --git a/src/components/contact_automatic_files/ContactInfo.js b/src/components/contact_automatic_files/ContactInfo.js
new file mode 100644
index 0000000..10f03c2
--- /dev/null
+++ b/src/components/contact_automatic_files/ContactInfo.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import { CiTextAlignCenter } from 'react-icons/ci';
+import Social_X_icon from '../../img_new_design_2025/social_i_X.png';
+import Social_Link_icon from '../../img_new_design_2025/social_i_Link.png';
+import Social_Fa_icon from '../../img_new_design_2025/social_i_Fa.png';
+
+const ContactInfo = ({ style = {} }) => {
+ const defaultStyles = {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ flexWrap: 'wrap',
+ padding: '20px',
+ minWidth: '300px',
+ backgroundColor: 'inherit',
+ color: '#16274f',
+ fontFamily: 'Inter, sans-serif',
+ };
+
+ const columnStyles = {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '10px',
+ marginBottom: '20px',
+ };
+
+ const labelStyles = {
+ fontSize: '11px',
+ fontWeight: 600,
+ textTransform: 'uppercase',
+ textAlign: 'left',
+ color: '#16274F',
+ fontSize: '12px',
+ fontFamily: 'Inter',
+ fontWeight: '600',
+ textTransform: 'uppercase',
+ wordWrap: 'break-word',
+ };
+
+ const valueStyles = {
+
+ textAlign: 'left',
+ color: '#16274F',
+ fontSize: '14px',
+ fontFamily: 'Inter',
+ fontWeight: '400',
+ wordWrap: 'break-word',
+
+ };
+
+ const linkStyles = {
+ color: '#0aa690',
+ textDecoration: 'none',
+ fontSize: '16px',
+ cursor: 'pointer',
+ };
+
+ const socialIconsContainerStyles = {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '16px',
+ marginTop: '16px',
+ };
+
+ const socialIconStyles = {
+ width: '32px',
+ height: '32px',
+ cursor: 'pointer',
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
Téléphone fixe :
+
+33 1 77 00 38 57
+
+
+
+
+
+
Téléphone portable :
+
+33 7 69 20 39 45
+
+
+
+
+
+
Nos réseaux sociaux :
+
+
+
+
+
+ );
+};
+
+export default ContactInfo;
+
diff --git a/src/components/contact_automatic_files/Contact_Layout.js b/src/components/contact_automatic_files/Contact_Layout.js
new file mode 100644
index 0000000..9ceb1ad
--- /dev/null
+++ b/src/components/contact_automatic_files/Contact_Layout.js
@@ -0,0 +1,40 @@
+
+import './contact_automatic_files.css';
+import ContactForm from './ContactForm';
+import ContactInfo from './ContactInfo';
+import Footer from './Footer';
+
+const Contact_Layout = () => {
+
+
+ return (
+
+
+
Un besoin, une question ? Nous sommes à votre disposition.
+
+ C'est à vous. Dites-nous tout ✍
+
+
+
+
+
+
+ Mysy Training Technology,
+ Votre satisfaction est notre priorité.
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Contact_Layout;
diff --git a/src/components/contact_automatic_files/Footer.js b/src/components/contact_automatic_files/Footer.js
new file mode 100644
index 0000000..dc487a5
--- /dev/null
+++ b/src/components/contact_automatic_files/Footer.js
@@ -0,0 +1,176 @@
+import React from 'react';
+
+const Footer = ({ style = {} }) => {
+ const footerStyle = {
+ width: '100%',
+ minWidth: '1024px',
+ height: '368px',
+ backgroundColor: '#043a32',
+ padding: '64px',
+ display: 'flex',
+ flexDirection: 'column',
+ boxSizing: 'border-box',
+ ...style
+ };
+
+ const logoAddressStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '12px',
+ width: '416px',
+ marginBottom: '24px'
+ };
+
+ const addressTextStyle = {
+ color: '#ffffff',
+ opacity: 0.7,
+ fontSize: '16px',
+ lineHeight: '32px',
+ fontFamily: 'Inter'
+ };
+
+ const linksContainerStyle = {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '120px',
+ flexWrap: 'wrap',
+ justifyContent: 'space-between',
+ marginBottom: '24px'
+ };
+
+ const linkColumnStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '12px'
+ };
+
+ const linkStyle = {
+ color: '#ffffff',
+ opacity: 0.8,
+ fontSize: '16px',
+ lineHeight: '24px',
+ fontFamily: 'Inter',
+ cursor: 'pointer'
+ };
+
+ const dividerStyle = {
+ width: '100%',
+ height: '1px',
+ backgroundColor: '#ffffff',
+ opacity: 0.2,
+ margin: '24px 0'
+ };
+
+ const bottomContainerStyle = {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ flexWrap: 'wrap'
+ };
+
+ const legalLinksStyle = {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '32px',
+ flexWrap: 'wrap'
+ };
+
+ const legalLinkStyle = {
+ color: '#ffffff',
+ fontSize: '14px',
+ lineHeight: '20px',
+ fontFamily: 'Inter',
+ cursor: 'pointer'
+ };
+
+ const socialIconsStyle = {
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '12px'
+ };
+
+ const socialIconStyle = {
+ width: '24px',
+ height: '24px',
+ cursor: 'pointer'
+ };
+
+ return (
+
+ );
+};
+
+export default Footer;
+
diff --git a/src/components/contact_automatic_files/Header.js b/src/components/contact_automatic_files/Header.js
new file mode 100644
index 0000000..edee8b7
--- /dev/null
+++ b/src/components/contact_automatic_files/Header.js
@@ -0,0 +1,93 @@
+import React from 'react';
+
+const Header = ({ style = {} }) => {
+ return (
+
+ {/* Top Banner */}
+
+
+
+
Français
+
+
+
Support
+
+
+
+ {/* Main Header */}
+
+ {/* Logo and Menu */}
+
+
+
+
+
À propos
+
Fonctionnalités
+
Tarifs
+
Blog
+
+
Marketplace
+
+
+
+ {/* CTAs and Login */}
+
+
+ Créer un compte
+
+
+
+ Réserver une démo
+
+
+
+
+
+
+
Connexion
+
+
+
+
+ );
+};
+
+export default Header;
+
diff --git a/src/components/contact_automatic_files/contact_automatic_files.css b/src/components/contact_automatic_files/contact_automatic_files.css
new file mode 100644
index 0000000..574f99a
--- /dev/null
+++ b/src/components/contact_automatic_files/contact_automatic_files.css
@@ -0,0 +1,83 @@
+.contact_automatic_files {
+ @media only screen and (max-width: 600px) {}
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {}
+
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {}
+
+ @media only screen and (min-width: 1200px) {
+
+
+ .labelStyles {
+
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ text-align: left;
+ color: #16274F;
+ font-size: 12px;
+ font-family: 'Inter';
+ font-weight: 600;
+ text-transform: uppercase;
+ word-wrap: break-word;
+ }
+
+ .valueStyles {
+
+ text-align: left;
+ color: #16274F;
+ font-size: 14px;
+ font-family: 'Inter';
+ font-weight: 400;
+ word-wrap: break-word;
+ }
+
+
+
+ .linkStyles {
+ color: #0aa690;
+ text-decoration: none;
+ font-size: 16px;
+ cursor: pointer;
+ }
+
+
+ .defaultStyles{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 20px;
+ min-width: 300px;
+ background-color:inherit ;
+ color: #16274f;
+ font-family: 'Inter, sans-serif';
+
+ }
+
+ .columnStyles{
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 20px;
+ }
+
+
+
+ .socialIconsContainerStyles{
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ margin-top: 16px;
+ }
+
+
+ .socialIconStyles{
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/detail_formation_automatic_files/new_detail_formation_2025.js b/src/components/detail_formation_automatic_files/new_detail_formation_2025.js
new file mode 100644
index 0000000..f9a0d05
--- /dev/null
+++ b/src/components/detail_formation_automatic_files/new_detail_formation_2025.js
@@ -0,0 +1,2754 @@
+import React, { useRef, useState, useEffect } from "react";
+import "./new_s_detail_formation_2025.css";
+import { useParams } from 'react-router-dom'
+import axios from "axios";
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+
+import { Helmet } from "react-helmet";
+import 'react-slideshow-image/dist/styles.css'
+import { Fade } from 'react-slideshow-image';
+import slideimg1 from "../../mysy_img/education.jpg";
+import slideimg4 from "../../mysy_img/mysy_img.png";
+
+import img_met_program from "../../mysy_img/met_programmation.jpg";
+import img_met_hotel from "../../mysy_img/met_hotel.jpg";
+import img_met_graphisme from "../../mysy_img/metier_graphisme.jpg";
+
+import img_met_autre from "../../mysy_img/met_autre.jpg";
+import img_met_digital from "../../mysy_img/met_digital.jpg";
+import img_met_management from "../../mysy_img/met_management.jpg";
+import img_met_projet from "../../mysy_img/met_projet.jpg";
+
+import img_met_market from "../../mysy_img/met_market.jpg";
+import img_met_autre2 from "../../mysy_img/met_autre2.jpg";
+import img_met_dev_perso from "../../mysy_img/metier_dev_perso.jpg";
+import img_met_rh from "../../mysy_img/met_rh.jpg";
+
+import img_met_bureautic from "../../mysy_img/met_burautic.jpg";
+import img_met_vente from "../../mysy_img/met_vente.jpg";
+import img_met_sport from "../../mysy_img/met_sport.png";
+import img_met_sante_nat from "../../mysy_img/met_sante_nat.jpeg";
+
+import Social_X_icon from '../../img_new_design_2025/social_i_X.png';
+import Social_Link_icon from '../../img_new_design_2025/social_i_Link.png';
+import Social_Fa_icon from '../../img_new_design_2025/social_i_Fa.png';
+
+/*
+/!\ important: les images du slides doivent avoir une dimension de : 250 X 450
+*/
+import { Button, } from "reactstrap";
+import { useHistory } from "react-router-dom";
+import { useCookies } from "react-cookie";
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
+import { SocialIcon } from 'react-social-icons';
+import { confirmAlert } from 'react-confirm-alert';
+//import { Rating } from 'react-simple-star-rating';
+import Rating from '@mui/material/Rating';
+import parse from 'html-react-parser';
+import Inscription from "./../Inscription_Information";
+import SendIcon from '@mui/icons-material/Send';
+import mysy_logo2 from "../../mysy_img2/Logo_MySy.png"
+import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
+import { areOptionsEqual } from "@mui/base";
+import { borderRadius, style } from "@mui/system";
+
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+
+import DescriptionIcon from '@mui/icons-material/Description';
+
+const New_C_Detail_Formation_2025 = (props) => {
+ const { classId, action } = useParams();
+ const [result, setResult] = useState("");
+ const [myApiResponse, setmyApiResponse] = useState();
+ const [DetailTraining, setDetailTraining] = useState([]);
+ const [closepopup, setclosepopup] = useState(0);
+ const [country_code, setcountry_code] = useState("");
+ const [country_name, setcountry_name] = useState("");
+ const [city, setcity] = useState("");
+ const [postal, setpostal] = useState("");
+ const [latitude, setlatitude] = useState("");
+ const [longitude, setlongitude] = useState("");
+ const [IPv4, setIPv4] = useState("");
+ const [state, setstate] = useState("");
+ const [userIp, setuserIp] = useState("");
+ const [mynote, setmynote] = useState(0);
+ const [userconnected, setuserconnected] = useState("0");
+ const [someoneconnected, setsomeoneconnected] = useState("0");
+ const [partnerconnected, setpartnerconnected] = useState("0");
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+ const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
+
+ const [inscritpion, setinscritpion] = useState("");
+ const [ratingvalue, setratingvalue] = useState(0);
+
+ const [text_size, settext_size] = useState("0");
+
+ const socialIconStyles = {
+ width: '24px',
+ height: '24px',
+ cursor: 'pointer',
+ };
+
+ const socialIconStyles_mobile = {
+ width: '24px',
+ height: '24px',
+ cursor: 'pointer',
+ };
+
+ // Gestion des Cookies
+ const stored_partner = cookie_part.tokenmysypart;
+ const stored_user = cookie.tokenmysych;
+
+
+ const [childdata, setchilddata] = useState();
+
+
+ // Cette fonction verifier si le token de l'evaluation est valide
+ //si $action != 'information' et 'inscription', alors la valeur est forcement celle d'un token.
+ const [tokenEval_api, settokenEval_api] = useState();
+ const [tokenEval_message, settokenEval_message] = useState();
+ const [tokenEval_result, settokenEval_result] = useState();
+ function CheckEvaluationToken() {
+
+ var form = new FormData();
+ //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
+
+ form.append("eval_token", action);
+ form.append("class_internal_url", classId);
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/MySyckeckEvaluationToken/";
+
+ axios.post(myurl, form).then(res => {
+ //console.log(" In CheckEvaluationToken res.data.status = " + res.data.status);
+ //console.log(" In CheckEvaluationToken res.data.message r_class = " + res.data.message);
+
+
+ if (String(res.data.status) !== "false") {
+ settokenEval_api("true");
+ settokenEval_result(res.data.message);
+ }
+ else {
+ //console.log(" In tokenEval_trainingsession res.data.status = " + res.data.status);
+ settokenEval_api("false");
+ settokenEval_message(res.data.message);
+ }
+
+ }).catch((error) => {
+ console.warn('Not good man :( CheckEvaluationToken = ', error);
+ settokenEval_api("false");
+ //setmyApimyApiMessage("")
+ })
+ }
+
+
+ useEffect(() => {
+
+ async function funclocaltoken() {
+ if (action && String(action).toLocaleLowerCase() !== "inscription" &&
+ String(action).toLocaleLowerCase() !== "information") {
+
+ CheckEvaluationToken();
+ }
+ }
+
+
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ local_user_connect = 1;
+ }
+
+ if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
+ setpartnerconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ local_part_connect = 1;
+ }
+
+ async function fetchData() {
+ const result = await axios('https://geolocation-db.com/json/',);
+ setuserIp(result.data.IPv4);
+ setcountry_code(result.data.country_code);
+ setcountry_name(result.data.country_name);
+ setcity(result.data.city);
+ setpostal(result.data.postal);
+ setlatitude(result.data.latitude);
+ setlongitude(result.data.longitude);
+ setIPv4(result.data.IPv4);
+ setstate(result.data.state);
+ setuserIp(result.data.IPv4);
+ submenu_datelieu();
+ }
+ fetchData();
+
+
+ GetCurrentClass_trainingsession();
+ Display();
+ GetAssociatedTraning();
+
+
+ funclocaltoken();
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+
+ }, []);
+
+
+ function contactUs(e) {
+
+ var sender_mail = "";
+ var sender_tel = "";
+ var token = "";
+ if (String(userconnected) === "0") {
+ sender_mail = document.getElementsByName("usermail")[0].value;
+ sender_tel = document.getElementsByName("usernumtel")[0].value;
+ if (sender_mail.length == 0 && sender_tel.length == 0) {
+ alert(" Les information fournies sont incorrectes ");
+ return;
+ }
+ } else {
+ token = String(stored_user)
+
+ }
+
+
+ var useravis = document.getElementsByName("useravis")[0].value;
+ var usersupqual = document.getElementsByName("userqualsup")[0].value;
+ var usernote = document.getElementsByName("usernote")[0].value;
+
+ if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) {
+ alert("Merci de saisir le nombre minimum de caractère requis pour les champs ");
+ return;
+ }
+
+
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(sender_mail) == false) {
+ alert("l'email est incorrecte");
+ return;
+ }
+
+
+ ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
+
+
+ //alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = "
+ //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
+ var form = new FormData();
+ form.append("type", "email");
+ form.append("recever_mail", "");
+ form.append("recever_tel", "");
+ form.append("sender_mail", sender_mail);
+ form.append("sender_tel", sender_tel);
+ form.append("object", DetailTraining["external_code"]);
+ form.append("token", "");
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+ axios.post(myurl, form).then(res => {
+ if (res.data.status != "False") {
+ //console.log(" In test res.data.status = " + res.data.status);
+ //console.log(" In test res.data.message = " + res.data.message);
+ setclosepopup(1);
+ document.getElementsByName("usermail")[0].value = "";
+ document.getElementsByName("usernumtel")[0].value = "";
+ document.getElementsByName("usercomment")[0].value = "";
+ }
+ else {
+ //console.log(" contact-nous statut = " + res.data.status);
+ //console.log(" contact-nous res.data.message = " + res.data.message);
+ }
+ }).catch((error) => {
+ console.warn('contact-nous Not good man :( mysearchtext = ');
+
+ })
+
+
+ }
+
+
+ /* Cette variable accompagne la gestion des images par defaut.
+ idée : si la valeur de "DetailTraining.metier" != "management, digital, office, rh, vente, dev_perso"
+ alors l'utilisateur à créer une formation avec un metier qui n'est pas geré, donc on met une image par defaut
+ */
+ const [ismetiermanaged, setismetiermanaged] = useState();
+ const liste_metier = ["management", "digital", "office", "rh", "vente", "dev_perso"];
+
+
+ const [nb_pave_a_afficher, setnb_pave_a_afficher] = useState();
+
+ const [isdatadock, setisdatadock] = useState();
+ const [isqualiopi, setisqualiopi] = useState();
+ const [iscertitrace, setiscertitrace] = useState();
+ const [isbureaucertitrace, setisbureaucertitrace] = useState();
+ const [iscertifvoltaire, setiscertifvoltaire] = useState();
+ const [partnair_name, setpartnair_name] = useState();
+ const [website_partenaire, setwebsite_partenaire] = useState();
+
+ const [class_sales_price, setclass_sales_price] = useState("0");
+
+ const [myclassimage, setmyclassimage] = useState();
+ const [isclassimage, setisclassimage] = useState("False");
+ const [userimgclassprofil, setuserimgclassprofil] = useState("");
+
+ const [class_img_stored_in_bdd, setclass_img_stored_in_bdd] = useState("");
+
+ function getClassImage_no_token(class_id, class_external_code) {
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_no_token/";
+
+ var form = new FormData();
+
+ form.append("type", "partner");
+ form.append("related_collection", "myclass");
+ form.append("related_collection_recid", class_id);
+ form.append("class_external_code", class_external_code);
+
+
+ axios.post(myurl, form).then(res => {
+
+ if (res.data.status != "False") {
+
+ //console.log(" getClassImage : In test res.data.status = " + res.data.status);
+ console.log(" getClassImage: res.data.message.img = " + res.data.message);
+
+ if (res.data.message.img.length > 0) {
+ setisclassimage("True");
+ }
+ else {
+ setisclassimage("False");
+ }
+ setisclassimage(res.data.message.img);
+ var ch_img = "data:image/png;base64," + res.data.message.img;
+ setclass_img_stored_in_bdd(ch_img);
+ }
+ else {
+ //console.log(" In Erreur res.data.status = " + res.data.status);
+ //console.log(" In Erreur res.data.message = " + res.data.message);
+ setisclassimage("False");
+ setuserimgclassprofil();
+ setclass_img_stored_in_bdd();
+ }
+ }).catch((error) => {
+
+ console.warn('getClassImage ee: Not good man :( getClassImage = ');
+ setisclassimage("False");
+ setuserimgclassprofil("");
+ setclass_img_stored_in_bdd("");
+ })
+
+ }
+
+
+
+ function Display(e) {
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/";
+ var form = new FormData();
+ form.append("internal_url", classId);
+
+ var my_local_user_connect;
+ var my_local_part_connect;
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ my_local_user_connect = 0;
+ } else {
+ my_local_user_connect = 1;
+ }
+
+ if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
+ my_local_part_connect = 0;
+ } else {
+ my_local_part_connect = 1;
+ }
+
+
+
+ if (String(my_local_user_connect) === "1") {
+ form.append("token", stored_user);
+ form.append("connection_type", "user");
+ }
+ else if (String(my_local_part_connect) === "1") {
+ form.append("token", stored_partner);
+ form.append("connection_type", "partner");
+ }
+ else {
+ form.append("token", "");
+ form.append("connection_type", "");
+ }
+
+ // Ajout des info IP user
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+ var cpt_pave = 0;
+ //alert("myurl = "+myurl);
+
+ axios.post(myurl, form).then(res => {
+ // console.log(" In Display res.data.status = " + res.data.status);
+ // console.log(" In Display res.data.message = " + res.data.message);
+ if (String(res.data.status) === String("true")) {
+
+ if (res.data.message.length > 0) {
+ setmyApiResponse("True");
+
+ if (String(JSON.parse(res.data.message).coeur) !== String("1") &&
+ String(JSON.parse(res.data.message).freeacces) !== String("1")) {
+
+ //alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur)
+ // Verification si on est en e connecté ou non.
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ local_user_connect = 1;
+ }
+
+ if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
+ setpartnerconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ local_part_connect = 1;
+ }
+
+ if (local_user_connect === 0 && local_part_connect === 0) {
+ confirmAlert({
+ title: 'Connexion ?',
+ message: 'Connectez-vous pour acceder au detail de cette formation',
+ buttons: [
+ {
+ label: 'Vous avez un compte',
+ onClick: () => { history.push("/mysy-training-login/training/" + classId) }
+ },
+ {
+ label: "Vous n'avez pas de compte",
+ onClick: () => { history.push("/create_account") }
+ },
+
+ ],
+ closeOnEscape: false,
+ closeOnClickOutside: false,
+ keyCodeForClose: [8, 32],
+ willUnmount: () => { },
+ afterClose: () => { },
+ onClickOutside: () => { },
+ onKeypress: () => { },
+ onKeypressEscape: () => { },
+ });
+
+
+ }
+ } else {
+ //alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur)
+ }
+ }
+ else {
+ setmyApiResponse("False");
+ }
+ //console.log(" In displaydetailclass res.data.status = " + res.data.status);
+ //console.log(" In displaydetailclass res.data.message = " + res.data.message);
+ //console.log(" In displaydetailclass taille res.data.message = " + res.data.message.length);
+ setResult(res.data.message);
+ setDetailTraining(JSON.parse(res.data.message));
+
+
+ getClassImage_no_token(JSON.parse(res.data.message)._id, JSON.parse(res.data.message).external_code);
+
+
+ if (JSON.parse(res.data.message).note) {
+ setratingvalue(JSON.parse(res.data.message).note);
+ }
+
+ if (JSON.parse(res.data.message).isdatadock) {
+ setisdatadock(JSON.parse(res.data.message).isdatadock);
+ }
+
+ if (JSON.parse(res.data.message).business_prices && JSON.parse(res.data.message).business_prices.length == 1) {
+ setclass_sales_price(JSON.parse(res.data.message).business_prices[0].discounted_price);
+
+ } else {
+ setclass_sales_price(JSON.parse(res.data.message).price);
+ setclass_sales_price(JSON.parse(res.data.message).price);
+ }
+
+
+ if (JSON.parse(res.data.message).isqualiopi) {
+ setisqualiopi(JSON.parse(res.data.message).isqualiopi);
+ }
+
+
+ if (JSON.parse(res.data.message).iscertitrace) {
+ setiscertitrace(JSON.parse(res.data.message).iscertitrace);
+ }
+
+ if (JSON.parse(res.data.message).isbureaucertitrace) {
+ setisbureaucertitrace(JSON.parse(res.data.message).isbureaucertitrace);
+ }
+
+ if (JSON.parse(res.data.message).iscertifvoltaire) {
+ setiscertifvoltaire(JSON.parse(res.data.message).iscertifvoltaire);
+ }
+
+ if (JSON.parse(res.data.message).nom_partenaire) {
+ setpartnair_name(JSON.parse(res.data.message).nom_partenaire);
+ }
+
+ if (JSON.parse(res.data.message).nb_pave_a_afficher) {
+ setnb_pave_a_afficher(JSON.parse(res.data.message).nb_pave_a_afficher);
+ //console.log(" ### NB setnb_pave_a_afficher = ", JSON.parse(res.data.message).nb_pave_a_afficher);
+ }
+
+
+ if (JSON.parse(res.data.message).website_partenaire) {
+ setwebsite_partenaire(JSON.parse(res.data.message).website_partenaire);
+ }
+
+ // Verifier si le metier est geré
+ if (JSON.parse(res.data.message).metier) {
+ if (!liste_metier.includes(JSON.parse(res.data.message).metier)) {
+ setismetiermanaged("0"); // j'ai une valeur dans metier, mais qui n'est pas geré
+ }
+ }
+ else {
+ setismetiermanaged("0");
+ }
+
+ if (JSON.parse(res.data.message).img_url && String(JSON.parse(res.data.message).img_url).length > 0) {
+ setismetiermanaged("1");
+ }
+
+ if (JSON.parse(res.data.message).text_size) {
+ settext_size(JSON.parse(res.data.message).text_size);
+
+ //"block_crossell_meme_orga"
+ var local_tmp;
+ var val;
+ var footer_top;
+ var main_h;
+ var main_h_px;
+
+
+ //console.log("nb_partner_certificat = ", JSON.parse(res.data.message).nb_partner_certificat);
+
+
+ if (window.screen.width < 601) {
+
+ var decalage_pr_certificat = parseInt(String(JSON.parse(res.data.message).nb_partner_certificat)) * 150;
+ //console.log("decalage_pr_certificat = ", decalage_pr_certificat);
+
+ var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
+
+ //console.log("### local_val = ", local_val)
+ if (local_val >= 5) {
+ //console.log(" ON PASSE au MAX")
+ var local_tmp_val = 2300 + decalage_pr_certificat;
+ var local_main_h_px = 4000 + decalage_pr_certificat;
+ //console.log("### local_tmp_val = ", local_tmp_val, " local_main_h_px = ",local_main_h_px);
+ local_tmp = local_tmp_val + "px";
+ main_h_px = local_main_h_px + "px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+
+ var local_tmp_val = 2800 + decalage_pr_certificat;
+ var local_main_h_px = 4500 + decalage_pr_certificat;
+ local_tmp = local_tmp_val + "px";
+ main_h_px = local_main_h_px + "px";
+ }
+
+ } else {
+ //console.log(" ON PASSE au MIN");
+ var local_tmp_val = 2100 + decalage_pr_certificat;
+ var local_main_h_px = 4800 + decalage_pr_certificat;
+
+ local_tmp = local_tmp_val + "px";
+ main_h_px = local_main_h_px + "px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+ var local_tmp_val = 2600 + decalage_pr_certificat;
+ var local_main_h_px = 5300 + decalage_pr_certificat;
+ local_tmp = local_tmp_val + "px";
+ main_h_px = local_main_h_px + "px";
+ }
+ }
+ // document.getElementById('mob_block_cross_sell_cat').style.top = local_tmp;
+ //document.getElementById('mobile').style.height = main_h_px;
+
+ }
+
+ if (window.screen.width >= 601 && window.screen.width <= 991) {
+
+ var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
+ if (local_val >= 5) {
+ //console.log(" ON PASSE au MAX")
+ local_tmp = "2000px";
+ main_h_px = "2700px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+ local_tmp = "2500px";
+ main_h_px = "3200px";
+ }
+
+ } else {
+ console.log(" ON PASSE au MIN");
+ local_tmp = "1700px";
+ main_h_px = "2500px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+ local_tmp = "2200px";
+ main_h_px = "3000px";
+ }
+
+ }
+ document.getElementById('block_crossell_meme_orga').style.top = local_tmp;
+ document.getElementById('desktop').style.height = main_h_px;
+
+
+ }
+
+ if (window.screen.width >= 992 && window.screen.width <= 1199) {
+
+ var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
+ if (local_val >= 5) {
+ console.log(" ON PASSE au MAX")
+ local_tmp = "2000px";
+ main_h_px = "2800px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+ local_tmp = "2500px";
+ main_h_px = "3200px";
+ }
+
+ } else {
+ console.log(" ON PASSE au MIN");
+ local_tmp = "1700px";
+ main_h_px = "2500px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+ local_tmp = "2200px";
+ main_h_px = "3000px";
+ }
+
+ }
+ document.getElementById('block_crossell_meme_orga').style.top = local_tmp;
+ document.getElementById('desktop').style.height = main_h_px;
+ }
+
+ if (window.screen.width >= 1200) {
+ var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
+ if (local_val >= 5) {
+ console.log(" ON PASSE au MAX")
+ local_tmp = "2000px";
+ main_h_px = "2800px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+ local_tmp = "2500px";
+ main_h_px = "3200px";
+ }
+
+ } else {
+ //console.log(" ON PASSE au MIN");
+ local_tmp = "1700px";
+ main_h_px = "2500px";
+
+ if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
+ local_tmp = "2300px";
+ main_h_px = "3000px";
+ }
+ }
+
+ document.getElementById('block_crossell_meme_orga').style.top = local_tmp;
+ document.getElementById('desktop').style.height = main_h_px;
+ }
+
+
+ }
+ }
+ else {
+ //console.log(" In Erreur res.data.status = " + res.data.status);
+ //console.log(" In Erreur res.data.message = " + res.data.message);
+ setmyApiResponse("false");
+ history.push("/formation-inconnue/");
+
+ }
+
+
+ }).catch((error) => {
+ console.warn('Not good man :( Display = ', error);
+ //console.log(error);
+ setmyApiResponse("false");
+
+ })
+
+
+ }
+
+ const [associatedtraining_api, setassociatedtraining_api] = useState("");
+ const [associatedtraining_message, setassociatedtraining_message] = useState("");
+ function GetAssociatedTraning(e) {
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_associated_class_of_partnair/";
+ var form = new FormData();
+ form.append("internal_url", classId);
+ // Ajout des info IP user
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+
+ //alert("myurl = "+myurl);
+
+ axios.post(myurl, form).then(res => {
+ if (String(res.data.status) !== String("false")) {
+ //console.log(" In GetAssociatedTraning res.data.status = " + res.data.status);
+ //console.log(" In GetAssociatedTraning res.data.message = " + res.data.message);
+ setassociatedtraining_api("True");
+ setassociatedtraining_message(res.data.message);
+
+ }
+ else {
+ //console.log(" In Erreur res.data.status = " + res.data.status);
+ //console.log(" In Erreur res.data.message = " + res.data.message);
+ setassociatedtraining_api("False");
+ }
+
+
+ }).catch((error) => {
+ console.warn('Not good man :( GetAssociatedTraning = ');
+ setassociatedtraining_api("False");
+
+ })
+
+
+ }
+
+ const history = useHistory();
+
+ const fadeImages = [
+ {
+ url: slideimg1,
+ },
+
+ {
+ url: slideimg4,
+ },
+ ];
+
+
+ function CheckAvis(e) {
+
+ const val = document.getElementById("useravis").value
+ //alert(" evalu " + val);
+ if (val.length < 20) {
+ alert(" Le champ 'Avis' doit etre plus renseigné");
+ }
+ //alert(val);
+ }
+
+ function CheckNote(e) {
+ const val = e.target.value;
+
+ if (isNaN(val)) {
+ //alert(val + " is not a number mynote = "+mynote);
+ document.getElementById("usernote").value = mynote;
+ } else {
+ if (val > 5) {
+ alert(" Valeur Maxi doit etre 5");
+ document.getElementById("usernote").value = mynote;
+ } else {
+ setmynote(val);
+ }
+ }
+
+ }
+
+ const [submenu, setsubmenu] = useState("datelieu");
+
+ function submenu_info() {
+ setsubmenu("formateur");
+ //if (document.getElementsByName("menu_formateur")[0])
+ // document.getElementsByName('menu_formateur')[0].focus();
+
+ if (document.getElementsByName("menu_datelieu")[0])
+ document.getElementsByName('menu_datelieu')[0].blur();
+
+ if (document.getElementsByName("submenu_divers")[0])
+ document.getElementsByName('submenu_divers')[0].blur();
+ }
+
+ function submenu_datelieu() {
+ setsubmenu("datelieu");
+ //if (document.getElementsByName("menu_datelieu")[0])
+ // document.getElementsByName('menu_datelieu')[0].focus();
+
+ if (document.getElementsByName("menu_formateur")[0])
+ document.getElementsByName('menu_formateur')[0].blur();
+
+ if (document.getElementsByName("submenu_divers")[0])
+ document.getElementsByName('submenu_divers')[0].blur();
+ }
+
+
+ function submenu_divers() {
+ setsubmenu("divers");
+ //if (document.getElementsByName("submenu_divers")[0])
+ //document.getElementsByName('submenu_divers')[0].focus();
+
+ if (document.getElementsByName("menu_datelieu")[0])
+ document.getElementsByName('menu_datelieu')[0].blur();
+
+ if (document.getElementsByName("submenu_divers")[0])
+ document.getElementsByName('submenu_divers')[0].blur();
+ }
+
+
+ function Inscription_bton(event) {
+ if (DetailTraining["internal_url"] && String(DetailTraining["class_inscription_url"]).length > 10) {
+ window.open(
+ String(DetailTraining["class_inscription_url"]),
+ '_blank'
+ );
+
+ } else {
+ setinscritpion("1");
+ }
+
+
+ if (document.getElementById('myRef_informe')) {
+ var divh = document.getElementById('myRef_informe').offsetTop;
+ window.scrollTo({
+ top: divh,
+ behavior: "smooth",
+ });
+ }
+
+
+ }
+
+ function Contact_bton(event) {
+ setinscritpion("2");
+
+
+ if (document.getElementById('myRef_informe')) {
+ var divh = document.getElementById('myRef_informe').offsetTop;
+ window.scrollTo({
+ top: divh,
+ behavior: "smooth",
+ });
+ }
+
+
+ }
+
+
+ const [GetCurrentClass_api, setGetCurrentClass_api] = useState();
+ const [GetCurrentClass_message, setGetCurrentClass_message] = useState();
+ const [GetCurrentClass_result, setGetCurrentClass_result] = useState();
+ function GetCurrentClass_trainingsession(event) {
+
+ var form = new FormData();
+
+ form.append("class_internal_url", classId);
+
+ form.append("token", stored_partner);
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/";
+
+ axios.post(myurl, form).then(res => {
+ //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status);
+ // console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message);
+
+ if (String(res.data.status) === String("true")) {
+ //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status);
+ //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message);
+ setGetCurrentClass_api("true");
+ setGetCurrentClass_result(res.data.message);
+
+ }
+ else {
+ setGetCurrentClass_api("false");
+ setGetCurrentClass_message(res.data.message);
+ }
+
+ }).catch((error) => {
+ console.warn('Not good man :( GetCurrentClass_trainingsession = ', error);
+ setGetCurrentClass_api("false");
+ //setmyApimyApiMessage("")
+ })
+ }
+
+
+ const handleAccountCreation = () => {
+ history.push("/create_account")
+ };
+
+ const handleAccountConnexion = () => {
+ history.push("/Connexion")
+ };
+
+ function handleAccountLogout() {
+
+ if (String(userconnected) === String("1")) {
+ user_logout();
+ }
+ else if (String(partnerconnected) === String("1")) {
+ part_logout();
+ }
+ }
+
+
+ function part_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+ if (typeof (stored_part) != "undefined") {
+ setCookie_part("tokenmysypart", "", { path: '/' });
+ }
+ history.push("/recherche-formation");
+ }
+
+ function part_logout() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion (pro)',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => part_logout_confirmation()
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+ }
+ ]
+ });
+ }
+
+
+ function user_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+ if (typeof (stored_user) != "undefined") {
+ setCookie("tokenmysych", "");
+ }
+ history.push("/recherche-formation");
+ }
+
+ function user_logout() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion (user)',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => user_logout_confirmation()
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+ }
+ ]
+ });
+ }
+
+
+ function Close_info_form() {
+ setinscritpion();
+ document.getElementById('mob_block_cross_sell_cat').style.display = "flex";
+ if (window.screen.width < 601) {
+ var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height;
+ var sticky_div_hilight_top = document.getElementById('sticky_div_hilight_pave').style.top;
+
+ var new_meme_orga_top = parseInt(meme_orga_top) - 900;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
+ var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) - 900;
+
+
+ document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px";
+ document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px";
+ document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px";
+
+
+ }
+
+
+ else if (window.screen.width >= 601 && window.screen.width <= 991) {
+ var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
+ var new_meme_orga_top = parseInt(meme_orga_top) - 900;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
+
+ document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
+ document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
+
+ }
+ else if (window.screen.width >= 992 && window.screen.width <= 1199) {
+ var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
+ var new_meme_orga_top = parseInt(meme_orga_top) - 500;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
+
+ document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
+ document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
+ }
+ else if (window.screen.width >= 1200) {
+ var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
+ var new_meme_orga_top = parseInt(meme_orga_top) - 500;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
+
+ document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
+ document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
+
+
+ }
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+ }
+
+ function Close_inscrip_form() {
+ setinscritpion();
+ document.getElementById('mob_block_cross_sell_cat').style.display = "flex";
+
+ if (window.screen.width < 601) {
+ var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height;
+ var sticky_div_hilight_top = document.getElementById('sticky_div_hilight_pave').style.top;
+
+ var new_meme_orga_top = parseInt(meme_orga_top) - 900;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
+ var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) - 900;
+
+ document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px";
+ document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px";
+ document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px";
+ }
+ else if (window.screen.width >= 601 && window.screen.width <= 991) {
+ var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
+ var new_meme_orga_top = parseInt(meme_orga_top) - 900;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
+
+ document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
+ document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
+
+ }
+ else if (window.screen.width >= 992 && window.screen.width <= 1199) {
+ var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
+ var new_meme_orga_top = parseInt(meme_orga_top) - 500;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
+
+ document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
+ document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
+ }
+ else if (window.screen.width >= 1200) {
+ var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
+ var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
+ var new_meme_orga_top = parseInt(meme_orga_top) - 500;
+ var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
+
+ document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
+ document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
+
+
+ }
+
+
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+ }
+
+
+ const [expanded, setExpanded] = React.useState(false);
+
+ const handleChange = (panel) => (event, isExpanded) => {
+ setExpanded(isExpanded ? panel : false);
+ };
+
+ const myRef_informe = useRef(null)
+
+ const [Dialog_contact_message, setDialog_contact_message] = React.useState(false);
+ const [Dialog_contact_open, setDialog_contact_open] = React.useState(false);
+ function Dialog_contact_handle_change_participant_session(message) {
+ setDialog_contact_message(message);
+ setDialog_contact_open(true);
+ }
+
+ const Dialog_contact_handleClose = () => {
+
+ };
+
+ const Dialog_contact_handleClose_buton = () => {
+
+ setDialog_contact_open(false);
+ clear_contact_message_fields();
+
+ };
+
+ const [contact_message_nom_prenom, setcontact_message_nom_prenom] = React.useState("");
+ const [contact_message_email, setcontact_message_email] = React.useState("");
+ const [contact_message_phone, setcontact_message_phone] = React.useState("");
+ const [contact_message_sujet, setcontact_message_sujet] = React.useState("");
+ const [contact_message_message, setcontact_message_message] = React.useState("");
+
+ function clear_contact_message_fields() {
+ setcontact_message_nom_prenom("");
+ setcontact_message_email("");
+ setcontact_message_phone("");
+ setcontact_message_sujet("");
+ setcontact_message_sujet("");
+ setcontact_message_message("");
+ }
+
+ function Send_Contact_Message(e) {
+
+ var sender_mail = "";
+ var sender_tel = "";
+ var token = "";
+
+ ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
+
+ var mysubject = contact_message_sujet;
+ var mymessage = contact_message_message;
+ var mysender_name = contact_message_nom_prenom;
+ var mysender_email = contact_message_email;
+
+
+ //alert("contacter "+mysender_email+" - "+mymessage+" - url = "
+ //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
+
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(mysender_email) == false) {
+ alert("l'email est incorrecte");
+ return;
+ }
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
+ var form = new FormData();
+ form.append("type", "email");
+ form.append("recever_mail", "contact@mysy-training.com");
+ form.append("recever_tel", "+33769203945");
+ form.append("sender_mail", mysender_email);
+ form.append("sender_tel", sender_tel);
+ form.append("object", mysubject);
+ form.append("message", mymessage);
+ form.append("sender_name", mysender_name);
+ form.append("token", "");
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+
+ // console.log("## form = ", form);
+
+
+
+ axios.post(myurl, form).then(res => {
+
+ if (String(res.data.status) === String("false")) {
+
+ alert(res.data.message);
+ }
+
+ else if (String(res.data.status) === String("true")) {
+ Dialog_contact_handleClose_buton();
+ alert(res.data.message);
+
+ }
+ else {
+
+ }
+ }).catch((error) => {
+ console.warn('contact-nous Not good man :( mysearchtext = ');
+
+ })
+ }
+
+
+
+
+ /// ----
+ return (
+
+
+
+
+
+
+
+ {`${DetailTraining["title"]}`}
+
+
+ {/*** GESTION Contact */}
+
+
+ Contactez Nous
+
+
+
+
+
+ Nom & Prénom
+
+
+
+ {
+ setcontact_message_nom_prenom(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Nom'
+ >
+
+
+
+
+
+ E-mail
+
+
+ {
+ setcontact_message_email(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Adresse email'
+ >
+
+
+
+
+
+
+ Téléphone
+
+
+ {
+ setcontact_message_phone(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Numéro Tél'
+ >
+
+
+
+
+
+ Sujet
+
+
+ {
+ setcontact_message_sujet(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Sujet'
+ >
+
+
+
+
+
+ Votre message
+
+
+ {
+ setcontact_message_message(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Message'
+ >
+
+
+
+
+
+
MySy Training Technology
+
+
+
+ Adresse : 1 Cr du Havre, 75008 Paris
+ Adresse email :
+
contact@mysy-training.com
+
+ Téléphone fixe : +331 77 00 38 57
+
+
+
+
+
+
+
+
+
+
+ Fermer
+
+
+ Envoyer
+
+
+
+
+
+
+
+
+ {/*** FIN GESTION Contact */}
+
+
+
+
+
+
+
+
+
+
+
+ {DetailTraining["title"]}
+
+
+
+
+
+
+
+
+
+
+
+
+ {String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" &&
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") &&
+
}
+
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") &&
+
}
+
+
+
+
}
+
+ {String(ismetiermanaged) === "0" &&
+
+
+
}
+
+ {String(ismetiermanaged) === "1" &&
+
+
}
+
+
+
+
+
+ {String(DetailTraining["price"]) && String(DetailTraining["price"]) === String("0") &&
+
+
Gratuit
+
+
Eligible CPF
+
+
+ }
+
+ {String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && String(DetailTraining["price"]) === String("0") && (!DetailTraining.business_prices || Object.keys(DetailTraining.business_prices).length <= 0)
+ && DetailTraining["price"] &&
+
+ {String(DetailTraining["price"])} € HT
+
}
+
+ {String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && DetailTraining.business_prices && Object.keys(DetailTraining.business_prices).length > 0
+ && DetailTraining["price"] &&
+ {String(DetailTraining.business_prices[0].discounted_price)} € HT
+
+ {String(DetailTraining["price"])} € HT
+ (- {String(DetailTraining.business_prices[0].discount)} % )
+
}
+
+
+
+
+ {String(action).toLowerCase() !== "information" && String(action).toLowerCase() !== "inscription" &&
+
+
+
+
+
+
+
+ M'informer
+
+
+
+
+
+
+
}
+
+
+
+
+
+
+
+ Caractéristiques
+
+
+
+
+
+
+
+
+
+
+ A Distance
+
+
+
+
+ {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "}
+ {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "}
+
+
+
+
+
+
+
+
+
+
+ Présentiel
+
+
+
+
+ {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "}
+ {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
+
+
+
+
+
+
+
+
+
+
+ Durée
+
+
+
+ {String(DetailTraining["duration_unit"]) !== "user_rythme" &&
+
+ {DetailTraining["duration"]} {DetailTraining["duration_unit"]}(s)
+
+ }
+
+ {String(DetailTraining["duration_unit"]) === "user_rythme" &&
+
+ A votre rythme
+
+ }
+
+
+
+
+
+
+
+
+ Certification
+
+
+
+
+
+ {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && " Non "
+ }
+ {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && " Oui "
+ }
+
+
+
+
+
+
+
+
+
+
+ Support
+
+
+
+
+
+ {DetailTraining["support"] && {String(DetailTraining["support"]).charAt(0).toUpperCase() + String(DetailTraining["support"]).slice(1)} }
+ {!DetailTraining["support"] && "Non précisé"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Organisme de formation
+
+
+
+ {partnair_name && {
+ e.preventDefault();
+ window.open(
+ website_partenaire,
+ '_blank'
+ );
+
+ }}
+ > {partnair_name} }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {String(inscritpion) === "2" &&
+
+
+
+
+ }
+ {String(inscritpion) === "1" &&
+
+
+
+
+ }
+
+
+
+ Description
+
+
+
+
+ {parse(String(DetailTraining["description"]))}
+
+
+
+
+ {GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
+
+
+
+ Les sessions
+
+
+
+
+
+
+ {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => (
+
+ {(JSON.parse(formation).session_ondemande) && (JSON.parse(formation).session_ondemande) === "1" && Sessions de formation à la demande }
+
+ {(!(JSON.parse(formation).session_ondemande) || (JSON.parse(formation).session_ondemande) === "0") &&
+ {(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
+ (JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ {(JSON.parse(formation).date_debut).substring(0, 10)} au
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance et En Présentiel - {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+
+ }
+
+ {(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
+ (JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ Le
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance et En Présentiel - {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+
+ }
+
+
+
+ {(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ {(JSON.parse(formation).date_debut).substring(0, 10)} au
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance
+ }
+
+ {(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ Le
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance
+ }
+
+
+ {(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel -
+ {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+ }
+
+ {(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ Le {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel -
+ {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+ }
+
+ }
+
+
+ ))}
+
+
+
+
+
}
+
+
+
+
+
+
+
+
+
+
+
+
+ Objectif
+
+
+ {DetailTraining["objectif"] &&
+ {parse(String(DetailTraining["objectif"]))}
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Programme
+
+
+ {DetailTraining["programme"] &&
+ {parse(String(DetailTraining["programme"]))}sticky_div_hilight
+
+ }
+
+
+
+
+
+
+
+
+ {DetailTraining["tab_ue_detail_data"] && DetailTraining["tab_ue_detail_data"].length > 0 && < div className="mob_info_page_title_desc_long_txt" >
+
+ Modules
+
+
+
+ {DetailTraining["tab_ue_detail_data"] &&
+
+
+ {DetailTraining["tab_ue_detail_data"] && DetailTraining["tab_ue_detail_data"].map((val) => (
+
+
+
+ }
+ aria-controls={val._id}
+ id={val._id}
+ >
+
+
+ {val.titre}
+
+
+
+
+ {parse(String(val.description).replace(/(<([^>]+)>)/ig, ''))}
+
+
+
+
+
+
+
+ ))}
+
+
+
}
+
+
}
+
+
+
+
+
+ {DetailTraining["pourqui"] &&
+
+
+ Pour Qui ?
+
+
+ {DetailTraining["pourqui"] &&
+ {parse(String(DetailTraining["pourqui"]))}
+
+ }
+
+
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {associatedtraining_message && associatedtraining_message.length > 0 &&
+
+ Cela pourrait aussi vous intéresser
+
}
+
+
+
+ {associatedtraining_message && String(associatedtraining_api) === "True" &&
+ associatedtraining_message.slice(0, 3).map((formation) => (
+
+
+
+
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sport") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sante_nat") &&
+
}
+
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
+
}
+
+ {!JSON.parse(formation).metier &&
}
+
+
+
+
+
+ {JSON.parse(formation).cpf && (String(JSON.parse(formation).cpf)) === "1" &&
+ "Éligible au CPF"}
+
+ {!JSON.parse(formation).cpf || String(JSON.parse(formation).cpf) !== "1" &&
+ "NON Éligible au CPF"}
+
+
+
+
+
+
+
+
+
+ {JSON.parse(formation).note && String(JSON.parse(formation).note).length === 1 &&
+ parseInt(String(JSON.parse(formation).note)) <= 5 &&
+ }
+
+
+
+ {parse(String(JSON.parse(formation).title))}
+
+
+ {JSON.parse(formation).price &&
+ {(String(JSON.parse(formation).price))} € HT
+
+
}
+
+
+
+
+
+
+
{
+ e.preventDefault();
+ //test(props.formation.external_code);
+ window.open(
+ "/Display-Detail-formation/" + JSON.parse(formation).internal_url,
+ '_self'
+ );
+
+
+ }}>
+
+ Voir les détails
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {ratingvalue && String(ratingvalue).length === 1 &&
+ parseInt(String(ratingvalue)) <= 5 &&
+ }
+
+
+
+ {DetailTraining["title"]}
+
+
+
+
+
+ {DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" &&
+ "Éligible au CPF"}
+
+ {!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" &&
+ "NON Éligible au CPF"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {String(inscritpion) === "1" &&
+
+
+
+ }
+
+ {String(inscritpion) === "2" &&
+
+
+
+
+ }
+
+ {(String(action).toLocaleLowerCase() === "inscription" || String(action).toLocaleLowerCase() === "information")
+ && String(action).toLocaleLowerCase() !== "evaluation"
+ &&
+
+
+
+ }
+
+ {String(action).toLocaleLowerCase() !== "inscription" && String(action).toLocaleLowerCase() !== "information" && String(tokenEval_api) === "true"
+ &&
+
+
+
+
+ }
+
+
+
+
+
+
Description
+
+
+ {DetailTraining["description"] &&
+ {parse(String(DetailTraining["description"]))}
+
+
+ }
+
+
+
+ {GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
+
+
+ Les sessions
+
+
+
+
+
+
+ {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => (
+
+
+
+
+ {(JSON.parse(formation).session_ondemande) && (JSON.parse(formation).session_ondemande) === "1" && Sessions de formation à la demande }
+
+ {(!(JSON.parse(formation).session_ondemande) || (JSON.parse(formation).session_ondemande) === "0") &&
+ {(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
+ (JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ {(JSON.parse(formation).date_debut).substring(0, 10)} au
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance et En Présentiel - {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+
+ }
+
+ {(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
+ (JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ Le
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance et En Présentiel - {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+
+ }
+
+
+
+ {(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ {(JSON.parse(formation).date_debut).substring(0, 10)} au
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance
+ }
+
+ {(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ Le
+ {(JSON.parse(formation).date_fin).substring(0, 10)} A Distance
+ }
+
+
+ {(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel -
+ {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+ }
+
+ {(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
+ (JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
+
+ Le {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel -
+ {(JSON.parse(formation).adresse)} {(JSON.parse(formation).code_postal)}
+ }
+
+ }
+
+
+ ))}
+
+
+
+
+
+ }
+
+
+
+
+ Objectif
+
+ {DetailTraining["objectif"] &&
+ {parse(String(DetailTraining["objectif"]))}
+
+
+ }
+
+
+
+
+
+
+
+
+
+ Programme
+
+ {DetailTraining["programme"] &&
+ {parse(String(DetailTraining["programme"]))}
+
+
+ }
+
+
+
+
+ {DetailTraining["tab_ue_detail_data"] && DetailTraining["tab_ue_detail_data"].length > 0 && < div className="block_info_page_pave_title_desc_long_text" >
+
+ Modules
+
+
+
+ {DetailTraining["tab_ue_detail_data"] &&
+
+
+ {DetailTraining["tab_ue_detail_data"] && DetailTraining["tab_ue_detail_data"].map((val) => (
+
+
+
+ }
+ aria-controls={val._id}
+ id={val._id}
+ >
+
+
+ {val.titre}
+
+
+
+
+ {parse(String(val.description).replace(/(<([^>]+)>)/ig, ''))}
+
+
+
+
+
+
+
+ ))}
+
+
+
}
+
+
}
+
+
+
+ {DetailTraining["pourqui"] && String(DetailTraining["pourqui"]).length > 2 &&
+
+ Pour Qui ?
+
+ {DetailTraining["pourqui"] &&
+ {parse(String(DetailTraining["pourqui"]))}
+
+
+
+ }
+
}
+
+
+ {DetailTraining["plus_produit"] && String(DetailTraining["plus_produit"]).length > 2 &&
+
+ Points forts
+
+ {DetailTraining["plus_produit"] &&
+ {parse(String(DetailTraining["plus_produit"]))}
+
+
+
+
+ }
+
}
+
+
+
+
+
+
+
+
+ {/****** Stick droire */}
+
+
+
+
+
+
+
+ {class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 &&
+
+
+
+ }
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" &&
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") &&
+
}
+
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("sport") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("sante_nat") &&
+
}
+
+ {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
+ DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") &&
+
}
+
+
+
}
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" &&
+
+
+
}
+
+ {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "1" &&
+
+
+
}
+
+
+
+
+ {String(DetailTraining["price"]) && String(DetailTraining["price"]) === String("0") &&
+
+
Gratuit
+
+
+
Eligle CFP
+
+
+ }
+
+ {String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && (!DetailTraining.business_prices || Object.keys(DetailTraining.business_prices).length <= 0)
+ && DetailTraining["price"] &&
+
{String(DetailTraining["price"])} € HT
+
+
Eligle CFP
+
+
}
+
+ {String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && DetailTraining.business_prices && Object.keys(DetailTraining.business_prices).length > 0
+ && DetailTraining["price"] &&
+
+
+ {String(DetailTraining.business_prices[0].discounted_price)} € HT
+
+ {String(DetailTraining["price"])} € HT
+ (- {String(DetailTraining.business_prices[0].discount)} % )
+
+
Eligle CFP
+
+
}
+
+
+
+
Caractéristiques
+
+
+
+
+
+
+
+
+
+
+
+ Durée
+
+
+
+
+ {String(DetailTraining["duration_unit"]) !== "user_rythme" &&
+
+ {DetailTraining["duration"]} {DetailTraining["duration_unit"]}(s)
+
+
+ }
+
+ {String(DetailTraining["duration_unit"]) === "user_rythme" &&
+
+ VR
+
+
+ }
+
+
+
+
+
+
+
+
+ Certification
+
+
+
+
+
+
+ {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") &&
+
+ Non
+ }
+ {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") &&
+
+ Oui
+ }
+
+
+
+
+
+
+
+
+
+
+
+ Distanciel
+
+
+
+
+ {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" &&
Oui
}
+ {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" &&
Non
}
+
+
+
+
+
+
+
+
+
+
+
+ Présentiel
+
+
+
+
+ {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
Oui
}
+ {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
Non
}
+
+
+
+
+
+
+
+
+
+
+ Support
+
+
+
+ {DetailTraining["support"] &&
+
+ {String(DetailTraining["support"]).charAt(0).toUpperCase() + String(DetailTraining["support"]).slice(1)}
+ }
+ {!DetailTraining["support"] &&
+
+ Non précisé
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {String(action).toLowerCase() !== "information" && String(action).toLowerCase() !== "inscription" &&
}
+
+
+ {String(isqualiopi) === "1" &&
+
+
+
+
+
+
}
+ {String(isqualiopi) === "1" &&
}
+
+ {String(isdatadock) === "1" &&
+
+
+
+
+
+
}
+ {String(isdatadock) === "1" &&
}
+
+
+ {String(iscertifvoltaire) === "1" &&
+
+
+
}
+
+
+
+
+
+
+
+
+
+ Organisme de formation
+
+
+
+
+ {partnair_name && {
+ e.preventDefault();
+ window.open(
+ website_partenaire,
+ '_blank'
+ );
+
+ }}
+ > {partnair_name} }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.length > 0 &&
+
Cela pourrait aussi vous intéresser
}
+
+
+ {associatedtraining_message && String(associatedtraining_api) === "True" &&
+ associatedtraining_message.slice(0, 3).map((formation) => (
+
+
+
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sport") &&
+
}
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sante_nat") &&
+
}
+
+
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
+
}
+
+ {!JSON.parse(formation).metier &&
}
+
+
+
+
+
+
+ {JSON.parse(formation).cpf && (String(JSON.parse(formation).cpf)) === "1" &&
+
+ Éligible CPF
}
+
+ {!JSON.parse(formation).cpf || String(JSON.parse(formation).cpf) !== "1" &&
+
+ NON Éligible CPF
}
+
+
+
+
+
+
+
+
+ {JSON.parse(formation).note && String(JSON.parse(formation).note).length === 1 &&
+ parseInt(String(JSON.parse(formation).note)) <= 5 &&
+
+ }
+
+
+
{parse(String(JSON.parse(formation).title)).substring(0, 50)}
+
+
+ {JSON.parse(formation).price &&
+ {(String(JSON.parse(formation).price))} € HT
+
}
+
+
+
+
+
+
+
+
{
+ e.preventDefault();
+ //test(props.formation.external_code);
+ window.open(
+ "/Display-Detail-formation/" + JSON.parse(formation).internal_url,
+ '_self'
+ );
+
+
+ }}>
+
+ Voir les détails
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
+
+export default New_C_Detail_Formation_2025;
\ No newline at end of file
diff --git a/src/components/detail_formation_automatic_files/new_s_detail_formation_2025.css b/src/components/detail_formation_automatic_files/new_s_detail_formation_2025.css
new file mode 100644
index 0000000..b16f126
--- /dev/null
+++ b/src/components/detail_formation_automatic_files/new_s_detail_formation_2025.css
@@ -0,0 +1,8176 @@
+.new_detail_formation_2025 {
+
+ * h6 {
+ font-size: small;
+ }
+
+ .h1_transparent {
+ color: transparent;
+ font-size: 0.2rem;
+ margin-bottom: 0px;
+ }
+
+ .default-nav {
+ display: none !important;
+ }
+
+ .slide_img {
+ width: 100% !important;
+ height: 30rem !important;
+ max-height: 30rem !important;
+ display: block !important;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ margin-top: 0.5rem;
+ }
+
+ .popup-content2-content {
+ top: 30% !important;
+ left: 40% !important;
+ width: 30rem !important;
+ font-family: "Quicksand", "Signika", sans-serif !important;
+ font-size: medium !important;
+ background: black !important;
+ color: white !important;
+ }
+
+ .popup-content_max_601-content {
+ top: 30% !important;
+ left: 15% !important;
+ width: 80% !important;
+ font-family: "Quicksand", "Signika", sans-serif !important;
+ font-size: small !important;
+ background: black !important;
+ color: white !important;
+ }
+
+
+ @media only screen and (max-width: 600px) {
+
+ .nob_new_content_1 {}
+
+ .mob_block_content_2025 {
+ position: relative;
+ width: 100%;
+ padding-top: 5rem;
+ }
+
+
+
+ .mob_block_content_rating_2025 {
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 28px;
+ line-height: 120%;
+ color: #FFFFFF;
+
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-bottom: 20px;
+ }
+
+ .mob_block_content_title_2025 {
+
+ height: 114px;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 28px;
+ line-height: 120%;
+ color: #FFFFFF;
+ text-align: left;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .mob_price_2025 {
+ width: 50%;
+ float: left;
+ height: 24px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ /* identical to box height, or 24px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+ text-align: left;
+
+
+ }
+
+ .mob_tag_cpf_2025 {
+ /* Éligible au CPF */
+ width: 50%;
+
+ height: 12px;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+ color: #0AA690;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ padding-top: 8px;
+ float: left;
+
+ }
+
+ .mob_tag_cpf_txt_2025 {
+
+
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .mob_cats_bton_inscr_2025 {
+ /* Auto layout */
+
+ padding: 12px 16px;
+
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1rem;
+ height: 40px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .mob_cats_bton_inscr_txt_2025 {
+ color: #FFF;
+ color: #FFF;
+ height: 18px;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ }
+
+ .mob_cats_bton_info_2025 {
+ /* Button text */
+
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1rem;
+ height: 40px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #C7C9CE;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .mob_cats_bton_info_txt_2025 {
+ height: 18px;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ color: #4B5162;
+ padding-top: 10px;
+
+ }
+
+ .mob_cats_2025 {
+ padding: 0px;
+ width: 100%;
+ margin-bottom: 15px;
+ }
+
+ .mob_caracteristic_title_2025 {
+ width: 100%;
+ height: 22px;
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 140%;
+ color: #16274F;
+
+ height: 40px;
+
+ }
+
+ .mob_caracteristic_list_2025 {}
+
+ .mob_caracteristic_list_title_desc_2025 {
+ width: 100%;
+ float: left;
+ }
+
+
+ .mob_caracteristic_list_title_desc_title_2025 {
+ /* Durée */
+
+ width: 50%;
+ height: 12px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 12px;
+
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+ float: left;
+ text-align: left;
+ }
+
+ .mob_caracteristic_list_title_desc_desc_2025 {
+ /* 1 jour */
+
+ width: 50%;
+ height: 12px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ float: left;
+ text-align: right;
+
+ }
+
+ .mob_caracteristic_list_title_desc_2025 {
+
+ /* Auto layout */
+ text-align: left;
+
+ width: 100%;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ /************ fin 2025 *********/
+
+ .desktop {
+ display: none;
+ }
+
+ .css-iljtu2-MuiRating-root {
+ font-size: 1rem !important;
+ }
+
+ .left_box {
+ display: none;
+ }
+
+ .left_box_for_mobile {
+ float: left;
+ border-width: 1px;
+ width: 80%;
+ height: 100%;
+ padding: 0.5rem;
+ padding-left: 0.5rem;
+ border-radius: 1rem;
+ margin-bottom: 0.1rem;
+ font-size: small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 5px;
+ padding-left: 5px;
+ margin-left: 2.5rem;
+ margin-top: 1rem;
+ }
+
+ .right_box {
+ float: left;
+ border: 1px solid black;
+ border-top-width: 1px;
+ border-right-width: 1px;
+ border-bottom-width: 1px;
+ border-left-width: 1px;
+ border-width: 2px;
+ width: 98%;
+ height: 100%;
+ margin: auto;
+ margin-top: auto;
+ margin-right: auto;
+ margin-left: auto;
+ padding: 0rem;
+ border-radius: 30px;
+ margin-right: 0%;
+ padding-left: 2px;
+ padding-right: 2px;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ margin-left: 3px;
+ padding-bottom: 2rem;
+ margin-top: 1rem;
+ padding-top: 1rem;
+ background: #F4F6F6;
+ }
+
+ .hilightsoustitre {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .autres_formations {
+ margin-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ }
+
+ .img_banner {
+ margin-bottom: .5rem;
+ padding-bottom: .5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 98%;
+ background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat;
+ }
+
+ .img_bannermg_WOimg {
+ margin-bottom: .5rem;
+ padding-bottom: .5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 98%;
+ max-height: 5rem;
+ background-color: white;
+ }
+
+ .titre_formation {
+ color: #619e31;
+ font-size: 1.5rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.2rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .description {
+ text-align: justify;
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: 0.85rem;
+ word-break: break-word;
+ margin-left: 2%;
+ margin-right: 5%;
+ }
+
+ .caracteristique {
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: medium;
+ word-break: break-word;
+ font-weight: bold;
+ margin-left: 2%;
+ margin-right: 5%;
+ text-align: center;
+ }
+
+ .calage {
+ width: 2%;
+ }
+
+ .div_row_critere {
+ float: left;
+
+ width: 50%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: small;
+
+ }
+
+ .div_row_critere_gauche {
+ width: 56%;
+ float: left;
+ text-align: right;
+ font-weight: bold;
+ padding-right: 5px;
+ }
+
+ .div_row_critere_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ padding-left: 5px;
+ }
+
+ .div_row_critere_note {
+
+ width: 50%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ font-size: small;
+ font-weight: bold;
+
+ }
+
+ .div_row {
+ width: 90%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .ftion_tab_gauche {
+ width: 62%;
+ float: left;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ .ftion_tab_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ }
+
+ .forma_img_logo_class {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ padding: 0.3rem;
+ font-size: 11px;
+
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+
+ text-align: center;
+ display: table-cell;
+
+ }
+
+ .training_img {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ width: 99%;
+ }
+
+ .vignet_title {
+ color: #619e31;
+ font-size: medium;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+ .vignet_desc {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ line-height: 1.43;
+ font-size: small;
+ margin-bottom: 4px;
+ color: #3b3e40;
+ word-break: break-word;
+ padding: 5px;
+ }
+
+ .text_surna {
+ z-index: 50;
+ font-size: xx-large;
+ color: white;
+ background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat;
+ height: 5rem;
+ width: 10rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .detail_class_submenu {
+ width: 7rem;
+ background: #d8edfc;
+ border-radius: 10px;
+ margin-right: 0.3rem;
+ padding: 0.3rem;
+ margin-bottom: 0.2rem;
+ text-align: center;
+ border: 1px solid;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+
+ font-weight: normal;
+ }
+
+ .detail_class_submenu:hover:active,
+ .detail_class_submenu:hover {
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu:focus {
+
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu_data {
+ width: 100%;
+ height: 7rem;
+ background-color: #d8edfc;
+ padding-left: 5px;
+ text-align: left;
+ padding: 0;
+ border: 0px;
+ color: #3b3e40;
+ padding-left: 5px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ border-radius: 10px;
+ border: 1px solid;
+ }
+
+ .detail_element {
+ border-radius: 3px;
+ display: inline-block;
+
+ background-color: white;
+ height: auto;
+ padding: 10px;
+ outline: 1px solid #ccc;
+
+ text-align: left;
+ background-color: white;
+ box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
+ border: 0px solid;
+
+ margin-left: 0px;
+ margin-right: 0px;
+ width: 100%;
+ margin-top: 0.5rem;
+ }
+
+ .detail_element:hover {
+ -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%);
+ }
+
+ .bton_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ border-radius: 20rem;
+ background-color: red;
+ border: 2px solid red;
+ width: 10rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ letter-spacing: 1px;
+ position: fixed;
+ top: 6rem;
+ right: 15%;
+ height: 3rem;
+ }
+
+ .row_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ }
+
+ .sous_titre {
+ color: #619e31;
+ font-size: small;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+
+ .mob_img {
+ position: relative;
+ width: 100%;
+ max-height: 120px;
+ left: 0px;
+
+ }
+
+
+ .mob_block_content {
+
+ position: relative;
+ width: 100%;
+ margin-top: 10px;
+ padding-bottom: 5px;
+ }
+
+
+ .mob_block_content_rating {
+
+ /* Auto layout */
+
+
+ padding: 0px;
+ gap: 7.76px;
+
+ width: 50%;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 10px;
+ }
+
+ .mob_block_content_title {
+
+ height: 78px;
+
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 22px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ margin-bottom: 15px;
+ }
+
+ .mob_price {
+
+ position: relative;
+ width: 100%;
+ height: 28px;
+ left: 24px;
+ margin-bottom: 15px;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 22px;
+ line-height: 38px;
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+ }
+
+ .mob_tag_cpf {
+ /* Auto layout */
+
+
+ padding: 5px;
+ gap: 10px;
+
+ position: relative;
+
+
+ /* Beige */
+
+ background: #FFF5DA;
+ border-radius: 4px;
+ width: 100%;
+ text-align: center;
+ margin-bottom: 10px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+
+ }
+
+ .mob_tag_cpf_txt {
+
+
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_cats {
+ padding: 0px;
+ position: relative;
+ width: 100%;
+ margin-bottom: 15px;
+ }
+
+ .mob_cats_bton_inscr {
+ /* Auto layout */
+ cursor: pointer;
+ width: 80%;
+ margin-left: 10%;
+ height: 36px;
+ background: #20BFA9;
+ border-radius: 8px;
+ text-align: center;
+ margin-bottom: 10px;
+ }
+
+ .mob_cats_bton_inscr_txt {
+ width: 100%;
+ height: 30px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+
+ }
+
+ .mob_cats_bton_info {
+ /* Auto layout */
+
+ cursor: pointer;
+ border: solid 1px silver;
+ height: 36px;
+ width: 80%;
+ margin-left: 10%;
+ border-radius: 8px;
+ text-align: center;
+ }
+
+ .mob_cats_bton_info_txt {
+ font-family: "Albert Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ text-align: center;
+ color: #20BFA9;
+ }
+
+ .mob_caracteristic {
+ padding: 0px;
+ gap: 16px;
+ position: relative;
+ width: 95%;
+ left: 24px;
+ }
+
+ .mob_caracteristic_title {
+ width: 100%;
+ height: 24px;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 24px;
+ font-feature-settings: "liga" off;
+ color: #0A043C;
+ text-align: left;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ margin-bottom: 5px;
+ }
+
+
+ .mob_caracteristic_list {
+ padding: 0px;
+
+ width: 100%;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ }
+
+ .mob_caracteristic_list_title_desc {
+
+ /* Auto layout */
+ text-align: left;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_caracteristic_list_title_desc_title {
+ width: 60%;
+ height: 19px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_caracteristic_list_title_desc_desc {
+ width: 40%;
+ height: 19px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .mob_info_page {
+ padding: 0px;
+ position: relative;
+ width: 96%;
+
+ left: 2%;
+ }
+
+
+ .mob_info_page_title_desc_long_txt {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 10px;
+ gap: 16px;
+
+ width: 100%;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .mob_info_page_title_desc {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 10px;
+ gap: 16px;
+
+ width: 100%;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_info_page_title_desc_title {
+ height: 24px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+ color: #3E6EE3;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ background: #FFF;
+ text-align: left;
+ }
+
+ .mob_info_page_title_desc_desc {
+ max-height: 13rem;
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ text-align: justify;
+ }
+
+ .mob_block_cross_sell_cat {
+ padding: 0px;
+ position: relative;
+ width: 96%;
+ left: 2%;
+ }
+
+ .mob_block_sous_cross_sell {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 90%;
+ margin-left: 5%;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_block_sous_cross_sell_title {
+ height: 80px;
+ font-weight: 600;
+ text-align: center;
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-size: 24px;
+ color: rgb(62, 110, 227);
+ line-height: 29px;
+ }
+
+ .mob_cross_sell_list_card {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 100%;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .mob_cross_sell_list_card_card {
+ /* Card Vertical */
+
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+
+ padding: 8px;
+ gap: 16px;
+ isolation: isolate;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Medium Grey */
+
+ border: 1px solid #DFDFDF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_cross_sell_card_img {
+
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .mob_cross_sell_card_tag_cpf {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+
+
+ height: 37px;
+ width: 60%;
+
+ /* Beige */
+
+ background: #FFF5DA;
+ border-radius: 0px 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ z-index: 1;
+ }
+
+ .mob_cross_sell_card_tag_cpf_txt {
+
+ height: 17px;
+ width: 100%;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_cross_sell_card_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 310px;
+ height: 131px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ }
+
+ .mob_cross_sell_card_content_rating {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 5.29px;
+
+ width: 100.59px;
+ height: 15px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_cross_sell_card_content_title {
+ width: 100%;
+ text-align: left;
+ height: 58px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 22px;
+ font-feature-settings: 'liga' off;
+ text-transform: uppercase;
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+
+ .mob_cross_sell_card_content_price {
+ width: 100%;
+ text-align: left;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .mob_cross_sell_card_content_cat {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 3;
+ flex-grow: 0;
+ z-index: 3;
+ }
+
+ .mob_cross_sell_card_content_cat_bton_detail {
+
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+ width: 80%;
+ height: 44px;
+ background: #3E6EE3;
+ border-radius: 200px;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .mob_cross_sell_card_content_cat_bton_detail_txt {
+ height: inherit;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ text-align: center;
+ color: #FFFFFF;
+ }
+
+ .mob_block_social_icon {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+
+ position: relative;
+ width: 80px;
+ height: 16px;
+ left: 140px;
+
+
+ }
+
+ .mob_block_social_icon_RS {
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_social_icone_SocialIcon {
+ height: 20px !important;
+ width: 20px !important;
+ }
+
+ .mob_block_jeminforme {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ position: absolute;
+ width: 90%;
+ height: 42px;
+ left: 24px;
+ top: 1100px;
+ }
+
+ .mob_block_organisme_ftion {
+ padding: 0px;
+
+ position: relative;
+ width: 100%;
+ height: 42px;
+
+ text-align: center;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+
+ .mob_block_organisme_ftion_orga {
+ width: 100%;
+ height: 19px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .mob_block_organisme_ftion_link {
+ width: 100%;
+ height: 19px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-decoration-line: underline;
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .mob_training_img {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ max-height: 100px;
+ max-width: 100%;
+ }
+
+ .css-ryrseu-MuiRating-root {
+ font-size: 1.2rem;
+ }
+
+ .mob_training_img_crossel {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ width: 99%;
+ }
+
+ .programme_block {
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-size: 14px;
+ line-height: 30px;
+ }
+
+ .description_block {
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-size: 14px;
+ line-height: 30px;
+ }
+
+ .objectif_block {
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-size: 14px;
+ line-height: 30px;
+ }
+
+ .session_block {
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-size: 14px;
+ line-height: 30px;
+ }
+
+
+ .pourqui_block {
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, "Times New Roman";
+ font-size: 14px;
+ line-height: 30px;
+ }
+
+ .sticky_div_hilight {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ position: absolute;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ top: 1300px;
+ text-align: center;
+ max-width: 80%;
+ width: 60%;
+ margin-left: 20%;
+ }
+
+
+ .sticky_img_hilight1 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ height: 150px;
+ max-height: 150px;
+ }
+
+
+ .img_hili {
+ max-width: 100%;
+ max-height: 100px;
+ height: 100px;
+ border-radius: 15px;
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 20px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 18px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ font-size: medium;
+ }
+
+ .css-wdmfcx {
+ width: 100% !important;
+ }
+
+
+ .Background_Header {
+ /* Background Header */
+
+
+ position: absolute;
+ width: 100%;
+ height: 350px;
+ left: 0px;
+ top: 0px;
+
+ /* Beige */
+
+ background: #FFF5DA;
+ }
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+ .mobile {
+ display: none;
+ }
+
+ .left_box {
+ float: left;
+ border-width: 1px;
+ width: 20%;
+ height: 100%;
+ padding: 0.5rem;
+ padding-left: 0.5rem;
+ border-radius: 1rem;
+ margin-bottom: 0.1rem;
+ font-size: small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 5px;
+ padding-left: 5px;
+ }
+
+ .right_box {
+ float: left;
+ border: 1px solid black;
+ border-width: 2px;
+ width: 78%;
+ height: 100%;
+ margin: auto;
+ padding: 0rem;
+ border-radius: 30px;
+ margin-right: 0%;
+ padding-left: 1rem;
+ padding-right: 10px;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ margin-left: 10px;
+ padding-bottom: 2rem;
+ margin-top: 0.5rem;
+ padding-top: 1rem;
+ background: #F4F6F6;
+
+ }
+
+ .hilightsoustitre {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .autres_formations {
+ margin-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ }
+
+ .img_banner {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 100%;
+ background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat;
+
+ }
+
+
+ .img_bannermg_WOimg {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 100%;
+ max-height: 12rem;
+ background-color: white;
+ }
+
+ .titre_formation {
+ color: #619e31;
+ font-size: 1.5rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.2rem;
+ }
+
+ .description {
+ text-align: justify;
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: 0.85rem;
+ word-break: break-word;
+ margin-left: 2%;
+ margin-right: 5%;
+ }
+
+ .caracteristique {
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: medium;
+ word-break: break-word;
+ font-weight: bold;
+ margin-left: 2%;
+ margin-right: 5%;
+ text-align: center;
+ }
+
+ .calage {
+ width: 2%;
+ }
+
+ .div_row_critere {
+ float: left;
+
+ width: 30%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: small;
+
+ }
+
+ .div_row_critere_gauche {
+ width: 62%;
+ float: left;
+ text-align: right;
+ font-weight: bold;
+ padding-right: 5px;
+ }
+
+ .div_row_critere_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ padding-left: 5px;
+ }
+
+ .div_row_critere_note {
+
+ width: 50%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ font-size: small;
+ font-weight: bold;
+
+ }
+
+ .div_row {
+ width: 80%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .ftion_tab_gauche {
+ width: 62%;
+ float: left;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ .ftion_tab_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ }
+
+ .forma_img_logo_class {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ padding: 0.3rem;
+ font-size: 11px;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+
+ text-align: center;
+ display: table-cell;
+
+ }
+
+ .training_img {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ width: 99%;
+ }
+
+ .vignet_title {
+ color: #619e31;
+ font-size: medium;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+ .vignet_desc {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ line-height: 1.43;
+ font-size: small;
+ margin-bottom: 4px;
+ color: #3b3e40;
+ word-break: break-word;
+ padding: 5px;
+ }
+
+ .text_surna {
+ z-index: 50;
+ font-size: xx-large;
+ color: white;
+ background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat;
+ height: 5rem;
+ width: 15rem;
+ margin-left: auto;
+ margin-right: auto;
+ top: 2rem;
+ margin-top: 1.5rem;
+ }
+
+ .left_box_for_mobile {
+ display: none;
+ }
+
+ .detail_class_submenu {
+ background: #d8edfc;
+ border-radius: 15px;
+ margin-right: 1rem;
+ padding: 0.3rem;
+ margin-bottom: 0.5rem;
+ width: 10rem;
+ text-align: center;
+ border: 1px solid #9cf;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ letter-spacing: 0.1rem;
+ font-weight: normal;
+ }
+
+ .detail_class_submenu:hover:active,
+ .detail_class_submenu:hover {
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu:focus {
+
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu_data {
+ width: 100%;
+ height: 7rem;
+ background-color: #d8edfc;
+ padding-left: 5px;
+ text-align: left;
+ padding: 0;
+ border: 0px;
+ color: #3b3e40;
+ padding-left: 5px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ border-radius: 10px;
+ border: 1px solid;
+ }
+
+ .detail_element {
+ border-radius: 3px;
+ display: inline-block;
+ background-color: white;
+ height: auto;
+ padding: 5px;
+ outline: 1px solid #ccc;
+
+ text-align: left;
+ margin-bottom: 2rem;
+ background-color: white;
+
+ border: 0px solid;
+ width: 100%;
+ margin-top: 1rem;
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+
+ .detail_element:hover {
+ -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%);
+ }
+
+ .bton_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ border-radius: 20rem;
+ background-color: red;
+ border: 2px solid red;
+ width: 12rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ letter-spacing: 1px;
+ position: fixed;
+ top: 15rem;
+ right: 5%;
+ height: 3rem;
+ z-index: 10000;
+ }
+
+ .bton_recontact {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ border-radius: 20rem;
+ background-color: #104277;
+ border: 2px solid #104277;
+ width: 12rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ letter-spacing: 1px;
+ position: fixed;
+ top: 20rem;
+ right: 5%;
+ height: 3rem;
+ z-index: 10000;
+ }
+
+
+ .row_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ }
+
+ .sous_titre {
+ color: #619e31;
+ font-size: medium;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+ .block_header_menu {
+
+ padding: 22px 72px;
+ gap: 10px;
+
+ position: relative;
+ width: 100%;
+ height: 100px;
+
+ top: 0px;
+
+ /* White */
+
+ background: #FFFFFF;
+ box-shadow: 0px 6px 8px rgba(30, 30, 30, 0.05);
+ }
+
+
+ .header_menu {
+ /* Menu Header */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px;
+ gap: 345px;
+
+ width: 100%;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .hader_menu_logo_mysy {
+ /* Logo MySy */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .logo_mysy {
+ /* Logo MySy */
+
+
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+ /* TRAINING */
+
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .menu_header {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 891px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_search {
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_menu {
+ /* Les formations */
+
+ cursor: pointer;
+ width: 150px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 17px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_rectangle {
+ width: 1px;
+ height: 24px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 10px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 5;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 288px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 7;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr {
+ /* Button */
+
+ cursor: pointer;
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 126px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr_txt {
+
+ width: 74px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .menu_header_cat_buton_connex {
+ /* Button */
+ cursor: pointer;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_connex_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_connex_txt {
+
+ width: 102px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .block_sous_header {
+ position: absolute;
+ width: 100%;
+ height: 210px;
+ left: 0px;
+ top: 100px;
+ background: #0A043C;
+ }
+
+ .block_sous_header_tag {
+ padding: 10px;
+ position: relative;
+ width: 200px;
+ height: 37px;
+ background: #FFF5DA;
+ border-radius: 4px;
+
+ }
+
+ .block_sous_header_tag_cpf {
+ /* Éligible au CPF */
+
+
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .block_sous_header_rate_title {
+
+ position: relative;
+ width: 90%;
+ left: 30px;
+ padding-top: 10px;
+ }
+
+ .rating {
+ padding: 0px;
+ width: 147.53px;
+ position: relative;
+ }
+
+ .sous_header_title {
+ width: 80%;
+ height: 76px;
+ text-align: left;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 26px;
+ line-height: 28px;
+
+ /* Light Grey */
+
+ color: #F7F7F7;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .header_background {
+ /* Header Background */
+
+
+ position: absolute;
+ width: 1440px;
+ height: 259px;
+ left: 0px;
+ top: 100px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ }
+
+ .block_info_page {
+ /* List Infos Page */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 14px;
+
+ position: absolute;
+ width: 60%;
+
+ left: 182px;
+ top: 350px;
+ text-align: left;
+ }
+
+ .block_info_page_pave_title_desc {
+ /* Title + Description */
+
+ text-align: justify;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 5px;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ font-size: 16px;
+ padding: 24px;
+
+ }
+
+
+ .block_info_page_pave_title_desc_long_text {
+ /* Title + Description */
+
+ text-align: justify;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 5px;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ padding: 24px;
+
+ }
+
+
+ .block_info_page_pave_title_desc_title {
+ /*
+ width: 100%;
+ height: 40px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 40px;
+ font-feature-settings: 'liga' off;
+ color: white;
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ background-color: #20BFA9;
+ text-align: center;
+ */
+
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ /* identical to box height, or 24px */
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .block_info_page_pave_title_desc_desc {
+ width: 100%;
+
+
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ }
+
+ .programme_block {
+ /* max-height: 18rem;
+ min-height: 10rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+
+
+ }
+
+ .description_block {
+ /* max-height: 13rem;
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+ }
+
+ .objectif_block {
+ /* max-height: 11rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+ }
+
+ .session_block {
+ max-height: 10rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;
+ padding: 0px;
+ }
+
+
+ .pourqui_block {
+ max-height: 7rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;
+ padding: 0px;
+ }
+
+
+
+
+ .block_sticky_info {
+ /* Sticky Infos */
+
+
+ position: relative;
+ width: 309px;
+ height: 700px;
+ left: 74%;
+ top: 160px;
+
+ padding: 5px;
+ background: white;
+ border-radius: 15px;
+ }
+
+ .block_sticky_info_price {
+
+ width: 50%;
+ height: 24px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ /* identical to box height, or 24px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ text-align: left;
+ float: left;
+ padding-left: 5px;
+
+ }
+
+ .block_sticky_info_img {
+
+
+ text-align: left;
+
+ }
+
+ .block_sticky_info_caracteristique {
+ /* Auto layout */
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ width: 90%;
+ left: 5%;
+ padding-left: 5px;
+
+ }
+
+ .block_sticky_info_caracteristique_title {
+ /* Caractéristiques : */
+
+
+ width: 90%;
+ height: 22px;
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 140%;
+ /* or 22px */
+ display: flex;
+ align-items: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_caracteristique_list {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 90%;
+ left: 5%;
+ height: 143px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 25px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc_title {
+ width: 50%;
+ height: 12px;
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ display: flex;
+ align-items: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc_desc {
+ width: 100%;
+ height: 12px;
+ text-align: right;
+ padding-right: 5px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ }
+
+ .block_sticky_info_Sessions {
+ /* Auto layout */
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ position: absolute;
+ width: 90%;
+ left: 5%;
+
+ top: 650px;
+ }
+
+ .block_sticky_info_Sessions_title {
+ /* Caractéristiques : */
+
+
+ width: 90%;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_Sessions_list_title_desc {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 55px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_Sessions_list_title_desc_title {
+ width: 50%;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_Sessions_list_title_desc_desc {
+ width: 50%;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .sticky_cats {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+ width: 90%;
+ height: 120px;
+ margin-left: auto;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .sticky_cats_buton_inscrire {
+
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+
+
+ height: 44px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .sticky_cats_buton_inscrire_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_inscrire_txt {
+ width: 74px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ cursor: pointer;
+
+ }
+
+
+ .sticky_cats_buton_info {
+
+
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+
+
+ height: 44px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #C7C9CE;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_info_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_info_txt {
+
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Green */
+
+ color: #20BFA9;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+
+ .sticky_social_icone {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+ left: 35%;
+ margin-bottom: 1.5rem;
+
+ }
+
+ .sticky_social_icone_SocialIcon {
+ height: 25px !important;
+ width: 25px !important;
+ }
+
+ .sticky_social_icone_facebook {
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+ .sticky_social_icone_link {
+
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .sticky_social_icone_twitter {
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ }
+
+ .sticky_organisme_title_desc {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+
+ width: 100%;
+ text-align: center;
+
+ margin-bottom: 1rem;
+
+ }
+
+ .sticky_organisme_title_desc_title {
+
+ height: 26px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 160%;
+ /* identical to box height, or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sticky_organisme_title_desc_desc {
+
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ text-decoration-line: underline;
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_crossell_meme_orga {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+
+ left: 182px;
+ top: 2200px;
+
+ }
+
+ .sous_crossell {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 100%;
+ height: 533px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_title {
+ width: 1076px;
+ height: 38px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 28px;
+ line-height: 38px;
+ margin-bottom: 0.5rem;
+
+ /* Black */
+
+ color: #1E1E1E;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_list_card {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 50px;
+ gap: 25px;
+
+ margin-left: 5%;
+ margin-right: 5%;
+ width: 90%;
+ height: 479px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ max-width: 1300px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .sous_crossell_list_card_card {
+ /* Card Vertical */
+
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8px;
+ gap: 16px;
+ isolation: isolate;
+
+ width: 32%;
+ height: 460px;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Medium Grey */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .sous_crossell_list_card_card_img {
+
+ height: 180px;
+
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .sous_crossell_list_card_card_tag_cpf {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+ position: relative;
+ width: 188px;
+ height: 37px;
+ top: -200px;
+ left: -20px;
+
+
+ /* Beige */
+
+ background: #FFF5DA;
+ border-radius: 0px 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ z-index: 1;
+ }
+
+ .sous_crossell_list_card_card_tag_cpf_txt_ok_cpf {
+ /* Éligible au CPF */
+
+ width: 97px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Green/Normal */
+ color: #0AA690;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sous_crossell_list_card_card_tag_cpf_txt_no_ok_cpf {
+ /* NON Éligible au CPF */
+
+ width: 127px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ color: #B74949;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sous_crossell_list_card_card_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ position: relative;
+ top: -30px;
+
+ }
+
+ .sous_crossell_list_card_card_content_rating {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 5.29px;
+
+ width: 100.59px;
+ height: 15px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_list_card_card_content_title {
+ height: 19px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, Times New Roman;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 120%;
+ /* or 19px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+ padding-left: 3px;
+ }
+
+
+ .sous_crossell_list_card_card_content_price {
+
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 140%;
+ text-transform: uppercase;
+ color: #3E6EE3;
+ flex: none;
+ flex-grow: 0;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 3px;
+ text-align: left;
+ }
+
+
+
+ .sous_crossell_list_card_card_CAT {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+ height: 120px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 3;
+ flex-grow: 0;
+ z-index: 3;
+ }
+
+ .sous_crossell_list_card_card_CAT_bton {
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+ width: 80%;
+ height: 44px;
+ background: #3E6EE3;
+ border-radius: 200px;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ cursor: pointer;
+
+ }
+
+ .sous_crossell_list_card_card_CAT_bton_txt {
+ font-family: Roboto, Verdana, Georgia, Arial, Times New Roman;
+
+ font-style: normal;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 126%;
+ /* identical to box height, or 18px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+ }
+
+ .training_img_crossel {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ height: 99%;
+ width: 100%;
+ }
+
+ .css-dqr9h-MuiRating-label {
+ margin-left: 2px;
+ }
+
+ .css-iljtu2-MuiRating-root {
+ font-size: 1.2rem;
+ }
+
+
+ .footer {
+ width: 100%;
+ position: relative;
+
+ z-index: -1;
+ }
+
+ .sticky_div_hilight {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ position: relative;
+ width: 99%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+
+ padding: 30px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+
+ .sticky_img_hilight1 {
+ /* Auto layout */
+ width: 100%;
+
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+
+ .img_hili {
+
+ border-radius: 15px;
+ max-width: 100%;
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 20px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 18px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ font-size: medium;
+ }
+
+
+
+ .block_stick_v2_092024 {
+
+ background-color: white;
+ min-height: 45rem;
+ border-radius: 15px;
+ margin-bottom: 2rem;
+ position: relative;
+ border: 1px solid #E2E9FB;
+ border-radius: 8px 8px 0px 0px;
+
+
+ width: 100%;
+ z-index: 50;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .Background_Header {
+
+ width: 100%;
+
+ left: 0px;
+ top: 0px;
+
+ /* Beige */
+
+ background: #FFF5DA;
+ }
+
+ .tag_eligle_cpf {
+ width: 30%;
+ height: auto;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 120%;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+ color: #0AA690;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ float: right;
+ text-align: center;
+ border: 1px solid;
+ border-radius: 5px;
+ margin-right: 10px;
+ margin-top: px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border: 1px solid #E2E9FB;
+ }
+
+ .block_prix_2025 {
+ text-align: left;
+ width: 100%;
+ float: left;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #E2E9FB;
+ margin-bottom: 10px;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .mobile {
+ display: none;
+ }
+
+ .left_box {
+ float: left;
+ border-width: 1px;
+ width: 20%;
+ height: 100%;
+ padding: 0.5rem;
+ padding-left: 0.5rem;
+ border-radius: 1rem;
+ margin-bottom: 0.1rem;
+ font-size: small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 5px;
+ padding-left: 5px;
+ }
+
+ .right_box {
+ float: left;
+ border: 1px solid black;
+ border-width: 2px;
+ width: 78%;
+ height: 100%;
+ margin: auto;
+ padding: 0rem;
+ border-radius: 30px;
+ margin-right: 0%;
+ padding-left: 1rem;
+ padding-right: 10px;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ margin-left: 10px;
+ padding-bottom: 2rem;
+ margin-top: 0.5rem;
+ padding-top: 1rem;
+ background: #F4F6F6;
+
+ }
+
+ .hilightsoustitre {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .autres_formations {
+ margin-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ }
+
+ .img_banner {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 100%;
+ background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat;
+
+ }
+
+
+ .img_bannermg_WOimg {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 100%;
+ max-height: 12rem;
+ background-color: white;
+ }
+
+ .titre_formation {
+ color: #619e31;
+ font-size: 1.5rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.2rem;
+ }
+
+ .description {
+ text-align: justify;
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: 0.85rem;
+ word-break: break-word;
+ margin-left: 2%;
+ margin-right: 5%;
+ }
+
+ .caracteristique {
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: medium;
+ word-break: break-word;
+ font-weight: bold;
+ margin-left: 2%;
+ margin-right: 5%;
+ text-align: center;
+ }
+
+ .calage {
+ width: 2%;
+ }
+
+ .div_row_critere {
+ float: left;
+
+ width: 30%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: small;
+
+ }
+
+ .div_row_critere_gauche {
+ width: 62%;
+ float: left;
+ text-align: right;
+ font-weight: bold;
+ padding-right: 5px;
+ }
+
+ .div_row_critere_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ padding-left: 5px;
+ }
+
+ .div_row_critere_note {
+
+ width: 50%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ font-size: small;
+ font-weight: bold;
+
+ }
+
+ .div_row {
+ width: 80%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .ftion_tab_gauche {
+ width: 62%;
+ float: left;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ .ftion_tab_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ }
+
+ .forma_img_logo_class {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ padding: 0.3rem;
+ font-size: 11px;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+
+ text-align: center;
+ display: table-cell;
+
+ }
+
+ .training_img {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ width: 99%;
+ }
+
+ .vignet_title {
+ color: #619e31;
+ font-size: medium;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+ .vignet_desc {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ line-height: 1.43;
+ font-size: small;
+ margin-bottom: 4px;
+ color: #3b3e40;
+ word-break: break-word;
+ padding: 5px;
+ }
+
+ .text_surna {
+ z-index: 50;
+ font-size: xx-large;
+ color: white;
+ background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat;
+ height: 5rem;
+ width: 15rem;
+ margin-left: auto;
+ margin-right: auto;
+ top: 2rem;
+ margin-top: 1.5rem;
+ }
+
+ .left_box_for_mobile {
+ display: none;
+ }
+
+ .detail_class_submenu {
+ background: #d8edfc;
+ border-radius: 15px;
+ margin-right: 1rem;
+ padding: 0.3rem;
+ margin-bottom: 0.5rem;
+ width: 10rem;
+ text-align: center;
+ border: 1px solid #9cf;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ letter-spacing: 0.1rem;
+ font-weight: normal;
+ }
+
+ .detail_class_submenu:hover:active,
+ .detail_class_submenu:hover {
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu:focus {
+
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu_data {
+ width: 100%;
+ height: 7rem;
+ background-color: #d8edfc;
+ padding-left: 5px;
+ text-align: left;
+ padding: 0;
+ border: 0px;
+ color: #3b3e40;
+ padding-left: 5px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ border-radius: 10px;
+ border: 1px solid;
+ }
+
+ .detail_element {
+ border-radius: 3px;
+ display: inline-block;
+ background-color: white;
+ height: auto;
+ padding: 5px;
+ outline: 1px solid #ccc;
+
+ text-align: left;
+ margin-bottom: 2rem;
+ background-color: white;
+
+ border: 0px solid;
+ width: 100%;
+ margin-top: 1rem;
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+
+ .detail_element:hover {
+ -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%);
+ }
+
+ .bton_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ border-radius: 20rem;
+ background-color: red;
+ border: 2px solid red;
+ width: 12rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ letter-spacing: 1px;
+ position: fixed;
+ top: 15rem;
+ right: 5%;
+ height: 3rem;
+ z-index: 10000;
+ }
+
+ .bton_recontact {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ border-radius: 20rem;
+ background-color: #104277;
+ border: 2px solid #104277;
+ width: 12rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ letter-spacing: 1px;
+ position: fixed;
+ top: 20rem;
+ right: 5%;
+ height: 3rem;
+ z-index: 10000;
+ }
+
+
+ .row_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ }
+
+ .sous_titre {
+ color: #619e31;
+ font-size: medium;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+ .block_header_menu {
+
+ padding: 22px 72px;
+ gap: 10px;
+
+ position: relative;
+ width: 100%;
+ height: 100px;
+
+ top: 0px;
+
+ /* White */
+
+ background: #FFFFFF;
+ box-shadow: 0px 6px 8px rgba(30, 30, 30, 0.05);
+ }
+
+
+ .header_menu {
+ /* Menu Header */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px;
+ gap: 345px;
+
+ width: 100%;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .hader_menu_logo_mysy {
+ /* Logo MySy */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .logo_mysy {
+ /* Logo MySy */
+
+
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+ /* TRAINING */
+
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .menu_header {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 891px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_search {
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_menu {
+ /* Les formations */
+
+ cursor: pointer;
+ width: 150px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 17px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_rectangle {
+ width: 1px;
+ height: 24px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 10px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 5;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 288px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 7;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr {
+ /* Button */
+
+ cursor: pointer;
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 126px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr_txt {
+
+ width: 74px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .menu_header_cat_buton_connex {
+ /* Button */
+ cursor: pointer;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_connex_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_connex_txt {
+
+ width: 102px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .block_sous_header {
+ position: absolute;
+ width: 100%;
+ height: 210px;
+ left: 0px;
+ top: 100px;
+ background: #0A043C;
+ }
+
+ .block_sous_header_tag {
+ padding: 10px;
+ position: relative;
+ width: 200px;
+ height: 37px;
+ background: #FFF5DA;
+ border-radius: 4px;
+
+ }
+
+ .block_sous_header_tag_cpf {
+ /* Éligible au CPF */
+
+
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .block_sous_header_rate_title {
+
+ position: relative;
+ width: 90%;
+ left: 40px;
+ padding-top: 10px;
+ }
+
+ .rating {
+ padding: 0px;
+ width: 147.53px;
+ position: relative;
+ }
+
+ .sous_header_title {
+ width: 80%;
+ height: 76px;
+ text-align: left;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 26px;
+ line-height: 28px;
+
+ /* Light Grey */
+
+ color: #F7F7F7;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .header_background {
+ /* Header Background */
+
+
+ position: absolute;
+ width: 1440px;
+ height: 259px;
+ left: 0px;
+ top: 100px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ }
+
+ .block_info_page {
+ /* List Infos Page */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 14px;
+
+ position: absolute;
+ width: 60%;
+
+ left: 182px;
+ top: 350px;
+ text-align: left;
+ }
+
+ .block_info_page_pave_title_desc {
+ /* Title + Description */
+
+ text-align: justify;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 5px;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ font-size: 16px;
+ padding: 24px;
+
+ }
+
+
+ .block_info_page_pave_title_desc_long_text {
+ /* Title + Description */
+
+ text-align: justify;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 5px;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ padding: 24px;
+
+ }
+
+
+ .block_info_page_pave_title_desc_title {
+ /*
+ width: 100%;
+ height: 40px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 40px;
+ font-feature-settings: 'liga' off;
+ color: white;
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ background-color: #20BFA9;
+ text-align: center;
+ */
+
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ /* identical to box height, or 24px */
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .block_info_page_pave_title_desc_desc {
+ width: 100%;
+
+
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ }
+
+ .programme_block {
+ /* max-height: 18rem;
+ min-height: 10rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+
+
+ }
+
+ .description_block {
+ /* max-height: 13rem;
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+ }
+
+ .objectif_block {
+ /* max-height: 11rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+ }
+
+ .session_block {
+ max-height: 10rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;
+ padding: 0px;
+ }
+
+
+ .pourqui_block {
+ max-height: 7rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;
+ padding: 0px;
+ }
+
+
+
+
+ .block_sticky_info {
+ /* Sticky Infos */
+
+
+ position: relative;
+ width: 309px;
+ height: 700px;
+ left: 74%;
+ top: 160px;
+
+ padding: 5px;
+ background: white;
+ border-radius: 15px;
+ }
+
+ .block_sticky_info_price {
+
+ width: 50%;
+ height: 24px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ /* identical to box height, or 24px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ text-align: left;
+ float: left;
+ padding-left: 5px;
+
+ }
+
+ .block_sticky_info_img {
+
+
+ text-align: left;
+
+ }
+
+ .block_sticky_info_caracteristique {
+ /* Auto layout */
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ width: 90%;
+ left: 5%;
+ padding-left: 5px;
+
+ }
+
+ .block_sticky_info_caracteristique_title {
+ /* Caractéristiques : */
+
+
+ width: 90%;
+ height: 22px;
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 140%;
+ /* or 22px */
+ display: flex;
+ align-items: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_caracteristique_list {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 90%;
+ left: 5%;
+ height: 143px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 25px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc_title {
+ width: 50%;
+ height: 12px;
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ display: flex;
+ align-items: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc_desc {
+ width: 100%;
+ height: 12px;
+ text-align: right;
+ padding-right: 5px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ }
+
+ .block_sticky_info_Sessions {
+ /* Auto layout */
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ position: absolute;
+ width: 90%;
+ left: 5%;
+
+ top: 650px;
+ }
+
+ .block_sticky_info_Sessions_title {
+ /* Caractéristiques : */
+
+
+ width: 90%;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_Sessions_list_title_desc {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 55px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_Sessions_list_title_desc_title {
+ width: 50%;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_Sessions_list_title_desc_desc {
+ width: 50%;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .sticky_cats {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+ width: 90%;
+ height: 120px;
+ margin-left: auto;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .sticky_cats_buton_inscrire {
+
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+
+
+ height: 44px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .sticky_cats_buton_inscrire_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_inscrire_txt {
+ width: 74px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ cursor: pointer;
+
+ }
+
+
+ .sticky_cats_buton_info {
+
+
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+
+
+ height: 44px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #C7C9CE;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_info_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_info_txt {
+
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Green */
+
+ color: #20BFA9;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+
+ .sticky_social_icone {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+ left: 35%;
+ margin-bottom: 1.5rem;
+
+ }
+
+ .sticky_social_icone_SocialIcon {
+ height: 25px !important;
+ width: 25px !important;
+ }
+
+ .sticky_social_icone_facebook {
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+ .sticky_social_icone_link {
+
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .sticky_social_icone_twitter {
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ }
+
+ .sticky_organisme_title_desc {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+
+ width: 100%;
+ text-align: center;
+
+ margin-bottom: 1rem;
+
+ }
+
+ .sticky_organisme_title_desc_title {
+
+ height: 26px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 160%;
+ /* identical to box height, or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sticky_organisme_title_desc_desc {
+
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ text-decoration-line: underline;
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_crossell_meme_orga {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+
+ left: 182px;
+ top: 2200px;
+
+ }
+
+ .sous_crossell {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 100%;
+ height: 533px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_title {
+ width: 1076px;
+ height: 38px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 28px;
+ line-height: 38px;
+ margin-bottom: 0.5rem;
+
+ /* Black */
+
+ color: #1E1E1E;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_list_card {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 50px;
+ gap: 25px;
+
+ margin-left: 5%;
+ margin-right: 5%;
+ width: 90%;
+ height: 479px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ max-width: 1300px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .sous_crossell_list_card_card {
+ /* Card Vertical */
+
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8px;
+ gap: 16px;
+ isolation: isolate;
+
+ width: 32%;
+ height: 460px;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Medium Grey */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .sous_crossell_list_card_card_img {
+
+ height: 180px;
+
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .sous_crossell_list_card_card_tag_cpf {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+ position: relative;
+ width: 188px;
+ height: 37px;
+ top: -200px;
+ left: -20px;
+
+
+ /* Beige */
+
+ background: #FFF5DA;
+ border-radius: 0px 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ z-index: 1;
+ }
+
+ .sous_crossell_list_card_card_tag_cpf_txt_ok_cpf {
+ /* Éligible au CPF */
+
+ width: 97px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Green/Normal */
+ color: #0AA690;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sous_crossell_list_card_card_tag_cpf_txt_no_ok_cpf {
+ /* NON Éligible au CPF */
+
+ width: 127px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ color: #B74949;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sous_crossell_list_card_card_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ position: relative;
+ top: -30px;
+
+ }
+
+ .sous_crossell_list_card_card_content_rating {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 5.29px;
+
+ width: 100.59px;
+ height: 15px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_list_card_card_content_title {
+ height: 19px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, Times New Roman;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 120%;
+ /* or 19px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+ padding-left: 3px;
+ }
+
+
+ .sous_crossell_list_card_card_content_price {
+
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 140%;
+ text-transform: uppercase;
+ color: #3E6EE3;
+ flex: none;
+ flex-grow: 0;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 3px;
+ text-align: left;
+ }
+
+
+
+ .sous_crossell_list_card_card_CAT {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+ height: 120px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 3;
+ flex-grow: 0;
+ z-index: 3;
+ }
+
+ .sous_crossell_list_card_card_CAT_bton {
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+ width: 80%;
+ height: 44px;
+ background: #3E6EE3;
+ border-radius: 200px;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+
+
+
+ }
+
+ .sous_crossell_list_card_card_CAT_bton_txt {
+ font-family: Roboto, Verdana, Georgia, Arial, Times New Roman;
+
+ font-style: normal;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 126%;
+ /* identical to box height, or 18px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+
+ .training_img_crossel {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ height: 99%;
+ width: 100%;
+ }
+
+ .css-dqr9h-MuiRating-label {
+ margin-left: 2px;
+ }
+
+ .css-iljtu2-MuiRating-root {
+ font-size: 1.2rem;
+ }
+
+
+ .footer {
+ width: 100%;
+ position: relative;
+
+ z-index: -1;
+ }
+
+ .sticky_div_hilight {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ position: relative;
+ width: 99%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+
+ padding: 30px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+
+ .sticky_img_hilight1 {
+ /* Auto layout */
+ width: 100%;
+
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+
+ .img_hili {
+
+ border-radius: 15px;
+ max-width: 100%;
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 20px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 18px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ font-size: medium;
+ }
+
+
+
+ .block_stick_v2_092024 {
+
+ background-color: white;
+ min-height: 45rem;
+ border-radius: 15px;
+ margin-bottom: 2rem;
+ position: relative;
+ border: 1px solid #E2E9FB;
+ border-radius: 8px 8px 0px 0px;
+
+
+ width: 100%;
+ z-index: 50;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .Background_Header {
+
+ width: 100%;
+
+ left: 0px;
+ top: 0px;
+
+ /* Beige */
+
+ background: #FFF5DA;
+ }
+
+ .tag_eligle_cpf {
+ width: 30%;
+ height: auto;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 120%;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+ color: #0AA690;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ float: right;
+ text-align: center;
+ border: 1px solid;
+ border-radius: 5px;
+ margin-right: 10px;
+ margin-top: px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border: 1px solid #E2E9FB;
+ }
+
+ .block_prix_2025 {
+ text-align: left;
+ width: 100%;
+ float: left;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #E2E9FB;
+ margin-bottom: 10px;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .mobile {
+ display: none;
+ }
+
+ .left_box {
+ float: left;
+ border-width: 1px;
+ width: 20%;
+ height: 100%;
+ padding: 0.5rem;
+ padding-left: 0.5rem;
+ border-radius: 1rem;
+ margin-bottom: 0.1rem;
+ font-size: small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 5px;
+ padding-left: 5px;
+ }
+
+ .right_box {
+ float: left;
+ border: 1px solid black;
+ border-width: 2px;
+ width: 78%;
+ height: 100%;
+ margin: auto;
+ padding: 0rem;
+ border-radius: 30px;
+ margin-right: 0%;
+ padding-left: 1rem;
+ padding-right: 10px;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ margin-left: 10px;
+ padding-bottom: 2rem;
+ margin-top: 0.5rem;
+ padding-top: 1rem;
+ background: #F4F6F6;
+
+ }
+
+ .hilightsoustitre {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .autres_formations {
+ margin-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ }
+
+ .img_banner {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 100%;
+ background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat;
+
+ }
+
+
+ .img_bannermg_WOimg {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ padding-top: 10px;
+ width: 100%;
+ max-height: 12rem;
+ background-color: white;
+ }
+
+ .titre_formation {
+ color: #619e31;
+ font-size: 1.5rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.2rem;
+ }
+
+ .description {
+ text-align: justify;
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: 0.85rem;
+ word-break: break-word;
+ margin-left: 2%;
+ margin-right: 5%;
+ }
+
+ .caracteristique {
+ word-break: break-all;
+ line-height: 1.1rem;
+ color: #3b3e40;
+ font-size: medium;
+ word-break: break-word;
+ font-weight: bold;
+ margin-left: 2%;
+ margin-right: 5%;
+ text-align: center;
+ }
+
+ .calage {
+ width: 2%;
+ }
+
+ .div_row_critere {
+ float: left;
+
+ width: 30%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: small;
+
+ }
+
+ .div_row_critere_gauche {
+ width: 62%;
+ float: left;
+ text-align: right;
+ font-weight: bold;
+ padding-right: 5px;
+ }
+
+ .div_row_critere_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ padding-left: 5px;
+ }
+
+ .div_row_critere_note {
+
+ width: 50%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+ font-size: small;
+ font-weight: bold;
+
+ }
+
+ .div_row {
+ width: 80%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: left;
+
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .ftion_tab_gauche {
+ width: 62%;
+ float: left;
+ text-align: left;
+ font-weight: bold;
+ }
+
+ .ftion_tab_droite {
+ width: 38%;
+ float: left;
+ text-align: left;
+ }
+
+ .forma_img_logo_class {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ padding: 0.3rem;
+ font-size: 11px;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+
+ text-align: center;
+ display: table-cell;
+
+ }
+
+ .training_img {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ width: 99%;
+ }
+
+ .vignet_title {
+ color: #619e31;
+ font-size: medium;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+ .vignet_desc {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ line-height: 1.43;
+ font-size: small;
+ margin-bottom: 4px;
+ color: #3b3e40;
+ word-break: break-word;
+ padding: 5px;
+ }
+
+ .text_surna {
+ z-index: 50;
+ font-size: xx-large;
+ color: white;
+ background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat;
+ height: 5rem;
+ width: 15rem;
+ margin-left: auto;
+ margin-right: auto;
+ top: 2rem;
+ margin-top: 1.5rem;
+ }
+
+ .left_box_for_mobile {
+ display: none;
+ }
+
+ .detail_class_submenu {
+ background: #d8edfc;
+ border-radius: 15px;
+ margin-right: 1rem;
+ padding: 0.3rem;
+ margin-bottom: 0.5rem;
+ width: 10rem;
+ text-align: center;
+ border: 1px solid #9cf;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ letter-spacing: 0.1rem;
+ font-weight: normal;
+ }
+
+ .detail_class_submenu:hover:active,
+ .detail_class_submenu:hover {
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu:focus {
+
+ background-color: #104277;
+ color: white;
+ }
+
+ .detail_class_submenu_data {
+ width: 100%;
+ height: 7rem;
+ background-color: #d8edfc;
+ padding-left: 5px;
+ text-align: left;
+ padding: 0;
+ border: 0px;
+ color: #3b3e40;
+ padding-left: 5px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ border-radius: 10px;
+ border: 1px solid;
+ }
+
+ .detail_element {
+ border-radius: 3px;
+ display: inline-block;
+ background-color: white;
+ height: auto;
+ padding: 5px;
+ outline: 1px solid #ccc;
+
+ text-align: left;
+ margin-bottom: 2rem;
+ background-color: white;
+
+ border: 0px solid;
+ width: 100%;
+ margin-top: 1rem;
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+
+ .detail_element:hover {
+ -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%);
+ }
+
+ .bton_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ border-radius: 20rem;
+ background-color: red;
+ border: 2px solid red;
+ width: 12rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ letter-spacing: 1px;
+ position: fixed;
+ top: 15rem;
+ right: 5%;
+ height: 3rem;
+ z-index: 10000;
+ }
+
+ .bton_recontact {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ border-radius: 20rem;
+ background-color: #104277;
+ border: 2px solid #104277;
+ width: 12rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ letter-spacing: 1px;
+ position: fixed;
+ top: 20rem;
+ right: 5%;
+ height: 3rem;
+ z-index: 10000;
+ }
+
+
+ .row_inscription {
+ color: white;
+ text-align: right;
+ padding-right: 2rem;
+ }
+
+ .sous_titre {
+ color: #619e31;
+ font-size: medium;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: center;
+ letter-spacing: 0.1rem;
+ }
+
+ .block_header_menu {
+
+ padding: 22px 72px;
+ gap: 10px;
+
+ position: relative;
+ width: 100%;
+ height: 100px;
+
+ top: 0px;
+
+ /* White */
+
+ background: #FFFFFF;
+ box-shadow: 0px 6px 8px rgba(30, 30, 30, 0.05);
+ }
+
+
+ .header_menu {
+ /* Menu Header */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px;
+ gap: 345px;
+
+ width: 100%;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .hader_menu_logo_mysy {
+ /* Logo MySy */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .logo_mysy {
+ /* Logo MySy */
+
+
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+ /* TRAINING */
+
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .menu_header {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 891px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_search {
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_menu {
+ /* Les formations */
+
+ cursor: pointer;
+ width: 150px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 17px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_rectangle {
+ width: 1px;
+ height: 24px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 10px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 5;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 288px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 7;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr {
+ /* Button */
+
+ cursor: pointer;
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 126px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_inscr_txt {
+
+ width: 74px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .menu_header_cat_buton_connex {
+ /* Button */
+ cursor: pointer;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_connex_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .menu_header_cat_buton_connex_txt {
+
+ width: 102px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .block_sous_header {
+ position: absolute;
+ width: 100%;
+ height: 210px;
+ left: 0px;
+ top: 100px;
+ background: #0A043C;
+ }
+
+ .block_sous_header_tag {
+ padding: 10px;
+ position: relative;
+ width: 200px;
+ height: 37px;
+ background: #FFF5DA;
+ border-radius: 4px;
+
+ }
+
+ .block_sous_header_tag_cpf {
+ /* Éligible au CPF */
+
+
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .block_sous_header_rate_title {
+
+ position: relative;
+ width: 90%;
+ left: 180px;
+ padding-top: 10px;
+ }
+
+ .rating {
+ padding: 0px;
+ width: 147.53px;
+ position: relative;
+ }
+
+ .sous_header_title {
+ width: 80%;
+ height: 76px;
+ text-align: left;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 26px;
+ line-height: 28px;
+
+ /* Light Grey */
+
+ color: #F7F7F7;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .header_background {
+ /* Header Background */
+
+
+ position: absolute;
+ width: 1440px;
+ height: 259px;
+ left: 0px;
+ top: 100px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ }
+
+ .block_info_page {
+ /* List Infos Page */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 14px;
+
+ position: absolute;
+ width: 60%;
+
+ left: 182px;
+ top: 350px;
+ text-align: left;
+ }
+
+ .block_info_page_pave_title_desc {
+ /* Title + Description */
+
+ text-align: justify;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 5px;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ font-size: 16px;
+ padding: 24px;
+
+ }
+
+
+ .block_info_page_pave_title_desc_long_text {
+ /* Title + Description */
+
+ text-align: justify;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 5px;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ padding: 24px;
+
+ }
+
+
+ .block_info_page_pave_title_desc_title {
+ /*
+ width: 100%;
+ height: 40px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 40px;
+ font-feature-settings: 'liga' off;
+ color: white;
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ background-color: #20BFA9;
+ text-align: center;
+ */
+
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ /* identical to box height, or 24px */
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .block_info_page_pave_title_desc_desc {
+ width: 100%;
+
+
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ }
+
+ .programme_block {
+ /* max-height: 18rem;
+ min-height: 10rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+
+
+ }
+
+ .description_block {
+ /* max-height: 13rem;
+ min-height: 8rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+ }
+
+ .objectif_block {
+ /* max-height: 11rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;*/
+
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 180%;
+ /* or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 0px;
+ }
+
+ .session_block {
+ max-height: 10rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;
+ padding: 0px;
+ }
+
+
+ .pourqui_block {
+ max-height: 7rem;
+ min-height: 5rem;
+ overflow: auto;
+ padding: 10px;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ line-height: 30px;
+ font-size: 14px;
+ padding: 0px;
+ }
+
+
+
+
+ .block_sticky_info {
+ /* Sticky Infos */
+
+
+ position: relative;
+ width: 309px;
+ height: 700px;
+ left: 74%;
+ top: 160px;
+
+ padding: 5px;
+ background: white;
+ border-radius: 15px;
+ }
+
+ .block_sticky_info_price {
+
+ width: 50%;
+ height: 24px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 120%;
+ /* identical to box height, or 24px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ text-align: left;
+ float: left;
+ padding-left: 5px;
+
+ }
+
+ .block_sticky_info_img {
+
+
+ text-align: left;
+
+ }
+
+ .block_sticky_info_caracteristique {
+ /* Auto layout */
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ width: 90%;
+ left: 5%;
+ padding-left: 5px;
+
+ }
+
+ .block_sticky_info_caracteristique_title {
+ /* Caractéristiques : */
+
+
+ width: 90%;
+ height: 22px;
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 140%;
+ /* or 22px */
+ display: flex;
+ align-items: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_caracteristique_list {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 90%;
+ left: 5%;
+ height: 143px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 25px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc_title {
+ width: 50%;
+ height: 12px;
+
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ display: flex;
+ align-items: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_caracteristique_list_title_desc_desc {
+ width: 100%;
+ height: 12px;
+ text-align: right;
+ padding-right: 5px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ }
+
+ .block_sticky_info_Sessions {
+ /* Auto layout */
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ position: absolute;
+ width: 90%;
+ left: 5%;
+
+ top: 650px;
+ }
+
+ .block_sticky_info_Sessions_title {
+ /* Caractéristiques : */
+
+
+ width: 90%;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_Sessions_list_title_desc {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 55px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_sticky_info_Sessions_list_title_desc_title {
+ width: 50%;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_sticky_info_Sessions_list_title_desc_desc {
+ width: 50%;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .sticky_cats {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+ width: 90%;
+ height: 120px;
+ margin-left: auto;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .sticky_cats_buton_inscrire {
+
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+
+ width: 286px;
+ height: 44px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ cursor: pointer;
+
+ }
+
+ .sticky_cats_buton_inscrire_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_inscrire_txt {
+ width: 74px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ cursor: pointer;
+
+ }
+
+
+ .sticky_cats_buton_info {
+
+
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+
+ width: 286px;
+ height: 44px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #C7C9CE;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_info_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sticky_cats_buton_info_txt {
+
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Green */
+
+ color: #20BFA9;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+
+ .sticky_social_icone {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+ left: 35%;
+ margin-bottom: 1.5rem;
+
+ }
+
+ .sticky_social_icone_SocialIcon {
+ height: 25px !important;
+ width: 25px !important;
+ }
+
+ .sticky_social_icone_facebook {
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+ .sticky_social_icone_link {
+
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .sticky_social_icone_twitter {
+
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ }
+
+ .sticky_organisme_title_desc {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+
+ width: 100%;
+ text-align: center;
+
+ margin-bottom: 1rem;
+
+ }
+
+ .sticky_organisme_title_desc_title {
+
+ height: 26px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 160%;
+ /* identical to box height, or 26px */
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sticky_organisme_title_desc_desc {
+
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ text-decoration-line: underline;
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_crossell_meme_orga {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+
+ left: 182px;
+ top: 2200px;
+
+ }
+
+ .sous_crossell {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 100%;
+ height: 533px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_title {
+ width: 1076px;
+ height: 38px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 28px;
+ line-height: 38px;
+ margin-bottom: 0.5rem;
+
+ /* Black */
+
+ color: #1E1E1E;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_list_card {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 50px;
+ gap: 25px;
+
+ margin-left: 5%;
+ margin-right: 5%;
+ width: 90%;
+ height: 479px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ max-width: 1300px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .sous_crossell_list_card_card {
+ /* Card Vertical */
+
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8px;
+ gap: 16px;
+ isolation: isolate;
+
+ width: 32%;
+ height: 460px;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Medium Grey */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .sous_crossell_list_card_card_img {
+
+ height: 180px;
+
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .sous_crossell_list_card_card_tag_cpf {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+ position: relative;
+ width: 188px;
+ height: 37px;
+ top: -200px;
+ left: -20px;
+
+
+ /* Beige */
+
+ background: #FFF5DA;
+ border-radius: 0px 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ z-index: 1;
+ }
+
+ .sous_crossell_list_card_card_tag_cpf_txt_ok_cpf {
+ /* Éligible au CPF */
+
+ width: 97px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Green/Normal */
+ color: #0AA690;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sous_crossell_list_card_card_tag_cpf_txt_no_ok_cpf {
+ /* NON Éligible au CPF */
+
+ width: 127px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ color: #B74949;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .sous_crossell_list_card_card_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ position: relative;
+ top: -30px;
+
+ }
+
+ .sous_crossell_list_card_card_content_rating {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 5.29px;
+
+ width: 100.59px;
+ height: 15px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_crossell_list_card_card_content_title {
+ height: 19px;
+
+ font-family: Roboto, Verdana, Georgia, Arial, Times New Roman;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 120%;
+ /* or 19px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+ padding-left: 3px;
+ }
+
+
+ .sous_crossell_list_card_card_content_price {
+
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 140%;
+ text-transform: uppercase;
+ color: #3E6EE3;
+ flex: none;
+ flex-grow: 0;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ padding: 3px;
+ text-align: left;
+ }
+
+
+
+ .sous_crossell_list_card_card_CAT {
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+ height: 120px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 3;
+ flex-grow: 0;
+ z-index: 3;
+ }
+
+ .sous_crossell_list_card_card_CAT_bton {
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+ width: 80%;
+ height: 44px;
+ background: #3E6EE3;
+ border-radius: 200px;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ cursor: pointer;
+
+
+ }
+
+ .sous_crossell_list_card_card_CAT_bton_txt {
+ font-family: Roboto, Verdana, Georgia, Arial, Times New Roman;
+
+ font-style: normal;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 126%;
+ /* identical to box height, or 18px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+ }
+
+ .training_img_crossel {
+ border-radius: 10px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ height: 99%;
+ }
+
+ .css-dqr9h-MuiRating-label {
+ margin-left: 2px;
+ }
+
+ .css-iljtu2-MuiRating-root {
+ font-size: 1.2rem;
+ }
+
+
+ .footer {
+ width: 100%;
+ position: relative;
+
+ z-index: -1;
+ }
+
+ .sticky_div_hilight {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ position: relative;
+ width: 99%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+
+ padding: 30px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+
+ .sticky_img_hilight1 {
+ /* Auto layout */
+ width: 100%;
+ padding: 30px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+
+ .img_hili {
+
+ border-radius: 15px;
+ max-width: 100%;
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 20px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 18px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ font-size: medium;
+ }
+
+
+
+ .block_stick_v2_092024 {
+
+ background-color: white;
+ min-height: 45rem;
+ border-radius: 15px;
+ margin-bottom: 2rem;
+ position: relative;
+ border: 1px solid #E2E9FB;
+ border-radius: 8px 8px 0px 0px;
+
+
+ width: 100%;
+ z-index: 50;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .Background_Header {
+
+ width: 100%;
+
+ left: 0px;
+ top: 0px;
+
+ /* Beige */
+
+ background: #FFF5DA;
+ }
+
+ .tag_eligle_cpf {
+ width: 30%;
+ height: auto;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 120%;
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+ color: #0AA690;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ float: right;
+ text-align: center;
+ border: 1px solid;
+ border-radius: 5px;
+ margin-right: 10px;
+ margin-top: px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border: 1px solid #E2E9FB;
+ }
+
+ .block_prix_2025 {
+ text-align: left;
+ width: 100%;
+ float: left;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #E2E9FB;
+ margin-bottom: 10px;
+ }
+ }
+
+ /* end media */
+}
\ No newline at end of file
diff --git a/src/components/fonctionalites_automatic_files/Badge_Fonctionnalite.js b/src/components/fonctionalites_automatic_files/Badge_Fonctionnalite.js
new file mode 100644
index 0000000..2c985a2
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/Badge_Fonctionnalite.js
@@ -0,0 +1,78 @@
+import React from 'react';
+
+const Badge_Fonctionnalite = (props) => {
+
+
+ return (
+
+
+
+
+
+
+
+ {props.badge.title}
+
+
+
+
+ {props.badge.detail_1 &&
+ {props.badge.detail_1 && {props.badge.detail_1} }
+ {props.badge.detail_1 && {props.badge.detail_2} }
+ {props.badge.detail_1 && {props.badge.detail_3} }
+ }
+
+
+
+ );
+};
+
+// Default props
+Badge_Fonctionnalite.defaultProps = {
+ // Add default props if needed
+};
+
+export default Badge_Fonctionnalite;
+
diff --git a/src/components/fonctionalites_automatic_files/CRM_Layout/MySy_CRM_Section.jsx b/src/components/fonctionalites_automatic_files/CRM_Layout/MySy_CRM_Section.jsx
new file mode 100644
index 0000000..33afd21
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/CRM_Layout/MySy_CRM_Section.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import './../new_fonctionalites_2025.css'
+
+const MySy_CRM_Section = () => {
+ return (
+
+ {/* Right Image */}
+
+
+ {/* Left Content Container */}
+
+ {/* Title + Description Container */}
+
+ {/* Title Section */}
+
+
+ Gestion client (CRM)
+
+
+ Gérez vos clients et optimisez votre activité
+
+
+
+ {/* Description */}
+
+ Suivez en temps réel vos clients, vos activités en cours, à venir ou en retard. Ce module vous permet d'éditer et d'envoyer vos devis, de les convertir en commandes, puis de les facturer en toute simplicité.
+
+ Grâce à un tableau de bord intuitif, visualisez vos revenus actuels et à venir pour prendre les meilleures décisions de gestion.
+
+
+
+
+ {/* Button */}
+
{
+ e.currentTarget.style.background = '#f5f5f5';
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.background = 'transparent';
+ }}>
+
+ Découvrez nos tarifs
+
+
+
+
+
+
+ );
+};
+
+export default MySy_CRM_Section;
+
diff --git a/src/components/fonctionalites_automatic_files/ContentSection.js b/src/components/fonctionalites_automatic_files/ContentSection.js
new file mode 100644
index 0000000..b291855
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/ContentSection.js
@@ -0,0 +1,112 @@
+import React from 'react';
+
+const ContentSection = ({
+ title = "GESTION ADMNISTRATIVE",
+ heading = "Simplifiez vos processus administratifs.",
+ description = `Gagnez du temps et réduisez les erreurs grâce à des outils performants et intuitifs. Gérez facilement le processus d'inscription des apprenants, les émargements (à distance ou en présentiel) et les évaluations.
+
+Cette solution centralisée vous permet également d'administrer les enseignants, le matériel pédagogique, le planning de formation et les agendas.
+Générez en un clic votre Bilan Pédagogique et Financier (BPF) et partagez vos formations en ligne grâce à un intranet intégré.`,
+ buttonText = "Découvrez nos tarifs",
+ imageSrc = "img/fonctionnalite_img/img_gestion_admin.png"
+}) => {
+ const styles = {
+ section: {
+ display: 'flex',
+ padding: '80px',
+ gap: '80px',
+ background: '#ffffff',
+ width: '80%',
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ paddingTop: '10px',
+ },
+ contentContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '540px',
+ gap: '32px',
+ },
+ titleContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '4px',
+ width: '100%',
+ },
+ categoryTitle: {
+ fontFamily: 'DM Sans',
+ fontSize: '16px',
+ fontWeight: 700,
+ lineHeight: '16px',
+ color: '#3e6ee3',
+ textTransform: 'uppercase',
+ },
+ mainHeading: {
+ fontFamily: 'DM Sans',
+ fontSize: '40px',
+ fontWeight: 700,
+ lineHeight: '120%',
+ color: '#16274f',
+ marginTop: '20px',
+ },
+ description: {
+ fontFamily: 'Inter',
+ fontSize: '16px',
+ lineHeight: '24px',
+ color: '#4b5162',
+ opacity: 0.8,
+ whiteSpace: 'pre-line',
+ },
+ button: {
+ display: 'flex',
+ padding: '12px 20px',
+ borderRadius: '200px',
+ border: '1px solid #c7c9ce',
+ cursor: 'pointer',
+ transition: 'all 0.3s ease',
+ justifyContent: 'center',
+ },
+ buttonText: {
+ fontFamily: 'DM Sans',
+ fontSize: '16px',
+ fontWeight: 700,
+ color: '#4b5162',
+ padding: '0 8px',
+
+ },
+ image: {
+ width: '692px',
+ height: '692px',
+ borderRadius: '16px',
+ objectFit: 'cover',
+ }
+ };
+
+ return (
+
+
+
+
{description}
+
{
+ e.currentTarget.style.backgroundColor = '#f5f6f7';
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.backgroundColor = 'transparent';
+ }}
+ >
+ {buttonText}
+
+
+
+
+
+
+ );
+};
+
+export default ContentSection;
+
diff --git a/src/components/fonctionalites_automatic_files/E-Learning_Layout/ELearningSection.jsx b/src/components/fonctionalites_automatic_files/E-Learning_Layout/ELearningSection.jsx
new file mode 100644
index 0000000..f8011b8
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/E-Learning_Layout/ELearningSection.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+const ELearningSection = () => {
+ return (
+
+ {/* Left Content Container */}
+
+ {/* Title + Description Container */}
+
+ {/* Title Section */}
+
+
+ e-learning
+
+
+ Enrichissez vos formations avec des outils e-learning
+
+
+
+ {/* Description */}
+
+ Créez votre propre espace de formation en ligne et publiez vos cours facilement.
+
+ Chaque apprenant, grâce à son identifiant et mot de passe, peut accéder à ses formations, interagir avec son enseignant via email ou réseaux sociaux et progresser à son rythme.
+
+ Les enseignants disposent d'outils pour concevoir des travaux dirigés, suivre le temps de réponse des apprenants et corriger leurs exercices.
+
+ Un tableau de bord détaillé permet d'analyser le parcours et la progression de chaque apprenant en temps réel.
+
+
+
+ {/* Button */}
+
{
+ e.currentTarget.style.background = '#f5f5f5';
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.background = 'transparent';
+ }}>
+
+ Découvrez nos tarifs
+
+
+
+
+ {/* Right Image */}
+
+
+ );
+};
+
+export default ELearningSection;
+
diff --git a/src/components/fonctionalites_automatic_files/ELearningSection.js b/src/components/fonctionalites_automatic_files/ELearningSection.js
new file mode 100644
index 0000000..0f9b678
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/ELearningSection.js
@@ -0,0 +1,122 @@
+import React from 'react';
+
+const ELearningSection = () => {
+ return (
+
+ {/* Left Content Container */}
+
+ {/* Title + Description Container */}
+
+ {/* Title Section */}
+
+
+ e-learning
+
+
+ Enrichissez vos formations avec des outils e-learning
+
+
+
+ {/* Description */}
+
+ Créez votre propre espace de formation en ligne et publiez vos cours facilement.
+
+ Chaque apprenant, grâce à son identifiant et mot de passe, peut accéder à ses formations, interagir avec son enseignant via email ou réseaux sociaux et progresser à son rythme.
+
+ Les enseignants disposent d'outils pour concevoir des travaux dirigés, suivre le temps de réponse des apprenants et corriger leurs exercices.
+
+ Un tableau de bord détaillé permet d'analyser le parcours et la progression de chaque apprenant en temps réel.
+
+
+
+ {/* Button */}
+
{
+ e.currentTarget.style.background = '#f5f5f5';
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.background = 'transparent';
+ }}
+ >
+
+ Découvrez nos tarifs
+
+
+
+
+ {/* Right Image */}
+
+
+ );
+};
+
+export default ELearningSection;
+
diff --git a/src/components/fonctionalites_automatic_files/FeatureCard.js b/src/components/fonctionalites_automatic_files/FeatureCard.js
new file mode 100644
index 0000000..b252708
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/FeatureCard.js
@@ -0,0 +1,74 @@
+import React from 'react';
+
+const FeatureCard = ({ iconUrl, title, description, buttonText, module }) => {
+ return (
+
+
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
{
+ e.target.style.backgroundColor = '#f5f5f5';
+ }}
+ onMouseOut={(e) => {
+ e.target.style.backgroundColor = 'transparent';
+ }}
+
+ onClick={(e) => {
+
+ if (String(module) === "gestion_admin") {
+ window.open(
+ "/new_header_footer#badge_gestion_admin",
+ '_self'
+ );
+ }
+ else if (String(module) === "crm") {
+ window.open(
+ "/new_header_footer#badge_crm",
+ '_self'
+ );
+ }
+ else if (String(module) === "lms") {
+ window.open(
+ "/new_header_footer#badge_lms",
+ '_self'
+ );
+ }
+
+
+ }}
+ >
+ {buttonText}
+
+
+ );
+};
+
+FeatureCard.defaultProps = {
+ iconUrl: 'https://dashboard.codeparrot.ai/api/image/Z6Nq6qvsm-LWpee_/icons.png',
+ title: 'Feature Title',
+ description: 'Feature description goes here',
+ buttonText: 'Découvrir',
+ module: "non"
+};
+
+export default FeatureCard;
+
diff --git a/src/components/fonctionalites_automatic_files/FeaturesLayout.js b/src/components/fonctionalites_automatic_files/FeaturesLayout.js
new file mode 100644
index 0000000..47cd47e
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/FeaturesLayout.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import FeatureCard from './FeatureCard';
+
+const FeaturesLayout = () => {
+ return (
+
+
+
+
+
Simplifiez, optimisez et enrichissez :
+
+
+
+
+
+
+
+ );
+};
+
+export default FeaturesLayout;
+
diff --git a/src/components/fonctionalites_automatic_files/Layout.js b/src/components/fonctionalites_automatic_files/Layout.js
new file mode 100644
index 0000000..4cedd2d
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/Layout.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import StatisticsSection from './StatisticsSection';
+import ContentSection from './ContentSection';
+import LearningGraphSection from './LearningGraphSection';
+
+const Layout = () => {
+ return (
+
+ );
+};
+
+export default Layout;
+
diff --git a/src/components/fonctionalites_automatic_files/LearnersChartSection.js b/src/components/fonctionalites_automatic_files/LearnersChartSection.js
new file mode 100644
index 0000000..a7f4754
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/LearnersChartSection.js
@@ -0,0 +1,180 @@
+import React from 'react';
+
+const LearnersChartSection = () => {
+ const chartData = {
+ months: ['Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ values: [
+ {x: 0, y: 200},
+ {x: 1, y: 500},
+ {x: 2, y: 700},
+ {x: 3, y: 400},
+ {x: 4, y: 1000}
+ ]
+ };
+
+ return (
+
+
+ Nombre d'apprenants
+
+
+
+ {/* Y-axis labels */}
+
+ {['5000', '1000', '500', '100', '0'].map((value, i) => (
+
+ {value}
+
+ ))}
+
+
+ {/* Chart area */}
+
+ {/* Grid lines */}
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+ {/* Chart lines */}
+
+
+ {/* Tooltip */}
+
+
+
+
700
+
+
+
apprenants
+
+
+
+
+
+
+ {/* X-axis labels */}
+
+ {chartData.months.map((month, i) => (
+
+ {month}
+
+ ))}
+
+
+
+
+ );
+};
+
+export default LearnersChartSection;
+
diff --git a/src/components/fonctionalites_automatic_files/LearningChartSection.js b/src/components/fonctionalites_automatic_files/LearningChartSection.js
new file mode 100644
index 0000000..e16550f
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/LearningChartSection.js
@@ -0,0 +1,135 @@
+import React from 'react';
+
+const LearningChartSection = ({ width = '100%', height = 'auto' }) => {
+ const chartData = {
+ months: ['Mar', 'Apr', 'May', 'Jun', 'Jul'],
+ values: [
+ { x: 0, y: 300 },
+ { x: 1, y: 700 },
+ { x: 2, y: 500 },
+ { x: 3, y: 1000 },
+ { x: 4, y: 800 }
+ ]
+ };
+
+ return (
+
+
+ Nombre d'apprenants
+
+
+
+ {/* Y-axis labels */}
+
+ 5000
+ 1000
+ 500
+ 100
+ 0
+
+
+ {/* Chart area */}
+
+ {/* Grid lines */}
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+ {/* Tooltip */}
+
+
+ {/* X-axis labels */}
+
+ {chartData.months.map((month, i) => (
+ {month}
+ ))}
+
+
+
+
+ );
+};
+
+export default LearningChartSection;
+
diff --git a/src/components/fonctionalites_automatic_files/LearningGraphSection.js b/src/components/fonctionalites_automatic_files/LearningGraphSection.js
new file mode 100644
index 0000000..19e130d
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/LearningGraphSection.js
@@ -0,0 +1,128 @@
+import React from 'react';
+
+const LearningGraphSection = ({ current = 700, months = ['Mar', 'Apr', 'May', 'Jun', 'Jul'], yAxis = [5000, 1000, 500, 100, 0] }) => {
+ return (
+
+
+ Nombre d'apprenants
+
+
+
+ {/* Y-axis labels */}
+
+ {yAxis.map((value, index) => (
+ {value}
+ ))}
+
+
+ {/* Graph area */}
+
+ {/* Graph lines */}
+
+ {[...Array(5)].map((_, index) => (
+
+ ))}
+
+ {/* Graph content would go here */}
+
+
+ {current}
+
+
+ apprenants
+
+
+
+
+ {/* X-axis labels */}
+
+ {months.map((month, index) => (
+ {month}
+ ))}
+
+
+
+
+ );
+};
+
+export default LearningGraphSection;
+
diff --git a/src/components/fonctionalites_automatic_files/StatisticsSection.js b/src/components/fonctionalites_automatic_files/StatisticsSection.js
new file mode 100644
index 0000000..ce61286
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/StatisticsSection.js
@@ -0,0 +1,77 @@
+import React from 'react';
+
+const StatisticsSection = ({ data = {
+ title: "Statistiques",
+ pieChartData: [
+ { value: 75, color: '#2F54EB' },
+ { value: 25, color: '#E6F7FF' }
+ ],
+ listItems: [
+ { text: "Item 1", width: "80%" },
+ { text: "Item 2", width: "60%" },
+ { text: "Item 3", width: "40%" },
+ { text: "Item 4", width: "20%" }
+ ]
+}}) => {
+ return (
+
+
+ {data.title}
+
+
+
+
+
+
+
+ {data.listItems.map((item, index) => (
+
+ ))}
+
+
+ );
+};
+
+export default StatisticsSection;
+
diff --git a/src/components/fonctionalites_automatic_files/img/img_evaluation.png b/src/components/fonctionalites_automatic_files/img/img_evaluation.png
new file mode 100644
index 0000000..80cbfec
Binary files /dev/null and b/src/components/fonctionalites_automatic_files/img/img_evaluation.png differ
diff --git a/src/components/fonctionalites_automatic_files/new_fonctionalites_2025.css b/src/components/fonctionalites_automatic_files/new_fonctionalites_2025.css
new file mode 100644
index 0000000..0a86263
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/new_fonctionalites_2025.css
@@ -0,0 +1,2715 @@
+.new_fonctionalites_2025 {
+
+ @media only screen and (max-width: 600px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 590px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 5px;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+
+ min-height: 202px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ height: 500px;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 100%;
+ min-height: 134px;
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 36px;
+ line-height: 120%;
+ text-align: center;
+ color: #16274F;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 5rem;
+
+ }
+
+ .title_and_cat_title_text2 {
+ /* Que ce soit pour simplifier vos tâches administratives, optimiser la gestion de vos apprenants ou enrichir vos parcours e-learning, MySy Training vous accompagne. */
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_badge {
+ display: flex;
+ gap: 80px;
+ background: rgb(255, 255, 255);
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ }
+
+
+ .block_display_flex_badge {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+ .block_badge_fonctionnalite {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #f8fafd;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .featureslayout_block1 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 20px;
+ background: #FFFFFF;
+ margin-bottom: 5rem;
+ }
+
+ .featureslayout_block2 {
+ text-align: center;
+ margin-bottom: 18px;
+ }
+
+ .featureslayout_block_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 24px;
+ color: #16274f;
+ }
+
+ .featureslayout_block_cards {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ justify-content: center;
+ flex-grow: 1;
+ }
+
+
+ .featurecard_top_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding: 40px 16px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #0aa690;
+ min-width: 320px;
+ max-width: 400px;
+ flex: 1;
+ align-items: center;
+ box-sizing: border-box;
+
+ }
+
+
+ .featurecard_top_block2 {
+ width: 88px;
+ height: 88px;
+ }
+
+
+
+ .featurecard_top_block3 {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 100%;
+ text-align: center;
+ }
+
+
+ .featurecard_top_block_h3 {
+ font-family: 'DM Sans';
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_p {
+ font-family: 'Inter';
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 160%;
+ color: #4b5162;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_bton {
+ padding: 12px 20px;
+ background: transparent;
+ border: 1px solid #c7c9ce;
+ border-radius: 200px;
+ cursor: pointer;
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ color: #4b5162;
+ transition: all 0.2s ease-in-out;
+ }
+
+
+ .contentsection_section {
+ display: flex;
+
+ gap: 20px;
+ background: #ffffff;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ flex-direction: column;
+ }
+
+
+ .contentsection_contentcontainer {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 32px;
+ }
+
+ .contentsection_titlecontainer {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .contentsection_categorytitle {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .contentsection_mainheading {
+ font-family: 'DM Sans';
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ margin-top: 20px;
+ }
+
+ .contentsection_description {
+ font-family: 'Inter';
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ white-space: pre-line;
+ text-align: left;
+ }
+
+ .contentsection_button {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .contentsection_buttonText {
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .contentsection_image {
+ width: 100%;
+ height: unset;
+ border-radius: 16px;
+ object-fit: cover;
+ }
+
+ .contentsection_contentcontainer_img {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 32px;
+ }
+
+
+ .mysy_crm_section_block1 {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ background: #FFFFFF;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ flex-direction: column;
+
+ }
+
+
+ .mysy_crm_section_block_image {
+ width: 100%;
+ height: 25rem;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_crm.png");
+ background-size: cover;
+ background-position: center;
+
+ }
+
+ .mysy_crm_section_block_text {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 120%;
+ color: #16274f;
+ text-transform: uppercase;
+ margin: 20px 0 0 0;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ text-align: left;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+
+ }
+
+ .elearningsection_block1 {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ background: #FFFFFF;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ flex-direction: column;
+ }
+
+
+ .elearningsection_block2 {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 100%;
+ }
+
+
+ .elearningsection_text_title {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .elearningsection_text_title_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+
+ .elearningsection_text_title_title_span {
+
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .elearningsection_text_title_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: '20px 0 0 0';
+ }
+
+ .elearningsection_text_title_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ text-align: left;
+ }
+
+
+ .elearningsection_text_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .elearningsection_text_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .elearningsection_img {
+ width: 100%;
+ height: 25rem;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_lms.png");
+ background-size: cover;
+ background-position: center;
+ }
+
+
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 420px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 20px;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+ top: 176px;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+
+ min-height: 202px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 90%;
+ min-height: 134px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ /* or 67px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text2 {
+ /* Que ce soit pour simplifier vos tâches administratives, optimiser la gestion de vos apprenants ou enrichir vos parcours e-learning, MySy Training vous accompagne. */
+
+
+ height: 48px;
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 50px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_badge {
+ display: flex;
+ gap: 80px;
+ background: rgb(255, 255, 255);
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ }
+
+
+ .block_display_flex_badge {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+ .block_badge_fonctionnalite {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #f8fafd;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .featureslayout_block1 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 20px;
+ background: #FFFFFF;
+ margin-bottom: 5rem;
+ }
+
+ .featureslayout_block2 {
+ text-align: center;
+ margin-bottom: 48px;
+ }
+
+ .featureslayout_block_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 24px;
+ color: #16274f;
+ }
+
+ .featureslayout_block_cards {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ justify-content: center;
+ flex-grow: 1;
+ }
+
+
+ .featurecard_top_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 15px 10px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #0aa690;
+ min-width: 200px;
+ max-width: 300px;
+ flex: 1;
+ align-items: center;
+ box-sizing: border-box;
+
+ }
+
+
+ .featurecard_top_block2 {
+ width: 88px;
+ height: 88px;
+ }
+
+
+
+ .featurecard_top_block3 {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 90%;
+ text-align: center;
+ }
+
+
+ .featurecard_top_block_h3 {
+ font-family: 'DM Sans';
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_p {
+ font-family: 'Inter';
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 160%;
+ color: #4b5162;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_bton {
+ padding: 12px 20px;
+ background: transparent;
+ border: 1px solid #c7c9ce;
+ border-radius: 200px;
+ cursor: pointer;
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ color: #4b5162;
+ transition: all 0.2s ease-in-out;
+ }
+
+
+ .contentsection_section {
+ display: flex;
+
+ gap: 20px;
+ background: #ffffff;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ }
+
+
+ .contentsection_contentcontainer {
+ display: flex;
+ flex-direction: column;
+ width: 540px;
+ gap: 32px;
+ }
+
+ .contentsection_titlecontainer {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .contentsection_categorytitle {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .contentsection_mainheading {
+ font-family: 'DM Sans';
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ margin-top: 20px;
+ }
+
+ .contentsection_description {
+ font-family: 'Inter';
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ white-space: 'pre-line';
+ }
+
+ .contentsection_button {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .contentsection_buttonText {
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .contentsection_image {
+ width: 100%;
+ height: unset;
+ border-radius: 16px;
+ object-fit: cover;
+ }
+
+ .contentsection_contentcontainer_img {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ gap: 32px;
+ }
+
+
+ .mysy_crm_section_block1 {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ background: #FFFFFF;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+
+ }
+
+
+ .mysy_crm_section_block_image {
+ width: 50%;
+ height: unset;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_crm.png");
+ background-size: cover;
+ background-position: center;
+
+ }
+
+ .mysy_crm_section_block_text {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 50%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 120%;
+ color: #16274f;
+ text-transform: uppercase;
+ margin: 20px 0 0 0;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+
+ }
+
+
+ .elearningsection_block1 {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ background: #FFFFFF;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ }
+
+
+ .elearningsection_block2 {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 540px;
+ }
+
+
+ .elearningsection_text_title {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .elearningsection_text_title_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+
+ .elearningsection_text_title_title_span {
+
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .elearningsection_text_title_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: '20px 0 0 0';
+ }
+
+ .elearningsection_text_title_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ }
+
+
+ .elearningsection_text_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .elearningsection_text_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .elearningsection_img {
+ width: 50%;
+ height: unset;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_lms.png");
+ background-size: cover;
+ background-position: center;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 420px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 30px;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+ top: 176px;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+
+ min-height: 202px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 90%;
+ min-height: 134px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ /* or 67px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text2 {
+ /* Que ce soit pour simplifier vos tâches administratives, optimiser la gestion de vos apprenants ou enrichir vos parcours e-learning, MySy Training vous accompagne. */
+
+
+ height: 48px;
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 50px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_badge {
+ display: flex;
+ gap: 80px;
+ background: rgb(255, 255, 255);
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ }
+
+
+ .block_display_flex_badge {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+ .block_badge_fonctionnalite {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #f8fafd;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .featureslayout_block1 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 20px;
+ background: #FFFFFF;
+ margin-bottom: 5rem;
+ }
+
+ .featureslayout_block2 {
+ text-align: center;
+ margin-bottom: 48px;
+ }
+
+ .featureslayout_block_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 24px;
+ color: #16274f;
+ }
+
+ .featureslayout_block_cards {
+ display: flex;
+ flex-direction: row;
+ gap: 32px;
+ justify-content: center;
+ flex-grow: 1;
+ }
+
+ .featurecard_top_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding: 40px 16px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #0aa690;
+ min-width: 220px;
+ max-width: 300px;
+ flex: 1;
+ align-items: center;
+ box-sizing: border-box;
+
+ }
+
+
+ .featurecard_top_block2 {
+ width: 88px;
+ height: 88px;
+ }
+
+
+
+ .featurecard_top_block3 {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 100%;
+ text-align: center;
+ }
+
+
+ .featurecard_top_block_h3 {
+ font-family: 'DM Sans';
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_p {
+ font-family: 'Inter';
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 160%;
+ color: #4b5162;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_bton {
+ padding: 12px 20px;
+ background: transparent;
+ border: 1px solid #c7c9ce;
+ border-radius: 200px;
+ cursor: pointer;
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ color: #4b5162;
+ transition: all 0.2s ease-in-out;
+ }
+
+
+ .contentsection_section {
+ display: flex;
+ gap: 20px;
+ background: #ffffff;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ }
+
+
+ .contentsection_contentcontainer {
+ display: flex;
+ flex-direction: column;
+ width: 540px;
+ gap: 32px;
+ }
+
+ .contentsection_titlecontainer {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .contentsection_categorytitle {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .contentsection_mainheading {
+ font-family: 'DM Sans';
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ margin-top: 20px;
+ }
+
+ .contentsection_description {
+ font-family: 'Inter';
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ white-space: 'pre-line';
+ }
+
+ .contentsection_button {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .contentsection_buttonText {
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .contentsection_image {
+ width: 100%;
+ height: unset;
+ border-radius: 16px;
+ object-fit: cover;
+ }
+
+ .contentsection_contentcontainer_img {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ gap: 32px;
+ }
+
+
+ .mysy_crm_section_block1 {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ background: #FFFFFF;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+
+ }
+
+
+ .mysy_crm_section_block_image {
+ width: 50%;
+ height: unset;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_crm.png");
+ background-size: cover;
+ background-position: center;
+
+ }
+
+ .mysy_crm_section_block_text {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 540px;
+ }
+
+ .mysy_crm_section_block_text_tite_desc {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ text-transform: uppercase;
+ margin: 20px 0 0 0;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+
+ }
+
+
+ .elearningsection_block1 {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ background: #FFFFFF;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+
+ }
+
+
+ .elearningsection_block2 {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 540px;
+ }
+
+
+ .elearningsection_text_title {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .elearningsection_text_title_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+
+ .elearningsection_text_title_title_span {
+
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .elearningsection_text_title_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: '20px 0 0 0';
+ }
+
+ .elearningsection_text_title_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ }
+
+
+ .elearningsection_text_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .elearningsection_text_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .elearningsection_img {
+ width: 50%;
+ height: unset;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_lms.png");
+ background-size: cover;
+ background-position: center;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .fonctionnalite_Background {
+ width: 100%;
+ height: 420px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 50px;
+ }
+
+ .title_and_cat {
+ /* Title + CTA */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+
+ height: 280px;
+ /* left: calc(50% - 1081px/2 + 0.5px);*/
+ top: 176px;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_and_cat_title {
+ /* Title + Description */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ width: 1081px;
+ min-height: 202px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text1 {
+ /* Des fonctionnalités pensées pour simplifier la gestion de vos formations. */
+
+ width: 90%;
+ min-height: 134px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 56px;
+ line-height: 120%;
+ /* or 67px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_text2 {
+ /* Que ce soit pour simplifier vos tâches administratives, optimiser la gestion de vos apprenants ou enrichir vos parcours e-learning, MySy Training vous accompagne. */
+
+
+ height: 48px;
+
+ /* Commons/Body/Body - L */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+ text-align: center;
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ opacity: 0.8;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+ .title_and_cat_title_cat {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 50px;
+
+
+ height: 48px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ width: 40%;
+ margin-left: auto;
+ margin-right: auto;
+
+
+
+ }
+
+ .title_and_cat_title_cat_bton_demo {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 207px;
+ height: 48px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ }
+
+ .title_and_cat_title_cat_bton_demo_txt {
+ /* Text */
+
+ width: 151px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+
+ .title_and_cat_title_cat_bton_tarif {
+ /* Button text */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 20px;
+
+ width: 217px;
+ height: 48px;
+
+ /* Foundation /Blue-Grey/Light :active */
+ border: 1px solid #FFF;
+ backdrop-filter: blur(6px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ background: #FFF;
+ cursor: pointer;
+
+ }
+
+ .title_and_cat_title_cat_bton_tarif_txt {
+ /* Text */
+
+ width: 161px;
+ height: 20px;
+
+ /* Button/Base - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ /* identical to box height, or 20px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_badge {
+ display: flex;
+ padding: 80px;
+ gap: 80px;
+ background: rgb(255, 255, 255);
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ }
+
+
+ .block_display_flex_badge {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+ .block_badge_fonctionnalite {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #f8fafd;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+
+
+ .featureslayout_block1 {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 80px;
+ background: #FFFFFF;
+ margin-bottom: 5rem;
+ }
+
+ .featureslayout_block2 {
+ text-align: center;
+ margin-bottom: 48px;
+ }
+
+ .featureslayout_block_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 24px;
+ color: #16274f;
+ }
+
+ .featureslayout_block_cards {
+ display: flex;
+ flex-direction: row;
+ gap: 32px;
+ justify-content: center;
+ flex-grow: 1;
+ }
+
+
+ .featurecard_top_block1 {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding: 40px 16px;
+ background: #fdf6ec1a;
+ border-radius: 12px;
+ border: 1px solid #0aa690;
+ min-width: 320px;
+ max-width: 400px;
+ flex: 1;
+ align-items: center;
+ box-sizing: border-box;
+
+ }
+
+
+ .featurecard_top_block2 {
+ width: 88px;
+ height: 88px;
+ }
+
+
+
+ .featurecard_top_block3 {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 100%;
+ text-align: center;
+ }
+
+
+ .featurecard_top_block_h3 {
+ font-family: 'DM Sans';
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_p {
+ font-family: 'Inter';
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 160%;
+ color: #4b5162;
+ opacity: 0.8;
+ margin: 0;
+ }
+
+
+ .featurecard_top_block_bton {
+ padding: 12px 20px;
+ background: transparent;
+ border: 1px solid #c7c9ce;
+ border-radius: 200px;
+ cursor: pointer;
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 122%;
+ color: #4b5162;
+ transition: all 0.2s ease-in-out;
+ }
+
+
+ .contentsection_section {
+ padding: 80px;
+ display: flex;
+ flex-direction: row;
+ gap: 80px;
+ background: #FFFFFF;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ }
+
+
+ .contentsection_contentcontainer {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ gap: 32px;
+ }
+
+ .contentsection_titlecontainer {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .contentsection_categorytitle {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .contentsection_mainheading {
+ font-family: 'DM Sans';
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 120%;
+ color: #16274f;
+ margin-top: 20px;
+ }
+
+ .contentsection_description {
+ font-family: 'Inter';
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ white-space: 'pre-line';
+ }
+
+ .contentsection_button {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .contentsection_buttonText {
+ font-family: 'DM Sans';
+ font-size: 16px;
+ font-weight: 700;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .contentsection_image {
+ width: 540px;
+ height: unset;
+ border-radius: 16px;
+ object-fit: cover;
+ }
+
+ .contentsection_contentcontainer_img {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ gap: 32px;
+ }
+
+
+ .mysy_crm_section_block1 {
+ padding: 80px;
+ display: flex;
+ flex-direction: row;
+ gap: 80px;
+ background: #FFFFFF;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ }
+
+
+ .mysy_crm_section_block_image {
+ width: 692px;
+ height: 692px;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_crm.png");
+ background-size: cover;
+ background-position: center;
+
+ }
+
+ .mysy_crm_section_block_text {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 540px;
+ }
+
+ .mysy_crm_section_block_text_tite_desc {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .mysy_crm_section_block_text_tite_desc_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ text-transform: uppercase;
+ margin: 20px 0 0 0;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+
+ }
+
+
+ .mysy_crm_section_block_text_tite_desc_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .elearningsection_block1 {
+ padding: 80px;
+ display: flex;
+ flex-direction: row;
+ gap: 80px;
+ background: #FFFFFF;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 10px;
+ margin-bottom: 5rem;
+ }
+
+
+ .elearningsection_block2 {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ width: 540px;
+ }
+
+
+ .elearningsection_text_title {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ }
+
+ .elearningsection_text_title_title {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+
+ .elearningsection_text_title_title_span {
+
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #3e6ee3;
+ text-transform: uppercase;
+ }
+
+ .elearningsection_text_title_title_h1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: '20px 0 0 0';
+ }
+
+ .elearningsection_text_title_p {
+ font-family: 'Inter';
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #4b5162;
+ opacity: 0.8;
+ }
+
+
+ .elearningsection_text_bton {
+ display: flex;
+ padding: 12px 20px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ justify-content: center;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background: #FFF;
+ }
+
+ .elearningsection_text_bton_span {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .elearningsection_img {
+ width: 692px;
+ height: 692px;
+ border-radius: 16px;
+ background: url("/public/img/fonctionnalite_img/img_lms.png");
+ background-size: cover;
+ background-position: center;
+ }
+
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/components/fonctionalites_automatic_files/new_fonctionnalites_2025.js b/src/components/fonctionalites_automatic_files/new_fonctionnalites_2025.js
new file mode 100644
index 0000000..3658a00
--- /dev/null
+++ b/src/components/fonctionalites_automatic_files/new_fonctionnalites_2025.js
@@ -0,0 +1,287 @@
+import React, { useRef, useState, useEffect } from "react";
+import moment from "moment";
+import "./new_fonctionalites_2025.css";
+import "./ContentSection.js";
+import "./ELearningSection.js";
+import "./ContentSection.js";
+import "./ContentSection.js";
+
+import FeaturesLayout from './FeaturesLayout.js';
+import ContentSection from './ContentSection';
+import Badge_Fonctionnalite from './Badge_Fonctionnalite';
+
+import MySy_CRM_Section from './CRM_Layout/MySy_CRM_Section';
+
+import ELearningSection from "./E-Learning_Layout/ELearningSection"
+
+
+const New_C_Fonctionalites_2025 = (props) => {
+
+ useEffect(() => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+
+ }, []);
+
+
+ const gestion_admin_fonctionalite = [
+ {
+ 'title': 'Catalogue formations personnalisé', 'detail_1': 'Catalogue formations', 'detail_2': 'Nom domaine personnalisé',
+ 'detail_3': 'Modèle siteweb personnalisé', 'img': 'img/fonctionnalite_img/img_catalog.png'
+ },
+
+ {
+ 'title': 'Gestion des inscriptions', 'detail_1': 'Préinscription', 'detail_2': 'Annulation avec motif',
+ 'detail_3': 'Import/export (excel et API)', 'img': '/img/fonctionnalite_img/img_inscription.png'
+ },
+
+ {
+ 'title': 'Gestion des Émargements', 'detail_1': 'Par QR code', 'detail_2': 'A distance par email',
+ 'detail_3': 'Signature main levée & En présentiel', 'img': '/img/fonctionnalite_img/img_emargement.png'
+ },
+
+
+ {
+ 'title': 'Check-list QUALIOPI', 'detail_1': 'Traitement automatisé', 'detail_2': 'Affichage du reste à faire',
+ 'detail_3': 'Affichage ce qui a été fait', 'img': 'img/fonctionnalite_img/img_qualiopi_checklist.png'
+ },
+
+
+ {
+ 'title': 'Gestion avis participants', 'detail_1': 'Avis sur la formation', 'detail_2': 'Avis sur le formateur',
+ 'detail_3': 'Génération automatique des statistiques de satisfaction', 'img': 'img/fonctionnalite_img/img_catalog.png'
+ },
+
+
+ {
+ 'title': 'Gestion Evaluation', 'detail_1': 'Evaluation à chaud', 'detail_2': 'Evaluation à froid',
+ 'detail_3': 'Evaluation formateur', 'img': 'img/fonctionnalite_img/img_evaluation.png'
+ },
+
+
+ {
+ 'title': 'Gestion documents (GED)', 'detail_1': 'Documents clients', 'detail_2': 'Documents apprenants',
+ 'detail_3': 'Documents formateur', 'img': 'img/fonctionnalite_img/img_storage.png'
+ },
+
+
+ {
+ 'title': 'Personnalisation des documents', 'detail_1': 'Personnalisation de tous les documents', 'detail_2': 'Sauvegarde et restauration',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_personnalisation.png'
+ },
+
+
+ {
+ 'title': 'Gestion des Sessions de formation', 'detail_1': 'Session inter/intra', 'detail_2': 'Personnalisation des étapes',
+ 'detail_3': 'Affectation devis/ressources', 'img': 'img/fonctionnalite_img/img_session_formation.png'
+ },
+
+
+ {
+ 'title': 'Gestion des ressources', 'detail_1': 'Salle de classe', 'detail_2': 'Formateur & personnel administratif',
+ 'detail_3': 'Matériel pédagogique', 'img': 'img/fonctionnalite_img/img_ressources.png'
+ },
+
+
+ {
+ 'title': 'Gestion formateurs', 'detail_1': 'Contrat formateurs', 'detail_2': 'Edition et stockage des contrats',
+ 'detail_3': 'Evaluation', 'img': 'img/fonctionnalite_img/img_formateur.png'
+ },
+
+
+ {
+ 'title': 'Tableau de bord & BPF', 'detail_1': 'Suivi d’activité', 'detail_2': 'BPF',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_tableau_bord.png'
+ },
+
+ ]
+
+ const crm_fonctionalite = [
+ {
+ 'title': 'Signature électronique', 'detail_1': 'Un module intégrée', 'detail_2': 'Permet de signer vos documents',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_signat_electro.png'
+ },
+
+ {
+ 'title': 'Gestion des collaborateurs', 'detail_1': 'Affectation tâches', 'detail_2': 'Suivi avancement',
+ 'detail_3': 'Notification par email', 'img': 'img/fonctionnalite_img/img_collaborateur.png'
+ },
+
+
+ {
+ 'title': 'Les Devis', 'detail_1': 'Envoi par email', 'detail_2': 'Validation automatique client',
+ 'detail_3': 'Relance automatique', 'img': 'img/fonctionnalite_img/img_devis.png'
+ },
+
+ {
+ 'title': 'Gestion Clients, Financeurs', 'detail_1': 'Contacts', 'detail_2': 'Stockage documents',
+ 'detail_3': 'Import / Export Excel', 'img': 'img/fonctionnalite_img/img_client_financeur.png'
+ },
+
+ {
+ 'title': 'Paiements', 'detail_1': 'Multi paiement', 'detail_2': 'Suivi du reste à payer',
+ 'detail_3': 'Import / Export Excel', 'img': 'img/fonctionnalite_img/img_paiement.png'
+ },
+
+ {
+ 'title': 'opportunités d’affaire', 'detail_1': 'Personnalisation des étapes', 'detail_2': 'Notification équipe',
+ 'detail_3': 'Conversion en devis', 'img': 'img/fonctionnalite_img/img_opportunite.png'
+ },
+
+ {
+ 'title': 'Facturation & avoirs', 'detail_1': 'Envoi par email au client', 'detail_2': 'Fractionnement des factures',
+ 'detail_3': 'Transformation en avoir et Annotation', 'img': 'img/fonctionnalite_img/img_facture_avoir.png'
+ },
+
+ {
+ 'title': 'Tableau de bord', 'detail_1': 'Suivi clients', 'detail_2': 'Suivi facturation',
+ 'detail_3': 'Factures prévisionnelles', 'img': 'img/fonctionnalite_img/img_tableau_bord.png'
+ },
+
+
+ ]
+
+ const lms_fonctionalite = [
+ {
+ 'title': 'Classe virtuelle', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_class_virtuelle.png'
+ },
+
+ {
+ 'title': 'Cours – TD – TP - Examen', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_cours_td_tp.png'
+ },
+
+
+ {
+ 'title': 'Intranet Apprenant & Enseignant', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_intranet_apprenant.png'
+ },
+
+
+ {
+ 'title': 'Suivi temps de connexion apprenants', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_suivi_tps_connexion.png'
+ },
+
+ {
+ 'title': 'Echange Enseignant / Apprenant', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_echange_prof_apprenant.png'
+ },
+
+ {
+ 'title': 'Export / Import format SCORM', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_export_scorm.png'
+ },
+
+ {
+ 'title': 'Partage de fichiers', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_partage_fichiers.png'
+ },
+
+ {
+ 'title': 'Tableau de bord / Statistiques', 'detail_1': '', 'detail_2': '',
+ 'detail_3': '', 'img': 'img/fonctionnalite_img/img_tableau_bord.png'
+ },
+
+
+
+ ]
+
+ return (
+
+
+
+
+
+
+
+
+ Des fonctionnalités pensées pour simplifier la gestion de vos formations.
+
+
+
+ Que ce soit pour simplifier vos tâches administratives, optimiser la gestion de vos apprenants ou enrichir vos parcours e-learning, MySy Training vous accompagne.
+
+
+
+
+
+
{
+ e.preventDefault();
+ var date2 = new Date();
+ const format2 = "YYYY-MM";
+ var dateTime2 = moment(date2).format(format2);
+ window.open(
+ "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2),
+ '_blank'
+ );
+ }}>
+ Réserver une démo
+
+
+
{
+
+ window.open(
+ "/new_tarif/",
+ '_self'
+ );
+ }}>
+ Découvrez nos tarifs
+
+
+
+
+
+
+
+
+
+
+
+
+ {gestion_admin_fonctionalite && gestion_admin_fonctionalite.map((local_badge) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {crm_fonctionalite && crm_fonctionalite.map((local_badge) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {lms_fonctionalite && lms_fonctionalite.map((local_badge) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
+
+export default New_C_Fonctionalites_2025;
\ No newline at end of file
diff --git a/src/components/footer_automatic_files/CallToActionSection.css b/src/components/footer_automatic_files/CallToActionSection.css
new file mode 100644
index 0000000..a6bf5bb
--- /dev/null
+++ b/src/components/footer_automatic_files/CallToActionSection.css
@@ -0,0 +1,84 @@
+.footer_automatic_files {
+ .cta-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 56px;
+ width: 100%;
+ min-width: 320px;
+ padding: 10px 8px;
+ background-color: #087d6c;
+ }
+
+ .cta-title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 36px;
+ line-height: 120%;
+ text-align: center;
+ color: #FFFFFF;
+ margin: 0;
+ max-width: 1344px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ }
+
+ .cta-demo-button {
+ background: #FFFFFF;
+ border-radius: 200px;
+ padding: 16px 20px;
+ border: none;
+ cursor: pointer;
+ min-width: 287px;
+ }
+
+ .button-text {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #171717;
+ padding: 0 8px;
+ }
+
+ .cta-contact-link {
+ border-bottom: 1px solid #FFFFFF;
+ padding-bottom: 6px;
+ cursor: pointer;
+ }
+
+ .cta-contact-link span {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 120%;
+ color: #FFFFFF;
+ text-align: center;
+ }
+
+ @media (max-width: 768px) {
+ .cta-title {
+ font-size: 36px;
+ }
+
+ .cta-demo-button {
+ min-width: 240px;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .cta-section {
+ padding: 40px 24px;
+ }
+
+ .cta-title {
+ font-size: 28px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/footer_automatic_files/CallToActionSection.js b/src/components/footer_automatic_files/CallToActionSection.js
new file mode 100644
index 0000000..c9e8442
--- /dev/null
+++ b/src/components/footer_automatic_files/CallToActionSection.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import moment from "moment";
+import './CallToActionSection.css';
+import { useHistory } from "react-router-dom";
+
+const CallToActionSection = ({ title, demoButtonText, contactText }) => {
+ const history = useHistory();
+
+
+ return (
+
+
+
+ {title.split('\n').map((line, index) => (
+
+ {line}
+
+
+ ))}
+
+
+
{
+ e.preventDefault();
+ var date2 = new Date();
+ const format2 = "YYYY-MM";
+ var dateTime2 = moment(date2).format(format2);
+ window.open(
+ "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2),
+ '_blank'
+ );
+ }}>
+ {demoButtonText}
+
+
{
+ e.preventDefault();
+ window.open("/new_contact/#debut", "_self");
+ }}>
+ {contactText}
+
+
+
+
+ );
+};
+
+CallToActionSection.defaultProps = {
+ title: 'Découvrez une nouvelle façon de travailler\navec Mysy Training.',
+ demoButtonText: 'Demander une démo gratuite',
+ contactText: "Contactez-nous pour plus d'informations"
+};
+
+export default CallToActionSection;
+
diff --git a/src/components/footer_automatic_files/FooterSection.css b/src/components/footer_automatic_files/FooterSection.css
new file mode 100644
index 0000000..9937706
--- /dev/null
+++ b/src/components/footer_automatic_files/FooterSection.css
@@ -0,0 +1,664 @@
+.footer_automatic_files {
+
+ @media only screen and (max-width: 600px) {
+ .footer_new_2025 {
+ background-color: #043a32;
+ width: 100%;
+ padding: 64px;
+ color: #fff;
+ font-family: 'Inter', sans-serif;
+ box-sizing: border-box;
+ }
+
+ .footer-content {
+ display: flex;
+ flex-direction: column;
+ gap: 48px;
+ margin-bottom: 64px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-content {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .logo-address {
+ display: flex;
+ flex-direction: column;
+
+ }
+
+ .logo {
+ width: 122px;
+ height: 40px;
+ }
+
+ .address {
+ font-size: 16px;
+ line-height: 32px;
+ opacity: 0.7;
+ text-align: left;
+ }
+
+ .footer-links {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-links {
+ flex-direction: row;
+ }
+ }
+
+ .link-column {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-width: 110px;
+ }
+
+ .link-column:first-child {
+ min-width: 200px;
+ }
+
+ .link-column a {
+ color: #fff;
+ text-decoration: none;
+ font-size: 16px;
+ line-height: 24px;
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .link-column a:hover {
+ opacity: 1;
+ }
+
+ .footer-divider {
+ height: 1px;
+ background-color: #fff;
+ opacity: 0.2;
+ margin: 24px 0;
+ }
+
+ .footer-bottom {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ align-items: center;
+ padding-top: 24px;
+ width: 96%;
+ margin-left: 2%;
+ }
+
+ @media (min-width: 768px) {
+ .footer-bottom {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .legal-links {
+ display: flex;
+ gap: 3px;
+ align-items: center;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ .legal-links a {
+ color: #fff;
+ text-decoration: none;
+ }
+
+ .copyright {
+ margin-left: 32px;
+ }
+
+ .social-icons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .social-icons img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .social-icons a {
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .social-icons a:hover {
+ opacity: 1;
+ }
+
+ .layout_main_section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100vh;
+ }
+
+
+ .layout_testimonial_section {
+ flex-grow: 1;
+ background: #fff;
+ padding: 10px;
+ }
+
+ .layout_call_to_action_section {
+ flex-grow: 1;
+ background: #087d6c;
+ padding: 10px;
+ }
+
+
+ .layout_footer_section {
+ flex-grow: 1;
+ background: #ffffff;
+ }
+ }
+
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .footer_new_2025 {
+ background-color: #043a32;
+ width: 100%;
+ padding: 64px;
+ color: #fff;
+ font-family: 'Inter', sans-serif;
+ box-sizing: border-box;
+ }
+
+ .footer-content {
+ display: flex;
+ flex-direction: column;
+ gap: 48px;
+ margin-bottom: 64px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-content {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .logo-address {
+ display: flex;
+ flex-direction: column;
+
+ }
+
+ .logo {
+ width: 122px;
+ height: 40px;
+ }
+
+ .address {
+ font-size: 16px;
+ line-height: 32px;
+ opacity: 0.7;
+ text-align: left;
+ }
+
+ .footer-links {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-links {
+ flex-direction: row;
+ }
+ }
+
+ .link-column {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-width: 110px;
+ }
+
+ .link-column:first-child {
+ min-width: 200px;
+ }
+
+ .link-column a {
+ color: #fff;
+ text-decoration: none;
+ font-size: 16px;
+ line-height: 24px;
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .link-column a:hover {
+ opacity: 1;
+ }
+
+ .footer-divider {
+ height: 1px;
+ background-color: #fff;
+ opacity: 0.2;
+ margin: 24px 0;
+ }
+
+ .footer-bottom {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ align-items: center;
+ padding-top: 24px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-bottom {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .legal-links {
+ display: flex;
+ gap: 32px;
+ align-items: center;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ .legal-links a {
+ color: #fff;
+ text-decoration: none;
+ }
+
+ .copyright {
+ margin-left: 32px;
+ }
+
+ .social-icons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .social-icons img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .social-icons a {
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .social-icons a:hover {
+ opacity: 1;
+ }
+
+ .layout_main_section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100vh;
+ }
+
+
+ .layout_testimonial_section {
+ flex-grow: 1;
+ background: #fff;
+ padding: 10px;
+ }
+
+ .layout_call_to_action_section {
+ flex-grow: 1;
+ background: #087d6c;
+ padding: 10px;
+ }
+
+
+ .layout_footer_section {
+ flex-grow: 1;
+ background: #ffffff;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .footer_new_2025 {
+ background-color: #043a32;
+ width: 100%;
+ padding: 64px;
+ color: #fff;
+ font-family: 'Inter', sans-serif;
+ box-sizing: border-box;
+ }
+
+ .footer-content {
+ display: flex;
+ flex-direction: column;
+ gap: 48px;
+ margin-bottom: 64px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-content {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .logo-address {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ max-width: 416px;
+ }
+
+ .logo {
+ width: 122px;
+ height: 40px;
+ }
+
+ .address {
+ font-size: 16px;
+ line-height: 32px;
+ opacity: 0.7;
+ text-align: left;
+ }
+
+ .footer-links {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-links {
+ flex-direction: row;
+ gap: 120px;
+ }
+ }
+
+ .link-column {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-width: 110px;
+ }
+
+ .link-column:first-child {
+ min-width: 200px;
+ }
+
+ .link-column a {
+ color: #fff;
+ text-decoration: none;
+ font-size: 16px;
+ line-height: 24px;
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .link-column a:hover {
+ opacity: 1;
+ }
+
+ .footer-divider {
+ height: 1px;
+ background-color: #fff;
+ opacity: 0.2;
+ margin: 24px 0;
+ }
+
+ .footer-bottom {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ align-items: center;
+ padding-top: 24px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-bottom {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .legal-links {
+ display: flex;
+ gap: 32px;
+ align-items: center;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ .legal-links a {
+ color: #fff;
+ text-decoration: none;
+ }
+
+ .copyright {
+ margin-left: 32px;
+ }
+
+ .social-icons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .social-icons img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .social-icons a {
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .social-icons a:hover {
+ opacity: 1;
+ }
+
+ .layout_main_section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100vh;
+ }
+
+
+ .layout_testimonial_section {
+ flex-grow: 1;
+ background: #fff;
+ padding: 80px;
+ }
+
+ .layout_call_to_action_section {
+ flex-grow: 1;
+ background: #087d6c;
+ padding: 80px 48px;
+ }
+
+
+ .layout_footer_section {
+ flex-grow: 1;
+ background: #ffffff;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .footer_new_2025 {
+ background-color: #043a32;
+ width: 100%;
+ padding: 64px;
+ color: #fff;
+ font-family: 'Inter', sans-serif;
+ box-sizing: border-box;
+ }
+
+ .footer-content {
+ display: flex;
+ flex-direction: column;
+ gap: 48px;
+ margin-bottom: 64px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-content {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .logo-address {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ max-width: 416px;
+ }
+
+ .logo {
+ width: 122px;
+ height: 40px;
+ }
+
+ .address {
+ font-size: 16px;
+ line-height: 32px;
+ opacity: 0.7;
+ text-align: left;
+ }
+
+ .footer-links {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-links {
+ flex-direction: row;
+ gap: 120px;
+ }
+ }
+
+ .link-column {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-width: 110px;
+ }
+
+ .link-column:first-child {
+ min-width: 200px;
+ }
+
+ .link-column a {
+ color: #fff;
+ text-decoration: none;
+ font-size: 16px;
+ line-height: 24px;
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .link-column a:hover {
+ opacity: 1;
+ }
+
+ .footer-divider {
+ height: 1px;
+ background-color: #fff;
+ opacity: 0.2;
+ margin: 24px 0;
+ }
+
+ .footer-bottom {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ align-items: center;
+ padding-top: 24px;
+ }
+
+ @media (min-width: 768px) {
+ .footer-bottom {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .legal-links {
+ display: flex;
+ gap: 32px;
+ align-items: center;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ .legal-links a {
+ color: #fff;
+ text-decoration: none;
+ }
+
+ .copyright {
+ margin-left: 32px;
+ }
+
+ .social-icons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .social-icons img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .social-icons a {
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .social-icons a:hover {
+ opacity: 1;
+ }
+
+
+ .layout_main_section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100vh;
+ }
+
+
+ .layout_testimonial_section {
+ flex-grow: 1;
+ background: #fff;
+ padding: 80px;
+ }
+
+ .layout_call_to_action_section {
+ flex-grow: 1;
+ background: #087d6c;
+ padding: 80px 48px;
+ }
+
+
+ .layout_footer_section {
+ flex-grow: 1;
+ background: #ffffff;
+ }
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/footer_automatic_files/FooterSection.js b/src/components/footer_automatic_files/FooterSection.js
new file mode 100644
index 0000000..a7fd7ec
--- /dev/null
+++ b/src/components/footer_automatic_files/FooterSection.js
@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from 'prop-types';
+import './FooterSection.css';
+import moment from "moment";
+
+import Footer_Social_X_icon from '../../img_new_design_2025/Footer_social_i_X.png';
+import Social_Link_icon from '../../img_new_design_2025/social_i_Link.png';
+import Footer_Social_Fa_icon from '../../img_new_design_2025/Footer_social_i_Fa.png';
+
+const FooterSection = ({ logoSrc, address, email, phone }) => {
+
+ const [current_year, setcurrent_year] = useState("");
+
+ useEffect(() => {
+ var date2 = new Date();
+ const format2 = "YYYY";
+ var dateTime2 = moment(date2).format(format2);
+ setcurrent_year(dateTime2)
+
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
Qui sommes-nous ?
+
+
Fonctionnaltiés
+
{
+ e.preventDefault();
+ window.open("/new_tarif/#debut", "_self");
+ }}
+ style={{ cursor: 'pointer', opacity: '0.8' }}>Tarifs
+
+
Blog
+
+
{
+ e.preventDefault();
+ window.open("/new_contact/#debut", "_self");
+ }}
+ style={{ cursor: 'pointer', opacity: '0.8' }}> Nous contacter
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+FooterSection.propTypes = {
+ logoSrc: PropTypes.string,
+ address: PropTypes.string,
+ email: PropTypes.string,
+ phone: PropTypes.string,
+};
+
+FooterSection.defaultProps = {
+ logoSrc: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/logo-my-s.png',
+ address: '1 Cr du Havre, 75008 Paris',
+ email: 'contact@mysy-training.com',
+ phone: '+331 77 00 38 57',
+};
+
+export default FooterSection;
+
diff --git a/src/components/footer_automatic_files/Layout.js b/src/components/footer_automatic_files/Layout.js
new file mode 100644
index 0000000..3918742
--- /dev/null
+++ b/src/components/footer_automatic_files/Layout.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import TestimonialSection from './TestimonialSection';
+import CallToActionSection from './CallToActionSection';
+import FooterSection from './FooterSection';
+
+const Layout = () => {
+ return (
+
+ );
+};
+
+export default Layout;
+
diff --git a/src/components/footer_automatic_files/Layout_Without_Testimony.js b/src/components/footer_automatic_files/Layout_Without_Testimony.js
new file mode 100644
index 0000000..af92755
--- /dev/null
+++ b/src/components/footer_automatic_files/Layout_Without_Testimony.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import CallToActionSection from './CallToActionSection';
+import FooterSection from './FooterSection';
+
+const Layout_Without_Testimony = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Layout_Without_Testimony;
+
diff --git a/src/components/footer_automatic_files/TestimonialSection.css b/src/components/footer_automatic_files/TestimonialSection.css
new file mode 100644
index 0000000..6a689c9
--- /dev/null
+++ b/src/components/footer_automatic_files/TestimonialSection.css
@@ -0,0 +1,630 @@
+.footer_automatic_files {
+
+ @media only screen and (max-width: 600px){
+ .testimonial-section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 5px;
+ gap: 50px;
+ background-color: #ffffff;
+ min-width: 320px;
+ }
+
+ .title-container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ text-align: center;
+ }
+
+ .subtitle {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #ecae49;
+ text-transform: uppercase;
+ }
+
+ .title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: 20px 0 0 0;
+ }
+
+ .testimonials-container {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .testimonial-card {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ padding: 40px;
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ }
+
+ .testimonial-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .stars-container {
+ display: flex;
+ gap: 7px;
+ height: 20px;
+ }
+
+ .star-icon {
+ width: 21px;
+ height: 20px;
+ }
+
+ .testimonial-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 160%;
+ color: #171717;
+ margin: 0;
+ }
+
+ .client-info {
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+ align-items: center;
+ }
+
+ .client-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+
+ .client-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .client-name {
+ font-family: 'Inter', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .client-role {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .slider-controls {
+ display: flex;
+ flex-direction: row;
+ gap: 32px;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ }
+
+ .arrow-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 81px;
+ background-color: #ffffff;
+ border: none;
+ padding: 8px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .arrow-button img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .slider-bullets {
+ margin-top: 16px;
+ }
+
+ .slider-bullets img {
+ width: 104px;
+ height: 8px;
+ }
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .testimonial-section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 80px;
+ gap: 56px;
+ background-color: #ffffff;
+ min-width: 320px;
+ }
+
+ .title-container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ text-align: center;
+ }
+
+ .subtitle {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #ecae49;
+ text-transform: uppercase;
+ }
+
+ .title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: 20px 0 0 0;
+ }
+
+ .testimonials-container {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .testimonial-card {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ padding: 40px;
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ }
+
+ .testimonial-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .stars-container {
+ display: flex;
+ gap: 7px;
+ height: 20px;
+ }
+
+ .star-icon {
+ width: 21px;
+ height: 20px;
+ }
+
+ .testimonial-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 160%;
+ color: #171717;
+ margin: 0;
+ }
+
+ .client-info {
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+ align-items: center;
+ }
+
+ .client-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+
+ .client-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .client-name {
+ font-family: 'Inter', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .client-role {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .slider-controls {
+ display: flex;
+ flex-direction: row;
+ gap: 32px;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ }
+
+ .arrow-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 81px;
+ background-color: #ffffff;
+ border: none;
+ padding: 8px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .arrow-button img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .slider-bullets {
+ margin-top: 16px;
+ }
+
+ .slider-bullets img {
+ width: 104px;
+ height: 8px;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .testimonial-section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 80px;
+ gap: 56px;
+ background-color: #ffffff;
+ min-width: 320px;
+ }
+
+ .title-container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ text-align: center;
+ }
+
+ .subtitle {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #ecae49;
+ text-transform: uppercase;
+ }
+
+ .title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: 20px 0 0 0;
+ }
+
+ .testimonials-container {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .testimonial-card {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ padding: 40px;
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ }
+
+ .testimonial-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .stars-container {
+ display: flex;
+ gap: 7px;
+ height: 20px;
+ }
+
+ .star-icon {
+ width: 21px;
+ height: 20px;
+ }
+
+ .testimonial-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 160%;
+ color: #171717;
+ margin: 0;
+ }
+
+ .client-info {
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+ align-items: center;
+ }
+
+ .client-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+
+ .client-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .client-name {
+ font-family: 'Inter', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .client-role {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .slider-controls {
+ display: flex;
+ flex-direction: row;
+ gap: 32px;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ }
+
+ .arrow-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 81px;
+ background-color: #ffffff;
+ border: none;
+ padding: 8px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .arrow-button img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .slider-bullets {
+ margin-top: 16px;
+ }
+
+ .slider-bullets img {
+ width: 104px;
+ height: 8px;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .testimonial-section {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 80px;
+ gap: 56px;
+ background-color: #ffffff;
+ min-width: 320px;
+ }
+
+ .title-container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ text-align: center;
+ }
+
+ .subtitle {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 16px;
+ color: #ecae49;
+ text-transform: uppercase;
+ }
+
+ .title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ color: #16274f;
+ margin: 20px 0 0 0;
+ }
+
+ .testimonials-container {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .testimonial-card {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ padding: 40px;
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ }
+
+ .testimonial-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .stars-container {
+ display: flex;
+ gap: 7px;
+ height: 20px;
+ }
+
+ .star-icon {
+ width: 21px;
+ height: 20px;
+ }
+
+ .testimonial-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 160%;
+ color: #171717;
+ margin: 0;
+ }
+
+ .client-info {
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+ align-items: center;
+ }
+
+ .client-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+
+ .client-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .client-name {
+ font-family: 'Inter', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .client-role {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 14px;
+ color: #171717;
+ }
+
+ .slider-controls {
+ display: flex;
+ flex-direction: row;
+ gap: 32px;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ }
+
+ .arrow-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 81px;
+ background-color: #ffffff;
+ border: none;
+ padding: 8px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .arrow-button img {
+ width: 24px;
+ height: 24px;
+ }
+
+ .slider-bullets {
+ margin-top: 16px;
+ }
+
+ .slider-bullets img {
+ width: 104px;
+ height: 8px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/footer_automatic_files/TestimonialSection.js b/src/components/footer_automatic_files/TestimonialSection.js
new file mode 100644
index 0000000..b287a9b
--- /dev/null
+++ b/src/components/footer_automatic_files/TestimonialSection.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import './TestimonialSection.css';
+
+const TestimonialSection = ({ testimonials = [
+ {
+ id: 1,
+ text: '"MySy Training a révolutionné notre manière de gérer les formations. Un gain de temps précieux !"',
+ author: 'Marie D.',
+ role: 'Responsable Formation',
+ avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image.png',
+ rating: 5
+ },
+ {
+ id: 2,
+ text: '"Une interface intuitive et un support client réactif. Je recommande vivement."',
+ author: 'Marie D.',
+ role: 'Responsable Formation',
+ avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image-2.png',
+ rating: 4.5
+ },
+ {
+ id: 3,
+ text: '"MySy Training a révolutionné notre manière de gérer les formations. Un gain de temps précieux !"',
+ author: 'Marie D.',
+ role: 'Responsable Formation',
+ avatar: 'https://dashboard.codeparrot.ai/api/image/Z5NbKPA8XwfbJQBF/image-3.png',
+ rating: 5
+ }
+]}) => {
+ const renderStars = (rating) => {
+ const stars = [];
+ for (let i = 0; i < 5; i++) {
+ stars.push(
+
+ );
+ }
+ return stars;
+ };
+
+ return (
+
+
+ AVIS CLIENTS
+
Ils nous font confiance.
+
+
+
+ {testimonials.map((testimonial) => (
+
+
+
+ {renderStars(testimonial.rating)}
+
+
{testimonial.text}
+
+
+
+
+ {testimonial.author}
+ {testimonial.role}
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default TestimonialSection;
+
diff --git a/src/components/header_automatic_files/Header.css b/src/components/header_automatic_files/Header.css
new file mode 100644
index 0000000..bca8223
--- /dev/null
+++ b/src/components/header_automatic_files/Header.css
@@ -0,0 +1,428 @@
+.header_automatic_files {
+
+ @media only screen and (max-width: 600px) {
+
+ position: fixed;
+ /* margin-top: 22px;*/
+ width: 100%;
+ opacity: 1;
+ background: #FFF;
+
+ .header_new_2025 {
+ border-bottom: 1px solid #dcdcdc;
+ width: 100%;
+ padding-left: 50px;
+ padding-top: 15px;
+ padding-bottom: 10px;
+ }
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ .logo-menu {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ margin-left: 2rem;
+ }
+
+ .logo {
+ width: 96px;
+ height: 32px;
+ }
+
+ .menu-list {
+ display: none;
+ }
+
+ .menu-link {
+ display: none;
+ }
+
+ .cta-login {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .hide_on_mobile {
+ display: none;
+ }
+
+ .btn {
+ padding: 10px 15px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 126%;
+ cursor: pointer;
+ }
+
+ .btn-primary {
+ background-color: #3e6ee3;
+ color: #ffffff;
+ border: none;
+ }
+
+ .btn-secondary {
+ background-color: transparent;
+ color: #4b5162;
+ border: 1px solid #c7c9ce;
+ }
+
+ .separator {
+ width: 1px;
+ height: 12px;
+ background-color: rgba(23, 23, 23, 0.1);
+ border-radius: 30px;
+ }
+
+ .login-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ }
+
+ .user-icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .login-link span {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: #171717;
+ line-height: 122%;
+ }
+
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .header_new_2025 {
+ border-bottom: 1px solid #dcdcdc;
+ padding: 14px 48px;
+ width: 100%;
+ }
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ .logo-menu {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ max-width: 60%;
+ flex-direction: row;
+ }
+
+ .logo {
+ width: 96px;
+ height: 32px;
+ }
+
+ .menu-list {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ .menu-link {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: #4b5162;
+ text-decoration: none;
+ line-height: 122%;
+ }
+
+ .cta-login {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 1px;
+ }
+
+ .btn {
+ padding: 5px 8px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 126%;
+ cursor: pointer;
+ }
+
+ .btn-primary {
+ background-color: #3e6ee3;
+ color: #ffffff;
+ border: none;
+ }
+
+ .btn-secondary {
+ background-color: transparent;
+ color: #4b5162;
+ border: 1px solid #c7c9ce;
+ }
+
+ .separator {
+ width: 1px;
+ height: 12px;
+ background-color: rgba(23, 23, 23, 0.1);
+ border-radius: 30px;
+ }
+
+ .login-link {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ cursor: pointer;
+ }
+
+ .user-icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .login-link span {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: #171717;
+ line-height: 122%;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .header_new_2025 {
+ border-bottom: 1px solid #dcdcdc;
+ padding: 14px 48px;
+ width: 100%;
+ }
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ .logo-menu {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 70%;
+ flex-direction: row;
+ }
+
+ .logo {
+ width: 96px;
+ height: 32px;
+ }
+
+ .menu-list {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ .menu-link {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: #4b5162;
+ text-decoration: none;
+ line-height: 122%;
+ }
+
+ .cta-login {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 5px;
+ }
+
+ .btn {
+ padding: 3px 10px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 126%;
+ cursor: pointer;
+ }
+
+ .btn-primary {
+ background-color: #3e6ee3;
+ color: #ffffff;
+ border: none;
+ }
+
+ .btn-secondary {
+ background-color: transparent;
+ color: #4b5162;
+ border: 1px solid #c7c9ce;
+ }
+
+ .separator {
+ width: 1px;
+ height: 5px;
+ background-color: rgba(23, 23, 23, 0.1);
+ border-radius: 30px;
+ }
+
+ .login-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ }
+
+ .user-icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .login-link span {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: #171717;
+ line-height: 122%;
+ }
+ }
+
+
+ @media only screen and (min-width: 1200px) {
+ .header_new_2025 {
+ border-bottom: 1px solid #dcdcdc;
+ padding: 14px 48px;
+ width: 100%;
+ }
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ .logo-menu {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ }
+
+ .logo {
+ width: 96px;
+ height: 32px;
+ }
+
+ .menu-list {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ }
+
+ .menu-link {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: #4b5162;
+ text-decoration: none;
+ line-height: 122%;
+ }
+
+ .cta-login {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .btn {
+ padding: 12px 24px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 126%;
+ cursor: pointer;
+ }
+
+ .btn-primary {
+ background-color: #3e6ee3;
+ color: #ffffff;
+ border: none;
+ }
+
+ .btn-secondary {
+ background-color: transparent;
+ color: #4b5162;
+ border: 1px solid #c7c9ce;
+ }
+
+ .separator {
+ width: 1px;
+ height: 12px;
+ background-color: rgba(23, 23, 23, 0.1);
+ border-radius: 30px;
+ }
+
+ .login-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ }
+
+ .user-icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .login-link span {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: #171717;
+ line-height: 122%;
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/header_automatic_files/Header.jsx b/src/components/header_automatic_files/Header.jsx
new file mode 100644
index 0000000..798fc20
--- /dev/null
+++ b/src/components/header_automatic_files/Header.jsx
@@ -0,0 +1,322 @@
+import React, { useState, useEffect } from 'react';
+import './Header.css';
+import moment from "moment";
+import { getCookie } from 'react-use-cookie';
+import { useHistory } from "react-router-dom";
+
+import Header_MySy_Logo from '../../img_new_design_2025/header_mysy_logo.png';
+import Header_User from '../../img_new_design_2025/header_user.png';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import { useCookies } from "react-cookie";
+
+
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { IconButton } from '@material-ui/core';
+
+
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+const Header = () => {
+ const history = useHistory();
+ const classes = useStyles();
+ const [userconnected, setuserconnected] = useState("0");
+ const [someoneconnected, setsomeoneconnected] = useState("0");
+ const [partnerconnected, setpartnerconnected] = useState("0");
+ const stored_user = getCookie('tokenmysych');
+ const stored_part = getCookie('tokenmysypart');
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' });
+ const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart'], { path: '/' });
+ const [PartnerMenu, setPartnerMenu] = React.useState(null);
+ const [AccountMenu, setAccountMenu] = React.useState(null);
+ const [ProduitMenu, setproduitMenu] = React.useState(null);
+
+ useEffect(() => {
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ setsomeoneconnected("1");
+ local_user_connect = 1;
+ //alert(" user connected OK");
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+ setpartnerconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ setsomeoneconnected("1");
+ local_part_connect = 1;
+ //alert(" partner connected OK");
+ }
+
+ }, []);
+
+ const handleAccountCreation = () => {
+ setAccountMenu(null);
+ history.push("/new_signup/")
+ };
+
+
+ const handleMyAccount = () => {
+ setAccountMenu(null);
+ history.push("/mysy-user-account")
+ };
+
+ const handleAccountConnexion = () => {
+ setAccountMenu(null);
+ history.push("/new_signin/")
+ };
+
+
+ const handleMyPartnerAccount = () => {
+ setAccountMenu(null);
+ history.push("/Partner")
+ };
+
+
+ function handleAccountConnexion_v2() {
+
+ if (String(userconnected) === String("1")) {
+ handleMyAccount();
+ }
+ else if (String(partnerconnected) === String("1")) {
+ handleMyPartnerAccount();
+ }
+ }
+
+ const [Dialog_1_open, setDialog_1_open] = React.useState(false);
+ const Dialog_1_handleClose = () => {
+ };
+
+ const Dialog_1_handleClose_buton = () => {
+ setDialog_1_open(false);
+ };
+
+ function part_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+
+ if (typeof (stored_part) != "undefined") {
+ const stored_cookie = getCookie('tokenmysypart');
+ var acces_right_token_name = stored_cookie + "_uar";
+
+ setpartCookie("tokenmysypart", "", { path: '/' });
+ setpartCookie(acces_right_token_name, "", { path: '/' });
+ removeCookie(acces_right_token_name, { path: '/' });
+
+
+ setpartCookie("mysy_session_display_view", "", { path: '/' });
+ setpartCookie("mysy_menu_gauche_reduit", "", { path: '/' });
+ setpartCookie("mysy_catalog_data_row_grouped_by", "", { path: '/' });
+
+ removeCookie("tokenmysypart", { path: '/' });
+ removeCookie("mysy_session_display_view", { path: '/' });
+ removeCookie("mysy_menu_gauche_reduit", { path: '/' });
+ removeCookie("mysy_catalog_data_row_grouped_by", { path: '/' });
+
+
+ }
+ setsomeoneconnected("0");
+ setDialog_1_open(false);
+ history.push("/recherche-formation");
+ }
+
+ function user_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+ if (typeof (stored_user) != "undefined") {
+ const stored_cookie = getCookie('tokenmysych');
+ var acces_right_token_name = stored_cookie + "_uar";
+
+ setpartCookie("tokenmysych", "", { path: '/' });
+ setpartCookie(acces_right_token_name, "", { path: '/' });
+ removeCookie(acces_right_token_name, { path: '/' });
+
+ removeCookie("tokenmysych", { path: '/' });
+
+
+ }
+ history.push("/intranet");
+ }
+
+ return (
+
+
+ {/*** GESTION Deconnexion */}
+
null}
+
+ PaperProps={{
+
+
+ className: classes.paper, // Apply the paper style
+ style: {
+ overflowY: 'unset',
+ position: 'absolute',
+ top: '7rem',
+ margin: "2px",
+ },
+ }}
+ hideBackdrop={true}
+ disableScrollLock
+ classes={{
+ paper: classes.dialog
+ }}
+
+ PaperComponent={PaperComponent}
+ aria-labelledby="draggable-dialog-title"
+ >
+
+ MySy Information
+
+
+ Confirmez la deconnexion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ if (partnerconnected && String(partnerconnected) === '1')
+ part_logout_confirmation();
+
+ if (userconnected && String(userconnected) === '1')
+ user_logout_confirmation();
+
+ }}
+
+ className="bton_enreg_dialog">Deconnexion
+
+
+ Annuler
+
+
+
+
+
+
+ {/*** Fin GESTION Deconnexion */}
+
+
+
+
+
+
+
+ {
+ e.preventDefault();
+ var date2 = new Date();
+ const format2 = "YYYY-MM";
+ var dateTime2 = moment(date2).format(format2);
+ window.open(
+ "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2),
+ '_blank'
+ );
+ }}>Réserver une démo
+
+
+
+ {String(someoneconnected) !== String("1") && Créer un compte }
+
+ {String(someoneconnected) === String("1") && Mon compte }
+
+
+
+ {String(someoneconnected) !== String("1") &&
+
+
Connexion
+
}
+
+ {String(someoneconnected) === String("1") &&
setDialog_1_open(true)}>
+
+
Deconnexion
+
}
+
+
+
+
+
+ );
+};
+
+export default Header;
+
diff --git a/src/components/home_page_automatic_files/home_page_automatic_files.css b/src/components/home_page_automatic_files/home_page_automatic_files.css
new file mode 100644
index 0000000..421e7c1
--- /dev/null
+++ b/src/components/home_page_automatic_files/home_page_automatic_files.css
@@ -0,0 +1,25 @@
+.home_page_automatic_files {
+
+ @media only screen and (max-width: 600px) {}
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {}
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {}
+
+ @media only screen and (min-width: 1200px) {
+
+ /* Background_hero */
+ .background_hero {
+ position: absolute;
+ width: 100%;
+ height: 900px;
+ left: calc(50% - 1440px/2);
+ top: 0px;
+
+ background: #C4C8EE;
+ opacity: 0.1;
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/home_page_automatic_files/home_page_automatic_files.js b/src/components/home_page_automatic_files/home_page_automatic_files.js
new file mode 100644
index 0000000..b42c88e
--- /dev/null
+++ b/src/components/home_page_automatic_files/home_page_automatic_files.js
@@ -0,0 +1,23 @@
+import React, { useState, useEffect, } from "react";
+import './home_page_automatic_files.css';
+
+
+const Home_page_Automatic_Files = (props) => {
+
+
+ return (
+
+
+
New home page
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Home_page_Automatic_Files;
\ No newline at end of file
diff --git a/src/components/marketplace_automatic_files/new_marketplace_2025.js b/src/components/marketplace_automatic_files/new_marketplace_2025.js
new file mode 100644
index 0000000..c000685
--- /dev/null
+++ b/src/components/marketplace_automatic_files/new_marketplace_2025.js
@@ -0,0 +1,3962 @@
+import React, { useRef, useState, useMemo, useEffect } from "react";
+import "./new_s_marketplace_2025.css";
+import { useForm } from "react-hook-form";
+import axios from "axios";
+import New_C_Formation_2025 from "./../New_C_Formation_2025";
+import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
+import { BsFillXCircleFill } from "react-icons/bs";
+
+
+import SendIcon from '@mui/icons-material/Send';
+
+import Pagination from "./../TestPagination";
+import { useHistory } from "react-router-dom";
+import { getCookie, removeCookie } from 'react-use-cookie';
+import { Helmet } from "react-helmet";
+
+import AideRecherche from "./../AideRecherche"
+import { useParams } from 'react-router-dom'
+
+import Footer from "./../Fotter";
+
+import Button from '@mui/material/Button';
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
+import img_search_loup from "../../mysy_img/search_loupe_icon.png";
+
+
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import { useCookies } from "react-cookie";
+import InputRange from 'react-input-range';
+import 'react-input-range/lib/css/index.css';
+import tick_ko from "../../mysy_img/tick_KO.png";
+
+
+
+import mysy_logo2 from "../../mysy_img2/Logo_MySy.png"
+import { AiTwotoneFolder } from "react-icons/ai";
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+
+import { CiCircleRemove, CiCircleMinus } from "react-icons/ci";
+
+let PageSize = 10;
+const New_C_Marketplace_2025 = () => {
+ const [email_newsletter, setemail_newsletter] = React.useState('');
+
+ const { type, categorie } = useParams();
+ const { NewSearchText } = useParams();
+ const [v11, setv11] = useState("");
+ const [userconnected, setuserconnected] = useState("0");
+ const [TrainingSupport, setTrainingSupport] = useState("");
+ const [TrainingType, setTrainingType] = useState("");
+ const [TrainingCertif, setTrainingCertif] = useState("");
+ const [TrainingCPF, setTrainingCPF] = useState("");
+ const [TrainingLang, setTrainingLang] = useState("");
+ const [TrainingPrice, setTrainingPrice] = useState("");
+ const [SearchText, setSearchText] = useState("");
+ const [SearchcitiesText, setSearchcitiesText] = useState("");
+ const [result, setResult] = useState("");
+ const [myApiResponse, setmyApiResponse] = useState("false");
+ const [displayAllClasses, setdisplayAllClasses] = useState("0");
+ const [showelement, setshowelement] = useState("init");
+ const [country_code, setcountry_code] = useState("FR");
+ const [country_name, setcountry_name] = useState("France");
+ const [city, setcity] = useState("Paris");
+ const [postal, setpostal] = useState("75001");
+ const [latitude, setlatitude] = useState("48.861000061035156");
+ const [longitude, setlongitude] = useState("2.3380000591278076");
+ const [IPv4, setIPv4] = useState("172.71.122.128");
+ const [state, setstate] = useState("France");
+ const [userIp, setuserIp] = useState("172.71.122.128");
+ const [currentPage, setCurrentPage] = useState(1);
+ const [currentPage2, setCurrentPage2] = useState(1);
+ const [fin, setfin] = useState(0);
+ const [ismobilephone, setismobilephone] = useState();
+ const [TrainingDistanciel, setTrainingDistanciel] = useState();
+ const textInput = useRef(null);
+ const scrollDiv = useRef(null);
+
+ const [url_subdomain, seturl_subdomain] = useState(window.location.host.split(".")[0]);
+
+
+ const [textplaceholder, settextplaceholder] = useState("");
+ const [empltysearch, setempltysearch] = useState("1");
+ const [empltycitiessearch, setempltycitiessearch] = useState("1");
+
+ const [filtredistance, setfiltredistance] = useState("0");
+ const continent = ['oui', 'non'];
+ const [selectedcontinent, setselectedcontinent] = useState("");
+ const [newresult, setnewresult] = useState();
+ const stored_user = getCookie('tokenmysych');
+ const history = useHistory();
+ const [besoinaiderecherche, setbesoinaiderecherche] = useState("");
+ const [istrier, setistrier] = useState();
+ const [selectmetier, setselectmetier] = useState();
+ const [initAllfiter, setinitAllfiter] = useState();
+ const testDivRef = useRef(null);
+ const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
+ const inputEl = useRef(null);
+
+
+
+
+ const url = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
+ const {
+ register,
+ formState: { errors },
+ handleSubmit,
+ watch,
+ } = useForm();
+ const pwd = useRef({});
+ pwd.current = watch("pwd", "");
+
+
+
+ const onSubmit = async (data) => {
+
+ searchFunction();
+ };
+
+ const [Trainingdistance, setTrainingdistance] = useState(0);
+ const handleInput = (e) => {
+ setTrainingdistance(e.target.value);
+ }
+
+ const [Trainingduration, setTrainingduration] = useState(0);
+ const handleInputDuration = (e) => {
+ setTrainingduration(e.target.value);
+ }
+
+
+ function showdisplayfilter(event) {
+
+ if (showelement == "true") {
+ setshowelement("false");
+ document.getElementById('block_partner').style.top = "5200px"
+ document.getElementById('pieddepage_v2').style.top = "5800px"
+ }
+ else if (showelement == "false") {
+ setshowelement("true");
+ document.getElementById('block_partner').style.top = "6300px"
+ document.getElementById('pieddepage_v2').style.top = "6800px"
+ }
+
+
+ }
+
+ function clearsearchtext(event) {
+ setSearchText("");
+ setResult([]);
+ document.getElementById("SearchText").value = "";
+ setempltysearch("1")
+ setbesoinaiderecherche("");
+ settext("");
+ DisplayXfirstClas();
+ }
+
+ const [suggestion2, setsuggestion2] = useState([]);
+ const [suggestioncities, setsuggestioncities] = useState([]);
+
+ function SearchTextHandle(event) {
+ setempltysearch("0");
+ setSearchText(event.target.value);
+
+ var val = String(event.target.value).toLocaleLowerCase();
+ let matches = [];
+ // 13/01 : A faire absolument. j'ai bloqué car bug d'affichage (pas au bon endroit)
+
+ if (String(val).length > 2) {
+ matches = suggestedwords.filter(usr => {
+ //alert(JSON.parse(usr).name );
+ const regex = new RegExp(`${val}`, "gi");
+ return JSON.parse(usr).name.match(regex);
+ }
+
+ )
+
+ }
+
+ //console.log("matches = " + matches);
+ setsuggestion2(matches);
+ settext(event.target.value);
+ }
+
+ function SearchcitiesHandle(event) {
+ setempltycitiessearch("0");
+ setSearchcitiesText(event.target.value);
+
+ var val = String(event.target.value).toLocaleLowerCase().trimStart();
+ const regex = new RegExp(`^${val}`, "gi");
+
+ let matches = [];
+
+ if (String(val).length > 2) {
+ matches = suggestedcities.filter(usr => {
+ return JSON.parse(usr).ville.match(regex);
+ })
+ }
+
+ //console.log("matches = " + matches);
+ setsuggestioncities(matches);
+ setcities(event.target.value);
+
+ }
+
+
+ const [v1, setv1] = useState();
+ const [v2, setv2] = useState();
+
+
+ function TrainingSupportHandle(event) {
+ setsupportchecked("1");
+ var toto = "";
+ var filtre1 = "";
+ var filtre2 = "";
+ var filtre3 = "";
+
+ var crit_TrainingSupport = "";
+ var crit_TrainingSupport22 = "";
+
+
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+
+ //console.log("crit_TrainingSupport = ", crit_TrainingSupport);
+
+ if (crit_TrainingSupport.length > 0) {
+ filtre1 = result.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+ setv11(filtre1);
+ }
+ else if (crit_TrainingSupport.length <= 0) {
+ /* l'utilisateur a choisi d'annuler le filter */
+ annulefiltresupportchecked();
+ return;
+ //filtre1 = result;
+ //setv11(filtre1);
+ }
+ }
+
+ /*
+
+
+
+ if (document.querySelector('input[name="TrainingSupport"]:checked')) {
+ crit_TrainingSupport = document.querySelector('input[name="TrainingSupport"]:checked').value;
+ if (crit_TrainingSupport.length > 0) {
+ filtre1 = result.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+ setv11(filtre1);
+ }
+ else if (crit_TrainingSupport.length <= 0 || String(crit_TrainingSupport) === String("NA")) {
+ filtre1 = result;
+ setv11(filtre1);
+ }
+
+ }
+ */
+
+
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+
+ }
+
+ // recuperation du filtre du type (cours, tuto, etc)
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
+
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+ }
+ // Recup du filtre de prix
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ if (range_price.min && range_price.max) {
+ filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
+ Number(JSON.parse(maformation).price) <= Number(range_price.max)
+ );
+
+ setv11(filtre1);
+ }
+
+
+ setnewresult(filtre1);
+
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+
+ }
+
+
+
+ function TrainingCertifHandle(event) {
+
+ var ele = document.querySelector('input[name="TrainingCertif"]:checked').value
+
+ var toto = "";
+ var filtre1 = "";
+ var filtre2 = "";
+ var filtre3 = "";
+
+ setcertifchecked("");
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ setcertifchecked("1");
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
+ if (crit_TrainingCertif.length > 0) {
+ //alert(" laa = " + crit_TrainingCertif);
+ //console.log(result)
+ filtre1 = result.filter((maformation) => String(JSON.parse(maformation).certif) === String(crit_TrainingCertif));
+ setv11(filtre1);
+ }
+
+ } else {
+
+ filtre1 = result;
+ setv11(filtre1);
+ }
+
+ /*
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.querySelector('input[name="TrainingSupport"]:checked')) {
+ crit_TrainingSupport = document.querySelector('input[name="TrainingSupport"]:checked').value
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+
+ }
+ */
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+
+ }
+
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+
+ // recuperation du filtre du type
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);
+
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+
+ }
+
+ // Recup du filtre de prix
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ if (range_price.min && range_price.max) {
+ filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
+ Number(JSON.parse(maformation).price) <= Number(range_price.max)
+ );
+
+ setv11(filtre1);
+ }
+
+
+ setnewresult(filtre1);
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+
+
+ return;
+ }
+
+
+
+ // Pour le CPF
+ const [cpfchecked, setcpfchecked] = useState();
+ function TrainingCPFHandle(event) {
+
+ var ele = document.querySelector('input[name="TrainingCPF"]:checked').value
+ var myelement;
+
+ if (document.getElementById('rech_middlebox')) {
+ myelement = document.getElementById('rech_middlebox');
+ }
+
+
+ var toto = "";
+ var filtre1 = "";
+ var filtre2 = "";
+ var filtre3 = "";
+
+ setcpfchecked("");
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ setcpfchecked("1");
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
+ if (crit_TrainingCPF.length > 0) {
+ //alert(" crit_TrainingCPF = " + crit_TrainingCPF);
+
+ filtre1 = result.filter((maformation) => String(JSON.parse(maformation).cpf) === String(crit_TrainingCPF));
+ setv11(filtre1);
+ //console.log(" #### ",filtre1);
+ }
+
+ } else {
+
+ filtre1 = result;
+ setv11(filtre1);
+ }
+
+ // recuperation du filtre du certificat
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+
+ }
+
+
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+
+ }
+
+
+ // recuperation du filtre du type
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);
+
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+
+
+
+ }
+
+ // Recup du filtre de prix
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ if (range_price.min && range_price.max) {
+ filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
+ Number(JSON.parse(maformation).price) <= Number(range_price.max)
+ );
+
+ setv11(filtre1);
+ }
+
+
+ setnewresult(filtre1);
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+ if (myelement) {
+ myelement.scrollIntoView({ behavior: 'smooth' });
+ }
+
+ return;
+ }
+
+
+ // END PR CPF
+ function TrainingTypeHandle(event) {
+
+ settypechecked("1");
+ var toto = "";
+ var filtre1 = "";
+ var filtre2 = "";
+ var filtre3 = "";
+
+ var myelement;
+
+ if (document.getElementById('rech_middlebox')) {
+ myelement = document.getElementById('rech_middlebox');
+ }
+
+ var crit_TrainingPrice = "";
+
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
+ if (crit_TrainingType.length > 0) {
+ filtre1 = result.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
+ setv11(filtre1);
+ }
+
+ } else {
+
+ filtre1 = result;
+ setv11(filtre1);
+ }
+
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+
+ }
+
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+ // recuperation du filtre du certificat
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+
+ }
+
+ // Recup du filtre de prix
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ if (range_price.min && range_price.max) {
+ filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
+ Number(JSON.parse(maformation).price) <= Number(range_price.max)
+ );
+
+ setv11(filtre1);
+ }
+
+
+ setnewresult(filtre1);
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+
+ if (myelement) {
+ // 👇 Will scroll smoothly to the top of the next section
+ myelement.scrollIntoView({ behavior: 'smooth' });
+
+ }
+
+
+ return;
+
+
+
+
+
+ }
+
+
+ function TrainingLangHandle(event) {
+ setTrainingLang(event.target.value);
+ alert("newresult newresultnewresultnewresult = " + newresult);
+ }
+
+
+ function TrainingPriceHandle(event) {
+
+
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ setTrainingPrice(event.target.value);
+ var toto = "";
+ var filtre1 = "";
+
+
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ var myprices = crit_TrainingPrice.split(':');
+ if (range_price.min && range_price.max) {
+ filtre1 = result.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
+ Number(JSON.parse(maformation).price) <= Number(range_price.max)
+ );
+ //console.log(" PRICEEEEEEEEEEEEEEEE = "+filtre1);
+ setv11(filtre1);
+ }
+ else {
+ //alert(" Annulation du filtre prix");
+ filtre1 = result;
+ setv11(filtre1);
+ }
+
+
+
+ // Recuperation des autres filtres.
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+ }
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+
+ // recuperation du filtre du certification
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+ }
+
+ // recuperation du filtre du type (cours, tuto, etc)
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+
+ }
+
+
+ setnewresult(filtre1);
+ setCurrentPage2(1);
+
+ }
+
+
+ // Traitement du filtre presentiel / distantiel
+ function TrainingDistancielHandle(event) {
+
+
+ isonsite();
+ setlieuchecked("1");
+ var toto = "";
+ var filtre1 = "";
+ var filtre0 = [];
+ var filtre01 = [];
+ var my_ville = "";
+ var my_cp = "";
+
+ if (document.getElementById("ville")) {
+ my_ville = crit_TrainingSupport = document.getElementById("ville").value;
+ my_ville = my_ville.trim();
+
+ }
+
+ if (document.getElementById("zip_code")) {
+ my_cp = crit_TrainingSupport = document.getElementById("zip_code").value;
+ my_cp = my_cp.trim();
+
+ }
+
+ var crit_Trainingdistance = "";
+ // Recuperation du filtre principale modifié dans ce event (distance)
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
+ //alert("crit_Trainingdistance = " + crit_Trainingdistance);
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+
+ if (String(crit_Trainingdistance) === String("1")) {
+
+ filtre1 = result.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = result.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+
+ // Traitement du nom de la ville
+ if (my_ville.length > 3) {
+
+ var filtre2 = filtre1.map(obj => {
+
+ if (JSON.parse(obj).datelieu) {
+
+ var tmp = JSON.parse(obj).datelieu.length
+ var i = 0;
+ while (i < tmp) {
+ //console.log(JSON.parse(obj).datelieu[i]);
+ //console.log(" ville =" + JSON.parse(obj).datelieu[i].ville)
+ if (JSON.parse(obj).datelieu[i].ville === my_ville) {
+ return obj
+ }
+ i++;
+ }
+ }
+
+ });
+
+ var filtre3 = filtre2.filter(function (element) {
+ return element !== undefined;
+ });
+
+
+ filtre1 = filtre3;
+ }
+
+ // Traitement du zip code
+ if (my_cp.length > 2) {
+
+ var filtre2 = filtre1.map(obj => {
+
+ if (JSON.parse(obj).datelieu) {
+
+ var tmp = JSON.parse(obj).datelieu.length
+ var i = 0;
+ while (i < tmp) {
+ //console.log(JSON.parse(obj).datelieu[i]);
+ //console.log(" ville =" + JSON.parse(obj).datelieu[i].ville)
+ if (JSON.parse(obj).datelieu[i].code_postal.startsWith(my_cp)) {
+ return obj
+ }
+ i++;
+ }
+ }
+
+ });
+
+ var filtre3 = filtre2.filter(function (element) {
+ return element !== undefined;
+ });
+
+
+ filtre1 = filtre3;
+ }
+
+ setv11(filtre1);
+
+
+ }
+ else if (String(crit_Trainingdistance) === String("NA")) {
+
+ filtre1 = result;
+ setv11(filtre1);
+ }
+ }
+ else if (crit_Trainingdistance.length <= 0) {
+
+ filtre1 = result;
+ setv11(filtre1);
+ }
+ }
+
+
+ /* Recuperation des autres filtres */
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+ }
+
+ // recuperation du filtre du certification
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+ }
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+
+ // recuperation du filtre du type (cours, tuto, etc)
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
+ }
+
+ // Recup du filtre de prix
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ if (range_price.min && range_price.max) {
+ filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
+ Number(JSON.parse(maformation).price) <= Number(range_price.max)
+ );
+
+ setv11(filtre1);
+ }
+
+
+ setnewresult(filtre1);
+ setCurrentPage2(1);
+ }
+
+
+
+ function displayAllClassesHandle(event) {
+ setdisplayAllClasses(event.target.checked);
+ if (event.target.checked == true)
+ document.getElementById("SearchText").disabled = true;
+ else
+ document.getElementById("SearchText").disabled = false;
+ }
+
+
+ const [suggestedwords, setsuggestedwords] = useState([]);
+ const [texte, settext] = useState("");
+
+ const [cities, setcities] = useState("");
+
+ const [suggestedcities, setsuggestedcities] = useState([]);
+
+
+
+ useEffect(() => {
+
+
+ /*
+ console.log(" zzzzzzzzzzzzzzzzzz ");
+
+ // Verifier s'il y a un sous domaine
+ var tab_split_sous_domain = window.location.host.split(".");
+
+ if (tab_split_sous_domain.length > 2) {
+ var new_url = process.env.REACT_APP_FRONT_URL_CANONICAL_BASE + tab_split_sous_domain[0] + "." + process.env.REACT_APP_FRONT_URL_CANONICAL + "moncatalog";
+ window.open(String(new_url),
+ '_self'
+ );
+ }
+
+
+ */
+
+
+ var ip = "";
+ async function fetchData() {
+ // const result = await axios('https://geolocation-db.com/json/',);
+
+
+
+ /* setuserIp("172.71.122.128");
+ setcountry_code("FR");
+ setcountry_name("France");
+ setcity("Paris");
+ setpostal("75001");
+ setlatitude("48.861000061035156");
+ setlongitude("2.3380000591278076");
+ setIPv4("172.71.122.128");
+ setstate("France");*/
+
+ let windowWidth = window.innerWidth;
+
+ if (showelement === "init") {
+
+ if (windowWidth < 601) {
+ setismobilephone(true);
+ setshowelement("false");
+ settextplaceholder("Plus de 10 000 formations (gratuites, payantes...)");
+
+ } else if (windowWidth >= 601) {
+ setismobilephone(false);
+ setshowelement("true");
+ //settextplaceholder("Ex : graphiste ...sur plus de 10 000 formations (gratuites, payantes,..)");
+ settextplaceholder("Recherche par Titre, Description, Contenu video ... sur plus de 10 000 formations (gratuites, payantes,..)");
+ }
+ }
+
+
+ if (categorie && String(categorie).length > 0) {
+
+ getClassByMetier_categorie(categorie);
+
+ }
+ else {
+
+ DisplayXfirstClas(result.data);
+
+ }
+ }
+
+
+ fetchData();
+ async function loadSuggestedWord() {
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/";
+ //alert(" URL = "+process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/");
+ //console.log(" ### URL ##### = "+process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/");
+
+ var form = new FormData();
+
+ fetch(
+ process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/",
+ {
+ method: 'POST',
+
+ }
+ ).then((response) => response.json())
+ .then((result) => {
+ //console.log('Success:', result['message']);
+ setsuggestedwords(result['message']);
+
+
+ })
+ .catch((error) => {
+ console.error('Error:');
+ });
+
+ }
+ loadSuggestedWord();
+
+ async function loadSuggestedFrCities() {
+
+ fetch(
+ process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Fr_Cities/",
+ {
+ method: 'POST',
+
+ }
+ ).then((response) => response.json())
+ .then((result) => {
+ //console.log(' loadSuggestedFrCities CITIES = Success:', result['message']);
+ setsuggestedcities(result['message']);
+ //console.log(" CITIES = " + result['message']);
+
+ })
+ .catch((error) => {
+ console.error('Error:');
+ });
+
+ }
+ loadSuggestedFrCities();
+
+
+ async function loadDomainMetier() {
+
+ var form = new FormData();
+
+ fetch(
+ process.env.REACT_APP_API_URL + "myclass/api/get_List_domaine_metier/",
+ {
+ method: 'POST',
+
+ }
+ ).then((response) => response.json())
+ .then((result) => {
+ //console.log('### loadDomainMetier Success:', result['message']);
+ setdomaine_metier(result['message']);
+ var tab = [];
+
+ result.message.map(obj => {
+
+ if (JSON.parse(obj).label) {
+
+
+ var month = {};
+ month.label = JSON.parse(obj).label;
+ month.value = JSON.parse(obj).value;
+ month.domaine = JSON.parse(obj).domaine;
+ tab.push({ ...month });
+ }
+ });
+
+
+ setdomaine_v11(tab);
+ setdomaine_v11_orig(tab);
+ setdomaine_metier(tab);
+ setdomaine_metier_orig(tab);
+
+
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ });
+
+ }
+ //loadDomainMetier();
+
+
+ async function loadDomain() {
+
+ var form = new FormData();
+
+ fetch(
+ process.env.REACT_APP_API_URL + "myclass/api/get_List_domaine_formation/",
+ {
+ method: 'POST',
+
+ }
+ ).then((response) => response.json())
+ .then((result) => {
+ //console.log('### loadDomainMetier Success:', result['message']);
+ setdomaine_metier(result['message']);
+
+ })
+ .catch((error) => {
+ console.error('loadDomain :', error);
+
+ });
+
+ }
+
+ loadDomain();
+
+ const listener = event => {
+ if (event.code === "Enter" || event.code === "NumpadEnter") {
+ event.preventDefault();
+ searchFunction();
+ }
+ };
+ document.addEventListener("keydown", listener);
+
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ } else {
+ setuserconnected("1");
+ }
+
+
+ setinitAllfiter();
+
+ whosisconnected();
+
+ if (categorie) {
+ //console.log(" ### categorie = ", categorie);
+ setmymetier(categorie);
+ } else {
+ setmymetier();
+ }
+
+ //document.getElementById("_1234").checked = true;
+
+
+
+ }, [initAllfiter, categorie]);
+
+
+ // Cette fonction reinitialise les filtres
+ function InitAllfilters() {
+ //document.getElementById("TrainingCertif").selectedv = 0;
+ const $select = document.querySelector('#TrainingCertif');
+ $select.value = ''
+
+ const $select2 = document.querySelector('#TrainingSupport');
+ $select2.value = ''
+
+ const $select3 = document.querySelector('#TrainingType');
+ $select3.value = ''
+
+ const $select4 = document.querySelector('#TrainingPresentiel');
+ $select4.value = 'NA'
+
+ const $select5 = document.querySelector('#TrainingPrice');
+ $select5.value = 'NA'
+
+
+
+ }
+
+ function DisplayClassByDomainFilter() {
+ var tab_domaine = list_domaine.split(";")
+ //console.log("tab_domaine = ", tab_domaine)
+
+ if (tab_domaine.length <= 0) {
+ setdomaine_v11(domaine_v11_orig);
+ DisplayXfirstClas();
+ return;
+ }
+
+
+
+ }
+
+ const handleChangeMetier = (event) => {
+
+ var local_list_metier = ""
+
+
+ for (let i = 0; i < event.length; i++) {
+ const label = event[i].label;
+ const value = event[i].value;
+
+ local_list_metier += value + ";"
+
+ }
+
+ //console.log(" ### local_list_metier = ",local_list_metier);
+ setlist_metier(local_list_metier);
+ //TrainingMetierHandle();
+
+ // Verification si on a une valeur
+ if (event.length > 0 && local_list_metier.trim().length > 0) {
+ getClassByMetier(local_list_metier);
+ } else {
+ DisplayClassByDomainFilter();
+ }
+
+ }
+
+
+
+ const [domaine_metier, setdomaine_metier] = useState([]);
+ const [domaine_metier_orig, setdomaine_metier_orig] = useState([]);
+
+ const [domaine_formation, setdomaine_formation] = useState([]);
+
+ const [domaine_v11, setdomaine_v11] = useState("");
+ const [domaine_v11_orig, setdomaine_v11_orig] = useState("");
+
+ const [list_domaine, setlist_domaine] = useState("");
+ const [list_metier, setlist_metier] = useState("");
+
+ const handleChangeDomaine = (event) => {
+
+
+ if (event.length <= 0) {
+ setdomaine_v11(domaine_v11_orig);
+ DisplayXfirstClas();
+ return;
+ }
+ //console.log(domaine_metier);
+ //console.log(" taille =" + event.length);
+ //console.log(domaine_v11_orig);
+
+ var tt = domaine_v11_orig;
+ var dump = [];
+ var local_list_domaine = ""
+
+
+ for (let i = 0; i < event.length; i++) {
+ const label = event[i].label;
+ const value = event[i].value;
+
+ local_list_domaine += value + ";"
+
+ tt = domaine_v11_orig.filter((maformation) => maformation.domaine === String(value));
+ //console.log(" TT = ", tt);
+
+ for (let i2 = 0; i2 < tt.length; i2++) {
+ //console.log(" push de ", tt[i2])
+ dump.push(tt[i2]);
+ }
+
+ setlist_domaine(local_list_domaine);
+ setdomaine_v11(dump);
+ }
+
+ getClassByDomaine(local_list_domaine);
+
+
+
+ }
+
+
+
+ const currentTableData2 = useMemo(() => {
+ if (newresult) {
+ const firstPageIndex = (currentPage2 - 1) * PageSize;
+ const lastPageIndex = firstPageIndex + PageSize;
+ setfin(1);
+ return newresult.slice(firstPageIndex, lastPageIndex);
+ }
+
+
+ if (result) {
+ const firstPageIndex = (currentPage2 - 1) * PageSize;
+ const lastPageIndex = firstPageIndex + PageSize;
+ setfin(1);
+ return result.slice(firstPageIndex, lastPageIndex);
+ }
+ else {
+ return [];
+ setfin(0);
+ }
+ }, [currentPage2]);
+
+ function searchFunction(e) {
+ // Nettoyage du resultat precedent.
+ setResult([]);
+
+ var crit_TrainingSupport = "";
+ var crit_TrainingType = "";
+ var crit_TrainingCertif = "";
+ var crit_TrainingLang = "";
+ var crit_TrainingPresentiel = "";
+ var crit_TrainingPrice = "";
+ var crit_TrainingDuration = "";
+ var my_ville = "";
+
+ var my_cp = "";
+
+ var my_domaine = "";
+
+
+
+ if (document.getElementById("searchdomain"))
+ my_domaine = document.getElementById("searchdomain").value;
+
+
+
+ //Get Criterias
+ var crit_SearchText = document.getElementById("SearchText").value;
+
+ if (document.getElementById("TrainingSupport"))
+ crit_TrainingSupport = document.getElementById("TrainingSupport").value;
+
+ if (document.getElementById("TrainingType"))
+ crit_TrainingType = document.getElementById("TrainingType").value;
+
+ if (document.getElementById("TrainingCertif"))
+ crit_TrainingCertif = document.getElementById("TrainingCertif").value;
+ if (crit_TrainingCertif.length == 0)
+ crit_TrainingCertif = "NA";
+
+
+ if (document.getElementById("TrainingLang"))
+ crit_TrainingLang = document.getElementById("TrainingLang").value;
+
+ if (document.getElementById("TrainingPresentiel"))
+ crit_TrainingPresentiel = document.getElementById("TrainingPresentiel").value;
+
+ if (document.getElementById("TrainingPrice"))
+ crit_TrainingPrice = document.getElementById("TrainingPrice").value;
+
+ if (document.getElementById("duration"))
+ crit_TrainingDuration = document.getElementById("duration").value;
+
+
+ if (document.getElementById("ville")) {
+ my_ville = crit_TrainingSupport = document.getElementById("ville").value;
+
+ }
+
+ if (document.getElementById("zip_code")) {
+ my_cp = crit_TrainingSupport = document.getElementById("zip_code").value;
+
+ }
+
+
+ var crit_Trainingdistance = Trainingdistance;
+
+ //console.log(" my_domaine = ", my_domaine);
+
+ /*console.log('SearchText = ' + crit_SearchText + ' - TrainingSupport = ' + crit_TrainingSupport +
+ ' - TrainingType = ' + crit_TrainingType + ' - TrainingCertif ' + crit_TrainingCertif +
+ " Langue = " + crit_TrainingLang + " TrainingPrice = " + crit_TrainingPrice +
+ " - Distance = " + crit_Trainingdistance + " -- Presentiel :" + crit_TrainingPresentiel +
+ " - Duration = " + crit_TrainingDuration + " - stored_user_cookie = " + stored_user);*/
+
+
+ var form = new FormData();
+ form.append("search_text", crit_SearchText);
+
+
+ var my_local_user_connect;
+ var my_local_part_connect;
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ my_local_user_connect = 0;
+ } else {
+ my_local_user_connect = 1;
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+ my_local_part_connect = 0;
+ } else {
+ my_local_part_connect = 1;
+ }
+
+
+
+ if (String(my_local_user_connect) === "1") {
+ form.append("token", stored_user);
+ form.append("connection_type", "user");
+ }
+ else if (String(my_local_part_connect) === "1") {
+ form.append("token", stored_part);
+ form.append("connection_type", "partner");
+ }
+ else {
+ form.append("token", "");
+ form.append("connection_type", "");
+ }
+ form.append("certif", crit_TrainingCertif);
+ form.append("support", crit_TrainingSupport);
+ form.append("type", crit_TrainingType);
+ form.append("lang", crit_TrainingLang);
+ form.append("price", crit_TrainingPrice);
+ form.append("distance", crit_Trainingdistance);
+ form.append("duration", crit_TrainingDuration);
+
+
+ // Ajout des info IP user
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+
+ var myurl = ""
+ if (displayAllClasses == true) {
+ myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_class/";
+ }
+ else {
+ myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_text_simple/";
+
+ }
+
+ //alert("myurl = "+myurl);
+ axios.post(myurl, form).then(res => {
+ if (String(res.data.status) != String("false")) {
+ //console.log(" In test res.data.status = " + res.data.status);
+ //console.log(" In test res.data.message = " + res.data.message);
+ setmyApiResponse("True");
+ setResult(res.data.message)
+
+ //Verification si le resutlat est vide
+ if (res.data.message.length <= 0) {
+ setbesoinaiderecherche("1");
+ }
+ /*if (scrollDiv.current) {
+ scrollDiv.current.scrollIntoView({ behavior: "smooth" });
+ }*/
+
+ var myelement;
+
+ if (document.getElementById('rech_middlebox')) {
+ myelement = document.getElementById('rech_middlebox');
+ }
+
+ if (myelement) {
+ myelement.scrollIntoView({ behavior: 'smooth' });
+ }
+
+ }
+
+ else {
+ //console.log(" In test res.data.status = " + res.data.status);
+ //console.log(" In test res.data.message = " + res.data.message);
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ //textInput.current.focus();
+ }
+
+
+ }).catch((error) => {
+ // console.warn('Not good man :( mysearchtext = ');
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ })
+
+ // window.scrollTo(0, 600);
+
+
+
+
+ }
+
+ // Cette fonction affiche les X premieres formations
+ function DisplayXfirstClas(ip) {
+
+ // Nettoyage du resultat precedent.
+ setResult([]);
+
+
+
+ //Get Criterias
+ var crit_SearchText = "";
+ var myurl = "";
+
+ if (typeof (NewSearchText) === "undefined" || String(NewSearchText) === '') {
+ crit_SearchText = "";
+ myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_class/";
+
+
+ } else {
+ crit_SearchText = NewSearchText;
+ myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_text_simple/";
+
+ }
+
+
+
+ var form = new FormData();
+ form.append("search_text", crit_SearchText);
+
+
+ var my_local_user_connect;
+ var my_local_part_connect;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ my_local_user_connect = 0;
+ } else {
+ my_local_user_connect = 1;
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+ my_local_part_connect = 0;
+ } else {
+ my_local_part_connect = 1;
+ }
+
+ if (String(my_local_user_connect) === "1") {
+ form.append("token", stored_user);
+ form.append("connection_type", "user");
+ }
+ else if (String(my_local_part_connect) === "1") {
+ form.append("token", stored_part);
+ form.append("connection_type", "partner");
+ }
+ else {
+ form.append("token", "");
+ form.append("connection_type", "");
+ }
+
+ form.append("certif", "");
+ form.append("support", "");
+ form.append("type", "");
+ form.append("lang", "");
+ form.append("price", "");
+ form.append("distance", "");
+ form.append("duration", "");
+ form.append("cpf", "");
+
+
+
+ // Ajout des info IP user
+ if (ip) {
+ //console.log(" ### with IP");
+ form.append("user_ip", ip.IPv4);
+ form.append("user_country_code", ip.country_code);
+ form.append("user_country_name", ip.country_name);
+ form.append("user_city", ip.city);
+ form.append("user_postal", ip.postal);
+ form.append("user_latitude", ip.latitude);
+ form.append("user_longitude", ip.longitude);
+ form.append("user_state", ip.state);
+ }
+ else {
+ //console.log(" ### with OUT IP");
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+ // alert(" rrtt ");
+ }
+
+
+ //alert("myurl = " + myurl);
+ axios.post(myurl, form).then(res => {
+ if (String(res.data.status) != String("false")) {
+ //console.log(" In test res.data.status = " + res.data.status);
+ //console.log(" In DisplayXfirstClas res.data.message = " + res.data.message);
+
+ setmyApiResponse("True");
+ setResult(res.data.message)
+ // textInput.current.focus();
+ setbesoinaiderecherche("");
+
+ }
+ else {
+ //console.log(" In test res.data.status = " + res.data.status);
+ //console.log(" In test res.data.message = " + res.data.message);
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ //textInput.current.focus();
+ }
+
+
+ }).catch((error) => {
+ // console.warn('Not good man :( mysearchtext = ');
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ })
+
+
+ }
+
+ function trier(e) {
+
+ setistrier();
+ var trierpar = ""
+ if (document.getElementById("trierpar"))
+ trierpar = document.getElementById("trierpar").value;
+
+ if (String(trierpar) === String("duration")) {
+ setCurrentPage2(1);
+ setCurrentPage(1);
+
+ if (typeof (newresult) === "undefined" || String(newresult) === '') {
+
+ //console.log(" AVANT TRIE : [0].duration = " + JSON.parse(result[0]).duration + " - [1].duration = " + JSON.parse(result[1]).duration)
+ result.sort(function (a, b) {
+ return JSON.parse(a).duration - JSON.parse(b).duration;
+ });
+
+ //console.log("APRES TRIE : [0].duration = " + JSON.parse(result[0]).duration + " - [1].duration = " + JSON.parse(result[1]).duration)
+ setistrier("1");
+ }
+ else if (typeof (newresult) !== "undefined" || newresult.length > 0) {
+ newresult.sort(function (a, b) {
+ return JSON.parse(a).duration - JSON.parse(b).duration;
+ });
+ }
+ }
+
+ else if (String(trierpar) === String("price")) {
+ setCurrentPage2(1);
+
+ if (typeof (newresult) === "undefined" || String(newresult) === '') {
+ //console.log(" AVANT TRIE : [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
+ result.sort(function (a, b) {
+ return JSON.parse(a).price - JSON.parse(b).price;
+ });
+ //console.log("APRES TRIE : [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
+ setistrier("2");
+ }
+ else if (typeof (newresult) !== "undefined" || newresult.length > 0) {
+ newresult.sort(function (a, b) {
+ return JSON.parse(a).price - JSON.parse(b).price;
+ });
+ }
+ }
+
+ else if (String(trierpar) === String("note")) {
+ setCurrentPage2(1);
+
+ if (typeof (newresult) === "undefined" || String(newresult) === '') {
+ //console.log(" AVANT TRIE : [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
+ result.sort(function (a, b) {
+ return JSON.parse(b).note - JSON.parse(a).note;
+ });
+ //console.log("APRES TRIE : [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
+ setistrier("2");
+ }
+ else if (typeof (newresult) !== "undefined" || newresult.length > 0) {
+ newresult.sort(function (a, b) {
+ return JSON.parse(b).note - JSON.parse(a).note;
+ });
+ }
+ }
+
+ }
+
+
+ function getClassByMetier_categorie(mycate) {
+
+ var mymetier = mycate;
+
+
+ // Nettoyage du resultat precedent.
+ setResult([]);
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class_by_metier/";
+
+ /*if (mymetier === "tout") {
+ //alert(" tout et sortir");
+ setinitAllfiter("1");
+ return;
+
+ }*/
+
+ var form = new FormData();
+ form.append("metier", mymetier);
+ form.append("token", "");
+
+
+ //alert("myurl = "+myurl);
+ axios.post(myurl, form).then(res => {
+ if (String(res.data.status) != String("false")) {
+
+ setmyApiResponse("True");
+ setResult(res.data.message)
+ //textInput.current.focus();
+ setbesoinaiderecherche("");
+ setnewresult("");
+ //console.log(" In getClassByMetier res.data.status = " + res.data.status);
+ //console.log(" In getClassByMetier res.data.message = " + res.data.message);
+ //setnewresult(res.data.message);
+ setCurrentPage2(1);
+ if (scrollDiv.current) {
+ scrollDiv.current.scrollIntoView({ behavior: "smooth" });
+ }
+
+ // reinitialisation de tous les filtre
+
+ //setmyApimyApiMessage("OK")
+ //console.log("taille = "+res.data.message.length);
+ }
+ else {
+ //console.log(" In getClassByMetier res.data.status = " + res.data.status);
+ //console.log(" In getClassByMetier res.data.message = " + res.data.message);
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ //textInput.current.focus();
+ }
+
+
+ }).catch((error) => {
+ console.warn(' getClassByMetier : Not good man :( mysearchtext = ');
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ })
+
+ }
+
+
+ function getClassByDomaine(List_Domaine) {
+
+ // Nettoyage du resultat precedent.
+ setResult([]);
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class_by_domaine/";
+
+ /*if (mymetier === "tout") {
+ //alert(" tout et sortir");
+ setinitAllfiter("1");
+ return;
+
+ }*/
+
+ var form = new FormData();
+ form.append("domaine", List_Domaine);
+ form.append("token", "");
+
+
+ //alert("myurl = "+myurl);
+ axios.post(myurl, form).then(res => {
+ if (String(res.data.status) != String("false")) {
+
+ setmyApiResponse("True");
+ setResult(res.data.message)
+ //textInput.current.focus();
+ setbesoinaiderecherche("");
+ setnewresult("");
+ //console.log(" In getClassByDomaine res.data.status = " + res.data.status);
+ //console.log(" In getClassByDomaine res.data.message = " + res.data.message);
+ //setnewresult(res.data.message);
+ setCurrentPage2(1);
+ if (scrollDiv.current) {
+ scrollDiv.current.scrollIntoView({ behavior: "smooth" });
+ }
+
+ // reinitialisation de tous les filtre
+
+ //setmyApimyApiMessage("OK")
+ //console.log("taille = "+res.data.message.length);
+ }
+ else {
+ //console.log(" In getClassByMetier res.data.status = " + res.data.status);
+ //console.log(" In getClassByMetier res.data.message = " + res.data.message);
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ //textInput.current.focus();
+ }
+
+
+ }).catch((error) => {
+ console.warn(' getClassByMetier : Not good man :( mysearchtext = ');
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ })
+
+ }
+
+ function ReinitFilters() {
+ // Reinitialisation des filtre
+ annulefiltrecertif();
+ annulefiltresupportchecked();
+ annulefiltretypechecked();
+ annulefiltrelieuchecked();
+ annulefiltrecpf();
+ }
+
+ const [mymetier, setmymetier] = useState("");
+
+ function getClassByMetier(my_liste_metier) {
+
+
+ if (NewSearchText && NewSearchText.length > 2) {
+ alert(" Réinitialiser les filtres pour utiliser cette fonctionalité");
+ return;
+ }
+ var myelement;
+
+ if (document.getElementById('rech_middlebox')) {
+ myelement = document.getElementById('rech_middlebox');
+ }
+
+ var check_metier = "";
+ if (document.querySelector('input[name="metier_radio"]:checked')) {
+
+ check_metier = document.querySelector('input[name="metier_radio"]:checked').value;
+ }
+
+ setmymetier(check_metier);
+ ReinitFilters();
+
+
+ if (check_metier === "tout") {
+ // Nettoyage du resultat precedent.
+ setResult([]);
+ setnewresult("");
+ //alert(" tout et sortir");
+
+ setdomaine_v11(domaine_v11_orig);
+ DisplayXfirstClas();
+ //setResult([]);
+
+ /*const pieces = window.location.href.split("/")
+ const last = pieces[pieces.length - 1]
+ const last2 = pieces[pieces.length - 2]
+
+ if (last === "Recherche_new_v2" || last2 === "Recherche_new_v2") {
+ console.log(" ## RELAOD");
+ window.location.reload(true);
+ } else {
+
+
+ history.push("/Recherche_new_v2");
+ }
+ */
+ if (myelement) {
+ // 👇 Will scroll smoothly to the top of the next section
+ myelement.scrollIntoView({ behavior: 'smooth' });
+ }
+ return;
+
+ }
+
+
+
+ // Nettoyage du resultat precedent.
+ setResult([]);
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class_by_metier/";
+
+
+ var form = new FormData();
+ form.append("metier", check_metier);
+ form.append("token", "");
+
+ //console.log(" recherif pour metier ", check_metier);
+ //alert("myurl = "+myurl);
+ axios.post(myurl, form).then(res => {
+ if (String(res.data.status) != String("false")) {
+
+ setmyApiResponse("True");
+ setResult(res.data.message)
+ //textInput.current.focus();
+ setbesoinaiderecherche("");
+ setnewresult("");
+ //console.log(" In getClassByMetier res.data.status = " + res.data.status);
+ //console.log(" In getClassByMetier res.data.message = " + res.data.message);
+ //setnewresult(res.data.message);
+ setCurrentPage2(1);
+ if (scrollDiv.current) {
+ scrollDiv.current.scrollIntoView({ behavior: "smooth" });
+ }
+
+ // reinitialisation de tous les filtre
+
+ //setmyApimyApiMessage("OK")
+ //console.log("taille = "+res.data.message.length);
+ }
+ else {
+ //console.log(" In getClassByMetier res.data.status = " + res.data.status);
+ //console.log(" In getClassByMetier res.data.message = " + res.data.message);
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ //textInput.current.focus();
+ }
+
+
+ }).catch((error) => {
+ console.warn(' getClassByMetier : Not good man :( mysearchtext = ');
+ setmyApiResponse("False");
+ //setmyApimyApiMessage("")
+ })
+
+ //console.log(" ICI MOVE TO ");
+ if (myelement) {
+ // 👇 Will scroll smoothly to the top of the next section
+ myelement.scrollIntoView({ behavior: 'smooth' });
+ }
+
+ }
+
+
+ const [PartnerMenu, setPartnerMenu] = React.useState(null);
+ const [AccountMenu, setAccountMenu] = React.useState(null);
+ const [ProduitMenu, setproduitMenu] = React.useState(null);
+ const [AvisMenu, setavisMenu] = React.useState(null);
+
+
+
+ const PartnerMenu_Close = () => {
+ setPartnerMenu(null);
+ };
+
+ const AccountMenu_Close = () => {
+ setAccountMenu(null);
+ };
+
+
+ const ProduitMenu_Close = () => {
+ setproduitMenu(null);
+ };
+
+ const handlePartnerMenu = (event) => {
+ setPartnerMenu(event.currentTarget);
+ };
+
+ const handleAccountMenu = (event) => {
+ setAccountMenu(event.currentTarget);
+ };
+
+
+ const handleProduitMenu = (event) => {
+ setproduitMenu(event.currentTarget);
+ };
+
+
+
+
+ const handleClose_Account = () => {
+ //alert(" my account");
+ setAccountMenu(null);
+ };
+
+ const handleBlogMenu = (event) => {
+ setproduitMenu(event.currentTarget);
+ history.push("/Recherche-Article-formation")
+ };
+
+ const handleQuisommesNousMenu = (event) => {
+ setproduitMenu(event.currentTarget);
+ history.push("/qui-sommes-nous")
+ };
+
+
+ const handleSolutionMenu = (event) => {
+ setproduitMenu(event.currentTarget);
+ history.push("/fonctionnalites")
+ };
+
+
+ const handleAccountConnexion = () => {
+ setAccountMenu(null);
+ history.push("/Connexion")
+ };
+
+ const handleMyAccount = () => {
+ setAccountMenu(null);
+ history.push("/mysy-user-account")
+ };
+
+
+ const handleMyPartnerAccount = () => {
+ setAccountMenu(null);
+ history.push("/Partner")
+ };
+
+
+ const handleAccountCreation = () => {
+ setAccountMenu(null);
+ history.push("/create_account")
+ };
+
+ const handlePartnerConnexion = () => {
+ setAccountMenu(null);
+ history.push("/PartnerLogin")
+ };
+
+
+ const handleProduitService = () => {
+ setproduitMenu(null);
+ history.push("/tarifs_produits_services/")
+ };
+
+ const handleAvis = () => {
+ setavisMenu(null);
+ history.push("/Recherche-Article-formation")
+ };
+
+ function test() {
+ alert(" coucou");
+ }
+
+
+ const [someoneconnected, setsomeoneconnected] = useState("0");
+ const [partnerconnected, setpartnerconnected] = useState("0");
+ const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+
+ const stored_part = getCookie('tokenmysypart');
+
+
+
+ function whosisconnected() {
+ var local_user_connect = 0;
+ var local_part_connect = 0;
+
+ if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+ setuserconnected("0");
+ local_user_connect = 0;
+ } else {
+ setuserconnected("1");
+ setsomeoneconnected("1");
+ local_user_connect = 1;
+ //alert(" user connected OK");
+ }
+
+ if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
+ setpartnerconnected("0");
+ local_part_connect = 0;
+ } else {
+ setpartnerconnected("1");
+ setsomeoneconnected("1");
+ local_part_connect = 1;
+ //alert(" partner connected OK");
+ }
+ }
+
+ function handleAccountLogout() {
+
+ if (String(userconnected) === String("1")) {
+ user_logout();
+ }
+ else if (String(partnerconnected) === String("1")) {
+ part_logout();
+ }
+ }
+
+ function user_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+ if (typeof (stored_user) != "undefined") {
+ setCookie("tokenmysych", "");
+ }
+ history.push("/recherche-formation");
+ }
+
+ function user_logout() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion (user)',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => user_logout_confirmation()
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+ }
+ ]
+ });
+ }
+
+
+
+
+ function handleAccountConnexion_v2() {
+
+ if (String(userconnected) === String("1")) {
+ handleMyAccount();
+ }
+ else if (String(partnerconnected) === String("1")) {
+ handleMyPartnerAccount();
+ }
+ }
+
+
+ function part_logout_confirmation() {
+ /* si c'est une connexion partner qui est active */
+ if (typeof (stored_part) != "undefined") {
+ const stored_cookie = getCookie('tokenmysypart');
+ var acces_right_token_name = stored_cookie + "_uar";
+
+ setpartCookie("tokenmysypart", "", { path: '/' });
+
+ setpartCookie(acces_right_token_name, "", { path: '/' });
+ removeCookie(acces_right_token_name, { path: '/' });
+
+ }
+ setsomeoneconnected("0");
+ setDialog_1_open(false);
+ history.push("/recherche-formation");
+ }
+
+ function part_logout() {
+ confirmAlert({
+ title: '',
+ message: 'Confirmez la deconnexion (pro)',
+ buttons: [
+ {
+ label: 'Oui',
+ onClick: () => part_logout_confirmation()
+ },
+ {
+ label: 'Non',
+ onClick: () => { return }
+ }
+ ]
+ });
+ }
+
+ const [range_price, setrange_price] = useState({ min: 0, max: 9999, });
+ function rangevalue() {
+ alert(range_price.max + " - " + range_price.min);
+ //console.log(" range = " + range_price);
+ }
+
+ const [trainingonsite, settrainingonsite] = useState()
+ function isonsite() {
+ settrainingonsite(document.querySelector('input[name="TrainingPresentiel"]:checked').value)
+
+ }
+
+ const [certifchecked, setcertifchecked] = useState();
+ function annulefiltrecertif() {
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ var radio = document.querySelector('input[name="TrainingCertif"]:checked');
+ radio.checked = false;
+ setcertifchecked("");
+
+ var toto = "";
+ var filtre1 = "";
+
+
+ // Reinitialisation
+ filtre1 = result;
+ setv11(filtre1);
+
+
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+
+ }
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+ // recuperation du filtre du type
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);
+
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+
+ }
+
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ setnewresult(filtre1);
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+
+ }
+ return;
+
+
+ }
+
+
+ function annulefiltrecpf() {
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ var radio = document.querySelector('input[name="TrainingCPF"]:checked');
+ radio.checked = false;
+ setcpfchecked("");
+
+ var toto = "";
+ var filtre1 = "";
+
+
+ // Reinitialisation
+ filtre1 = result;
+ setv11(filtre1);
+
+ // recuperation du filtre de la certification
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+
+ }
+
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+
+ }
+
+
+ // recuperation du filtre du type
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);
+
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+
+ }
+
+ var crit_TrainingPrice = range_price.min + ":" + range_price.max;
+
+ setnewresult(filtre1);
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+
+ }
+ return;
+
+
+ }
+
+ const [supportchecked, setsupportchecked] = useState();
+ function annulefiltresupportchecked() {
+ //var radio = document.querySelector('input[name="TrainingSupport"]:checked');
+ //radio.checked = false;
+ setsupportchecked("");
+ var crit_TrainingSupport = "";
+ var toto = "";
+ var filtre1 = "";
+
+
+
+ // Reinitialisation
+ filtre1 = result;
+ setv11(filtre1);
+
+ // recuperation du filtre de la certification
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+
+ }
+
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+
+ // recuperation du filtre du type (cours, tuto, etc)
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
+
+ }
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+ }
+ // Recup du filtre de prix
+ var crit_TrainingPrice = "";
+
+ setnewresult(filtre1);
+
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+ }
+
+
+ const [typechecked, settypechecked] = useState();
+ function annulefiltretypechecked() {
+
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ var radio = document.querySelector('input[name="TrainingType"]:checked');
+ radio.checked = false;
+ settypechecked("");
+
+ var toto = "";
+ var filtre1 = "";
+ var filtre2 = "";
+ var filtre3 = "";
+
+
+
+ // Reinitialisation
+ filtre1 = result;
+ setv11(filtre1);
+ //alert("rinitialisation")
+ ;
+
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+
+ }
+
+ // recuperation du filtre du certificat
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+
+ }
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+
+ // recuperation du filtre de la distance
+ var crit_Trainingdistance = "";
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
+ if (crit_Trainingdistance.length > 0) {
+ // filtre presentiel = 1
+ if (String(crit_Trainingdistance) === String("1")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
+ setv11(filtre1);
+
+ }
+ else if (String(crit_Trainingdistance) === String("0")) {
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
+ setv11(filtre1);
+ }
+ }
+
+ }
+
+
+ setnewresult(filtre1);
+ //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET crit_TrainingSupport = " + crit_TrainingSupport + " ET crit_TrainingType = " + crit_TrainingType);
+ //console.log("############################ filtre1 = " + filtre1);
+ setCurrentPage2(1);
+ //console.log(" ????????????????????????????filtre2 = "+filtre2);
+ }
+ return;
+
+ }
+
+
+ const [lieuchecked, setlieuchecked] = useState();
+ function annulefiltrelieuchecked() {
+ if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
+ var radio = document.querySelector('input[name="TrainingPresentiel"]:checked');
+ radio.checked = false;
+ setlieuchecked("");
+ var toto = "";
+ var filtre1 = "";
+ settrainingonsite('');
+
+
+
+ //reinitialisation des filtres
+ filtre1 = result;
+ setv11(filtre1);
+
+ // Annulation de la suggestion de villes
+ setsuggestioncities([]);
+
+
+ /* Recuperation des autres filtres */
+ // recuperation du filtre du support
+ var crit_TrainingSupport = "";
+ if (document.getElementById("supoort_list_derou")) {
+ crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
+ if (crit_TrainingSupport.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
+ }
+
+ // recuperation du filtre du certification
+ var crit_TrainingCertif = "";
+ if (document.querySelector('input[name="TrainingCertif"]:checked')) {
+ crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
+ if (crit_TrainingCertif.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
+ }
+
+ // recuperation du filtre du CPF
+ var crit_TrainingCPF = "";
+ if (document.querySelector('input[name="TrainingCPF"]:checked')) {
+ crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
+ if (crit_TrainingCPF.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);
+
+ }
+
+ // recuperation du filtre du type (cours, tuto, etc)
+ var crit_TrainingType = "";
+ if (document.querySelector('input[name="TrainingType"]:checked')) {
+ crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
+ if (crit_TrainingType.length > 0)
+ filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
+ }
+ setnewresult(filtre1);
+ setCurrentPage2(1);
+ }
+ }
+
+ function OnblurHandle(e) {
+ setTimeout(() => {
+ setsuggestion2([])
+ }, 100)
+ }
+
+
+ function OnSuggestionHandler(text) {
+ var val = text;
+ settext(val);
+ }
+
+ function OnCitiesSuggestionHandler(text) {
+ var val = text;
+ setcities(val);
+ document.getElementById("ville").value = val;
+ LeaveCity();
+ // Annulation de la suggestion de villes
+ setsuggestioncities([]);
+ }
+
+ function publiecatalogue() {
+
+ history.push("/Partner", { mysy_arg: 'partner' });
+ }
+
+ function LeaveCity() {
+ TrainingDistancielHandle();
+ }
+
+ function LeaveZipCode() {
+ TrainingDistancielHandle();
+ }
+
+ const Recherche_Domaine_Metier = (event) => {
+
+ //console.log(" ### liste domaine = ", list_domaine);
+ //console.log(" ### liste metier = ", list_metier);
+
+ }
+
+ const [displayAllmetiers, setdisplayAllmetiers] = useState();
+
+ function DisplayAllmetier() {
+ if (displayAllmetiers)
+ setdisplayAllmetiers(false);
+ else
+ setdisplayAllmetiers(true);
+ }
+
+
+ function init_Filter_Change_url() {
+ history.push("/");
+ window.location.reload();
+
+ /* window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });*/
+
+ }
+
+ function message_to_init_Filter_Change_url() {
+ alert(" Réinitialiser les filtres pour réactivier cette fonctionnalité")
+
+ }
+
+
+
+ const [Dialog_1_message, setDialog_1_message] = React.useState(false);
+ const [Dialog_1_open, setDialog_1_open] = React.useState(false);
+ function Dialog_1_handle_change_participant_session(message) {
+ setDialog_1_message(message);
+ setDialog_1_open(true);
+ }
+
+ const Dialog_1_handleClose = () => {
+ //alert(" Utiliser le bouton 'fermer' ");
+ //setOpen(false);
+ };
+
+ const Dialog_1_handleClose_buton = () => {
+ setDialog_1_open(false);
+ };
+
+ const [Update_Email_Newsletter_api, setUpdate_Email_Newsletter_api] = useState();
+ const [Update_Email_Newsletter_message, setUpdate_Email_Newsletter_message] = useState();
+ const [Update_Email_Newsletter_result, setUpdate_Email_Newsletter_result] = useState();
+ function Update_Email_Newsletter() {
+ var form = new FormData();
+ //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
+
+
+ var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+
+ var email = String(email_newsletter).toLocaleLowerCase().trim();
+ if (!email.match(validRegex)) {
+ alert("L'adresse email est invalide.");
+ return;
+ }
+
+ form.append("email", email);
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/Add_Update_Email_To_Newsletter/";
+ // setLoading(true);
+
+ axios.post(myurl, form).then(res => {
+ // setLoading(false);
+ //console.log(" In Update_Email_Newsletter res.data.status = " + res.data.status);
+ //console.log(" In Update_Email_Newsletter res.data.message r_class = " + res.data.message);
+
+ if (String(res.data.status) === String("true")) {
+ setemail_newsletter("");
+ alert(res.data.message);
+
+
+ }
+ else {
+ setUpdate_Email_Newsletter_api("false");
+ setUpdate_Email_Newsletter_message(res.data.message);
+ alert(res.data.message);
+ }
+
+ }).catch((error) => {
+ // setLoading(false);
+ console.warn('UpdateStagiaireData : Not good man :( Update_Email_Newsletter = ' + error);
+ setUpdate_Email_Newsletter_api("false");
+ alert(" Impossible d'inscrire l'adresse email à la newsletter ");
+
+ })
+ }
+
+
+ const [Dialog_contact_message, setDialog_contact_message] = React.useState(false);
+ const [Dialog_contact_open, setDialog_contact_open] = React.useState(false);
+ function Dialog_contact_handle_change_participant_session(message) {
+ setDialog_contact_message(message);
+ setDialog_contact_open(true);
+ }
+
+ const Dialog_contact_handleClose = () => {
+
+ };
+
+ const Dialog_contact_handleClose_buton = () => {
+
+ setDialog_contact_open(false);
+ clear_contact_message_fields();
+
+ };
+
+ const [contact_message_nom_prenom, setcontact_message_nom_prenom] = React.useState("");
+ const [contact_message_email, setcontact_message_email] = React.useState("");
+ const [contact_message_phone, setcontact_message_phone] = React.useState("");
+ const [contact_message_sujet, setcontact_message_sujet] = React.useState("");
+ const [contact_message_message, setcontact_message_message] = React.useState("");
+
+ function clear_contact_message_fields() {
+ setcontact_message_nom_prenom("");
+ setcontact_message_email("");
+ setcontact_message_phone("");
+ setcontact_message_sujet("");
+ setcontact_message_sujet("");
+ setcontact_message_message("");
+ }
+
+ function Send_Contact_Message(e) {
+
+ var sender_mail = "";
+ var sender_tel = "";
+ var token = "";
+
+ ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
+
+ var mysubject = contact_message_sujet;
+ var mymessage = contact_message_message;
+ var mysender_name = contact_message_nom_prenom;
+ var mysender_email = contact_message_email;
+
+
+ //alert("contacter "+mysender_email+" - "+mymessage+" - url = "
+ //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
+
+ var re = /\S+@\S+\.\S+/;
+ if (re.test(mysender_email) == false) {
+ alert("l'email est incorrecte");
+ return;
+ }
+
+ var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
+ var form = new FormData();
+ form.append("type", "email");
+ form.append("recever_mail", "contact@mysy-training.com");
+ form.append("recever_tel", "+33769203945");
+ form.append("sender_mail", mysender_email);
+ form.append("sender_tel", sender_tel);
+ form.append("object", mysubject);
+ form.append("message", mymessage);
+ form.append("sender_name", mysender_name);
+ form.append("token", "");
+ form.append("user_ip", IPv4);
+ form.append("user_country_code", country_code);
+ form.append("user_country_name", country_name);
+ form.append("user_city", city);
+ form.append("user_postal", postal);
+ form.append("user_latitude", latitude);
+ form.append("user_longitude", longitude);
+ form.append("user_state", state);
+
+
+ // console.log("## form = ", form);
+
+
+
+ axios.post(myurl, form).then(res => {
+
+ if (String(res.data.status) === String("false")) {
+
+ alert(res.data.message);
+ }
+
+ else if (String(res.data.status) === String("true")) {
+ Dialog_contact_handleClose_buton();
+ alert(res.data.message);
+
+ }
+ else {
+
+ }
+ }).catch((error) => {
+ console.warn('contact-nous Not good man :( mysearchtext = ');
+ })
+ }
+
+
+ return (
+
+
+
+ {/*** GESTION Contact */}
+
+
+ Contactez Nous
+
+
+
+
+
+ Nom & Prénom
+
+
+
+ {
+ setcontact_message_nom_prenom(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Nom'
+ >
+
+
+
+
+
+ E-mail
+
+
+ {
+ setcontact_message_email(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Adresse email'
+ >
+
+
+
+
+
+
+ Téléphone
+
+
+ {
+ setcontact_message_phone(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Numéro Tél'
+ >
+
+
+
+
+
+ Sujet
+
+
+ {
+ setcontact_message_sujet(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Sujet'
+ >
+
+
+
+
+
+ Votre message
+
+
+ {
+ setcontact_message_message(e.target.value);
+ }}
+ className='form-control formInput'
+ placeholder='Message'
+ >
+
+
+
+
+
+
MySy Training Technology
+
+
+
+ Adresse : 1 Cr du Havre, 75008 Paris
+ Adresse email :
+
contact@mysy-training.com
+
+ Téléphone fixe : +331 77 00 38 57
+
+
+
+
+
+
+
+
+
+
+ Fermer
+
+
+ Envoyer
+
+
+
+
+
+
+
+
+ {/*** FIN GESTION Contact */}
+
+
+
+ MySy Information
+
+
+ Confirmez la deconnexion
+
+
+
+
+
+
+
+ Deconnexion
+
+
+ Annuler
+
+
+
+
+
+
+
+ Formation & Tutoriel Gratuit ou payant Excellente qualité
+
+
+
+
+
+
+
+ Mon Compte
+ setDialog_1_open(true)} className="mymenu_item"
+ >Deconnexion
+
+
+
+
+ Mon Compte
+ Connexion
+
+ S'inscrire
+ Deconnexion
+
+
+
+
+ Prix
+
+ {/*
+ Blog
+
+ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Le guide des Formations & Tutos pour tous
+
+ {/* Restez informé de nos nouveautés
+
+
+ :not(style)': { m: 1, width: '100%', height: "3rem", marginTop: '10px' } }}
+ noValidate
+ autoComplete="off"
+ >
+ {
+ setemail_newsletter(event.target.value);
+ }}
+ sx={{
+ "& .MuiOutlinedInput-root": {
+ color: "#000",
+ fontFamily: "Arial",
+ fontWeight: "bold",
+ "& .MuiOutlinedInput-notchedOutline": {
+ borderColor: "#2e2e2e",
+ borderWidth: "2px",
+ },
+
+ "& .MuiInputLabel-outlined": {
+ color: "#2e2e2e",
+ fontWeight: "bold",
+ "&.Mui-focused": {
+ color: "secondary.main",
+ fontWeight: "bold",
+ },
+ },
+ },
+ }}
+
+ />
+
+
+
+
+
+
+ OK
+
+
+ */}
+
+ {/*
Où que vous soyez, trouvez la formation ou le tutoriel selon vos critères. */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Domaines
+
+ {domaine_metier && domaine_metier.map((domaine) => (
+
+ {domaine}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+ {/*SearchText.length > 2 && */}
+ {SearchText.length > 2 && }
+
+
+
+
+
+
+
+
+
Rechercher
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {suggestion2 && suggestion2.slice(0, 2).map((suggestion, id) =>
+
OnSuggestionHandler(JSON.parse(suggestion).name)}> {JSON.parse(suggestion).name}
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
Nos Formations & Tutoriels
*/}
+ {showelement === "true" &&
+
+
Masquer les Métiers & Filtres
+
+
+
+ }
+
+ {showelement === "false" &&
+
Afficher les Métiers & Filtres
+
+
+
+ }
+
+ {showelement === "true" &&
+
+
Les filtres
+
+
+
+
+
Eligible CPF
+
+
+
+
+
+
+ {String(cpfchecked) === String("1") &&
+
+
+
+
+
}
+
+
+
+
+
+
+
Certification
+
+
+
+
+
+
+ {String(certifchecked) === String("1") &&
+
+
+
+
+
}
+
+
+
+
+
+
Type
+
+
+
+
+
+
+ {String(typechecked) === String("1") &&
+
+
+
+
+
}
+
+
+
+
+
+
+
+
Lieu
+
+
+
+
+
+
+ {String(lieuchecked) === String("1") &&
+
+
+
+
+
}
+
+
+
+
+ {trainingonsite && String(trainingonsite) === String("0") &&
+
Ville
+
+
+
+
+ {suggestioncities && suggestioncities.slice(0, 3).map((suggestion, id) =>
+
OnCitiesSuggestionHandler(JSON.parse(suggestion).ville)}> {JSON.parse(suggestion).ville}
+ )}
+
+
+
+
+
+
}
+
+ {trainingonsite && String(trainingonsite) === String("0") &&
+
Code postale
+
+
+
+
+
+
+
+
+
}
+
+
+
Support
+
+
+
+
+
+ Choisir
+ Video
+ Realité Virtuelle
+ Document
+ Mixte
+
+
+
+
+
+
+
+
+
Prix
+
+
+
+ `${value} €`}
+ value={range_price}
+ step={500}
+ name="toto"
+
+ onChange={value => setrange_price(value)}
+ //onChange={TrainingPriceHandle}
+ onChangeComplete={value => console.log(value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Les Métiers
+ {NewSearchText &&
+
+
+
+ Recherhe pour : "{NewSearchText}"
+
+
+
+
+
+
+
+ Réinitaliser les filtres
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Informatique
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ Afficher plus de métiers
+
+
+
+
+
+
+
+
}
+
+
+ {!NewSearchText &&
+
+
+
+
+
+
+
+
+ Tous les métiers
+
+
+
+
+
+
+
+
+
+
+ {mymetier && String(mymetier) === "management" &&
+
}
+
+ {!mymetier || String(mymetier) !== "management" &&
+
}
+
+ {!mymetier &&
+
}
+
+
+
+
+ Management
+
+
+
+
+
+
+
+
+
+
+
+
+ {mymetier && String(mymetier) === "IT" &&
+
}
+
+ {!mymetier || String(mymetier) !== "IT" &&
+
}
+
+ {!mymetier &&
+
}
+
+
+
+ Informatique
+
+
+
+
+
+
+
+
+
+
+ {mymetier && String(mymetier) === "graphisme" &&
+
}
+
+ {!mymetier || String(mymetier) !== "graphisme" &&
+
}
+
+ {!mymetier &&
+
}
+
+
+
+
+
+ Graphisme
+
+
+
+
+
+
+
+
+
+ {mymetier && String(mymetier) === "sante_nat" &&
+
}
+
+ {!mymetier || String(mymetier) !== "sante_nat" &&
+
}
+
+ {!mymetier &&
+
}
+
+
+
+
+
+ Santé naturelle
+
+
+
+
+
+
+
+
+
+
+
+ {!displayAllmetiers &&
+
+
+ +
+
+
+ Afficher plus de métiers
+
+
+
+
}
+
+
+
+ {displayAllmetiers &&
+
+
+
+
+
+ Développement Personnel
+
+
+
+
+
+
+
+
}
+
+ {displayAllmetiers &&
}
+ {displayAllmetiers &&
}
+
+
+ {displayAllmetiers &&
+
+
+ -
+
+
+ Afficher Moins de métiers
+
+
+
+
}
+
+
+
+
}
+
+
+
+ }
+
+
+
+
Nos Formations & Tutoriels
+ {String(userconnected) === String("1") &&
+
+ Afficher toutes les formations :
+
+
+
+ }
+
+ {myApiResponse == "False" &&
+
+ Impossible de contacter l'hote distant
+
}
+
+ {myApiResponse == "True" && String(besoinaiderecherche) === String("1") &&
+
+ Le resultat est vide, besoin d'aide ?
+
+
+
}
+
+
+ {result && myApiResponse === "True" && !newresult &&
+
+
+
+
setCurrentPage2(page)}
+ />
+
+
+
+ Trier par
+
+
+ Prix
+
+ Duree
+ Pertinence
+
+
+
+
+
+
+
+
+
}
+
+ {result && myApiResponse === "True" && newresult &&
+
+
setCurrentPage2(page)}
+ />
+
+
+ }
+
+
+ {newresult && (newresult.length <= PageSize) &&
+
+
+
+
}
+
+
+
+ {result && myApiResponse == "True" && fin == 0 && !newresult &&
+ result.slice(0, PageSize).map((formation) => (
+
+
+
+
+ ))}
+
+ {result && myApiResponse == "True" && fin == 0 && newresult &&
+ newresult.slice(0, PageSize).map((formation) => (
+
+
+
+
+
+ ))}
+
+
+
+ {result && myApiResponse === "True" && fin === 1 && !newresult
+ && currentTableData2
+ && currentTableData2.map((formation) => (
+
+
+
+
+ ))}
+
+ {result && myApiResponse === "True" && fin === 1 && newresult
+ && currentTableData2
+ && currentTableData2.map((formation) => (
+
+
+
+
+
+ ))}
+
+
+ {result && !newresult &&
+ }
+
+ {result && newresult &&
+ }
+
+
+
+
+
+
+
+
+
+
+
Notre actualité
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 19 DECEMBRE 2022
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 19 DECEMBRE 2022
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 19 DECEMBRE 2022
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+
+
+
+
+
+ );
+}
+
+
+export default New_C_Marketplace_2025;
\ No newline at end of file
diff --git a/src/components/marketplace_automatic_files/new_s_marketplace_2025.css b/src/components/marketplace_automatic_files/new_s_marketplace_2025.css
new file mode 100644
index 0000000..5c223ac
--- /dev/null
+++ b/src/components/marketplace_automatic_files/new_s_marketplace_2025.css
@@ -0,0 +1,14736 @@
+.new_marketplace_2025 {
+
+ .css-1nmdiq5-menu {
+ background: transparent !important;
+ color: white !important;
+ z-index: 999;
+ }
+
+ .css-qbdosj-Input {
+ background: transparent !important;
+ }
+
+
+ .h1_transparent {
+ color: transparent;
+ font-size: 0.1rem;
+ }
+
+
+ .cta_recherche_img_search_loup {
+ width: 50%;
+ margin-right: -5px;
+ }
+
+ .cta_recherche_TXT_search_loup {
+ display: none;
+ }
+
+ @media only screen and (max-width: 600px) {
+ .calage {
+ display: none;
+ }
+
+ /*style smartphones et petites tablettes en portrait*/
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: small;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ margin-top: 0.5rem;
+ }
+
+ input::placeholder {
+ font-size: 0.7rem;
+ color: black;
+ }
+
+ .align_gauche {
+ margin-left: 0rem;
+ width: 100%;
+ float: left;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: x-small;
+ }
+
+ .btn-primary {
+ margin-top: 0.25rem !important;
+ }
+
+ .filter_dist {
+ width: 70% !important;
+ text-align: left;
+ }
+
+ .recherchedivgauche {
+ width: 90%;
+ border-radius: 0.5rem;
+ float: left;
+ text-align: center;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .okUpdateData {
+ font-size: 0.7rem;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .recherchedivdroite {
+ width: 5%;
+ border-radius: 0rem;
+ float: right;
+ align-content: flex-end;
+ border-left: 0.1rem solid;
+ border-left-color: #ced4da;
+ }
+
+ .recherchefilter {
+ margin-top: 1.2rem;
+ display: inline-block;
+ width: 97%;
+ background-color: black;
+ color: white;
+ height: auto;
+ padding: 1px;
+ outline: 1px solid #ccc;
+ margin: 0;
+ text-align: left;
+ border-radius: 5px;
+ margin-bottom: 0.1rem;
+ box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%);
+ height: 2rem;
+ padding-top: 5px;
+ margin-bottom: 0.5rem;
+
+ }
+
+ .rech_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 2px;
+ border-radius: 30px;
+ }
+
+ .rech_leftbox {
+ float: left;
+ border-width: 1px;
+ width: 98%;
+
+ margin: auto;
+ padding: 0.3rem;
+
+
+ margin-bottom: 0.1rem;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 1%;
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%);
+ box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%);
+ margin-top: 0.5rem;
+ margin-right: auto;
+ margin-bottom: 10px;
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0.1rem;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ padding: 15px;
+
+ }
+
+ .rech_rightbox {
+ display: none;
+ }
+
+ .textsurimage {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ font-size: 1.5rem;
+ text-align: center;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: re;
+ }
+
+ .rech_list_formation2 {
+ display: inline-block;
+ width: 100%;
+ background-color: white;
+ height: auto;
+ padding: 1px;
+ outline: 1px solid #ccc;
+
+ margin: 0;
+ text-align: left;
+ border-radius: 10px;
+ margin-bottom: 10px;
+
+
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%);
+ box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%);
+ }
+
+ .rech_list_formation2:hover {
+ -webkit-box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ }
+
+ input[type="submit"] {
+ width: 100%;
+ margin-top: 0;
+ }
+
+ h3 {
+ font-size: 1rem;
+ }
+
+ .form {
+ position: relative;
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ text-align: left;
+ height: 3rem !important;
+ display: flex;
+ width: 98%;
+ display: flex;
+
+ }
+
+ .textsurimage23 {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ text-align: center;
+ position: absolute;
+ top: 15%;
+ left: 20%;
+ width: 20rem;
+ }
+
+ h4 {
+ display: inline-block;
+ font-size: medium;
+ /*or whatever you want*/
+ color: white;
+ }
+
+ .default_font {
+ color: #3c4043;
+ display: inline-block;
+ line-height: 28px;
+ font-size: small;
+ }
+
+ .ch_recherche {
+ margin-left: 10%;
+ margin-right: 10%;
+ background-color: white;
+ align-items: center;
+ }
+
+ .input-group-text2 {
+ padding: 0.25rem 0.5rem;
+ font-size: 0.7rem;
+ border-radius: 0.2rem;
+ }
+
+ .rech_list_formation {
+ display: inline-block;
+ width: 100%;
+ background-color: #eee;
+ height: auto;
+ padding: 1em;
+ outline: 1px solid #ccc;
+ border: 1px solid #999;
+ background-color: #999;
+ margin: 0 auto;
+ text-align: left;
+ }
+
+ .height {
+ height: 100vh;
+ }
+
+ .form .fa-search {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ color: #9ca3af;
+ }
+
+ .input-group-text {
+ font-size: 0.6rem !important;
+ }
+
+ .form-select {
+ font-size: 1rem !important;
+ padding: auto;
+ }
+
+ .mb-3 {
+ margin-bottom: 0.5rem !important;
+ cursor: pointer;
+ }
+
+ .verti_middle {
+ margin-top: 2rem !important;
+ }
+
+ .form span {
+ position: absolute;
+ right: 0.1rem;
+ top: 0.1rem;
+ padding: 1.5px;
+
+ height: 1.9rem;
+ margin-top: 5px;
+ }
+
+ form svg {
+ margin-top: 0.6rem !important;
+ cursor: pointer;
+ }
+
+ .ch_form_svg {
+ svg {
+ margin-top: 0rem !important;
+ }
+ }
+
+ .form span_clear {
+ position: absolute;
+ right: 1.5rem !important;
+ top: 0.1rem !important;
+ padding: 2px;
+ border-left: 0.2rem solid #d1d5db !important;
+ height: 1.9rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .left-pan {
+ padding-left: 7rem;
+ }
+
+ .left-pan i {
+ padding-left: 10px;
+ }
+
+ .form-input {
+ color: black;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 12px 0px 24px;
+ gap: 72px;
+ width: 100%;
+ background: #FFFFFF;
+ box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+ flex: none;
+ flex-grow: 0;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ border: 1px solid #E2E9FB;
+ border-radius: 60px;
+ height: 3rem;
+ font-size: medium;
+ }
+
+ .text-box {
+ position: absolute;
+ height: 100%;
+ text-align: center;
+ width: 100%;
+ }
+
+ .text-box:before {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 50%;
+ }
+
+ .filter_span {
+ padding-top: 0.3rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ color: #104277;
+ font-size: 0.75rem;
+ white-space: nowrap;
+ width: 30%;
+ margin-top: 0.3rem;
+ }
+
+ .filter_val {
+ padding-top: 0.1rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ font-size: 0.75rem;
+ white-space: nowrap;
+ border: none;
+ background: transparent;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ border: 0.1rem solid black;
+ border-radius: 0.3rem !important;
+ width: 65%;
+ margin-top: 0.3rem;
+ margin-right: 0px;
+ }
+
+ .div_row2 {
+ float: left;
+
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+
+ position: fixed;
+ z-index: 10;
+ top: 0px;
+ }
+
+ .div_row_haut {
+ float: left;
+
+ width: 100%;
+
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+
+ width: 100%;
+
+ z-index: 10;
+ background-color: #e7f3fb;
+ background-image: url("../../mysy_img/MYSY-banner-compte_v2.png");
+
+ }
+
+ .div_mobile {
+ position: relative;
+ top: 8rem;
+ z-index: 1;
+ width: 98%;
+ height: 100%;
+ margin: 0.3rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ color: white !important;
+ }
+
+ .menuPrincipal {
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ width: 20%;
+ float: right;
+ font-weight: 500;
+ cursor: pointer;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ font-weight: bold;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.2rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ width: 50%;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_003 {
+ display: none;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin-bottom: 0.2rem;
+ margin-top: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ color: black !important;
+ height: 4rem;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 0.85rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .hilightsoustitre_v2 {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ }
+
+ .hilightsoustitre_v2_metier {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ }
+
+ .tab_gauche {
+ width: 50%;
+ float: left;
+ text-align: left;
+ }
+
+ .tab_droite {
+ width: 50%;
+ float: right;
+ text-align: right;
+ }
+
+ .tab_gauche_metier {
+ width: 20%;
+ float: left;
+ text-align: left;
+ }
+
+ .tab_droite_metier {
+ width: 20%;
+ float: right;
+ text-align: right;
+ }
+
+ .img_thematique_metier {
+ display: block;
+ border-radius: 10rem;
+ max-width: 360px;
+ }
+
+ .met_polaroid_gauche {
+ width: 97%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 2px;
+ }
+
+ .met_polaroid_droite {
+ width: 97%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ margin-left: 3%;
+ border-radius: 2px;
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ font-weight: bold;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ font-size: x-small;
+ white-space: nowrap;
+ overflow: hidden;
+ font-weight: bold;
+ }
+
+ .met_text_larg {
+ margin-bottom: 0.1rem;
+ font-size: xx-small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .met_text_all_categories {
+ margin-bottom: 0.1rem;
+ font-size: x-small;
+ margin-top: 1rem;
+ }
+
+ .met_container_all_categories {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ height: 4rem;
+ }
+
+ .met_polaroid_gauche_all_categories {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .tab_gauche_all_categories {
+ width: 100%;
+ float: left;
+ text-align: left;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-top-right-radius: 2px;
+ border-radius: 2px;
+ padding: 5px;
+ }
+
+ .met_polaroid,
+ .met_polaroid_line2 {
+ display: none;
+ }
+
+ .bienvenu {
+ display: none;
+ }
+
+ .new_filter_zone {
+ float: left;
+ width: 35%;
+ display: flex;
+ align-items: center;
+ font-size: smaller;
+ line-height: 1.5;
+ color: #212529;
+ text-align: center;
+ white-space: nowrap;
+ background-color: #e9ecef;
+ border: 1px solid #ced4da;
+ }
+
+ .new_filter_zone_cerif_radio {
+ width: 30%;
+ float: left;
+ text-align: right;
+ font-size: smaller;
+ }
+
+ .new_filter_zone_cerif_radio_right {
+
+ float: left;
+ text-align: left;
+ font-size: small;
+ padding-left: 5px;
+ }
+
+ .new_filter_zone_cerif_radio_left {
+
+ float: left;
+ text-align: center;
+ font-size: small;
+ padding-right: 15px;
+ padding-left: 2px;
+ min-width: 30%;
+ }
+
+ .range_prix_mobile {
+ margin-left: 1rem;
+ }
+
+ .new_filter_zone_row {
+ margin-bottom: 0.7rem !important;
+ width: 100%;
+ padding-right: 5px;
+ }
+
+ .tick_ok_ko {
+ max-width: 50%;
+ margin-top: 8px;
+ }
+
+ .tab_logo_metier {
+ width: 100%;
+ padding-left: 5px;
+ }
+
+ .tab_critere_espace {
+ margin-bottom: 1rem;
+ padding-bottom: 0rem;
+ width: 100%;
+ }
+
+
+ .Background_Header {
+ /* Background Header */
+
+
+ position: absolute;
+ width: 100%;
+ height: 350px;
+ left: 0px;
+
+
+ /* Beige */
+
+ background: #f3f4fb;
+ z-index: -1;
+ }
+
+ .Menu_Header {
+ display: none;
+ }
+
+ .block_nos_service {
+ position: absolute;
+ width: 100%;
+ height: 100px;
+ left: 0px;
+ top: 474px;
+
+ /* White */
+
+ background: #FFFFFF;
+
+ display: none;
+
+ }
+
+ .logo {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ position: absolute;
+ width: 108px;
+ height: 52px;
+ left: 150px;
+ top: 30px;
+ }
+
+
+ .Logo_MySy {
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .title_desc_header {
+ width: 100%;
+ float: left;
+
+ margin-bottom: 2rem;
+ }
+
+ .block_nos_formation {
+ padding: 0px;
+ width: 100%;
+ }
+
+ .pieddepage_v2 {
+ position: relative;
+ width: 100%;
+
+ left: 0px;
+
+ top: 5800px;
+ background: #FFF5DA;
+ z-index: -1;
+ }
+
+ .frame_153 {}
+
+ .frame_153_txt {
+ position: absolute;
+ width: 100%;
+ text-align: left;
+ height: 34px;
+
+ top: 250px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-size: 12px;
+ line-height: 17px;
+ display: flex;
+ align-items: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+ }
+
+
+
+ .title1 {
+ width: 100%;
+ text-align: center;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 54px;
+ letter-spacing: 1px;
+ color: #0A043C;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ padding-top: 1.5rem;
+ }
+
+
+ .title2 {
+ position: absolute;
+ height: 35px;
+ left: 5%;
+ top: 90px;
+ font-family: "Albert Sans";
+ font-style: normal;
+ font-size: 14px;
+ line-height: 19px;
+ letter-spacing: 1px;
+ text-align: center;
+ color: #0A043C;
+ font-weight: 500;
+
+
+ }
+
+ .content_search_bar {
+ margin-top: 3rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .search_bar_h {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 10px;
+
+ width: 100%;
+ height: 113px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_bar {}
+
+
+
+ .input_search_bar {
+ /* Auto layout */
+
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 95%;
+ height: 80px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .cta_recherche {
+ cursor: pointer;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px 2px;
+ gap: 10px;
+
+
+
+ /* Green */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ width: 100%;
+
+ }
+
+ .cta_recherche_txt {
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 17px;
+ line-height: 30px;
+ /* identical to box height, or 176% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .search_dropdown {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-bottom: 1rem;
+
+ }
+
+
+ .search_bar_rectangle {
+ width: 1px;
+ height: 60px;
+
+ background: rgba(0, 0, 0, 0.08);
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_text {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+
+ .forma_et_tuto {
+ display: none;
+ }
+
+ .forma_et_tuto_mobile {
+ display: none;
+ }
+
+
+ .domaine_icone {
+ display: none;
+ }
+
+ .domaine_icone_fa {
+ margin-top: 8px;
+ width: 5%;
+ cursor: pointer;
+ }
+
+
+ .sous_filter {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ margin-bottom: 3rem;
+ }
+
+ .sous_filter_metier {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_filter_txt {
+ /* Les filtres */
+ height: 24px;
+ letter-spacing: 1px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_filter_separator {
+ width: 277px;
+ height: 0px;
+
+ opacity: 0.08;
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 277px;
+ height: 494px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_mertier {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 277px;
+ height: 496px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .filter_valeur {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 71px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .filter_valeur_txt {
+ /* Eligible CPF */
+
+ letter-spacing: 2px;
+ height: 19px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .filter_valeur_block_val {
+ /* List Checkbox */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 90%;
+ height: 48px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin-left: 5%;
+ }
+
+ .frame_133 {
+ /* Frame 133 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 20px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 1;
+ }
+
+ .frame_133_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 50px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_radio {
+ /* Radio Button */
+
+ cursor: pointer;
+ width: 16px;
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_txt {
+ /* Oui */
+
+
+ width: 26px;
+ height: 22px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .frame_134 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 20px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_134_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 55px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .frame_135 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 20px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_135_grp {
+ /* Checbox + Text */
+
+ margin-left: 10px;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 30px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+
+ .filter_txt {
+ /* Les filtres */
+
+
+ width: 92px;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block {
+ /* Filter */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 16px;
+ gap: 10px;
+
+ width: 90%;
+ height: 70px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border: 1px solid #DFDFDF;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 12px;
+
+ width: 180px;
+ height: 40px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_radio {
+
+ /* Radio Button */
+
+
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_txt {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 144px;
+ height: 40px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_formation {
+ width: 144px;
+ height: 22px;
+
+ margin-top: 10px;
+ text-align: left;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_nb {
+ width: 85px;
+ height: 14px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+ opacity: 0.7;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .Header_Content {
+ width: 100%;
+ float: left;
+
+
+ margin-bottom: 5rem;
+
+ }
+
+
+ .filter_metier_sous_block_plus_metier {
+ /* Icon + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 233px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_1 {
+ border: #0A043C solid;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_2 {
+ width: 201px;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_actualite {
+ /* Actualité */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+ height: 549px;
+ top: 4700px;
+ display: none;
+ }
+
+ .block_actualite_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 100%;
+ height: 453px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_actualite_sous_block_text {
+ width: 261px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 38px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: 2px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4%;
+
+ width: 90%;
+ height: 365px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .block_list_actu_actu1 {
+
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 23px;
+
+ width: 32%;
+ height: 364px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_img {
+ width: 100%;
+ height: 250px;
+
+ background: url(https://img.mysy-training.com/img_actu1.png), #D9D9D9 no-repeat;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text {
+ /* Date + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 1px;
+ gap: 8px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_date {
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 1p5x;
+ text-transform: uppercase;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_txt {
+
+ height: 64px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 22px;
+ /* or 133% */
+
+ letter-spacing: 0.2px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .bton_tout_nos_article {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .bton_tout_nos_article_account_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .bton_tout_nos_article_txt {
+ width: 156px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 20px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .block_partner {
+ /* Partner Block */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 20px;
+ gap: 10px;
+
+ position: absolute;
+ width: 95%;
+ height: 386px;
+ top: 5200px;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Shadow 01 */
+
+ box-shadow: 0px 54px 100px rgba(10, 4, 60, 0.08);
+ border-radius: 8px;
+
+ }
+
+ .block_partner_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 100%;
+ height: 306px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+
+
+ width: 100%;
+ height: 226px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_logo {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 4px;
+
+ width: 160px;
+ height: 70px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_desc {
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 28px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_txt {
+ width: 100%;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_buton {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Green */
+
+ background: #20BFA9;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .logo_not_absolut {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .block_partner_sous_block_logo_desc_desc2 {
+ width: 100%;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 20px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_newletter {
+ display: none;
+ }
+
+ .block_newletter_email {
+ display: none;
+ }
+
+ .block_newletter_bton_ok {
+ display: none;
+ }
+
+ .block_newletter_bton_bton_ok {
+ display: none;
+ }
+
+ .cta_recherche_img_search_loup {
+ display: none;
+ }
+
+ .cta_recherche_TXT_search_loup {
+ display: block;
+
+ width: 100%;
+
+ border-radius: 60px;
+ height: 40px;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 6px 8px;
+ height: 34px;
+ background: #3E6EE3;
+ border-radius: 200px;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ background-color: #3e6ee3;
+ color: #ffffff;
+ border: none;
+
+ }
+
+ .block_formation {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #FFF;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .block_display_flex_formation {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+ }
+
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+ /*style petites-moyennes tablettes */
+ .domaine_icone {
+ display: none
+ }
+
+ .div_row {
+ float: left;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ }
+
+ .div_row_gauche {
+ float: left;
+ border-width: 0.01rem;
+ width: 48%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: right;
+ border-width: 0.01rem;
+ width: 48%;
+ border-radius: 1rem;
+ }
+
+ .align_gauche {
+ margin-left: 0rem;
+ overflow-y: hidden;
+ white-space: nowrap;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ width: 100%;
+ }
+
+ .recherchefilter {
+ display: none;
+ }
+
+ .filter_dist {
+ width: 70% !important;
+ text-align: left;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .rech_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+
+ .rech_leftbox {
+ float: left;
+ border-width: 1px;
+ width: 35%;
+ height: 100%;
+ padding: 0.1rem;
+ border-radius: 1rem;
+ margin-bottom: 0.1rem;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 5px;
+ margin-top: 0.5rem;
+ padding-left: 5px;
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 64%;
+ height: 100%;
+ margin: auto;
+ padding: 0rem;
+ border-radius: 30px;
+ margin-right: 0%;
+ padding-left: 1rem;
+ padding-right: 10px;
+ }
+
+ .textsurimage {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ font-size: 40pt;
+ text-align: center;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ }
+
+ .rech_list_formation2 {
+ display: inline-block;
+ width: 100%;
+ background-color: white;
+ height: auto;
+ padding: 1px;
+ outline: 1px solid #ccc;
+ margin: 0;
+ text-align: left;
+ border-radius: 10px;
+ margin-bottom: 10px;
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ }
+
+ .rech_list_formation2:hover {
+ -webkit-box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ }
+
+ h3 {
+ font-size: 2rem;
+ }
+
+ .form {
+ font-size: medium;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 0.5rem;
+ position: relative;
+ margin-top: 1rem;
+ z-index: 11;
+ display: flex;
+ }
+
+ .textsurimage23 {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ text-align: center;
+ position: absolute;
+ top: 20%;
+ left: 30%;
+ width: 20rem;
+ }
+
+ h4 {
+ display: inline-block;
+ font-size: x-large;
+ /*or whatever you want*/
+ color: white;
+ }
+
+ .default_font {
+ color: #3c4043;
+ display: inline-block;
+ line-height: 28px;
+ font-size: small;
+ }
+
+ .form-input {
+ border-radius: 10rem;
+ height: 2.5rem;
+ font-size: medium;
+
+ line-height: 1.5;
+ margin-bottom: 2px;
+ color: white;
+ border: 2px solid white;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ form svg {
+ margin-top: 0.8rem !important;
+ cursor: pointer;
+ }
+
+ .form span {
+ position: absolute;
+ right: 0.2rem;
+ top: 0.1rem;
+ padding: 2px;
+ border-left: 0.2rem solid #d1d5db;
+ height: 2.4rem;
+ }
+
+ form svg {
+ margin-top: 0.8rem !important;
+ cursor: pointer;
+ }
+
+ .form span_clear {
+ position: absolute;
+ right: 2rem !important;
+ top: 0.1rem !important;
+ padding: 2px;
+ border-left: 0.2rem solid #d1d5db !important;
+ height: 2.4rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .left-pan {
+ padding-left: 7px;
+ }
+
+ .left-pan i {
+ padding-left: 10px;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ margin-top: 0.5rem;
+ }
+
+ .text-box {
+ position: absolute;
+ height: 100%;
+ text-align: center;
+ width: 100%;
+ }
+
+ .text-box:before {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 30%;
+ }
+
+
+ .form-select {
+ height: 1.5rem !important;
+ border-radius: 0px;
+ font-size: small;
+ }
+
+ .mb-3 {
+ margin-bottom: 0.5rem !important;
+ cursor: pointer;
+ }
+
+ .input-group-text {
+ font-size: 0.6rem !important;
+ padding-left: 0rem !important;
+ padding-right: 0.2rem !important;
+ }
+
+ .rech_rightbox {
+ /* opacity: 1;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: medium !important;
+ border-radius: 1rem;
+ margin: 0px;
+ padding: 0px;
+ text-align: center;
+ margin-bottom: 0.5rem;
+ padding-top: 0.5rem;*/
+ display: none;
+ }
+
+ .rech_rightbox .button2 {
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: medium !important;
+ border-radius: 1rem;
+ margin: 0px;
+ padding: 0px;
+ text-align: center;
+ margin-bottom: 0.5rem;
+ }
+
+ .rech_rightbox_inside {
+ float: left;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0px;
+ border-radius: 0px;
+ margin-right: 0%;
+ overflow-y: scroll;
+ height: 800px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: medium;
+ padding-right: 5px;
+ margin-right: 5px;
+ }
+
+ .filter_span {
+ padding-top: 0.3rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ color: #104277;
+ font-size: 0.75rem;
+ white-space: nowrap;
+ width: 30%;
+ margin-top: 0.3rem;
+ }
+
+ .filter_val {
+ padding-top: 0.1rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ font-size: 0.75rem;
+ white-space: nowrap;
+ border: none;
+ background: transparent;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ border: 0.1rem solid black;
+ border-radius: 0.3rem !important;
+ width: 65%;
+ margin-top: 0.3rem;
+ margin-right: 0px;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.1rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row2 {
+ float: left;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+
+ z-index: 10;
+ min-height: 30rem;
+ }
+
+ .div_row_haut {
+ float: left;
+ width: 100%;
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+ width: 100%;
+ min-height: 100%;
+ height: 30rem;
+
+ background-color: #e7f3fb;
+ z-index: 10;
+ background: url("../../mysy_img/mysy_home.jpg") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+
+ .div_mobile {
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ color: white !important;
+ }
+
+ .menuPrincipal_bton {
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+ .menuPrincipal {
+ margin-left: 0.7rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 40%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 60%;
+ text-align: right;
+ color: white;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 0.85rem;
+ margin-bottom: 0.5rem;
+ letter-spacing: 0.15rem;
+ }
+
+ .hilightsoustitre_v2 {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .hilightsoustitre_v2_metier {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ margin-top: 3rem;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .tab_gauche {
+ width: 50%;
+ float: left;
+ text-align: left;
+ }
+
+ .tab_droite {
+ width: 50%;
+ float: right;
+ text-align: right;
+ }
+
+ .tab_gauche_metier {
+ width: 48%;
+ float: left;
+ text-align: left;
+ text-align: left;
+ margin-right: 2%;
+ max-width: 48% !important;
+ min-width: 48% !important;
+ }
+
+ .tab_droite_metier {
+ width: 48%;
+ float: right;
+ text-align: right;
+ }
+
+ .img_thematique_metier {
+ display: block;
+ border-radius: 10rem;
+ max-width: 360px;
+ }
+
+ .met_polaroid_gauche {
+ width: 95%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_gauche:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_polaroid_droite {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_droite:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ font-weight: bold;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ font-size: x-small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ font-weight: bold;
+ }
+
+ .met_text_larg {
+ margin-bottom: 0.1rem;
+ font-size: xx-small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .met_text_all_categories {
+ margin-bottom: 0.1rem;
+ font-size: x-small;
+ margin-top: 1rem;
+ }
+
+ .met_container_all_categories {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ height: 4rem;
+ }
+
+ .met_polaroid_gauche_all_categories {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .tab_gauche_all_categories {
+ width: 100%;
+ float: left;
+ text-align: left;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-top-right-radius: 12px;
+ border-radius: 12px;
+ padding: 5px;
+ }
+
+ .h1_transparent {
+ color: transparent;
+ font-size: 0.1rem;
+ }
+
+ .mymenu_item {
+ font-size: 0.7rem !important;
+ }
+
+ .MuiMenuItem-root {
+ font-size: 0.7rem !important;
+ }
+
+ .new_filter_zone {
+ float: left;
+ width: 35%;
+ display: flex;
+ align-items: center;
+ font-size: 0.75rem;
+ line-height: 1.5;
+ color: #212529;
+ text-align: center;
+ white-space: nowrap;
+ background-color: #e9ecef;
+ border: 1px solid #ced4da;
+ }
+
+ .new_filter_zone_cerif_radio {
+ width: 30%;
+ float: left;
+ text-align: right;
+ font-size: 0.75rem;
+ }
+
+ .new_filter_zone_cerif_radio_right {
+ float: left;
+ text-align: left;
+ font-size: 0.7rem;
+ padding-left: 5px;
+ }
+
+ .new_filter_zone_cerif_radio_left {
+ float: left;
+ text-align: center;
+ font-size: 0.7rem;
+ padding-right: 5px;
+ padding-left: 2px;
+ }
+
+ .new_filter_zone_row {
+ width: 100%;
+ padding-right: 2px;
+ }
+
+ .tick_ok_ko {
+ max-width: 50%;
+
+ }
+
+ .new_filter_zone_prix {
+ margin-top: 0.8rem;
+ margin-bottom: 0.8rem;
+ padding-right: 10px;
+ }
+
+ .middle {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.2rem;
+
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 15%;
+ }
+
+ input::placeholder {
+ color: white;
+ }
+
+ .bienvenu {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: large;
+ color: white;
+ }
+
+ .categorie {
+ padding-top: 15%;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .met_polaroid {
+ text-align: center;
+ margin-top: 9rem;
+ }
+
+ .met_polaroid_line2 {
+ text-align: center;
+ margin-top: 1rem;
+ }
+
+ .img_categorie_v2 {
+ border-radius: 5px;
+ background: white;
+ min-width: 3rem;
+ width: 6rem;
+ font-size: smaller;
+ border: 3px solid black;
+ box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
+ cursor: pointer;
+ outline: none;
+ transition: 0.2s all;
+ margin-right: 1rem;
+ }
+
+ .img_categorie_v2:active {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ .img_categorie_v2:hover {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active {
+ transition: background-color 5000000s ease-in-out 0s;
+ }
+
+ .calage {
+ display: none;
+ }
+
+ .tab_logo_metier {
+ width: 100%;
+ padding-left: 3%;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ padding-left: 5px;
+ border-radius: 10px;
+ float: left;
+ padding-bottom: 0.5rem;
+ padding-top: 5px;
+ }
+
+
+ .tab_critere_espace {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 3px;
+ gap: 10px;
+
+ width: 100%;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_nos_service {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 10px;
+ position: absolute;
+ width: 96%;
+ height: 204px;
+ left: 2%;
+ top: 500px;
+
+ }
+
+ .block_nos_formation {
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+
+ width: 96%;
+ left: 2%;
+ top: 500px;
+ }
+
+ .logo {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ position: absolute;
+ width: 108px;
+ height: 52px;
+ left: 20px;
+ top: 52px;
+ }
+
+ .Menu_Header {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 3px;
+
+ position: absolute;
+ height: 56px;
+ right: 5px;
+ top: 50px;
+ }
+
+ .Header_Content {
+ width: 100%;
+ float: left;
+ width: 95%;
+ height: 300px;
+ left: 2.5%;
+ }
+
+ .Background_Header {
+ position: absolute;
+ width: 100%;
+ height: 300px;
+ left: 0px;
+
+
+ /* Beige */
+
+ background: #f3f4fb;
+ z-index: -1;
+
+ }
+
+ .Logo_MySy {
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .header_menu {
+ /* Les formations */
+
+ cursor: pointer;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .bar_vert {
+
+ width: 1px;
+ height: 24px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 10px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 4;
+ flex-grow: 0;
+ }
+
+ .cta1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 5px;
+
+ width: 258px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 6;
+ flex-grow: 0;
+
+ }
+
+ .cta2 {
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px;
+ gap: 10px;
+
+ width: 116px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .cta3 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px;
+ gap: 10px;
+
+ width: 114px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ }
+
+
+ .minscrire {
+ cursor: pointer;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ font-weight: normal;
+ font-size: 12px;
+
+ }
+
+ .meconnecter {
+ cursor: pointer;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ font-weight: normal;
+ font-size: 12px;
+ }
+
+ .rectangle_8 {
+ /* Rectangle 8 */
+
+
+ position: absolute;
+ width: 50%;
+ height: 350px;
+ right: 2rem;
+ top: 0px;
+
+ background: url("../../mysy_img2/img_header.png") no-repeat;
+ filter: drop-shadow(0px 8px 14px rgba(0, 0, 0, 0.05));
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .content_search_bar {
+ margin-top: 3rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_desc_header {
+ width: 100%;
+ float: left;
+ height: 150px;
+ }
+
+ .title1 {
+ width: 100%;
+ text-align: center;
+ height: 120px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 54px;
+ letter-spacing: 1px;
+ color: #0A043C;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .title2 {
+ width: 90%;
+ text-align: left;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+
+ .search_bar_h {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 10px;
+
+ width: 100%;
+ height: 113px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 12px 0px 24px;
+ gap: 72px;
+
+ width: 100%;
+ height: 60px;
+
+ /* White */
+
+ background: #FFFFFF;
+ box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ border: 1px solid #E2E9FB;
+ border-radius: 60px;
+
+ }
+
+ .frame_153 {
+ /* Frame 153 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px 27px;
+ gap: 10px;
+
+ width: 588px;
+ height: 17px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .frame_153_txt {
+ width: 534px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .input_search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 10px;
+
+ width: 100%;
+ height: 80px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .cta_recherche {
+ cursor: pointer;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 142px;
+ height: 56px;
+
+ /* Green */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .cta_recherche_txt {
+ width: 90px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 17px;
+ line-height: 30px;
+ /* identical to box height, or 176% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .search_dropdown {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ width: 28%;
+
+ }
+
+ .search_bar_rectangle {
+ width: 1px;
+ height: 60px;
+
+ background: rgba(0, 0, 0, 0.08);
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_text {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 70%;
+ height: 32px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .nos_serv_background {
+ position: absolute;
+ width: 1440px;
+ height: 436px;
+ left: 0px;
+ top: 452px;
+
+ /* White */
+
+ background: #FFFFFF;
+ }
+
+ .nos_serv_txt {
+ width: 100%;
+ height: 28px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 28px;
+ line-height: 38px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: 1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .nos_serv_list {
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: center;
+ padding: 0px;
+ gap: 15px;
+
+ width: 100%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 31%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv2 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 28%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv3 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 28%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .block_filter {
+ /* Block Filters */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ gap: 24px;
+
+ width: 309px;
+ height: 1110px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_list_formation {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 947px;
+ height: 2486px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ margin-bottom: 3rem;
+ }
+
+ .sous_filter_metier {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ width: 100%;
+ }
+
+ .sous_filter_txt {
+ /* Les filtres */
+
+
+ height: 24px;
+ letter-spacing: 1px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_filter_separator {
+ width: 277px;
+ height: 0px;
+
+ opacity: 0.08;
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 277px;
+ height: 494px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_mertier {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 277px;
+ height: 496px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .filter_valeur {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 71px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .filter_valeur_txt {
+ /* Eligible CPF */
+
+ letter-spacing: 2px;
+ height: 19px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .filter_valeur_block_val {
+ /* List Checkbox */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 90%;
+ height: 48px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .frame_133 {
+ /* Frame 133 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 20px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 1;
+ }
+
+ .frame_133_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 50px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_radio {
+ /* Radio Button */
+
+ cursor: pointer;
+
+ width: 16px;
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_txt {
+ /* Oui */
+
+
+ width: 26px;
+ height: 22px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .frame_134 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 20px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_134_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 55px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .frame_135 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 20px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_135_grp {
+ /* Checbox + Text */
+
+ margin-left: 10px;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 30px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+
+ .filter_txt {
+ /* Les filtres */
+
+
+ width: 92px;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block {
+ /* Filter */
+
+ cursor: pointer;
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 10px;
+ gap: 10px;
+
+ width: 95%;
+ height: 70px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border: 1px solid #DFDFDF;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 12px;
+
+ width: 180px;
+ height: 40px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_radio {
+
+ /* Radio Button */
+
+
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_txt {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 144px;
+ height: 40px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_formation {
+ width: 144px;
+ height: 22px;
+ margin-top: 10px;
+ text-align: left;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_nb {
+ width: 85px;
+ height: 14px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+ opacity: 0.7;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .filter_metier_sous_block_plus_metier {
+ /* Icon + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 233px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_1 {
+ border: #0A043C solid;
+ width: 24px;
+ height: 24px;
+
+ cursor: pointer;
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_2 {
+ width: 201px;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 15px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .block_actualite {
+ /* Actualité */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+ height: 549px;
+ top: 4550px;
+ display: none;
+ }
+
+ .block_actualite_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 100%;
+ height: 453px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_actualite_sous_block_text {
+ width: 261px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 90%;
+ height: 365px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+
+ }
+
+ .block_list_actu_actu1 {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 23px;
+
+ width: 32%;
+ height: 364px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_img {
+ width: 100%;
+ height: 250px;
+
+ background: url(https://img.mysy-training.com/img_actu1.png), #D9D9D9 no-repeat;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text {
+ /* Date + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px 0px 0px 8px;
+ gap: 8px;
+
+ height: 91px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_date {
+ width: 152px;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ text-transform: uppercase;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_txt {
+
+ height: 64px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: medium;
+ line-height: 32px;
+ /* or 133% */
+
+ letter-spacing: -0.3px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .pieddepage_v2 {
+ position: relative;
+ width: 100%;
+
+ left: 0px;
+
+ top: 6000px;
+ background: #FFF5DA;
+ z-index: -1;
+ }
+
+ .bton_tout_nos_article {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .bton_tout_nos_article_account_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .bton_tout_nos_article_txt {
+
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 20px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .block_partner {
+ /* Partner Block */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 40px;
+ gap: 10px;
+
+ position: absolute;
+ width: 95%;
+ height: 386px;
+ top: 4750px;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Shadow 01 */
+
+ box-shadow: 0px 54px 100px rgba(10, 4, 60, 0.08);
+ border-radius: 8px;
+
+ }
+
+ .block_partner_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 100%;
+ height: 306px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+
+ width: 100%;
+ height: 226px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_logo {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 4px;
+
+ width: 160px;
+ height: 76px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_desc {
+ width: 600px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 28px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_txt {
+ width: 100%;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_buton {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Green */
+
+ background: #20BFA9;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .logo_not_absolut {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .block_partner_sous_block_logo_desc_desc2 {
+ width: 100%;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .domaine_icone {
+ margin-top: 5px;
+ width: 10%;
+ }
+
+ .domaine_icone_fa {
+ margin-top: 5px;
+ width: 5%;
+ cursor: pointer;
+ }
+
+
+ .fron_search {
+ border: none;
+ font-size: medium;
+ padding-right: 5px;
+ }
+
+ .service1_img {
+ left: 0px;
+ top: 0px;
+
+ background: #D6EBE4;
+ opacity: 1;
+ border-radius: 1rem;
+ margin-top: 1rem;
+ display: none;
+ }
+
+ .service1_title_desc {
+ /* Title + Description */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .service1_title {
+
+ width: 100%;
+ text-align: left;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ /* identical to box height, or 133% */
+
+ letter-spacing: 0.3px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .service1_desc {
+ text-align: left;
+ height: 80px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ width: 100%;
+ /* or 143% */
+
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .img_service {
+ width: 100%;
+ height: 4rem;
+ border-radius: 1rem;
+ }
+
+ .forma_et_tuto {
+ width: 99%;
+ margin-left: 5px;
+ height: 80px;
+ padding-top: 10px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: 1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ background: #F7F7F7;
+ }
+
+ .forma_et_tuto_mobile {
+ display: none;
+ }
+
+ .cta_publication {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 2px 2px;
+ gap: 5px;
+
+ width: 120px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: red;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 12px;
+ }
+
+ .cta_publication_v2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 2px 2px;
+ gap: 5px;
+
+ width: 120px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #53B7EB;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 12px;
+ font-weight: 600;
+
+ text-decoration: none;
+ -webkit-animation: glowing 1500ms 4;
+ -moz-animation: glowing 1500ms 4;
+ -o-animation: glowing 1500ms 4;
+ animation: glowing 1500ms 4;
+
+ }
+
+ @-webkit-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-moz-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-o-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+
+ .cta_hebergement {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 2px 2px;
+ gap: 5px;
+
+ width: 120px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: rebeccapurple;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 12px;
+ }
+
+ .search_bar_2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 5px 0px 5px;
+ gap: 1px;
+
+ width: 100%;
+ height: 10px;
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-bottom: 2rem !important;
+ text-align: left;
+ padding-left: 1rem;
+
+ }
+
+ .bton_ensavoir_plus {
+ border-radius: 5rem;
+ font-size: medium;
+ background: #81BC3A !important;
+ text-align: center;
+ height: 2.5rem;
+ width: 100%;
+ color: white;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-top: 10px;
+ cursor: pointer;
+ }
+
+ .block_newletter {
+ font-size: 18px;
+ font-weight: 400;
+ width: 100%;
+ line-height: 15px;
+ margin-top: 20px;
+ }
+
+ .block_newletter_email {
+ width: 80%;
+ float: left;
+
+ }
+
+ .block_newletter_bton_ok {
+ width: 20%;
+ float: left;
+ margin-top: 10px;
+ position: relative;
+ left: -5px;
+ }
+
+ .block_newletter_bton_bton_ok {
+ height: 3rem;
+ border: solid 1px black;
+ background: #0A043C;
+ color: white;
+ width: 80%;
+
+ }
+
+
+ .cta_recherche_img_search_loup {
+ width: 50%;
+ margin-right: -28px;
+ }
+
+
+ .block_formation {
+ flex: 1 1 200px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #FFF;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .block_display_flex_formation {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ /*style grande tablettes & Pc portable */
+
+ .div_row {
+ float: left;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ }
+
+ .div_row_gauche {
+ float: left;
+
+ border-width: 0.01rem;
+ width: 48%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: right;
+ border-width: 0.01rem;
+ width: 48%;
+ border-radius: 1rem;
+ }
+
+ .align_gauche {
+ margin-left: 0rem;
+ width: 100%;
+ float: right;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .recherchefilter {
+ display: none;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .rech_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+ .rech_leftbox {
+ float: left;
+ border-width: 1px;
+ width: 35%;
+ height: 100%;
+ padding: 0.1rem;
+ border-radius: 1rem;
+ margin-bottom: 0.1rem;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 5px;
+ margin-top: 0.5rem;
+ padding-left: 5px;
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 64%;
+ height: 100%;
+ margin: auto;
+ padding: 0rem;
+ border-radius: 30px;
+ margin-right: 0%;
+ padding-left: 1rem;
+ padding-right: 10px;
+ }
+
+ .rech_rightbox {
+
+ display: none;
+ }
+
+ .rech_rightbox .button2 {
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: medium !important;
+ border-radius: 1rem;
+ margin: 0px;
+ padding: 0px;
+ text-align: center;
+ margin-bottom: 0.5rem;
+ }
+
+ .rech_rightbox_inside {
+ float: left;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0px;
+ border-radius: 0px;
+ margin-right: 0%;
+ overflow-y: scroll;
+ height: 800px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: medium;
+ padding-right: 5px;
+ margin-right: 5px;
+ }
+
+ .textsurimage {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ font-size: 40pt;
+ text-align: center;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ }
+
+ .rech_list_formation2 {
+ display: inline-block;
+ width: 100%;
+ height: auto;
+ padding: 1px;
+ outline: 1px solid #ccc;
+ margin: 0;
+ text-align: left;
+ border-radius: 10px;
+ margin-bottom: 10px;
+ background-color: white;
+
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ }
+
+ .rech_list_formation2:hover {
+ -webkit-box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ }
+
+ .textsurimage23 {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ text-align: center;
+ position: absolute;
+ top: 20%;
+ left: 30%;
+ width: 30rem;
+ }
+
+ .form-input {
+ border-radius: 10rem;
+ height: 2.8rem;
+ font-size: medium;
+ line-height: 1.5;
+ margin-bottom: 4px;
+ color: white;
+ border: 2px solid white;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ h4 {
+ display: inline-block;
+ font-size: x-large;
+ /*or whatever you want*/
+ color: white;
+ }
+
+ .default_font {
+ color: #3c4043;
+ display: inline-block;
+ line-height: 28px;
+ font-size: medium;
+ }
+
+ .form {
+ font-size: medium;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 0.5rem;
+ position: relative;
+ margin-top: 1rem;
+ z-index: 11;
+ display: flex;
+ }
+
+ .form span {
+ position: absolute;
+ right: 0.2rem;
+ top: 0.1rem;
+ padding: 2px;
+ border-left: 0.2rem solid white;
+ height: 2.7rem;
+ }
+
+ form svg {
+ margin-top: 0.8rem !important;
+ cursor: pointer;
+ }
+
+ .form span_clear {
+ position: absolute;
+ right: 1.5rem !important;
+ top: 0.1rem !important;
+ padding: 2px;
+ border-left: 0.2rem solid white !important;
+ height: 2.7rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .left-pan {
+ padding-left: 7px;
+ }
+
+ .left-pan i {
+ padding-left: 10px;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ margin-top: 0.5rem;
+ }
+
+ .text-box {
+ position: absolute;
+ height: 100%;
+ text-align: center;
+ width: 100%;
+ }
+
+ .text-box:before {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 20%;
+ max-height: 3rem;
+ }
+
+
+ .form-select {
+ height: 2.5rem !important;
+ border-radius: 0px;
+ font-size: small;
+ }
+
+
+ .mb-3 {
+ margin-bottom: 0.5rem !important;
+ font-size: small !important;
+ cursor: pointer;
+ }
+
+ .input-group-text {
+ font-size: 0.8rem !important;
+ padding-left: 0px !important;
+ }
+
+ .filter_span {
+ padding-top: 0.5rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ color: #104277;
+ font-size: 0.9rem;
+ white-space: nowrap;
+ width: 30%;
+ margin-top: 0.6rem;
+ }
+
+ .filter_val {
+ padding-top: 0.1rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ font-size: 0.75rem;
+ white-space: nowrap;
+ border: none;
+ background: transparent;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ border: 0.1rem solid black;
+ border-radius: 0.3rem !important;
+ width: 65%;
+ margin-top: 0.3rem;
+ margin-right: 0px;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.1rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row2 {
+ float: left;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+
+ z-index: 10;
+ min-height: 30rem;
+ }
+
+ .div_row_haut {
+ float: left;
+
+ width: 100%;
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+ width: 100%;
+ min-height: 100%;
+ height: 30rem;
+
+ background-color: #e7f3fb;
+ z-index: 10;
+ background: url("../../mysy_img/mysy_home.jpg") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+
+ }
+
+ .div_mobile {
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ color: white !important;
+ margin-top: 5rem;
+ }
+
+ .menuPrincipal_bton {
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+ .menuPrincipal {
+ margin-left: 0.8rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 50%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 50%;
+ text-align: right;
+ color: white;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 0.9rem;
+ margin-bottom: 0.5rem;
+ letter-spacing: 0.15rem;
+ }
+
+ .hilightsoustitre_v2 {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ margin-top: 0.5rem;
+ letter-spacing: 2px;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .hilightsoustitre_v2_metier {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ margin-top: 3rem;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .tab_gauche {
+ width: 50%;
+ float: left;
+ text-align: left;
+ }
+
+ .tab_droite {
+ width: 50%;
+ float: right;
+ text-align: right;
+ }
+
+ .tab_gauche_metier {
+ width: 48%;
+ float: left;
+ text-align: left;
+ }
+
+ .tab_droite_metier {
+ width: 48%;
+ float: right;
+ text-align: right;
+ }
+
+ .img_thematique_metier {
+ display: block;
+ border-radius: 10rem;
+ max-width: 360px;
+ }
+
+ .met_polaroid_gauche {
+ width: 95%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_gauche:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_polaroid_droite {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_droite:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ font-weight: bold;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ font-size: small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ font-weight: bold;
+ }
+
+ .met_text_larg {
+ margin-bottom: 0.1rem;
+ font-size: xx-small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .met_text_all_categories {
+ margin-bottom: 0.1rem;
+ font-size: x-small;
+ margin-top: 1rem;
+ }
+
+ .met_container_all_categories {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ height: 3rem;
+ }
+
+ .met_polaroid_gauche_all_categories {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .tab_gauche_all_categories {
+ width: 100%;
+ float: left;
+ text-align: left;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-top-right-radius: 12px;
+ border-radius: 12px;
+ padding: 5px;
+ }
+
+ .h1_transparent {
+ color: transparent;
+ font-size: 0.1rem;
+ }
+
+ .mymenu_item {
+ font-size: 0.7rem !important;
+ }
+
+ .MuiMenuItem-root {
+ font-size: 0.7rem !important;
+ }
+
+ .new_filter_zone {
+ float: left;
+ width: 35%;
+ display: flex;
+ align-items: center;
+ font-size: small;
+ line-height: 1.5;
+ color: #212529;
+ text-align: center;
+ white-space: nowrap;
+ background-color: #e9ecef;
+ border: 1px solid #ced4da;
+ }
+
+ .new_filter_zone_cerif_radio {
+ width: 30%;
+ float: left;
+ text-align: right;
+ font-size: smaller;
+ }
+
+ .new_filter_zone_cerif_radio_right {
+ float: left;
+ text-align: left;
+ font-size: small;
+ padding-left: 5px;
+ }
+
+ .new_filter_zone_cerif_radio_left {
+ float: left;
+ text-align: center;
+ font-size: small;
+ padding-right: 5px;
+ padding-left: 2px;
+ }
+
+ .new_filter_zone_row {
+ width: 100%;
+ padding-right: 5px;
+ }
+
+ .tick_ok_ko {
+ max-width: 50%;
+ }
+
+ .new_filter_zone_prix {
+ margin-top: 0.7rem;
+ margin-bottom: 0.7rem;
+ padding-right: 10px;
+ }
+
+ .middle {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.2rem;
+
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 15%;
+ }
+
+ input::placeholder {
+ color: white;
+ }
+
+ .bienvenu {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: large;
+ color: white;
+ }
+
+ .categorie {
+ padding-top: 15%;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .met_polaroid {
+ text-align: center;
+ margin-top: 9rem;
+ }
+
+ .met_polaroid_line2 {
+ text-align: center;
+ margin-top: 1rem;
+ }
+
+ .img_categorie_v2 {
+ border-radius: 5px;
+ background: white;
+ min-width: 3rem;
+ width: 8rem;
+ font-size: smaller;
+ border: 2px solid black;
+ box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
+ cursor: pointer;
+ outline: none;
+ transition: 0.2s all;
+ margin-right: 1rem;
+ }
+
+ .img_categorie_v2:active {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ .img_categorie_v2:hover {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active {
+ transition: background-color 5000000s ease-in-out 0s;
+ }
+
+ .calage {
+ display: none;
+ }
+
+ .tab_logo_metier {
+ width: 100%;
+ padding-left: 5px;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ padding-left: 10px;
+ border-radius: 10px;
+ float: left;
+ padding-bottom: 0.5rem;
+ padding-top: 10px;
+ }
+
+
+ .tab_critere_espace {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ gap: 10px;
+
+ width: 100%;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_nos_service {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 10px;
+
+ position: absolute;
+ width: 97%;
+ height: 204px;
+ left: 20px;
+ top: 510px;
+ background: white;
+
+ }
+
+ .block_nos_formation {
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+
+ width: 96%;
+ left: 2%;
+ top: 500px;
+ }
+
+ .logo {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ position: absolute;
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .Menu_Header {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 10px;
+
+ position: absolute;
+ width: 843px;
+ height: 56px;
+ right: 5px;
+ top: 50px;
+ }
+
+ .Header_Content {
+ /* Auto layout * /
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ isolation: isolate;
+
+ position: absolute;
+ width: 95%;
+ height: 367px;
+ left: 5%;
+ top: 136px;*/
+
+ width: 100%;
+ float: left;
+ width: 95%;
+ height: 300px;
+ left: 2.5%;
+ }
+
+
+ .Background_Header {
+ position: absolute;
+ width: 100%;
+ height: 300px;
+ left: 0px;
+
+
+ /* Beige */
+
+ background: #f3f4fb;
+ z-index: -1;
+
+ }
+
+
+ .Logo_MySy {
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .header_menu {
+ /* Les formations */
+ cursor: pointer;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .bar_vert {
+
+ width: 1px;
+ height: 24px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 10px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 4;
+ flex-grow: 0;
+ }
+
+ .cta1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 288px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 6;
+ flex-grow: 0;
+
+ }
+
+ .cta2 {
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 126px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .cta3 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ }
+
+
+ .minscrire {
+ cursor: pointer;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .meconnecter {
+ cursor: pointer;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .rectangle_8 {
+ /* Rectangle 8 */
+
+
+ position: absolute;
+ width: 500px;
+ height: 400px;
+ right: 1rem;
+ top: 0px;
+
+ background: url("../../mysy_img2/img_header.png") no-repeat;
+ filter: drop-shadow(0px 8px 14px rgba(0, 0, 0, 0.05));
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .content_search_bar {
+
+ height: 367px;
+ margin-top: 4rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_desc_header {
+ width: 100%;
+ float: left;
+ height: 150px;
+ }
+
+ .title1 {
+ width: 100%;
+ text-align: center;
+ height: 120px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 54px;
+ letter-spacing: 1px;
+ color: #0A043C;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .title2 {
+ width: 90%;
+ text-align: left;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .search_bar_h {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 10px;
+
+ width: 100%;
+ height: 113px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 12px 0px 24px;
+ gap: 72px;
+
+ width: 100%;
+ height: 60px;
+
+ /* White */
+
+ background: #FFFFFF;
+ box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ border: 1px solid #E2E9FB;
+ border-radius: 60px;
+
+ }
+
+ .frame_153_txt {
+ width: 50%;
+ height: 17px;
+ text-align: left;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .input_search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 5px;
+
+ width: 80%;
+ height: 80px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .cta_recherche {
+ cursor: pointer;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 142px;
+ height: 56px;
+
+ /* Green */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .cta_recherche_txt {
+ width: 90px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 17px;
+ line-height: 30px;
+ /* identical to box height, or 176% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .search_dropdown {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 2px;
+
+
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ width: 30%;
+
+ }
+
+ .search_bar_rectangle {
+ width: 1px;
+ height: 60px;
+
+ background: rgba(0, 0, 0, 0.08);
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_text {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 93%;
+ height: 32px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .nos_serv_background {
+ position: absolute;
+ width: 1440px;
+ height: 436px;
+ left: 0px;
+ top: 452px;
+
+ /* White */
+
+ background: #FFFFFF;
+ }
+
+ .nos_serv_txt {
+ width: 227px;
+ height: 28px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 38px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: 1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .nos_serv_list {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 56px;
+
+ width: 95%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv2 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv3 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .block_filter {
+ /* Block Filters */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ gap: 24px;
+
+ width: 309px;
+ height: 1110px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_list_formation {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 947px;
+ height: 2486px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ margin-bottom: 3rem;
+ }
+
+ .sous_filter_metier {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ width: 100%;
+ }
+
+ .sous_filter_txt {
+ /* Les filtres */
+
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_filter_separator {
+ width: 277px;
+ height: 0px;
+
+ opacity: 0.08;
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 277px;
+ height: 494px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_mertier {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 277px;
+ height: 496px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .filter_valeur {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 71px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .filter_valeur_txt {
+ /* Eligible CPF */
+
+ letter-spacing: 2px;
+ height: 19px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .filter_valeur_block_val {
+ /* List Checkbox */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+ height: 48px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .frame_133 {
+ /* Frame 133 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 90px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 1;
+ }
+
+ .frame_133_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 50px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_radio {
+ /* Radio Button */
+
+ cursor: pointer;
+ width: 16px;
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_txt {
+ /* Oui */
+
+
+ width: 26px;
+ height: 22px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .frame_134 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 90px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_134_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 55px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .frame_135 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 50px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_135_grp {
+ /* Checbox + Text */
+
+ margin-left: 10px;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 30px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+
+ .filter_txt {
+ /* Les filtres */
+
+
+ width: 92px;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block {
+ /* Filter */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 16px;
+ gap: 10px;
+
+ width: 90%;
+ height: 72px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border: 1px solid #DFDFDF;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 12px;
+
+ width: 180px;
+ height: 40px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_radio {
+
+ /* Radio Button */
+
+
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_txt {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 144px;
+ height: 40px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_formation {
+ width: 144px;
+ height: 22px;
+
+ text-align: left;
+ margin-top: 10px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_nb {
+ width: 85px;
+ height: 14px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+ opacity: 0.7;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .filter_metier_sous_block_plus_metier {
+ /* Icon + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 233px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_1 {
+ border: #0A043C solid;
+ width: 24px;
+ height: 24px;
+
+ cursor: pointer;
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_2 {
+ width: 201px;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .block_actualite {
+ /* Actualité */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+ height: 549px;
+
+ top: 4450px;
+ display: none;
+ }
+
+ .block_actualite_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 100%;
+ height: 453px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_actualite_sous_block_text {
+ width: 261px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 95%;
+ height: 365px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+
+ }
+
+ .block_list_actu_actu1 {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 23px;
+
+ width: 32%;
+ height: 364px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_img {
+ width: 100%;
+ height: 250px;
+
+ background: url(https://img.mysy-training.com/img_actu1.png), #D9D9D9 no-repeat;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_list_actu_actu1_date_text {
+ /* Date + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px 0px 0px 8px;
+ gap: 8px;
+
+
+ height: 91px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_date {
+ width: 152px;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ text-transform: uppercase;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_txt {
+
+ height: 64px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: medium;
+ line-height: 32px;
+ /* or 133% */
+
+ letter-spacing: -0.3px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .pieddepage_v2 {
+ position: relative;
+ width: 100%;
+
+ left: 0px;
+
+ top: 5850px;
+ background: #FFF5DA;
+ z-index: -1;
+
+ }
+
+ .bton_tout_nos_article {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .bton_tout_nos_article_account_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .bton_tout_nos_article_txt {
+
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .block_partner {
+ /* Partner Block */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 40px;
+ gap: 10px;
+
+ position: absolute;
+ width: 90%;
+ height: 386px;
+ left: 72px;
+ top: 4650px;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Shadow 01 */
+
+ box-shadow: 0px 54px 100px rgba(10, 4, 60, 0.08);
+ border-radius: 8px;
+
+ }
+
+ .block_partner_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 858px;
+ height: 306px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+
+ width: 858px;
+ height: 226px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_logo {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 4px;
+
+ width: 160px;
+ height: 76px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_desc {
+ width: 600px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 28px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_txt {
+ width: 858px;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_buton {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Green */
+
+ background: #20BFA9;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .logo_not_absolut {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .block_partner_sous_block_logo_desc_desc2 {
+ width: 858px;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .domaine_icone {
+ margin-top: 5px;
+ }
+
+ .domaine_icone_fa {
+ margin-top: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
+ .fron_search {
+ border: none;
+ font-size: medium;
+ padding-right: 5px;
+ }
+
+ .service1_img {
+ left: 0px;
+ top: 0px;
+
+ background: #D6EBE4;
+ opacity: 1;
+ border-radius: 1rem;
+ margin-top: 1rem;
+ }
+
+ .service1_title_desc {
+ /* Title + Description */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 60%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .service1_title {
+
+ width: 100%;
+ height: 62px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ /* identical to box height, or 133% */
+
+ letter-spacing: 0.3px;
+ text-align: left;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .service1_desc {
+ text-align: left;
+ height: 80px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ /* or 143% */
+
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .img_service {
+ width: 100%;
+ height: 4rem;
+ border-radius: 1rem;
+ }
+
+ .forma_et_tuto {
+ width: 99%;
+ margin-left: 5px;
+ height: 80px;
+ padding-top: 10px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: 1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ background: #F7F7F7;
+ }
+
+ .forma_et_tuto_mobile {
+ display: none;
+ }
+
+ .cta_publication {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 2px 2px;
+ gap: 10px;
+
+ width: 130px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: red;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-size: 12px;
+ font-weight: 600;
+ }
+
+
+ .cta_publication_v2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 2px 2px;
+ gap: 10px;
+
+ width: 130px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #53B7EB;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-size: 12px;
+ font-weight: 600;
+
+ text-decoration: none;
+ -webkit-animation: glowing 1500ms 4;
+ -moz-animation: glowing 1500ms 4;
+ -o-animation: glowing 1500ms 4;
+ animation: glowing 1500ms 4;
+
+ }
+
+ @-webkit-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-moz-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-o-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+
+
+ .cta_hebergement {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 5px;
+ gap: 10px;
+
+ width: 130px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: rebeccapurple;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-size: 12px;
+ font-weight: 600;
+ }
+
+ .search_bar_2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 2px 0px 4px;
+ gap: 1px;
+
+ width: 100%;
+ height: 10px;
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-bottom: 2rem !important;
+ text-align: left;
+ padding-left: 1rem;
+
+ }
+
+ .bton_ensavoir_plus {
+ border-radius: 5rem;
+ font-size: medium;
+ background: #81BC3A !important;
+ text-align: center;
+ height: 2.5rem;
+ width: 90%;
+ color: white;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-top: 10px;
+ cursor: pointer;
+ }
+
+ .block_newletter {
+ font-size: 18px;
+ font-weight: 400;
+ width: 100%;
+ line-height: 15px;
+ margin-top: 20px;
+ }
+
+ .block_newletter_email {
+ width: 80%;
+ float: left;
+
+ }
+
+ .block_newletter_bton_ok {
+ width: 20%;
+ float: left;
+ margin-top: 10px;
+ position: relative;
+ left: -5px;
+ }
+
+ .block_newletter_bton_bton_ok {
+ height: 3rem;
+ border: solid 1px black;
+ background: #0A043C;
+ color: white;
+ width: 80%;
+
+ }
+
+
+ .cta_recherche_img_search_loup {
+ width: 50%;
+ margin-right: -30px;
+ }
+
+
+ .block_formation {
+ flex: 1 1 200px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #FFF;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .block_display_flex_formation {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+
+ }
+
+ @media only screen and (min-width: 1200px) and (max-width: 1919px) {
+
+ /* Ordi de bureau et grands ecrans*/
+ .align_gauche {
+ margin-left: 0rem;
+ width: 100%;
+ float: right;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .recherchefilter {
+ display: none;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .rech_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+ .rech_leftbox {
+ float: left;
+
+ border-width: 1px;
+ width: 24%;
+ height: 100%;
+ padding: 0.5rem;
+
+ margin-bottom: 0.1rem;
+ font-size: small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: #FFF;
+ margin-left: 5px;
+
+ padding-left: 5px;
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 75%;
+ height: 100%;
+ margin: auto;
+ padding: 0rem;
+
+ margin-right: 0%;
+ padding-left: 1rem;
+ padding-right: 10px;
+ background: #fff;
+
+ }
+
+ .rech_rightbox {
+
+ display: none;
+ }
+
+ .rech_rightbox .button2 {
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: medium !important;
+ border-radius: 1rem;
+ margin: 0px;
+ padding: 0px;
+ text-align: center;
+ margin-bottom: 0.5rem;
+ }
+
+ .rech_rightbox_inside {
+ float: left;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0px;
+ border-radius: 0px;
+ margin-right: 0%;
+ overflow-y: scroll;
+ height: 800px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ padding-right: 5px;
+ margin-right: 5px;
+ }
+
+ .textsurimage {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ font-size: 40pt;
+ text-align: center;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ }
+
+ .rech_list_formation2 {
+ display: inline-block;
+ width: 100%;
+ background-color: white;
+ height: auto;
+ padding: 1px;
+ outline: 1px solid #ccc;
+
+ margin: 0;
+ text-align: left;
+ border-radius: 10px;
+ margin-bottom: 10px;
+ background-color: white;
+
+
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+
+
+ }
+
+ .rech_list_formation2:hover {
+ -webkit-box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ }
+
+ .textsurimage23 {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ text-align: center;
+ position: absolute;
+ top: 20%;
+ left: 40%;
+ }
+
+ h4 {
+ display: inline-block;
+ font-size: xx-large;
+ /*or whatever you want*/
+ color: white;
+ }
+
+ .default_font {
+ color: #3c4043;
+ display: inline-block;
+ line-height: 28px;
+ font-size: medium;
+ }
+
+ .form-input {
+ border-radius: 10rem;
+ height: 3rem;
+ font-size: medium;
+ line-height: 1.5;
+ margin-bottom: 4px;
+ color: white;
+ border: 2.5px solid white;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .form {
+ font-size: medium;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ position: relative;
+
+ z-index: 11;
+ height: 3rem;
+ display: flex;
+ }
+
+ .form span {
+ position: absolute;
+ right: 0.2rem;
+ top: 0.1rem;
+ padding: 2px;
+ border-left: 0.2rem solid white;
+ height: 2.9rem;
+ }
+
+ .form span_clear {
+ position: absolute;
+ right: 1.5rem !important;
+ top: 0.1rem !important;
+ padding: 2px;
+ border-left: 0.2rem solid white !important;
+ height: 2.9rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ form svg {
+ margin-top: 0.8rem !important;
+ cursor: pointer;
+ }
+
+ .left-pan {
+ padding-left: 7px;
+ }
+
+ .left-pan i {
+ padding-left: 10px;
+ }
+
+ .containerBox {
+ position: fixed;
+ margin-top: 0.5rem;
+ height: 10rem;
+ border: 0.2rem solid #0d0e10;
+ width: 100%;
+ background-color: #999;
+ }
+
+ .containerBox0 {
+ float: left;
+ width: 30%;
+ }
+
+ .text_head_droite {
+ color: #3b3e40;
+ font-family: "lucida", "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ font-weight: bold;
+ text-align: right;
+ }
+
+ .text_head_gauche {
+ color: #3b3e40;
+ font-family: "lucida", "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ font-weight: bold;
+ text-align: left;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.2rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .text-box {
+ position: absolute;
+ height: 100%;
+ text-align: center;
+ width: 100%;
+ }
+
+ .text-box:before {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 18%;
+ max-height: 3rem;
+ }
+
+ .form-select {
+ height: 2.5rem !important;
+ border-radius: 0px;
+ font-size: small;
+ }
+
+ .mb-3 {
+ margin-bottom: 0.7rem !important;
+ font-size: xx-small !important;
+ cursor: pointer;
+ }
+
+ .input-group-text {
+ font-size: x-small !important;
+ padding-left: 0px !important;
+ }
+
+ .filter_span {
+ padding-top: 0.5rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ color: #104277;
+ font-size: 0.9rem;
+ white-space: nowrap;
+ width: 30%;
+ margin-top: 0.5rem;
+ }
+
+ .filter_val {
+ padding-top: 0.1rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ font-size: 0.9rem;
+ white-space: nowrap;
+ border: none;
+ background: transparent;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ border: 0.1rem solid black;
+ border-radius: 0.3rem !important;
+ width: 65%;
+ margin-top: 0.3rem;
+ margin-right: 0px;
+ }
+
+ .div_row2 {
+ float: left;
+
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+
+
+ z-index: 10;
+
+ }
+
+ .div_row_haut {
+ float: left;
+
+ width: 100%;
+
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+ width: 100%;
+ min-height: 100%;
+
+
+ background-color: #e7f3fb;
+ z-index: 10;
+ background: url("../../mysy_img/mysy_home.jpg") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+
+ }
+
+ .div_mobile {
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ color: white !important;
+ margin-top: 5rem;
+ }
+
+ .menuPrincipal_bton {
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+ .menuPrincipal {
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 50%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 50%;
+ text-align: right;
+ color: white;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.25rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ letter-spacing: 0.2rem;
+ }
+
+ .hilightsoustitre_v2 {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .hilightsoustitre_v2_metier {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ margin-top: 4rem;
+ height: 2rem;
+ padding-top: 5px;
+ }
+
+ .tab_gauche {
+ width: 50%;
+ float: left;
+ text-align: left;
+ }
+
+ .tab_droite {
+ width: 50%;
+ float: right;
+ text-align: right;
+ }
+
+ .tab_gauche_metier {
+ width: 30%;
+ float: left;
+ text-align: left;
+ margin-right: 2%;
+ max-width: 30% !important;
+ min-width: 30% !important;
+ }
+
+ .tab_droite_metier {
+ width: 50%;
+ float: right;
+ text-align: right;
+ }
+
+ .img_thematique_metier {
+ display: block;
+ border-radius: 10rem;
+ max-width: 360px;
+ }
+
+ .met_polaroid_gauche {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_gauche:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_polaroid_droite {
+ width: 97%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ margin-left: 3%;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_droite:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ font-weight: bold;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ font-size: small;
+ font-weight: normal;
+ white-space: nowrap;
+ overflow: hidden;
+ letter-spacing: 1px;
+ }
+
+ .met_text_larg {
+ margin-bottom: 0.1rem;
+ font-size: xx-small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .met_text_all_categories {
+ margin-bottom: 0.1rem;
+ font-size: x-small;
+ margin-top: 1rem;
+ }
+
+ .met_container_all_categories {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ height: 3rem;
+ }
+
+ .met_polaroid_gauche_all_categories {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .tab_gauche_all_categories {
+ width: 100%;
+ float: left;
+ text-align: left;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-top-right-radius: 12px;
+ border-radius: 12px;
+ padding: 5px;
+ }
+
+ .h1_transparent {
+ color: transparent;
+ font-size: 0.1rem;
+ }
+
+ .mymenu_item {
+ font-size: 0.8rem !important;
+ }
+
+ .MuiMenuItem-root {
+ font-size: 0.8rem !important;
+ }
+
+ .new_filter_zone {
+ float: left;
+ width: 35%;
+ display: flex;
+ align-items: center;
+ font-size: small;
+ line-height: 1.5;
+ color: #212529;
+ text-align: center;
+ white-space: nowrap;
+ background-color: #e9ecef;
+ border: 1px solid #ced4da;
+ }
+
+ .new_filter_zone_cerif_radio {
+ width: 30%;
+ float: left;
+ text-align: right;
+ font-size: smaller;
+ }
+
+ .new_filter_zone_cerif_radio_right {
+ float: left;
+ text-align: left;
+ font-size: small;
+ padding-left: 5px;
+ }
+
+ .new_filter_zone_cerif_radio_left {
+ float: left;
+ text-align: center;
+ font-size: small;
+ padding-right: 15px;
+ padding-left: 2px;
+ min-width: 30%;
+ }
+
+ .new_filter_zone_row {
+ height: 3.5rem;
+ width: 100%;
+ padding-right: 5px;
+ }
+
+ .tick_ok_ko {
+ max-width: 55%;
+ }
+
+ .new_filter_zone_prix {
+ margin-bottom: 1.2rem;
+ margin-top: 1.2rem;
+ padding-right: 15px;
+ }
+
+ .middle {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.2rem;
+
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 15%;
+ }
+
+ input::placeholder {
+ color: white;
+ }
+
+ .bienvenu {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: x-large;
+ color: white;
+ }
+
+ .categorie {
+ padding-top: 15%;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .met_polaroid {
+ text-align: center;
+ margin-top: 9rem;
+ }
+
+ .met_polaroid_line2 {
+ text-align: center;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .img_categorie_v2 {
+ border-radius: 5px;
+ background: white;
+ min-width: 3rem;
+ width: 9rem;
+ font-size: small;
+ border: 5px solid black;
+ box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
+ cursor: pointer;
+ outline: none;
+ transition: 0.2s all;
+ margin-right: 1.5rem;
+ }
+
+ .img_categorie_v2:active {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ .img_categorie_v2:hover {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active {
+ transition: background-color 5000000s ease-in-out 0s;
+ }
+
+ .calage {
+ width: 2%;
+ }
+
+ .tab_logo_metier {
+ width: 100%;
+ padding-left: 5px;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ padding-left: 10px;
+ border-radius: 10px;
+ padding-top: 10px;
+ }
+
+ .tab_critere_espace {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ gap: 20px;
+
+ width: 100%;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_nos_service {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ position: absolute;
+ width: 96%;
+ height: 204px;
+ left: 2%;
+ top: 510px;
+
+ }
+
+ .block_nos_formation {
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+
+ width: 96%;
+ left: 2%;
+ top: 500px;
+ }
+
+ .logo {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ position: absolute;
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .Menu_Header {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ position: absolute;
+ width: 843px;
+ height: 56px;
+ right: 72px;
+ top: 50px;
+ }
+
+
+ .Header_Content {
+ /* Auto layout * /
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ isolation: isolate;
+
+ position: absolute;
+ width: 95%;
+ height: 367px;
+ left: 5%;
+ top: 136px;*/
+
+ width: 100%;
+ float: left;
+ width: 95%;
+ height: 367px;
+ left: 5%;
+ }
+
+ .Background_Header {
+ position: absolute;
+ width: 100%;
+ height: 400px;
+ left: 0px;
+
+
+ /* Beige */
+
+ background: #f3f4fb;
+ z-index: -1;
+
+ }
+
+ .Logo_MySy {
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .header_menu {
+ /* Les formations */
+ cursor: pointer;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 17px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .bar_vert {
+
+ width: 1px;
+ height: 24px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 10px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 4;
+ flex-grow: 0;
+ }
+
+ .cta1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 288px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 6;
+ flex-grow: 0;
+
+ }
+
+ .cta2 {
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 126px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .cta3 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ }
+
+
+ .minscrire {
+ cursor: pointer;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .meconnecter {
+ cursor: pointer;
+ width: 112px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .rectangle_8 {
+ /* Rectangle 8 */
+
+
+ position: absolute;
+ width: 500px;
+ height: 400px;
+ right: 5%;
+ top: 0px;
+
+ background: url("../../mysy_img2/img_header.png") no-repeat;
+ filter: drop-shadow(0px 8px 14px rgba(0, 0, 0, 0.05));
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .content_search_bar {
+
+ height: 367px;
+ margin-top: 5rem;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_desc_header {
+ width: 100%;
+ float: left;
+ height: 150px;
+ }
+
+ .title1 {
+ width: 100%;
+ text-align: center;
+ height: 192px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 50px;
+ line-height: 54px;
+ letter-spacing: 1px;
+ color: #0A043C;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .title2 {
+ width: 90%;
+ text-align: left;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .search_bar_h {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 10px;
+
+ width: 100%;
+ height: 113px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 12px 0px 24px;
+ gap: 72px;
+
+ width: 100%;
+ height: 60px;
+
+ /* White */
+
+ background: #FFFFFF;
+ box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ border: 1px solid #E2E9FB;
+ border-radius: 60px;
+
+ }
+
+ .frame_153 {
+ /* Frame 153 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px 27px;
+ gap: 10px;
+
+ width: 588px;
+ height: 17px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .frame_153_txt {
+ width: 534px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .input_search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 100%;
+ height: 80px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .cta_recherche {
+ cursor: pointer;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 142px;
+ height: 56px;
+
+ /* Green */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .cta_recherche_txt {
+ width: 90px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 17px;
+ line-height: 30px;
+ /* identical to box height, or 176% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .search_dropdown {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 20%;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .search_bar_rectangle {
+ width: 1px;
+ height: 60px;
+
+ background: rgba(0, 0, 0, 0.08);
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_text {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 80%;
+ height: 32px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .nos_serv_background {
+ position: absolute;
+ width: 1440px;
+ height: 436px;
+ left: 0px;
+ top: 452px;
+
+ /* White */
+
+ background: #FFFFFF;
+ }
+
+ .nos_serv_txt {
+ width: 227px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .nos_serv_list {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 56px;
+
+ width: 95%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv2 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv3 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .block_filter {
+ /* Block Filters */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ gap: 24px;
+
+ width: 309px;
+ height: 1110px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_list_formation {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 947px;
+ height: 2486px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ margin-bottom: 3rem;
+ }
+
+ .sous_filter_metier {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ width: 100%;
+ }
+
+ .sous_filter_txt {
+ /* Les filtres */
+
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_filter_separator {
+ width: 277px;
+ height: 0px;
+
+ opacity: 0.08;
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 277px;
+ height: 494px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_mertier {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 277px;
+ height: 496px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .filter_valeur {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 71px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .filter_valeur_txt {
+ /* Eligible CPF */
+
+
+ letter-spacing: 2px;
+ height: 19px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .filter_valeur_block_val {
+ /* List Checkbox */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+ height: 48px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .frame_133 {
+ /* Frame 133 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 90px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 1;
+ }
+
+ .frame_133_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 50px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_radio {
+ /* Radio Button */
+
+ cursor: pointer;
+ width: 16px;
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_txt {
+ /* Oui */
+
+
+ width: 26px;
+ height: 22px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .frame_134 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 90px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_134_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 55px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .frame_135 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 50px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_135_grp {
+ /* Checbox + Text */
+
+ margin-left: 10px;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 30px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+
+ .filter_txt {
+ /* Les filtres */
+
+
+ width: 92px;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block {
+ /* Filter */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 16px;
+ gap: 10px;
+
+ width: 90%;
+ height: 72px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border: 1px solid #DFDFDF;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 12px;
+
+ width: 180px;
+ height: 40px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_radio {
+
+ /* Radio Button */
+
+
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_txt {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 144px;
+ height: 40px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_formation {
+ width: 144px;
+ height: 22px;
+
+ text-align: left;
+ margin-top: 10px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_nb {
+ width: 85px;
+ height: 14px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+ opacity: 0.7;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .filter_metier_sous_block_plus_metier {
+ /* Icon + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 233px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_1 {
+ border: #0A043C solid;
+ width: 24px;
+ height: 24px;
+
+ cursor: pointer;
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_2 {
+ width: 201px;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .block_actualite {
+ /* Actualité */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+ height: 549px;
+ top: 4150px;
+ display: none;
+ }
+
+ .block_actualite_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 100%;
+ height: 453px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_actualite_sous_block_text {
+ width: 261px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 95%;
+ height: 365px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+
+ }
+
+ .block_list_actu_actu1 {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 23px;
+
+ width: 32%;
+ height: 364px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_img {
+ width: 100%;
+ height: 250px;
+
+ background: url(https://img.mysy-training.com/img_actu1.png) no-repeat;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text {
+ /* Date + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px 0px 0px 8px;
+ gap: 8px;
+
+ height: 91px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_date {
+ width: 152px;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ text-transform: uppercase;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_txt {
+
+ height: 64px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: medium;
+ line-height: 32px;
+ /* or 133% */
+
+ letter-spacing: -0.3px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .pieddepage_v2 {
+ position: relative;
+ width: 100%;
+
+ left: 0px;
+ top: 5650px;
+ background: #FFF5DA;
+ z-index: -1;
+
+ }
+
+ .bton_tout_nos_article {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .bton_tout_nos_article_account_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .bton_tout_nos_article_txt {
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .block_partner {
+ /* Partner Block */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 40px;
+ gap: 10px;
+
+ position: absolute;
+ width: 90%;
+ height: 386px;
+ left: 72px;
+ top: 4450px;
+ ;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Shadow 01 */
+
+ box-shadow: 0px 54px 100px rgba(10, 4, 60, 0.08);
+ border-radius: 8px;
+
+ }
+
+ .block_partner_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 858px;
+ height: 306px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+
+ width: 858px;
+ height: 226px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_logo {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 4px;
+
+ width: 160px;
+ height: 76px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_desc {
+ width: 600px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 28px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_txt {
+ width: 858px;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_buton {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Green */
+
+ background: #20BFA9;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .logo_not_absolut {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .block_partner_sous_block_logo_desc_desc2 {
+ width: 858px;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .form-select {
+ height: 2.5rem !important;
+ border-radius: 0px;
+ font-size: small;
+ }
+
+ .domaine_icone {
+ margin-top: 5px;
+ }
+
+ .domaine_icone_fa {
+ margin-top: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
+ .fron_search {
+ border: none;
+ font-size: medium;
+ padding-right: 5px;
+ }
+
+
+ .service1_img {
+
+ left: 0px;
+ top: 0px;
+
+ background: #D6EBE4;
+ opacity: 1;
+ border-radius: 1rem;
+ margin-top: 1rem;
+ }
+
+ .service1_title_desc {
+ /* Title + Description */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 70%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .service1_title {
+
+ width: 100%;
+
+ text-align: left;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ /* identical to box height, or 133% */
+
+ letter-spacing: -0.3px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .service1_desc {
+
+ text-align: left;
+ height: 80px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ /* or 143% */
+
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .img_service {
+ width: 100%;
+ height: 4rem;
+ border-radius: 1rem;
+ }
+
+
+ .forma_et_tuto {
+ width: 99%;
+ margin-left: 5px;
+ height: 80px;
+ padding-top: 10px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: 1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ background: #F7F7F7;
+ }
+
+ .forma_et_tuto_mobile {
+ display: none;
+ }
+
+ .cta_publication {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 5px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: red;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 14px;
+ }
+
+ .cta_publication_v2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 5px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #53B7EB;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 14px;
+ text-decoration: none;
+ -webkit-animation: glowing 1500ms 4;
+ -moz-animation: glowing 1500ms 4;
+ -o-animation: glowing 1500ms 4;
+ animation: glowing 1500ms 4;
+
+ }
+
+ @-webkit-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-moz-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-o-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+
+
+ .cta_hebergement {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 5px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: rebeccapurple;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 14px;
+ }
+
+ .search_bar_2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 1px 0px 2px;
+ gap: 72px;
+
+ width: 100%;
+ height: 10px;
+
+ /* White */
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-bottom: 2rem !important;
+ text-align: left;
+ padding-left: 1rem;
+ }
+
+ .bton_ensavoir_plus {
+ border-radius: 5rem;
+ font-size: medium;
+ background: #81BC3A !important;
+ text-align: center;
+ height: 2.5rem;
+ width: 100%;
+ color: white;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-top: 10px;
+ cursor: pointer;
+ }
+
+ .block_newletter {
+ font-size: 18px;
+ font-weight: 400;
+ width: 100%;
+ line-height: 1px;
+ margin-top: 20px;
+ }
+
+ .block_newletter_email {
+ width: 80%;
+ float: left;
+
+ }
+
+ .block_newletter_bton_ok {
+ width: 20%;
+ float: left;
+ margin-top: 10px;
+ position: relative;
+ left: -5px;
+ }
+
+ .block_newletter_bton_bton_ok {
+ height: 3rem;
+ border: solid 1px black;
+ background: #0A043C;
+ color: white;
+ width: 80%;
+
+ }
+
+ .cta_recherche_img_search_loup {
+ width: 50%;
+ margin-right: -5px;
+ }
+
+ .block_formation {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #FFF;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .block_display_flex_formation {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+
+ }
+
+ @media only screen and (min-width: 1920px) {
+ .calage {
+ width: 2%;
+ }
+
+ /* Ordi de bureau et grands ecrans*/
+ .align_gauche {
+ margin-left: 0rem;
+ width: 100%;
+ float: right;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .recherchefilter {
+ display: none;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .rech_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+ .rech_leftbox {
+ float: left;
+ border-width: 1px;
+ width: 24%;
+ height: 100%;
+ padding: 0.5rem;
+ border-radius: 1rem;
+ margin-bottom: 0.1rem;
+ font-size: small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+ background: white;
+ margin-left: 5px;
+ padding-left: 5px;
+ background: #FFF;
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 75%;
+ height: 100%;
+ margin: auto;
+ padding: 0rem;
+ border-radius: 30px;
+ margin-right: 0%;
+ padding-left: 1rem;
+ padding-right: 10px;
+ background: #FFF;
+
+ }
+
+ .rech_rightbox {
+
+ display: none;
+ }
+
+ .rech_rightbox .button2 {
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: medium !important;
+ border-radius: 1rem;
+ margin: 0px;
+ padding: 0px;
+ text-align: center;
+ margin-bottom: 0.5rem;
+ }
+
+ .rech_rightbox_inside {
+ float: left;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0px;
+ border-radius: 0px;
+ margin-right: 0%;
+ overflow-y: scroll;
+ height: 800px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ padding-right: 5px;
+ margin-right: 5px;
+ }
+
+ .textsurimage {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ font-size: 40pt;
+ text-align: center;
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ }
+
+ .rech_list_formation2 {
+ display: inline-block;
+ width: 100%;
+ background-color: white;
+ height: auto;
+ padding: 1px;
+ outline: 1px solid #ccc;
+ margin: 0;
+ text-align: left;
+ border-radius: 10px;
+ margin-bottom: 10px;
+ background-color: white;
+
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ }
+
+ .rech_list_formation2:hover {
+ -webkit-box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ box-shadow: 1px 1px 20px 1px rgb(0 0 0 / 25%);
+ }
+
+ .textsurimage23 {
+ color: rgb(218, 207, 207);
+ background-color: transparent;
+ text-align: center;
+ position: absolute;
+ top: 20%;
+ left: 40%;
+ }
+
+ h4 {
+ display: inline-block;
+ font-size: xx-large;
+ /*or whatever you want*/
+ color: white;
+ }
+
+ .default_font {
+ color: #3c4043;
+ display: inline-block;
+ line-height: 28px;
+ font-size: medium;
+ }
+
+ .form-input {
+ border-radius: 10rem;
+ height: 3rem;
+ font-size: medium;
+ line-height: 1.5;
+ margin-bottom: 4px;
+ color: white;
+ border: 2.5px solid white;
+ background: transparent;
+ box-shadow: none;
+ }
+
+ .form {
+ font-size: medium;
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ margin-bottom: 0.5rem;
+ position: relative;
+ margin-top: 1rem;
+ z-index: 11;
+ display: flex;
+ }
+
+ .form span {
+ position: absolute;
+ right: 0.2rem;
+ top: 0.1rem;
+ padding: 2px;
+ border-left: 0.2rem solid white;
+ height: 3rem;
+ }
+
+ .form span_clear {
+ position: absolute;
+ right: 1.5rem !important;
+ top: 0.1rem !important;
+ padding: 2px;
+ border-left: 0.2rem solid white !important;
+ height: 3rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ form svg {
+ margin-top: 0.8rem !important;
+ height: 1.5rem !important;
+ cursor: pointer;
+ }
+
+ .left-pan {
+ padding-left: 7px;
+ }
+
+ .left-pan i {
+ padding-left: 10px;
+ }
+
+ .containerBox {
+ position: fixed;
+ margin-top: 0.5rem;
+ height: 10rem;
+ border: 0.2rem solid #0d0e10;
+ width: 100%;
+ background-color: #999;
+ }
+
+ .containerBox0 {
+ float: left;
+ width: 30%;
+ }
+
+ .text_head_droite {
+ color: #3b3e40;
+ font-family: "lucida", "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ font-weight: bold;
+ text-align: right;
+ }
+
+ .text_head_gauche {
+ color: #3b3e40;
+ font-family: "lucida", "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ font-weight: bold;
+ text-align: left;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.2rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .text-box {
+ position: absolute;
+ height: 100%;
+ text-align: center;
+ width: 100%;
+ }
+
+ .text-box:before {
+ content: "";
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 18%;
+ max-height: 3rem;
+ }
+
+ .form-select {
+ height: 2.5rem !important;
+ border-radius: 0px;
+ font-size: small;
+ }
+
+ .mb-3 {
+ margin-bottom: 0.7rem !important;
+ font-size: xx-small !important;
+ cursor: pointer;
+ }
+
+ .input-group-text {
+ font-size: x-small !important;
+ padding-left: 0px !important;
+ }
+
+ .filter_span {
+ padding-top: 0.3rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ color: #104277;
+ font-size: 0.75rem;
+ white-space: nowrap;
+ width: 30%;
+ margin-top: 0.3rem;
+ }
+
+ .filter_val {
+ padding-top: 0.1rem;
+ padding-bottom: auto;
+ word-break: break-word;
+ margin-right: 0.5rem;
+ font-size: 0.9rem;
+ white-space: nowrap;
+ border: none;
+ background: transparent;
+ color: #3b3e40;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ border: 0.1rem solid black;
+ border-radius: 0.3rem !important;
+ width: 65%;
+ margin-top: 0.3rem;
+ margin-right: 0px;
+ }
+
+ .div_row2 {
+ float: left;
+
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+
+
+ z-index: 10;
+ min-height: 30rem;
+ }
+
+ .div_row_haut {
+ float: left;
+
+ width: 100%;
+
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_mobile {
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ color: white !important;
+ margin-top: 5rem;
+ }
+
+ .menuPrincipal_bton {
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+ .menuPrincipal {
+ margin-left: 1rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 50%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 50%;
+ text-align: right;
+ color: white;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.25rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ letter-spacing: 0.2rem;
+ }
+
+ .hilightsoustitre_v2 {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ height: 3rem;
+ padding-top: 5px;
+ }
+
+ .hilightsoustitre_v2_metier {
+ color: #3b3e40;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ background: #e9ecef;
+ border-radius: 5px;
+ background: #113459;
+ color: #fff;
+ letter-spacing: 2px;
+ margin-top: 5rem;
+ height: 3rem;
+ padding-top: 5px;
+ }
+
+ .tab_gauche {
+ width: 50%;
+ float: left;
+ text-align: left;
+ }
+
+ .tab_droite {
+ width: 50%;
+ float: right;
+ text-align: right;
+ }
+
+ .tab_gauche_metier {
+ width: 30%;
+ float: left;
+ text-align: left;
+ margin: 2px;
+ }
+
+ .tab_droite_metier {
+ width: 50%;
+ float: right;
+ text-align: right;
+ }
+
+ .img_thematique_metier {
+ display: block;
+ border-radius: 10rem;
+ max-width: 360px;
+ }
+
+ .met_polaroid_gauche {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_gauche:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_polaroid_droite {
+ width: 97%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ margin-left: 3%;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .met_polaroid_droite:hover {
+ transition-duration: 0.5s;
+ transform: scale(1.1);
+ box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ font-weight: bold;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ font-size: small;
+ font-weight: normal;
+ white-space: nowrap;
+ overflow: hidden;
+ letter-spacing: 1px;
+
+ }
+
+ .met_text_larg {
+ margin-bottom: 0.1rem;
+ font-size: xx-small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .met_text_all_categories {
+ margin-bottom: 0.1rem;
+ font-size: x-small;
+ margin-top: 1rem;
+ }
+
+ .met_container_all_categories {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ height: 3rem;
+ }
+
+ .met_polaroid_gauche_all_categories {
+ width: 100%;
+ background-color: white;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+ 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 5px;
+ cursor: pointer;
+ border-radius: 12px;
+ }
+
+ .tab_gauche_all_categories {
+ width: 100%;
+ float: left;
+ text-align: left;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-top-right-radius: 12px;
+ border-radius: 12px;
+ padding: 5px;
+ }
+
+ .h1_transparent {
+ color: transparent;
+ font-size: 0.1rem;
+ }
+
+ .mymenu_item {
+ font-size: 1rem !important;
+ }
+
+ .MuiMenuItem-root {
+ font-size: 1rem !important;
+
+ }
+
+ .new_filter_zone {
+ float: left;
+ width: 35%;
+ display: flex;
+ align-items: center;
+ font-size: small;
+ line-height: 1.5;
+ color: #212529;
+ text-align: center;
+ white-space: nowrap;
+ margin-top: 5px;
+ }
+
+ .new_filter_zone_cerif_radio {
+ width: 30%;
+ float: left;
+ text-align: right;
+ font-size: smaller;
+ }
+
+ .new_filter_zone_cerif_radio_right {
+
+ float: left;
+ text-align: left;
+ font-size: small;
+ padding-left: 5px;
+ }
+
+ .new_filter_zone_cerif_radio_left {
+
+ float: left;
+ text-align: center;
+ font-size: small;
+ padding-right: 15px;
+ padding-left: 2px;
+ min-width: 30%;
+ }
+
+ .new_filter_zone_row {
+ margin-bottom: 0.7rem !important;
+ width: 100%;
+ padding-right: 5px;
+ }
+
+ .tick_ok_ko {
+ max-width: 55%;
+
+ }
+
+ .new_filter_zone_prix {
+ margin-bottom: 1.2rem;
+ margin-top: 1.2rem;
+ padding-right: 15px;
+ }
+
+ .middle {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.2rem;
+
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 15%;
+ }
+
+ input::placeholder {
+ color: white;
+ }
+
+ .bienvenu {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: x-large;
+ color: white;
+ }
+
+ .categorie {
+ padding-top: 15%;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .met_polaroid {
+ text-align: center;
+ margin-top: 9rem;
+ }
+
+ .met_polaroid_line2 {
+ text-align: center;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .img_categorie_v2 {
+ border-radius: 5px;
+ background: white;
+ min-width: 3rem;
+ width: 9rem;
+ font-size: small;
+ border: 5px solid black;
+ box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
+ cursor: pointer;
+ outline: none;
+ transition: 0.2s all;
+ margin-right: 1.5rem;
+ }
+
+ .img_categorie_v2:active {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ .img_categorie_v2:hover {
+ transform: scale(1.1);
+ /* Scaling button to 0.98 to its original size */
+ box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+ /* Lowering the shadow */
+ }
+
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active {
+ transition: background-color 5000000s ease-in-out 0s;
+ }
+
+ .div_row_bas {
+ float: right;
+ width: 100%;
+ min-height: 100%;
+ height: 60rem;
+
+ background-color: #e7f3fb;
+ z-index: 10;
+ background: url("../../mysy_img/mysy_home.jpg") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+
+ }
+
+ .tab_logo_metier {
+ width: 100%;
+ padding-left: 15px;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ padding-left: 20px;
+ border-radius: 10px;
+ padding-top: 10px;
+ }
+
+ /*.tab_critere_espace {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%);
+ padding-left: 10px;
+ border-radius: 10px;
+ padding-top: 10px;
+ }*/
+
+ .tab_critere_espace {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ gap: 20px;
+
+ width: 100%;
+
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_nos_service {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 30px;
+
+ position: absolute;
+ width: 96%;
+ height: 204px;
+ left: 2%;
+ top: 510px;
+
+ }
+
+ .block_nos_formation {
+
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+
+ width: 96%;
+
+ left: 2%;
+ top: 500px;
+ }
+
+ .logo {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ position: absolute;
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .Menu_Header {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ position: absolute;
+ width: 843px;
+ height: 56px;
+ right: 72px;
+ top: 50px;
+ }
+
+ .Header_Content {
+ /* Auto layout * /
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ isolation: isolate;
+
+ position: absolute;
+ width: 95%;
+ height: 367px;
+ left: 5%;
+ top: 136px;*/
+
+ width: 100%;
+ float: left;
+ width: 95%;
+ height: 367px;
+ left: 5%;
+ }
+
+ .Background_Header {
+ position: absolute;
+ width: 100%;
+ height: 400px;
+ left: 0px;
+
+
+ /* Beige */
+
+ background: #f3f4fb;
+ z-index: -1;
+
+ }
+
+ .Logo_MySy {
+ width: 108px;
+ height: 36px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .training {
+
+ width: 108px;
+ height: 12px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 10px;
+ line-height: 12px;
+ /* identical to box height */
+
+ letter-spacing: 0.83em;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .header_menu {
+ /* Les formations */
+ cursor: pointer;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 17px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .bar_vert {
+
+ width: 1px;
+ height: 24px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 10px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 4;
+ flex-grow: 0;
+ }
+
+ .cta1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 288px;
+ height: 56px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 6;
+ flex-grow: 0;
+
+ }
+
+ .cta2 {
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 126px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .cta3 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ }
+
+
+ .minscrire {
+ cursor: pointer;
+
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .meconnecter {
+ cursor: pointer;
+ width: 112px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 30px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .rectangle_8 {
+ /* Rectangle 8 */
+
+
+ position: absolute;
+ width: 500px;
+ height: 400px;
+
+ right: 10rem;
+ top: 0px;
+
+ background: url("../../mysy_img2/img_header.png") no-repeat;
+ filter: drop-shadow(0px 8px 14px rgba(0, 0, 0, 0.05));
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ z-index: 0;
+ }
+
+ .content_search_bar {
+ height: 367px;
+ margin-top: 5rem;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .title_desc_header {
+
+
+ width: 100%;
+ float: left;
+ height: 150px;
+ }
+
+ .title1 {
+
+ width: 100%;
+ text-align: center;
+ height: 192px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 50px;
+ line-height: 54px;
+ letter-spacing: 1px;
+ color: #0A043C;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .title2 {
+ width: 100%;
+ text-align: left;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .search_bar_h {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 100%;
+ height: 113px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 12px 0px 24px;
+ gap: 72px;
+
+ width: 100%;
+ height: 60px;
+
+ /* White */
+
+ background: #FFFFFF;
+ box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ border: 1px solid #E2E9FB;
+ border-radius: 60px;
+
+ }
+
+ .frame_153 {
+ /* Frame 153 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px 27px;
+ gap: 10px;
+
+ width: 588px;
+ height: 17px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .frame_153_txt {
+ width: 534px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .input_search_bar {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 100%;
+ height: 80px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .cta_recherche {
+
+ cursor: pointer;
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 142px;
+ height: 56px;
+
+ /* Green */
+
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .cta_recherche_txt {
+ width: 90px;
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 17px;
+ line-height: 30px;
+ /* identical to box height, or 176% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .search_dropdown {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 20%;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .search_bar_rectangle {
+ width: 1px;
+ height: 60px;
+
+ background: rgba(0, 0, 0, 0.08);
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .search_text {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 80%;
+ height: 32px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .nos_serv_background {
+ position: absolute;
+ width: 1440px;
+ height: 436px;
+ left: 0px;
+ top: 452px;
+
+ /* White */
+
+ background: #FFFFFF;
+ }
+
+ .nos_serv_txt {
+ width: 227px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .nos_serv_list {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ gap: 56px;
+
+ width: 95%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv1 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv2 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .nos_serv_serv3 {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 32%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .block_filter {
+ /* Block Filters */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ gap: 24px;
+
+ width: 309px;
+ height: 1110px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_list_formation {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 947px;
+ height: 2486px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ margin-bottom: 3rem;
+ }
+
+ .sous_filter_metier {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ width: 100%;
+ }
+
+ .sous_filter_txt {
+ /* Les filtres */
+
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .sous_filter_separator {
+ width: 277px;
+ height: 0px;
+
+ opacity: 0.08;
+ /* Deep Blue */
+
+ border: 1px solid #0A043C;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_filter_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 12px;
+
+ width: 277px;
+ height: 494px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .sous_mertier {
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 277px;
+ height: 496px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ }
+
+ .filter_valeur {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 100%;
+ height: 71px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+ }
+
+ .filter_valeur_txt {
+ /* Eligible CPF */
+
+
+ letter-spacing: 2px;
+ height: 19px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+
+ .filter_valeur_block_val {
+ /* List Checkbox */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 8px;
+
+ width: 100%;
+ height: 48px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .frame_133 {
+ /* Frame 133 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 90px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 1;
+ }
+
+ .frame_133_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 50px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_radio {
+ /* Radio Button */
+ cursor: pointer;
+
+ width: 16px;
+ height: 16px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .frame_133_grp_txt {
+ /* Oui */
+
+
+ width: 26px;
+ height: 22px;
+
+ font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .frame_134 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 90px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_134_grp {
+ /* Checbox + Text */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 55px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .frame_135 {
+ /* Frame 134 */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ gap: 10px;
+
+ width: 50px;
+ height: 35px;
+
+ /* Light Grey */
+
+ background: #F7F7F7;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 1;
+ }
+
+ .frame_135_grp {
+ /* Checbox + Text */
+
+ margin-left: 10px;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 30px;
+ height: 22px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+
+ .filter_txt {
+ /* Les filtres */
+
+
+ width: 92px;
+ height: 24px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 24px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block {
+ /* Filter */
+
+ box-sizing: border-box;
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 16px;
+ gap: 10px;
+
+ width: 90%;
+ height: 72px;
+
+ /* White */
+
+ background: #FFFFFF;
+ border: 1px solid #DFDFDF;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 12px;
+
+ width: 180px;
+ height: 40px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_radio {
+
+ /* Radio Button */
+
+
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_content_txt {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 144px;
+ height: 40px;
+
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_formation {
+ width: 144px;
+ height: 22px;
+
+ text-align: left;
+ margin-top: 10px;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .filter_metier_sous_block_content_txt_nb {
+ width: 85px;
+ height: 14px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+ opacity: 0.7;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .filter_metier_sous_block_plus_metier {
+ /* Icon + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ width: 233px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_1 {
+ border: #0A043C solid;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .filter_metier_sous_block_plus_metier_2 {
+ width: 201px;
+ height: 22px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .block_actualite {
+ /* Actualité */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ position: absolute;
+ width: 100%;
+ height: 549px;
+
+ top: 4300px;
+ display: none;
+
+ }
+
+ .block_actualite_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 40px;
+
+ width: 100%;
+ height: 453px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_actualite_sous_block_text {
+ width: 261px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 24px;
+
+ width: 95%;
+ height: 365px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+
+ }
+
+ .block_list_actu_actu1 {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 23px;
+
+ width: 32%;
+ height: 364px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_img {
+ width: 100%;
+ height: 250px;
+
+ background: url(https://img.mysy-training.com/img_actu1.png) no-repeat;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .block_list_actu_actu1_date_text {
+ /* Date + Title */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px 0px 0px 8px;
+ gap: 8px;
+
+ height: 91px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_date {
+ width: 152px;
+ height: 19px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ text-transform: uppercase;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_list_actu_actu1_date_text_txt {
+
+ height: 64px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: medium;
+ line-height: 32px;
+ /* or 133% */
+
+ letter-spacing: -0.3px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .pieddepage_v2 {
+ position: relative;
+ width: 100%;
+
+ left: 0px;
+
+ top: 5450px;
+ background: #FFF5DA;
+ z-index: -1;
+
+ }
+
+ .bton_tout_nos_article {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: #0A043C;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .bton_tout_nos_article_account_box {
+ display: none;
+ width: 24px;
+ height: 24px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .bton_tout_nos_article_txt {
+ height: 30px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height, or 188% */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* White */
+
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+ }
+
+ .block_partner {
+ /* Partner Block */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 40px;
+ gap: 10px;
+
+ position: absolute;
+ width: 90%;
+ height: 386px;
+ left: 72px;
+ top: 4500px;
+
+ /* White */
+
+ background: #FFFFFF;
+ /* Shadow 01 */
+
+ box-shadow: 0px 54px 100px rgba(10, 4, 60, 0.08);
+ border-radius: 8px;
+
+ }
+
+ .block_partner_sous_block {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 24px;
+
+ width: 858px;
+ height: 306px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 16px;
+
+ width: 858px;
+ height: 226px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_logo {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 4px;
+
+ width: 160px;
+ height: 76px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_logo_desc_desc {
+ width: 600px;
+ height: 48px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 28px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: -1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_txt {
+ width: 858px;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .block_partner_sous_block_buton {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 13px 26px;
+ gap: 10px;
+
+ width: 299px;
+ height: 56px;
+
+ /* Green */
+
+ background: #20BFA9;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .logo_not_absolut {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 108px;
+ height: 52px;
+ left: 72px;
+ top: 52px;
+ }
+
+ .block_partner_sous_block_logo_desc_desc2 {
+ width: 858px;
+ height: 72px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ text-align: center;
+ font-feature-settings: 'liga' off;
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .form-select {
+ height: 2.5rem !important;
+ border-radius: 0px;
+ font-size: small;
+ }
+
+ .domaine_icone {
+ margin-top: 5px;
+ }
+
+ .domaine_icone_fa {
+ margin-top: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
+ .fron_search {
+ border: none;
+ font-size: medium;
+ padding-right: 5px;
+ }
+
+
+ .service1_img {
+
+ left: 0px;
+ top: 0px;
+
+ background: #D6EBE4;
+ opacity: 1;
+ border-radius: 1rem;
+ margin-top: 1rem;
+ }
+
+ .service1_title_desc {
+ /* Title + Description */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 4px;
+
+ width: 70%;
+ height: 116px;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .service1_title {
+
+
+ width: 100%;
+ height: 32px;
+ text-align: left;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ /* identical to box height, or 133% */
+
+ letter-spacing: 0.3px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .service1_desc {
+ text-align: left;
+ height: 80px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ /* or 143% */
+
+
+ /* Bold Grey */
+
+ color: #4B4B4B;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .img_service {
+ width: 100%;
+ height: 4rem;
+ border-radius: 1rem;
+ }
+
+ .forma_et_tuto {
+ width: 99%;
+ margin-left: 5px;
+ height: 80px;
+ padding-top: 10px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 48px;
+ /* identical to box height */
+
+ text-align: center;
+ letter-spacing: 1px;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ background: #F7F7F7;
+ }
+
+ .forma_et_tuto_mobile {
+ display: none;
+ }
+
+ .cta_publication {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 5px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: red;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 14px;
+ }
+
+ .cta_publication_v2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 5px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+
+ background: #53B7EB;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 14px;
+ text-decoration: none;
+ -webkit-animation: glowing 1500ms 4;
+ -moz-animation: glowing 1500ms 4;
+ -o-animation: glowing 1500ms 4;
+ animation: glowing 1500ms 4;
+
+ }
+
+ @-webkit-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -webkit-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-moz-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ -moz-box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @-o-keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+ @keyframes glowing {
+ 0% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+
+ 50% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 40px #FF0000;
+ }
+
+ 100% {
+ background-color: #53B7EB;
+ box-shadow: 0 0 3px #B20000;
+ }
+ }
+
+
+ .cta_hebergement {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 5px 5px;
+ gap: 10px;
+
+ width: 154px;
+ height: 56px;
+
+ /* Deep Blue */
+
+ background: rebeccapurple;
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ color: white;
+ font-weight: normal;
+ font-size: 14px;
+ }
+
+
+ .search_bar_2 {
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0px 1px 0px 2px;
+ gap: 72px;
+
+ width: 100%;
+ height: 10px;
+
+ border-radius: 8px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ margin-bottom: 1rem;
+ text-align: left;
+
+
+ }
+
+ .bton_ensavoir_plus {
+ border-radius: 5rem;
+ font-size: medium;
+ background: #81BC3A !important;
+ text-align: center;
+ height: 2.5rem;
+ width: 100%;
+ color: white;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-top: 10px;
+ cursor: pointer;
+ }
+
+ .bton_menu_v2 {
+ background-color: white;
+ width: 100%;
+ border: 0px;
+ text-align: left;
+ color: black;
+ letter-spacing: 2px;
+ margin: 10px;
+
+ }
+
+ .bton_menu_v2:hover {
+
+ letter-spacing: 3px;
+
+ }
+
+ .block_newletter {
+ font-size: 18px;
+ font-weight: 400;
+ width: 100%;
+ line-height: 15px;
+ margin-top: 20px;
+ }
+
+ .block_newletter_email {
+ width: 80%;
+ float: left;
+
+ }
+
+ .block_newletter_bton_ok {
+ width: 20%;
+ float: left;
+ margin-top: 10px;
+ position: relative;
+ left: -5px;
+ }
+
+ .block_newletter_bton_bton_ok {
+ height: 3rem;
+ border: solid 1px black;
+ background: #0A043C;
+ color: white;
+ width: 80%;
+
+ }
+
+ .cta_recherche_img_search_loup {
+ width: 50%;
+ margin-right: -5px;
+ }
+
+
+ .block_formation {
+ flex: 1 1 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ background-color: rgba(253, 246, 236, 0.1);
+ border-radius: 12px;
+ border: 1px solid #ecae49;
+ max-width: 400px;
+ box-sizing: border-box;
+ flex-grow: 1;
+ background: #FFF;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #E2E9FB
+ }
+
+ .block_display_flex_formation {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+
+ }
+
+
+ /* end media */
+
+
+
+
+
+ .css-1v4ccyo {
+ height: 3rem !important;
+ }
+
+ .message_hili {
+ color: #619e31;
+ font-weight: bold;
+ opacity: 0.8;
+ background: transparent;
+
+ border-radius: 5px;
+ }
+
+ .buton_ch22 {
+ border: 2px solid white;
+ background-color: transparent;
+ color: white;
+ padding: 0px;
+ font-size: 16px;
+ cursor: pointer;
+ font-size: small;
+ border-radius: 4rem;
+ width: 6rem;
+ min-width: 6rem;
+ height: 1.7rem;
+ text-align: left;
+ }
+
+ .ch_form-input {
+ border-radius: 10rem;
+ height: 3rem;
+ font-size: medium;
+ line-height: 1.5;
+ margin-bottom: 4px;
+ color: white;
+ border: 2.5px solid white;
+ background: transparent;
+ width: 5rem;
+ }
+
+ .MuiPaper-rounded {
+ top: 60px !important;
+ }
+
+ .bton_menu_v2 {
+ background-color: white;
+ width: 100%;
+ border: 0px;
+ text-align: left;
+ color: black;
+ letter-spacing: 2px;
+ margin: 10px;
+
+ }
+
+ .bton_menu_v2:hover {
+
+ letter-spacing: 3px;
+
+ }
+
+
+
+}
+
+.header_img_logo22 {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+
+ max-height: 3rem;
+}
+
+.header_menuPrincipal_left {
+ @media only screen and (max-width: 600px) {
+ display: none;
+ }
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand",
+ "Signika",
+ "sans-serif";
+ color: white;
+ cursor: pointer;
+ text-align: left;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+
+ width: 20%;
+ float: left;
+}
+
+.header_menuPrincipal_left:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+}
+
+.MuiPaper-rounded {
+ border-radius: 0px !important;
+}
+
+
+
+
+
+.iSfofc {
+ width: 90% !important;
+ margin-left: auto !important;
+ margin-right: auto !important;
+ margin-top: 0.2rem !important;
+ background: white;
+ padding-top: 0.5rem !important;
+}
+
+.dHtlYi {
+ background: #104277;
+}
+
+.bQSvsY {
+ background: white !important;
+}
+
+.MuiMenu-paper {
+ border-radius: 10px !important;
+}
+
+.MuiListItem-button {
+ background: white !important;
+}
\ No newline at end of file
diff --git a/src/components/tarif_detail_automatic_files/AdministrativeManagement.css b/src/components/tarif_detail_automatic_files/AdministrativeManagement.css
new file mode 100644
index 0000000..3854c56
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/AdministrativeManagement.css
@@ -0,0 +1,68 @@
+.administrative-management {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ max-width: 1251px;
+ border: 1px solid #ecf1fc;
+ background-color: #ffffff;
+}
+
+.header {
+ display: flex;
+ padding: 20px 32px;
+ background-color: #ecf1fc;
+ height: 80px;
+ align-items: center;
+}
+
+.header h2 {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ color: #16274f;
+ margin: 0;
+}
+
+.features-container {
+ display: flex;
+ flex-direction: column;
+}
+
+.feature-row {
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 32px;
+ min-height: 80px;
+ border-bottom: 1px solid #ecf1fc;
+ align-items: center;
+}
+
+.feature-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #171717;
+}
+
+.check-icon {
+ width: 24px;
+ height: 24px;
+}
+
+.check-icon img {
+ width: 100%;
+ height: 100%;
+}
+
+@media (max-width: 768px) {
+ .feature-row {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .check-icon {
+ margin-top: 10px;
+ }
+}
+
diff --git a/src/components/tarif_detail_automatic_files/AdministrativeManagement.js b/src/components/tarif_detail_automatic_files/AdministrativeManagement.js
new file mode 100644
index 0000000..cb39895
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/AdministrativeManagement.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import './AdministrativeManagement.css';
+
+const AdministrativeManagement = ({ style }) => {
+ const features = [
+ 'Publication catalogue formations (intranet / API)',
+ 'Gestion des Inscriptions\n(mise en attente, motif annulation, etc)',
+ 'Gestion des Sessions (planifiée, à la demande)',
+ 'Gestion avis participants',
+ 'Gestion des employés et du matériel pédagogique',
+ 'Émargement électronique',
+ 'Gestion des agendas & réservation de matériel (salles, projecteurs, etc)',
+ 'Personnalisation et versionning des documents (convention, convocation, ...)',
+ 'Edition automatique des document liés à la formation (Convention, convocation, Programme…)',
+ 'Gestion automatique et manuelle des séquences\nde formations',
+ 'Gestion des absences'
+ ];
+
+ return (
+
+
+
Gestion Administrative & Pédagogique
+
+
+
+ {features.map((feature, index) => (
+
+
{feature}
+
+
+
+
+ ))}
+
+
+ );
+};
+
+AdministrativeManagement.defaultProps = {
+ style: {}
+};
+
+export default AdministrativeManagement;
+
diff --git a/src/components/tarif_detail_automatic_files/ClientRelationManagement.css b/src/components/tarif_detail_automatic_files/ClientRelationManagement.css
new file mode 100644
index 0000000..255096a
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/ClientRelationManagement.css
@@ -0,0 +1,112 @@
+.crm-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-width: 1251px;
+ background-color: #ffffff;
+}
+
+.header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 32px;
+ background-color: #ecf1fc;
+ border: 1px solid #ecf1fc;
+ height: 40px;
+}
+
+.header h2 {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ color: #16274f;
+ margin: 0;
+}
+
+.arrow-icon {
+ width: 24px;
+ height: 24px;
+}
+
+.content-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.features-column {
+ width: 100%;
+ max-width: 500px;
+ display: flex;
+ flex-direction: column;
+}
+
+.feature-item {
+ height: 40px;
+ padding: 20px 32px;
+ border: 1px solid #ecf1fc;
+ font-family: 'Inter', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ color: #171717;
+ line-height: 24px;
+ display: flex;
+ align-items: center;
+}
+
+.pricing-column {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #ecf1fc;
+ min-width: 250px;
+}
+
+.price-header {
+ height: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-bottom: 1px solid #ecf1fc;
+}
+
+.price-header.highlight {
+ background-color: #ecf1fc;
+}
+
+.price-image {
+ height: 40px;
+ width: 100%;
+ object-fit: contain;
+}
+
+.price-content {
+ height: 356px;
+ padding: 20px 123px;
+ display: flex;
+ flex-direction: column;
+}
+
+.check-item {
+ display: flex;
+ justify-content: center;
+ margin-top: 186px;
+}
+
+.check-circle {
+ width: 24px;
+ height: 24px;
+ border-radius: 100%;
+ background-color: #0aa690;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.check-icon {
+ width: 16px;
+ height: 16px;
+}
+
diff --git a/src/components/tarif_detail_automatic_files/ClientRelationManagement.js b/src/components/tarif_detail_automatic_files/ClientRelationManagement.js
new file mode 100644
index 0000000..c979eec
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/ClientRelationManagement.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import './ClientRelationManagement.css';
+
+const ClientRelationManagement = ({ style }) => {
+ return (
+
+
+
Gestion relation client (CRM)
+
+
+
+
+
+
Gestion clients & Contacts
+
Affectation et Suivi tâches
+
Catalogue prix clients
+
Devis & Commandes (envoi électronique)
+
Facturation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+ClientRelationManagement.defaultProps = {
+ style: {}
+};
+
+export default ClientRelationManagement;
+
+
\ No newline at end of file
diff --git a/src/components/tarif_detail_automatic_files/Marketplace.css b/src/components/tarif_detail_automatic_files/Marketplace.css
new file mode 100644
index 0000000..bc99a9a
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/Marketplace.css
@@ -0,0 +1,81 @@
+.marketplace {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-width: 320px;
+ max-width: 1251px;
+ border: 1px solid #ecf1fc;
+ box-sizing: border-box;
+}
+
+.title-section {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 32px;
+ background-color: #ecf1fc;
+ height: 80px;
+}
+
+.title-section h2 {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ color: #16274f;
+ margin: 0;
+}
+
+.content-section {
+ display: flex;
+ flex-direction: column;
+}
+
+.text-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 32px;
+ min-height: 80px;
+ border-bottom: 1px solid #ecf1fc;
+}
+
+.text-row p {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #171717;
+ margin: 0;
+ flex-grow: 1;
+}
+
+.check-icon, .add-icon {
+ width: 24px;
+ height: 24px;
+ border-radius: 100%;
+ background-color: #0aa690;
+ padding: 4px;
+ box-sizing: border-box;
+ margin-top: 10px;
+}
+
+.add-icon {
+ background-color: #b7b7b7;
+}
+
+@media (max-width: 768px) {
+ .marketplace {
+ padding: 10px;
+ }
+
+ .title-section {
+ padding: 10px 16px;
+ }
+
+ .text-row {
+ padding: 10px 16px;
+ }
+}
+
diff --git a/src/components/tarif_detail_automatic_files/Marketplace.js b/src/components/tarif_detail_automatic_files/Marketplace.js
new file mode 100644
index 0000000..bb3b7eb
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/Marketplace.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import './Marketplace.css';
+
+const Marketplace = ({ style }) => {
+ return (
+
+
+
Marketplace
+
+
+
+
+
+
Mise en ligne de votre formation (Description, Objectif, Programme, etc)
+
+
+
+
+
Mise en forme des textes selon votre souhait
+
+
+
+
+
Définition du pays et la région de publication
+
+
+
+
+
Import/Export Excel
+
+
+
+
+
Gestion des prix : Remise client / Tout public par période.
+
+
+
+
+
Ajout de vos propres images pour communiquer sur votre structure et votre marque.
+
+
+
+
+
Affichage de votre logo à côté de la formation
+
+
+
+
+
Affichage de votre bannière en grand sur la page détaillée.
+
+
+
+
+
Génération automatique de leads
+
+
+
+
+
Consultation des appels d'offre de formation pour manifestation d'intérêt.
+
+
+
+
+
Publication d'un appel d'offre de formation et gestion des réponses.
+
+
+
+
+ );
+};
+
+Marketplace.defaultProps = {
+ style: {}
+};
+
+export default Marketplace;
+
diff --git a/src/components/tarif_detail_automatic_files/PricingLayout.js b/src/components/tarif_detail_automatic_files/PricingLayout.js
new file mode 100644
index 0000000..cc6aa65
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/PricingLayout.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import AdministrativeManagement from './AdministrativeManagement';
+import ClientRelationManagement from './ClientRelationManagement';
+import TrainingHosting from './TrainingHosting';
+import Marketplace from './Marketplace';
+
+const PricingLayout = () => {
+ return (
+
+ );
+};
+
+const styles = {
+ container: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ alignItems: 'center',
+ gap: '40px',
+ },
+ section: {
+ display: 'flex',
+ flexDirection: 'row',
+ width: '30%',
+ height: 'auto',
+ backgroundColor: '#ffffff',
+ },
+ component: {
+ flexGrow: 1,
+ height: 'auto',
+ },
+};
+
+export default PricingLayout;
+
diff --git a/src/components/tarif_detail_automatic_files/TrainingHosting.css b/src/components/tarif_detail_automatic_files/TrainingHosting.css
new file mode 100644
index 0000000..4c0e580
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/TrainingHosting.css
@@ -0,0 +1,128 @@
+.training-hosting {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ min-width: 1251px;
+ background-color: #ffffff;
+ border: 1px solid #ecf1fc;
+ overflow-x: auto;
+}
+
+.title-column {
+ width: 500px;
+ display: flex;
+ flex-direction: column;
+}
+
+.header-row {
+ height: 80px;
+ padding: 20px 32px;
+ background-color: #ecf1fc;
+ display: flex;
+ align-items: center;
+}
+
+.header-text {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ color: #16274f;
+}
+
+.content-row {
+ height: 80px;
+ padding: 20px 32px;
+ border-bottom: 1px solid #ecf1fc;
+ display: flex;
+ align-items: center;
+}
+
+.content-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #171717;
+}
+
+.price-column {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ border-left: 1px solid #ecf1fc;
+}
+
+.price-header {
+ height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #ffffff;
+ position: relative;
+}
+
+.price-image {
+ max-width: 100%;
+ height: auto;
+}
+
+.dropdown-container {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.dropdown-icon {
+ width: 24px;
+ height: 24px;
+}
+
+.price-content {
+ height: 80px;
+ padding: 20px 123px;
+ border-bottom: 1px solid #ecf1fc;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.circle-container {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.gray-circle {
+ width: 24px;
+ height: 24px;
+ background-color: #b7b7b7;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.green-circle {
+ width: 24px;
+ height: 24px;
+ background-color: #0aa690;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.icon {
+ width: 28.28px;
+ height: 28.28px;
+}
+
+.check-icon {
+ width: 16px;
+ height: 16px;
+}
+
diff --git a/src/components/tarif_detail_automatic_files/TrainingHosting.js b/src/components/tarif_detail_automatic_files/TrainingHosting.js
new file mode 100644
index 0000000..d67a258
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/TrainingHosting.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import './TrainingHosting.css';
+
+const TrainingHosting = ({ style }) => {
+ return (
+
+
+
+ Hébergement de formations (LMS)
+
+
+
+ Intranet personnalisé avec mise en place d'un site web (intranet) personnalisé.
+
+
+
+ Nom de domaine personnalisé
+
+
+
+ Personnalisation de la charte graphique
+ (couleurs & bannière)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+TrainingHosting.defaultProps = {
+ style: {}
+};
+
+export default TrainingHosting;
+
diff --git a/src/components/tarif_detail_automatic_files/styles.css b/src/components/tarif_detail_automatic_files/styles.css
new file mode 100644
index 0000000..9659d76
--- /dev/null
+++ b/src/components/tarif_detail_automatic_files/styles.css
@@ -0,0 +1,3 @@
+/* Add any additional styling here if needed */
+
+
diff --git a/src/components/tarif_head_automatic_files/PricingDescription.css b/src/components/tarif_head_automatic_files/PricingDescription.css
new file mode 100644
index 0000000..a7b951e
--- /dev/null
+++ b/src/components/tarif_head_automatic_files/PricingDescription.css
@@ -0,0 +1,662 @@
+.tarif_head_automatic_files {
+
+
+
+ @media (max-width: 600px) {
+
+ .pricing-description {
+ padding: 16px;
+ }
+
+ .pricing-title {
+ font-size: 20px;
+ }
+
+ .pricing-subtitle {
+ font-size: 12px;
+ }
+
+ .block_1 {
+ width: 100%;
+
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ padding-bottom: 3rem;
+ }
+
+
+ .block_1_bis {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ height: 50px;
+ text-align: left;
+ background-color: #ecf1fc;
+ padding-left: 5px;
+ }
+
+
+
+ .block_2 {
+ display: none;
+ }
+
+
+
+ .block_2_bis {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ width: 100%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ width: 350px;
+ margin-bottom: 2rem;
+ }
+
+
+
+ .block_3 {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ width: 100%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ width: 350px;
+ margin-bottom: 2rem;
+ }
+
+
+ .fonctionnalite_h1 {
+ background-color: #ecf1fc;
+ color: #16274f;
+ /* font-family: 'DM Sans', sans-serif;*/
+ font-size: 18px;
+ font-weight: 600;
+ cursor: default;
+ padding-top: 5px;
+
+ }
+
+
+
+ .detail_fonctionnalite_line {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ }
+
+
+
+ .detail_fonctionnalite_line_1 {
+ flex-grow: 1;
+ width: 40%;
+ /*padding: 20px 32px;*/
+ background-color: #ffffff;
+ float: left;
+ text-align: left;
+ }
+
+
+ .detail_fonctionnalite_line_1_desc {
+ font-family: Inter, sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ color: #4b5162;
+
+ background-color: #ffffff;
+ float: left;
+ border: 1px solid #ecf1fc;
+ width: 100%;
+ padding: 5px;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_2 {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 2;
+ background-color: #ffffff;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_1_tick {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 2px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ }
+
+ .coupure_fin_fonctionnalite {
+ width: 100%;
+ float: left;
+ height: 2rem;
+ border: none;
+ }
+
+ }
+
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .pricing-description {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 32px;
+ background-color: #ffffff;
+ /* border: 1px solid #ecf1fc;*/
+ max-width: 500px;
+ width: 100%;
+ box-sizing: border-box;
+ margin-top: 5rem;
+ }
+
+ .pricing-title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ color: #16274f;
+ margin: 0 0 8px 0;
+ }
+
+ .pricing-subtitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: #4b5162;
+ margin: 0;
+ }
+
+ .block_1 {
+ width: 100%;
+ padding-top: 140px;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ }
+
+
+ .block_1_bis {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ height: 50px;
+ text-align: left;
+ background-color: #ecf1fc;
+ padding-left: 5px;
+ }
+
+
+
+ .block_2 {
+ flex-grow: 1;
+ width: 40%;
+ padding: 20px 32px;
+ background-color: #ffffff;
+ float: left;
+ }
+
+
+
+ .block_2_bis {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 2px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ }
+
+
+
+ .block_3 {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 2px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ margin-top: -50px;
+ /* height: 380px;*/
+ }
+
+
+ .fonctionnalite_h1 {
+ background-color: #ecf1fc;
+ color: #16274f;
+ /* font-family: 'DM Sans', sans-serif;*/
+ font-size: 20px;
+ font-weight: 600;
+ cursor: default;
+ padding-top: 10px;
+
+ }
+
+
+
+ .detail_fonctionnalite_line {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ }
+
+
+
+ .detail_fonctionnalite_line_1 {
+ flex-grow: 1;
+ width: 40%;
+ /*padding: 20px 32px;*/
+ background-color: #ffffff;
+ float: left;
+ text-align: left;
+ }
+
+
+ .detail_fonctionnalite_line_1_desc {
+ font-family: Inter, sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ color: #4b5162;
+
+ padding: 20px 28px;
+ background-color: #ffffff;
+ float: left;
+ border: 1px solid #ecf1fc;
+ width: 100%;
+ padding: 23px 28px;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_2 {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 2;
+ background-color: #ffffff;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_1_tick {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ }
+
+ .coupure_fin_fonctionnalite {
+ width: 100%;
+ float: left;
+ height: 2rem;
+ border: none;
+ }
+
+
+
+ }
+
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .pricing-description {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 32px;
+ background-color: #ffffff;
+ /* border: 1px solid #ecf1fc;*/
+ max-width: 500px;
+ width: 100%;
+ box-sizing: border-box;
+ margin-top: 5rem;
+ }
+
+ .pricing-title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ color: #16274f;
+ margin: 0 0 8px 0;
+ }
+
+ .pricing-subtitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: #4b5162;
+ margin: 0;
+ }
+
+ .block_1 {
+ width: 100%;
+ padding-top: 140px;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ }
+
+
+ .block_1_bis {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ height: 50px;
+ text-align: left;
+ background-color: #ecf1fc;
+ padding-left: 5px;
+ }
+
+
+
+ .block_2 {
+ flex-grow: 1;
+ width: 40%;
+ padding: 20px 32px;
+ background-color: #ffffff;
+ float: left;
+ }
+
+
+
+ .block_2_bis {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 2px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ }
+
+
+
+ .block_3 {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 2px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ margin-top: -50px;
+ /* height: 380px;*/
+ }
+
+
+ .fonctionnalite_h1 {
+ background-color: #ecf1fc;
+ color: #16274f;
+ /* font-family: 'DM Sans', sans-serif;*/
+ font-size: 20px;
+ font-weight: 600;
+ cursor: default;
+ padding-top: 10px;
+
+ }
+
+
+
+ .detail_fonctionnalite_line {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ }
+
+
+
+ .detail_fonctionnalite_line_1 {
+ flex-grow: 1;
+ width: 40%;
+ /*padding: 20px 32px;*/
+ background-color: #ffffff;
+ float: left;
+ text-align: left;
+ }
+
+
+ .detail_fonctionnalite_line_1_desc {
+ font-family: Inter, sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ color: #4b5162;
+
+ padding: 20px 28px;
+ background-color: #ffffff;
+ float: left;
+ border: 1px solid #ecf1fc;
+ width: 100%;
+ padding: 23px 28px;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_2 {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 2;
+ background-color: #ffffff;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_1_tick {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ }
+
+ .coupure_fin_fonctionnalite {
+ width: 100%;
+ float: left;
+ height: 2rem;
+ border: none;
+ }
+
+
+
+ }
+
+
+ @media only screen and (min-width: 1200px) {
+ .pricing-description {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 32px;
+ background-color: #ffffff;
+ /* border: 1px solid #ecf1fc;*/
+ max-width: 500px;
+ width: 100%;
+ box-sizing: border-box;
+ margin-top: 5rem;
+ }
+
+ .pricing-title {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ color: #16274f;
+ margin: 0 0 8px 0;
+ }
+
+ .pricing-subtitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: #4b5162;
+ margin: 0;
+ }
+
+ .block_1 {
+ width: 100%;
+ padding-top: 140px;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ }
+
+
+ .block_1_bis {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ height: 50px;
+ text-align: left;
+ background-color: #ecf1fc;
+ padding-left: 5px;
+ }
+
+
+
+ .block_2 {
+ flex-grow: 1;
+ width: 40%;
+ padding: 20px 32px;
+ background-color: #ffffff;
+ float: left;
+ }
+
+
+
+ .block_2_bis {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ }
+
+
+
+ .block_3 {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ margin-top: -50px;
+ /* height: 380px;*/
+ }
+
+
+ .fonctionnalite_h1 {
+ background-color: #ecf1fc;
+ color: #16274f;
+ /* font-family: 'DM Sans', sans-serif;*/
+ font-size: 20px;
+ font-weight: 600;
+ cursor: default;
+ padding-top: 10px;
+
+ }
+
+
+
+ .detail_fonctionnalite_line {
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 4px;
+ float: left;
+ }
+
+
+
+ .detail_fonctionnalite_line_1 {
+ flex-grow: 1;
+ width: 40%;
+ /*padding: 20px 32px;*/
+ background-color: #ffffff;
+ float: left;
+ text-align: left;
+ }
+
+
+ .detail_fonctionnalite_line_1_desc {
+ font-family: Inter, sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ color: #4b5162;
+
+ padding: 20px 28px;
+ background-color: #ffffff;
+ float: left;
+ border: 1px solid #ecf1fc;
+ width: 100%;
+ padding: 23px 28px;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_2 {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 2;
+ background-color: #ffffff;
+ height: 100px;
+ }
+
+
+
+ .detail_fonctionnalite_line_1_tick {
+ flex-direction: row;
+ flex-grow: 2;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ width: 20%;
+ float: left;
+ border: 1px solid #ecf1fc;
+ }
+
+ .coupure_fin_fonctionnalite {
+ width: 100%;
+ float: left;
+ height: 2rem;
+ border: none;
+ }
+
+
+
+ }
+
+
+
+}
\ No newline at end of file
diff --git a/src/components/tarif_head_automatic_files/PricingDescription.js b/src/components/tarif_head_automatic_files/PricingDescription.js
new file mode 100644
index 0000000..f2c5f09
--- /dev/null
+++ b/src/components/tarif_head_automatic_files/PricingDescription.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import './PricingDescription.css';
+
+const PricingDescription = ({ title, subtitle }) => {
+ return (
+
+ );
+};
+
+PricingDescription.defaultProps = {
+ title: 'Comparer nos plans',
+ subtitle: 'Choisissez votre espace de travail en fonction de votre organisation.'
+};
+
+export default PricingDescription;
+
diff --git a/src/components/tarif_head_automatic_files/PricingLayout.js b/src/components/tarif_head_automatic_files/PricingLayout.js
new file mode 100644
index 0000000..c179ab8
--- /dev/null
+++ b/src/components/tarif_head_automatic_files/PricingLayout.js
@@ -0,0 +1,423 @@
+import React from 'react';
+import PricingPlanCard from './PricingPlanCard';
+import PricingDescription from './PricingDescription';
+import New_C_Tatif_Detail_Section_Head from "../tarif_detail_automatic_files/PricingLayout";
+
+import check_img_check_17 from "../../img_new_design_2025/check_17.png";
+
+import check_ko_fond_gris from "../../img_new_design_2025/check_ko_fond_gris.png";
+
+
+
+import { Button, FormGroup, Label, Input } from "reactstrap";
+
+const PricingLayout = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ LE PLUS POPULAIRE
+
+
+
+
+
+
+
+
+
+
+ {/*** Gestion admin */}
+
+
Gestion Administrative & Pédagogique
+
+
+
+ Publication catalogue formations (intranet / API)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Gestion des Inscriptions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Gestion des Sessions (planifiée, à la demande)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*** CRM */}
+
+
Gestion relation client (CRM)
+
+
+
+
+ Intranet Client
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Gestion clients & Contacts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Affectation et Suivi tâches
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Devis & Commandes (envoi électronique)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/** E-Learning LSM */}
+
+
Hébergement de formations (LMS)
+
+
+
+ Plate-forme de E-learning personnalisée (nom domaine, charte graphique)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Echange prof / apprenant
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Espace enseignant
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Espace apprenant
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*** MarketPlace */}
+
+
Marketplace
+
+
+
+ Mise en ligne de votre formation (Description, Objectif, Programme, etc).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Personnalition du prix / Remise client / Tout public par période
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Génération automatique de leads
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PricingLayout;
+
diff --git a/src/components/tarif_head_automatic_files/PricingPlanCard.css b/src/components/tarif_head_automatic_files/PricingPlanCard.css
new file mode 100644
index 0000000..84c4fd6
--- /dev/null
+++ b/src/components/tarif_head_automatic_files/PricingPlanCard.css
@@ -0,0 +1,580 @@
+.tarif_head_automatic_files {
+
+ @media (max-width: 768px) {
+ .pricing-card {
+ min-width: 100%;
+ max-width: 100%;
+ }
+
+
+ .popular-badge {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #daf2ee;
+ padding: 10px;
+ margin: -20px -28px 20px;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .pricing-content {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ flex-grow: 1;
+ }
+
+ .plan-header {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .plan-title {
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+ .plan-subtitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #4b5162;
+ margin: 0;
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .price-wrapper {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ letter-spacing: -0.24px;
+ line-height: 24px;
+ color: #16274f;
+ }
+
+ .highlighted .price,
+ .highlighted .price-period,
+ .highlighted .sessions {
+ color: #0aa690;
+
+ }
+
+
+ .mysy_highlighted {
+ margin-top: 0px;
+ }
+
+
+ .price-period {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .sessions {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .choose-plan-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 10px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ cursor: pointer;
+ margin-top: auto;
+ }
+
+ .choose-plan-btn span {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+ .position_detail_price{
+ margin-top: -20px;
+ margin-bottom: 5rem;
+ width: 100%;
+ float: left;
+ }
+
+
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+ .pricing-card {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 2px;
+ background-color: #ffffff;
+ /* border: 1px solid #ecf1fc;*/
+ /* min-width: 200px;*/
+ max-width: 300px;
+ flex: 1;
+ position: relative;
+ box-sizing: border-box;
+ }
+
+ .popular-badge {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #daf2ee;
+ padding: 10px;
+ margin: -20px -2px 0px;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .pricing-content {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ flex-grow: 1;
+ }
+
+ .plan-header {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .plan-title {
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+ .plan-subtitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #4b5162;
+ margin: 0;
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .price-wrapper {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ letter-spacing: -0.24px;
+ line-height: 24px;
+ color: #16274f;
+ }
+
+ .highlighted .price,
+ .highlighted .price-period,
+ .highlighted .sessions {
+ color: #0aa690;
+
+ }
+
+
+ .mysy_highlighted {
+ margin-top: 0px;
+ }
+
+
+ .price-period {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .sessions {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .choose-plan-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 2px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ cursor: pointer;
+ margin-top: auto;
+ }
+
+ .choose-plan-btn span {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 2px;
+ }
+
+
+ .position_detail_price{
+ margin-top: -20px;
+ margin-bottom: 5rem;
+ width: 100%;
+ float: left;
+ }
+
+
+ }
+
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+
+ .pricing-card {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 2px;
+ background-color: #ffffff;
+ /* border: 1px solid #ecf1fc;*/
+ /* min-width: 200px;*/
+ max-width: 300px;
+ flex: 1;
+ position: relative;
+ box-sizing: border-box;
+ }
+
+ .popular-badge {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #daf2ee;
+ padding: 10px;
+ margin: -20px -2px 0px;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .pricing-content {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ flex-grow: 1;
+ }
+
+ .plan-header {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .plan-title {
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+ .plan-subtitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #4b5162;
+ margin: 0;
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .price-wrapper {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ letter-spacing: -0.24px;
+ line-height: 24px;
+ color: #16274f;
+ }
+
+ .highlighted .price,
+ .highlighted .price-period,
+ .highlighted .sessions {
+ color: #0aa690;
+
+ }
+
+
+ .mysy_highlighted {
+ margin-top: 10px;
+ }
+
+
+ .price-period {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .sessions {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .choose-plan-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 2px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ cursor: pointer;
+ margin-top: auto;
+ }
+
+ .choose-plan-btn span {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 2px;
+ }
+
+
+ .position_detail_price{
+ margin-top: -20px;
+ margin-bottom: 5rem;
+ width: 100%;
+ float: left;
+ }
+
+
+ }
+
+
+
+ @media only screen and (min-width: 1200px) {
+
+ .pricing-card {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 28px;
+ background-color: #ffffff;
+ /* border: 1px solid #ecf1fc;*/
+ min-width: 200px;
+ max-width: 300px;
+ flex: 1;
+ position: relative;
+ box-sizing: border-box;
+ }
+
+ .popular-badge {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #daf2ee;
+ padding: 10px;
+ margin: -20px -28px 20px;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .pricing-content {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ flex-grow: 1;
+ }
+
+ .plan-header {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .plan-title {
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 24px;
+ color: #16274f;
+ margin: 0;
+ }
+
+ .plan-subtitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #4b5162;
+ margin: 0;
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ }
+
+ .price-wrapper {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 24px;
+ letter-spacing: -0.24px;
+ line-height: 24px;
+ color: #16274f;
+ }
+
+ .highlighted .price,
+ .highlighted .price-period,
+ .highlighted .sessions {
+ color: #0aa690;
+
+ }
+
+
+ .mysy_highlighted {
+ margin-top: 28px;
+ }
+
+
+ .price-period {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .sessions {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 12px;
+ color: #16274f;
+ }
+
+ .choose-plan-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 10px;
+ border-radius: 200px;
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ cursor: pointer;
+ margin-top: auto;
+ }
+
+ .choose-plan-btn span {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ padding: 0 8px;
+ }
+
+
+ .position_detail_price{
+ margin-top: -10px;
+ margin-bottom: 5rem;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/tarif_head_automatic_files/PricingPlanCard.js b/src/components/tarif_head_automatic_files/PricingPlanCard.js
new file mode 100644
index 0000000..699d075
--- /dev/null
+++ b/src/components/tarif_head_automatic_files/PricingPlanCard.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import './PricingPlanCard.css';
+
+const PricingPlanCard = ({
+ isPopular = false,
+ title = "Basic",
+ price = "9.99",
+ sessions = "Jusqu'Ã 25 Sessions/an",
+ isHighlighted = false,
+
+}) => {
+ return (
+
+ {/*{isPopular &&
+
+ {isPopular && (
+
+ LE PLUS POPULAIRE
+
+ )}
+
+
+
{title}
+
Sans engagement
+
+
+
+
+ {price} €
+ par mois
+
+
{sessions}
+
+
+
+ Choisir ce plan
+
+
+
+
}*/}
+
+ {!isPopular &&
+
+
+
+
+
{title}
+
Sans engagement
+
+
+
+
+ {price} €
+ par mois
+
+
{sessions}
+
+
+
{
+ e.preventDefault();
+ window.location.href = "/Partner";
+ }}>
+ Choisir ce plan
+
+
+
+
}
+
+ );
+};
+
+export default PricingPlanCard;
+
diff --git a/src/components/tarif_section_automatic_files/PriceCard.css b/src/components/tarif_section_automatic_files/PriceCard.css
new file mode 100644
index 0000000..afc3b7b
--- /dev/null
+++ b/src/components/tarif_section_automatic_files/PriceCard.css
@@ -0,0 +1,825 @@
+.pricecard {
+
+ @media (max-width: 600px) {
+
+ width: 100%;
+
+ .popular-badge {
+ background-color: #e7f6f4;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #0aa690;
+ border-radius: 8px 8px 0 0;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .price-card {
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ background-color: #fff;
+ border-radius: 8px;
+ border: 1px solid #c7c9ce;
+ gap: 24px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .text-content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .plan-title {
+ text-transform: uppercase;
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ gap: 4px;
+ margin-top: 18px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 48px;
+ line-height: 52px;
+ letter-spacing: -0.48px;
+ }
+
+ .per-month {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ margin-bottom: 8px;
+ }
+
+ .engagement {
+ margin-top: 20px;
+ text-transform: uppercase;
+ font-family: DM Sans;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+
+ }
+
+ .start-button {
+ width: 100%;
+ padding: 12px 20px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ cursor: pointer;
+ border: 1px solid;
+ transition: background-color 0.3s ease;
+ }
+
+ .start-button:hover {
+ background-color: #f0f0f0;
+ }
+
+ .divider {
+ width: 100%;
+ height: 1px;
+ background-color: #c7c9ce;
+ }
+
+ .features-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .feature-item {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ border: none;
+ }
+
+ .check-icon {
+ width: 24px;
+ height: 24px;
+ background: #fff;
+ }
+
+ .feature-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #16274f;
+ }
+
+
+ .block_1 {
+ width: 100%;
+ float: left;
+ margin-top: 3rem;
+
+ }
+
+ .block_2 {
+ width: 90%;
+ margin: auto;
+ margin-bottom: auto;
+ margin-bottom: 2rem;
+ }
+
+ .block_2_populaire {
+
+ width: 90%;
+ margin: auto;
+ margin-bottom: auto;
+ margin-bottom: 2rem;
+
+ }
+
+
+ .entete_pricingsection_1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding-top: 64px;
+ padding-right: 30px;
+ padding-left: 30px;
+ box-sizing: border-box;
+ }
+
+
+
+ .entete_pricingsection_H1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 35px;
+ letter-spacing: -0.48px;
+ line-height: 40px;
+ text-align: center;
+ color: #16274f;
+ margin-bottom: 2rem;
+ margin-top: 1rem;
+ }
+
+ .entete_pricingsection_H1_sous_text {
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ text-align: center;
+ color: #4B5162;
+
+ }
+
+
+
+ .price-card-wrapper {
+ min-width: 100%;
+ margin: 0;
+ }
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+ width: 90%;
+ margin-left: 5%;
+ margin-bottom: 2rem;
+
+
+ .price-card-wrapper {
+ flex: 1;
+ min-width: 210px;
+ display: flex;
+ flex-direction: column;
+ margin: 0 12px;
+ }
+
+ .popular-badge {
+ background-color: #e7f6f4;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #0aa690;
+ border-radius: 8px 8px 0 0;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .price-card {
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ background-color: #fff;
+ border-radius: 8px;
+ border: 1px solid #c7c9ce;
+ gap: 24px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .text-content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .plan-title {
+ text-transform: uppercase;
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ gap: 4px;
+ margin-top: 18px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 52px;
+ letter-spacing: -0.48px;
+ }
+
+ .per-month {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ margin-bottom: 8px;
+ }
+
+ .engagement {
+ margin-top: 20px;
+ text-transform: uppercase;
+ font-family: DM Sans;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+
+ }
+
+ .start-button {
+ width: 100%;
+ padding: 12px 2px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 122%;
+ cursor: pointer;
+ border: 1px solid;
+ transition: background-color 0.3s ease;
+ }
+
+ .start-button:hover {
+ background-color: #f0f0f0;
+ }
+
+ .divider {
+ width: 100%;
+ height: 1px;
+ background-color: #c7c9ce;
+ }
+
+ .features-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .feature-item {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ border: none;
+ padding: 2px;
+ }
+
+ .check-icon {
+ width: 24px;
+ height: 24px;
+ background: #fff;
+ }
+
+ .feature-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #16274f;
+ text-align: left;
+ }
+
+
+ .block_1 {
+ width: 100%;
+ float: left;
+ margin-top: 3rem;
+
+ }
+
+ .block_2 {
+ float: left;
+ width: 30%;
+ }
+
+ .block_2_populaire {
+ float: left;
+ width: 30%;
+ margin-top: -50px;
+
+ }
+
+
+ .entete_pricingsection_1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding-top: 64px;
+ padding-right: 64px;
+ padding-left: 64px;
+ box-sizing: border-box;
+ }
+
+
+
+ .entete_pricingsection_H1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ letter-spacing: -0.48px;
+ line-height: 52px;
+ text-align: center;
+ color: #16274f;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+
+ .entete_pricingsection_H1_sous_text {
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ text-align: center;
+ color: #4B5162;
+ margin-bottom: 2rem;
+ }
+
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+
+ width: 90%;
+ margin-left: 5%;
+ margin-bottom: 2rem;
+
+
+ .price-card-wrapper {
+ flex: 1;
+ min-width: 250px;
+ display: flex;
+ flex-direction: column;
+ margin: 0 12px;
+ }
+
+ .popular-badge {
+ background-color: #e7f6f4;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #0aa690;
+ border-radius: 8px 8px 0 0;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .price-card {
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ background-color: #fff;
+ border-radius: 8px;
+ border: 1px solid #c7c9ce;
+ gap: 24px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .text-content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .plan-title {
+ text-transform: uppercase;
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ gap: 4px;
+ margin-top: 18px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 52px;
+ letter-spacing: -0.48px;
+ }
+
+ .per-month {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ margin-bottom: 8px;
+ }
+
+ .engagement {
+ margin-top: 20px;
+ text-transform: uppercase;
+ font-family: DM Sans;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+
+ }
+
+ .start-button {
+ width: 100%;
+ padding: 12px 20px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ cursor: pointer;
+ border: 1px solid;
+ transition: background-color 0.3s ease;
+ }
+
+ .start-button:hover {
+ background-color: #f0f0f0;
+ }
+
+ .divider {
+ width: 100%;
+ height: 1px;
+ background-color: #c7c9ce;
+ }
+
+ .features-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .feature-item {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ border: none;
+ padding: 2px;
+ }
+
+ .check-icon {
+ width: 24px;
+ height: 24px;
+ background: #fff;
+ }
+
+ .feature-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #16274f;
+ text-align: left;
+ }
+
+
+ .block_1 {
+ width: 100%;
+ float: left;
+ margin-top: 3rem;
+
+ }
+
+ .block_2 {
+ float: left;
+ width: 30%;
+ }
+
+ .block_2_populaire {
+ float: left;
+ width: 30%;
+ margin-top: -50px;
+
+ }
+
+
+ .entete_pricingsection_1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding-top: 64px;
+ padding-right: 64px;
+ padding-left: 64px;
+ box-sizing: border-box;
+ }
+
+
+
+ .entete_pricingsection_H1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 40px;
+ letter-spacing: -0.48px;
+ line-height: 52px;
+ text-align: center;
+ color: #16274f;
+ margin-bottom: 2rem;
+ }
+
+ .entete_pricingsection_H1_sous_text {
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ text-align: center;
+ color: #4B5162;
+ margin-bottom: 2rem;
+ }
+
+ }
+
+
+ @media only screen and (min-width: 1200px) {
+ width: 90%;
+ margin-left: 5%;
+ margin-bottom: 2rem;
+
+
+ .price-card-wrapper {
+ flex: 1;
+ min-width: 250px;
+ display: flex;
+ flex-direction: column;
+ margin: 0 12px;
+ }
+
+ .popular-badge {
+ background-color: #e7f6f4;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #0aa690;
+ border-radius: 8px 8px 0 0;
+ }
+
+ .popular-badge span {
+ color: #0aa690;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ .price-card {
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ background-color: #fff;
+ border-radius: 8px;
+ border: 1px solid #c7c9ce;
+ gap: 24px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .text-content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .plan-title {
+ text-transform: uppercase;
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+ }
+
+ .price-container {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ gap: 4px;
+ margin-top: 18px;
+ }
+
+ .price {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 48px;
+ line-height: 52px;
+ letter-spacing: -0.48px;
+ }
+
+ .per-month {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ margin-bottom: 8px;
+ }
+
+ .engagement {
+ margin-top: 20px;
+ text-transform: uppercase;
+ font-family: DM Sans;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ text-align: left;
+ color: rgb(22, 39, 79);
+
+ }
+
+ .start-button {
+ width: 100%;
+ padding: 12px 20px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 122%;
+ cursor: pointer;
+ border: 1px solid;
+ transition: background-color 0.3s ease;
+ }
+
+ .start-button:hover {
+ background-color: #f0f0f0;
+ }
+
+ .divider {
+ width: 100%;
+ height: 1px;
+ background-color: #c7c9ce;
+ }
+
+ .features-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .feature-item {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ border: none;
+ }
+
+ .check-icon {
+ width: 24px;
+ height: 24px;
+ background: #fff;
+ }
+
+ .feature-text {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #16274f;
+ text-align: left;
+ }
+
+
+ .block_1 {
+ width: 100%;
+ float: left;
+ margin-top: 3rem;
+
+ }
+
+ .block_2 {
+ float: left;
+ width: 30%;
+ }
+
+ .block_2_populaire {
+ float: left;
+ width: 30%;
+ margin-top: -50px;
+
+ }
+
+
+ .entete_pricingsection_1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding-top: 64px;
+ padding-right: 64px;
+ padding-left: 64px;
+ box-sizing: border-box;
+ }
+
+
+
+ .entete_pricingsection_H1 {
+ font-family: 'DM Sans';
+ font-weight: 700;
+ font-size: 48px;
+ letter-spacing: -0.48px;
+ line-height: 52px;
+ text-align: center;
+ color: #16274f;
+ }
+
+
+
+ .entete_pricingsection_H1_sous_text {
+ font-family: 'DM Sans';
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 24px;
+ text-align: center;
+ color: #4B5162;
+ margin-bottom: 2rem;
+ }
+
+
+ }
+
+ /* end media*/
+
+}
\ No newline at end of file
diff --git a/src/components/tarif_section_automatic_files/PriceCard.js b/src/components/tarif_section_automatic_files/PriceCard.js
new file mode 100644
index 0000000..4e57aa6
--- /dev/null
+++ b/src/components/tarif_section_automatic_files/PriceCard.js
@@ -0,0 +1,142 @@
+import React from 'react';
+import './PriceCard.css';
+
+import check_img_fond_blanc from "../../img_new_design_2025/check-2.svg";
+
+const PriceCard = ({
+ isPopular = false,
+ title = 'BASIQUE',
+ price = '9.99',
+ features = [
+ 'Sans engagement',
+ '2 Utilisateurs maximum',
+ 'Email Support',
+ "Jusqu'Ã 25 Sessions/an",
+ 'Basic Analytics'
+ ],
+ buttonColor = '#fff',
+ buttonTextColor = '#4b5162',
+ priceColor = '#16274f',
+ borderColor = '#c7c9ce'
+}) => {
+ return (
+
+ {isPopular &&
+ {isPopular && (
+
+ LE PLUS POPULAIRE
+
+ )}
+
+
+
{title}
+
+
+ {price} €
+
+
+ par mois
+
+
+
Sans engagement
+
+
+
{
+ e.preventDefault();
+ window.location.href = "/Partner";
+ }}
+ >
+ Commencer maintenant
+
+
+
+
+
+ {features.map((feature, index) => (
+
+
+
{feature}
+
+ ))}
+
+
+
}
+
+ {!isPopular &&
+
+
+
{title}
+
+
+ {price} €
+
+
+ par mois
+
+
+
Sans engagement
+
+
+
{
+ e.preventDefault();
+ window.location.href = "/Partner";
+ }}
+ >
+ Commencer maintenant
+
+
+
+
+
+ {features.map((feature, index) => (
+
+
+
{feature}
+
+ ))}
+
+
+
}
+
+ );
+};
+
+export default PriceCard;
+
diff --git a/src/components/tarif_section_automatic_files/PricingSection.js b/src/components/tarif_section_automatic_files/PricingSection.js
new file mode 100644
index 0000000..938903e
--- /dev/null
+++ b/src/components/tarif_section_automatic_files/PricingSection.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PriceCard from './PriceCard';
+
+const PricingSection = () => {
+ return (
+
+
+
+
+ Optimisez votre gestion avec la solution la moin chère du marché.
+
+
+ Rapide, intuitif et conçu pour maximiser votre efficacité et votre temps.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PricingSection;
+
diff --git a/src/img_new_design_2025/Footer_social_i_Fa.png b/src/img_new_design_2025/Footer_social_i_Fa.png
new file mode 100644
index 0000000..c517438
Binary files /dev/null and b/src/img_new_design_2025/Footer_social_i_Fa.png differ
diff --git a/src/img_new_design_2025/Footer_social_i_X.png b/src/img_new_design_2025/Footer_social_i_X.png
new file mode 100644
index 0000000..c8ca805
Binary files /dev/null and b/src/img_new_design_2025/Footer_social_i_X.png differ
diff --git a/src/img_new_design_2025/Logo_MySy (2).png b/src/img_new_design_2025/Logo_MySy (2).png
new file mode 100644
index 0000000..19f40ba
Binary files /dev/null and b/src/img_new_design_2025/Logo_MySy (2).png differ
diff --git a/src/img_new_design_2025/Logo_MySy.png b/src/img_new_design_2025/Logo_MySy.png
new file mode 100644
index 0000000..19f40ba
Binary files /dev/null and b/src/img_new_design_2025/Logo_MySy.png differ
diff --git a/src/img_new_design_2025/Logo_MySy.svg b/src/img_new_design_2025/Logo_MySy.svg
new file mode 100644
index 0000000..3b811cd
--- /dev/null
+++ b/src/img_new_design_2025/Logo_MySy.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/src/img_new_design_2025/add.svg b/src/img_new_design_2025/add.svg
new file mode 100644
index 0000000..0af9a73
--- /dev/null
+++ b/src/img_new_design_2025/add.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/img_new_design_2025/adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg b/src/img_new_design_2025/adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
new file mode 100644
index 0000000..3fa5223
--- /dev/null
+++ b/src/img_new_design_2025/adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/img_new_design_2025/arrow-down.svg b/src/img_new_design_2025/arrow-down.svg
new file mode 100644
index 0000000..338045e
--- /dev/null
+++ b/src/img_new_design_2025/arrow-down.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/arrow-left.png b/src/img_new_design_2025/arrow-left.png
new file mode 100644
index 0000000..d2a2a89
Binary files /dev/null and b/src/img_new_design_2025/arrow-left.png differ
diff --git a/src/img_new_design_2025/arrow-left.svg b/src/img_new_design_2025/arrow-left.svg
new file mode 100644
index 0000000..edf01fc
--- /dev/null
+++ b/src/img_new_design_2025/arrow-left.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/arrow-right.svg b/src/img_new_design_2025/arrow-right.svg
new file mode 100644
index 0000000..2951829
--- /dev/null
+++ b/src/img_new_design_2025/arrow-right.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/assets.zip b/src/img_new_design_2025/assets.zip
new file mode 100644
index 0000000..fd79693
Binary files /dev/null and b/src/img_new_design_2025/assets.zip differ
diff --git a/src/img_new_design_2025/assets/img-check.svg b/src/img_new_design_2025/assets/img-check.svg
new file mode 100644
index 0000000..cbe9e5b
--- /dev/null
+++ b/src/img_new_design_2025/assets/img-check.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/assets/img-image.svg b/src/img_new_design_2025/assets/img-image.svg
new file mode 100644
index 0000000..72a527e
--- /dev/null
+++ b/src/img_new_design_2025/assets/img-image.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/assets/img-line-arrow-left.svg b/src/img_new_design_2025/assets/img-line-arrow-left.svg
new file mode 100644
index 0000000..49fa224
--- /dev/null
+++ b/src/img_new_design_2025/assets/img-line-arrow-left.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/img_new_design_2025/assets/img-union-2.svg b/src/img_new_design_2025/assets/img-union-2.svg
new file mode 100644
index 0000000..7c39d6f
--- /dev/null
+++ b/src/img_new_design_2025/assets/img-union-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/assets/img-union.svg b/src/img_new_design_2025/assets/img-union.svg
new file mode 100644
index 0000000..a2dab99
--- /dev/null
+++ b/src/img_new_design_2025/assets/img-union.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/border.svg b/src/img_new_design_2025/border.svg
new file mode 100644
index 0000000..eb52106
--- /dev/null
+++ b/src/img_new_design_2025/border.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/cap.svg b/src/img_new_design_2025/cap.svg
new file mode 100644
index 0000000..c69993c
--- /dev/null
+++ b/src/img_new_design_2025/cap.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/cellular.svg b/src/img_new_design_2025/cellular.svg
new file mode 100644
index 0000000..c21daa6
--- /dev/null
+++ b/src/img_new_design_2025/cellular.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/check-2.svg b/src/img_new_design_2025/check-2.svg
new file mode 100644
index 0000000..10594e9
--- /dev/null
+++ b/src/img_new_design_2025/check-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/check.svg b/src/img_new_design_2025/check.svg
new file mode 100644
index 0000000..b21077c
--- /dev/null
+++ b/src/img_new_design_2025/check.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/check_17.png b/src/img_new_design_2025/check_17.png
new file mode 100644
index 0000000..c41d128
Binary files /dev/null and b/src/img_new_design_2025/check_17.png differ
diff --git a/src/img_new_design_2025/check_ko_fond_gris.png b/src/img_new_design_2025/check_ko_fond_gris.png
new file mode 100644
index 0000000..1e99ed1
Binary files /dev/null and b/src/img_new_design_2025/check_ko_fond_gris.png differ
diff --git a/src/img_new_design_2025/coaching.png b/src/img_new_design_2025/coaching.png
new file mode 100644
index 0000000..8978859
Binary files /dev/null and b/src/img_new_design_2025/coaching.png differ
diff --git a/src/img_new_design_2025/container.svg b/src/img_new_design_2025/container.svg
new file mode 100644
index 0000000..03dabba
--- /dev/null
+++ b/src/img_new_design_2025/container.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/img_new_design_2025/cours.png b/src/img_new_design_2025/cours.png
new file mode 100644
index 0000000..e861eef
Binary files /dev/null and b/src/img_new_design_2025/cours.png differ
diff --git a/src/img_new_design_2025/cours_bg.png b/src/img_new_design_2025/cours_bg.png
new file mode 100644
index 0000000..2b6e5b6
Binary files /dev/null and b/src/img_new_design_2025/cours_bg.png differ
diff --git a/src/img_new_design_2025/divider.svg b/src/img_new_design_2025/divider.svg
new file mode 100644
index 0000000..148c885
--- /dev/null
+++ b/src/img_new_design_2025/divider.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/header_mysy_logo.png b/src/img_new_design_2025/header_mysy_logo.png
new file mode 100644
index 0000000..e8d4cb5
Binary files /dev/null and b/src/img_new_design_2025/header_mysy_logo.png differ
diff --git a/src/img_new_design_2025/header_user.png b/src/img_new_design_2025/header_user.png
new file mode 100644
index 0000000..25fb51c
Binary files /dev/null and b/src/img_new_design_2025/header_user.png differ
diff --git a/src/img_new_design_2025/icon.svg b/src/img_new_design_2025/icon.svg
new file mode 100644
index 0000000..dc8fd28
--- /dev/null
+++ b/src/img_new_design_2025/icon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/icons8-cours-48.png b/src/img_new_design_2025/icons8-cours-48.png
new file mode 100644
index 0000000..e45b4fe
Binary files /dev/null and b/src/img_new_design_2025/icons8-cours-48.png differ
diff --git a/src/img_new_design_2025/image-1.svg b/src/img_new_design_2025/image-1.svg
new file mode 100644
index 0000000..e086613
--- /dev/null
+++ b/src/img_new_design_2025/image-1.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/image-2.png b/src/img_new_design_2025/image-2.png
new file mode 100644
index 0000000..37b8acd
Binary files /dev/null and b/src/img_new_design_2025/image-2.png differ
diff --git a/src/img_new_design_2025/image-3.png b/src/img_new_design_2025/image-3.png
new file mode 100644
index 0000000..5753703
Binary files /dev/null and b/src/img_new_design_2025/image-3.png differ
diff --git a/src/img_new_design_2025/image.png b/src/img_new_design_2025/image.png
new file mode 100644
index 0000000..e2665a7
Binary files /dev/null and b/src/img_new_design_2025/image.png differ
diff --git a/src/img_new_design_2025/image.svg b/src/img_new_design_2025/image.svg
new file mode 100644
index 0000000..25a8b20
--- /dev/null
+++ b/src/img_new_design_2025/image.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/line-arrow-left.svg b/src/img_new_design_2025/line-arrow-left.svg
new file mode 100644
index 0000000..4604c25
--- /dev/null
+++ b/src/img_new_design_2025/line-arrow-left.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/img_new_design_2025/login.png b/src/img_new_design_2025/login.png
new file mode 100644
index 0000000..d1ea257
Binary files /dev/null and b/src/img_new_design_2025/login.png differ
diff --git a/src/img_new_design_2025/rectangle-2.svg b/src/img_new_design_2025/rectangle-2.svg
new file mode 100644
index 0000000..8866b54
--- /dev/null
+++ b/src/img_new_design_2025/rectangle-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/search.svg b/src/img_new_design_2025/search.svg
new file mode 100644
index 0000000..d3dc7ca
--- /dev/null
+++ b/src/img_new_design_2025/search.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/src/img_new_design_2025/session_default.png b/src/img_new_design_2025/session_default.png
new file mode 100644
index 0000000..55eddee
Binary files /dev/null and b/src/img_new_design_2025/session_default.png differ
diff --git a/src/img_new_design_2025/social-icons-container.svg b/src/img_new_design_2025/social-icons-container.svg
new file mode 100644
index 0000000..0dcb355
--- /dev/null
+++ b/src/img_new_design_2025/social-icons-container.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/img_new_design_2025/social_i_Fa.png b/src/img_new_design_2025/social_i_Fa.png
new file mode 100644
index 0000000..26fcac1
Binary files /dev/null and b/src/img_new_design_2025/social_i_Fa.png differ
diff --git a/src/img_new_design_2025/social_i_Insta.png b/src/img_new_design_2025/social_i_Insta.png
new file mode 100644
index 0000000..2fd0b30
Binary files /dev/null and b/src/img_new_design_2025/social_i_Insta.png differ
diff --git a/src/img_new_design_2025/social_i_Link.png b/src/img_new_design_2025/social_i_Link.png
new file mode 100644
index 0000000..9bebbb1
Binary files /dev/null and b/src/img_new_design_2025/social_i_Link.png differ
diff --git a/src/img_new_design_2025/social_i_X.png b/src/img_new_design_2025/social_i_X.png
new file mode 100644
index 0000000..44bf99b
Binary files /dev/null and b/src/img_new_design_2025/social_i_X.png differ
diff --git a/src/img_new_design_2025/social_i_You.png b/src/img_new_design_2025/social_i_You.png
new file mode 100644
index 0000000..b89253e
Binary files /dev/null and b/src/img_new_design_2025/social_i_You.png differ
diff --git a/src/img_new_design_2025/star.svg b/src/img_new_design_2025/star.svg
new file mode 100644
index 0000000..552fd9e
--- /dev/null
+++ b/src/img_new_design_2025/star.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/trust.svg b/src/img_new_design_2025/trust.svg
new file mode 100644
index 0000000..55bc024
--- /dev/null
+++ b/src/img_new_design_2025/trust.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/union-2.svg b/src/img_new_design_2025/union-2.svg
new file mode 100644
index 0000000..16e56e3
--- /dev/null
+++ b/src/img_new_design_2025/union-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/union-3.svg b/src/img_new_design_2025/union-3.svg
new file mode 100644
index 0000000..cf449dd
--- /dev/null
+++ b/src/img_new_design_2025/union-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/union-4.svg b/src/img_new_design_2025/union-4.svg
new file mode 100644
index 0000000..a654438
--- /dev/null
+++ b/src/img_new_design_2025/union-4.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/union-5.svg b/src/img_new_design_2025/union-5.svg
new file mode 100644
index 0000000..9892359
--- /dev/null
+++ b/src/img_new_design_2025/union-5.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/union-6.svg b/src/img_new_design_2025/union-6.svg
new file mode 100644
index 0000000..919ce60
--- /dev/null
+++ b/src/img_new_design_2025/union-6.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/union.svg b/src/img_new_design_2025/union.svg
new file mode 100644
index 0000000..fe43207
--- /dev/null
+++ b/src/img_new_design_2025/union.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/img_new_design_2025/user.svg b/src/img_new_design_2025/user.svg
new file mode 100644
index 0000000..0b5d155
--- /dev/null
+++ b/src/img_new_design_2025/user.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/img_new_design_2025/video.png b/src/img_new_design_2025/video.png
new file mode 100644
index 0000000..b729f7f
Binary files /dev/null and b/src/img_new_design_2025/video.png differ
diff --git a/src/img_new_design_2025/wifi.svg b/src/img_new_design_2025/wifi.svg
new file mode 100644
index 0000000..a232bf5
--- /dev/null
+++ b/src/img_new_design_2025/wifi.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/index.css b/src/index.css
index 5f53cd3..e12c05a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,5 +13,49 @@ code {
}
+:root {
+ --foundationwhite: rgba(255, 255, 255, 1);
+ --foundation-bluelight: rgba(236, 241, 252, 1);
+ --foundation-bluenormal: rgba(62, 110, 227, 1);
+ --foundation-bluedarker: rgba(22, 39, 79, 1);
+ --foundation-greennormal: rgba(10, 166, 144, 1);
+ --foundation-greendarker: rgba(4, 58, 50, 1);
+ --foundationblacklight-hover: rgba(220, 220, 220, 1);
+ --foundationblacknormal: rgba(23, 23, 23, 1);
+ --foundation-blue-greynormal: rgba(75, 81, 98, 1);
+ --browser-uidark-bg: rgba(61, 61, 61, 0.94);
+ --text-color600-body: rgba(113, 128, 150, 1);
+ --text-color100: rgba(249, 250, 251, 1);
+ --text-color400: rgba(203, 213, 224, 1);
+ --desktop-hn-h2-desktop-font-family: "DM Sans", Helvetica;
+ --desktop-hn-h2-desktop-font-weight: 700;
+ --desktop-hn-h2-desktop-font-size: 40px;
+ --desktop-hn-h2-desktop-letter-spacing: 0px;
+ --desktop-hn-h2-desktop-line-height: 120.00000762939453%;
+ --desktop-hn-h2-desktop-font-style: normal;
+ --mobile-hn-h2-mobile-font-family: "DM Sans", Helvetica;
+ --mobile-hn-h2-mobile-font-weight: 700;
+ --mobile-hn-h2-mobile-font-size: 32px;
+ --mobile-hn-h2-mobile-letter-spacing: 0px;
+ --mobile-hn-h2-mobile-line-height: 120.00000762939453%;
+ --mobile-hn-h2-mobile-font-style: normal;
+ --16px-regular-font-family: "Inter", Helvetica;
+ --16px-regular-font-weight: 400;
+ --16px-regular-font-size: 16px;
+ --16px-regular-letter-spacing: 0px;
+ --16px-regular-line-height: 24px;
+ --16px-regular-font-style: normal;
+ --button-base-bold-font-family: "DM Sans", Helvetica;
+ --button-base-bold-font-weight: 700;
+ --button-base-bold-font-size: 16px;
+ --button-base-bold-letter-spacing: 0px;
+ --button-base-bold-line-height: 122%;
+ --button-base-bold-font-style: normal;
+ --bottom-bar-dark: ;
+}
+
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets.zip b/src/mysy_img/fonctionnalite_img/assets.zip
new file mode 100644
index 0000000..0110941
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets.zip differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg b/src/mysy_img/fonctionnalite_img/assets/img-adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
new file mode 100644
index 0000000..e091797
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-adresse-1-cr-du-havre-75008-paris-e-mail-contact.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-arrow-left.svg b/src/mysy_img/fonctionnalite_img/assets/img-arrow-left.svg
new file mode 100644
index 0000000..4e4ac7f
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-arrow-left.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-arrow-right.svg b/src/mysy_img/fonctionnalite_img/assets/img-arrow-right.svg
new file mode 100644
index 0000000..56e8cb0
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-arrow-right.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-divider.svg b/src/mysy_img/fonctionnalite_img/assets/img-divider.svg
new file mode 100644
index 0000000..56eaf5f
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-divider.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-icon.svg b/src/mysy_img/fonctionnalite_img/assets/img-icon.svg
new file mode 100644
index 0000000..9af88c1
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-icon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-icons-2.svg b/src/mysy_img/fonctionnalite_img/assets/img-icons-2.svg
new file mode 100644
index 0000000..ba71866
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-icons-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-icons.svg b/src/mysy_img/fonctionnalite_img/assets/img-icons.svg
new file mode 100644
index 0000000..4f9dbe3
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-icons.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-14.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-14.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-14.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-15.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-15.png
new file mode 100644
index 0000000..0ba232d
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-15.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-17.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-17.png
new file mode 100644
index 0000000..032942c
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-17.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-2.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-2.png
new file mode 100644
index 0000000..2a5e518
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-2.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-5.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-5.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-5.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-6.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-6.png
new file mode 100644
index 0000000..40fb7e2
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-6.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-7.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-7.png
new file mode 100644
index 0000000..29e7cf4
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-7.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration-9.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration-9.png
new file mode 100644
index 0000000..9c5ff09
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration-9.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-illustration.png b/src/mysy_img/fonctionnalite_img/assets/img-illustration.png
new file mode 100644
index 0000000..56afbc4
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-illustration.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-image-1.svg b/src/mysy_img/fonctionnalite_img/assets/img-image-1.svg
new file mode 100644
index 0000000..2e62b2d
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-image-1.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-image-2.png b/src/mysy_img/fonctionnalite_img/assets/img-image-2.png
new file mode 100644
index 0000000..37b8acd
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-image-2.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-image-3.png b/src/mysy_img/fonctionnalite_img/assets/img-image-3.png
new file mode 100644
index 0000000..e2665a7
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-image-3.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-image-4.png b/src/mysy_img/fonctionnalite_img/assets/img-image-4.png
new file mode 100644
index 0000000..5753703
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-image-4.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-image-here.png b/src/mysy_img/fonctionnalite_img/assets/img-image-here.png
new file mode 100644
index 0000000..66c4f60
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-image-here.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-image.png b/src/mysy_img/fonctionnalite_img/assets/img-image.png
new file mode 100644
index 0000000..5aa1195
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-image.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-play-2.svg b/src/mysy_img/fonctionnalite_img/assets/img-play-2.svg
new file mode 100644
index 0000000..e805bc7
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-play-2.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-social-icons-2.svg b/src/mysy_img/fonctionnalite_img/assets/img-social-icons-2.svg
new file mode 100644
index 0000000..9a9f8c4
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-social-icons-2.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-social-icons-3.svg b/src/mysy_img/fonctionnalite_img/assets/img-social-icons-3.svg
new file mode 100644
index 0000000..f6e30f4
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-social-icons-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-social-icons-4.svg b/src/mysy_img/fonctionnalite_img/assets/img-social-icons-4.svg
new file mode 100644
index 0000000..9d63f1e
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-social-icons-4.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-social-icons.svg b/src/mysy_img/fonctionnalite_img/assets/img-social-icons.svg
new file mode 100644
index 0000000..18165ff
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-social-icons.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-star.svg b/src/mysy_img/fonctionnalite_img/assets/img-star.svg
new file mode 100644
index 0000000..552fd9e
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-star.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-10.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-10.svg
new file mode 100644
index 0000000..5a7355d
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-10.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-11.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-11.svg
new file mode 100644
index 0000000..a654438
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-11.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-12.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-12.svg
new file mode 100644
index 0000000..d4e7f6a
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-12.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-13.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-13.svg
new file mode 100644
index 0000000..02fd02c
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-13.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-14.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-14.svg
new file mode 100644
index 0000000..6aa0dba
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-14.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-15.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-15.svg
new file mode 100644
index 0000000..83f9446
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-15.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-16.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-16.svg
new file mode 100644
index 0000000..a00a151
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-16.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-17.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-17.svg
new file mode 100644
index 0000000..20bc073
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-17.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-18.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-18.svg
new file mode 100644
index 0000000..5f57572
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-18.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-19.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-19.svg
new file mode 100644
index 0000000..ddbd18b
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-19.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-2.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-2.svg
new file mode 100644
index 0000000..8dc8017
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-20.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-20.svg
new file mode 100644
index 0000000..9fa2581
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-20.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-21.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-21.svg
new file mode 100644
index 0000000..dc59946
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-21.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-22.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-22.svg
new file mode 100644
index 0000000..0695b2e
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-22.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-3.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-3.svg
new file mode 100644
index 0000000..46c2bba
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-4.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-4.svg
new file mode 100644
index 0000000..48ad364
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-4.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-5.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-5.svg
new file mode 100644
index 0000000..e5dcc65
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-5.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-6.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-6.svg
new file mode 100644
index 0000000..7ec926e
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-6.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-7.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-7.svg
new file mode 100644
index 0000000..e31d696
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-7.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-8.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-8.svg
new file mode 100644
index 0000000..887ef4a
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-8.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union-9.svg b/src/mysy_img/fonctionnalite_img/assets/img-union-9.svg
new file mode 100644
index 0000000..cfaa3d9
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union-9.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-union.svg b/src/mysy_img/fonctionnalite_img/assets/img-union.svg
new file mode 100644
index 0000000..e7db8e8
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-union.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-user.svg b/src/mysy_img/fonctionnalite_img/assets/img-user.svg
new file mode 100644
index 0000000..20ac270
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-user.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-vector-2.svg b/src/mysy_img/fonctionnalite_img/assets/img-vector-2.svg
new file mode 100644
index 0000000..6d668c1
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-vector-2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-vector-3.svg b/src/mysy_img/fonctionnalite_img/assets/img-vector-3.svg
new file mode 100644
index 0000000..92a20af
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-vector-3.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-vector-4.svg b/src/mysy_img/fonctionnalite_img/assets/img-vector-4.svg
new file mode 100644
index 0000000..fd5bc64
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-vector-4.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-vector.svg b/src/mysy_img/fonctionnalite_img/assets/img-vector.svg
new file mode 100644
index 0000000..adcdc0f
--- /dev/null
+++ b/src/mysy_img/fonctionnalite_img/assets/img-vector.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-video-2.png b/src/mysy_img/fonctionnalite_img/assets/img-video-2.png
new file mode 100644
index 0000000..11041e6
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-video-2.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img-video.png b/src/mysy_img/fonctionnalite_img/assets/img-video.png
new file mode 100644
index 0000000..6593506
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img-video.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_avis_participant.png b/src/mysy_img/fonctionnalite_img/assets/img_avis_participant.png
new file mode 100644
index 0000000..c4e34f5
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_avis_participant.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_catalog.png b/src/mysy_img/fonctionnalite_img/assets/img_catalog.png
new file mode 100644
index 0000000..f7db824
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_catalog.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_class_virtuelle.png b/src/mysy_img/fonctionnalite_img/assets/img_class_virtuelle.png
new file mode 100644
index 0000000..b57623e
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_class_virtuelle.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_client_financeur.png b/src/mysy_img/fonctionnalite_img/assets/img_client_financeur.png
new file mode 100644
index 0000000..200b2d3
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_client_financeur.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_collaborateur.png b/src/mysy_img/fonctionnalite_img/assets/img_collaborateur.png
new file mode 100644
index 0000000..c218ac0
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_collaborateur.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_cours_td_tp.png b/src/mysy_img/fonctionnalite_img/assets/img_cours_td_tp.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_cours_td_tp.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_devis.png b/src/mysy_img/fonctionnalite_img/assets/img_devis.png
new file mode 100644
index 0000000..b51ae6e
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_devis.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_echange_prof_apprenant.png b/src/mysy_img/fonctionnalite_img/assets/img_echange_prof_apprenant.png
new file mode 100644
index 0000000..ef33d25
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_echange_prof_apprenant.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_emargement.png b/src/mysy_img/fonctionnalite_img/assets/img_emargement.png
new file mode 100644
index 0000000..3d53a3c
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_emargement.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_evaluation.png b/src/mysy_img/fonctionnalite_img/assets/img_evaluation.png
new file mode 100644
index 0000000..80cbfec
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_evaluation.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_facture_avoir.png b/src/mysy_img/fonctionnalite_img/assets/img_facture_avoir.png
new file mode 100644
index 0000000..68d1baa
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_facture_avoir.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_formateur.png b/src/mysy_img/fonctionnalite_img/assets/img_formateur.png
new file mode 100644
index 0000000..faeab71
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_formateur.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_inscription.png b/src/mysy_img/fonctionnalite_img/assets/img_inscription.png
new file mode 100644
index 0000000..27018ec
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_inscription.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_intranet_apprenant.png b/src/mysy_img/fonctionnalite_img/assets/img_intranet_apprenant.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_intranet_apprenant.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_opportunite.png b/src/mysy_img/fonctionnalite_img/assets/img_opportunite.png
new file mode 100644
index 0000000..ec4d1b3
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_opportunite.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_paiement.png b/src/mysy_img/fonctionnalite_img/assets/img_paiement.png
new file mode 100644
index 0000000..c697261
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_paiement.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_partage_fichiers.png b/src/mysy_img/fonctionnalite_img/assets/img_partage_fichiers.png
new file mode 100644
index 0000000..ed15e90
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_partage_fichiers.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_personnalisation.png b/src/mysy_img/fonctionnalite_img/assets/img_personnalisation.png
new file mode 100644
index 0000000..303a2e4
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_personnalisation.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_qualipi_checklist.png b/src/mysy_img/fonctionnalite_img/assets/img_qualipi_checklist.png
new file mode 100644
index 0000000..66f27ca
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_qualipi_checklist.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_ressources.png b/src/mysy_img/fonctionnalite_img/assets/img_ressources.png
new file mode 100644
index 0000000..49affe1
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_ressources.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_session_formation.png b/src/mysy_img/fonctionnalite_img/assets/img_session_formation.png
new file mode 100644
index 0000000..5392dbe
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_session_formation.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_signat_electro.png b/src/mysy_img/fonctionnalite_img/assets/img_signat_electro.png
new file mode 100644
index 0000000..cc3c9cd
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_signat_electro.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_social_learning.png b/src/mysy_img/fonctionnalite_img/assets/img_social_learning.png
new file mode 100644
index 0000000..6b37a4d
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_social_learning.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_storage.png b/src/mysy_img/fonctionnalite_img/assets/img_storage.png
new file mode 100644
index 0000000..6e90ad9
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_storage.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_suivi_tps_connexion.png b/src/mysy_img/fonctionnalite_img/assets/img_suivi_tps_connexion.png
new file mode 100644
index 0000000..6a7be37
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_suivi_tps_connexion.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/img_tableau_bord.png b/src/mysy_img/fonctionnalite_img/assets/img_tableau_bord.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/img_tableau_bord.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-calendar.png b/src/mysy_img/fonctionnalite_img/assets/type-calendar.png
new file mode 100644
index 0000000..120c690
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-calendar.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-catalogue.png b/src/mysy_img/fonctionnalite_img/assets/type-catalogue.png
new file mode 100644
index 0000000..f7db824
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-catalogue.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-coach.png b/src/mysy_img/fonctionnalite_img/assets/type-coach.png
new file mode 100644
index 0000000..e6208b5
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-coach.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-dashboard.png b/src/mysy_img/fonctionnalite_img/assets/type-dashboard.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-dashboard.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-devis.png b/src/mysy_img/fonctionnalite_img/assets/type-devis.png
new file mode 100644
index 0000000..36d3c31
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-devis.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-inscription.png b/src/mysy_img/fonctionnalite_img/assets/type-inscription.png
new file mode 100644
index 0000000..27018ec
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-inscription.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-opportunity.png b/src/mysy_img/fonctionnalite_img/assets/type-opportunity.png
new file mode 100644
index 0000000..ec4d1b3
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-opportunity.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-payment.png b/src/mysy_img/fonctionnalite_img/assets/type-payment.png
new file mode 100644
index 0000000..032942c
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-payment.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-ressources.png b/src/mysy_img/fonctionnalite_img/assets/type-ressources.png
new file mode 100644
index 0000000..927fa4d
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-ressources.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-sharing-files.png b/src/mysy_img/fonctionnalite_img/assets/type-sharing-files.png
new file mode 100644
index 0000000..40fb7e2
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-sharing-files.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-signature.png b/src/mysy_img/fonctionnalite_img/assets/type-signature.png
new file mode 100644
index 0000000..cc3c9cd
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-signature.png differ
diff --git a/src/mysy_img/fonctionnalite_img/assets/type-social-learning.png b/src/mysy_img/fonctionnalite_img/assets/type-social-learning.png
new file mode 100644
index 0000000..a4986e9
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/assets/type-social-learning.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_avis_participant.png b/src/mysy_img/fonctionnalite_img/img_avis_participant.png
new file mode 100644
index 0000000..c4e34f5
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_avis_participant.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_catalog.png b/src/mysy_img/fonctionnalite_img/img_catalog.png
new file mode 100644
index 0000000..f7db824
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_catalog.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_class_virtuelle.png b/src/mysy_img/fonctionnalite_img/img_class_virtuelle.png
new file mode 100644
index 0000000..b57623e
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_class_virtuelle.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_client_financeur.png b/src/mysy_img/fonctionnalite_img/img_client_financeur.png
new file mode 100644
index 0000000..200b2d3
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_client_financeur.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_collaborateur.png b/src/mysy_img/fonctionnalite_img/img_collaborateur.png
new file mode 100644
index 0000000..c218ac0
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_collaborateur.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_cours_td_tp.png b/src/mysy_img/fonctionnalite_img/img_cours_td_tp.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_cours_td_tp.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_devis.png b/src/mysy_img/fonctionnalite_img/img_devis.png
new file mode 100644
index 0000000..b51ae6e
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_devis.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_echange_prof_apprenant.png b/src/mysy_img/fonctionnalite_img/img_echange_prof_apprenant.png
new file mode 100644
index 0000000..ef33d25
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_echange_prof_apprenant.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_emargement.png b/src/mysy_img/fonctionnalite_img/img_emargement.png
new file mode 100644
index 0000000..3d53a3c
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_emargement.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_evaluation.png b/src/mysy_img/fonctionnalite_img/img_evaluation.png
new file mode 100644
index 0000000..80cbfec
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_evaluation.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_facture_avoir.png b/src/mysy_img/fonctionnalite_img/img_facture_avoir.png
new file mode 100644
index 0000000..68d1baa
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_facture_avoir.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_formateur.png b/src/mysy_img/fonctionnalite_img/img_formateur.png
new file mode 100644
index 0000000..faeab71
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_formateur.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_inscription.png b/src/mysy_img/fonctionnalite_img/img_inscription.png
new file mode 100644
index 0000000..27018ec
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_inscription.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_intranet_apprenant.png b/src/mysy_img/fonctionnalite_img/img_intranet_apprenant.png
new file mode 100644
index 0000000..6fbf966
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_intranet_apprenant.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_opportunite.png b/src/mysy_img/fonctionnalite_img/img_opportunite.png
new file mode 100644
index 0000000..ec4d1b3
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_opportunite.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_paiement.png b/src/mysy_img/fonctionnalite_img/img_paiement.png
new file mode 100644
index 0000000..c697261
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_paiement.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_partage_fichiers.png b/src/mysy_img/fonctionnalite_img/img_partage_fichiers.png
new file mode 100644
index 0000000..ed15e90
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_partage_fichiers.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_personnalisation.png b/src/mysy_img/fonctionnalite_img/img_personnalisation.png
new file mode 100644
index 0000000..303a2e4
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_personnalisation.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_qualiopi_checklist.png b/src/mysy_img/fonctionnalite_img/img_qualiopi_checklist.png
new file mode 100644
index 0000000..66f27ca
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_qualiopi_checklist.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_ressources.png b/src/mysy_img/fonctionnalite_img/img_ressources.png
new file mode 100644
index 0000000..49affe1
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_ressources.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_session_formation.png b/src/mysy_img/fonctionnalite_img/img_session_formation.png
new file mode 100644
index 0000000..5392dbe
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_session_formation.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_signat_electro.png b/src/mysy_img/fonctionnalite_img/img_signat_electro.png
new file mode 100644
index 0000000..cc3c9cd
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_signat_electro.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_social_learning.png b/src/mysy_img/fonctionnalite_img/img_social_learning.png
new file mode 100644
index 0000000..6b37a4d
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_social_learning.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_storage.png b/src/mysy_img/fonctionnalite_img/img_storage.png
new file mode 100644
index 0000000..6e90ad9
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_storage.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_suivi_tps_connexion.png b/src/mysy_img/fonctionnalite_img/img_suivi_tps_connexion.png
new file mode 100644
index 0000000..6a7be37
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_suivi_tps_connexion.png differ
diff --git a/src/mysy_img/fonctionnalite_img/img_tableau_bord.png b/src/mysy_img/fonctionnalite_img/img_tableau_bord.png
new file mode 100644
index 0000000..81f4c77
Binary files /dev/null and b/src/mysy_img/fonctionnalite_img/img_tableau_bord.png differ
diff --git a/src/mysy_img/img_default_article_detail.jpg b/src/mysy_img/img_default_article_detail.jpg
new file mode 100644
index 0000000..1384fb7
Binary files /dev/null and b/src/mysy_img/img_default_article_detail.jpg differ
diff --git a/src/mysy_img/search_loupe_icon.png b/src/mysy_img/search_loupe_icon.png
new file mode 100644
index 0000000..3e8a955
Binary files /dev/null and b/src/mysy_img/search_loupe_icon.png differ
diff --git a/src/pages/new_p_article_detail_2025.js b/src/pages/new_p_article_detail_2025.js
new file mode 100644
index 0000000..d2b874f
--- /dev/null
+++ b/src/pages/new_p_article_detail_2025.js
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from "react";
+
+
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Article_Detail_2025 from "../components/New_C_Article_Detail_2025";
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+
+const new_p_article_detail_2025 = () => {
+
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_article_detail_2025;
diff --git a/src/pages/new_p_contact_2025.js b/src/pages/new_p_contact_2025.js
new file mode 100644
index 0000000..086cdae
--- /dev/null
+++ b/src/pages/new_p_contact_2025.js
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+
+import New_C_Sign_In_2025 from "../components/New_C_Sign_In_2025";
+import New_C_Header_2025 from "../components/New_C_Header_2025";
+import New_C_Footer_2025 from "../components/New_C_Footer_2025";
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Tatif_Section from "../components/tarif_section_automatic_files/PricingSection"
+
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+
+import New_C_Tarif_Section_Head from "../components/tarif_head_automatic_files/PricingLayout"
+
+import New_C_Contact_2025 from "../components/contact_automatic_files/Contact_Layout";
+
+const new_p_contact_2025 = () => {
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_contact_2025;
diff --git a/src/pages/new_p_detail_formation_2025.js b/src/pages/new_p_detail_formation_2025.js
new file mode 100644
index 0000000..3387fd1
--- /dev/null
+++ b/src/pages/new_p_detail_formation_2025.js
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+
+import New_C_Sign_In_2025 from "../components/New_C_Sign_In_2025";
+import New_C_Header_2025 from "../components/New_C_Header_2025";
+import New_C_Footer_2025 from "../components/New_C_Footer_2025";
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Tatif_Section from "../components/tarif_section_automatic_files/PricingSection";
+
+import New_C_Detail_Formation_Automatic_Files from "../components/detail_formation_automatic_files/new_detail_formation_2025"
+
+import New_C_Article_Detail_2025 from "../components/New_C_Article_Detail_2025";
+
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+
+import New_C_Tarif_Section_Head from "../components/tarif_head_automatic_files/PricingLayout"
+
+import New_C_Contact_2025 from "../components/contact_automatic_files/Contact_Layout";
+
+import New_C_Marketplace_2025 from "../components/marketplace_automatic_files/new_marketplace_2025";
+
+const new_p_detail_formation_2025 = () => {
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_detail_formation_2025;
diff --git a/src/pages/new_p_fonctionnalite_2025.js b/src/pages/new_p_fonctionnalite_2025.js
new file mode 100644
index 0000000..e299b97
--- /dev/null
+++ b/src/pages/new_p_fonctionnalite_2025.js
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react";
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+import New_C_Fonctionnalites_2025 from "../components/fonctionalites_automatic_files/new_fonctionnalites_2025";
+
+const new_p_fonctionnalite_2025 = () => {
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_fonctionnalite_2025;
diff --git a/src/pages/new_p_marketplace_2025.js b/src/pages/new_p_marketplace_2025.js
new file mode 100644
index 0000000..9e33237
--- /dev/null
+++ b/src/pages/new_p_marketplace_2025.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+import New_C_Marketplace_2025 from "../components/marketplace_automatic_files/new_marketplace_2025";
+
+const new_p_marketplace_2025 = () => {
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_marketplace_2025;
diff --git a/src/pages/new_p_sign_in_2025.js b/src/pages/new_p_sign_in_2025.js
new file mode 100644
index 0000000..c4cb693
--- /dev/null
+++ b/src/pages/new_p_sign_in_2025.js
@@ -0,0 +1,16 @@
+import New_C_Sign_In_2025 from "../components/New_C_Sign_In_2025";
+
+const new_p_sign_in_2025 = () => {
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_sign_in_2025;
diff --git a/src/pages/new_p_sign_up_2025.js b/src/pages/new_p_sign_up_2025.js
new file mode 100644
index 0000000..65acd42
--- /dev/null
+++ b/src/pages/new_p_sign_up_2025.js
@@ -0,0 +1,16 @@
+import New_C_Sign_Up_2025 from "../components/New_C_Sign_Up_2025";
+
+const new_p_sign_up_2025 = () => {
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_sign_up_2025;
diff --git a/src/pages/new_p_tarif_2025.js b/src/pages/new_p_tarif_2025.js
new file mode 100644
index 0000000..6054218
--- /dev/null
+++ b/src/pages/new_p_tarif_2025.js
@@ -0,0 +1,34 @@
+import New_C_Sign_In_2025 from "../components/New_C_Sign_In_2025";
+
+import New_C_Header_2025 from "../components/New_C_Header_2025";
+import New_C_Footer_2025 from "../components/New_C_Footer_2025";
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Tatif_Section from "../components/tarif_section_automatic_files/PricingSection"
+
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+
+import New_C_Tarif_Section_Head from "../components/tarif_head_automatic_files/PricingLayout"
+
+
+const new_p_tarif_2025 = () => {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_tarif_2025;
diff --git a/src/pages/new_p_test_header_footer_2025.js b/src/pages/new_p_test_header_footer_2025.js
new file mode 100644
index 0000000..0863acc
--- /dev/null
+++ b/src/pages/new_p_test_header_footer_2025.js
@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+
+import New_C_Sign_In_2025 from "../components/New_C_Sign_In_2025";
+import New_C_Header_2025 from "../components/New_C_Header_2025";
+import New_C_Footer_2025 from "../components/New_C_Footer_2025";
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Footer_Without_Testimony_2025_V2 from "../components/footer_automatic_files/Layout_Without_Testimony";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Tatif_Section from "../components/tarif_section_automatic_files/PricingSection";
+
+import New_C_Detail_Formation_Automatic_Files from "../components/detail_formation_automatic_files/new_detail_formation_2025"
+
+import New_C_Article_Detail_2025 from "../components/New_C_Article_Detail_2025";
+
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+
+import New_C_Tarif_Section_Head from "../components/tarif_head_automatic_files/PricingLayout"
+
+import New_C_Contact_2025 from "../components/contact_automatic_files/Contact_Layout";
+
+import New_C_Marketplace_2025 from "../components/marketplace_automatic_files/new_marketplace_2025";
+
+
+import New_C_Fonctionnalites_2025 from "../components/fonctionalites_automatic_files/new_fonctionnalites_2025";
+
+const new_p_test_header_footer_2025 = () => {
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+
+export default new_p_test_header_footer_2025;
diff --git a/src/pages/partner.js b/src/pages/partner.js
index 490ccb2..1592590 100644
--- a/src/pages/partner.js
+++ b/src/pages/partner.js
@@ -1,15 +1,20 @@
import Partner from "../components/Partner";
-import Navigation from "../components/Navigation";
-
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Footer_Without_Testimony_2025_V2 from "../components/footer_automatic_files/Layout_Without_Testimony";
const recherche_draft = () => {
return (
-
+
)
}
diff --git a/src/pages/recherchearticles.js b/src/pages/recherchearticles.js
index 8eb54fd..5547a83 100644
--- a/src/pages/recherchearticles.js
+++ b/src/pages/recherchearticles.js
@@ -1,15 +1,18 @@
import RechercheArticle from "../components/RechercheArticles";
import RechercheArticle_new_v2 from "../components/RechercheArticles_new_v2";
import Navigation from "../components/Navigation";
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Footer_Without_Testimony_2025_V2 from "../components/footer_automatic_files/Layout_Without_Testimony";
export default function displaydetailarticle() {
return (
diff --git a/src/styles/components/_new_buttonhilight_2025.scss b/src/styles/components/_new_buttonhilight_2025.scss
new file mode 100644
index 0000000..c4bd127
--- /dev/null
+++ b/src/styles/components/_new_buttonhilight_2025.scss
@@ -0,0 +1,773 @@
+.new_buttonhilight_2025{
+
+
+ .hidden {
+ width: 100%;
+ z-index: 40;
+ position: fixed;
+ top: -80px !important;
+ transition: 0.3s linear;
+ }
+
+ .h1_transparent {
+ color: transparent;
+ //color: red;
+ font-size: 0.1rem;
+ }
+
+
+ @media only screen and (max-width: 600px) {
+
+ .mini_entete {
+ display: none;
+ }
+
+ .header_menuPrincipal_left {
+ display: none;
+ }
+
+ .button1 {
+ position: fixed;
+ top: 0.5rem;
+ right: 1%;
+ cursor: pointer;
+ opacity: 1;
+ background: rgb(233, 5, 5);
+ border: 0px;
+ outline: 0;
+ border-bottom: 0px solid transparent;
+ color: white;
+ font-size: xx-small !important;
+ border-radius: 2rem;
+ width: 6rem;
+ margin: 0px;
+ padding: 0px;
+ white-space: nowrap;
+ text-align: center;
+ z-index: 50;
+ }
+
+ .button1:hover {
+ background: black;
+ }
+
+ .button2 {
+ position: fixed;
+ top: 1.8rem;
+ right: 1%;
+ cursor: pointer;
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: xx-small !important;
+ width: 6rem;
+ border-radius: 2rem;
+ margin: 0px;
+ padding: 0px;
+ white-space: nowrap;
+ text-align: center;
+ z-index: 50;
+ }
+
+ .button2:hover {
+ background: black;
+ }
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+ .mini_entete {
+ position: fixed;
+ top: 0px;
+ cursor: pointer;
+ opacity: 1;
+ background: #daf2ee;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 0px;
+ width: 100%;
+ white-space: nowrap;
+ text-align: center;
+ //height: 5rem !important;
+ z-index: 55;
+ //background: url("../../mysy_img/mysy_home.jpg") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+
+ a {
+ padding: 0px;
+ margin: 0px;
+ }
+
+ .buton_ch22 {
+ border: 2px solid white;
+ background-color: transparent;
+ color: white;
+ padding: 0px;
+ font-size: 16px;
+ cursor: pointer;
+ font-size: small;
+ border-radius: 4rem;
+ width: 6rem;
+ min-width: 6rem;
+ height: 1.7rem;
+ text-align: left;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 30%;
+ }
+
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 40%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 60%;
+ text-align: right;
+ color: white;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilight_menuPrincipal {
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ }
+
+ .hilight_menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .hilight_menuPrincipal_bton {
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+
+
+ .button1 {
+ position: fixed;
+ top: 1rem;
+ right: 5%;
+ cursor: pointer;
+ opacity: 1;
+ background: rgb(233, 5, 5);
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 2rem;
+ width: 9rem;
+ margin: 0px;
+ padding: 0px;
+ white-space: nowrap;
+ text-align: center;
+ }
+
+ .button1:hover {
+ background: black;
+ }
+
+ .button2 {
+ position: fixed;
+ top: 3rem;
+ right: 5%;
+ cursor: pointer;
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ border-radius: 2rem;
+ width: 9rem;
+ font-size: 0.75rem !important;
+ margin: 0px;
+ padding: 0px;
+ white-space: nowrap;
+ text-align: center;
+ }
+
+ .button2:hover {
+ background: black;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+
+ .mini_entete {
+ position: fixed;
+ top: 0px;
+ cursor: pointer;
+ opacity: 1;
+ background: #daf2ee;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 0px;
+ width: 100%;
+ white-space: nowrap;
+ text-align: center;
+ //height: 5rem !important;
+ z-index: 55;
+ //background: url("../../mysy_img/mysy_home.jpg") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+
+ a {
+ padding: 0px;
+ margin: 0px;
+ }
+
+ .buton_ch22 {
+ border: 2px solid white;
+ background-color: transparent;
+ color: white;
+ padding: 0px;
+ font-size: 16px;
+ cursor: pointer;
+ font-size: small;
+ border-radius: 4rem;
+ width: 6rem;
+ min-width: 6rem;
+ height: 1.7rem;
+ text-align: left;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 20%;
+ max-height: 3rem;
+ }
+
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 50%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 50%;
+ text-align: right;
+ color: white;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilight_menuPrincipal {
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ }
+
+ .hilight_menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .hilight_menuPrincipal_bton {
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+
+
+
+ .button1 {
+ position: fixed;
+ top: 1rem;
+ right: 5%;
+ cursor: pointer;
+ opacity: 1;
+ background: rgb(233, 5, 5);
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 2rem;
+ width: 11rem;
+ white-space: nowrap;
+ text-align: center;
+ line-height: 1rem !important;
+ }
+
+ .button1:hover {
+ background: black;
+ }
+
+ .button2 {
+ position: fixed;
+ top: 3.5rem;
+ right: 5%;
+ cursor: pointer;
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 2rem;
+ width: 11rem;
+ white-space: nowrap;
+ text-align: center;
+ line-height: 1rem !important;
+ }
+
+ .button2:hover {
+ background: black;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .mini_entete {
+ position: fixed;
+ top: 0px;
+ cursor: pointer;
+ opacity: 1;
+ background: #daf2ee;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 0px;
+ width: 100%;
+ white-space: nowrap;
+ text-align: center;
+ //height: 5rem !important;
+ z-index: 55;
+ //background: url("../../mysy_img/mysy_home.jpg") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+
+ a {
+ padding: 0px;
+ margin: 0px;
+ }
+
+ .buton_ch22 {
+ border: 2px solid white;
+ background-color: transparent;
+ color: white;
+ padding: 0px;
+ font-size: 16px;
+ cursor: pointer;
+ font-size: small;
+ border-radius: 4rem;
+ width: 6rem;
+ min-width: 6rem;
+ height: 1.7rem;
+ text-align: left;
+ }
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 18%;
+ max-height: 3rem;
+ }
+
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 50%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 50%;
+ text-align: right;
+ color: white;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.25rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.2rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+
+ .hilight_menuPrincipal {
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ }
+
+ .hilight_menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .hilight_menuPrincipal_bton {
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+
+
+ .button1 {
+ position: fixed;
+ top: 1rem;
+ right: 5%;
+ cursor: pointer;
+ opacity: 1;
+ background: rgb(233, 5, 5);
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 2rem;
+ width: 11rem;
+ white-space: nowrap;
+ text-align: center;
+ height: 1.5rem !important;
+ }
+
+ .button1:hover {
+ background: black;
+ }
+
+ .button2 {
+ position: fixed;
+ top: 3.5rem;
+ right: 5%;
+ cursor: pointer;
+ opacity: 1;
+ background: #619e31;
+ border: 1px;
+ outline: 0;
+ border-bottom: 2px solid transparent;
+ color: white;
+ font-size: 0.75rem !important;
+ border-radius: 2rem;
+ width: 11rem;
+ white-space: nowrap;
+ text-align: center;
+ height: 1.5rem !important;
+ }
+
+ .button2:hover {
+ background: black;
+ }
+ }
+
+
+
+ .MuiPaper-rounded {
+ top: 20px !important;
+ }
+
+
+ .bton_menu {
+ background: white;
+ width: 100%;
+ border: 0px;
+ text-align: left;
+ color: black;
+ letter-spacing: 2px;
+ margin: 10px;
+ background-image: none;
+ }
+
+ .bton_menu:hover {
+ color: black;
+ letter-spacing: 3px;
+ background: white;
+ background-image: none;
+ }
+
+
+}
+
+// end buttonhi
+
+.MuiList-padding {
+ background: white !important;
+ //color: #3b3e40 !important;
+ color: white !important;
+ border-radius: 0px !important;
+ font-style: italic;
+ font-size: small !important;
+ padding: 0px !important;
+ margin: 0px !important;
+ text-align: left !important;
+}
+
+.MuiListItem-button {
+ padding: 2px !important;
+ font-size: small !important;
+ padding: 0px;
+ margin: 0px;
+ //padding-left: 15px !important;
+ //padding-right: 5px !important;
+}
+
+.vvv {
+
+ @media only screen and (max-width: 600px) {
+ width: 50%;
+ color: white;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ width: 50%;
+ float: left;
+ color: white;
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px){
+ width: 50%;
+ float: left;
+ color: white;
+
+ }
+
+ @media only screen and (min-width: 1200px){
+ width: 30%;
+ float: left;
+ color: white;
+ }
+}
+
+.header_img_logo22 {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ //max-width: 18%;
+ max-height: 3rem;
+}
+
+.header_menuPrincipal_left {
+ @media only screen and (max-width: 600px) {
+ display: none;
+ }
+
+ margin-left: 0.9rem;
+ font-family: "Quicksand",
+ "Signika",
+ "sans-serif";
+ color: white;
+ cursor: pointer;
+ text-align: left;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ padding-top: 0.2rem;
+ //border:2px solid white;
+ width: 20%;
+ float: left;
+}
+
+.header_menuPrincipal_left:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+}
+
+.MuiPaper-rounded {
+ border-radius: 0px !important;
+}
+
+
+
+.bton_menu {
+ background-color: white;
+ width: 100%;
+ border: 0px;
+ text-align: left;
+ color: black;
+ letter-spacing: 2px;
+ margin: 10px;
+ background-image: none;
+}
+
+.bton_menu:hover {
+ //color: white;
+ letter-spacing: 3px;
+ background-color: whitesmoke;
+ background-image: none;
+ color: black;
+}
+
+
diff --git a/src/styles/components/_new_produitsservices_2025.scss b/src/styles/components/_new_produitsservices_2025.scss
new file mode 100644
index 0000000..4ab84d2
--- /dev/null
+++ b/src/styles/components/_new_produitsservices_2025.scss
@@ -0,0 +1,2742 @@
+.new_produitsservices_2025 {
+ .h1_transparent {
+ color: transparent;
+ font-size: 0.1rem;
+ }
+
+ @media only screen and (max-width: 600px) {
+
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 50%;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 95%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 20%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 80%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .div_row2 {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+ //border-radius: 1rem;
+ position: fixed;
+ z-index: 10;
+ top: 0px;
+ }
+
+ .div_row_haut {
+ float: left;
+ //border:1px solid black;
+ //border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 1rem;
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+ //border:1px solid black;
+ //border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 1rem;
+ z-index: 10;
+ background-color: #e7f3fb;
+ background-image: url("../../mysy_img/MYSY-banner-compte_v2.png");
+ }
+
+ .div_mobile {
+ // position: relative;
+ top: 6rem;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ // margin: 0.3rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ margin-top: 9rem;
+ }
+
+ .menuPrincipal {
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ width: 20%;
+ float: right;
+ font-weight: 500;
+ cursor: pointer;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ font-weight: bold;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.2rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ width: 50%;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_003 {
+ display: none;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin-bottom: 0.2rem;
+ margin-top: 0.2rem;
+ }
+
+ .div_005 {
+ width: 95%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: small;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .produits_service_label {
+ font-size: 0.8rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 1.25rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ padding-right: 3px;
+ padding-left: 5px;
+ }
+
+ .produits_service_tick {
+ font-size: 0.9rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 0.75rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .div_row_basique_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: 1rem;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_standard_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: 1rem;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_gold_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: 1rem;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_sur_mesure_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ //background: #F8F9F9;
+ font-size: 1rem;
+ font-weight: bold;
+ }
+
+ .bton_radius_gauche {
+ border: 1px solid;
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ border-top-right-radius: 0px !important;
+ border-bottom-right-radius: 0px !important;
+ color: #212529;
+ background: #81bc3a;
+ font-size: xx-small;
+ height: 1.5rem;
+ width: 35%;
+ padding: 0px;
+ }
+
+ .bton_radius_droite {
+ color: #212529;
+ border: 1px solid black;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+ background: #f8f9f9;
+ //opacity: 60%;
+ font-size: xx-small;
+ height: 1.5rem;
+ width: 35%;
+ padding: 0px;
+ }
+
+ .critere {
+ //float: left;
+ width: 95%;
+ border: rgb(0 0 0 / 15%);
+ margin-bottom: 0.5rem;
+ margin-left: auto;
+ margin-right: auto;
+ border-width: 0.01rem;
+
+ }
+
+ .critere_gauche {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 48%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: 0.6rem;
+ }
+
+ .critere_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 48%;
+ border-radius: 1rem;
+ text-align: right;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: 0.6rem;
+ }
+
+ .limite_input {
+ max-width: 5rem !important;
+ padding-right: 2px !important;
+ font-size: 0.8rem !important;
+ }
+
+ .input-group-text {
+ font-size: small !important;
+ }
+
+ .mb-3 {
+ max-height: 1rem;
+ }
+
+ .span1 {
+ display: none;
+ }
+
+ .div_row_description {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 0.5rem;
+ text-align: left;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: auto;
+ margin-left: auto;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .div_row_basique {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: auto;
+ margin-left: auto;
+ font-size: 0rem;
+ margin-bottom: 0.5rem;
+ margin-top: 0.5rem;
+ }
+
+ .div_basique_header {
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #212529;
+ }
+
+ .div_row_standard {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: auto;
+ margin-left: auto;
+ font-size: 0.8rem;
+ margin-bottom: 0.5rem;
+ margin-top: 0.5rem;
+ }
+
+ .div_standard_header {
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #0161e5;
+ }
+
+ .div_row_gold {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: auto;
+ margin-left: auto;
+ font-size: 0.8rem;
+ margin-bottom: 0.5rem;
+ margin-top: 0.5rem;
+ }
+
+ .div_gold_header {
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #81BC3A;
+ }
+
+ .div_row_sur_mesure {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 0%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: auto;
+ margin-left: auto;
+ font-size: 0.8rem;
+ margin-bottom: 0.5rem;
+ margin-top: 0.5rem;
+ }
+
+ .div_sur_mesure_header {
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #044a75;
+ }
+
+ .tick_ok_ko {
+ max-width: 5%;
+ }
+
+ .abonnement {
+ min-height: 3rem;
+ padding-top: 1rem;
+ //float: left;
+ border-width: 0.01rem;
+ width: 90%;
+ text-align: center;
+ margin-right: auto;
+ margin-left: auto;
+ font-size: small;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ }
+
+ .btn_abonnement {
+ font-size: 0.9rem !important;
+ width: 100%;
+ background-color: #81BC3A;
+ color: white;
+ }
+
+ .btn_arret_abonnement {
+ background-color: #ac9c13;
+ font-size: 0.9rem !important;
+ width: 100%;
+ color: white;
+ }
+
+
+
+ .btn_abonnement_sur_mesure {
+ font-size: 0.7rem !important;
+ width: 100%;
+ white-space: nowrap;
+ padding-left: 2px;
+ background-color: #044a75;
+ font-size: 0.9rem;
+ color: white;
+ }
+
+ .height_publication {
+ height: 8rem !important;
+ }
+
+ .height_publication_header {
+ height: auto;
+ margin-bottom: 0.5rem;
+ margin-top: 1rem;
+ background: #073462;
+ color: white;
+ }
+
+ .bton_envoyer {
+ border-radius: 5px;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 100%;
+ background: #81BC3A;
+ }
+
+ .bton_envoyer_precision {
+ border-radius: 5rem;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 100%;
+ background: #81BC3A;
+ color: white;
+ cursor: pointer;
+ }
+
+ .block_vide_produit_service {
+ height: 0.5rem;
+ }
+
+ .btn_abonnement_v2 {
+ white-space: nowrap;
+ padding-left: 0px;
+ padding-right: 0px;
+ color: white;
+ border: "solid 1px";
+ height: 4rem;
+ width: 80%;
+ font-size: 18px;
+ font-family: Verdana, Georgia, Arial;
+ background: #81BC3A;
+ }
+
+
+ .div_ul_detail_pack {
+ color: #424f61;
+ line-height: 2;
+ font-size: 14px;
+ font-family: Verdana, Georgia, Arial;
+ }
+
+ .div_block_header {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 1.5rem;
+ justify-content: center;
+ }
+
+ .div_block_prix {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 1.4rem;
+ justify-content: center;
+ }
+
+ .div_block_fonction {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail {
+ width: 100%;
+ float: left;
+
+
+ // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ background: #FFF;
+ min-height: 25rem;
+ // padding: 15px;
+ border-radius: 8px;
+ border: 2px solid #708f8f;
+ margin-bottom: 5px;
+ }
+
+ .div_block_fonction_detail_titre {
+ font-family: Verdana, Georgia, Arial;
+ color: #073462;
+ line-Height: 29px;
+ font-size: 20px;
+ margin-bottom: 5px;
+ width: 100%;
+ font-weight: 400;
+ text-align: center;
+ letter-spacing: 1px;
+ height: 5rem;
+ //padding-left: 2rem;
+ }
+
+ .div_block_fonction_detail_img {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail_img_inside {
+ width: 4rem;
+ }
+
+
+ .div_block_fonction_detail_desc {
+ width: 100%;
+ float: left;
+ text-align: left;
+ line-height: 1.8em;
+ font-size: small;
+ color: #0A043C;
+ }
+
+ .Background-header {
+ width: 100%;
+ height: 30rem;
+ flex-shrink: 0;
+ //opacity: 0.5;
+ background: var(--Beige, #FFF5DA);
+ padding: 20px;
+ }
+
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 30%;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 95%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 60%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: medium;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .div_row2 {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+ //border-radius: 1rem;
+ position: fixed;
+ z-index: 10;
+ }
+
+ .div_row_haut {
+ float: left;
+ //border:1px solid black;
+ //border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 1rem;
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+ width: 100%;
+ height: 10rem;
+ background-color: #e7f3fb;
+ z-index: 10;
+ background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+
+ .div_mobile {
+ // position: absolute;
+ top: 11rem;
+ z-index: 1;
+ width: 100%;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ margin-top: 6rem;
+ }
+
+ .menuPrincipal {
+ box-shadow: 10px 10px 10px 10px rgb(0 0 0 / 15%);
+ margin-left: 1rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ font-weight: bold;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.2rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 40%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 60%;
+ text-align: right;
+ color: white;
+ margin-top: 0.5rem;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.1rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .produits_service_label {
+ font-size: 0.7rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 1.25rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ padding-right: 3px;
+ padding-left: 5px;
+ //white-space: nowrap;
+ overflow: hidden;
+ height: 12rem;
+ }
+
+ .produits_service_tick {
+ font-size: 0.7rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 0.75rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ white-space: nowrap;
+ overflow: hidden;
+ height: 12rem;
+ }
+
+ .div_row_basique_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ font-size: 0.8rem;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_standard_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ font-size: 0.8rem;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_gold_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ font-size: 0.8rem;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_sur_mesure_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ //background: #F8F9F9;
+ font-size: 0.7rem;
+ font-weight: bold;
+ }
+
+ .bton_radius_gauche {
+ border: 1px solid;
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ border-top-right-radius: 0px !important;
+ border-bottom-right-radius: 0px !important;
+ color: #212529;
+ background: #81bc3a;
+ font-size: xx-small;
+ height: 1.6rem;
+ }
+
+ .bton_radius_droite {
+ color: #212529;
+ border: 1px solid black;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+ background: #f8f9f9;
+ //opacity: 60%;
+ font-size: xx-small;
+ height: 1.6rem;
+ }
+
+ .critere {
+ float: right;
+ width: 100%;
+ border: rgb(0 0 0 / 15%);
+ margin-bottom: 0.5rem;
+ }
+
+ .critere_gauche {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .critere_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-right: 2rem;
+ }
+
+ .limite_input {
+ max-width: 10rem !important;
+ }
+
+ .input-group-text {
+ font-size: small !important;
+ }
+
+ .mb-3 {
+ max-height: 1rem;
+ }
+
+ .div_row_description {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 37%;
+ border-radius: 0.5rem;
+ text-align: left;
+ //background-color: #E9ECEF !important;
+ }
+
+ .div_row_basique {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 18%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ //background: #F8F9F9;
+ }
+
+ .div_basique_header {
+ font-size: small;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #212529;
+ }
+
+ .div_row_standard {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 18%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ }
+
+ .div_standard_header {
+ font-size: small;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #0161e5;
+ }
+
+ .div_row_gold {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 18%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ }
+
+ .div_gold_header {
+ font-size: small;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #81BC3A;
+ }
+
+ .div_row_sur_mesure {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 0%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.2rem;
+ margin-left: 0.2rem;
+ }
+
+ .div_sur_mesure_header {
+ font-size: small;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #044a75;
+ }
+
+ .tick_ok_ko {
+ max-width: 12%;
+ }
+
+ .abonnement {
+ min-height: 3rem;
+ padding-top: 1rem;
+ //float: left;
+ border-width: 0.01rem;
+ width: 90%;
+ text-align: center;
+ margin-right: auto;
+ margin-left: auto;
+ font-size: small;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ }
+
+ .btn_abonnement {
+ font-size: 0.7rem !important;
+ width: 100%;
+ background-color: #81BC3A;
+ white-space: nowrap;
+ color: white;
+ }
+
+ .btn_arret_abonnement {
+ background-color: #ac9c13;
+ font-size: 0.7rem !important;
+ width: 100%;
+ color: white;
+ }
+
+
+
+ .btn_abonnement_sur_mesure {
+ font-size: 0.6rem !important;
+ width: 100%;
+ background-color: #81BC3A;
+ white-space: nowrap;
+ padding-left: 2px;
+ background-color: #044a75;
+ font-size: 0.8rem;
+ color: white;
+ }
+
+
+ .height_support {
+ height: 3rem !important;
+ }
+
+ .height_leads {
+ height: 6rem !important;
+ }
+
+ .height_Reporting {
+ height: 8rem !important;
+ }
+
+
+ .height_publication {
+ height: 8rem !important;
+ }
+
+ .height_publication_header {
+ height: auto;
+ margin-bottom: 0.5rem;
+ margin-top: 1rem;
+ background: #073462;
+ color: white;
+ }
+
+
+ //-----
+ .height_e_learning {
+ height: 11rem !important;
+ }
+
+
+ .height_intranet {
+ height: 5rem !important;
+ }
+
+
+ .height_gestion_admin {
+ height: 24rem !important;
+ }
+
+ .height_appel_offre {
+ height: 7rem !important;
+ }
+
+ .height_affichage_ftion {
+ height: 9rem !important;
+ }
+
+ .height_price_1 {
+ height: 5rem !important;
+ }
+
+ .height_e_learning_persona {
+ height: 7rem !important;
+ }
+
+ .height_gestion_crm {
+ height: 9rem !important;
+ }
+
+
+
+ //----------
+
+ .bton_envoyer {
+ border-radius: 5px;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 80%;
+ background: #81BC3A;
+ }
+
+ .bton_envoyer_precision {
+ border-radius: 5rem;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 100%;
+ background: #81BC3A;
+ color: white;
+ cursor: pointer;
+ }
+
+ .block_vide_produit_service {
+ height: 7rem;
+ }
+
+ .btn_abonnement_v2 {
+ white-space: nowrap;
+ padding-left: 0px;
+ padding-right: 0px;
+ color: white;
+ border: "solid 1px";
+ height: 4rem;
+ width: 80%;
+ font-size: 18px;
+ font-family: Verdana, Georgia, Arial;
+ background: #81BC3A;
+ }
+
+
+ .div_ul_detail_pack {
+ color: #424f61;
+ line-height: 2;
+ font-size: 14px;
+ font-family: Verdana, Georgia, Arial;
+ }
+
+ .div_block_header {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 1.8rem;
+ justify-content: center;
+ padding-top: 1rem;
+ }
+
+ .div_block_prix {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 1.24rem;
+ justify-content: center;
+ }
+
+ .div_block_fonction {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail {
+ width: 30%;
+ float: left;
+
+ margin: 10px;
+ // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ background: #FFF;
+ min-height: 25rem;
+ // padding: 15px;
+ border-radius: 8px;
+ border: 2px solid #708f8f;
+ }
+
+ .div_block_fonction_detail_titre {
+ font-family: Verdana, Georgia, Arial;
+ color: #073462;
+ line-Height: 29px;
+ font-size: 20px;
+ margin-bottom: 5px;
+ width: 100%;
+ font-weight: 400;
+ text-align: center;
+ letter-spacing: 1px;
+ height: 5rem;
+ //padding-left: 2rem;
+ }
+
+ .div_block_fonction_detail_img {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail_img_inside {
+ width: 4rem;
+ }
+
+
+ .div_block_fonction_detail_desc {
+ width: 100%;
+ float: left;
+ text-align: left;
+ line-height: 1.8em;
+ font-size: small;
+ color: #0A043C;
+ }
+
+ .Background-header {
+ width: 100%;
+ height: 30rem;
+ flex-shrink: 0;
+ //opacity: 0.5;
+ background: var(--Beige, #FFF5DA);
+ padding: 20px;
+ }
+
+
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 20%;
+ max-height: 3rem;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 95%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ }
+
+ .div_row_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 69%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: large;
+ }
+
+ .okUpdateData {
+ font-size: medium;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: medium;
+ color: red;
+ font-style: italic;
+ }
+
+ .div_row2 {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+ //border-radius: 1rem;
+ position: fixed;
+ z-index: 10;
+ }
+
+ .div_row_haut {
+ float: left;
+ //border:1px solid black;
+ //border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 1rem;
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+ width: 100%;
+ height: 10rem;
+ background-color: #e7f3fb;
+ z-index: 10;
+ background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+
+ .div_mobile {
+ // position: absolute;
+ top: 11rem;
+ z-index: 1;
+ width: 100%;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ margin-top: 6rem;
+ }
+
+ .menuPrincipal {
+ box-shadow: 10px 10px 10px 10px rgb(0 0 0 / 15%);
+ margin-left: 1rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 50%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 50%;
+ text-align: right;
+ color: white;
+ margin-top: 0.5rem;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.1rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .produits_service_label {
+ font-size: 0.8rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 1.25rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ padding-right: 3px;
+ padding-left: 5px;
+ //white-space: nowrap;
+ overflow: hidden;
+ height: 10rem;
+ }
+
+ .produits_service_tick {
+ font-size: 0.8rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 0.75rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ white-space: nowrap;
+ overflow: hidden;
+ height: 10rem;
+ }
+
+ .div_row_basique_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: small;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_standard_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: small;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_gold_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: small;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_sur_mesure_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ //background: #F8F9F9;
+ font-size: small;
+ font-weight: bold;
+ }
+
+ .bton_radius_gauche {
+ border: 1px solid;
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ border-top-right-radius: 0px !important;
+ border-bottom-right-radius: 0px !important;
+ color: #212529;
+ background: #81bc3a;
+ font-size: xx-small;
+ height: 1.5rem;
+ }
+
+ .bton_radius_droite {
+ color: #212529;
+ border: 1px solid black;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+ background: #f8f9f9;
+ //opacity: 60%;
+ font-size: xx-small;
+ height: 1.5rem;
+ }
+
+ .critere {
+ float: right;
+ width: 100%;
+ border: rgb(0 0 0 / 15%);
+ margin-bottom: 0.5rem;
+ }
+
+ .critere_gauche {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .critere_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-right: 2rem;
+ }
+
+ .limite_input {
+ max-width: 10rem !important;
+ }
+
+ .input-group-text {
+ font-size: small !important;
+ }
+
+ .mb-3 {
+ max-height: 1rem;
+ }
+
+ .div_row_description {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 45%;
+ border-radius: 0.5rem;
+ text-align: left;
+ //background-color: #E9ECEF !important;
+ }
+
+ .div_row_basique {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 15%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ //background: #F8F9F9;
+ }
+
+ .div_basique_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #212529;
+ }
+
+ .div_row_standard {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 15%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ }
+
+ .div_standard_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #0161e5;
+ }
+
+ .div_row_gold {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 15%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ }
+
+ .div_gold_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #81BC3A;
+ }
+
+ .div_row_sur_mesure {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 0%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ }
+
+ .div_sur_mesure_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #044a75;
+ }
+
+ .tick_ok_ko {
+ max-width: 15%;
+ }
+
+ .abonnement {
+ min-height: 3rem;
+ padding-top: 1rem;
+ //float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 90%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: auto;
+ margin-left: auto;
+ font-size: small;
+ font-weight: bold;
+ //background: #F8F9F9;
+ margin-bottom: 0.5rem;
+ }
+
+ .btn_abonnement {
+ font-size: 0.7rem !important;
+ width: 100%;
+ background-color: #81BC3A;
+ color: white;
+ }
+
+ .btn_arret_abonnement {
+ background-color: #ac9c13;
+ font-size: 0.7rem !important;
+ width: 100%;
+ color: white;
+ }
+
+
+ .btn_abonnement_sur_mesure {
+ font-size: 0.8rem !important;
+ width: 100%;
+ background-color: #81BC3A;
+ white-space: nowrap;
+ padding-left: 2px;
+ background-color: #044a75;
+ font-size: 0.8rem;
+ color: white;
+ }
+
+
+ .height_support {
+ height: 3rem !important;
+ }
+
+ .height_leads {
+ height: 6rem !important;
+ }
+
+ .height_Reporting {
+ height: 8rem !important;
+ }
+
+ .height_publication {
+ height: 9rem !important;
+ }
+
+ .height_publication_header {
+ height: auto;
+ margin-bottom: 0.5rem;
+ margin-top: 1rem;
+ background: #073462;
+ color: white;
+ }
+
+
+ //-----
+ .height_e_learning {
+ height: 11rem !important;
+ }
+
+
+ .height_intranet {
+ height: 5rem !important;
+ }
+
+
+ .height_gestion_admin {
+ height: 22rem !important;
+ }
+
+ .height_appel_offre {
+ height: 6rem !important;
+ }
+
+ .height_affichage_ftion {
+ height: 7rem !important;
+ }
+
+ .height_price_1 {
+ height: 5rem !important;
+ }
+
+ .height_e_learning_persona {
+ height: 5rem !important;
+ }
+
+ .height_gestion_crm {
+ height: 9rem !important;
+ }
+
+
+
+ //----------
+
+ .bton_envoyer {
+ border-radius: 5px;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 80%;
+ background: #81BC3A;
+ }
+
+
+ .bton_envoyer_precision {
+ border-radius: 5rem;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 100%;
+ background: #81BC3A;
+ color: white;
+ cursor: pointer;
+ }
+
+ .block_vide_produit_service {
+ height: 8rem;
+ }
+
+ .btn_abonnement_v2 {
+ white-space: nowrap;
+ padding-left: 0px;
+ padding-right: 0px;
+ color: white;
+ border: "solid 1px";
+ height: 4rem;
+ width: 80%;
+ font-size: 18px;
+ font-family: Verdana, Georgia, Arial;
+ background: #81BC3A;
+ }
+
+
+ .div_ul_detail_pack {
+ color: #424f61;
+ line-height: 2;
+ font-size: 14px;
+ font-family: Verdana, Georgia, Arial;
+ }
+
+ .div_block_header {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 1.8rem;
+ justify-content: center;
+ }
+
+ .div_block_prix {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 1.8rem;
+ justify-content: center;
+ }
+
+ .div_block_fonction {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail {
+ width: 30%;
+ float: left;
+
+ margin: 10px;
+ // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ background: #FFF;
+ min-height: 25rem;
+ // padding: 15px;
+ border-radius: 8px;
+ border: 2px solid #708f8f;
+ }
+
+ .div_block_fonction_detail_titre {
+ font-family: Verdana, Georgia, Arial;
+ color: #073462;
+ line-Height: 29px;
+ font-size: 20px;
+ margin-bottom: 5px;
+ width: 100%;
+ font-weight: 400;
+ text-align: center;
+ letter-spacing: 1px;
+ height: 5rem;
+ //padding-left: 2rem;
+ }
+
+ .div_block_fonction_detail_img {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail_img_inside {
+ width: 4rem;
+ }
+
+
+ .div_block_fonction_detail_desc {
+ width: 100%;
+ float: left;
+ text-align: left;
+ line-height: 1.8em;
+ font-size: small;
+ color: #0A043C;
+ }
+
+ .Background-header {
+ width: 100%;
+ height: 30rem;
+ flex-shrink: 0;
+ //opacity: 0.5;
+ background: var(--Beige, #FFF5DA);
+ padding: 20px;
+ }
+
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .img_logo {
+ display: block;
+ height: auto;
+ margin-left: 0px;
+ margin-right: auto;
+ max-width: 18%;
+ max-height: 3rem;
+ }
+
+ .containerBox {
+ position: relative;
+ display: inline-block;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 95%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ }
+
+ .div_row_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 69%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: x-large;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .div_row2 {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 0.1rem;
+ //border-radius: 1rem;
+ position: fixed;
+ z-index: 10;
+ }
+
+ .div_row_haut {
+ float: left;
+ //border:1px solid black;
+ //border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 1rem;
+ background-color: #3b3e40;
+ z-index: 10;
+ }
+
+ .div_row_bas {
+ float: right;
+ width: 100%;
+ height: 10rem;
+ background-color: #e7f3fb;
+ z-index: 10;
+ background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+
+ .div_mobile {
+ // position: absolute;
+ top: 11rem;
+ z-index: 1;
+ width: 100%;
+ }
+
+ .pieddepage {
+ z-index: 50;
+ width: 100%;
+ float: left;
+ margin-top: 6rem;
+ }
+
+ .menuPrincipal {
+ box-shadow: 10px 10px 10px 10px rgb(0 0 0 / 15%);
+ margin-left: 1rem;
+ font-family: "Quicksand", "Signika", "sans-serif";
+ color: white;
+ float: right;
+ cursor: pointer;
+ text-align: right;
+ font-size: small;
+ border: 2px solid transparent;
+ white-space: nowrap;
+ text-transform: uppercase;
+ }
+
+ .menuPrincipal:hover {
+ color: #81bc3a;
+ padding-left: 0;
+ transition: color 0.3s linear;
+ letter-spacing: 0.1rem;
+ text-decoration: solid;
+ text-underline-offset: 3px;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ text-decoration: underline;
+ }
+
+ .div_001 {
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_002 {
+ float: left;
+ width: 50%;
+ text-align: left;
+ }
+
+ .div_003 {
+ float: left;
+ width: 50%;
+ text-align: right;
+ color: white;
+ margin-top: 0.5rem;
+ }
+
+ .div_004 {
+ color: white;
+ width: 100%;
+ height: 0.1rem;
+ opacity: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ float: left;
+ margin: 0.5rem;
+ }
+
+ .div_005 {
+ width: 100%;
+ float: left;
+ }
+
+ .hilightsoustitre {
+ background: #113459;
+ color: #fff;
+ display: block;
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .text_head {
+ color: white;
+ font-family: "verdana", "Quicksand", "Signika", "sans-serif";
+ font-size: 1.2rem;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .produits_service_label {
+ font-size: small;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 1.25rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ height: 10rem;
+ }
+
+
+ .height_support {
+ height: 7rem !important;
+ }
+
+ .height_leads {
+ height: 6rem !important;
+ }
+
+ .height_Reporting {
+ height: 5rem !important;
+ }
+
+ .height_publication {
+ height: 8rem !important;
+ }
+
+ .height_publication_header {
+ height: auto;
+ margin-bottom: 0.5rem;
+ margin-top: 1rem;
+ background: #073462;
+ color: white;
+ }
+
+
+ //-----
+ .height_e_learning {
+ height: 11rem !important;
+ }
+
+
+ .height_intranet {
+ height: 5rem !important;
+ }
+
+
+ .height_gestion_admin {
+ height: 18rem !important;
+ }
+
+ .height_appel_offre {
+ height: 6rem !important;
+ }
+
+ .height_affichage_ftion {
+ height: 7rem !important;
+ }
+
+ .height_price_1 {
+ height: 5rem !important;
+ }
+
+ .height_e_learning_persona {
+ height: 5rem !important;
+ }
+
+ .height_gestion_crm {
+ height: 12rem !important;
+ }
+
+
+
+ //----------
+
+ .bton_envoyer {
+ border-radius: 5px;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 60%;
+ background: #81BC3A;
+ }
+
+ .produits_service_tick {
+ font-size: small;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+ color: #212529;
+ position: relative;
+ display: block;
+ padding: 0.75rem 1.25rem;
+ margin-bottom: -1px;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+ height: 10rem;
+ }
+
+ .div_row_basique_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: small;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_standard_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: small;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_gold_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ font-size: small;
+ font-weight: bold;
+ //background: #F8F9F9;
+ }
+
+ .div_row_sur_mesure_price {
+ min-height: 3rem;
+ padding-top: 1rem;
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ //border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ //background: #F8F9F9;
+ font-size: small;
+ font-weight: bold;
+ }
+
+ .bton_radius_gauche {
+ border: 1px solid;
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ border-top-right-radius: 0px !important;
+ border-bottom-right-radius: 0px !important;
+ color: #212529;
+ background: #81bc3a;
+ font-size: xx-small;
+ height: 1.5rem;
+ }
+
+ .bton_radius_droite {
+ color: #212529;
+ border: 1px solid black;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+ background: #f8f9f9;
+ //opacity: 90%;
+ font-size: xx-small;
+ height: 1.5rem;
+ }
+
+ .critere {
+ float: right;
+ width: 100%;
+ border: rgb(0 0 0 / 15%);
+ margin-bottom: 0.5rem;
+ }
+
+ .critere_gauche {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ }
+
+ .critere_droite {
+ float: right;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 30%;
+ border-radius: 1rem;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-right: 2rem;
+ }
+
+ .limite_input {
+ max-width: 10rem !important;
+ }
+
+ .input-group-text {
+ font-size: small !important;
+ }
+
+ .mb-3 {
+ max-height: 1rem;
+ }
+
+ .div_row_description {
+ float: left;
+ //border:0px solid black;
+ border-width: 0.01rem;
+ width: 45%;
+ border-radius: 0.5rem;
+ text-align: left;
+ //background-color: #E9ECEF !important;
+ }
+
+ .div_row_basique {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 14%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ //background: #F8F9F9;
+ }
+
+ .div_basique_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #212529;
+ }
+
+ .div_row_standard {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 14%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ }
+
+ .div_standard_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #0161e5;
+ }
+
+ .div_row_gold {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 14%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ }
+
+ .div_gold_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #81BC3A;
+ }
+
+ .div_row_sur_mesure {
+ float: left;
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 0%;
+ border-radius: 0.5rem;
+ text-align: center;
+ //height: 10rem;
+ -webkit-box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ box-shadow: 1px 5px 5px 5px rgb(0 0 0 / 15%);
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ }
+
+ .div_sur_mesure_header {
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2rem;
+ //padding-bottom: 0.5rem;
+ color: #044a75;
+ }
+
+ .tick_ok_ko {
+ max-width: 8%;
+ }
+
+ .abonnement {
+ min-height: 3rem;
+ padding-top: 1rem;
+ border-width: 0.01rem;
+ width: 90%;
+ text-align: center;
+ margin-right: auto;
+ margin-left: auto;
+ font-size: small;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ }
+
+ .btn_abonnement {
+ font-size: 0.8rem !important;
+ width: 100%;
+ background-color: #104277;
+ white-space: nowrap;
+ padding-left: 0px;
+ padding-right: 0px;
+ color: white;
+ }
+
+ .btn_arret_abonnement {
+ font-size: 0.8rem !important;
+ width: 100%;
+ background-color: #ac9c13;
+ white-space: nowrap;
+ padding-left: 0px;
+ padding-right: 0px;
+ color: white;
+ }
+
+ .btn_abonnement_sur_mesure {
+ font-size: 0.8rem !important;
+ width: 100%;
+ background-color: #81BC3A;
+ white-space: nowrap;
+ padding-left: 2px;
+ background-color: #044a75;
+ font-size: 0.8rem;
+ color: white;
+ }
+
+ .react-confirm-alert {
+ background: red !important;
+ }
+
+ .bton_envoyer_precision {
+ border-radius: 5rem;
+ font-size: medium;
+ padding: 0.3rem;
+ width: 100%;
+ background: #81BC3A;
+ color: white;
+ cursor: pointer;
+ }
+
+ .btn_abonnement_v2 {
+ white-space: nowrap;
+ padding-left: 0px;
+ padding-right: 0px;
+ color: white;
+ border: "solid 1px";
+ height: 4rem;
+ width: 80%;
+ font-size: 18px;
+ font-family: Verdana, Georgia, Arial;
+ background: #81BC3A;
+ }
+
+
+ .div_ul_detail_pack {
+ color: #424f61;
+ line-height: 2;
+ font-size: 14px;
+ font-family: Verdana, Georgia, Arial;
+ }
+
+ .div_block_header {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 2rem;
+ justify-content: center;
+ }
+
+ .div_block_prix {
+ font-family: Verdana, Georgia, Arial;
+ color: #424f61;
+ text-align: center;
+ font-size: 1.8rem;
+ justify-content: center;
+ }
+
+ .div_block_fonction {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail {
+ width: 30%;
+ float: left;
+
+ margin: 10px;
+ // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0);
+ background: #FFF;
+ min-height: 25rem;
+ // padding: 15px;
+ border-radius: 8px;
+ border: 2px solid #708f8f;
+ }
+
+ .div_block_fonction_detail_titre {
+ font-family: Verdana, Georgia, Arial;
+ color: #073462;
+ line-Height: 29px;
+ font-size: 20px;
+ margin-bottom: 5px;
+ width: 100%;
+ font-weight: 400;
+ text-align: center;
+ letter-spacing: 1px;
+ height: 5rem;
+ //padding-left: 2rem;
+ }
+
+ .div_block_fonction_detail_img {
+ width: 100%;
+ float: left;
+ }
+
+ .div_block_fonction_detail_img_inside {
+ width: 4rem;
+ }
+
+
+ .div_block_fonction_detail_desc {
+ width: 100%;
+ float: left;
+ text-align: left;
+ line-height: 1.8em;
+ font-size: small;
+ color: #0A043C;
+ }
+
+ .block_centrer {
+ margin: auto;
+ width: 100%;
+ padding: 10px;
+ max-width: 1400px !important;
+ }
+
+ .Background-header {
+ width: 100%;
+ height: 30rem;
+ flex-shrink: 0;
+ //opacity: 0.5;
+ background: var(--Beige, #FFF5DA);
+ padding: 20px;
+ }
+
+ }
+
+
+
+ // end media
+
+
+
+ .hr_break {
+ border: 5px solid grey;
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_article_2025.scss b/src/styles/components/_new_s_article_2025.scss
new file mode 100644
index 0000000..49fbf31
--- /dev/null
+++ b/src/styles/components/_new_s_article_2025.scss
@@ -0,0 +1,855 @@
+.new_s_article_2025 {
+ @media only screen and (max-width: 600px) {
+ .img_note_class {
+ width: 25%;
+ height: 25%;
+ }
+
+ .btn-success {
+ font-size: x-small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ //width: 50%!important;
+ padding: 0.2rem !important;
+ }
+
+ .media_sociaux {
+ svg {
+ margin-top: 0 !important;
+ text-align: left !important;
+ }
+
+ .SocialIcon {
+ height: 20px !important;
+ width: 20px !important;
+ }
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0.1rem;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ float: left;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 98%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
+ .div_row_droite {
+ float: right;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 49.8%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-radius: 10px !important;
+ padding: 5px;
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ // letter-spacing: 1px;
+
+ min-height: 60px;
+ font-family: Verdana, Georgia, Arial;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ text-align: justify;
+ color: #0A043C;
+ margin-top: 1rem;
+ line-height: 30px;
+ font-weight: 600;
+ }
+
+ .met_text:hover {
+ font-style: italic;
+ }
+
+ .met_text_detail {
+ margin-bottom: 0.1rem;
+ font-size: small;
+ font-weight: normal;
+ //white-space: nowrap;
+ //overflow: hidden;
+
+ text-align: left;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .art_criteres {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ font-size: small;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+ width: 12%;
+ float: left;
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+ }
+
+ .art_criteres_value {
+ width: 100%;
+ float: left;
+ margin-bottom: 0.5rem;
+ text-align: left;
+ font-family: Verdana, Georgia, Arial;
+ //height: 20rem;
+ line-height: 30px;
+ font-size: 14px;
+ }
+
+ .art_criteres_value_left {
+ width: 50%;
+ float: left;
+ text-align: left;
+ margin-bottom: 0.5rem;
+ }
+
+ .art_criteres_value_right {
+ width: 35%;
+ float: left;
+ text-align: right;
+ margin-bottom: 0.5rem;
+ }
+
+ .gauche_img {
+ width: 100%;
+ float: left;
+ }
+
+ .droite_txt {
+ width: 100%;
+ float: right;
+ padding: 5px;
+ height: 20rem;
+ }
+
+ .div_row_border {
+ float: left;
+ // border: 1px solid #d5d8dc;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 15px;
+ background: #FFF;
+ // padding: 5px;
+ // margin-right: 5px;
+ //cursor: pointer;
+ }
+
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .img_note_class {
+ width: 15%;
+ height: 15%;
+ }
+
+ .btn-success {
+ font-size: x-small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ //width: 50%!important;
+ padding: 0.2rem !important;
+ }
+
+ .media_sociaux {
+ svg {
+ margin-top: 0 !important;
+ text-align: left !important;
+ }
+
+ .SocialIcon {
+ height: 20px !important;
+ width: 20px !important;
+ }
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0.1rem;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_gauche {
+ //float: left;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 98%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ margin-right: auto;
+ margin-left: auto;
+ cursor: pointer;
+ }
+
+ .div_row_droite {
+ float: right;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 49.8%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-radius: 10px !important;
+ padding: 5px;
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ // letter-spacing: 1px;
+
+ min-height: 60px;
+ font-family: Verdana, Georgia, Arial;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ text-align: left;
+ color: #0A043C;
+ margin-top: 1rem;
+ line-height: 30px;
+ font-weight: 600;
+ }
+
+ .met_text:hover {
+ font-style: italic;
+ }
+
+ .met_text_detail {
+ margin-bottom: 0.1rem;
+ font-size: small;
+ font-weight: normal;
+ //white-space: nowrap;
+ //overflow: hidden;
+
+ text-align: left;
+ margin-top: 1rem;
+ // margin-bottom: 1rem;
+ }
+
+ .art_criteres {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ font-size: small;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+ width: 12%;
+ float: left;
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+ }
+
+ .art_criteres_value {
+ width: 100%;
+ float: left;
+ margin-bottom: 0.5rem;
+ text-align: left;
+ font-family: Verdana, Georgia, Arial;
+ height: 15rem;
+ line-height: 30px;
+ font-size: 14px;
+ }
+
+ .art_criteres_value_left {
+ width: 50%;
+ float: left;
+ text-align: left;
+ margin-bottom: 0.5rem;
+ }
+
+ .art_criteres_value_right {
+ width: 35%;
+ float: left;
+ text-align: right;
+ margin-bottom: 0.5rem;
+ }
+
+ .gauche_img {
+ width: 100%;
+ float: left;
+ }
+
+ .droite_txt {
+ width: 100%;
+ float: right;
+ padding: 5px;
+ height: 33rem;
+ }
+
+ .div_row_border {
+ float: left;
+ // border: 1px solid #d5d8dc;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 25px;
+ padding: 5px;
+ margin-right: 5px;
+ //cursor: pointer;
+ }
+
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .img_note_class {
+ width: 10%;
+ height: 10%;
+ }
+
+ .btn-success {
+ font-size: x-small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ //width: 40%!important;
+ padding: 0.2rem !important;
+ }
+
+ .media_sociaux {
+ svg {
+ margin-top: 0 !important;
+ text-align: left !important;
+ }
+
+ .SocialIcon {
+ height: 20px !important;
+ width: 20px !important;
+ }
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0.1rem;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_border {
+ float: left;
+ // border: 1px solid #d5d8dc;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 25px;
+ padding: 5px;
+ margin-right: 5px;
+ // cursor: pointer;
+ }
+
+ .div_row_gauche {
+ float: left;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 49%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
+ .div_row_droite {
+ float: right;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 49.8%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-radius: 10px !important;
+ padding: 5px;
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ // letter-spacing: 1px;
+
+ min-height: 60px;
+ font-family: Verdana, Georgia, Arial;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ text-align: left;
+ color: #0A043C;
+ margin-top: 1rem;
+ line-height: 30px;
+ font-weight: 600;
+ }
+
+ .met_text:hover {
+ font-style: italic;
+ }
+
+ .met_text_detail {
+ margin-bottom: 0.1rem;
+ font-size: small;
+ font-weight: normal;
+ //white-space: nowrap;
+ //overflow: hidden;
+
+ text-align: left;
+ margin-top: 1rem;
+ // margin-bottom: 1rem;
+ }
+
+ .art_criteres {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ font-size: small;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+ width: 15%;
+ float: left;
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+ }
+
+ .art_criteres_value {
+ width: 100%;
+ float: left;
+ margin-bottom: 0.5rem;
+ text-align: left;
+ font-family: Verdana, Georgia, Arial;
+ height: 15rem;
+ line-height: 28px;
+ font-size: 14px;
+ }
+
+ .art_criteres_value_left {
+ width: 50%;
+ float: left;
+ text-align: left;
+ margin-bottom: 0.5rem;
+ }
+
+ .art_criteres_value_right {
+ width: 35%;
+ float: left;
+ text-align: right;
+ margin-bottom: 0.5rem;
+ }
+
+ .gauche_img {
+ width: 100%;
+ float: left;
+ }
+
+ .droite_txt {
+ width: 100%;
+ float: right;
+ padding: 5px;
+ height: 28rem;
+ }
+
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .img_note_class {
+ width: 8%;
+ }
+
+ .btn-success {
+ font-size: x-small !important;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ //width: 40%!important;
+ padding: 0.2rem !important;
+ }
+
+ .media_sociaux {
+ svg {
+ margin-top: 0 !important;
+ text-align: left !important;
+ }
+
+ .SocialIcon {
+ height: 25px !important;
+ width: 25px !important;
+ }
+ }
+
+ .rech_middlebox {
+ float: left;
+ border-width: 2px;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ padding: 0.1rem;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .div_row {
+ //border: 0px solid black;
+ border-width: 0.01rem;
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .div_row_border {
+ float: left;
+ // border: 1px solid #d5d8dc;
+ border-width: 0.01rem;
+ width: 100%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 25px;
+ padding: 5px;
+ margin-right: 5px;
+ //cursor: pointer;
+ }
+
+
+ .div_row_gauche {
+ float: left;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 49%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
+ .div_row_droite {
+ float: right;
+ border: 0px solid black;
+ border-width: 0.01rem;
+ width: 49.8%;
+ border-radius: 5px;
+ text-align: left;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ font-size: small;
+ margin-bottom: 5px;
+ padding: 5px;
+ }
+
+ .okUpdateData {
+ font-size: small;
+ color: green;
+ font-style: italic;
+ }
+
+ .koUpdateData {
+ font-size: small;
+ color: red;
+ font-style: italic;
+ }
+
+ .img_categorie {
+ width: 100%;
+ border-radius: 10px !important;
+ padding: 5px;
+ height: 15rem;
+ }
+
+ .met_container {
+ text-align: center;
+ padding: 1px 2px;
+ letter-spacing: 2px;
+ font-size: small;
+ color: #3b3e40;
+ }
+
+ .met_text {
+ margin-bottom: 0.1rem;
+ // letter-spacing: 1px;
+
+ height: 60px;
+ font-family: Verdana, Georgia, Arial;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 17px;
+ line-height: 22px;
+ text-align: left;
+ color: #0A043C;
+ margin-top: 2rem;
+ line-height: 30px;
+ font-weight: 600;
+ width: 100%;
+ float: left;
+ }
+
+ .met_text:hover {
+ font-style: italic;
+ }
+
+ .met_text_detail {
+ margin-bottom: 0.1rem;
+ font-size: small;
+ font-weight: normal;
+ //white-space: nowrap;
+ //overflow: hidden;
+
+ text-align: left;
+ margin-top: 1rem;
+ // margin-bottom: 1rem;
+ width: 100%;
+ float: left;
+ //height: 14rem;
+ }
+
+ .art_criteres {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ font-size: small;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+ width: 12%;
+ float: left;
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+ }
+
+ .art_criteres_value {
+ width: 100%;
+ float: left;
+ text-align: left;
+ margin-bottom: 0.5rem;
+ text-align: left;
+ font-family: Verdana, Georgia, Arial;
+ line-height: 25px;
+ height: 10rem;
+ line-height: 30px;
+ font-size: 14px;
+ }
+
+ .art_criteres_value_left {
+ width: 50%;
+ float: left;
+ text-align: left;
+ margin-bottom: 0.5rem;
+ }
+
+ .art_criteres_value_right {
+ width: 35%;
+ float: left;
+ text-align: right;
+ margin-bottom: 0.5rem;
+ }
+
+ .gauche_img {
+ width: 100%;
+ float: left;
+ }
+
+ .droite_txt {
+ width: 100%;
+ float: right;
+ padding: 5px;
+ height: 20rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ }
+
+
+
+ .lire_plus {
+ cursor: pointer;
+ width: 100%;
+ text-align: center;
+ border: 1px solid #d5d8dc;
+ border-radius: 5px;
+ padding-top: 10px;
+ background: #f8f9f9;
+ box-shadow: 3px 0px 5px 3px rgba(0, 0, 0, 0.1);
+ height: 3rem;
+ float: left;
+ font-style: normal;
+
+ }
+
+ .lire_plus:hover {
+ font-style: italic;
+ }
+ .tox-dialog {
+ z-index: 150002 !important;
+}
+
+
+ // end media
+}
+
+
+.grid8p {
+ font-family: Roboto, sans-serif;
+ color: #005e5d;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ width: 100%;
+ text-align: left;
+ padding-right: 10px;
+ float: left;
+ height: 2rem;
+ font-style: italic;
+ cursor: pointer;
+}
+
+.grid8p:hover {
+ font-style: italic;
+ letter-spacing: 1px;
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_article_detail_2025.scss b/src/styles/components/_new_s_article_detail_2025.scss
new file mode 100644
index 0000000..e097c15
--- /dev/null
+++ b/src/styles/components/_new_s_article_detail_2025.scss
@@ -0,0 +1,403 @@
+.new_s_article_detail_2025 {
+
+ @media only screen and (max-width: 600px) {}
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {}
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {}
+
+ @media only screen and (min-width: 1200px) {
+
+ .head_background_with_img_displayed {
+ /* Background */
+
+ position: absolute;
+ width: 100%;
+ height: 460px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ opacity: 0.1;
+ z-index: -1;
+
+ }
+
+ .head_background_without_img_displayed {
+ /* Background */
+
+ position: absolute;
+ width: 100%;
+ height: 320px;
+ left: 0px;
+ top: 0px;
+
+ background: #C4C8EE;
+ opacity: 0.1;
+ z-index: -1;
+
+ }
+
+ .frame1 {
+ /* Frame 1 */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 32px;
+
+ width: 100%;
+ height: 630px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ /* Blog Info */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0px;
+ gap: 20px;
+
+ width: 1116px;
+ height: 136px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+
+ /* Title */
+
+ width: 1116px;
+ height: 96px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ /* or 48px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ /* Date */
+
+ width: 131px;
+ height: 20px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ /* identical to box height, or 143% */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+
+
+ /* Image */
+
+ width: 1116px;
+ height: 462px;
+
+ // background: url(photo-1596079890701-dd42edf0b7d4.jpg);
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+
+
+ .blog_info_with_img_displayed {
+
+ width: 80%;
+ margin: auto;
+ // background: aliceblue;
+ margin-bottom: 32px;
+ height: 15rem;
+ }
+
+
+ .blog_info_without_img_displayed {
+
+ width: 80%;
+ margin: auto;
+ // background: aliceblue;
+ margin-bottom: 32px;
+ }
+
+
+ .blog_info_paragraphe {
+
+ width: 80%;
+ margin: auto;
+ // background: aliceblue;
+ margin-bottom: 32px;
+ }
+
+ .blog_info_title {
+ /* Title */
+
+
+ height: 96px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 120%;
+ /* or 48px */
+ text-align: center;
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+ width: 80%;
+ margin: auto;
+ margin-top: auto;
+ margin-top: 5rem;
+ margin-bottom: 1rem;
+ }
+
+ .blog_info_date {
+ /* Date */
+
+ width: 131px;
+ height: 20px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ /* identical to box height, or 143% */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ width: 80%;
+ margin: auto;
+
+ }
+
+ .frame1_img {
+ /* Image */
+
+ width: 90%;
+ margin: auto;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .frame1_img_class {
+ width: 90%;
+ margin: auto;
+ max-height: 30rem;
+ max-width: 1200px;
+ }
+
+ .paragraphe {
+ /* Para */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0px;
+ gap: 16px;
+
+ width: 888px;
+ height: 332px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 2;
+ align-self: stretch;
+ flex-grow: 0;
+
+
+
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .paragraphe_title {
+ /* Title */
+
+ // width: 888px;
+ //height: 28px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 28px;
+ /* identical to box height, or 117% */
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+
+
+ text-align: left;
+ width: 80%;
+ margin: auto;
+
+ }
+
+ .paragraphe_text {
+ /* Article */
+
+ // width: 888px;
+ //height: 288px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 32px;
+ /* or 160% */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+
+ width: 80%;
+ margin: auto;
+
+
+ }
+
+ .a_decouvrir {
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 32px;
+ line-height: 40px;
+ height: 40px;
+ color: #16274F;
+ text-align: left;
+ margin-bottom: 32px;
+ }
+
+ .a_decouvrir_img {
+ max-width: 356px;
+ max-width: 240px;
+ }
+
+ .a_decouvrir_img_class {
+ width: 100%;
+ border-radius: 10px;
+
+ }
+
+ .a_decouvrir_title {
+ /* Display xs/Semibold */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ /* or 133% */
+
+ /* Foundation /Blue/Darker */
+ color: #16274F;
+ text-align: left;
+
+ }
+
+ .a_decouvrir_small_desc {
+ /* Text md/Normal */
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ /* or 150% */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+ text-align: left;
+
+ }
+
+ }
+
+ // end media
+ .retour_list_articles {
+ cursor: pointer;
+ width: 100%;
+ text-align: center;
+ border: 1px solid #d5d8dc;
+ border-radius: 5px;
+ padding-top: 10px;
+ background: #f8f9f9;
+ box-shadow: 3px 0px 5px 3px rgba(0, 0, 0, 0.1);
+ height: 3rem;
+ float: left;
+ font-style: normal;
+ }
+
+ .retour_list_articles:hover {
+ font-style: italic;
+ }
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_footer_2025.scss b/src/styles/components/_new_s_footer_2025.scss
new file mode 100644
index 0000000..ad64044
--- /dev/null
+++ b/src/styles/components/_new_s_footer_2025.scss
@@ -0,0 +1,3 @@
+.new_s_footer_2025{
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_formation_2025.scss b/src/styles/components/_new_s_formation_2025.scss
new file mode 100644
index 0000000..575d301
--- /dev/null
+++ b/src/styles/components/_new_s_formation_2025.scss
@@ -0,0 +1,2671 @@
+.new_formation_2025 {
+ .p_class {
+ margin-bottom: 0.3rem !important;
+ letter-spacing: 1px;
+ }
+
+ .h1_transparent {
+ color: transparent;
+ //color: red;
+ font-size: small;
+ }
+
+ .ftion_tab_gauche {
+ width: 65%;
+ float: left;
+ text-align: left;
+ font-weight: bold;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .ftion_tab_droite {
+ width: 35%;
+ float: left;
+ text-align: center;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+ .media_sociaux svg {
+ margin-top: 0 !important;
+ }
+
+ .icone_location {
+ font-size: large;
+ }
+
+ .block_cats {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ margin: 0 auto;
+ //width: 286px;
+ // height: 96px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ width: 80%;
+
+ }
+
+ .block_cats_bton_detail {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 6px 8px;
+
+ //width: 286px;
+ height: 44px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .block_cats_bton_detail_text {
+
+ height: 18px;
+
+ /* Button/Small - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ /* identical to box height, or 18px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+ .block_main_contente {
+ /* Content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px 10px;
+ gap: 10px;
+
+ //width: 318px;
+ //height: 372px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 1;
+ z-index: 1;
+ margin-top: 15px;
+
+ }
+
+ .block_top_content {
+ /* Top-content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ padding: 0px;
+ gap: 10px;
+
+ margin: 0 auto;
+ //width: 286px;
+ //height: 241px;
+ min-height: 150px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+
+ }
+
+ .formation_titre {
+ height: 29px;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 120%;
+ text-transform: uppercase;
+ color: #16274F;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+
+ }
+
+ .formation_prix {
+ /* 1680€ HT */
+
+
+ height: 20px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 140%;
+ /* identical to box height, or 20px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+
+ }
+
+ .formation_description {
+ /* Comprendre la Cryptomonnaie et la Blockchain en 8 Minutes. Dans cette v... */
+
+ width: 100%;
+ height: 64px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 160%;
+ /* or 22px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 2;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ }
+
+ .tag_cpf_txt_ok_cpf {
+ /* Éligible au CPF */
+
+ width: 97px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Green/Normal */
+ color: #0AA690;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .tag_cpf_txt_no_ok_cpf {
+ /* NON Éligible au CPF */
+
+ width: 127px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ color: #B74949;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .case_cpf {
+ width: 30%;
+ float: right;
+ padding-right: 5px;
+ background: #FFFFFF;
+ }
+
+ /* less than 600 px */
+ @media screen and (max-width: 600px) {
+ .p_class {
+ margin-bottom: 0.3rem !important;
+ text-align: center;
+ letter-spacing: 1px;
+ text-decoration: solid;
+ }
+
+ .criteres {
+ font-size: 0.69rem;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ //font-size: smaller;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+ }
+
+ .div_row {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 100%;
+ margin-bottom: 3px !important;
+ border-radius: 1rem;
+ }
+
+ .div_row_gauche {
+ float: left;
+ // border:1px solid black;
+ // border-width:0.01rem;
+ width: 50%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: right;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 48%;
+ border-radius: 1rem;
+ }
+
+ .forma_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+ .forma_leftbox {
+ float: left;
+ border-width: 2px;
+ width: 20%;
+ height: 100%;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .forma_rightbox {
+ float: right;
+ border-width: 2px;
+ width: 100%;
+ padding: 0.5rem;
+ font-size: 11px;
+ text-align: left;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+ overflow-wrap: break-word;
+ }
+
+ .h1_forma {
+ color: #ff4411;
+ font-size: small;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ }
+
+ .p_forma {
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-weight: var(--bs-body-font-weight);
+ line-height: var(--bs-body-line-height);
+ font-size: 0.74rem;
+ text-align: justify;
+ word-break: break-word;
+ margin-bottom: 4px;
+ color: #3b3e40;
+ }
+
+ .imgcoeur {
+ width: 60%;
+ }
+
+ .forma_img_gauche {
+ /*float: left;
+ border-width: 2px;
+ width: 24%;
+ padding: 0.3rem;
+ font-size: 11px;
+ text-align: left;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;*/
+ display: none;
+ }
+
+ .training_img {
+ max-width: 100%;
+ border-radius: 10px;
+ }
+
+ .div_row_critere {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 95%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ }
+
+
+ .training_title {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 300;
+ font-size: 16px;
+ line-height: 22px;
+ /* identical to box height */
+
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ }
+
+ .training_price {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+
+ }
+
+ .bton_inscris {
+ position: relative;
+ background: red;
+ -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(white));
+
+ }
+
+ bton_inscris:after,
+ bton_inscris:before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: inherit;
+ height: 50%;
+ bottom: -52%;
+ }
+
+ bton_inscris:after {}
+
+ bton_inscris:before {
+ z-index: 1;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
+ }
+
+ //----
+
+ .block_cpf {
+ /* Tag */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+ //position: absolute;
+ //width: 173px;
+ //height: 37px;
+ //right: -16px;
+ top: 0px;
+
+ background: #FFE7DA;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ }
+
+ .block_cpf_txt {
+ //width: 153px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .react-share__ShareButton {
+ width: 2rem !important;
+ text-align: left;
+ }
+
+ .css-ryrseu-MuiRating-root {
+ font-size: 1.3rem;
+ }
+
+ .div_row_droite_cpf {
+ float: right;
+ width: 50%;
+ text-align: right;
+ }
+
+ .div_row_gauche_critere {
+ padding: 10px;
+ width: 100% !important;
+ padding-left: 1px;
+ padding-right: 1px;
+ }
+
+
+ .div_row_droite_critere {
+ padding: 5px;
+ width: 100% !important;
+ margin-top: 1px;
+ }
+
+
+ .bton_se_renseinger {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 95%;
+ background: #FFFFFF;
+ color: #104277;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_voir_detail {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 95%;
+ background: #104277;
+ color: white;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_sinscrire {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 95%;
+ background: #619E31;
+ color: white;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .ftion_tab_gauche {
+ width: 50%;
+ }
+
+ .ftion_tab_droite {
+ width: 50%;
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 18px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 16px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ font-size: 18px;
+ }
+
+
+
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+ .ftion_tab_gauche {
+ width: 50%;
+ float: left;
+ text-align: left;
+ font-weight: bold;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .ftion_tab_droite {
+ width: 50%;
+ float: left;
+ text-align: center;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ }
+
+
+ .div_row {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 100%;
+ margin-bottom: 5px !important;
+ border-radius: 1rem;
+ }
+
+ .div_row_gauche {
+ float: left;
+ // border:1px solid black;
+ // border-width:0.01rem;
+ width: 50% !important;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: right;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 50%;
+ border-radius: 1rem;
+ }
+
+ .forma_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+ .forma_leftbox {
+ float: left;
+ border-width: 2px;
+ width: 20%;
+ height: 100%;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .forma_rightbox {
+ float: right;
+ border-width: 2px;
+ width: 76%;
+ margin: auto;
+ padding: 0.5rem;
+ font-size: small;
+ text-align: left;
+ color: rgb(10, 42, 77);
+ cursor: pointer;
+ overflow-wrap: break-word;
+ }
+
+ .criteres {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ font-size: 0.70rem;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+ }
+
+ .h1_forma {
+ color: #ff4411;
+ font-size: medium;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ }
+
+ .p_forma {
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-size: 0.74rem;
+ line-height: 1.3rem;
+ font-weight: var(--bs-body-font-weight);
+ line-height: var(--bs-body-line-height);
+ color: #3b3e40;
+ padding-bottom: 0rem;
+ text-align: justify;
+ word-break: break-word;
+ }
+
+ .imgcoeur {
+ width: 60%;
+ }
+
+ .forma_img_gauche {
+ float: left;
+ border-width: 2px;
+ width: 24%;
+ padding: 0.3rem;
+ font-size: 11px;
+ text-align: center;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+ }
+
+ .training_img {
+ max-width: 100%;
+ border-radius: 10px;
+ }
+
+ .div_row_critere {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 100%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ }
+
+
+ .training_title {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 20px;
+ /* identical to box height */
+
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ }
+
+ .training_price {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+
+ }
+
+ .bton_inscris {
+ position: relative;
+ background: red;
+ -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(white));
+
+ }
+
+ bton_inscris:after,
+ bton_inscris:before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: inherit;
+ height: 50%;
+ bottom: -52%;
+ }
+
+ bton_inscris:after {}
+
+ bton_inscris:before {
+ z-index: 1;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
+ }
+
+ //----
+
+ .block_cpf {
+ /* Tag */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+ //position: absolute;
+ //width: 173px;
+ //height: 37px;
+ //right: -16px;
+ top: 0px;
+
+ background: #FFE7DA;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ }
+
+ .block_cpf_txt {
+ //width: 153px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .react-share__ShareButton {
+ width: 2rem !important;
+ text-align: left;
+ }
+
+ .css-ryrseu-MuiRating-root {
+ font-size: 1.3rem;
+ }
+
+ .div_row_droite_cpf {
+ float: right;
+ width: 40%;
+ text-align: right;
+ }
+
+ .div_row_gauche_critere {
+ padding: 10px;
+ width: 66% !important;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+
+
+ .div_row_droite_critere {
+ padding: 10px;
+ width: 34% !important;
+ margin-top: 15px;
+ }
+
+
+ .bton_se_renseinger {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 90%;
+ background: #FFFFFF !important;
+ color: #104277 !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_voir_detail {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 90%;
+ background-color: #104277 !important;
+ color: white !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_sinscrire {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 90%;
+ background-color: #619E31 !important;
+ color: white !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .row_formation_desc {
+ min-height: 5rem !important;
+ }
+
+ .row_formation_title {
+ min-height: 3rem !important;
+ }
+
+ .row_formation_crit {
+ min-height: 10rem !important;
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 20px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 18px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ }
+
+
+
+ .block_cats {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ margin: 0 auto;
+ //width: 286px;
+ // height: 96px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ width: 80%;
+
+ }
+
+ .block_cats_bton_detail {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 6px 8px;
+
+ //width: 286px;
+ height: 34px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ border: 1px solid #E2E9FB;
+
+ }
+
+ .block_cats_bton_detail_text {
+
+ height: 14px;
+
+ /* Button/Small - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 126%;
+ /* identical to box height, or 18px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+ .block_main_contente {
+ /* Content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px 10px;
+ gap: 10px;
+
+ //width: 318px;
+ //height: 372px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 1;
+ z-index: 1;
+ margin-top: 15px;
+
+ }
+
+ .block_top_content {
+ /* Top-content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ padding: 0px;
+ gap: 10px;
+
+ margin: 0 auto;
+ //width: 286px;
+ //height: 241px;
+ min-height: 150px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+
+ }
+
+ .formation_titre {
+ height: 29px;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 120%;
+ text-transform: uppercase;
+ color: #16274F;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+
+ }
+
+ .formation_prix {
+ /* 1680€ HT */
+
+
+ height: 20px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 140%;
+ /* identical to box height, or 20px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+
+ }
+
+ .formation_description {
+ /* Comprendre la Cryptomonnaie et la Blockchain en 8 Minutes. Dans cette v... */
+
+ width: 100%;
+ height: 64px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 160%;
+ /* or 22px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 2;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ }
+
+ .tag_cpf_txt_ok_cpf {
+ /* Éligible au CPF */
+
+ width: 97px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Green/Normal */
+ color: #0AA690;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .tag_cpf_txt_no_ok_cpf {
+ /* NON Éligible au CPF */
+
+ width: 127px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ color: #B74949;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .case_cpf {
+ width: 48%;
+ float: right;
+ padding-right: 5px;
+ background: #FFFFFF;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .div_row {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 100%;
+ margin-bottom: 2px !important;
+ border-radius: 1rem;
+ }
+
+ .div_row_gauche {
+ float: left;
+ // border:1px solid black;
+ // border-width:0.01rem;
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: right;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .forma_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+ .forma_leftbox {
+ float: left;
+ border-width: 2px;
+ width: 20%;
+ height: 100%;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .forma_rightbox {
+ float: right;
+ border-width: 2px;
+ width: 76%;
+ margin: auto;
+ padding: 0.5rem;
+ font-size: small;
+ text-align: left;
+ color: rgb(10, 42, 77);
+ cursor: pointer;
+ overflow-wrap: break-word;
+ }
+
+ .criteres {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ font-size: 0.8rem;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+ }
+
+ .h1_forma {
+ color: #ff4411;
+ font-size: medium;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ }
+
+ .p_forma {
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-size: 0.77rem;
+ font-weight: var(--bs-body-font-weight);
+ line-height: var(--bs-body-line-height);
+ color: #3b3e40;
+ padding-bottom: 0rem;
+ text-align: justify;
+ word-break: break-word;
+ line-height: 1.3rem;
+ }
+
+ .imgcoeur {
+ width: 45%;
+ }
+
+ .forma_img_gauche {
+ float: left;
+ border-width: 2px;
+ width: 24%;
+ padding: 0.3rem;
+ font-size: 11px;
+ text-align: center;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+ }
+
+ .training_img {
+ max-width: 100%;
+ border-radius: 10px;
+ }
+
+ .div_row_critere {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 95%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ }
+
+
+ .training_title {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 20px;
+ /* identical to box height */
+
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ }
+
+ .training_price {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+
+ }
+
+ .bton_inscris {
+ position: relative;
+ background: red;
+ -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(white));
+
+ }
+
+ bton_inscris:after,
+ bton_inscris:before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: inherit;
+ height: 50%;
+ bottom: -52%;
+ }
+
+ bton_inscris:after {}
+
+ bton_inscris:before {
+ z-index: 1;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
+ }
+
+ //----
+
+ .block_cpf {
+ /* Tag */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+ //position: absolute;
+ //width: 173px;
+ //height: 37px;
+ //right: -16px;
+ top: 0px;
+
+ background: #FFE7DA;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ }
+
+ .block_cpf_txt {
+ //width: 153px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .react-share__ShareButton {
+ width: 2rem !important;
+ text-align: left;
+ }
+
+ .css-ryrseu-MuiRating-root {
+ font-size: 1.3rem;
+ }
+
+ .div_row_droite_cpf {
+ float: right;
+ width: 30%;
+ text-align: right;
+ }
+
+ .div_row_gauche_critere {
+ padding: 10px;
+ width: 60% !important;
+ padding-left: 5%;
+ }
+
+ .div_row_droite_critere {
+ padding: 10px;
+ width: 40% !important;
+ margin-top: 5px;
+ }
+
+
+ .bton_se_renseinger {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 60%;
+ background: #FFFFFF !important;
+ color: #104277 !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_voir_detail {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 60%;
+ background-color: #104277 !important;
+ color: white !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_sinscrire {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 60%;
+ background-color: #619E31 !important;
+ color: white !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .ftion_tab_gauche {
+ width: 70%;
+ }
+
+ .ftion_tab_droite {
+ width: 30%;
+ }
+
+ .row_formation_desc {
+ min-height: 5rem !important;
+ }
+
+ .row_formation_title {
+ min-height: 3rem !important;
+ }
+
+ .row_formation_crit {
+ min-height: 10rem !important;
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 20px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 18px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ }
+
+
+
+ .block_cats {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ margin: 0 auto;
+ //width: 286px;
+ // height: 96px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ width: 80%;
+
+ }
+
+ .block_cats_bton_detail {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 6px 8px;
+
+ //width: 286px;
+ height: 40px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .block_cats_bton_detail_text {
+
+ height: 18px;
+
+ /* Button/Small - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ /* identical to box height, or 18px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+ .block_main_contente {
+ /* Content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px 10px;
+ gap: 10px;
+
+ //width: 318px;
+ //height: 372px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 1;
+ z-index: 1;
+ margin-top: 15px;
+
+ }
+
+ .block_top_content {
+ /* Top-content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ padding: 0px;
+ gap: 10px;
+
+ margin: 0 auto;
+ //width: 286px;
+ //height: 241px;
+ min-height: 150px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+
+ }
+
+ .formation_titre {
+ height: 29px;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 120%;
+ text-transform: uppercase;
+ color: #16274F;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+
+ }
+
+ .formation_prix {
+ /* 1680€ HT */
+
+
+ height: 20px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 140%;
+ /* identical to box height, or 20px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+
+ }
+
+ .formation_description {
+ /* Comprendre la Cryptomonnaie et la Blockchain en 8 Minutes. Dans cette v... */
+
+ width: 100%;
+ height: 64px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 160%;
+ /* or 22px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 2;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ }
+
+ .tag_cpf_txt_ok_cpf {
+ /* Éligible au CPF */
+
+ width: 97px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Green/Normal */
+ color: #0AA690;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .tag_cpf_txt_no_ok_cpf {
+ /* NON Éligible au CPF */
+
+ width: 127px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ color: #B74949;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .case_cpf {
+ width: 48%;
+ float: right;
+ padding-right: 5px;
+ background: #FFFFFF;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .div_row {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 100%;
+ //margin-bottom: 1rem;
+ border-radius: 1rem;
+ }
+
+ .div_row_gauche {
+ float: left;
+ // border:1px solid black;
+ // border-width:0.01rem;
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .div_row_droite {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 45%;
+ border-radius: 1rem;
+ }
+
+ .forma_container {
+ width: 90%;
+ height: 200px;
+ background: aqua;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ }
+
+ .forma_leftbox {
+ float: left;
+ border-width: 2px;
+ width: 20%;
+ height: 100%;
+ margin: auto;
+ padding: 10px;
+ border-radius: 30px;
+ margin-right: 0.5%;
+ }
+
+ .forma_rightbox {
+ float: right;
+ border-width: 2px;
+ width: 79%;
+ margin: auto;
+ padding: 0.5rem;
+ font-size: small;
+ text-align: left;
+ color: rgb(10, 42, 77);
+ cursor: pointer;
+ overflow-wrap: break-word;
+ }
+
+ .criteres {
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ color: #104277;
+ font-size: small;
+ padding-bottom: 0rem;
+ margin-bottom: 0rem;
+
+
+ }
+
+ .h1_forma {
+ color: #ff4411;
+ font-size: medium;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif;
+ }
+
+ .p_forma {
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ font-weight: var(--bs-body-font-weight);
+ line-height: var(--bs-body-line-height);
+ padding-bottom: 0rem;
+ text-align: justify;
+ word-break: break-word;
+ line-height: 1.3rem;
+ font-size: 0.8rem;
+ margin-bottom: 4px;
+ color: #3b3e40;
+ }
+
+ .imgcoeur {
+ width: 20%;
+ }
+
+ .forma_img_gauche {
+ float: left;
+ border-width: 2px;
+ width: 20%;
+ padding: 0.3rem;
+ font-size: 11px;
+ text-align: center;
+ color: rgb(10, 42, 77);
+ margin-top: 1px;
+ cursor: pointer;
+ }
+
+ .training_img {
+ max-width: 100%;
+ border-radius: 10px;
+ }
+
+ .div_row_critere {
+ float: left;
+ //border:1px solid black;
+ //border-width:0.01rem;
+ width: 98%;
+ margin-bottom: 1rem;
+ border-radius: 1rem;
+ }
+
+ .training_title {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman';
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ /* identical to box height */
+
+ font-feature-settings: 'liga' off;
+
+ /* Blue */
+
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ text-transform: uppercase;
+ }
+
+ .training_price {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+
+ }
+
+ .aaatraining_price_barre {
+ color: #619e31;
+ font-size: 1rem;
+ font-family: "Quicksand", "Signika", sans-serif;
+ text-align: left;
+ letter-spacing: 1px;
+ margin-bottom: 0.6rem !important;
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 18px;
+ line-height: 22px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ text-decoration: line-through;
+
+ }
+
+ .discounted_price {
+ font-weight: 600;
+ font-size: 20px;
+ color: #ff8c00;
+ }
+
+ .training_price_barre {
+ font-weight: 500;
+ font-size: 18px;
+ color: #647585;
+ text-decoration: line-through;
+ margin-left: 2rem;
+ }
+
+ .bton_inscris {
+ position: relative;
+ background: red;
+ -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(white));
+
+ }
+
+ bton_inscris:after,
+ bton_inscris:before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: inherit;
+ height: 50%;
+ bottom: -52%;
+ }
+
+ bton_inscris:after {}
+
+ bton_inscris:before {
+ z-index: 1;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
+ }
+
+ //----
+
+ .block_cpf {
+ /* Tag */
+
+
+ /* Auto layout */
+
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px;
+ gap: 10px;
+
+ //position: absolute;
+ //width: 173px;
+ //height: 37px;
+ //right: -16px;
+ top: 0px;
+
+ background: #FFE7DA;
+ border-radius: 4px;
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 2;
+ flex-grow: 0;
+ z-index: 2;
+ }
+
+ .block_cpf_txt {
+ //width: 153px;
+ height: 17px;
+
+ font-family: 'Albert Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 17px;
+ /* identical to box height */
+
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Deep Blue */
+
+ color: #0A043C;
+
+
+ /* Inside auto layout */
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ }
+
+ .react-share__ShareButton {
+ width: 2rem !important;
+ text-align: left;
+ }
+
+ .css-ryrseu-MuiRating-root {
+ font-size: 1.3rem;
+ }
+
+
+ .div_row_droite_cpf {
+ float: right;
+ width: 25%;
+ text-align: right;
+ }
+
+
+ .div_row_gauche_critere {
+ padding: 10px;
+ width: 55%;
+ padding-left: 5%;
+ }
+
+
+ .div_row_droite_critere {
+ padding: 10px;
+ width: 45% !important;
+ margin-top: 15px;
+ }
+
+
+ .bton_se_renseinger {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 70%;
+ background: #FFFFFF !important;
+ color: #104277 !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_voir_detail {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 70%;
+ background-color: #104277 !important;
+ color: white !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .bton_sinscrire {
+ border-radius: 15px;
+ font-size: small;
+ padding: 0.2rem;
+ width: 70%;
+ background-color: #619E31 !important;
+ color: white !important;
+ margin-right: 10px;
+ height: 2rem;
+ margin: 5px;
+
+ }
+
+ .row_formation_desc {
+ min-height: 5rem !important;
+ }
+
+ .row_formation_title {
+ min-height: 3rem !important;
+ }
+
+ .row_formation_crit {
+ min-height: 10rem !important;
+ }
+
+ .discount_block {
+ font-weight: 400;
+ margin-left: 1rem;
+ color: red;
+ }
+
+ .block_cats {
+ /* CTA's */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0px;
+ gap: 8px;
+
+ margin: 0 auto;
+ //width: 286px;
+ // height: 96px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ flex-grow: 0;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ width: 80%;
+
+ }
+
+ .block_cats_bton_detail {
+ /* Button text */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 12px 16px;
+
+ //width: 286px;
+ height: 44px;
+
+ /* Foundation /Blue/Normal */
+ background: #3E6EE3;
+ border-radius: 200px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ }
+
+ .block_cats_bton_detail_text {
+
+ height: 18px;
+
+ /* Button/Small - Bold */
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ /* identical to box height, or 18px */
+
+ /* Foundation/White */
+ color: #FFFFFF;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+
+ }
+
+ .block_main_contente {
+ /* Content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px 16px;
+ gap: 16px;
+
+ //width: 318px;
+ //height: 372px;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 1;
+ z-index: 1;
+ margin-top: 15px;
+
+ }
+
+ .block_top_content {
+ /* Top-content */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ padding: 0px;
+ gap: 10px;
+
+ margin: 0 auto;
+ //width: 286px;
+ //height: 241px;
+ min-height: 150px;
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ text-align: left;
+
+ }
+
+ .formation_titre {
+ height: 19px;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13px;
+ line-height: 120%;
+ text-transform: uppercase;
+ color: #16274F;
+ flex: none;
+ flex-grow: 0;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ font-family: "verdana", "Quicksand", "Signika", sans-serif !important;
+
+ }
+
+ .formation_prix {
+ /* 1680€ HT */
+
+
+ height: 20px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 140%;
+ /* identical to box height, or 20px */
+ text-transform: uppercase;
+
+ /* Foundation /Blue/Normal */
+ color: #3E6EE3;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 1;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+
+ }
+
+ .formation_description {
+ /* Comprendre la Cryptomonnaie et la Blockchain en 8 Minutes. Dans cette v... */
+
+ width: 100%;
+ height: 44px;
+
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 160%;
+ /* or 22px */
+
+ /* Foundation /Blue-Grey/Normal */
+ color: #4B5162;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 2;
+ align-self: stretch;
+ flex-grow: 0;
+ margin-bottom: 1px;
+ }
+
+ .tag_cpf_txt_ok_cpf {
+ /* Éligible au CPF */
+
+ width: 97px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ /* Foundation /Green/Normal */
+ color: #0AA690;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .tag_cpf_txt_no_ok_cpf {
+ /* NON Éligible au CPF */
+
+ width: 127px;
+ height: 12px;
+
+ font-family: 'DM Sans';
+ font-style: normal;
+ font-weight: 900;
+ font-size: 12px;
+ line-height: 12px;
+ /* identical to box height, or 100% */
+ text-transform: uppercase;
+ font-feature-settings: 'liga' off;
+
+ color: #B74949;
+
+
+ /* Inside auto layout */
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+
+ }
+
+ .case_cpf {
+ width: 30%;
+ float: right;
+ padding-right: 5px;
+ background: #FFFFFF;
+ }
+ }
+
+ // end media
+
+
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_header_2025.scss b/src/styles/components/_new_s_header_2025.scss
new file mode 100644
index 0000000..c9f418d
--- /dev/null
+++ b/src/styles/components/_new_s_header_2025.scss
@@ -0,0 +1,290 @@
+.new_s_header_2025{
+
+ @media only screen and (max-width: 600px) {
+ }
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+ .header-menu {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 14px 48px;
+ border-bottom: 1px solid #dcdcdc;
+ width: 100%;
+ height: 72px;
+ }
+
+ .logo-menu {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ }
+
+ .logo {
+ width: 96px;
+ height: 32px;
+ }
+
+ .menu-list {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ }
+
+ .menu-link {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ text-decoration: none;
+ }
+
+ .separator {
+ width: 1px;
+ height: 12px;
+ background-color: rgba(23, 23, 23, 0.1);
+ border-radius: 30px;
+ }
+
+ .cta-login {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .btn {
+ padding: 12px 16px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ cursor: pointer;
+ }
+
+ .btn-outline {
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ color: #4b5162;
+ }
+
+ .btn-primary {
+ background: #3e6ee3;
+ border: none;
+ color: #fff;
+ }
+
+ .login-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 122%;
+ color: #171717;
+ }
+
+ .user-icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .header-menu {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 14px 48px;
+ border-bottom: 1px solid #dcdcdc;
+ width: 100%;
+ height: 72px;
+ }
+
+ .logo-menu {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ }
+
+ .logo {
+ width: 96px;
+ height: 32px;
+ }
+
+ .menu-list {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ }
+
+ .menu-link {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ text-decoration: none;
+ }
+
+ .separator {
+ width: 1px;
+ height: 12px;
+ background-color: rgba(23, 23, 23, 0.1);
+ border-radius: 30px;
+ }
+
+ .cta-login {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .btn {
+ padding: 12px 16px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ cursor: pointer;
+ }
+
+ .btn-outline {
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ color: #4b5162;
+ }
+
+ .btn-primary {
+ background: #3e6ee3;
+ border: none;
+ color: #fff;
+ }
+
+ .login-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 122%;
+ color: #171717;
+ }
+
+ .user-icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ .header-menu {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 14px 48px;
+ border-bottom: 1px solid #dcdcdc;
+ width: 100%;
+ height: 72px;
+ }
+
+ .logo-menu {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ }
+
+ .logo {
+ width: 96px;
+ height: 32px;
+ }
+
+ .menu-list {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ }
+
+ .menu-link {
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 122%;
+ color: #4b5162;
+ text-decoration: none;
+ }
+
+ .separator {
+ width: 1px;
+ height: 12px;
+ background-color: rgba(23, 23, 23, 0.1);
+ border-radius: 30px;
+ }
+
+ .cta-login {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .btn {
+ padding: 12px 16px;
+ border-radius: 200px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 126%;
+ cursor: pointer;
+ }
+
+ .btn-outline {
+ border: 1px solid #c7c9ce;
+ background: transparent;
+ color: #4b5162;
+ }
+
+ .btn-primary {
+ background: #3e6ee3;
+ border: none;
+ color: #fff;
+ }
+
+ .login-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 122%;
+ color: #171717;
+ }
+
+ .user-icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+
+ // end media
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_mes_tarifs_2025.scss b/src/styles/components/_new_s_mes_tarifs_2025.scss
new file mode 100644
index 0000000..10806d2
--- /dev/null
+++ b/src/styles/components/_new_s_mes_tarifs_2025.scss
@@ -0,0 +1,1954 @@
+.new_s_sign_up_2025 {
+
+ @media only screen and (max-width: 600px) {
+
+ .log-in-page-desktop {
+ display: none;
+ }
+
+ .log-in-page-mobile {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-mobile .div {
+ background-color: #edeffa;
+ width: 100%;
+ height: 180vh;
+ position: relative;
+ }
+
+ .log-in-page-mobile .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 335px;
+ align-items: center;
+ gap: 32px;
+ padding: 24px 20px;
+ position: absolute;
+ top: 206px;
+ left: 20px;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-mobile .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-wrapper {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-mobile .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-mobile .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-mobile .label {
+ display: inline-flex;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .label-2 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-mobile .text-wrapper-2 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 100%;
+ }
+
+ .log-in-page-mobile .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ }
+
+ .log-in-page-mobile .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-mobile .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-mobile .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-mobile .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-mobile .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+
+ }
+
+ .log-in-page-mobile .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-wrapper-4 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-mobile .text-wrapper-5 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+
+ .log-in-page-mobile .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 126px;
+ left: 129px;
+ }
+
+ .log-in-page-mobile .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-mobile .overlap {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -1195px;
+ left: -1669px;
+ }
+
+ .log-in-page-mobile .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .overlap-group {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-mobile .text-wrapper-6 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .log-in-page-mobile .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 70px;
+ left: 20px;
+ }
+
+ .log-in-page-mobile .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-mobile .text-wrapper-7 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-mobile .status-bar-mini {
+ position: fixed;
+ width: 375px;
+ height: 50px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .status-mini {
+ position: absolute;
+ width: 68px;
+ height: 13px;
+ top: 21px;
+ left: 296px;
+ }
+
+ .log-in-page-mobile .battery-mini {
+ position: absolute;
+ width: 23px;
+ height: 11px;
+ top: 1px;
+ left: 45px;
+ }
+
+ .log-in-page-mobile .capacity-wrapper {
+ position: absolute;
+ width: 21px;
+ height: 11px;
+ top: 0;
+ left: 0;
+ background-image: url(./../../../public/img/border.svg);
+ background-size: 100% 100%;
+ }
+
+ .log-in-page-mobile .capacity {
+ position: relative;
+ width: 17px;
+ height: 7px;
+ top: 2px;
+ left: 2px;
+ background-color: #000000;
+ border-radius: 1.33px;
+ }
+
+ .log-in-page-mobile .cap {
+ position: absolute;
+ width: 1px;
+ height: 4px;
+ top: 4px;
+ left: 22px;
+ }
+
+ .log-in-page-mobile .wifi {
+ position: absolute;
+ width: 15px;
+ height: 11px;
+ top: 1px;
+ left: 24px;
+ }
+
+ .log-in-page-mobile .cellular {
+ position: absolute;
+ width: 17px;
+ height: 11px;
+ top: 1px;
+ left: 2px;
+ }
+
+ .log-in-page-mobile .time {
+ position: absolute;
+ height: 18px;
+ top: 18px;
+ left: 27px;
+ font-family: "SF Pro Text-Semibold", Helvetica;
+ font-weight: 400;
+ color: #000000;
+ font-size: 15px;
+ text-align: center;
+ letter-spacing: -0.28px;
+ line-height: normal;
+ white-space: nowrap;
+ }
+
+ .log-in-page-mobile .URL-bar-scroll-mini {
+ position: fixed;
+ width: 100%;
+ height: 52px;
+ top: 848px;
+ left: 0;
+ background-color: var(--browser-uidark-bg);
+ box-shadow: var(--bottom-bar-dark);
+ backdrop-filter: blur(20px) brightness(100%);
+ -webkit-backdrop-filter: blur(20px) brightness(100%);
+ }
+
+ .log-in-page-mobile .home {
+ position: absolute;
+ width: 133px;
+ height: 5px;
+ top: 40px;
+ left: 121px;
+ background-color: #ffffff33;
+ border-radius: 4px;
+ }
+
+ .log-in-page-mobile .domain {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ position: absolute;
+ top: 12px;
+ left: 136px;
+ }
+
+ .log-in-page-mobile .trust {
+ position: relative;
+ width: 6.23px;
+ height: 9.06px;
+ }
+
+ .log-in-page-mobile .domain-2 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "SF Pro Display-Regular", Helvetica;
+ font-weight: 400;
+ color: #ffffff;
+ font-size: 12.7px;
+ letter-spacing: 0.13px;
+ line-height: normal;
+ white-space: nowrap;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 130vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 60%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 200px;
+ left: 20%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 20px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 100px;
+ left: 42%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 130vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 40%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 200px;
+ left: 30%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 200px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 100px;
+ left: 45%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+ @media only screen and (min-width: 1200px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 130vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 40%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 200px;
+ left: 30%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 100px;
+ left: 45%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+ // end media
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_sign_in_2025.scss b/src/styles/components/_new_s_sign_in_2025.scss
new file mode 100644
index 0000000..8a86fea
--- /dev/null
+++ b/src/styles/components/_new_s_sign_in_2025.scss
@@ -0,0 +1,1895 @@
+.new_s_sign_in_2025 {
+
+ @media only screen and (max-width: 600px) {
+
+ .log-in-page-desktop {
+ display: none;
+ }
+
+ .log-in-page-mobile {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-mobile .div {
+ background-color: #edeffa;
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ }
+
+ .log-in-page-mobile .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 335px;
+ align-items: center;
+ gap: 32px;
+ padding: 24px 20px;
+ position: absolute;
+ top: 206px;
+ left: 20px;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-mobile .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-wrapper {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-mobile .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-mobile .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-mobile .label {
+ display: inline-flex;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .label-2 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-mobile .text-wrapper-2 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 100%;
+ }
+
+ .log-in-page-mobile .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ }
+
+ .log-in-page-mobile .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-mobile .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-mobile .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-mobile .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-mobile .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+
+ }
+
+ .log-in-page-mobile .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-wrapper-4 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-mobile .text-wrapper-5 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+
+ .log-in-page-mobile .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 126px;
+ left: 129px;
+ }
+
+ .log-in-page-mobile .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-mobile .overlap {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -1195px;
+ left: -1669px;
+ }
+
+ .log-in-page-mobile .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .overlap-group {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-mobile .text-wrapper-6 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .log-in-page-mobile .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 70px;
+ left: 20px;
+ }
+
+ .log-in-page-mobile .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-mobile .text-wrapper-7 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-mobile .status-bar-mini {
+ position: fixed;
+ width: 375px;
+ height: 50px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .status-mini {
+ position: absolute;
+ width: 68px;
+ height: 13px;
+ top: 21px;
+ left: 296px;
+ }
+
+ .log-in-page-mobile .battery-mini {
+ position: absolute;
+ width: 23px;
+ height: 11px;
+ top: 1px;
+ left: 45px;
+ }
+
+ .log-in-page-mobile .capacity-wrapper {
+ position: absolute;
+ width: 21px;
+ height: 11px;
+ top: 0;
+ left: 0;
+ background-image: url(./../../../public/img/border.svg);
+ background-size: 100% 100%;
+ }
+
+ .log-in-page-mobile .capacity {
+ position: relative;
+ width: 17px;
+ height: 7px;
+ top: 2px;
+ left: 2px;
+ background-color: #000000;
+ border-radius: 1.33px;
+ }
+
+ .log-in-page-mobile .cap {
+ position: absolute;
+ width: 1px;
+ height: 4px;
+ top: 4px;
+ left: 22px;
+ }
+
+ .log-in-page-mobile .wifi {
+ position: absolute;
+ width: 15px;
+ height: 11px;
+ top: 1px;
+ left: 24px;
+ }
+
+ .log-in-page-mobile .cellular {
+ position: absolute;
+ width: 17px;
+ height: 11px;
+ top: 1px;
+ left: 2px;
+ }
+
+ .log-in-page-mobile .time {
+ position: absolute;
+ height: 18px;
+ top: 18px;
+ left: 27px;
+ font-family: "SF Pro Text-Semibold", Helvetica;
+ font-weight: 400;
+ color: #000000;
+ font-size: 15px;
+ text-align: center;
+ letter-spacing: -0.28px;
+ line-height: normal;
+ white-space: nowrap;
+ }
+
+ .log-in-page-mobile .URL-bar-scroll-mini {
+ position: fixed;
+ width: 100%;
+ height: 52px;
+ top: 848px;
+ left: 0;
+ background-color: var(--browser-uidark-bg);
+ box-shadow: var(--bottom-bar-dark);
+ backdrop-filter: blur(20px) brightness(100%);
+ -webkit-backdrop-filter: blur(20px) brightness(100%);
+ }
+
+ .log-in-page-mobile .home {
+ position: absolute;
+ width: 133px;
+ height: 5px;
+ top: 40px;
+ left: 121px;
+ background-color: #ffffff33;
+ border-radius: 4px;
+ }
+
+ .log-in-page-mobile .domain {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ position: absolute;
+ top: 12px;
+ left: 136px;
+ }
+
+ .log-in-page-mobile .trust {
+ position: relative;
+ width: 6.23px;
+ height: 9.06px;
+ }
+
+ .log-in-page-mobile .domain-2 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "SF Pro Display-Regular", Helvetica;
+ font-weight: 400;
+ color: #ffffff;
+ font-size: 12.7px;
+ letter-spacing: 0.13px;
+ line-height: normal;
+ white-space: nowrap;
+ }
+ }
+
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 100vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 60%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 233px;
+ left: 20%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 20px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 153px;
+ left: 42%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 100vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 40%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 233px;
+ left: 30%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 200px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 153px;
+ left: 45%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 100vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 40%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 233px;
+ left: 30%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 153px;
+ left: 45%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+ }
+
+ // end media
+
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_new_s_sign_up_2025.scss b/src/styles/components/_new_s_sign_up_2025.scss
new file mode 100644
index 0000000..10806d2
--- /dev/null
+++ b/src/styles/components/_new_s_sign_up_2025.scss
@@ -0,0 +1,1954 @@
+.new_s_sign_up_2025 {
+
+ @media only screen and (max-width: 600px) {
+
+ .log-in-page-desktop {
+ display: none;
+ }
+
+ .log-in-page-mobile {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-mobile .div {
+ background-color: #edeffa;
+ width: 100%;
+ height: 180vh;
+ position: relative;
+ }
+
+ .log-in-page-mobile .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 335px;
+ align-items: center;
+ gap: 32px;
+ padding: 24px 20px;
+ position: absolute;
+ top: 206px;
+ left: 20px;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-mobile .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-wrapper {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-mobile .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-mobile .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-mobile .label {
+ display: inline-flex;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .label-2 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-mobile .text-wrapper-2 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 100%;
+ }
+
+ .log-in-page-mobile .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ }
+
+ .log-in-page-mobile .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-mobile .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-mobile .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-mobile .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-mobile .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+
+ }
+
+ .log-in-page-mobile .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-mobile .text-wrapper-4 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-mobile .text-wrapper-5 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+
+ .log-in-page-mobile .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 126px;
+ left: 129px;
+ }
+
+ .log-in-page-mobile .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-mobile .overlap {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -1195px;
+ left: -1669px;
+ }
+
+ .log-in-page-mobile .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .overlap-group {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-mobile .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-mobile .text-wrapper-6 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .log-in-page-mobile .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 70px;
+ left: 20px;
+ }
+
+ .log-in-page-mobile .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-mobile .text-wrapper-7 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-mobile .status-bar-mini {
+ position: fixed;
+ width: 375px;
+ height: 50px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-mobile .status-mini {
+ position: absolute;
+ width: 68px;
+ height: 13px;
+ top: 21px;
+ left: 296px;
+ }
+
+ .log-in-page-mobile .battery-mini {
+ position: absolute;
+ width: 23px;
+ height: 11px;
+ top: 1px;
+ left: 45px;
+ }
+
+ .log-in-page-mobile .capacity-wrapper {
+ position: absolute;
+ width: 21px;
+ height: 11px;
+ top: 0;
+ left: 0;
+ background-image: url(./../../../public/img/border.svg);
+ background-size: 100% 100%;
+ }
+
+ .log-in-page-mobile .capacity {
+ position: relative;
+ width: 17px;
+ height: 7px;
+ top: 2px;
+ left: 2px;
+ background-color: #000000;
+ border-radius: 1.33px;
+ }
+
+ .log-in-page-mobile .cap {
+ position: absolute;
+ width: 1px;
+ height: 4px;
+ top: 4px;
+ left: 22px;
+ }
+
+ .log-in-page-mobile .wifi {
+ position: absolute;
+ width: 15px;
+ height: 11px;
+ top: 1px;
+ left: 24px;
+ }
+
+ .log-in-page-mobile .cellular {
+ position: absolute;
+ width: 17px;
+ height: 11px;
+ top: 1px;
+ left: 2px;
+ }
+
+ .log-in-page-mobile .time {
+ position: absolute;
+ height: 18px;
+ top: 18px;
+ left: 27px;
+ font-family: "SF Pro Text-Semibold", Helvetica;
+ font-weight: 400;
+ color: #000000;
+ font-size: 15px;
+ text-align: center;
+ letter-spacing: -0.28px;
+ line-height: normal;
+ white-space: nowrap;
+ }
+
+ .log-in-page-mobile .URL-bar-scroll-mini {
+ position: fixed;
+ width: 100%;
+ height: 52px;
+ top: 848px;
+ left: 0;
+ background-color: var(--browser-uidark-bg);
+ box-shadow: var(--bottom-bar-dark);
+ backdrop-filter: blur(20px) brightness(100%);
+ -webkit-backdrop-filter: blur(20px) brightness(100%);
+ }
+
+ .log-in-page-mobile .home {
+ position: absolute;
+ width: 133px;
+ height: 5px;
+ top: 40px;
+ left: 121px;
+ background-color: #ffffff33;
+ border-radius: 4px;
+ }
+
+ .log-in-page-mobile .domain {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ position: absolute;
+ top: 12px;
+ left: 136px;
+ }
+
+ .log-in-page-mobile .trust {
+ position: relative;
+ width: 6.23px;
+ height: 9.06px;
+ }
+
+ .log-in-page-mobile .domain-2 {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "SF Pro Display-Regular", Helvetica;
+ font-weight: 400;
+ color: #ffffff;
+ font-size: 12.7px;
+ letter-spacing: 0.13px;
+ line-height: normal;
+ white-space: nowrap;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+
+ @media only screen and (min-width: 601px) and (max-width: 991px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 130vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 60%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 200px;
+ left: 20%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 20px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 100px;
+ left: 42%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 130vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 40%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 200px;
+ left: 30%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 200px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 100px;
+ left: 45%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+ @media only screen and (min-width: 1200px) {
+
+
+ * {
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ }
+
+
+ /* a blue color as a generic focus style */
+ button:focus-visible {
+ outline: 2px solid #4a90e2 !important;
+ outline: -webkit-focus-ring-color auto 5px !important;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .log-in-page-mobile {
+ display: none;
+ }
+
+ .log-in-page-desktop {
+ background-color: #edeffa;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+
+ .log-in-page-desktop .div {
+ background-color: #edeffa;
+ width: 1440px;
+ height: 130vh;
+ position: relative;
+ }
+
+ .log-in-page-desktop .back {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ }
+
+ .log-in-page-desktop .line-arrow-left {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ }
+
+ .log-in-page-desktop .text-wrapper {
+ position: relative;
+ width: fit-content;
+ margin-top: -1.00px;
+ font-family: "Inter-Medium", Helvetica;
+ font-weight: 500;
+ color: var(--foundation-bluedarker);
+ font-size: 16px;
+ letter-spacing: 0;
+ line-height: 24px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .sign-in {
+ display: flex;
+ flex-direction: column;
+ width: 40%;
+ align-items: center;
+ gap: 32px;
+ padding: 24px;
+ position: absolute;
+ top: 200px;
+ left: 30%;
+ background-color: var(--foundationwhite);
+ border-radius: 8px;
+ }
+
+ .log-in-page-desktop .sign-in-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-2 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "DM Sans-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluedarker);
+ font-size: 24px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 31.7px;
+ }
+
+ .log-in-page-desktop .p {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 14px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 16.8px;
+ }
+
+ .log-in-page-desktop .info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .input {
+ display: flex;
+ height: 56px;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ background-color: var(--text-color100);
+ border-radius: 4px;
+ border: 1px solid;
+ border-color: #cbd5e0;
+ }
+
+ .log-in-page-desktop .text-wrapper-3 {
+ position: relative;
+ width: fit-content;
+ opacity: 0.5;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ width: 90%;
+ }
+
+ .log-in-page-desktop .footer {
+ display: flex;
+ align-items: center;
+ gap: 51px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: transparent;
+ padding: 0px;
+ }
+
+ .log-in-page-desktop .remember-me {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .checkbox {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 4px;
+ }
+
+ .log-in-page-desktop .check {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ top: 3px;
+ left: 3px;
+ }
+
+ .log-in-page-desktop .text-wrapper-4 {
+ position: relative;
+ width: fit-content;
+ margin-top: -0.50px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ }
+
+ .log-in-page-desktop .text-wrapper-5 {
+ position: absolute;
+ height: 19px;
+ top: 0;
+ left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .text-wrapper-5_v2 {
+ // position: absolute;
+ height: 19px;
+ top: 0;
+ // left: 339px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+
+ .log-in-page-desktop .log-in {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .button-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ background-color: var(--foundation-bluenormal);
+ border-radius: 200px;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .div-wrapper {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ justify-content: center;
+ padding: 0px 8px;
+ position: relative;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-2 {
+ position: relative;
+ width: fit-content;
+ font-family: var(--button-base-bold-font-family);
+ font-weight: var(--button-base-bold-font-weight);
+ color: var(--foundationwhite);
+ font-size: var(--button-base-bold-font-size);
+ letter-spacing: var(--button-base-bold-letter-spacing);
+ line-height: var(--button-base-bold-line-height);
+ white-space: nowrap;
+ font-style: var(--button-base-bold-font-style);
+ }
+
+ .log-in-page-desktop .create-account {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ position: relative;
+ align-self: stretch;
+ width: 100%;
+ flex: 0 0 auto;
+ }
+
+ .log-in-page-desktop .text-wrapper-6 {
+ position: relative;
+ align-self: stretch;
+ margin-top: -1.00px;
+ font-family: "Inter-Regular", Helvetica;
+ font-weight: 400;
+ color: var(--foundation-blue-greynormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 19.2px;
+ }
+
+ .log-in-page-desktop .text-wrapper-7 {
+ position: relative;
+ align-self: stretch;
+ font-family: "Inter-Bold", Helvetica;
+ font-weight: 700;
+ color: var(--foundation-bluenormal);
+ font-size: 16px;
+ text-align: center;
+ letter-spacing: 0;
+ line-height: 21.1px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .log-in-page-desktop .logo-mysy {
+ display: inline-flex;
+ flex-direction: column;
+ height: 56px;
+ align-items: flex-start;
+ gap: 4.3px;
+ position: absolute;
+ top: 100px;
+ left: 45%;
+ }
+
+ .log-in-page-desktop .logo-mysy-2 {
+ position: relative;
+ width: 116.08px;
+ height: 38.69px;
+ }
+
+ .log-in-page-desktop .overlap-group {
+ position: absolute;
+ width: 4px;
+ height: 9px;
+ top: -153px;
+ left: -2202px;
+ }
+
+ .log-in-page-desktop .vector {
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .img {
+ height: 6px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .vector-2 {
+ height: 9px;
+ position: absolute;
+ width: 3px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .overlap {
+ position: absolute;
+ width: 116px;
+ height: 39px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union {
+ position: absolute;
+ width: 107px;
+ height: 33px;
+ top: 0;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-2 {
+ width: 107px;
+ height: 21px;
+ top: 12px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .union-3 {
+ width: 116px;
+ height: 23px;
+ top: 16px;
+ position: absolute;
+ left: 0;
+ }
+
+ .log-in-page-desktop .text-wrapper-8 {
+ position: relative;
+ width: fit-content;
+ margin-bottom: -0.92px;
+ font-family: "DM Sans-Black", Helvetica;
+ font-weight: 900;
+ color: var(--foundation-greendarker);
+ font-size: 11.2px;
+ letter-spacing: 8.96px;
+ line-height: normal;
+ }
+
+ .titre1 {
+ font-family: "DM Sans-Black", Helvetica;
+ font-size: medium;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ color: white;
+ cursor: pointer;
+ font-style: italic;
+ background-color: gray;
+ font-weight: normal;
+ width: 100%;
+ float: left;
+ }
+
+ }
+
+ // end media
+
+}
\ No newline at end of file
diff --git a/src/styles/components/_recherchearticles_new_v2_style.scss b/src/styles/components/_recherchearticles_new_v2_style.scss
index 08616d9..bc764cd 100644
--- a/src/styles/components/_recherchearticles_new_v2_style.scss
+++ b/src/styles/components/_recherchearticles_new_v2_style.scss
@@ -1311,12 +1311,16 @@
// end media
.Background-header {
- position: absolute;
width: 100%;
- height: 150px;
+ height: 420px;
left: 0px;
+ top: 0px;
- background: var(--Beige, #FFF5DA);
+ background: #C4C8EE;
+ background: #f3f4fb;
+
+ opacity: 1;
+ padding: 50px;
}
/* Title */
@@ -1438,9 +1442,6 @@
}
-
-
-
.buton_ch22 {
border: 2px solid white;
background-color: transparent;
diff --git a/src/styles/index.css b/src/styles/index.css
index 795918b..1d851df 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -338,4 +338,46 @@ textarea {
color: #FAFFFF;
}
+
/*# sourceMappingURL=index.css.map */
+:root {
+ --foundationwhite: rgba(255, 255, 255, 1);
+ --foundation-bluelight: rgba(236, 241, 252, 1);
+ --foundation-bluenormal: rgba(62, 110, 227, 1);
+ --foundation-bluedarker: rgba(22, 39, 79, 1);
+ --foundation-greennormal: rgba(10, 166, 144, 1);
+ --foundation-greendarker: rgba(4, 58, 50, 1);
+ --foundationblacklight-hover: rgba(220, 220, 220, 1);
+ --foundationblacknormal: rgba(23, 23, 23, 1);
+ --foundation-blue-greynormal: rgba(75, 81, 98, 1);
+ --browser-uidark-bg: rgba(61, 61, 61, 0.94);
+ --text-color600-body: rgba(113, 128, 150, 1);
+ --text-color100: rgba(249, 250, 251, 1);
+ --text-color400: rgba(203, 213, 224, 1);
+ --desktop-hn-h2-desktop-font-family: "DM Sans", Helvetica;
+ --desktop-hn-h2-desktop-font-weight: 700;
+ --desktop-hn-h2-desktop-font-size: 40px;
+ --desktop-hn-h2-desktop-letter-spacing: 0px;
+ --desktop-hn-h2-desktop-line-height: 120.00000762939453%;
+ --desktop-hn-h2-desktop-font-style: normal;
+ --mobile-hn-h2-mobile-font-family: "DM Sans", Helvetica;
+ --mobile-hn-h2-mobile-font-weight: 700;
+ --mobile-hn-h2-mobile-font-size: 32px;
+ --mobile-hn-h2-mobile-letter-spacing: 0px;
+ --mobile-hn-h2-mobile-line-height: 120.00000762939453%;
+ --mobile-hn-h2-mobile-font-style: normal;
+ --16px-regular-font-family: "Inter", Helvetica;
+ --16px-regular-font-weight: 400;
+ --16px-regular-font-size: 16px;
+ --16px-regular-letter-spacing: 0px;
+ --16px-regular-line-height: 24px;
+ --16px-regular-font-style: normal;
+ --button-base-bold-font-family: "DM Sans", Helvetica;
+ --button-base-bold-font-weight: 700;
+ --button-base-bold-font-size: 16px;
+ --button-base-bold-letter-spacing: 0px;
+ --button-base-bold-line-height: 122%;
+ --button-base-bold-font-style: normal;
+ --bottom-bar-dark: ;
+}
+
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d14f58f..1dc1cdf 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,45 @@
-@import "./setting";
+:root {
+ --foundationwhite: rgba(255, 255, 255, 1);
+ --foundation-bluelight: rgba(236, 241, 252, 1);
+ --foundation-bluenormal: rgba(62, 110, 227, 1);
+ --foundation-bluedarker: rgba(22, 39, 79, 1);
+ --foundation-greennormal: rgba(10, 166, 144, 1);
+ --foundation-greendarker: rgba(4, 58, 50, 1);
+ --foundationblacklight-hover: rgba(220, 220, 220, 1);
+ --foundationblacknormal: rgba(23, 23, 23, 1);
+ --foundation-blue-greynormal: rgba(75, 81, 98, 1);
+ --browser-uidark-bg: rgba(61, 61, 61, 0.94);
+ --text-color600-body: rgba(113, 128, 150, 1);
+ --text-color100: rgba(249, 250, 251, 1);
+ --text-color400: rgba(203, 213, 224, 1);
+ --desktop-hn-h2-desktop-font-family: "DM Sans", Helvetica;
+ --desktop-hn-h2-desktop-font-weight: 700;
+ --desktop-hn-h2-desktop-font-size: 40px;
+ --desktop-hn-h2-desktop-letter-spacing: 0px;
+ --desktop-hn-h2-desktop-line-height: 120.00000762939453%;
+ --desktop-hn-h2-desktop-font-style: normal;
+ --mobile-hn-h2-mobile-font-family: "DM Sans", Helvetica;
+ --mobile-hn-h2-mobile-font-weight: 700;
+ --mobile-hn-h2-mobile-font-size: 32px;
+ --mobile-hn-h2-mobile-letter-spacing: 0px;
+ --mobile-hn-h2-mobile-line-height: 120.00000762939453%;
+ --mobile-hn-h2-mobile-font-style: normal;
+ --16px-regular-font-family: "Inter", Helvetica;
+ --16px-regular-font-weight: 400;
+ --16px-regular-font-size: 16px;
+ --16px-regular-letter-spacing: 0px;
+ --16px-regular-line-height: 24px;
+ --16px-regular-font-style: normal;
+ --button-base-bold-font-family: "DM Sans", Helvetica;
+ --button-base-bold-font-weight: 700;
+ --button-base-bold-font-size: 16px;
+ --button-base-bold-letter-spacing: 0px;
+ --button-base-bold-line-height: 122%;
+ --button-base-bold-font-style: normal;
+ --bottom-bar-dark: ;
+ }
+
+ @import "./setting";
@import "./components/contact";
@import "./components/navigation";
@import "./components/footer";
@@ -140,4 +181,16 @@
@import "./components/intranet_mes_stagiaires";
@import "./components/mon_intranet_public";
@import "./components/module_connexion_intranet_client";
-@import "./components/module_alert_confirmation";
\ No newline at end of file
+@import "./components/module_alert_confirmation";
+
+
+// New Design 2025
+@import "./components/new_s_sign_in_2025";
+@import "./components/new_s_sign_up_2025";
+@import "./components/new_s_header_2025";
+@import "./components/new_s_footer_2025";
+@import "./components/new_produitsservices_2025";
+@import "./components/new_buttonhilight_2025";
+@import "./components/new_s_article_detail_2025";
+@import "./components/new_s_article_2025";
+@import "./components/new_s_formation_2025";
\ No newline at end of file