diff --git a/src/App.js b/src/App.js index 78e5f6a..9826ad1 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import Connexion from './pages/Connexion' import Login from './pages/Login'; import Recherche_new_v2 from "./pages/recherche_new_v2"; +import Recherche_new_v3 from "./pages/recherche_new_v3"; import Mon_Catalogue_Public from "./pages/mon_catalogue_public"; @@ -15,6 +16,7 @@ import TestUrl from "./pages/testurl"; import Account from "./pages/account"; import DisplayDetailClass_new_v2 from "./pages/displaydetailclass_new_v2"; +import DisplayDetailClass_new_v3 from "./pages/displaydetailclass_new_v3"; import Display_Partner_Catalog_DetailClass_new_v2 from "./pages/display_partner_catalog_detailclass_new_v2" @@ -146,6 +148,9 @@ function App() { + + + @@ -165,8 +170,10 @@ function App() { + + - + diff --git a/src/components/DisplayDetailClass_new_v2.js b/src/components/DisplayDetailClass_new_v2.js index cdb7190..d961b15 100644 --- a/src/components/DisplayDetailClass_new_v2.js +++ b/src/components/DisplayDetailClass_new_v2.js @@ -2070,6 +2070,7 @@ const DisplayDetailClass_new_v2 = (props) => { } +
Objectif @@ -2372,41 +2373,7 @@ const DisplayDetailClass_new_v2 = (props) => { - {/*GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
-
- Les sessions : -
-
-
    - - - - {GetCurrentClass_result && GetCurrentClass_result.slice(0, 3).map((formation) => ( -
  • - -
    -
    - {(JSON.parse(formation).date_debut).substring(0, 10)}  au {(JSON.parse(formation).date_fin).substring(0, 10)} - - -
    -
    - {(JSON.parse(formation).distantiel) === "1" && " A Distance - "} - {(JSON.parse(formation).presentiel) === "1" && " En Présentiel - "} - {(JSON.parse(formation).adresse)}  {(JSON.parse(formation).code_postal)} - -
    -
    - -
  • - - ))} - -
- -
- -
*/} + {String(action).toLowerCase() !== "information" && String(action).toLowerCase() !== "inscription" &&
@@ -2501,11 +2468,9 @@ const DisplayDetailClass_new_v2 = (props) => {
{associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.length > 0 && -
Cela pourrait au ssi vous intéresser
} +
Cela pourrait aussi vous intéresser
}
- - {associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.slice(0, 3).map((formation) => (
@@ -2619,430 +2584,7 @@ const DisplayDetailClass_new_v2 = (props) => {
- {/*
-

{`${DetailTraining["title"]}`}

- - -
- -
A voir au ssi
- - - {associatedtraining_message && String(associatedtraining_api) === "True" && - associatedtraining_message.map((formation) => ( -
{ - e.preventDefault(); - //test(props.formation.external_code); - window.open( - "/Display-Detail-formation/" + JSON.parse(formation).internal_url, - '_blank' - ); - - - }}> -
- {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("dev_perso") && - developpement personnel} - - {!JSON.parse(formation).metier && autre personnel} - -
- -
-
- {parse(String(JSON.parse(formation).title))} -
-
- {parse(String((JSON.parse(formation).description).substring(0, 50)))} - -
- -
-
- - ))} - -
- -
- {DetailTraining["img_banner_detail_class"] &&
- -
- - - - -
} - - {(!DetailTraining["img_banner_detail_class"] || String(DetailTraining["img_banner_detail_class"]).length < 5) && -
-
 
-
- - -
-
} - - {/* -/!\ important : - -Certains partenaire ont leur propre système d'inscription. -Donc si le champs "myclass.class_inscription_url" existe et est valide, alors -on renvoi l'utilisateur vers ce lien. - -Si non, on utilise le formumaire de mysy,. - -* /} - - - - {String(inscritpion) === "1" &&
- - -
- - } - - {String(inscritpion) === "2" &&
- - -
- - } - -
- {parse(String(DetailTraining["title"]))} -
- -
- Descriptions {DetailTraining["description"] && -

- - {parse(String(DetailTraining["description"]))} -

} -
- - - {DetailTraining["objectif"] &&
- Objectif - -

- {parse(String(DetailTraining["objectif"]))}   -

- -
} - -
- {DetailTraining["prerequis"] &&
- Pré-requis {DetailTraining["prerequis"] && -

- {parse(String(DetailTraining["prerequis"]))}   -

} - {!DetailTraining["prerequis"] &&

- ---   -

} -
-
} - - {DetailTraining["pourqui"] &&
- Pour Qui {DetailTraining["pourqui"] && -

- {parse(String(DetailTraining["pourqui"]))}   -

} - {!DetailTraining["pourqui"] &&

- ---   -

} -
-
} - - - {DetailTraining["programme"] &&
- - Programme - {DetailTraining["programme"] &&

- {parse(String(DetailTraining["programme"]))}   -

} - {!DetailTraining["programme"] &&

- ---   -

} -
-
} - - {DetailTraining["plus_produit"] &&
- Points forts - {DetailTraining["plus_produit"] && -

- {parse(String(DetailTraining["plus_produit"]))}   -

} - -
-
} - -
- Caracteristiques
-
-
- -
- -
-
Prix : -
- -
- {DetailTraining["price"]} € -
-
- -
Durée : -
- -
- {DetailTraining["duration"]}   {DetailTraining["duration_unit"]} -
-
- -
Certification : -
- -
- {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") &&
- - Non  
- } - {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") &&
- - Oui  
- } -
- -
-
-
Distanciel : -
- -
- {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" &&
Oui
} - {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" &&
Non
} -
-
-
Presentiel : -
- -
- {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
Oui
} - {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
Non
} -
-
-
Support : -
- -
- {DetailTraining["support"] &&
- - {DetailTraining["support"]}  
- } - {!DetailTraining["certif"] &&
- - Inconnu  
- } -
-
-
-
-
-
-
Note -
- -
- - - - -
-
- -
- -
 
-
- - - - - {/*
* /} - -
- {String(submenu) === String("formateur") &&
- {DetailTraining.trainer &&
-
- {DetailTraining.trainer} -
} - - {!DetailTraining.trainer &&
-
- -
} - -
} - - {String(submenu) === String("datelieu") &&
- - - {GetCurrentClass_result && GetCurrentClass_result.map((formation) => ( - - -
- - - - {String(JSON.parse(formation).code_postal) === "0" && - String(JSON.parse(formation).date_debut) === String(JSON.parse(formation).date_fin) && } - - {String(JSON.parse(formation).code_postal) !== "0" && String(JSON.parse(formation).date_debut) === String(JSON.parse(formation).date_fin) && - } - - - {String(JSON.parse(formation).code_postal) === "0" && } - - {String(JSON.parse(formation).code_postal) !== "0" && String(JSON.parse(formation).date_debut) !== String(JSON.parse(formation).date_fin) && } - -
- ))} - -
} - - {String(submenu) === String("divers") &&
- -
} -
- -
- -
- -
- -
A voir au ssi
- - - {associatedtraining_message && String(associatedtraining_api) === "True" && - associatedtraining_message.map((formation) => ( -
{ - e.preventDefault(); - //test(props.formation.external_code); - window.open( - "/Display-Detail-formation/" + JSON.parse(formation).internal_url, - '_blank' - ); - - - }}> -
- - - {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("dev_perso") && - developpement personnel} - - {!JSON.parse(formation).metier && autre personnel} - -
- -
-
- {parse(String(JSON.parse(formation).title))} -
-
- {parse(String((JSON.parse(formation).description).substring(0, 50)))} -
- - - - -
-
- - ))} - -
- -
-
-
- - -
*/} +
diff --git a/src/components/DisplayDetailClass_new_v3.js b/src/components/DisplayDetailClass_new_v3.js new file mode 100644 index 0000000..25c0922 --- /dev/null +++ b/src/components/DisplayDetailClass_new_v3.js @@ -0,0 +1,1976 @@ +import React, { useRef, useState, useEffect } from "react"; +import { useParams } from 'react-router-dom' +import axios from "axios"; +import Popup from 'reactjs-popup'; +import 'reactjs-popup/dist/index.css'; +import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; +import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; +import { Helmet } from "react-helmet"; +import 'react-slideshow-image/dist/styles.css' +import { Fade } from 'react-slideshow-image'; +import slideimg1 from "../mysy_img/education.jpg"; +import slideimg4 from "../mysy_img/mysy_img.png"; +import Footer from "./Fotter"; +import Header from "./Header"; +import bannerimg from "../mysy_img/MYSY_banner_compte.png"; +import img_met_program from "../mysy_img/met_programmation.jpg"; +import img_met_hotel from "../mysy_img/met_hotel.jpg"; +import img_met_graphisme from "../mysy_img/metier_graphisme.jpg"; + +import img_met_autre from "../mysy_img/met_autre.jpg"; +import img_met_digital from "../mysy_img/met_digital.jpg"; +import img_met_management from "../mysy_img/met_management.jpg"; +import img_met_projet from "../mysy_img/met_projet.jpg"; + +import img_met_market from "../mysy_img/met_market.jpg"; +import img_met_autre2 from "../mysy_img/met_autre2.jpg"; +import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg"; +import img_met_rh from "../mysy_img/met_rh.jpg"; + +import img_met_bureautic from "../mysy_img/met_burautic.jpg"; +import img_met_vente from "../mysy_img/met_vente.jpg"; +import img_met_sport from "../mysy_img/met_sport.png"; +import img_met_sante_nat from "../mysy_img/met_sante_nat.jpeg"; +/* +/!\ important: les images du slides doivent avoir une dimension de : 250 X 450 +*/ +import { Button, } from "reactstrap"; +import { useHistory } from "react-router-dom"; +import { useCookies } from "react-cookie"; +import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share"; +import { SocialIcon } from 'react-social-icons'; +import { confirmAlert } from 'react-confirm-alert'; +//import { Rating } from 'react-simple-star-rating'; +import Rating from '@mui/material/Rating'; +import parse from 'html-react-parser'; +import Inscription from "./Inscription_Information"; + +import mysy_logo2 from "../mysy_img2/Logo_MySy.png" +import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa'; +import { areOptionsEqual } from "@mui/base"; +import { style } from "@mui/system"; + +import Accordion from '@mui/material/Accordion'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import Typography from '@mui/material/Typography'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; + +const DisplayDetailClass_new_v3 = (props) => { + const { classId, action } = useParams(); + const [result, setResult] = useState(""); + const [myApiResponse, setmyApiResponse] = useState(); + const [DetailTraining, setDetailTraining] = useState([]); + const [closepopup, setclosepopup] = useState(0); + const [country_code, setcountry_code] = useState(""); + const [country_name, setcountry_name] = useState(""); + const [city, setcity] = useState(""); + const [postal, setpostal] = useState(""); + const [latitude, setlatitude] = useState(""); + const [longitude, setlongitude] = useState(""); + const [IPv4, setIPv4] = useState(""); + const [state, setstate] = useState(""); + const [userIp, setuserIp] = useState(""); + const [mynote, setmynote] = useState(0); + const [userconnected, setuserconnected] = useState("0"); + const [someoneconnected, setsomeoneconnected] = useState("0"); + const [partnerconnected, setpartnerconnected] = useState("0"); + const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); + const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']); + + const [inscritpion, setinscritpion] = useState(""); + const [ratingvalue, setratingvalue] = useState(0); + + const [text_size, settext_size] = useState("0"); + + + // Gestion des Cookies + const stored_partner = cookie_part.tokenmysypart; + const stored_user = cookie.tokenmysych; + + + const [childdata, setchilddata] = useState(); + + + // Cette fonction verifier si le token de l'evaluation est valide + //si $action != 'information' et 'inscription', alors la valeur est forcement celle d'un token. + const [tokenEval_api, settokenEval_api] = useState(); + const [tokenEval_message, settokenEval_message] = useState(); + const [tokenEval_result, settokenEval_result] = useState(); + function CheckEvaluationToken() { + + var form = new FormData(); + //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); + + form.append("eval_token", action); + form.append("class_internal_url", classId); + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/MySyckeckEvaluationToken/"; + + axios.post(myurl, form).then(res => { + //console.log(" In CheckEvaluationToken res.data.status = " + res.data.status); + //console.log(" In CheckEvaluationToken res.data.message r_class = " + res.data.message); + + + if (String(res.data.status) !== "false") { + settokenEval_api("true"); + settokenEval_result(res.data.message); + } + else { + //console.log(" In tokenEval_trainingsession res.data.status = " + res.data.status); + settokenEval_api("false"); + settokenEval_message(res.data.message); + } + + }).catch((error) => { + console.warn('Not good man :( CheckEvaluationToken = ', error); + settokenEval_api("false"); + //setmyApimyApiMessage("") + }) + } + + + useEffect(() => { + + async function funclocaltoken() { + + + if (action && String(action).toLocaleLowerCase() !== "inscription" && + String(action).toLocaleLowerCase() !== "information") { + + CheckEvaluationToken(); + + } + } + + + var local_user_connect = 0; + var local_part_connect = 0; + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + setuserconnected("0"); + local_user_connect = 0; + } else { + setuserconnected("1"); + local_user_connect = 1; + } + + if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { + setpartnerconnected("0"); + local_part_connect = 0; + } else { + setpartnerconnected("1"); + local_part_connect = 1; + } + + async function fetchData() { + const result = await axios('https://geolocation-db.com/json/',); + setuserIp(result.data.IPv4); + setcountry_code(result.data.country_code); + setcountry_name(result.data.country_name); + setcity(result.data.city); + setpostal(result.data.postal); + setlatitude(result.data.latitude); + setlongitude(result.data.longitude); + setIPv4(result.data.IPv4); + setstate(result.data.state); + setuserIp(result.data.IPv4); + submenu_datelieu(); + } + fetchData(); + + + GetCurrentClass_trainingsession(); + Display(); + GetAssociatedTraning(); + + + funclocaltoken(); + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + + + }, []); + + + function contactUs(e) { + + var sender_mail = ""; + var sender_tel = ""; + var token = ""; + if (String(userconnected) === "0") { + sender_mail = document.getElementsByName("usermail")[0].value; + sender_tel = document.getElementsByName("usernumtel")[0].value; + if (sender_mail.length == 0 && sender_tel.length == 0) { + alert(" Les information fournies sont incorrectes "); + return; + } + } else { + token = String(stored_user) + + } + + + var useravis = document.getElementsByName("useravis")[0].value; + var usersupqual = document.getElementsByName("userqualsup")[0].value; + var usernote = document.getElementsByName("usernote")[0].value; + + if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) { + alert("Merci de saisir le nombre minimum de caractère requis pour les champs "); + return; + } + + + var re = /\S+@\S+\.\S+/; + if (re.test(sender_mail) == false) { + alert("l'email est incorrecte"); + return; + } + + + ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ") + + + //alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = " + //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude); + var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/"; + var form = new FormData(); + form.append("type", "email"); + form.append("recever_mail", ""); + form.append("recever_tel", ""); + form.append("sender_mail", sender_mail); + form.append("sender_tel", sender_tel); + form.append("object", DetailTraining["external_code"]); + form.append("token", ""); + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + axios.post(myurl, form).then(res => { + if (res.data.status != "False") { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + setclosepopup(1); + document.getElementsByName("usermail")[0].value = ""; + document.getElementsByName("usernumtel")[0].value = ""; + document.getElementsByName("usercomment")[0].value = ""; + } + else { + //console.log(" contact-nous statut = " + res.data.status); + //console.log(" contact-nous res.data.message = " + res.data.message); + } + }).catch((error) => { + console.warn('contact-nous Not good man :( mysearchtext = '); + + }) + + + } + + + /* Cette variable accompagne la gestion des images par defaut. + idée : si la valeur de "DetailTraining.metier" != "management, digital, office, rh, vente, dev_perso" + alors l'utilisateur à créer une formation avec un metier qui n'est pas geré, donc on met une image par defaut + */ + const [ismetiermanaged, setismetiermanaged] = useState(); + const liste_metier = ["management", "digital", "office", "rh", "vente", "dev_perso"]; + + + const [nb_pave_a_afficher, setnb_pave_a_afficher] = useState(); + + const [isdatadock, setisdatadock] = useState(); + const [isqualiopi, setisqualiopi] = useState(); + const [iscertitrace, setiscertitrace] = useState(); + const [isbureaucertitrace, setisbureaucertitrace] = useState(); + const [iscertifvoltaire, setiscertifvoltaire] = useState(); + const [partnair_name, setpartnair_name] = useState(); + const [website_partenaire, setwebsite_partenaire] = useState(); + + const [class_sales_price, setclass_sales_price] = useState("0"); + + const [myclassimage, setmyclassimage] = useState(); + const [isclassimage, setisclassimage] = useState("False"); + const [userimgclassprofil, setuserimgclassprofil] = useState(""); + + const [class_img_stored_in_bdd, setclass_img_stored_in_bdd] = useState(""); + + function getClassImage_no_token(class_id, class_external_code) { + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_no_token/"; + + var form = new FormData(); + + form.append("type", "partner"); + form.append("related_collection", "myclass"); + form.append("related_collection_recid", class_id); + form.append("class_external_code", class_external_code); + + + axios.post(myurl, form).then(res => { + + if (res.data.status != "False") { + + //console.log(" getClassImage : In test res.data.status = " + res.data.status); + console.log(" getClassImage: res.data.message.img = " + res.data.message); + + if (res.data.message.img.length > 0) { + setisclassimage("True"); + } + else { + setisclassimage("False"); + } + setisclassimage(res.data.message.img); + var ch_img = "data:image/png;base64," + res.data.message.img; + setclass_img_stored_in_bdd(ch_img); + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setisclassimage("False"); + setuserimgclassprofil(); + setclass_img_stored_in_bdd(); + } + }).catch((error) => { + + console.warn('getClassImage ee: Not good man :( getClassImage = '); + setisclassimage("False"); + setuserimgclassprofil(""); + setclass_img_stored_in_bdd(""); + }) + + } + + + + function Display(e) { + var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/"; + var form = new FormData(); + form.append("internal_url", classId); + + var my_local_user_connect; + var my_local_part_connect; + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + my_local_user_connect = 0; + } else { + my_local_user_connect = 1; + } + + if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { + my_local_part_connect = 0; + } else { + my_local_part_connect = 1; + } + + + + if (String(my_local_user_connect) === "1") { + form.append("token", stored_user); + form.append("connection_type", "user"); + } + else if (String(my_local_part_connect) === "1") { + form.append("token", stored_partner); + form.append("connection_type", "partner"); + } + else { + form.append("token", ""); + form.append("connection_type", ""); + } + + // Ajout des info IP user + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + var cpt_pave = 0; + //alert("myurl = "+myurl); + + axios.post(myurl, form).then(res => { + // console.log(" In Display res.data.status = " + res.data.status); + console.log(" In Display res.data.message = " + res.data.message); + if (String(res.data.status) === String("true")) { + + if (res.data.message.length > 0) { + setmyApiResponse("True"); + + if (String(JSON.parse(res.data.message).coeur) !== String("1") && + String(JSON.parse(res.data.message).freeacces) !== String("1")) { + + //alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur) + // Verification si on est en e connecté ou non. + var local_user_connect = 0; + var local_part_connect = 0; + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + setuserconnected("0"); + local_user_connect = 0; + } else { + setuserconnected("1"); + local_user_connect = 1; + } + + if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { + setpartnerconnected("0"); + local_part_connect = 0; + } else { + setpartnerconnected("1"); + local_part_connect = 1; + } + + if (local_user_connect === 0 && local_part_connect === 0) { + confirmAlert({ + title: 'Connexion ?', + message: 'Connectez-vous pour acceder  au detail de cette formation', + buttons: [ + { + label: 'Vous avez un compte', + onClick: () => { history.push("/mysy-training-login/training/" + classId) } + }, + { + label: "Vous n'avez pas de compte", + onClick: () => { history.push("/create_account") } + }, + + ], + closeOnEscape: false, + closeOnClickOutside: false, + keyCodeForClose: [8, 32], + willUnmount: () => { }, + afterClose: () => { }, + onClickOutside: () => { }, + onKeypress: () => { }, + onKeypressEscape: () => { }, + }); + + + } + } else { + //alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur) + } + } + else { + setmyApiResponse("False"); + } + //console.log(" In displaydetailclass res.data.status = " + res.data.status); + //console.log(" In displaydetailclass res.data.message = " + res.data.message); + //console.log(" In displaydetailclass taille res.data.message = " + res.data.message.length); + setResult(res.data.message); + setDetailTraining(JSON.parse(res.data.message)); + + + getClassImage_no_token(JSON.parse(res.data.message)._id, JSON.parse(res.data.message).external_code); + + + if (JSON.parse(res.data.message).note) { + setratingvalue(JSON.parse(res.data.message).note); + } + + if (JSON.parse(res.data.message).isdatadock) { + setisdatadock(JSON.parse(res.data.message).isdatadock); + } + + if (JSON.parse(res.data.message).business_prices && JSON.parse(res.data.message).business_prices.length == 1) { + setclass_sales_price(JSON.parse(res.data.message).business_prices[0].discounted_price); + + } else { + setclass_sales_price(JSON.parse(res.data.message).price); + setclass_sales_price(JSON.parse(res.data.message).price); + } + + + if (JSON.parse(res.data.message).isqualiopi) { + setisqualiopi(JSON.parse(res.data.message).isqualiopi); + } + + + if (JSON.parse(res.data.message).iscertitrace) { + setiscertitrace(JSON.parse(res.data.message).iscertitrace); + } + + if (JSON.parse(res.data.message).isbureaucertitrace) { + setisbureaucertitrace(JSON.parse(res.data.message).isbureaucertitrace); + } + + if (JSON.parse(res.data.message).iscertifvoltaire) { + setiscertifvoltaire(JSON.parse(res.data.message).iscertifvoltaire); + } + + if (JSON.parse(res.data.message).nom_partenaire) { + setpartnair_name(JSON.parse(res.data.message).nom_partenaire); + } + + if (JSON.parse(res.data.message).nb_pave_a_afficher) { + setnb_pave_a_afficher(JSON.parse(res.data.message).nb_pave_a_afficher); + //console.log(" ### NB setnb_pave_a_afficher = ", JSON.parse(res.data.message).nb_pave_a_afficher); + } + + + if (JSON.parse(res.data.message).website_partenaire) { + setwebsite_partenaire(JSON.parse(res.data.message).website_partenaire); + } + + // Verifier si le metier est geré + if (JSON.parse(res.data.message).metier) { + if (!liste_metier.includes(JSON.parse(res.data.message).metier)) { + setismetiermanaged("0"); // j'ai une valeur dans metier, mais qui n'est pas geré + } + } + else { + setismetiermanaged("0"); + } + + if (JSON.parse(res.data.message).img_url && String(JSON.parse(res.data.message).img_url).length > 0) { + setismetiermanaged("1"); + } + + if (JSON.parse(res.data.message).text_size) { + settext_size(JSON.parse(res.data.message).text_size); + + //"block_crossell_meme_orga" + var local_tmp; + var val; + var footer_top; + var main_h; + var main_h_px; + + + //console.log("nb_partner_certificat = ", JSON.parse(res.data.message).nb_partner_certificat); + + + if (window.screen.width < 601) { + + var decalage_pr_certificat = parseInt(String(JSON.parse(res.data.message).nb_partner_certificat)) * 150; + //console.log("decalage_pr_certificat = ", decalage_pr_certificat); + + var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher)); + + //console.log("### local_val = ", local_val) + if (local_val >= 5) { + //console.log(" ON PASSE  au MAX") + var local_tmp_val = 2300 + decalage_pr_certificat; + var local_main_h_px = 4000 + decalage_pr_certificat; + //console.log("### local_tmp_val = ", local_tmp_val, " local_main_h_px = ",local_main_h_px); + local_tmp = local_tmp_val + "px"; + main_h_px = local_main_h_px + "px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + + var local_tmp_val = 2800 + decalage_pr_certificat; + var local_main_h_px = 4500 + decalage_pr_certificat; + local_tmp = local_tmp_val + "px"; + main_h_px = local_main_h_px + "px"; + } + + } else { + //console.log(" ON PASSE  au MIN"); + var local_tmp_val = 2100 + decalage_pr_certificat; + var local_main_h_px = 4800 + decalage_pr_certificat; + + local_tmp = local_tmp_val + "px"; + main_h_px = local_main_h_px + "px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + var local_tmp_val = 2600 + decalage_pr_certificat; + var local_main_h_px = 5300 + decalage_pr_certificat; + local_tmp = local_tmp_val + "px"; + main_h_px = local_main_h_px + "px"; + } + } + document.getElementById('mob_block_cross_sell_cat').style.top = local_tmp; + document.getElementById('mobile').style.height = main_h_px; + + } + + if (window.screen.width >= 601 && window.screen.width <= 991) { + + var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher)); + if (local_val >= 5) { + //console.log(" ON PASSE  au MAX") + local_tmp = "2000px"; + main_h_px = "2700px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + local_tmp = "2500px"; + main_h_px = "3200px"; + } + + } else { + console.log(" ON PASSE  au MIN"); + local_tmp = "1700px"; + main_h_px = "2500px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + local_tmp = "2200px"; + main_h_px = "3000px"; + } + + } + document.getElementById('block_crossell_meme_orga').style.top = local_tmp; + document.getElementById('desktop').style.height = main_h_px; + + + } + + if (window.screen.width >= 992 && window.screen.width <= 1199) { + + var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher)); + if (local_val >= 5) { + console.log(" ON PASSE  au MAX") + local_tmp = "2000px"; + main_h_px = "2800px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + local_tmp = "2500px"; + main_h_px = "3200px"; + } + + } else { + console.log(" ON PASSE  au MIN"); + local_tmp = "1700px"; + main_h_px = "2500px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + local_tmp = "2200px"; + main_h_px = "3000px"; + } + + } + document.getElementById('block_crossell_meme_orga').style.top = local_tmp; + document.getElementById('desktop').style.height = main_h_px; + } + + if (window.screen.width >= 1200) { + var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher)); + if (local_val >= 5) { + console.log(" ON PASSE  au MAX") + local_tmp = "2000px"; + main_h_px = "2800px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + local_tmp = "2500px"; + main_h_px = "3200px"; + } + + } else { + console.log(" ON PASSE  au MIN"); + local_tmp = "1700px"; + main_h_px = "2500px"; + + if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") { + local_tmp = "2300px"; + main_h_px = "3000px"; + } + } + + document.getElementById('block_crossell_meme_orga').style.top = local_tmp; + document.getElementById('desktop').style.height = main_h_px; + } + + + } + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setmyApiResponse("false"); + history.push("/formation-inconnue/"); + + } + + + }).catch((error) => { + console.warn('Not good man :( Display = ', error); + //console.log(error); + setmyApiResponse("false"); + + }) + + + } + + const [associatedtraining_api, setassociatedtraining_api] = useState(""); + const [associatedtraining_message, setassociatedtraining_message] = useState(""); + function GetAssociatedTraning(e) { + var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_associated_class_of_partnair/"; + var form = new FormData(); + form.append("internal_url", classId); + // Ajout des info IP user + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + + //alert("myurl = "+myurl); + + axios.post(myurl, form).then(res => { + if (String(res.data.status) !== String("false")) { + //console.log(" In GetAssociatedTraning res.data.status = " + res.data.status); + //console.log(" In GetAssociatedTraning res.data.message = " + res.data.message); + setassociatedtraining_api("True"); + setassociatedtraining_message(res.data.message); + + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setassociatedtraining_api("False"); + } + + + }).catch((error) => { + console.warn('Not good man :( GetAssociatedTraning = '); + setassociatedtraining_api("False"); + + }) + + + } + + const history = useHistory(); + + const fadeImages = [ + { + url: slideimg1, + }, + + { + url: slideimg4, + }, + ]; + + + function CheckAvis(e) { + + const val = document.getElementById("useravis").value + //alert(" evalu " + val); + if (val.length < 20) { + alert(" Le champ 'Avis' doit etre plus renseigné"); + } + //alert(val); + } + + function CheckNote(e) { + const val = e.target.value; + + if (isNaN(val)) { + //alert(val + " is not a number
mynote = "+mynote); + document.getElementById("usernote").value = mynote; + } else { + if (val > 5) { + alert(" Valeur Maxi doit etre 5"); + document.getElementById("usernote").value = mynote; + } else { + setmynote(val); + } + } + + } + + const [submenu, setsubmenu] = useState("datelieu"); + + function submenu_info() { + setsubmenu("formateur"); + //if (document.getElementsByName("menu_formateur")[0]) + // document.getElementsByName('menu_formateur')[0].focus(); + + if (document.getElementsByName("menu_datelieu")[0]) + document.getElementsByName('menu_datelieu')[0].blur(); + + if (document.getElementsByName("submenu_divers")[0]) + document.getElementsByName('submenu_divers')[0].blur(); + } + + function submenu_datelieu() { + setsubmenu("datelieu"); + //if (document.getElementsByName("menu_datelieu")[0]) + // document.getElementsByName('menu_datelieu')[0].focus(); + + if (document.getElementsByName("menu_formateur")[0]) + document.getElementsByName('menu_formateur')[0].blur(); + + if (document.getElementsByName("submenu_divers")[0]) + document.getElementsByName('submenu_divers')[0].blur(); + } + + + function submenu_divers() { + setsubmenu("divers"); + //if (document.getElementsByName("submenu_divers")[0]) + //document.getElementsByName('submenu_divers')[0].focus(); + + if (document.getElementsByName("menu_datelieu")[0]) + document.getElementsByName('menu_datelieu')[0].blur(); + + if (document.getElementsByName("submenu_divers")[0]) + document.getElementsByName('submenu_divers')[0].blur(); + } + + + function Inscription_bton(event) { + if (DetailTraining["internal_url"] && String(DetailTraining["class_inscription_url"]).length > 10) { + window.open( + String(DetailTraining["class_inscription_url"]), + '_blank' + ); + + } else { + setinscritpion("1"); + } + if (window.screen.width < 601) { + var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height; + var sticky_div_hilight_top = "1300"; + + + var new_meme_orga_top = parseInt(meme_orga_top) + 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900; + var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) + 900; + + document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px"; + document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px"; + document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px"; + + window.scrollTo(0, 500); + } + else if (window.screen.width >= 601 && window.screen.width <= 991) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) + 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900; + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + + } + else if (window.screen.width >= 992 && window.screen.width <= 1199) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) + 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500; + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + else if (window.screen.width >= 1200) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) + 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500; + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + + + } + + function Contact_bton(event) { + setinscritpion("2"); + + if (window.screen.width < 601) { + //document.getElementById('mob_block_cross_sell_cat').style.display = "none"; + + var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height; + var sticky_div_hilight_top = "1300"; + + var new_meme_orga_top = parseInt(meme_orga_top) + 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900; + var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) + 900; + + + document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px"; + document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px"; + document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px"; + + + window.scrollTo(0, 500); + } + + else if (window.screen.width >= 601 && window.screen.width <= 991) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) + 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900; + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + + } + else if (window.screen.width >= 992 && window.screen.width <= 1199) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) + 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500; + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + } + else if (window.screen.width >= 1200) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) + 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500; + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + + } + else { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + } + + + const [GetCurrentClass_api, setGetCurrentClass_api] = useState(); + const [GetCurrentClass_message, setGetCurrentClass_message] = useState(); + const [GetCurrentClass_result, setGetCurrentClass_result] = useState(); + function GetCurrentClass_trainingsession(event) { + + var form = new FormData(); + + form.append("class_internal_url", classId); + + form.append("token", stored_partner); + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/"; + + axios.post(myurl, form).then(res => { + //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status); + // console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message); + + if (String(res.data.status) === String("true")) { + //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status); + //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message); + setGetCurrentClass_api("true"); + setGetCurrentClass_result(res.data.message); + + } + else { + setGetCurrentClass_api("false"); + setGetCurrentClass_message(res.data.message); + } + + }).catch((error) => { + console.warn('Not good man :( GetCurrentClass_trainingsession = ', error); + setGetCurrentClass_api("false"); + //setmyApimyApiMessage("") + }) + } + + + const handleAccountCreation = () => { + history.push("/create_account") + }; + + const handleAccountConnexion = () => { + history.push("/Connexion") + }; + + function handleAccountLogout() { + + if (String(userconnected) === String("1")) { + user_logout(); + } + else if (String(partnerconnected) === String("1")) { + part_logout(); + } + } + + + function part_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_part) != "undefined") { + setCookie_part("tokenmysypart", "", { path: '/' }); + } + history.push("/recherche-formation"); + } + + function part_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (pro)', + buttons: [ + { + label: 'Oui', + onClick: () => part_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + + + function user_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_user) != "undefined") { + setCookie("tokenmysych", ""); + } + history.push("/recherche-formation"); + } + + function user_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (user)', + buttons: [ + { + label: 'Oui', + onClick: () => user_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + + + function Close_info_form() { + setinscritpion(); + document.getElementById('mob_block_cross_sell_cat').style.display = "flex"; + if (window.screen.width < 601) { + var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height; + var sticky_div_hilight_top = document.getElementById('sticky_div_hilight_pave').style.top; + + var new_meme_orga_top = parseInt(meme_orga_top) - 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900; + var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) - 900; + + + document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px"; + document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px"; + document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px"; + + + } + + + else if (window.screen.width >= 601 && window.screen.width <= 991) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) - 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900; + + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + + } + else if (window.screen.width >= 992 && window.screen.width <= 1199) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) - 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500; + + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + } + else if (window.screen.width >= 1200) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) - 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500; + + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + + + } + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + + } + + function Close_inscrip_form() { + setinscritpion(); + document.getElementById('mob_block_cross_sell_cat').style.display = "flex"; + + if (window.screen.width < 601) { + var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height; + var sticky_div_hilight_top = document.getElementById('sticky_div_hilight_pave').style.top; + + var new_meme_orga_top = parseInt(meme_orga_top) - 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900; + var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) - 900; + + document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px"; + document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px"; + document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px"; + } + else if (window.screen.width >= 601 && window.screen.width <= 991) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) - 900; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900; + + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + + } + else if (window.screen.width >= 992 && window.screen.width <= 1199) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) - 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500; + + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + } + else if (window.screen.width >= 1200) { + var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top; + var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height; + var new_meme_orga_top = parseInt(meme_orga_top) - 500; + var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500; + + document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px"; + document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px"; + + + } + + + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + + } + + + const [expanded, setExpanded] = React.useState(false); + + const handleChange = (panel) => (event, isExpanded) => { + setExpanded(isExpanded ? panel : false); + }; + + + /// ---- + return ( + +
+ + +
+ +
+
+ entrete +
+
+
+ + +
+
+ + +
+ MySy Training Technology + +
+
+ +
+ + + +
{ history.push("/") }}> +   Les formations +
+ + {/*
{ history.push("/Recherche-Article-formation") }}> + Le blog +
*/} + +
{ history.push("/QuiSommesNous") }}> + Qui Sommes nous? +
+ + +
{ history.push("/Produits-Services") }}> + Nos Services +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + {String(someoneconnected) !== String("1") && } + +
+ +
+ +
+ +
+ +
+ +
+ {String(someoneconnected) !== String("1") && } + {String(someoneconnected) === String("1") && } +
+ +
+ +
+ +
+ + +
+ + + +
+ + +
+ +
+ {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"} +
+ +
+ +
+ + + +
+
+ +
+ + + + +
+ +
+ +
+
+
+ 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.code} + + {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 +
+ } + + {String(DetailTraining["price"]) && 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 sur la formation
+
+ +
} + + + +
+ +
Caractéristiques :
+ + +
+
    + +
  • +
    + +
    + Durée : +
    + {String(DetailTraining["duration_unit"]) !== "user_rythme" && +
    + {DetailTraining["duration"]}   {DetailTraining["duration_unit"]} (s) + +
    + } + + {String(DetailTraining["duration_unit"]) === "user_rythme" && +
    + A votre rythme + +
    + } + +
    +
  • + +
  • +
    + +
    + Certification : +
    + +
    + {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") &&
    + + Non  
    + } + {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") &&
    + + Oui  
    + } + +
    + + +
    +
  • + +
  • +
    + +
    + Distanciel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" &&
    Non
    } + +
    + + +
    +
  • + +
  • +
    + +
    + Presentiel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
    Non
    } + +
    + + +
    +
  • + +
  • +
    + +
    + Support : +
    + +
    + {DetailTraining["support"] &&
    + + {DetailTraining["support"]}  
    + } + {!DetailTraining["support"] &&
    + + Non précisé  
    + } + +
    + + +
    +
  • + + +
+
+
+ + +
+ + + -------------- +
+ + {String(isqualiopi) === "1" &&
+ Qualiopi +
} + + {String(isdatadock) === "1" &&
+ DataDock + +
} + + {String(iscertitrace) === "1" &&
+ Certitrace + +
} + + {String(isbureaucertitrace) === "1" &&
+ Bureau Certitrace + +
} + + {String(iscertifvoltaire) === "1" &&
+ Certitrace + +
} + + +
+ + usersupqual
+ +
+ + + +
+ +
+ +
+ +
+ +
+ + +
+
+ +
+ +
+ Organisme de formation +
+ +
+ + {partnair_name && } +
+ +
+ ----------- + +
+ + +
+ +
+ + +
+
+ {associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.length > 0 && +
Cela pourrait aussi vous intéresser
} + +
+ {associatedtraining_message && String(associatedtraining_api) === "True" && + associatedtraining_message.slice(0, 3).map((formation) => ( +
+ +
+ + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && + 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)).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 DisplayDetailClass_new_v3; \ No newline at end of file diff --git a/src/components/Formation.js b/src/components/Formation.js index 4caa475..b76f17a 100644 --- a/src/components/Formation.js +++ b/src/components/Formation.js @@ -30,7 +30,7 @@ import axios from "axios"; import Rating from '@mui/material/Rating'; import parse from 'html-react-parser' import { CiLocationOn } from "react-icons/ci"; - + const Formation = (props) => { const [userconnected, setuserconnected] = useState("0"); const [partnerconnected, setpartnerconnected] = useState("0"); diff --git a/src/components/Recherche_new_v3.js b/src/components/Recherche_new_v3.js new file mode 100644 index 0000000..bff1411 --- /dev/null +++ b/src/components/Recherche_new_v3.js @@ -0,0 +1,4018 @@ +import React, { useRef, useState, useMemo, useEffect } from "react"; +import { useForm } from "react-hook-form"; +import axios from "axios"; +import Formation from "./Formation"; +import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa'; +import { BsFillXCircleFill } from "react-icons/bs"; + + + + +import Pagination from "./TestPagination"; +import data from "./data/mock-data.json"; +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_v2 from "./Fotter_v2"; +import Footer from "./Fotter"; +import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined'; +import Button from '@mui/material/Button'; +import MenuItem from "@material-ui/core/MenuItem"; +import Menu from "@material-ui/core/Menu"; +import Header from "./Header"; + +import connect_white from "../mysy_img/connect_white_v2.png"; +import connect_green from "../mysy_img/connect_green.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 { SelectChangeEvent } from '@mui/material/Select'; +import Chip from '@mui/material/Chip'; +import Select, { StylesConfig } from 'react-select'; + +import mysy_logo2 from "../mysy_img2/Logo_MySy.png" +import { AiTwotoneFolder } from "react-icons/ai"; +import serv_img_market_digi from "../mysy_img/market_digi.jpg"; +import serv_img_gestion_admin from "../mysy_img/gestion_admin_2.jpg"; +import serv_img_publication from "../mysy_img/publication.jpg"; + +import mysy_search from "../mysy_img2/mysy_search.jpg"; +import mysy_lms from "../mysy_img2/mysy_e_learning.jpg"; +import mysy_consulting from "../mysy_img2/mysy_consulting.jpg"; +import mysy_datacenter from "../mysy_img2/mysy_datacenter.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 { CiCircleRemove, CiCircleMinus } from "react-icons/ci"; + +let PageSize = 10; +const Recherche_new_v3 = () => { + 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("/QuiSommesNous") + }; + + 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("/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); + }; + + + + return ( + + +
+ + + + + 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 + + + + + + + {/* + + + */} + + + +
+ + {/*
+
+
+
+ +
+
+

Recherche Formations Tutoriels

+ +
+
+ {String(someoneconnected) !== String("1") && } + {String(someoneconnected) === String("1") && } +
+
+ + + {String(someoneconnected) === String("1") &&
+ Mon Compte +
} + + {String(someoneconnected) !== String("1") &&
+ S'inscrire +
} + +
+ Nos Services +
+ +
+ Le blog +
+ +
+ publier mes formations +
+ +
+ + +
+ + +
+
+
+ +
Bienvenue sur MySy
+ Recherche de Formations & Tutoriels + +
+
+
+ + + + + {SearchText.length > 2 && }   + {suggestion2 && suggestion2.slice(0, 5).map((suggestion, id) => +
OnSuggestionHandler(JSON.parse(suggestion).name)}> {JSON.parse(suggestion).name}
+ )} + +
+
+ + +
+ + + + + + + + + +
+ + +
+ + + + + + + + + + + + +
+ + +
+
+
*/} +
+
+ +
+ +
+ MySy Training Technology + +
+
+ +
+ + + + {/* */} + + {/* */} + + + + + + + + + + +
+ +
+
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+
+
+ + + + + {/*SearchText.length > 2 && */} + {SearchText.length > 2 &&  } + + + + +
+
+
+ +
+
+ + +
+ + + + +
+ +
+
 
+ +
+ + + + + + {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 + +
+
} +
+
+ + + {/*
+
Support +
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ {String(supportchecked) === 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 +
+ +
+
} + + +
+
} + + + {/*
+
+
+ Formation Programmation +
+

Informatique

+
+
+
+ + +
+
+ Formation graphisme +
+

Graphisme

+
+
+
+ + +
+
+ Formation gestion projets +
+

Projets

+
+
+
+ +
 
+ +
+
+ Formation Management +
+

Management

+
+
+ + + +
+ +
+
+ Formation Digitale +
+

Digital

+
+
+
+ +
+
+ Ressources Humaines +
+

RH

+
+
+ + + +
+
 
+
+
+ Marketing +
+

Marketing

+
+
+
+ +
+
+ Autres +
+

Bureautique

+
+
+ +
+ + +
+
+ Commerce +
+

Commerce

+
+
+
+
 
+ +
+
+ Autres +
+

Dev. Personnel

+
+
+ + +
+
 
+
*/} + + {/*
+
+
+
+

Tous les 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 Recherche_new_v3; \ No newline at end of file diff --git a/src/pages/displaydetailclass_new_v3.js b/src/pages/displaydetailclass_new_v3.js new file mode 100644 index 0000000..25713ac --- /dev/null +++ b/src/pages/displaydetailclass_new_v3.js @@ -0,0 +1,15 @@ +import DisplayDetailClass from "../components/DisplayDetailClass"; +import DisplayDetailClass_new_v3 from "../components/DisplayDetailClass_new_v3"; +import Navigation from "../components/Navigation"; + +export default function displaydetailclass() { + return ( +
+
+ +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/pages/recherche_new_v3.js b/src/pages/recherche_new_v3.js new file mode 100644 index 0000000..d3add1c --- /dev/null +++ b/src/pages/recherche_new_v3.js @@ -0,0 +1,21 @@ +import Recherche_new_v3 from "../components/Recherche_new_v3"; +import Navigation from "../components/Navigation"; +import Footer from "./footer"; + +const recherche = () => { + + + return ( +
+ +
+ +
+ +
+ + ) +} + + +export default recherche; diff --git a/src/styles/components/_displaydetailclass_new_v3.scss b/src/styles/components/_displaydetailclass_new_v3.scss new file mode 100644 index 0000000..7884e42 --- /dev/null +++ b/src/styles/components/_displaydetailclass_new_v3.scss @@ -0,0 +1,7740 @@ +.displaydetailclass_new_v3 { + * h6 { + font-size: small; + } + + .h1_transparent { + color: transparent; + //color: red; + 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) { + + .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; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .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 { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 90%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .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; + } + + .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; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .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 { + //border: 3px dotted green; + 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; + width: 99%; + 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; + } + + .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: absolute; + width: 100%; + max-height: 120px; + left: 0px; + top: 90px; + } + + + .mob_block_content { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 327px; + height: 116px; + left: 20px; + top: 200px; + } + + .mob_block_content_rating { + + /* Auto layout */ + + //display: flex; + //flex-direction: row; + //align-items: flex-start; + 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; + } + + .mob_block_content_title { + //width: 327px; + height: 78px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 22px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .mob_price { + + position: absolute; + width: 277px; + height: 28px; + left: 24px; + top: 330px; + + 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 */ + + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 5px; + gap: 10px; + + position: absolute; + //width: 80%; + height: 37px; + //right: 213px; + top: 95px; + + /* Beige */ + + background: #FFF5DA; + border-radius: 4px; + margin-left: 5rem; + } + + .mob_tag_cpf_txt { + + //width: 118px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + position: absolute; + width: 327px; + height: 120px; + left: 24px; + top: 360px; + } + + .mob_cats_bton_inscr { + /* Auto layout */ + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + width: 80%; + margin-left: 10%; + + //width: 327px; + height: 36px; + + /* Green */ + + background: #20BFA9; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + } + + .mob_cats_bton_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; + + /* White */ + + color: #FFFFFF; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .mob_cats_bton_info { + /* Auto layout */ + + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + border: solid 1px silver; + //width: 327px; + height: 36px; + width: 80%; + margin-left: 10%; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 1; + align-self: stretch; + flex-grow: 0; + } + + .mob_cats_bton_info_txt { + /* Voir les détails */ + + + //width: 202px; + 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; + } + + .mob_caracteristic { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 90%; + height: 183px; + left: 24px; + top: 449px; + } + + .mob_caracteristic_title { + /* Caractéristiques : */ + + + width: 100%; + 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; + } + + + .mob_caracteristic_list { + /* Auto layout */ + + text-align: left; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 12px; + + width: 100%; + height: 30px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .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: 50%; + height: 19px; + + 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; + } + + .mob_caracteristic_list_title_desc_desc { + width: 50%; + height: 19px; + + 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; + } + + .mob_info_page { + /* Auto layout */ + text-align: left; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 24px; + + position: absolute; + width: 96%; + height: 1470px; + left: 2%; + top: 750px; + } + + + .mob_info_page_title_desc_long_txt { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + gap: 16px; + + width: 100%; + //height: 285px; + + /* 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%; + //height: 285px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .mob_info_page_title_desc_title { + /* Description */ + + + width: 279px; + height: 29px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 20px; + line-height: 29px; + /* identical to box height */ + + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + } + + .mob_info_page_title_desc_desc { + + width: 100%; + //height: 192px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 20px; + /* or 150% */ + + font-feature-settings: 'liga' off; + + /* Bold Grey */ + + color: #4B4B4B; + + + /* Inside auto layout */ + + flex: none; + order: 1; + align-self: stretch; + flex-grow: 0; + } + + .mob_block_cross_sell_cat { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 40px; + + position: absolute; + width: 96%; + //height: 1425px; + left: 2%; + top: 3100px; + } + + .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%; + //height: 1329px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .mob_block_sous_cross_sell_title { + //width: 327px; + height: 114px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + + /* Black */ + + color: #1E1E1E; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .mob_cross_sell_list_card { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + width: 100%; + //height: 1199px; + + + /* 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; + //align-items: center; + padding: 8px; + gap: 16px; + isolation: isolate; + + width: 100%; + //height: 389px; + + /* 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 { + //width: 311px; + //height: 90px; + + //background: url(.jpg); + 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; + + + //width: 138px; + 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 { + //width: 118px; + 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; + + //width: 310px; + //height: 120px; + + + /* Inside auto layout */ + + flex: none; + order: 3; + flex-grow: 0; + z-index: 3; + } + + .mob_cross_sell_card_content_cat_bton_detail { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + cursor: pointer; + + width: 80%; + margin-left: 10%; + height: 36px; + + /* Deep Blue */ + + background: #0A043C; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .mob_cross_sell_card_content_cat_bton_detail_txt { + width: 109px; + 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; + } + + .mob_block_social_icon { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 0px; + gap: 16px; + + position: absolute; + width: 80px; + height: 16px; + left: 140px; + top: 620px; + + } + + .mob_block_social_icon_RS { + width: 16px; + height: 16px; + + + /* 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 { + display: flex; + flex-direction: column; + align-items: center; + padding: 0px; + gap: 4px; + + position: absolute; + width: 190px; + height: 42px; + left: 100px; + top: 670px; + } + + .mob_block_organisme_ftion_orga { + width: 190px; + height: 19px; + + 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; + } + + .mob_block_organisme_ftion_link { + width: 134px; + 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; + } + + .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 { + max-height: 18rem; + min-height: 10rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .description_block { + max-height: 13rem; + min-height: 8rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .objectif_block { + max-height: 11rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .session_block { + max-height: 10rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + + .pourqui_block { + max-height: 7rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .sticky_div_hilight { + + flex-direction: column; + align-items: flex-start; + padding: 0px; + position: absolute; + //width: 99%; + 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 { + 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; + } + } + + @media only screen and (min-width: 601px) and (max-width: 991px) { + + .mobile { + display: none; + } + + .left_box { + float: left; + //border: 1px solid black; + border-width: 1px; + width: 25%; + height: 100%; + padding: 0.2rem; + border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 2px; + //-webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + //box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + padding-left: 5px; + } + + .right_box { + + float: left; + border: 1px solid black; + border-width: 2px; + width: 73%; + 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: 5px; + padding-bottom: 2rem; + margin-top: 0.5rem; + padding-top: 1rem; + background: #F4F6F6; + //background-color: #f8f9f9; + //overflow-y:scroll; + } + + .hilightsoustitre { + color: #3b3e40; + display: block; + font-size: 0.9rem; + margin-bottom: 0.5rem; + background: #e9ecef; + border-radius: 5px; + background: #113459; + color: #fff; + letter-spacing: 2px; + 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: 8rem; + 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; + //border:1px solid black; + //border-width:0.01rem; + width: 30%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .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 { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 80%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .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; + } + + .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; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .training_img { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 100%; + } + + .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: 10px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 8rem; + text-align: center; + border: 1px solid; + 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 { + //border: 3px dotted green; + 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; + margin: 10px; + text-align: left; + margin-bottom: 2rem; + background-color: white; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2); + border: 0px solid; + width: 99%; + margin-left: 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: 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: 15rem; + right: 5%; + height: 3rem; + } + + .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 { + /* Header Menu */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 15px 15px; + gap: 10px; + + position: absolute; + width: 100%; + height: 100px; + //left: calc(50% - 1440px/2); + 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: 5px; + + 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: 10px; + + width: 50%; + 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; + + margin-left: 12px; + + /* 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 { + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 10px; + gap: 10px; + + position: absolute; + width: 200px; + height: 37px; + //left: 180px; + top: 110px; + + /* Beige */ + + background: #FFF5DA; + border-radius: 4px; + + } + + .block_sous_header_tag_cpf { + /* Éligible au CPF */ + + + //width: 118px; + 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 { + /* Rates + Title */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 90%; + height: 114px; + left: 5%; + // top: 30px; + } + + .rating { + /* Stars */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 7.76px; + + width: 147.53px; + height: 22px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_header_title { + width: 100%; + 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: 15px; + + position: absolute; + width: 61%; + //height: 1110px; + left: 10px; + 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%; + //height: 165px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + //max-height: 25rem; + //min-height: 20rem; + //overflow: hidden; + } + + + .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%; + //height: 165px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + //max-height: 55rem; + //min-height: 20rem; + //overflow: hidden; + } + + + .block_info_page_pave_title_desc_title { + /* Description */ + + + width: 100%; + height: 29px; + + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 29px; + /* identical to box height */ + + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + } + + .block_info_page_pave_title_desc_desc { + width: 100%; + //height: 72px; + + + + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 22px; + /* 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'; + } + + .description_block { + max-height: 13rem; + min-height: 8rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .objectif_block { + max-height: 11rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .session_block { + max-height: 10rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + + .pourqui_block { + max-height: 7rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + + .block_sticky_info { + /* Sticky Infos */ + + + position: relative; + width: 35%; + height: 700px; + left: 63%; + top: 160px; + //border: solid; + padding: 5px; + background: white; + border-radius: 15px; + } + + .block_sticky_info_price { + // position: absolute; + width: 277px; + height: 38px; + //left: 965px; + //top: 220px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + display: flex; + align-items: center; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + } + + .block_sticky_info_img { + // position: absolute; + //width: 293px; + //height: 164px; + //left: 957px; + //top: 168px; + + 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; + + // position: absolute; + width: 90%; + left: 5%; + //height: 183px; + //left: 973px; + // top: 390px; + } + + .block_sticky_info_caracteristique_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_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: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + 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; + } + + .block_sticky_info_caracteristique_list_title_desc_desc { + width: 50%; + height: 19px; + + font-family: 'Albert Sans'; + 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; + } + + .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%; + //height: 183px; + //left: 973px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + // position: absolute; + width: 90%; + height: 120px; + // top: 280px; + margin-left: 5%; + } + + .sticky_cats_buton_inscrire { + + /* Button */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + /* Green */ + + background: #20BFA9; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + 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 { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + border: solid 1px lightblue; + cursor: pointer; + } + + .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 { + width: 202px; + 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; + + // position: absolute; + //width: 80px; + height: 16px; + //left: 965px; + //top: 670px; + left: 35%; + height: 50px; + } + + .sticky_social_icone_SocialIcon { + height: 25px !important; + width: 25px !important; + } + + .sticky_social_icone_facebook { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + + } + + .sticky_social_icone_link { + + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 2; + flex-grow: 0; + } + + .sticky_social_icone_twitter { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + + + } + + .sticky_organisme_title_desc { + //display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 4px; + + // position: absolute; + width: 100%; + text-align: center; + height: 42px; + // left: 965px; + // top: 620px; + } + + .sticky_organisme_title_desc_title { + + //width: 190px; + height: 19px; + + 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; + } + + .sticky_organisme_title_desc_desc { + //width: 134px; + 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%; + //height: 629px; + left: 15px; + top: 2800px; + + } + + .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: 100%; + height: 28px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 25px; + line-height: 28px; + + /* 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: 0px; + gap: 5px; + + margin-left: 5%; + margin-right: 5%; + width: 90%; + height: 379px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .sous_crossell_list_card_card { + /* Card Vertical */ + + + box-sizing: border-box; + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 8px; + gap: 5px; + isolation: isolate; + + width: 32%; + height: 360px; + + /* White */ + + background: #FFFFFF; + /* Medium Grey */ + + border: 1px solid #DFDFDF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_img { + width: 100%; + //height: 160px; + + 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: 5px; + gap: 5px; + + position: relative; + //width: 188px; + height: 37px; + top: -120px; + left: -30px; + //top: 8px; + + /* 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 { + /* Éligible au CPF */ + + + //width: 118px; + 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; + } + + .sous_crossell_list_card_card_content { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + width: 95%; + height: 131px; + + + /* 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 { + width: 100%; + height: 70px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 26px; + font-feature-settings: 'liga' off; + text-align: left; + text-transform: uppercase; + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_content_price { + //width: 65px; + 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; + } + + + + .sous_crossell_list_card_card_CAT { + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + 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 { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 5px 5px; + gap: 10px; + + width: 90%; + height: 56px; + + /* Deep Blue */ + + background: #0A043C; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + cursor: pointer; + } + + .sous_crossell_list_card_card_CAT_bton_txt { + width: 100%; + 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; + padding-left: 5%; + + /* White */ + + color: #FFFFFF; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .training_img_crossel { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 80%; + } + + .css-dqr9h-MuiRating-label { + margin-left: 2px; + } + + .css-iljtu2-MuiRating-root { + font-size: 1.2rem; + } + + .footer { + width: 100%; + position: relative; + //top: 50px; + } + + .sticky_div_hilight { + + flex-direction: column; + align-items: flex-start; + padding: 0px; + position: absolute; + width: 99%; + display: flex; + flex-direction: column; + align-items: flex-start; + top: 750px; + gap: 1rem; + } + + + .sticky_img_hilight1 { + /* Auto layout */ + width: 100%; + height: 170px; + } + + + .img_hili { + width: 100%; + max-height: 170px; + 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; + } + + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + .mobile { + display: none; + } + + .left_box { + float: left; + //border: 1px solid black; + border-width: 1px; + width: 20%; + height: 100%; + padding: 0.5rem; + border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 5px; + //-webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + //box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + 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; + //background-color: #f8f9f9; + //overflow-y:scroll; + } + + .hilightsoustitre { + color: #3b3e40; + display: block; + font-size: 0.9rem; + margin-bottom: 0.5rem; + background: #e9ecef; + border-radius: 5px; + background: #113459; + color: #fff; + + } + + .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: 11rem; + 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; + //border:1px solid black; + //border-width:0.01rem; + width: 30%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .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 { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 80%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .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; + } + + .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; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .training_img { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 100%; + } + + .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: 10px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 10rem; + text-align: center; + border: 1px solid; + 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 { + //border: 3px dotted green; + 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; + margin-bottom: 2rem; + background-color: white; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2); + border: 0px solid; + width: 95%; + margin-left: 0px; + 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: 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: 15rem; + right: 5%; + height: 3rem; + } + + .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 { + /* Header Menu */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 10px; + gap: 10px; + + position: absolute; + width: 100%; + height: 100px; + //left: calc(50% - 1440px/2); + 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: 20px; + + 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: 15px; + + //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 { + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 10px; + gap: 10px; + + position: absolute; + width: 200px; + height: 37px; + //left: 180px; + top: 110px; + + /* Beige */ + + background: #FFF5DA; + border-radius: 4px; + + } + + .block_sous_header_tag_cpf { + /* Éligible au CPF */ + + + //width: 118px; + 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 { + /* Rates + Title */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 713px; + height: 114px; + left: 180px; + //top: 30px; + } + + .rating { + /* Stars */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 7.76px; + + width: 147.53px; + height: 22px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_header_title { + width: 100%; + 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: 65%; + //height: 1110px; + left: 30px; + 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: 98%; + //height: 165px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + // max-height: 15rem; + //min-height: 15rem; + //overflow: hidden; + } + + + .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: 98%; + //height: 165px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + //max-height: 40rem; + //min-height: 20rem; + //overflow: hidden; + } + + + .block_info_page_pave_title_desc_title { + /* Description */ + + + width: 100%; + height: 29px; + + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 29px; + /* identical to box height */ + + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + } + + .block_info_page_pave_title_desc_desc { + width: 98%; + //height: 72px; + + + + 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'; + } + + .description_block { + max-height: 13rem; + min-height: 8rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .objectif_block { + max-height: 11rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .session_block { + max-height: 10rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + + .pourqui_block { + max-height: 7rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + + .block_sticky_info { + /* Sticky Infos */ + + + position: relative; + width: 30%; + height: 700px; + left: 68%; + top: 160px; + //border: solid; + padding: 5px; + background: white; + border-radius: 15px; + } + + .block_sticky_info_price { + // position: absolute; + width: 277px; + height: 38px; + //left: 965px; + //top: 220px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + display: flex; + align-items: center; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + } + + .block_sticky_info_img { + // position: absolute; + //width: 293px; + // height: 164px; + //left: 957px; + //top: 168px; + + 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; + + // position: absolute; + width: 90%; + left: 5%; + //height: 183px; + //left: 973px; + // top: 390px; + } + + .block_sticky_info_caracteristique_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_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: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + 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; + } + + .block_sticky_info_caracteristique_list_title_desc_desc { + width: 50%; + height: 19px; + + font-family: 'Albert Sans'; + 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; + } + + .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%; + //height: 183px; + //left: 973px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + // position: absolute; + width: 90%; + height: 120px; + // top: 280px; + margin-left: 5%; + } + + .sticky_cats_buton_inscrire { + + /* Button */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + /* Green */ + + background: #20BFA9; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + 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 { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + border: solid 1px lightblue; + cursor: pointer; + } + + .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 { + width: 202px; + 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; + + //position: absolute; + //width: 80px; + height: 16px; + //left: 965px; + // top: 670px; + left: 35%; + height: 50px; + } + + .sticky_social_icone_SocialIcon { + height: 25px !important; + width: 25px !important; + } + + .sticky_social_icone_facebook { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + + } + + .sticky_social_icone_link { + + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 2; + flex-grow: 0; + } + + .sticky_social_icone_twitter { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + + + } + + .sticky_organisme_title_desc { + //display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 4px; + + // position: absolute; + width: 100%; + text-align: center; + height: 42px; + // left: 965px; + // top: 620px; + } + + .sticky_organisme_title_desc_title { + + //width: 190px; + height: 19px; + + 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; + } + + .sticky_organisme_title_desc_desc { + //width: 134px; + 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: 90%; + //height: 629px; + left: 5%; + 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: 100%; + height: 38px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 32px; + line-height: 38px; + + /* 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: 0px; + gap: 25px; + + margin-left: 5%; + margin-right: 5%; + width: 90%; + height: 479px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .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: 1px solid #DFDFDF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_img { + width: 326px; + 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: -50px; + //top: 8px; + + /* 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 { + /* Éligible au CPF */ + + + //width: 118px; + 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; + } + + .sous_crossell_list_card_card_content { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + width: 95%; + height: 131px; + + + /* 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 { + width: 100%; + height: 70px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 24px; + font-feature-settings: 'liga' off; + text-align: left; + text-transform: uppercase; + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_content_price { + //width: 65px; + 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; + } + + + + .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 { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 13px 26px; + gap: 10px; + + width: 100%; + height: 56px; + + /* Deep Blue */ + + background: #0A043C; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + cursor: pointer; + } + + .sous_crossell_list_card_card_CAT_bton_txt { + width: 109px; + 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; + } + + .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; + //top: 250px; + } + + .sticky_div_hilight { + + flex-direction: column; + align-items: flex-start; + padding: 0px; + position: absolute; + width: 99%; + display: flex; + flex-direction: column; + align-items: flex-start; + top: 750px; + gap: 1rem; + } + + + .sticky_img_hilight1 { + /* Auto layout */ + width: 100%; + height: 170px; + } + + + .img_hili { + width: 100%; + max-height: 170px; + 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; + } + + } + + @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; + //overflow-y:scroll; + } + + .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; + //border:1px solid black; + //border-width:0.01rem; + width: 30%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .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 { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 80%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .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; + } + + .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; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .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 { + //border: 3px dotted green; + 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; + //box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2); + border: 0px solid; + width: 95%; + 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 { + /* Header Menu */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 22px 72px; + gap: 10px; + + position: absolute; + width: 100%; + height: 100px; + //left: calc(50% - 1440px/2); + 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 { + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 10px; + gap: 10px; + + position: absolute; + width: 200px; + height: 37px; + //left: 180px; + top: 110px; + + /* Beige */ + + background: #FFF5DA; + border-radius: 4px; + + } + + .block_sous_header_tag_cpf { + /* Éligible au CPF */ + + + //width: 118px; + 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 { + /* Rates + Title */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 713px; + height: 114px; + left: 180px; + // top: 30px; + } + + .rating { + /* Stars */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 7.76px; + + width: 147.53px; + height: 22px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_header_title { + width: 100%; + 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%; + //height: 1110px; + 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%; + //height: 165px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + //max-height: 15rem; + //min-height: 15rem; + //overflow: hidden; + } + + + .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%; + //height: 165px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + //max-height: 40rem; + //min-height: 20rem; + //overflow: hidden; + } + + + .block_info_page_pave_title_desc_title { + /* Description */ + + + width: 100%; + height: 29px; + + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 29px; + /* identical to box height */ + + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + } + + .block_info_page_pave_title_desc_desc { + width: 100%; + //height: 72px; + + + + 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'; + } + + .description_block { + max-height: 13rem; + min-height: 8rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .objectif_block { + max-height: 11rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + .session_block { + max-height: 10rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + + .pourqui_block { + max-height: 7rem; + min-height: 5rem; + overflow: auto; + padding: 10px; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; + } + + + + + .block_sticky_info { + /* Sticky Infos */ + + + position: relative; + width: 309px; + height: 700px; + left: 74%; + top: 160px; + //border: solid; + padding: 5px; + background: white; + border-radius: 15px; + } + + .block_sticky_info_price { + // position: absolute; + width: 277px; + height: 38px; + //left: 965px; + // top: 220px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + display: flex; + align-items: center; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + } + + .block_sticky_info_img { + // position: absolute; + //width: 293px; + // height: 164px; + //left: 957px; + //top: 168px; + + 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; + + // position: absolute; + width: 90%; + left: 5%; + //height: 183px; + //left: 973px; + // top: 390px; + } + + .block_sticky_info_caracteristique_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_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: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + 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; + } + + .block_sticky_info_caracteristique_list_title_desc_desc { + width: 50%; + height: 19px; + + font-family: 'Albert Sans'; + 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; + } + + .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%; + //height: 183px; + //left: 973px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + // position: absolute; + width: 90%; + height: 120px; + // top: 280px; + margin-left: 5%; + } + + .sticky_cats_buton_inscrire { + + /* Button */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + /* Green */ + + background: #20BFA9; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + 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 { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + border: solid 1px lightblue; + cursor: pointer; + } + + .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 { + width: 202px; + 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; + + // position: absolute; + //width: 80px; + height: 16px; + //left: 965px; + // top: 620px; + left: 35%; + height: 50px; + } + + .sticky_social_icone_SocialIcon { + height: 25px !important; + width: 25px !important; + } + + .sticky_social_icone_facebook { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + + } + + .sticky_social_icone_link { + + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 2; + flex-grow: 0; + } + + .sticky_social_icone_twitter { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + + + } + + .sticky_organisme_title_desc { + //display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 4px; + + // position: absolute; + width: 100%; + text-align: center; + height: 42px; + // left: 965px; + // top: 650px; + } + + .sticky_organisme_title_desc_title { + + //width: 190px; + height: 19px; + + 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; + } + + .sticky_organisme_title_desc_desc { + //width: 134px; + 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%; + //height: 629px; + 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: 0px; + gap: 25px; + + margin-left: 5%; + margin-right: 5%; + width: 90%; + height: 479px; + + + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .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: 1px solid #DFDFDF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_img { + width: 326px; + 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: -50px; + //top: 8px; + + /* 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 { + /* Éligible au CPF */ + + + //width: 118px; + 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; + } + + .sous_crossell_list_card_card_content { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + width: 90%; + height: 131px; + + + /* 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 { + width: 100%; + height: 70px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 26px; + font-feature-settings: 'liga' off; + text-align: left; + text-transform: uppercase; + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_content_price { + //width: 65px; + 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; + } + + + + .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 { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 5px; + gap: 10px; + + width: 100%; + height: 56px; + + /* Deep Blue */ + + background: #0A043C; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + cursor: pointer; + } + + .sous_crossell_list_card_card_CAT_bton_txt { + width: 109px; + 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; + } + + .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; + //top: 250px; + z-index: -1; + } + + .sticky_div_hilight { + + flex-direction: column; + align-items: flex-start; + padding: 0px; + position: absolute; + width: 99%; + display: flex; + flex-direction: column; + align-items: flex-start; + top: 750px; + gap: 1rem; + } + + + .sticky_img_hilight1 { + /* Auto layout */ + width: 100%; + height: 170px; + } + + + .img_hili { + width: 100%; + max-height: 170px; + 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; + } + + } + + // end media +} \ No newline at end of file diff --git a/src/styles/components/_formation - Copie (2).scss b/src/styles/components/_formation - Copie (2).scss index 8aabbe6..8ad8296 100644 --- a/src/styles/components/_formation - Copie (2).scss +++ b/src/styles/components/_formation - Copie (2).scss @@ -148,7 +148,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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; @@ -544,7 +544,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; font-size: 0.74rem; line-height: 1.3rem; font-weight: var(--bs-body-font-weight); @@ -891,7 +891,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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); @@ -1247,7 +1247,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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; diff --git a/src/styles/components/_formation.scss b/src/styles/components/_formation.scss index 7fa7769..52c4c48 100644 --- a/src/styles/components/_formation.scss +++ b/src/styles/components/_formation.scss @@ -152,7 +152,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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; @@ -197,7 +197,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -205,7 +205,7 @@ font-family: 'Albert Sans'; font-style: normal; font-weight: 300; - font-size: 18px; + font-size: 16px; line-height: 22px; /* identical to box height */ @@ -573,7 +573,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; font-size: 0.74rem; line-height: 1.3rem; font-weight: var(--bs-body-font-weight); @@ -618,7 +618,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -626,7 +626,7 @@ font-family: 'Albert Sans'; font-style: normal; font-weight: 500; - font-size: 18px; + font-size: 16px; line-height: 20px; /* identical to box height */ @@ -944,7 +944,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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); @@ -989,7 +989,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -1323,7 +1323,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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; @@ -1368,7 +1368,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -1376,7 +1376,7 @@ font-family: 'Albert Sans'; font-style: normal; font-weight: 700; - font-size: 20px; + font-size: 18px; line-height: 25px; /* identical to box height */ diff --git a/src/styles/components/_formation_partner_catalog.scss b/src/styles/components/_formation_partner_catalog.scss index 1e7356a..9a2419c 100644 --- a/src/styles/components/_formation_partner_catalog.scss +++ b/src/styles/components/_formation_partner_catalog.scss @@ -152,7 +152,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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; @@ -197,7 +197,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -205,7 +205,7 @@ font-family: 'Albert Sans'; font-style: normal; font-weight: 300; - font-size: 18px; + font-size: 16px; line-height: 22px; /* identical to box height */ @@ -573,7 +573,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; font-size: 0.74rem; line-height: 1.3rem; font-weight: var(--bs-body-font-weight); @@ -618,7 +618,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -626,7 +626,7 @@ font-family: 'Albert Sans'; font-style: normal; font-weight: 500; - font-size: 18px; + font-size: 16px; line-height: 20px; /* identical to box height */ @@ -944,7 +944,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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); @@ -989,7 +989,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -1323,7 +1323,7 @@ } .p_forma { - font-family: "verdana", "Quicksand", "Signika", sans-serif; + 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; @@ -1368,7 +1368,7 @@ .training_title { color: #619e31; font-size: 1rem; - font-family: "Quicksand", "Signika", sans-serif; + font-family: Roboto, Verdana, Georgia, Arial, 'Times New Roman'; text-align: left; letter-spacing: 1px; margin-bottom: 0.6rem !important; @@ -1376,7 +1376,7 @@ font-family: 'Albert Sans'; font-style: normal; font-weight: 700; - font-size: 20px; + font-size: 18px; line-height: 25px; /* identical to box height */ diff --git a/src/styles/components/_reherche_new_v3.scss b/src/styles/components/_reherche_new_v3.scss new file mode 100644 index 0000000..4023f06 --- /dev/null +++ b/src/styles/components/_reherche_new_v3.scss @@ -0,0 +1,14321 @@ +.reherche_new_v3 { + + .css-1nmdiq5-menu { + background: transparent !important; + color: white !important; + z-index: 999; + } + + .css-qbdosj-Input { + background: transparent !important; + } + + + .h1_transparent { + color: transparent; + //color: red; + font-size: 0.1rem; + } + + @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; + //margin-top: 1rem; + } + + .rech_container { + width: 90%; + height: 200px; + background: aqua; + margin: auto; + padding: 2px; + border-radius: 30px; + } + + .rech_leftbox { + float: left; + border-width: 1px; + width: 98%; + //height: 100%; + margin: auto; + padding: 0.3rem; + //border-radius: 1rem; + + 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%; + //background-color: #f8f9f9; + } + + .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; + //border: 1px solid #999; + margin: 0; + text-align: left; + border-radius: 10px; + margin-bottom: 10px; + //box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); + + -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; + //border-left: 0.2rem solid #d1d5db; + 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 { + border-radius: 5px; + height: 3rem; + font-size: medium; + padding-bottom: 0.1rem; + padding-top: 0.1rem; + border: none; + box-shadow: 16px 16px 48px rgba(30, 30, 30, 0.08); + width: 90%; + padding-left: 1px; + padding-right: 1px; + } + + .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: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"); + + //border-bottom-left-radius: 25px; + //border-bottom-right-radius: 25px; + } + + .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 { + //width: 30%; + float: left; + text-align: left; + font-size: small; + padding-left: 5px; + } + + .new_filter_zone_cerif_radio_left { + //width: 30%; + 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%; + } + + // 07/01/23 + .Background_Header { + /* Background Header */ + + + position: absolute; + width: 100%; + height: 350px; + left: 0px; + top: 0px; + + /* Beige */ + + background: #FFF5DA; + } + + .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 { + position: absolute; + width: 95%; + height: 120px; + //left: 24px; + top: 100px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 30px; + line-height: 40px; + /* or 125% */ + + text-align: center; + letter-spacing: -1px; + + /* Deep Blue */ + + color: #0A043C; + } + + .block_nos_formation { + /* Formations & Tutoriels */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 0px; + gap: 40px; + + position: absolute; + width: 97%; + //height: 1486px; + left: 1%; + top: 495px; + } + + .pieddepage_v2 { + position: relative; + width: 100%; + //height: 450px; + left: 0px; + //top: 5850px; + top: 5800px; + background: #FFF5DA; + z-index: -1; + } + + .frame_153 {} + + .frame_153_txt { + position: absolute; + width: 100%; + text-align: left; + height: 34px; + //left: 24px; + top: 250px; + + font-family: 'Albert Sans'; + font-style: normal; + //font-weight: 600; + font-size: 12px; + line-height: 17px; + display: flex; + align-items: center; + + /* Deep Blue */ + + color: #0A043C; + } + + + + .title1 { + + position: absolute; + + height: 120px; + font-family: "Albert Sans"; + font-style: normal; + font-weight: 600; + font-size: 25px; + line-height: 30px; + text-align: center; + letter-spacing: -1px; + color: #0A043C; + } + + .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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 24px; + + width: 100%; + height: 367px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + z-index: 1; + } + + .search_bar_h { + //display: flex; + flex-direction: column; + align-items: center; + padding: 20px 0px; + gap: 24px; + + position: absolute; + width: 86%; + height: 220px; + left: 7%; + top: 260px; + + /* White */ + + background: #FFFFFF; + box-shadow: 0px 16px 48px rgba(30, 30, 30, 0.08); + border-radius: 8px; + } + + + .search_bar { + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: center; + padding: 0px 5px 0px 5px; + gap: 72px; + + width: 100%; + height: 80px; + + /* 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; + + } + + .input_search_bar { + /* Auto layout */ + + //display: flex; + 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: 3px; + gap: 10px; + + height: 46px; + + /* Green */ + + background: #20BFA9; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + //top: 90px; + position: absolute; + width: 95%; + left: 2%; + + } + + .cta_recherche_txt { + //width: 90px; + height: 30px; + margin-top: 5px; + + 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: 30%; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + } + + + .search_bar_rectangle { + width: 1px; + height: 80px; + + background: rgba(0, 0, 0, 0.08); + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + + display: none; + + } + + .search_text { + /* Auto layout */ + + //display: flex; + flex-direction: row; + align-items: center; + padding: 0px; + gap: 8px; + + width: 100%; + height: 32px; + position: absolute; + top: 80px; + + + /* Inside auto layout */ + + flex: none; + order: 2; + flex-grow: 0; + } + + .forma_et_tuto { + display: none; + } + + .forma_et_tuto_mobile { + width: 99%; + margin-left: 5px; + height: 80px; + padding-top: 10px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 25px; + 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; + background: #F7F7F7; + } + + + .domaine_icone { + margin-top: 5px; + width: 5%; + } + + .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 */ + + + // width: 92px; + 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 */ + + + //width: 78px; + 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 */ + + //cursor: pointer; + 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; + } + + + .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; + //left: 72px; + 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 { + //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; + //border: #0A043C solid 1px; + } + + .block_list_actu_actu1_date_text { + /* Date + Title */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 1px; + gap: 8px; + + //width: 344px; + //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: 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: 5300px; + 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; + //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: 70px; + + + /* 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: 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; + } + } + + @media only screen and (min-width: 601px) and (max-width: 991px) { + /*style petites-moyennes tablettes */ + + .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: 48%; + border-radius: 1rem; + } + + .div_row_droite { + float: right; + //border:0px solid black; + 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: 0px solid black; + border-width: 1px; + width: 29%; + height: 100%; + padding: 1px; + border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + + //-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; + } + + .rech_middlebox { + float: left; + border-width: 2px; + width: 71%; + height: 100%; + margin: auto; + margin-right: auto; + padding: 0.1rem; + padding-right: 5px; + padding-left: 5px; + border-radius: 30px; + margin-right: 0px; + padding-left: 1px; + padding-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; + //border: 1px solid #999; + margin: 0; + text-align: left; + border-radius: 10px; + margin-bottom: 10px; + //box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); + -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; + //width: 90%; + 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:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + + z-index: 10; + min-height: 30rem; + } + + .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%; + 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; + //border-bottom-left-radius: 25px; + //border-bottom-right-radius: 25px; + } + + .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; + //color: red; + 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 { + //width: 30%; + float: left; + text-align: center; + font-size: 0.7rem; + padding-right: 5px; + padding-left: 2px; + } + + .new_filter_zone_row { + //margin-bottom: 10px !important; + 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%; + //height: 1110px; + + /* 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 { + display: flex; + flex-direction: column; + align-items: center; + padding: 0px; + gap: 40px; + + position: absolute; + //height: 2574px; + left: 10px; + right: 5px; + top: 530px; + width: 98%; + } + + .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; + //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: 20px; + top: 156px; + } + + .Background_Header { + position: absolute; + width: 100%; + height: 452px; + left: 0px; + top: 0px; + + /* Beige */ + + background: #FFF5DA; + + } + + .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; + //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: 0; + flex-grow: 0; + font-weight: normal; + font-size: 12px; + + } + + .meconnecter { + cursor: pointer; + //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: 0; + flex-grow: 0; + font-weight: normal; + font-size: 12px; + } + + .rectangle_8 { + /* Rectangle 8 */ + + + position: absolute; + width: 50%; + height: 350px; + //left: 596px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 24px; + + width: 100%; + height: 367px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + z-index: 1; + } + + .title_desc_header { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + width: 636px; + height: 230px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .title1 { + + text-align: center; + width: 60%; + height: 180px; + + text-align: left; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 35px; + line-height: 40px; + /* or 107% */ + + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .title2 { + width: 60%; + height: 22px; + + text-align: left; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 500; + font-size: 16px; + 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: 95%; + 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 5px 0px 5px; + gap: 72px; + + width: 100%; + height: 80px; + + /* 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; + + } + + .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: 3px; + gap: 10px; + + height: 56px; + + /* Green */ + + background: #20BFA9; + 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: 30%; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + width: 28%; + + } + + .search_bar_rectangle { + width: 1px; + height: 80px; + + 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 */ + + + // width: 92px; + 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 */ + + + //width: 78px; + 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; + //left: 72px; + 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; + //border: #0A043C solid 1px; + } + + .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; + + //width: 344px; + 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%; + //height: 450px; + left: 0px; + //top: 6300px; + 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 { + //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: 40px; + gap: 10px; + + position: absolute; + width: 95%; + height: 386px; + //top: 5100px; + 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 { + //position: absolute; + //width: 76px; + //height: 76px; + 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%; + //height: 32px; + text-align: left; + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 16px; + //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 { + //width: 260px; + 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_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; + } + + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + /*style grande tablettes & Pc portable */ + + .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: 48%; + border-radius: 1rem; + } + + .div_row_droite { + float: right; + //border:0px solid black; + 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: 0px solid black; + border-width: 1px; + width: 35%; + height: 100%; + padding: 0.1rem; + border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 5px; + //-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; + 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; + //background-color: #f8f9f9; + //overflow-y: scroll; + } + + .rech_rightbox { + /* float: right; + //border: 0px solid black; + border-width: 0px; + width: 20%; + height: 100%; + margin: auto; + padding: 0px; + border-radius: 0px; + margin-right: 0%; + overflow-y: scroll; + 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; + } + + .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; + //border: 1px solid #999; + margin: 0; + text-align: left; + border-radius: 10px; + margin-bottom: 10px; + background-color: white; + //box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); + + -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:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + + z-index: 10; + min-height: 30rem; + } + + .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%; + 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; + //border-bottom-left-radius: 25px; + //border-bottom-right-radius: 25px; + } + + .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; + //color: red; + 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 { + //width: 30%; + float: left; + text-align: left; + font-size: small; + padding-left: 5px; + } + + .new_filter_zone_cerif_radio_left { + //width: 30%; + 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%; + //height: 1110px; + + /* 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 { + //display: flex; + flex-direction: column; + align-items: center; + padding: 0px; + gap: 40px; + + position: absolute; + width: 96%; + //height: 2574px; + left: 2%; + top: 550px; + } + + .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: 156px; + } + + .Background_Header { + position: absolute; + width: 100%; + height: 452px; + left: 0px; + top: 0px; + + /* Beige */ + + background: #FFF5DA; + + } + + .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; + //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: 0; + flex-grow: 0; + + } + + .meconnecter { + cursor: pointer; + //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: 0; + flex-grow: 0; + + } + + .rectangle_8 { + /* Rectangle 8 */ + + + position: absolute; + width: 500px; + height: 400px; + //left: 596px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 24px; + + width: 900px; + height: 367px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + z-index: 1; + } + + .title_desc_header { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + width: 636px; + height: 230px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .title1 { + width: 60%; + text-align: left; + height: 192px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 40px; + line-height: 44px; + /* or 107% */ + + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .title2 { + width: 60%; + 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 2px 0px 4px; + gap: 72px; + + width: 100%; + height: 80px; + + /* 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; + + } + + .frame_153 { + /* Frame 153 */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 27px; + gap: 10px; + + width: 100%; + height: 17px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .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 */ + + background: #20BFA9; + 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; + + //width: 211px; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + width: 30%; + + } + + .search_bar_rectangle { + width: 1px; + height: 80px; + + 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 */ + + + // 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; + } + + .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 */ + + + //width: 78px; + 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 */ + + //cursor: pointer; + 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; + //left: 72px; + 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; + //border: #0A043C solid 1px; + } + + .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; + + //width: 344px; + 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%; + //height: 450px; + left: 0px; + //top: 6200px; + 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 { + //width: 156px; + 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: 5000px; + 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 { + //position: absolute; + //width: 76px; + //height: 76px; + 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 { + //width: 260px; + 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_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; + } + + } + + @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: 0px solid black; + border-width: 1px; + width: 24%; + height: 100%; + padding: 0.5rem; + //border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: #F7F7F7; + margin-left: 5px; + //-webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + //box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + padding-left: 5px; + } + + .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: #F7F7F7; + //background-color: #f8f9f9; + //overflow-y:scroll; + } + + .rech_rightbox { + /* float: right; + //border-left: 0px solid black; + width: 20%; + height: 100%; + margin: 0px; + padding: 0px; + border-radius: 0px; + margin-right: 0%; + height: 100%; + margin-top: 0.5rem !important;*/ + 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; + //border: 1px solid #999; + margin: 0; + text-align: left; + border-radius: 10px; + margin-bottom: 10px; + background-color: white; + //box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%),0 1px 3px 0 rgb(0 0 0 / 12%); + + -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:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + + z-index: 10; + //min-height: 30rem; + } + + .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%; + min-height: 100%; + //height: 35rem; + + 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; + //border-bottom-left-radius: 25px; + //border-bottom-right-radius: 25px; + } + + .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; + //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; + //color: red; + 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 { + //width: 30%; + float: left; + text-align: left; + font-size: small; + padding-left: 5px; + } + + .new_filter_zone_cerif_radio_left { + //width: 30%; + 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%; + //height: 1110px; + + /* 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 { + // display: flex; + flex-direction: column; + align-items: center; + padding: 0px; + gap: 40px; + + position: absolute; + width: 96%; + //height: 2574px; + left: 2%; + top: 550px; + } + + .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: 156px; + } + + .Background_Header { + position: absolute; + width: 100%; + height: 452px; + left: 0px; + top: 0px; + + /* Beige */ + + background: #FFF5DA; + + } + + .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; + //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: 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; + //left: 596px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 24px; + + width: 80%; + height: 367px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + z-index: 1; + } + + .title_desc_header { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + width: 636px; + height: 230px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .title1 { + width: 90%; + text-align: left; + height: 192px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 50px; + line-height: 54px; + /* or 107% */ + + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + 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: 80px; + + /* 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; + + } + + .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 */ + + background: #20BFA9; + 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: 80px; + + 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: 75%; + 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 */ + + + // 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; + } + + .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 */ + + + //width: 78px; + 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 */ + + //cursor: pointer; + 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; + //left: 72px; + 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; + //border: #0A043C solid 1px; + } + + .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; + + //width: 344px; + 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%; + //height: 450px; + left: 0px; + //top: 5850px; + 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 { + //width: 156px; + 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: 4750px; + 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; + } + + // -- 07/01 + .service1_img { + //position: absolute; + //width: 76px; + //height: 76px; + 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 { + //width: 260px; + 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_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; + } + + } + + @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: 0px solid black; + border-width: 1px; + width: 24%; + height: 100%; + padding: 0.5rem; + border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 5px; + // -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + //box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + padding-left: 5px; + } + + .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-color: #f8f9f9; + //overflow-y:scroll; + } + + .rech_rightbox { + /* float: right; + //border-left: 0px solid black; + width: 20%; + height: 100%; + margin: 0px; + padding: 0px; + border-radius: 0px; + margin-right: 0%; + height: 100%; + margin-top: 0.5rem !important;*/ + 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; + //border: 1px solid #999; + margin: 0; + text-align: left; + border-radius: 10px; + margin-bottom: 10px; + background-color: white; + //box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%),0 1px 3px 0 rgb(0 0 0 / 12%); + + -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:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + + z-index: 10; + min-height: 30rem; + } + + .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_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; + //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; + //color: red; + 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 { + //width: 30%; + float: left; + text-align: left; + font-size: small; + padding-left: 5px; + } + + .new_filter_zone_cerif_radio_left { + //width: 30%; + 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; + //border-bottom-left-radius: 25px; + //border-bottom-right-radius: 25px; + } + + .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%; + //height: 1110px; + + /* 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 { + //display: flex; + flex-direction: column; + align-items: center; + padding: 0px; + gap: 40px; + + position: absolute; + width: 96%; + //height: 2574px; + left: 2%; + top: 550px; + } + + .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: 156px; + } + + .Background_Header { + position: absolute; + width: 100%; + height: 452px; + left: 0px; + top: 0px; + + /* Beige */ + + background: #FFF5DA; + + } + + .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; + //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: 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; + //left: 596px; + 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 { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 24px; + + width: 85%; + height: 367px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + z-index: 1; + } + + .title_desc_header { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + width: 636px; + height: 230px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .title1 { + width: 100%; + text-align: left; + height: 192px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 50px; + line-height: 54px; + /* or 107% */ + + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + 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: 80px; + + /* 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; + + } + + .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 */ + + background: #20BFA9; + 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: 80px; + + 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: 75%; + 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 */ + + + // 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; + } + + .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 */ + + + //width: 78px; + 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 */ + + //cursor: pointer; + 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; + //left: 72px; + 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; + //border: #0A043C solid 1px; + } + + .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; + + //width: 344px; + 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%; + //height: 450px; + left: 0px; + //top: 6050px; + 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 { + //width: 156px; + 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: 4950px; + 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; + } + + // -- 07/01 + .service1_img { + //position: absolute; + //width: 76px; + //height: 76px; + 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 { + //width: 260px; + 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_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; + //background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + .bton_menu_v2:hover { + //color: white; + letter-spacing: 3px; + //background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + + } + + // end media + .message_hili { + color: #619e31; + font-weight: bold; + opacity: 0.8; + background: transparent; + //background: linear-gradient(90deg, rgba(2,1,18,1) 100%, rgba(121,35,9,0.39539565826330536) 35%); + 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; + //background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + .bton_menu_v2:hover { + //color: white; + letter-spacing: 3px; + //background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + + +} + +.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; +} + + + + + +.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/styles/index.scss b/src/styles/index.scss index d4eac02..76475fe 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -123,4 +123,6 @@ @import "./components/mon_catalogue_public"; @import "./components/formation_partner_catalog"; @import "./components/partner_catalog_pub"; -@import "./components/moduleactivite"; \ No newline at end of file +@import "./components/moduleactivite"; +@import "./components/reherche_new_v3"; +@import "./components/displaydetailclass_new_v3"; \ No newline at end of file