From 1ba188e2303ed71053e8beec4e11303a0082db9b Mon Sep 17 00:00:00 2001 From: cherif Date: Tue, 10 Jan 2023 20:45:39 +0100 Subject: [PATCH] 10/01/23 - 20h --- src/components/DisplayDetailClass_new_v2.js | 1444 ++++-- src/components/GestionAdministrative.js | 7 +- src/components/Inscription_Information.js | 25 +- .../_displaydetailclass_new_v2.scss | 4114 ++++++++++++++++- 4 files changed, 5053 insertions(+), 537 deletions(-) diff --git a/src/components/DisplayDetailClass_new_v2.js b/src/components/DisplayDetailClass_new_v2.js index 46e5ccd..2a55b3f 100644 --- a/src/components/DisplayDetailClass_new_v2.js +++ b/src/components/DisplayDetailClass_new_v2.js @@ -489,109 +489,162 @@ const DisplayDetailClass_new_v2 = (props) => { } + 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", ""); + } + 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: 'Yes', + onClick: () => user_logout_confirmation() + }, + { + label: 'No', + onClick: () => { return } + } + ] + }); + } + /// ---- return ( -
-
+
+
- - - - - - {`${DetailTraining["title"]}`} - +
+
-
+ + + + + + {`${DetailTraining["title"]}`} + + +
+ +
+ + {DetailTraining.img_url && String(DetailTraining.img_url).length > 0 && + } + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + !DetailTraining.metier && autre} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") && + informatique} + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && + management} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && + digital} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && + office} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && + vente} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} -
-
-
- MySy Training Technology -
-
+
+
+ - + precision={0.5} + value={ratingvalue} + readOnly={true} + />
- -
- Les formations -
- -
- Le blog -
- -
- Nos Services -
- -
- -
- -
- -
- -
- -
- -
- M’inscrire -
- -
- -
- -
- -
- -
- Me connecter -
- -
- +
+ {DetailTraining["title"]}
+
-
- - - -
- -
- -
- -
- -
- -
- {DetailTraining["title"]} -
- -
- -
+
{DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" && "Éligible au CPF"} @@ -599,471 +652,860 @@ const DisplayDetailClass_new_v2 = (props) => { "NON Éligible au CPF"}
-
-
- - -
- - - -
- {String(inscritpion) === "1" &&
- - -
- - } - - {String(inscritpion) === "2" &&
- - -
- - } - -
-
- Description -
-
- {parse(String(DetailTraining["description"]))} -
- -
- -
-
- Description -
-
- {parse(String(DetailTraining["description"]))} -
- -
- - -
-
- Objectif -
-
- {parse(String(DetailTraining["objectif"]))} -
- -
- - -
-
- Programme -
-
- {parse(String(DetailTraining["programme"]))} -
- -
- - -
- - -
- -
{String(DetailTraining["price"])} HT
- -
- - - {/*String(DetailTraining["img_url"]) && String(DetailTraining["img_url"]).toLocaleLowerCase() === String("it") && - informatique*/} - - {DetailTraining.img_url && String(DetailTraining.img_url).length > 0 && - } - - - {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && - !DetailTraining.metier && autre} - - {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") && - informatique} - - - {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && - graphisme} - - {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && - management} - - {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && - digital} - - {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && - office} - - {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && - ressources humaines} - - {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && - vente} - - {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && - DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && - developpement personnel} - - -
- -
- -
Caractéristiques :
- - -
-
    -
  • -
    - -
    - Lieu : -
    - -
    - À distance - -
    - - -
    -
  • -
  • -
    - -
    - 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"] &&
    - - Non précisé  
    - } - -
    - - -
    -
  • - - -
  • -
    - -
    - Presentiel : -
    - -
    - {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
    Oui
    } - {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
    Non
    } - -
    - - -
    -
  • - -
-
-
- - - -
-
- Les sessions : +
+ {String(DetailTraining["price"])} HT
-
-
    +
    - {GetCurrentClass_result && GetCurrentClass_result.slice(0, 3).map((formation) => ( +
    + +
    + M’inscrire +
    + +
    + +
    + +
    + M’informer sur la formation + +
    + + +
    + +
    + +
    + +
    + Caractéristiques : +
    + +
    + +
    • +
      -
      -
      - {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} - - +
      + Lieu :
      -
      - {(JSON.parse(formation).distantiel) === "1" && " A Distance - "} - {(JSON.parse(formation).presentiel) === "1" && " En Présentiel - "} - {(JSON.parse(formation).adresse)}  {(JSON.parse(formation).code_postal)} +
      + À distance xx ???
      + +
    • - ))} +
    • -
    +
    -
    +
    + Durée : +
    -
    -
    - -
    - -
    -
    M’inscrire
    -
    - -
    -
    -
    M’informer sur la formation
    -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - -
    -
    - -
    - -
    - Organisme de formation : -
    - -
    - MySyTraining.com -
    - -
    - -
    - - - -
    - -
    - -
    Formations & tutoriels du même organisme
    - - - -
    - - - {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("dev_perso") && - developpement personnel} - - {!JSON.parse(formation).metier && autre personnel} +
    + {DetailTraining["duration"]}   {DetailTraining["duration_unit"]} +
    -
    -
    - {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"} +
+
-
-
+
-
-
- - precision={0.5} - value={(String(JSON.parse(formation).note))} - /> -
+
-
{parse(String(JSON.parse(formation).title))} -
+
+ Description +
-
- {(String(JSON.parse(formation).price))} €HT -
+
+ {parse(String(DetailTraining["description"]))} +
+ + +
+ +
+ +
+ Les Sessions +
+ +
+
    + {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => ( +
  • -
    - -
    -
    { - e.preventDefault(); - //test(props.formation.external_code); - window.open( - "/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url, - '_blank' - ); + {(JSON.parse(formation).distantiel) === "1" && } + {(JSON.parse(formation).presentiel) === "1" && } - }}> - Voir les détails +
  • + + ))} + +
+
+ + +
+ + +
+ +
+ Objectif +
+ +
+ {parse(String(DetailTraining["objectif"]))} +
+ + +
+ +
+ +
+ +
+ +
+ Formations & tutoriels du même organisme +
+ +
+ + {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("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"} +
-
-
+
+
+ +
+ +
+ {parse(String(JSON.parse(formation).title))} +
+ +
+ {(String(JSON.parse(formation).price))} €HT + +
+ + +
+ +
+ +
+
+ Voir les détails +
+ +
+ + +
+ +
+ ))} + +
+ +
+ + +
+ + +
+ +
+
+ + +
+ +
+
+ + + + + + + {`${DetailTraining["title"]}`} + + +
+ + +
+
+ +
+ MySy Training Technology + +
+ +
+ + + +
{ history.push("/") }}> +   Les formations +
+ +
{ history.push("/Recherche-Article-formation") }}> + Le blog +
+ +
{ history.push("/Produits-Services") }}> + Nos Services +
+ +
- ))} +
+ +
+ +
+ +
+ +
+ + + {String(someoneconnected) !== String("1") && } + +
+ +
+ +
+ +
+ +
+ +
+ {String(someoneconnected) !== String("1") && } + {String(someoneconnected) === String("1") && } +
+ +
+ +
+ +
+ + +
+ + + +
+ +
+ +
+ +
+ +
+ +
+ {DetailTraining["title"]} +
+ +
+ +
+ {DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" && + "Éligible au CPF"} + + {!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" && + "NON Éligible au CPF"} +
+ +
+ +
-
+
+ {String(inscritpion) === "1" &&
+ -
+
- {/*
+ } + + {String(inscritpion) === "2" &&
+ + +
+ + } + +
+
+ Description +
+
+ {parse(String(DetailTraining["description"]))} +
+ +
+ +
+
+ Les Sessions +
+
+
    + + + + {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => ( +
  • + + {(JSON.parse(formation).distantiel) === "1" && } + {(JSON.parse(formation).presentiel) === "1" && } + + +
  • + + ))} + +
+
+ +
+ +
+
+ Objectif +
+
+ {parse(String(DetailTraining["objectif"]))} +
+ +
+ + +
+
+ Programme +
+
+ {parse(String(DetailTraining["programme"]))} +
+ +
+ + +
+ + +
+ +
{String(DetailTraining["price"])} HT
+ +
+ + + {DetailTraining.img_url && String(DetailTraining.img_url).length > 0 && + } + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + !DetailTraining.metier && autre} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") && + informatique} + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && + management} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && + digital} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && + office} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && + vente} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + +
+ +
+ +
Caractéristiques :
+ + +
+
    +
  • +
    + +
    + Lieu : +
    + +
    + À distance xx ??? + +
    + + +
    +
  • +
  • +
    + +
    + 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"] &&
    + + Non précisé  
    + } + +
    + + +
    +
  • + + +
  • +
    + +
    + Presentiel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
    Non
    } + +
    + + +
    +
  • + +
+
+
+ + +
+ + + +
+
+ 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)} + +
    +
    + +
  • + + ))} + +
+ +
+ +
+
+ +
+ +
+
M’inscrire
+
+ +
+
+
M’informer sur la formation
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+ +
+ +
+ Organisme de formation : +
+ +
+ MySyTraining.com +
+ +
+ +
+ + + +
+ +
+ +
Formations & tutoriels du même organisme
+ + + +
+ + + {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("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"} + + +
+
+ +
+ +
+ +
+ +
{parse(String(JSON.parse(formation).title))} +
+ +
+ {(String(JSON.parse(formation).price))} €HT +
+ + + + +
+ +
+
{ + e.preventDefault(); + //test(props.formation.external_code); + window.open( + "/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url, + '_blank' + ); + + + }}> + Voir les détails +
+ +
+ + +
+
+ + +
+ ))} + + + +
+ + + +
+
+ + {/*

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

@@ -1489,11 +1931,13 @@ Si non, on utilise le formumaire de mysy,.
*/} -
+
-
-
-
+
+ +
+ +
diff --git a/src/components/GestionAdministrative.js b/src/components/GestionAdministrative.js index 2e8a114..84e8f5e 100644 --- a/src/components/GestionAdministrative.js +++ b/src/components/GestionAdministrative.js @@ -2270,10 +2270,9 @@ function GestionAdministrative(props) { ))} diff --git a/src/components/Inscription_Information.js b/src/components/Inscription_Information.js index 0b1ad51..f7959f9 100644 --- a/src/components/Inscription_Information.js +++ b/src/components/Inscription_Information.js @@ -620,30 +620,11 @@ function Inscription_Information(props) { diff --git a/src/styles/components/_displaydetailclass_new_v2.scss b/src/styles/components/_displaydetailclass_new_v2.scss index 548f875..9032626 100644 --- a/src/styles/components/_displaydetailclass_new_v2.scss +++ b/src/styles/components/_displaydetailclass_new_v2.scss @@ -49,6 +49,10 @@ @media only screen and (max-width: 600px) { + .desktop { + display: none; + } + .css-iljtu2-MuiRating-root { font-size: 1rem !important; } @@ -413,9 +417,858 @@ text-align: center; letter-spacing: 0.1rem; } + + + .mob_img { + position: absolute; + width: 375px; + height: 210px; + left: 0px; + top: 140px; + } + + + .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: 24px; + top: 374px; + } + + .mob_block_content_rating { + + /* 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; + } + + .mob_block_content_title { + width: 327px; + height: 78px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 22px; + line-height: 26px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .mob_price { + + position: absolute; + width: 277px; + height: 38px; + left: 24px; + top: 559px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 800; + font-size: 32px; + 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: 506px; + + /* Beige */ + + background: #FFF5DA; + border-radius: 4px; + } + + .mob_tag_cpf_txt { + + //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; + } + + .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: 613px; + } + + .mob_cats_bton_inscr { + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 13px 26px; + gap: 10px; + + width: 327px; + height: 56px; + + /* 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 */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 13px 26px; + gap: 10px; + + width: 327px; + height: 56px; + + 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: 749px; + } + + .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 */ + + 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 */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 4px; + + width: 100%; + height: 19px; + + + /* 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: 1095px; + } + + .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: 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; + } + + .mob_block_cross_sell_cat { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 40px; + + position: absolute; + width: 327px; + height: 1425px; + left: 24px; + top: 2625px; + } + + .mob_block_sous_cross_sell { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + width: 327px; + 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: 32px; + 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: 327px; + 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: 327px; + 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; + right: 8px; + top: 8px; + + /* 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; + + 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: 310px; + height: 78px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 22px; + line-height: 26px; + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + + } + + + .mob_cross_sell_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; + } + + .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: 13px 26px; + gap: 10px; + + width: 310px; + height: 56px; + + /* 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; + } } @media only screen and (min-width: 601px) and (max-width: 991px) { + + .mobile { + display: none; + } + .left_box { float: left; //border: 1px solid black; @@ -773,9 +1626,1611 @@ 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: 'Albert Sans'; + 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: 'Albert Sans'; + 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; + } + + + .block_sticky_info { + /* Sticky Infos */ + + + position: relative; + width: 35%; + height: 1000px; + 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; + 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: flex-end; + align-items: center; + padding: 0px; + gap: 16px; + + position: absolute; + //width: 80px; + height: 16px; + //left: 965px; + top: 900px; + left: 35%; + } + + .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: 950px; + } + + .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; + + 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: 100%; + 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: 15px; + 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; + } } @media only screen and (min-width: 992px) and (max-width: 1199px) { + .mobile { + display: none; + } + .left_box { float: left; //border: 1px solid black; @@ -1085,7 +3540,7 @@ height: auto; padding: 10px; outline: 1px solid #ccc; - + text-align: left; margin-bottom: 2rem; background-color: white; @@ -1133,9 +3588,1609 @@ 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: 95%; + //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: 95%; + //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: 'Albert Sans'; + 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: 'Albert Sans'; + 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; + } + + + .block_sticky_info { + /* Sticky Infos */ + + + position: relative; + width: 30%; + height: 1000px; + 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; + 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: flex-end; + align-items: center; + padding: 0px; + gap: 16px; + + position: absolute; + //width: 80px; + height: 16px; + //left: 965px; + top: 900px; + left: 35%; + } + + .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: 950px; + } + + .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: 641px; + 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; + + width: 100%; + 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: 100%; + 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; + } } @media only screen and (min-width: 1200px) { + .mobile { + display: none; + } + .left_box { float: left; border-width: 1px; @@ -1443,7 +5498,7 @@ height: auto; padding: 5px; outline: 1px solid #ccc; - + text-align: left; margin-bottom: 2rem; background-color: white; @@ -1666,14 +5721,14 @@ .menu_header_menu { /* Les formations */ - - width: 96px; + cursor: pointer; + width: 150px; height: 17px; font-family: 'Albert Sans'; font-style: normal; font-weight: 600; - font-size: 14px; + font-size: 16px; line-height: 17px; /* identical to box height */ @@ -1730,7 +5785,7 @@ .menu_header_cat_buton_inscr { /* Button */ - + cursor: pointer; box-sizing: border-box; /* Auto layout */ @@ -1801,7 +5856,7 @@ .menu_header_cat_buton_connex { /* Button */ - + cursor: pointer; /* Auto layout */ @@ -2056,8 +6111,43 @@ 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: 95%; + //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 */ @@ -2091,6 +6181,8 @@ width: 100%; //height: 72px; + + font-family: 'Albert Sans'; font-style: normal; font-weight: 500; @@ -2926,7 +7018,7 @@ } .sous_crossell_list_card_card_content_title { - width: 310px; + width: 100%; height: 70px; font-family: 'Albert Sans'; @@ -2989,7 +7081,7 @@ padding: 0px; gap: 8px; - width: 310px; + width: 100%; height: 120px; @@ -3009,10 +7101,10 @@ flex-direction: row; justify-content: center; align-items: center; - padding: 13px 26px; + padding: 5px; gap: 10px; - width: 310px; + width: 100%; height: 56px; /* Deep Blue */