diff --git a/src/App.js b/src/App.js index 2459b89..a2d31bd 100644 --- a/src/App.js +++ b/src/App.js @@ -204,6 +204,9 @@ function App() { + + + diff --git a/src/components/ButtonHilight.js b/src/components/ButtonHilight.js index e12f75c..18072af 100644 --- a/src/components/ButtonHilight.js +++ b/src/components/ButtonHilight.js @@ -150,7 +150,7 @@ const ButtonHilight = () => { }; const handleQuisommesNousMenu = (event) => { - history.push("/QuiSommesNous") + history.push("/qui-sommes-nous") }; diff --git a/src/components/DisplayDetailArticle_new_v2.js b/src/components/DisplayDetailArticle_new_v2.js index ecb2e3e..1d1bba3 100644 --- a/src/components/DisplayDetailArticle_new_v2.js +++ b/src/components/DisplayDetailArticle_new_v2.js @@ -881,7 +881,7 @@ const DisplayDetailArticle_new_v2 = (props) => { const handleQuisommesNousMenu = () => { setproduitMenu(null); - history.push("/QuiSommesNous/") + history.push("/qui-sommes-nous/") }; const ProduitMenu_Close = () => { diff --git a/src/components/DisplayDetailClass_new_v2.js b/src/components/DisplayDetailClass_new_v2.js index fd8d3b9..d1b1584 100644 --- a/src/components/DisplayDetailClass_new_v2.js +++ b/src/components/DisplayDetailClass_new_v2.js @@ -1841,7 +1841,7 @@ const DisplayDetailClass_new_v2 = (props) => { Le blog */} -
{ history.push("/QuiSommesNous") }}> +
{ history.push("/qui-sommes-nous") }}> A propos
diff --git a/src/components/DisplayDetailClass_new_v3.js b/src/components/DisplayDetailClass_new_v3.js index 79af903..8d25a83 100644 --- a/src/components/DisplayDetailClass_new_v3.js +++ b/src/components/DisplayDetailClass_new_v3.js @@ -1768,7 +1768,7 @@ const DisplayDetailClass_new_v3 = (props) => { Le blog
*/} -
{ history.push("/QuiSommesNous") }}> +
{ history.push("/qui-sommes-nous") }}> A propos
diff --git a/src/components/Display_Partner_Catalog_DetailClass_new_v2.js b/src/components/Display_Partner_Catalog_DetailClass_new_v2.js index 3fce76f..33ceb94 100644 --- a/src/components/Display_Partner_Catalog_DetailClass_new_v2.js +++ b/src/components/Display_Partner_Catalog_DetailClass_new_v2.js @@ -1953,7 +1953,7 @@ const Display_Partner_Catalog_DetailClass_new_v2 = (props) => { Le blog
*/} -
{ history.push("/QuiSommesNous") }}> +
{ history.push("/qui-sommes-nous") }}> A propos
diff --git a/src/components/QuisSommesNous_V3.js b/src/components/Fonctionnalites_V1.js similarity index 98% rename from src/components/QuisSommesNous_V3.js rename to src/components/Fonctionnalites_V1.js index 012f3f7..866c481 100644 --- a/src/components/QuisSommesNous_V3.js +++ b/src/components/Fonctionnalites_V1.js @@ -1,9 +1,8 @@ +import React, { useRef, useState, useEffect } from "react"; import Navigation from "./Navigation"; import { Helmet } from "react-helmet"; import ousommesnousimg from "../mysy_img/mysy_training_technology_ici.png" - -import React, { Component } from 'react'; import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps" import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share"; import { SocialIcon } from 'react-social-icons'; @@ -62,7 +61,7 @@ import img_wiki from "../mysy_img/wiki.png"; import img_serviceshebergement from "../mysy_img/serviceshebergement.png"; import img_sociallearning from "../mysy_img/sociallearning.png"; -const QuiSommesNous_v3 = () => { +const Fonctionnalites_V1 = () => { const ButtonMailto = ({ mailto, label }) => { return ( @@ -93,19 +92,27 @@ const QuiSommesNous_v3 = () => { }; + useEffect(() => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + + }, []); + return ( -
+
MySy Training, qui sommes nous ? - +
- +
@@ -116,7 +123,7 @@ const QuiSommesNous_v3 = () => {
- A propos + A propos
MySy Training Technogy @@ -255,7 +262,7 @@ const QuiSommesNous_v3 = () => {
- Gestion des inscriptions + Gestion des inscriptions
@@ -842,7 +849,7 @@ const QuiSommesNous_v3 = () => {
- Partage de fichiers + Partage de fichiers
@@ -858,7 +865,7 @@ const QuiSommesNous_v3 = () => {
- Tableau de bord / Statistiques + Tableau de bord / Statistiques
@@ -875,7 +882,7 @@ const QuiSommesNous_v3 = () => {
- Social Learning + Social Learning
@@ -892,7 +899,7 @@ const QuiSommesNous_v3 = () => { - +
@@ -1275,4 +1282,4 @@ const QuiSommesNous_v3 = () => { } -export default QuiSommesNous_v3; +export default Fonctionnalites_V1; diff --git a/src/components/Fotter.js b/src/components/Fotter.js index 41e591c..82efc07 100644 --- a/src/components/Fotter.js +++ b/src/components/Fotter.js @@ -41,8 +41,8 @@ const Footer = () => {
diff --git a/src/components/Fotter_v3.js b/src/components/Fotter_v3.js index 2c5de4a..2f9d723 100644 --- a/src/components/Fotter_v3.js +++ b/src/components/Fotter_v3.js @@ -41,8 +41,8 @@ const Fotter_v3 = () => {
diff --git a/src/components/Header.js b/src/components/Header.js index f973bfc..fe74cde 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -257,7 +257,7 @@ const Header = () => { }; const handleQuisommesNousMenu = (event) => { - history.push("/QuiSommesNous") + history.push("/qui-sommes-nous") }; const [Dialog_1_message, setDialog_1_message] = React.useState(false); diff --git a/src/components/Module_Absence.js b/src/components/Module_Absence.js index 8a302af..33bd00e 100644 --- a/src/components/Module_Absence.js +++ b/src/components/Module_Absence.js @@ -1,4 +1,4 @@ -import React, { useRef, useState, useEffect } from "react"; +import React, { useRef, useState, useEffect } from "react"; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css diff --git a/src/components/Mon_Catalogue_Public.js b/src/components/Mon_Catalogue_Public.js index c205d61..b5e01cf 100644 --- a/src/components/Mon_Catalogue_Public.js +++ b/src/components/Mon_Catalogue_Public.js @@ -1964,7 +1964,7 @@ const Mon_Catalogue_Public = (props) => { const handleQuisommesNousMenu = (event) => { setproduitMenu(event.currentTarget); - history.push("/QuiSommesNous") + history.push("/qui-sommes-nous") }; const handleAccountConnexion = () => { diff --git a/src/components/QuisSommesNous.js b/src/components/QuisSommesNous.js index 54f0437..1817a77 100644 --- a/src/components/QuisSommesNous.js +++ b/src/components/QuisSommesNous.js @@ -40,7 +40,7 @@ const quisommesnous = () => { - +
diff --git a/src/components/QuisSommesNous_V2.js b/src/components/QuisSommesNous_V2.js index c645e90..9da8521 100644 --- a/src/components/QuisSommesNous_V2.js +++ b/src/components/QuisSommesNous_V2.js @@ -56,7 +56,7 @@ const QuiSommesNous_v2 = () => { - +
diff --git a/src/components/QuisSommesNous_V4.js b/src/components/QuisSommesNous_V4.js index 5c69b28..50bb5fa 100644 --- a/src/components/QuisSommesNous_V4.js +++ b/src/components/QuisSommesNous_V4.js @@ -193,6 +193,13 @@ const QuiSommesNous_v4 = () => { const [state, setstate] = useState("France"); const [userIp, setuserIp] = useState("172.71.122.128"); + useEffect(() => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + + }, []); return ( @@ -204,7 +211,7 @@ const QuiSommesNous_v4 = () => { - +
diff --git a/src/components/RechercheArticles.js b/src/components/RechercheArticles.js index c5b2ad9..d71714b 100644 --- a/src/components/RechercheArticles.js +++ b/src/components/RechercheArticles.js @@ -420,7 +420,7 @@ const RechercheArticles = (props) => { const handleQuisommesNousMenu = () => { setproduitMenu(null); - history.push("/QuiSommesNous/") + history.push("/qui-sommes-nous/") }; const ProduitMenu_Close = () => { diff --git a/src/components/RechercheArticles_new_v2.js b/src/components/RechercheArticles_new_v2.js index d4ec621..2a56791 100644 --- a/src/components/RechercheArticles_new_v2.js +++ b/src/components/RechercheArticles_new_v2.js @@ -430,7 +430,7 @@ const RechercheArticles_new_v2 = (props) => { const handleQuisommesNousMenu = () => { setproduitMenu(null); - history.push("/QuiSommesNous/") + history.push("/qui-sommes-nous/") }; const ProduitMenu_Close = () => { diff --git a/src/components/Recherche_new_v2.js b/src/components/Recherche_new_v2.js index 10f58da..cc9c3e0 100644 --- a/src/components/Recherche_new_v2.js +++ b/src/components/Recherche_new_v2.js @@ -1976,7 +1976,7 @@ const Recherche_new_v2 = () => { const handleQuisommesNousMenu = (event) => { setproduitMenu(event.currentTarget); - history.push("/QuiSommesNous") + history.push("/qui-sommes-nous") }; diff --git a/src/components/Recherche_new_v3.js b/src/components/Recherche_new_v3.js index e37f85d..d2665d9 100644 --- a/src/components/Recherche_new_v3.js +++ b/src/components/Recherche_new_v3.js @@ -1970,7 +1970,7 @@ const Recherche_new_v3 = () => { const handleQuisommesNousMenu = (event) => { setproduitMenu(event.currentTarget); - history.push("/QuiSommesNous") + history.push("/qui-sommes-nous") }; const handleAccountConnexion = () => { diff --git a/src/components/Recherche_new_v4.js b/src/components/Recherche_new_v4.js index 6b5fd54..b6359a7 100644 --- a/src/components/Recherche_new_v4.js +++ b/src/components/Recherche_new_v4.js @@ -1972,7 +1972,7 @@ const Recherche_new_v4 = () => { const handleQuisommesNousMenu = (event) => { setproduitMenu(event.currentTarget); - history.push("/QuiSommesNous") + history.push("/qui-sommes-nous") }; const handleAccountConnexion = () => { diff --git a/src/components/Subdomain_Recherche_new_v2.js b/src/components/Subdomain_Recherche_new_v2.js index 6748930..76306b5 100644 --- a/src/components/Subdomain_Recherche_new_v2.js +++ b/src/components/Subdomain_Recherche_new_v2.js @@ -1952,7 +1952,7 @@ const Subdomain_Recherche_new_v2 = () => { const handleQuisommesNousMenu = (event) => { setproduitMenu(event.currentTarget); - history.push("/QuiSommesNous") + history.push("/qui-sommes-nous") }; const handleAccountConnexion = () => { diff --git a/src/components/sidebar.js b/src/components/sidebar.js index 0702d5f..00efc19 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -131,7 +131,7 @@ const SideBar = () => { Recherche formation - + A propos @@ -197,7 +197,7 @@ const SideBar = () => { Recherche formation - + A propos @@ -271,7 +271,7 @@ const SideBar = () => { Recherche formation - + A propos diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js index bf80e0e..240d7d2 100644 --- a/src/pages/NotFound.js +++ b/src/pages/NotFound.js @@ -17,7 +17,7 @@ const NotFound = () => { - +
diff --git a/src/pages/Traning_Inactif_Or_Not_Exist.js b/src/pages/Traning_Inactif_Or_Not_Exist.js index 69c8e03..167b868 100644 --- a/src/pages/Traning_Inactif_Or_Not_Exist.js +++ b/src/pages/Traning_Inactif_Or_Not_Exist.js @@ -17,7 +17,7 @@ const NotFound = () => { - +
diff --git a/src/pages/fonctionnalite.js b/src/pages/fonctionnalite.js index a9ddd5e..90bad61 100644 --- a/src/pages/fonctionnalite.js +++ b/src/pages/fonctionnalite.js @@ -1,6 +1,6 @@ import QuisSommesNous from "../components/QuisSommesNous"; import Navigation from "../components/Navigation"; -import QuiSommesNous_v3 from "../components/QuisSommesNous_V3"; +import MySy_Fonctionnalite from "../components/Fonctionnalites_V1"; const Fonctionnalites = () => { @@ -10,7 +10,7 @@ const Fonctionnalites = () => {
- +
) diff --git a/src/pages/quisommesnous_orig.js b/src/pages/quisommesnous_orig.js index a1e7558..55bc499 100644 --- a/src/pages/quisommesnous_orig.js +++ b/src/pages/quisommesnous_orig.js @@ -38,7 +38,7 @@ const quisommesnous = () => { - +
diff --git a/src/pages/quisommesnous_v3.js b/src/pages/quisommesnous_v3.js index e5e4aca..5181ac4 100644 --- a/src/pages/quisommesnous_v3.js +++ b/src/pages/quisommesnous_v3.js @@ -1,6 +1,6 @@ import QuisSommesNous from "../components/QuisSommesNous"; import Navigation from "../components/Navigation"; -import QuiSommesNous_v3 from "../components/QuisSommesNous_V3"; + import QuiSommesNous_v4 from "../components/QuisSommesNous_V4"; const recherche_draft = () => { diff --git a/src/styles/components/_fonctionnalite_v1.scss b/src/styles/components/_fonctionnalite_v1.scss new file mode 100644 index 0000000..f986d3d --- /dev/null +++ b/src/styles/components/_fonctionnalite_v1.scss @@ -0,0 +1,4232 @@ +.fonctionnalite_v1 { + .h1_transparent { + color: transparent; + font-size: 0.1rem; + } + + .only_mobile { + display: none; + } + + @media only screen and (max-width: 600px) { + + .only_mobile { + width: 100%; + display: block; + } + + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 25px !important; + width: 25px !important; + } + } + + .div_carte { + width: 100%; + } + + .div_adresse { + width: 95%; + text-justify: auto; + } + + .img_logo { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-width: 50%; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .div_row { + float: left; + //border: 0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 1rem; + border-radius: 1rem; + } + + .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; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + font-weight: bold; + text-align: center; + margin-bottom: 1rem; + } + + .img_gauche_taille { + max-width: 50%; + } + + .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: 7rem; + z-index: 1; + width: 98%; + height: 100%; + margin: 0.3rem; + margin-left: auto; + margin-right: auto; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 2rem; + } + + .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; + } + + .div_row_center { + width: 90%; + margin-bottom: 0.5rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 0.5rem; + } + + .div_row_center_contact { + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 0.5rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: 4rem; + background: #ed902f; + text-align: center; + font-size: medium; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 1rem; + } + + .div_row_center_text { + font-size: medium; + margin-top: 0.2rem; + font-family: helvetica-w02-light, helvetica-w01-light, sans-serif; + } + + .div_row_center_enphasis { + font-size: medium; + color: #113459; + margin-top: 0.2rem; + text-align: justify; + line-height: 2rem; + letter-spacing: 1px; + } + + .div_row_line1 { + //float: left; + width: 100%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 40rem; + min-height: 20rem; + margin-left: auto; + margin-right: auto; + } + + .div_row_line2 { + //float: left; + width: 100%; + text-align: center; + background: #f0f0f5; + margin: 5px; + height: 40rem; + min-height: 20rem; + margin-left: auto; + margin-right: auto; + } + + .div_row_line3 { + float: left; + width: 100%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 40rem; + min-height: 20rem; + margin-left: auto; + margin-right: auto; + } + + .div_row_presenation { + //border: 0.01rem solid #000; + width: 100%; + margin-bottom: 1rem; + margin-left: auto; + margin-right: auto; + height: 6rem; + } + + .text_head_new { + font-family: helvetica-w01-bold, helvetica-w02-bold, helvetica-lt-w10-bold, + sans-serif; + font-size: 20 px; + margin-top: 1rem; + margin-bottom: 00.5rem; + padding-right: 1rem; + padding-left: 2rem; + text-transform: uppercase; + } + + .text_desc { + overflow-wrap: break-word; + text-align: start; + font-size: small; + padding-right: 10px; + padding-left: 10px; + font-style: italic; + text-align: justify; + } + + .myli { + margin-bottom: 0.8rem; + } + + .div_row_where { + float: left; + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + margin-left: 5%; + margin-right: 5%; + margin-top: 2rem; + } + + .bton_contact_nous { + width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + } + + + + .img_1 { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + width: 100%; + } + + .div_row_img1 { + float: left; + width: 100%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + } + + .div_row_img2 { + float: left; + width: 100%; + text-align: center; + //background: #f0f0f5; + margin: 5px; + } + + .div_row_img3 { + float: left; + width: 100%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + } + + .main_sub_div { + height: 220rem; + margin-left: auto; + margin-right: auto; + width: 100%; + background: white; + } + + .detail_block { + width: 100%; + float: left; + display: flex; + } + + .detail_text { + width: 100%; + float: left; + margin: auto; + text-align: justify; + margin-bottom: 1rem; + + } + + .detail_img { + display: none; + + } + + + .detail_img_video_ftion { + width: 100%; + float: left; + margin: auto; + + } + + .div_row_center_video_ftion { + width: 100%; + text-align: left; + padding: 5px; + margin-bottom: 4rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 3rem; + } + + .detail_block_video_ftion { + width: 95%; + margin-left: auto; + margin-right: auto; + display: flex; + border-bottom: 10px solid; + border-top: 10px solid; + padding-left: 10px; + + } + + .detail_text_video_ftion { + display: none; + } + + .image_illustration { + width: 100%; + } + + + // ------------ + // debut iciii + + .div_mobile_v3 { + position: absolute; + top: 5rem; + z-index: 1; + width: 100%; + //background: #104277; + height: 4000px; + } + + .main_frame { + width: 100%; + height: 8007px; + background: var(--Light-Grey, #FCFCFC); + + } + + + .Background-header { + width: 100%; + height: 30rem; + flex-shrink: 0; + //opacity: 0.5; + background: var(--Beige, #FFF5DA); + padding: 20px; + } + + + .Title { + display: block; + flex-direction: column; + align-items: center; + color: #0A043C; + width: Hug (319px); + height: Hug (80px); + top: 200px; + margin-left: auto; + margin-right: auto; + //position: fixed; + width: 100%; + } + + .Title_txt1 { + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + /* 125% */ + text-transform: uppercase; + width: 169px; + height: 20px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + letter-spacing: 2px; + display: none; + } + + .Title_txt2 { + color: var(--Green, #20BFA9); + text-align: center; + font-family: Albert Sans; + font-size: 30px; + font-style: normal; + //font-weight: 700; + line-height: 60px; + /* 120% */ + letter-spacing: -1px; + width: 319px; + height: 60px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + top: 15rem; + + } + + .text_seul_1 { + + color: var(--Deep-Blue, #0A043C); + text-align: justify; + font-family: Albert Sans; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 1.5em; + // height: 44px; + top: 20rem; + width: 90%; + margin-right: auto; + letter-spacing: 2px; + //height: 8rem; + margin-top: 1rem; + margin-left: auto; + margin-right: auto; + } + + .text_activite_head { + text-transform: uppercase; + width: 100%; + height: 50px; + font-family: Albert Sans; + font-size: 18px; + // font-weight: 600; + line-height: 32px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + letter-spacing: 2px; + margin-bottom: 1rem; + + letter-spacing: 1px; + margin-bottom: 1rem; + background: #0A043C; + letter-spacing: 1px; + margin-bottom: 1rem; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + height: 3rem; + color: white; + padding-top: 5px; + + + } + + .image_activite_head { + width: 80%; + margin-left: auto; + margin-right: auto; + } + + .image_activite_detail { + display: none; + } + + .bton_en_savoir_plus_header { + margin-top: 1rem; + width: 100%; + height: 56px; + + padding: 13px, 26px, 13px, 26px; + border-radius: 8px; + border: 1px; + gap: 10px; + + background: white; + border: 1px solid #0A043C; + color: #0A043C; + font-family: Albert Sans; + font-size: 16px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0px; + text-align: center; + } + + + + + // ici 2 + .parent { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + grid-column-gap: 11px; + grid-row-gap: 13px; + + padding: 1rem; + margin-bottom: 2rem; + } + + .div1 { + grid-area: 1 / 1 / 2 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div2 { + grid-area: 2 / 1 / 3 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div3 { + grid-area: 3 / 1 / 4 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .text_nous_conseillons { + width: 90%; + margin-left: auto; + margin-right: auto; + font-family: Albert Sans; + font-size: medium; + font-weight: normal; + line-height: 28px; + letter-spacing: 0px; + text-align: justify; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 3rem; + line-height: 1.8em; + } + + + + .content_gestion_admin { + width: 95%; + margin-left: auto; + margin-right: auto; + height: 400px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_admin_img { + display: none; + } + + .content_gestion_admin_txt { + z-index: 9; + width: 100%; + height: 400px; + position: absolute; + top: 10px; + left: 0; + + background: #FFF5DA; + padding-top: 3rem; + padding: 5px; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + .detail_content_text_head_1 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: center; + color: #3E6EE3; + padding-bottom: 1rem; + letter-spacing: 1px; + + display: none; + + } + + .detail_content_text_head_2 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 500; + line-height: 40px; + letter-spacing: 1px; + text-align: center; + color: #0A043C; + padding-bottom: 1rem; + text-transform: uppercase; + } + + .detail_content_text_head_3 { + + font-family: Albert Sans; + font-size: small; + font-weight: normal; + line-height: 22px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 1.5rem; + letter-spacing: 1px; + text-align: justify; + width: 95%; + font-family: Verdana, Georgia, Arial; + + } + + + .detail_content_text_head_3_gauche { + + font-family: Verdana, Georgia, Arial; + font-size: small; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 95%; + + } + + .content_gestion_elearning { + width: 95%; + margin-left: auto; + margin-right: auto; + height: 400px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_elearning_img { + display: none; + } + + .content_gestion_elearning_txt { + z-index: 9; + width: 100%; + height: 400px; + position: absolute; + top: 10px; + left: 0; + background: #FFF5DA; + padding-top: 3rem; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + padding: 5px; + } + + + .fonctionalite_header { + + font-family: Albert Sans; + font-size: 24px; + font-weight: 700; + line-height: 40px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + + letter-spacing: 1px; + width: 100%; + float: left; + } + + + .tick_fonctionalite { + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + text-align: left; + padding-left: 1rem; + color: #0A043C; + width: 100%; + height: 2rem; + padding-right: 10px; + text-align: justify; + } + + .tick_fonctionalite_tick { + width: 5%; + float: left; + height: 2rem; + } + + .tick_fonctionalite_txt { + width: 95%; + float: left; + height: 4rem; + padding-left: 10px; + line-height: 1rem; + font-family: Verdana, Georgia, Arial; + } + + + .video_titre { + font-family: Albert Sans; + font-size: 18px; + font-weight: 600; + letter-spacing: 0em; + text-align: left; + // margin-top: 5rem; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .pave_video_gauche { + display: none; + + } + + .pave_video_droite { + width: 100%; + float: right; + height: 330px; + } + + + + + .pave_video { + box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); + width: 90%; + margin-left: auto; + margin-right: auto; + height: 300px; + margin-bottom: 1rem; + padding-top: 2rem; + } + + .video_sous_titre { + font-family: Albert Sans; + font-size: 32px; + font-weight: 700; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .video_mp4 { + // width: 860px; + //height: 520px; + } + + + .contactez_nous_new { + + // width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + + + font-family: Albert Sans; + font-size: 16px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + + } + + + .contactez_nous_titre { + // width: 392px; + //height: 40px; + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 30px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-bottom: 1rem; + margin-top: 1rem; + + } + + .contactez_nous_info { + //width: 392px; + //height: 28px; + + + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0em; + text-align: left; + + } + + .div_adresse_new { + padding-left: 2rem; + float: left; + width: 100%; + + } + + .image_illustration { + width: 100%; + height: 15rem; + } + + .div_mobile_v3_debut { + margin-top: -28rem; + } + + .react-player__preview { + height: 230px !important; + } + + .reactplayer_mysy_classname { + height: 250px !important; + width: 100%; + } + + .div_block_fonction { + width: 100%; + float: left; + } + + .div_block_fonction_detail { + width: 96%; + 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: #F8F9F9; + height: 20rem; + padding: 15px; + border-radius: 10px; + } + + .div_block_fonction_detail_titre { + font-family: Roboto, Verdana, Georgia, Arial; + color: #3E6EE3; + line-Height: 29px; + font-size: 18px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: center; + letter-spacing: 1px; + height: 4rem; + padding-left: 10px; + } + + .div_block_fonction_detail_img { + width: 100%; + float: left; + } + + .div_block_fonction_detail_img_inside { + width: 5rem; + } + + + .div_block_fonction_detail_desc { + width: 100%; + float: left; + text-align: left; + line-height: 1.8em; + font-size: small; + color: #464646; + text-align: center; + margin-top: 10px; + } + } + + @media only screen and (min-width: 601px) and (max-width: 991px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 25px !important; + width: 25px !important; + } + } + + .div_carte { + width: 60%; + float: left; + } + + .div_adresse { + width: 29%; + float: left; + text-align: left; + font-size: medium; + text-justify: auto; + padding-left: 0.5rem; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 30%; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .div_row { + float: left; + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: 5%; + margin-right: 5%; + } + + .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; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + font-weight: bold; + text-align: center; + margin-bottom: 1rem; + } + + .img_gauche_taille { + max-width: 50%; + } + + .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: 9rem; + z-index: 1; + width: 100%; + background: white; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 2rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 23%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1rem; + border: 2px solid transparent; + } + + .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: 50%; + text-align: left; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + } + + .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; + } + + .div_row_center { + width: 90%; + margin-bottom: 2rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 2rem; + } + + .div_row_center_contact { + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: 3rem; + background: #ed902f; + text-align: center; + font-size: medium; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + } + + .div_row_center_text { + font-size: large; + margin-top: 0.5rem; + font-family: helvetica-w02-light, helvetica-w01-light, sans-serif; + } + + .div_row_center_enphasis { + font-size: medium; + color: #113459; + margin-top: 0.5rem; + text-align: justify; + line-height: 2rem; + letter-spacing: 1px; + } + + .div_row_line1 { + float: left; + width: 31%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 50rem; + min-height: 20rem; + } + + .div_row_line2 { + float: left; + width: 31%; + text-align: center; + background: #f0f0f5; + margin: 5px; + height: 50rem; + min-height: 20rem; + } + + .div_row_line3 { + float: left; + width: 31%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 50rem; + min-height: 20rem; + } + + .div_row_presenation { + //border: 0.01rem solid #000; + width: 98%; + margin-bottom: 2rem; + margin-left: auto; + margin-right: auto; + height: 10rem; + margin-top: 2rem; + } + + .text_head_new { + font-family: helvetica-w01-bold, helvetica-w02-bold, helvetica-lt-w10-bold, + sans-serif; + font-size: medium; + margin-top: 1rem; + margin-bottom: 00.5rem; + padding-right: 1rem; + padding-left: 1rem; + text-transform: uppercase; + height: 4rem; + } + + .text_desc { + overflow-wrap: break-word; + text-align: start; + font-size: small; + padding-right: 10px; + padding-left: 5px; + font-style: italic; + text-align: justify; + } + + .myli { + margin-bottom: 0.8rem; + } + + .div_row_where { + float: left; + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + margin-left: 5%; + margin-right: 5%; + margin-top: 5rem; + } + + .bton_contact_nous { + width: 100%; + text-align: center; + padding: 0; + border: 0px; + height: 3rem; + font-weight: bold; + font-size: medium; + color: white; + } + + .img_1 { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-height: 100%; + width: 100%; + } + + .div_row_img1 { + float: left; + width: 30%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + height: 10rem; + min-height: 8rem; + border-right: 1px solid; + } + + .div_row_img2 { + float: left; + width: 30%; + text-align: center; + //background: #f0f0f5; + margin: 5px; + height: 10rem; + min-height: 8rem; + + } + + .div_row_img3 { + float: left; + width: 32%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + height: 10rem; + min-height: 8rem; + border-left: 1px solid; + } + + .main_sub_div { + height: 220rem; + margin-left: auto; + margin-right: auto; + width: 100%; + background: white; + } + + .detail_block { + width: 100%; + float: left; + display: flex; + } + + .detail_text { + width: 50%; + float: left; + margin: auto; + text-align: justify; + margin-bottom: 1rem; + + } + + .detail_img { + width: 50%; + float: left; + margin: auto; + + } + + + .detail_img_video_ftion { + width: 50%; + float: left; + margin: auto; + + } + + + .div_row_center_video_ftion { + width: 100%; + text-align: left; + padding: 5px; + margin-bottom: 4rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 3rem; + } + + .detail_block_video_ftion { + width: 95%; + margin-left: auto; + margin-right: auto; + display: flex; + border-bottom: 10px solid; + border-top: 10px solid; + padding-left: 10px; + + } + + .detail_text_video_ftion { + width: 50%; + float: left; + margin: auto; + text-align: justify; + padding-left: 2rem; + } + + // ------------ + // debut iciii + + .div_mobile_v3 { + position: absolute; + top: 8rem; + z-index: 1; + width: 100%; + //background: #104277; + height: 4000px; + } + + .main_frame { + width: 100%; + height: 8007px; + background: var(--Light-Grey, #FCFCFC); + + } + + + .Background-header { + width: 100%; + height: 30rem; + flex-shrink: 0; + //opacity: 0.5; + background: var(--Beige, #FFF5DA); + padding: 20px; + } + + + .Title { + display: block; + flex-direction: column; + align-items: center; + color: #0A043C; + width: Hug (319px); + height: Hug (80px); + top: 200px; + margin-left: auto; + margin-right: auto; + //position: fixed; + width: 100%; + } + + .Title_txt1 { + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + /* 125% */ + text-transform: uppercase; + width: 169px; + height: 20px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + letter-spacing: 2px; + display: none; + } + + .Title_txt2 { + color: var(--Green, #20BFA9); + text-align: center; + font-family: Albert Sans; + font-size: 40px; + font-style: normal; + //font-weight: 700; + line-height: 60px; + /* 120% */ + letter-spacing: -1px; + width: 319px; + height: 60px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + top: 15rem; + + } + + .text_seul_1 { + + color: var(--Deep-Blue, #0A043C); + text-align: justify; + font-family: Albert Sans; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 1.5em; + /* 157.143% */ + + // height: 44px; + top: 20rem; + + //position: fixed; + width: 80%; + margin-left: 10%; + margin-right: auto; + letter-spacing: 2px; + } + + .text_activite_head { + //text-transform: uppercase; + width: 100%; + height: 50px; + font-family: Albert Sans; + font-size: 18px; + //font-weight: 600; + line-height: 32px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + letter-spacing: 2px; + margin-bottom: 1rem; + + letter-spacing: 1px; + margin-bottom: 1rem; + background: #0A043C; + letter-spacing: 1px; + margin-bottom: 1rem; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + height: 3rem; + color: white; + padding-top: 5px; + + } + + .image_activite_head { + //height: 22rem; + width: 100%; + } + + + .image_activite_detail { + //height: 22rem; + width: 100%; + } + + .bton_en_savoir_plus_header { + margin-top: 1rem; + width: 100%; + height: 56px; + + padding: 13px, 26px, 13px, 26px; + border-radius: 8px; + border: 1px; + gap: 10px; + + background: white; + border: 1px solid #0A043C; + color: #0A043C; + font-family: Albert Sans; + font-size: 16px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0px; + text-align: center; + } + + + + + // ici 2 + .parent { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 25px; + grid-row-gap: 5px; + margin: 2rem; + padding: 1rem; + margin-bottom: 3rem; + } + + .div1 { + grid-area: 1 / 1 / 2 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div2 { + grid-area: 1 / 2 / 2 / 3; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div3 { + grid-area: 1 / 3 / 2 / 4; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .text_nous_conseillons { + width: 80%; + margin-left: auto; + margin-right: auto; + + font-family: Albert Sans; + font-size: 22px; + font-weight: normal; + line-height: 32px; + letter-spacing: 0px; + + //position: fixed; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 3rem; + + line-height: 1.8em; + text-align: justify; + } + + + + .content_gestion_admin { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_admin_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + left: 10px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_admin_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-left: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 25%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + .detail_content_text_head_1 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + padding-bottom: 2rem; + letter-spacing: 1px; + + display: none; + } + + .detail_content_text_head_2 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 500; + line-height: 40px; + letter-spacing: 1px; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + text-transform: uppercase; + } + + .detail_content_text_head_3 { + + font-family: Albert Sans; + font-size: 16px; + font-weight: normal; + line-height: 22px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 1.5rem; + letter-spacing: 1px; + text-align: justify; + width: 95%; + font-family: Verdana, Georgia, Arial; + + } + + + .detail_content_text_head_3_gauche { + + font-family: Verdana, Georgia, Arial; + font-size: 16px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 70%; + + } + + .content_gestion_elearning { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_elearning_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + right: 0px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_elearning_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-right: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 5%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + + .fonctionalite_header { + + font-family: Albert Sans; + font-size: 28px; + font-weight: 700; + line-height: 40px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + margin-left: auto; + margin-right: auto; + margin-top: 3rem; + margin-bottom: 2rem; + letter-spacing: 1px; + width: 100%; + float: left; + } + + + .tick_fonctionalite { + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + text-align: left; + padding-left: 1rem; + color: #0A043C; + width: 100%; + height: 2rem; + padding-right: 10px; + text-align: justify; + } + + .tick_fonctionalite_tick { + width: 5%; + float: left; + height: 2rem; + } + + .tick_fonctionalite_txt { + width: 95%; + float: left; + height: 4rem; + padding-left: 10px; + line-height: 1rem; + font-family: Verdana, Georgia, Arial; + } + + + .video_titre { + font-family: Albert Sans; + font-size: 18px; + font-weight: 600; + letter-spacing: 0em; + text-align: left; + margin-top: 8rem; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .pave_video_gauche { + width: 30%; + float: left; + + } + + .pave_video_droite { + width: 70%; + float: right; + padding: 10px; + + } + + .pave_video { + box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); + width: 90%; + margin-left: auto; + margin-right: auto; + height: 30rem; + margin-bottom: 1rem; + padding-top: 2rem; + } + + .video_sous_titre { + font-family: Albert Sans; + font-size: 32px; + font-weight: 700; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .video_mp4 { + // width: 860px; + //height: 520px; + } + + + .contactez_nous_new { + + // width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + + + font-family: Albert Sans; + font-size: 16px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + + } + + + .contactez_nous_titre { + // width: 392px; + //height: 40px; + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 30px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-bottom: 1rem; + margin-top: 1rem; + + } + + .contactez_nous_info { + //width: 392px; + //height: 28px; + + + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0em; + text-align: left; + + } + + .div_adresse_new { + padding-left: 2rem; + float: left; + width: 35%; + + } + + .image_illustration { + width: 100%; + height: 15rem; + } + + .div_mobile_v3_debut { + margin-top: -28rem; + } + + + .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: #F8F9F9; + height: 22rem; + padding: 15px; + border-radius: 10px; + } + + .div_block_fonction_detail_titre { + font-family: Roboto, Verdana, Georgia, Arial; + color: #3E6EE3; + line-Height: 29px; + font-size: 18px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: left; + letter-spacing: 1px; + height: 6rem; + padding-left: 1rem; + } + + .div_block_fonction_detail_img { + width: 100%; + float: left; + margin-bottom: 10px; + } + + .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: #464646 + } + + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 30px !important; + width: 30px !important; + } + } + + .div_carte { + width: 60%; + float: left; + } + + .div_adresse { + width: 29%; + float: left; + text-justify: auto; + padding-left: 0.5rem; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + text-align: center; + margin-bottom: 1rem; + font-weight: bold; + } + + .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 { + float: left; + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: 5%; + margin-right: 5%; + } + + .div_row_gauche { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 20%; + border-radius: 1rem; + text-align: left; + } + + .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; + } + + .img_gauche_taille { + max-width: 30%; + } + + .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: 9rem; + z-index: 1; + width: 100%; + background: #104277; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 10rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1rem; + border: 2px solid transparent; + } + + .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; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + } + + .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; + } + + .div_row_center { + width: 80%; + margin-bottom: 2rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 2rem; + } + + .div_row_center_contact { + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: 3rem; + background: #ed902f; + text-align: center; + font-size: medium; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + } + + .div_row_center_text { + font-size: large; + margin-top: 0.5rem; + font-family: helvetica-w02-light, helvetica-w01-light, sans-serif; + } + + .div_row_center_enphasis { + font-size: medium; + color: #113459; + margin-top: 0.5rem; + text-align: justify; + line-height: 2rem; + letter-spacing: 1px; + } + + .div_row_line1 { + float: left; + width: 32%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 44rem; + min-height: 20rem; + } + + .div_row_line2 { + float: left; + width: 32%; + text-align: center; + background: #f0f0f5; + margin: 5px; + height: 45rem; + min-height: 20rem; + } + + .div_row_line3 { + float: left; + width: 32%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 45rem; + min-height: 20rem; + } + + .div_row_presenation { + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 3rem; + margin-left: auto; + margin-right: auto; + height: 13rem; + // margin-top: 5rem; + } + + .text_head_new { + font-family: helvetica-w01-bold, helvetica-w02-bold, helvetica-lt-w10-bold, + sans-serif; + font-size: 18px; + margin-top: 1rem; + margin-bottom: 00.5rem; + padding-right: 1rem; + padding-left: 2rem; + text-transform: uppercase; + height: 4rem; + } + + .text_desc { + overflow-wrap: break-word; + text-align: start; + font-size: small; + padding-right: 1.5rem; + padding-left: 2rem; + font-style: italic; + text-align: justify; + } + + .myli { + margin-bottom: 0.8rem; + } + + .div_row_where { + float: left; + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + margin-left: 5%; + margin-right: 5%; + margin-top: 5rem; + } + + .bton_contact_nous { + width: 100%; + text-align: center; + padding: 0; + border: 0px; + height: 3rem; + font-weight: bold; + font-size: medium; + color: white; + } + + .img_1 { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-height: 100%; + width: 100%; + } + + .img_1_bis { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-height: 100%; + width: 80% !important; + } + + .div_row_img1 { + float: left; + width: 32%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + height: 12rem; + min-height: 12rem; + border-right: 1px solid; + } + + .div_row_img2 { + float: left; + width: 32%; + text-align: center; + //background: #f0f0f5; + margin: 5px; + height: 12rem; + min-height: 12rem; + + } + + .div_row_img3 { + float: left; + width: 32%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + height: 12rem; + min-height: 12rem; + border-left: 1px solid; + } + + .main_sub_div { + height: 350rem; + margin-left: auto; + margin-right: auto; + width: 90%; + background: white; + } + + .detail_block { + width: 100%; + float: left; + display: flex; + } + + .detail_text { + width: 50%; + float: left; + margin: auto; + text-align: justify; + + } + + .detail_img { + width: 50%; + float: left; + margin: auto; + + } + + + .detail_img_video_ftion { + width: 50%; + float: left; + margin: auto; + + } + + + .div_row_center_video_ftion { + width: 100%; + text-align: left; + padding: 5px; + margin-bottom: 4rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 3rem; + } + + .detail_block_video_ftion { + width: 95%; + margin-left: auto; + margin-right: auto; + display: flex; + border-bottom: 10px solid; + border-top: 10px solid; + padding-left: 10px; + + } + + .detail_text_video_ftion { + width: 50%; + float: left; + margin: auto; + text-align: justify; + padding-left: 2rem; + } + + //------------- + // debut iciii + + .div_mobile_v3 { + position: absolute; + top: 7rem; + z-index: 1; + width: 100%; + //background: #104277; + height: 4000px; + } + + .main_frame { + width: 100%; + height: 8007px; + background: var(--Light-Grey, #FCFCFC); + + } + + + .Background-header { + width: 100%; + height: 30rem; + flex-shrink: 0; + //opacity: 0.5; + background: var(--Beige, #FFF5DA); + padding: 20px; + } + + + .Title { + display: block; + flex-direction: column; + align-items: center; + color: #0A043C; + width: Hug (319px); + height: Hug (80px); + top: 200px; + margin-left: auto; + margin-right: auto; + //position: fixed; + width: 100%; + } + + .Title_txt1 { + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + /* 125% */ + text-transform: uppercase; + width: 169px; + height: 20px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + letter-spacing: 2px; + + display: none; + + } + + .Title_txt2 { + color: var(--Green, #20BFA9); + text-align: center; + font-family: Albert Sans; + font-size: 40px; + font-style: normal; + //font-weight: 700; + line-height: 60px; + /* 120% */ + letter-spacing: -1px; + width: 319px; + height: 60px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + top: 15rem; + + } + + .text_seul_1 { + + color: var(--Deep-Blue, #0A043C); + text-align: justify; + font-family: Albert Sans; + font-size: 23px; + font-style: normal; + font-weight: 400; + line-height: 1.5em; + /* 157.143% */ + + // height: 44px; + top: 20rem; + + //position: fixed; + width: 60%; + margin-left: 25%; + margin-right: auto; + letter-spacing: 2px; + } + + .text_activite_head { + text-transform: uppercase; + width: 100%; + height: 32px; + font-family: Albert Sans; + font-size: 16px; + //font-weight: 700; + line-height: 32px; + letter-spacing: 0em; + text-align: center; + letter-spacing: 2px; + margin-bottom: 1rem; + + letter-spacing: 1px; + margin-bottom: 1rem; + background: #0A043C; + letter-spacing: 1px; + margin-bottom: 1rem; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + height: 3rem; + color: white; + padding-top: 5px; + + + } + + .image_activite_head { + //height: 22rem; + width: 100%; + } + + .image_activite_detail { + //height: 22rem; + width: 100%; + } + + .bton_en_savoir_plus_header { + margin-top: 1rem; + width: 100%; + height: 56px; + + padding: 13px, 26px, 13px, 26px; + border-radius: 8px; + border: 1px; + gap: 10px; + + background: white; + border: 1px solid #0A043C; + color: #0A043C; + font-family: Albert Sans; + font-size: 16px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0px; + text-align: center; + } + + + + + // ici 2 + .parent { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 25px; + grid-row-gap: 5px; + margin: 2rem; + padding: 1rem; + margin-bottom: 3rem; + } + + .div1 { + grid-area: 1 / 1 / 2 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div2 { + grid-area: 1 / 2 / 2 / 3; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div3 { + grid-area: 1 / 3 / 2 / 4; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .text_nous_conseillons { + width: 80%; + margin-left: auto; + margin-right: auto; + + font-family: Albert Sans; + font-size: 24px; + font-weight: normal; + line-height: 32px; + letter-spacing: 0px; + + //position: fixed; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 3rem; + + line-height: 1.8em; + text-align: justify; + + } + + + + .content_gestion_admin { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_admin_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + left: 10px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_admin_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-left: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 25%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + .detail_content_text_head_1 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + padding-bottom: 2rem; + letter-spacing: 1px; + + display: none; + } + + .detail_content_text_head_2 { + + font-family: Albert Sans; + font-size: 24px; + font-weight: 500; + line-height: 48px; + letter-spacing: 1px; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + text-transform: uppercase; + } + + .detail_content_text_head_3 { + + font-family: Albert Sans; + font-size: 16px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 1.5rem; + letter-spacing: 1px; + text-align: justify; + width: 90%; + font-family: Verdana, Georgia, Arial; + + } + + + .detail_content_text_head_3_gauche { + + font-family: Verdana, Georgia, Arial; + font-size: 16px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 60%; + + } + + .content_gestion_elearning { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_elearning_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + right: 10px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_elearning_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-right: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 5%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + + .fonctionalite_header { + + height: 50px; + font-family: Albert Sans; + font-size: 30px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + letter-spacing: 1px; + width: 100%; + float: left; + } + + + .tick_fonctionalite { + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + text-align: left; + padding-left: 1rem; + color: #0A043C; + width: 100%; + height: 2rem; + padding-right: 10px; + text-align: justify; + } + + .tick_fonctionalite_tick { + width: 5%; + float: left; + height: 2rem; + } + + .tick_fonctionalite_txt { + width: 95%; + float: left; + height: 4rem; + padding-left: 10px; + line-height: 1rem; + font-family: Verdana, Georgia, Arial; + } + + + .video_titre { + font-family: Albert Sans; + font-size: 26px; + font-weight: 600; + line-height: 48px; + letter-spacing: 0em; + text-align: left; + margin-top: 8rem; + color: #0A043C; + margin-left: 2rem; + padding: 10px; + + } + + .pave_video_gauche { + width: 30%; + float: left; + + } + + .pave_video_droite { + width: 70%; + float: right; + + } + + .pave_video { + box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); + width: 90%; + margin-left: auto; + margin-right: auto; + height: 30rem; + margin-bottom: 1rem; + padding-top: 2rem; + } + + .video_sous_titre { + font-family: Albert Sans; + font-size: 32px; + font-weight: 700; + + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-left: 4rem; + padding: 10px; + + } + + .video_mp4 { + //width: 860px; + // height: 520px; + } + + + .contactez_nous_new { + + // width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + + + font-family: Albert Sans; + font-size: 16px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + + } + + + .contactez_nous_titre { + // width: 392px; + //height: 40px; + font-family: Albert Sans; + font-size: 26px; + font-weight: 700; + line-height: 35px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-bottom: 1rem; + margin-top: 1rem; + + } + + .contactez_nous_info { + //width: 392px; + //height: 28px; + + + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0em; + text-align: left; + + } + + .div_adresse_new { + padding-left: 2rem; + float: left; + + } + + + .image_illustration { + width: 100%; + height: 15rem; + } + + .div_mobile_v3_debut { + margin-top: -27rem; + } + + + .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: #F8F9F9; + height: 20rem; + padding: 15px; + border-radius: 10px; + } + + .div_block_fonction_detail_titre { + font-family: Verdana, Georgia, Arial; + color: #3E6EE3; + line-Height: 29px; + font-size: 18px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: left; + letter-spacing: 1px; + height: 6rem; + padding-left: 2rem; + } + + .div_block_fonction_detail_img { + width: 30%; + float: left; + } + + .div_block_fonction_detail_img_inside { + width: 4rem; + } + + + .div_block_fonction_detail_desc { + width: 70%; + float: left; + text-align: left; + line-height: 1.8em; + font-size: small; + color: #464646 + } + + } + + @media only screen and (min-width: 1200px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 35px !important; + width: 35px !important; + } + } + + .div_carte { + width: 70%; + float: left; + } + + .div_adresse { + width: 29%; + float: left; + text-justify: auto; + padding-left: 0.5rem; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: large !important; + text-align: center; + margin-bottom: 1rem; + font-weight: bold; + } + + .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 { + float: left; + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: 5%; + margin-right: 5%; + } + + .div_row_gauche { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 20%; + border-radius: 1rem; + text-align: left; + } + + .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; + } + + .img_gauche_taille { + max-width: 30%; + } + + .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: 7rem; + z-index: 1; + width: 100%; + background: #104277; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 10rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1.1rem; + border: 2px solid transparent; + } + + .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; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + margin-bottom: 2rem; + } + + .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; + } + + .div_row_center { + width: 90%; + margin-bottom: 4rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + margin-top: 3rem; + } + + + .div_row_center_contact { + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: 3rem; + background: #ed902f; + text-align: center; + font-size: medium; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + } + + .div_row_center_text { + font-size: large; + margin-top: 0.5rem; + font-family: helvetica-w02-light, helvetica-w01-light, sans-serif; + } + + .div_row_center_enphasis { + font-size: medium; + color: #113459; + margin-top: 0.5rem; + margin-bottom: 1rem; + letter-spacing: 1px; + line-height: 2rem; + text-align: justify; + } + + .div_row_line1 { + float: left; + width: 32%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 40rem; + min-height: 32rem; + } + + .div_row_line2 { + float: left; + width: 32%; + text-align: center; + background: #f0f0f5; + margin: 5px; + height: 40rem; + min-height: 32rem; + } + + .div_row_line3 { + float: left; + width: 32%; + text-align: center; + background: #f2f2f2; + margin: 5px; + height: 40rem; + min-height: 32rem; + } + + .div_row_presenation { + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 3rem; + margin-left: auto; + margin-right: auto; + height: 15rem; + //margin-top: 5rem; + } + + .text_head_new { + font-family: helvetica-w01-bold, helvetica-w02-bold, helvetica-lt-w10-bold, + sans-serif; + font-size: 22px; + margin-top: 1rem; + margin-bottom: 00.5rem; + padding-right: 1rem; + padding-left: 2rem; + text-transform: uppercase; + } + + .text_desc { + overflow-wrap: break-word; + text-align: start; + font-size: small; + padding-right: 1.5rem; + padding-left: 2rem; + font-style: italic; + text-align: justify; + } + + .myli { + margin-bottom: 0.8rem; + } + + .div_row_where { + float: left; + //border: 0.01rem solid #000; + width: 90%; + margin-bottom: 1rem; + margin-left: 5%; + margin-right: 5%; + margin-top: 5rem; + } + + .bton_contact_nous { + width: 100%; + text-align: center; + padding: 0; + border: 0px; + height: 3rem; + font-weight: bold; + font-size: medium; + color: white; + } + + .img_1 { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-height: 100%; + width: 100%; + } + + .img_1_bis { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-height: 100%; + width: 80% !important; + } + + .div_row_img1 { + float: left; + width: 32%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + height: 15rem; + min-height: 15rem; + border-right: 1px solid; + } + + .div_row_img2 { + float: left; + width: 32%; + text-align: center; + // background: #f0f0f5; + margin: 5px; + height: 15rem; + min-height: 15rem; + + } + + .div_row_img3 { + float: left; + width: 32%; + text-align: center; + //background: #f2f2f2; + margin: 5px; + height: 15rem; + min-height: 15rem; + border-left: 1px solid; + } + + .main_sub_div { + min-height: 350rem; + margin-left: auto; + margin-right: auto; + width: 90%; + background: white; + padding-top: 2rem !important; + } + + .detail_block { + width: 100%; + float: left; + display: flex; + } + + .detail_text { + width: 50%; + float: left; + margin: auto; + text-align: justify; + } + + .detail_img { + width: 50%; + float: left; + margin: auto; + + } + + .div_row_center_video_ftion { + width: 100%; + text-align: left; + padding: 5px; + margin-bottom: 4rem; + border-radius: 0px; + margin-left: auto; + margin-right: auto; + min-height: 10 rem; + height: rem; + text-align: center; + font-size: large; + line-height: normal; + letter-spacing: normal; + color: #3b3e40; + font-family: Arial, Helvetica, sans-serif; + + } + + .detail_block_video_ftion { + width: 95%; + margin-left: auto; + margin-right: auto; + display: flex; + border-bottom: 10px solid; + border-top: 10px solid; + padding-left: 10px; + min-height: 25rem !important; + + } + + .detail_text_video_ftion { + width: 50%; + float: left; + margin: auto; + text-align: justify; + padding-left: 2rem; + } + + .detail_img_video_ftion { + width: 50%; + float: left; + margin: auto; + + } + + // debut iciii + + .div_mobile_v3 { + position: absolute; + top: 7rem; + z-index: 1; + width: 100%; + //background: #104277; + height: 4000px; + } + + .main_frame { + width: 100%; + height: 8007px; + background: var(--Light-Grey, #FCFCFC); + + } + + + .Background-header { + width: 100%; + height: 30rem; + flex-shrink: 0; + //opacity: 0.5; + background: var(--Beige, #FFF5DA); + padding: 20px; + } + + + .Title { + display: block; + flex-direction: column; + align-items: center; + color: #0A043C; + width: Hug (319px); + height: Hug (80px); + top: 200px; + margin-left: auto; + margin-right: auto; + //position: fixed; + width: 100%; + } + + .Title_txt1 { + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + /* 125% */ + text-transform: uppercase; + width: 169px; + height: 20px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + letter-spacing: 2px; + + display: none; + + } + + .Title_txt2 { + color: var(--Green, #20BFA9); + text-align: center; + font-family: Albert Sans; + font-size: 40px; + font-style: normal; + //font-weight: 700; + line-height: 60px; + /* 120% */ + letter-spacing: -1px; + width: 319px; + height: 60px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + top: 15rem; + + } + + .text_seul_1 { + width: 638px; + color: var(--Deep-Blue, #0A043C); + text-align: justify; + font-family: Albert Sans; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: 1.5em; + /* 157.143% */ + width: 638px; + //height: 44px; + top: 20rem; + + //position: fixed; + width: 50%; + margin-left: 25%; + margin-right: auto; + letter-spacing: 2px; + } + + .text_activite_head { + text-transform: uppercase; + width: 100%; + height: 32px; + font-family: Albert Sans; + font-size: 20px; + //font-weight: 700; + line-height: 32px; + letter-spacing: 0em; + text-align: center; + + letter-spacing: 2px; + margin-bottom: 1rem; + background: #0A043C; + letter-spacing: 1px; + margin-bottom: 1rem; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + height: 3rem; + color: white; + padding-top: 5px; + + } + + .image_activite_head { + height: 22rem; + } + + .image_activite_detail { + height: 22rem; + } + + .bton_en_savoir_plus_header { + margin-top: 1rem; + width: 339px; + height: 56px; + + padding: 13px, 26px, 13px, 26px; + border-radius: 8px; + border: 1px; + gap: 10px; + + background: white; + border: 1px solid #0A043C; + color: #0A043C; + font-family: Albert Sans; + font-size: 16px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0px; + text-align: center; + } + + + + + // ici 2 + .parent { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 25px; + grid-row-gap: 5px; + margin: 2rem; + padding: 1rem; + margin-bottom: 5rem; + } + + .div1 { + grid-area: 1 / 1 / 2 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div2 { + grid-area: 1 / 2 / 2 / 3; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div3 { + grid-area: 1 / 3 / 2 / 4; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .text_nous_conseillons { + width: 50%; + margin-left: auto; + margin-right: auto; + + font-family: Albert Sans; + font-size: 25px; + font-weight: normal; + line-height: 32px; + letter-spacing: 0px; + + //position: fixed; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 4rem; + line-height: 1.8em; + text-align: justify; + } + + + + .content_gestion_admin { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_admin_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + left: 10px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_admin_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-left: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 25%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + .detail_content_text_head_1 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + padding-bottom: 2rem; + letter-spacing: 1px; + + display: none; + } + + .detail_content_text_head_2 { + + font-family: Albert Sans; + font-size: 24px; + font-weight: 500; + line-height: 48px; + letter-spacing: 1px; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + text-transform: uppercase; + } + + .detail_content_text_head_3 { + + font-size: 16px; + font-weight: normal; + line-height: 28px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 80%; + font-family: Verdana, Georgia, Arial; + + } + + + .detail_content_text_head_3_gauche { + + font-family: Verdana, Georgia, Arial; + font-size: 16px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 60%; + + } + + .content_gestion_elearning { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_elearning_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + right: 50px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_elearning_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-right: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 5%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + + .fonctionalite_header { + //width: 528px; + height: 96px; + font-family: Albert Sans; + font-size: 30px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + margin-left: auto; + margin-right: auto; + margin-top: 5rem; + margin-bottom: 3rem; + letter-spacing: 1px; + width: 100%; + float: left; + } + + + .tick_fonctionalite { + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + text-align: left; + padding-left: 1rem; + color: #0A043C; + width: 100%; + height: 2rem; + padding-right: 10px; + text-align: justify; + } + + .tick_fonctionalite_tick { + width: 5%; + float: left; + height: 2rem; + } + + .tick_fonctionalite_txt { + width: 95%; + float: left; + height: 3rem; + padding-left: 10px; + line-height: 1rem; + font-family: Verdana, Georgia, Arial; + } + + + .video_titre { + font-family: Albert Sans; + font-size: 26px; + font-weight: 600; + line-height: 48px; + letter-spacing: 0em; + text-align: left; + margin-top: 8rem; + color: #0A043C; + margin-left: 4rem; + padding: 10px; + + } + + .pave_video_gauche { + width: 30%; + float: left; + + } + + .pave_video_droite { + width: 70%; + float: right; + + } + + .pave_video { + box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); + width: 90%; + margin-left: auto; + margin-right: auto; + height: 40rem; + margin-bottom: 1rem; + padding-top: 2rem; + } + + .video_sous_titre { + font-family: Albert Sans; + font-size: 32px; + font-weight: 700; + + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-left: 4rem; + padding: 10px; + + } + + .video_mp4 { + width: 860px; + height: 520px; + } + + + .contactez_nous_new { + + // width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + + + font-family: Albert Sans; + font-size: 16px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + + } + + + .contactez_nous_titre { + // width: 392px; + //height: 40px; + font-family: Albert Sans; + font-size: 28px; + font-weight: 700; + line-height: 40px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-bottom: 1rem; + margin-top: 1rem; + + } + + .contactez_nous_info { + //width: 392px; + //height: 28px; + + + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0em; + text-align: left; + + } + + .div_adresse_new { + padding-left: 2rem; + float: left; + + } + + .div_mobile_v3_debut { + margin-top: -27rem; + } + + .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: #F8F9F9; + height: 12rem; + padding: 15px; + border-radius: 8px; + border: solid 2px #ebedef; + } + + .div_block_fonction_detail_titre { + font-family: Verdana, Georgia, Arial; + color: #3E6EE3; + line-Height: 29px; + font-size: 20px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: left; + letter-spacing: 1px; + height: 4rem; + padding-left: 2rem; + } + + .div_block_fonction_detail_img { + width: 30%; + float: left; + } + + .div_block_fonction_detail_img_inside { + width: 4rem; + } + + + .div_block_fonction_detail_desc { + width: 70%; + float: left; + text-align: left; + line-height: 1.8em; + font-size: small; + color: #464646 + } + + } + + // end media + + + + + .header_title { + background: gainsboro; + font-size: x-large; + font-weight: 700; + letter-spacing: 1px; + height: 3rem !important; + padding-top: 5px; + } + + .chapitre { + font-size: 1.3rem; + line-height: 3rem; + } + + .hr_break { + border: 10px solid grey; + } +} \ No newline at end of file diff --git a/src/styles/components/_quisommesnous_v3.scss b/src/styles/components/_quisommesnous_v3.scss index 90f38d5..2fb88e4 100644 --- a/src/styles/components/_quisommesnous_v3.scss +++ b/src/styles/components/_quisommesnous_v3.scss @@ -7,7 +7,7 @@ .only_mobile { display: none; } - + @media only screen and (max-width: 600px) { .only_mobile { diff --git a/src/styles/index.scss b/src/styles/index.scss index 69e17de..8ade856 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -130,4 +130,5 @@ @import "./components/footer_catalog_pub"; @import "./components/displaydetailarticle_new_v2"; @import "./components/recherchearticles_new_v2_style"; -@import "./components/quisommesnous_v4"; \ No newline at end of file +@import "./components/quisommesnous_v4"; +@import "./components/fonctionnalite_v1"; \ No newline at end of file