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 Url +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ Image +
+ +
+ +
+ + + {logo_file_name && } + + + {img_img_article_file && } + + {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
+
} + + + +
+ + + +
+ + + + + +
+
+ +
+
+ + +
+
+ +
+ + +
+ {/*** FIN GESTION article */} + + +
+ + +
+
+
+
+ {props.article.title_formation} +
+ +
+
{ + 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(); + + }}> + + + + + +
} + + +
+
+
+
+
+ + + +
+ ) +} + + +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)} +
} +
+ {pagecanoniktitle} +
+
} + + {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 && + Course + } + + {(!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" && informatique} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") && + String(isclassimage) === "False" && graphisme} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") && + String(isclassimage) === "False" && management} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") && + String(isclassimage) === "False" && digital} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") && + String(isclassimage) === "False" && office} + + {!props.formation.img_url || String(props.formation.img_url).length <= 0 && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") && + String(isclassimage) === "False" && ressources humaines} + + {!props.formation.img_url || String(props.formation.img_url).length <= 0 && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") && + String(isclassimage) === "False" && vente} + + {!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" && developpement personnel} + + {String(isclassimage) === "True" && developpement personnel} + + +
+ } + + {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 &&
+ autre + {/*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 &&
+ autre + {/*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" &&
+ autre + {/*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)}...

+
+ +
+
+ + +
+
+ + + {/* +
+ + {class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 &&
+ informatique +
+ } + + + {(!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" && informatique} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") && + String(isclassimage) === "False" && graphisme} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") && + String(isclassimage) === "False" && management} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") && + String(isclassimage) === "False" && digital} + + {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") && + String(isclassimage) === "False" && office} + + {!props.formation.img_url || String(props.formation.img_url).length <= 0 && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") && + String(isclassimage) === "False" && ressources humaines} + + {!props.formation.img_url || String(props.formation.img_url).length <= 0 && + props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") && + String(isclassimage) === "False" && vente} + + {!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" && developpement personnel} + + {String(isclassimage) === "True" && developpement personnel} + + +
+ } + + + {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 &&
+ autre + {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 &&
+ autre + {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" &&
+ autre + {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 && +
+ + + + +
+ } + +
+ +
+ {parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, ''))} + +
+ {GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.length > 0 && + + } + {!GetCurrentClass_result || GetCurrentClass_result.length <= 0 && + + } + +
+
+
+ +
+ +
+
+ {!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") &&
+ coup de coeur +
} + + + + + +
+
+ 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" && +
+ + + + + + + {GetCurrentClass_result && GetCurrentClass_result.length > 0 && + + } + +
} + +
+
+
+ */} +
+ + ) +} + + +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*/} + + +
+
+ Logo MySy + + +
+ +
+
+ + +
+
+
+ User + 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" + + /> + + +
+ + +
+ + + + + + + + + + + + + + + + + +
+ {/*** FIN GESTION RESET PWD */} + + + + Connexion + + + + + + +
+
+
+
+
+
Connectez-vous
+ +
+
+
+ +
+ { + setlogin_email(event.target.value); + + }} + + /> +
+
+ { + setlogin_pwd(event.target.value); + + }} + + /> +
+
+
+ +
+ +
+
+
+ +
+ + +
+ + +
+
+
+
+
Se connecter
+
+
+

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
+
+
+
+
+
Connectez-vous
+
+
+
+
+ { + setlogin_email(event.target.value); + + }} + + /> +
+
+
+ { + setlogin_pwd(event.target.value); + + }} + + /> + + +
+ +
+ +
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
Se connecter
+
+
+

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" + + /> + + +
+ + +
+ + + + + + + + + + + + + + + + + +
+ {/*** 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); + + }} + + /> + + +
+ +
+ + +
+ + + +
+
+ +
Contact Principal
+
+
+ { + setcontact_nom(event.target.value); + + }} + + /> +
+
+ +
+ { + setcontact_prenom(event.target.value); + + }} + + /> +
+
+ + +
+ { + setcontact_email(event.target.value); + + }} + + /> +
+
+ +
+ { + setcontact_phone(event.target.value); + + }} + + /> +
+
+ + +
+ +
+ + + + +
Je ne suis un robot : {random1} + {random2} = + + +
+ +
+ +
+ +
+ +
+   + +
+ + +
+
+
+
+
Créer un compte
+
+
+

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
+
+
+
+
+
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); + + }} + + /> + + +
+ +
+ + +
+ + + +
+
+ +
Contact Principal
+
+
+ { + setcontact_nom(event.target.value); + + }} + + /> +
+
+ +
+ { + setcontact_prenom(event.target.value); + + }} + + /> +
+
+ + +
+ { + setcontact_email(event.target.value); + + }} + + /> +
+
+ +
+ { + setcontact_phone(event.target.value); + + }} + + /> +
+
+ + +
+ +
+ + + + +
Je ne suis un robot : {random1} + {random2} = + + +
+ +
+ +
+ +
+
+ +
+
+
+
+
+
Créer un compte
+
+
+

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 */ + + + + } + + {typeof (stored_user) != "undefined" && + /* Connexion utilisateur active */ + + } + } + + {(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 */ + + + + } + + {typeof (stored_user) != "undefined" && + /* Connexion utilisateur active */ + + } + } + + + {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 */ + + + + } + + {typeof (stored_user) != "undefined" && + /* Connexion utilisateur active */ + + } + } +
+ + ); +}; + + +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 ( +
+ {/*** Affichage des messages d'alerte*/} + {display_alert_mysy && String(display_alert_mysy) === "1" && + + } + {/*** FIN Affichage des messages d'alerte*/} + +
+
+ + +
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ + +
+ +
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
+
+ +
+ + + + + +
+
+ +
+
+ + +
+
+ +
+ + + + {/*** 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") && + informatique} + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && + management} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && + digital} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && + office} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && + vente} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + + +
} + + {String(ismetiermanaged) === "0" &&
+ autre + +
} + + {String(ismetiermanaged) === "1" &&
+ autre +
} +
+
+ +
+ + {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(action).toLowerCase() !== "information" && String(action).toLowerCase() !== "inscription" && +
+ +
+ +
+ M'inscrire +
+ +
+ +
+ +
+ M'informer + +
+ + +
+ +
} + +
+
+ +
+ +
+ Caractéristiques +
+ +
+ + + +
+ +
+ + + +
+ +
+ {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "} + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "} +
+ + +
+ + +
+ +
+ + + +
+ +
+ {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "} + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "} +
+ + +
+ + + +
+ +
+ + +
+ + {String(DetailTraining["duration_unit"]) !== "user_rythme" && +
+ {DetailTraining["duration"]} {DetailTraining["duration_unit"]}(s) +
+ } + + {String(DetailTraining["duration_unit"]) === "user_rythme" && +
+ A votre rythme +
+ } + +
+ + +
+ +
+ + + + +
+ +
+ {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && " Non " + } + {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && " Oui " + } +
+ + +
+ + +
+ +
+ + + + +
+ +
+ {DetailTraining["support"] && } + {!DetailTraining["support"] && "Non précisé"} + +
+
+ +
+ + + + + +
+ +
+ +
+
+ Organisme de formation +
+ +
+ {partnair_name && } +
+ +
+
+ +
+ social Mysy Training Facebook + +
+ +
+ social Mysy Training LinkedIn + +
+ +
+ social Mysy Training X (twitter) + + +
+ +
+ +
+
+ + +
+
+ +
+ +
+ + {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" && } + + {(!(JSON.parse(formation).session_ondemande) || (JSON.parse(formation).session_ondemande) === "0") && } +
  • + + ))} + +
+
+ +
} + +
+
+
+ +
+
+ +
+
+ +
+ 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") && + informatique} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && + management} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && + digital} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && + office} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && + vente} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sport") && + sport} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sante_nat") && + sante naturelle} + + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + {!JSON.parse(formation).metier && autre personnel} + +
+ +
+
+ {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" && } + + {(!(JSON.parse(formation).session_ondemande) || (JSON.parse(formation).session_ondemande) === "0") && } +
  • + + ))} + +
+
+ +
+ } + +
+
+
+ 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") && + informatique} + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && + management} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && + digital} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && + office} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && + vente} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("sport") && + sport} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("sante_nat") && + sante naturelle} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + +
} + + {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" &&
+ autre + +
} + + {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "1" &&
+ autre + +
} + + + + + {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"] && +
+
+ + + + +
+
Eligle CFP +
+
} + +
+ +
Caractéristiques
+ + +
+
    + + + +
    + +
    + + + + + +
    + {String(DetailTraining["duration_unit"]) !== "user_rythme" && +
    + {DetailTraining["duration"]}  {DetailTraining["duration_unit"]}(s) + +
    + } + + {String(DetailTraining["duration_unit"]) === "user_rythme" && +
    + VR + +
    + } + +
    + + +
    + +
    + + + + + +
    + +
    + {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") &&
    + + Non  
    + } + {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") &&
    + + Oui  
    + } + +
    + + +
    + + +
    + +
    + + + +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" &&
    Non
    } + +
    + + +
    + + +
    + +
    + + + +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
    Non
    } + +
    + + +
    + + +
    + +
    + +
    + +
    + {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" &&
+ +
+ +
+
M’inscrire
+
+ +
+
+
M’informer
+
+ +
} + +
+ {String(isqualiopi) === "1" &&
+ +
+ Qualiopi +
+ +
} + {String(isqualiopi) === "1" &&
} + + {String(isdatadock) === "1" &&
+
+ DataDock + +
+ +
} + {String(isdatadock) === "1" &&
} + +
+ {String(iscertifvoltaire) === "1" &&
+ Certitrace + +
} + + +
+ + + +
+ +
+ Organisme de formation +
+ +
+ + {partnair_name && } +
+ +
+ +
+ + +
+ social Mysy Training Facebook +
+ +
+ social Mysy Training LinkedIn +
+ +
+ social Mysy Training X (twitter) + +
+
+ + + + +
+ + +
+ +
+ +
+ + +
+
+ {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") && + informatique} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && + management} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && + digital} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && + office} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && + vente} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sport") && + sport} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sante_nat") && + sante naturelle} + + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + {!JSON.parse(formation).metier && autre personnel} + + +
+ +
+ + {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.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 */} + +
+ + +
+ ); +}; + +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 ( +
+
+
+
{title}
+

{heading}

+
+

{description}

+ +
+
+ Content illustration +
+
+ ); +}; + +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 */} + +
+ + {/* 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 */} + +
+ + {/* 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} +
+ +
+

+ {title} +

+

+ {description} +

+
+ + +
+ ); +}; + +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 */} + Chart lines + + {/* Tooltip */} +
+
+
+ 700 + icon +
+ 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 */} +
+
700
+
apprenants
+
+
+ + {/* 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} +

+ +
+ Pie Chart +
+ +
+ {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' + ); + }}> + +
+ +
{ + + window.open( + "/new_tarif/", + '_self' + ); + }}> + +
+
+
+ +
+ + + + + +
+
+ {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(); + 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 ( +
+ +
+ ); +}; + +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( + star + ); + } + return stars; + }; + + return ( +
+
+ AVIS CLIENTS +

Ils nous font confiance.

+
+ +
+ {testimonials.map((testimonial) => ( +
+
+
+ {renderStars(testimonial.rating)} +
+

{testimonial.text}

+
+
+ {testimonial.author} +
+ {testimonial.author} + {testimonial.role} +
+
+
+ ))} +
+ +
+ +
+ Slider position +
+ +
+
+ ); +}; + +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
+ + +
+ +
+ + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ + {/*** Fin GESTION Deconnexion */} + +
+
+ + +
+
+ + +
+
+ {String(someoneconnected) !== String("1") && } + + {String(someoneconnected) === String("1") && } + +
+
+ {String(someoneconnected) !== String("1") &&
+ User icon + Connexion +
} + + {String(someoneconnected) === String("1") &&
setDialog_1_open(true)}> + User icon + 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 +
+
+ +
+
+ +
+ +
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
+
+ +
+ + +
+ + +
+
+ +
+
+ + +
+
+ +
+ + +
+ {/*** FIN GESTION Contact */} + + + + MySy Information + + + Confirmez la deconnexion + + + + + +
+
+ +
+
+ +
+
+ +
+
+ + + Formation & Tutoriel Gratuit ou payant Excellente qualité + + + + + + + + Mon Compte + setDialog_1_open(true)} className="mymenu_item" + >Deconnexion + + + + + Mon Compte + Connexion + + S'inscrire + Deconnexion + + + + + + + {/* + + + */} + + + +
+ + +
+
+ +
+ + +
+ +
+ +
+ + {/* */} +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + + {/* */} + + {/*SearchText.length > 2 && */} + {SearchText.length > 2 &&  } + + + + +
+ +
+ img_search_loup + + +
+
+ + +
+ + + + +
+ +
+
 
+ +
+ + {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") &&
+
+ KO + +
+
} + +
+
+ + +
+
Certification +
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ {String(certifchecked) === String("1") &&
+
+ KO + +
+
} +
+
+ + +
+
Type +
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ {String(typechecked) === String("1") &&
+
+ KO + +
+
} +
+
+ + + + +
+
Lieu +
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ {String(lieuchecked) === String("1") &&
+
+ KO + +
+
} +
+
+ + + {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 +
+ +
+ + + + +
+
+ +
+
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 +
+
+
+
+
+
+ +
+
+ +
+
+ Management
+
+ +
+ +
+
+
+ +
+
+ +
+
+ Informatique
+
+ +
+ +
+
+
+ +
+
+ +
+
+ Graphisme
+
+ +
+ +
+
+
+ +
+
+
+ + +
+
+ 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 &&
+
+ {mymetier && String(mymetier) === "projets" && + } + + {!mymetier || String(mymetier) !== "projets" && + } + + {!mymetier && + } + +
+
+ Projets +
+
+ +
+
+ +
+
} + {displayAllmetiers &&
+
+ + +
+
+ Sport +
+
+ +
+
+ +
+
} + + + {displayAllmetiers &&
+
+
+ - +
+
+ Afficher Moins de métiers +
+ +
+
} + + +
+
} + + +
+ } + +
+ +
Nos Formations & Tutoriels
+ {String(userconnected) === String("1") &&
+ +
+ } + + {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 + + +
+
+ + +
+ + +
} + + {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 &&
+ + {String(userconnected) === String("1") && } + setCurrentPage2(page)} + /> +
+ } + + {result && newresult &&
+ + {String(userconnected) === String("1") && } + setCurrentPage2(page)} + /> +
+ } +
+ + + +
+ + +
+ +
+
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 +
+ +
+ + +
+ + + + +
+ +
+ + +
+ {/*
+ +
+ +
+ +
+
+ MySy Training Technology + +
+
+ +
+ Devenir partenaire +
+ + +
+ Devenez notre partenaire et publiez vos formations tout en bénéficiant d'un accompagnement sur mesure pour votre plan de marketing. +
+ +
+ +
+ +
+ +
+ +
+ + Devenir partenaire MySy Training +
+ +
+
+
+ + + +
*/} +
+ + +
+ + ); +} + + +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} +
+ check +
+
+ ))} +
+
+ ); +}; + +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)

+ arrow down +
+ +
+
+
Gestion clients & Contacts
+
Affectation et Suivi tâches
+
Catalogue prix clients
+
Devis & Commandes (envoi électronique)
+
Facturation
+
+ +
+
+ Price 1 +
+
+
+
+ check +
+
+
+
+ +
+
+ Price 2 +
+
+
+
+ check +
+
+
+
+ +
+
+
+
+ check +
+
+
+
+
+
+ check +
+
+
+
+
+
+ ); +}; + +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

+ arrow down +
+ +
+
+

Mise en ligne de votre formation (Description, Objectif, Programme, etc)

+ check +
+ +
+

Mise en forme des textes selon votre souhait

+ check +
+ +
+

Définition du pays et la région de publication

+ check +
+ +
+

Import/Export Excel

+ add +
+ +
+

Gestion des prix : Remise client / Tout public par période.

+ add +
+ +
+

Ajout de vos propres images pour communiquer sur votre structure et votre marque.

+ add +
+ +
+

Affichage de votre logo à côté de la formation

+ add +
+ +
+

Affichage de votre bannière en grand sur la page détaillée.

+ add +
+ +
+

Génération automatique de leads

+ check +
+ +
+

Consultation des appels d'offre de formation pour manifestation d'intérêt.

+ add +
+ +
+

Publication d'un appel d'offre de formation et gestion des réponses.

+ add +
+
+
+ ); +}; + +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) + +
+
+ +
+
+ Price 04 +
+
+
+
+ Add +
+
+
+
+
+
+ Check +
+
+
+
+ +
+
+ Price 16 +
+
+
+
+ Add +
+
+
+
+
+
+ Check +
+
+
+
+ +
+
+ + Dropdown + +
+
+
+
+ Check +
+
+
+
+
+
+ Check +
+
+
+
+
+ ); +}; + +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 ( +
+
+

{title}

+

{subtitle}

+
+
+ ); +}; + +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

+
+
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ + + +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ + + +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ + + +
 
+ + {/*** CRM */} +
+

Gestion relation client (CRM)

+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ + + +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
 
+ + {/** E-Learning LSM */} +
+

Hébergement de formations (LMS)

+
+
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ + + +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
 
+ + {/*** MarketPlace */} +
+

Marketplace

+
+
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ + + +
+
+ +
+
+ +
+ + +
+ + +
+ add +
+
+ check +
+ +
+ check + +
+ +
+
+ +
 
+
+ + +
+
+ ); +}; + +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}

+
+ + +
+
+
}*/} + + {!isPopular &&
+
+ +
+
+

{title}

+

Sans engagement

+
+ +
+
+ {price} € + par mois +
+

{sessions}

+
+ + +
+
+
} +
+ ); +}; + +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 +
+ + + +
+ +
+ {features.map((feature, index) => ( +
+ check + {feature} +
+ ))} +
+
+
} + + {!isPopular &&
+
+
+ {title} +
+ + {price} € + + + par mois + +
+ Sans engagement +
+ + + +
+ +
+ {features.map((feature, index) => ( +
+ check + {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