From 186de9d9e40512943648b5305bd64cbf9c382cc5 Mon Sep 17 00:00:00 2001
From: Cherif <cbalde@mysy-training.com>
Date: Thu, 26 Mar 2026 20:00:43 +0100
Subject: [PATCH] 23/03/26 - 20h

---
 src/App.js                                    |   11 +
 src/components/Account.js                     |    4 +-
 src/components/AddClassManual_ARG.js          |    2 +-
 src/components/Article.js                     |    2 +-
 src/components/Article_Help.js                | 1166 ++++++
 src/components/ButtonHilight.js               |   14 +-
 src/components/DisplayDetailClass_new_v2.js   |    4 +-
 src/components/DisplayDetailClass_new_v3.js   |    4 +-
 src/components/Display_Action_And_Class.js    |    4 +-
 ...play_Partner_Catalog_DetailClass_new_v2.js |    4 +-
 .../ENT_Student_Header.jsx                    |   10 +-
 src/components/Employes.js                    |   55 +-
 src/components/Ent_Intranet.js                |    4 +-
 src/components/Header.js                      |   14 +-
 ...play_Partner_Catalog_DetailClass_new_v2.js |    4 +-
 .../Jmjformation_Catalogue_Public.js          |    4 +-
 src/components/ListeArticles.js               |    6 +-
 .../Module_Connexion_Ent_Student.js           |    4 +-
 .../Module_Connexion_Ent_Student_V2.js        |    4 +-
 .../Module_Connexion_Intranet_Client.js       |    4 +-
 src/components/Mon_Catalogue_Public.js        |    4 +-
 src/components/Mon_Intranet_Public.js         |    4 +-
 src/components/New_ButtonHilight_2025.js      |    4 +-
 .../New_ButtonHilight_ENT_Student_2025.js     |    4 +-
 .../New_ButtonHilight_Intranet_Client_2025.js |    4 +-
 src/components/New_C_Article_Help_2025.js     | 1443 ++++++++
 src/components/New_C_Article_Help_2025_ARG.js |  472 +++
 src/components/New_C_Sign_In_2025.js          |    6 +-
 src/components/New_C_Sign_Up_2025.js          |    6 +-
 src/components/New_Sidebar_2025.js            |   16 +-
 .../New_Sidebar_Client_Intranet_2025.js       |   16 +-
 .../New_Sidebar_ENT_Student_2025.js           |   28 +-
 .../new_detail_formation_2025.js              |    4 +-
 ...play_Partner_Catalog_DetailClass_new_v2.js |    4 +-
 src/components/Partner.js                     |  209 +-
 src/components/PartnerSignIn.js               |    6 +-
 src/components/PartnerSignInFirst.js          |    8 +-
 src/components/PartnerSignInSecond.js         |    8 +-
 src/components/Partner_ARG_140326.js          |    4 +-
 .../Partner_Header.jsx                        |   10 +-
 src/components/RechercheArticles.js           |   12 +-
 src/components/RechercheArticles_new_v2.js    |    6 +-
 src/components/Recherche_Help_new_v2.js       | 3195 +++++++++++++++++
 src/components/Recherche_Help_new_v2_ARG.js   | 1652 +++++++++
 src/components/Recherche_formation_com.js     |   10 +-
 src/components/Recherche_new_v2.js            |   14 +-
 src/components/Recherche_new_v3.js            |   14 +-
 src/components/Recherche_new_v4.js            |   14 +-
 src/components/SignIn.js                      |    6 +-
 src/components/Student_Account_Ent.js         |    4 +-
 src/components/Subdomain_Recherche_new_v2.js  |   14 +-
 src/components/UserSignInFirst.js             |    6 +-
 .../new_detail_formation_2025.js              |    4 +-
 .../new_detail_formation_2025.js              |    4 +-
 .../header_automatic_files/Header.jsx         |   10 +-
 .../Header_Client_Intranet.jsx                |   10 +-
 .../Header_ENT_Student.jsx                    |   10 +-
 .../new_marketplace_2025.js                   |   12 +-
 src/components/sidebar.js                     |   16 +-
 src/pages/help_page.js                        |   18 +
 src/pages/new_p_article_help_detail_2025.js   |   26 +
 src/pages/recherchearticles.js                |    2 +-
 62 files changed, 8393 insertions(+), 250 deletions(-)
 create mode 100644 src/components/Article_Help.js
 create mode 100644 src/components/New_C_Article_Help_2025.js
 create mode 100644 src/components/New_C_Article_Help_2025_ARG.js
 create mode 100644 src/components/Recherche_Help_new_v2.js
 create mode 100644 src/components/Recherche_Help_new_v2_ARG.js
 create mode 100644 src/pages/help_page.js
 create mode 100644 src/pages/new_p_article_help_detail_2025.js

diff --git a/src/App.js b/src/App.js
index 5177309..438cd96 100644
--- a/src/App.js
+++ b/src/App.js
@@ -95,6 +95,9 @@ function App() {
   const New_Fonctionnalite_2025 = lazy(() => import("./pages/new_p_fonctionnalite_2025"));
   const New_Formation_Detail_2025 = lazy(() => import("./pages/new_p_detail_formation_2025"));
   const New_Article_Detail_2025 = lazy(() => import("./pages/new_p_article_detail_2025"));
+
+  const New_Article_Support_2025 = lazy(() => import("./pages/new_p_article_help_detail_2025"));
+
   const New_Contact_2025 = lazy(() => import("./pages/new_p_contact_2025"));
   const New_Tarif_2025 = lazy(() => import("./pages/new_p_tarif_2025"));
   const New_Sign_Up_2025 = lazy(() => import("./pages/new_p_sign_up_2025"));
@@ -145,6 +148,7 @@ function App() {
   const ResetUserPwd = lazy(() => import("./pages/resetuserpwd"));
   const AddArticle = lazy(() => import("./pages/addarticle"));
   const RechecheArticles = lazy(() => import("./pages/recherchearticles"));
+  const HelpArticles = lazy(() => import("./pages/help_page"));
   const PartnerLogin1 = lazy(() => import("./pages/partnerlogin1"));
   const PartnerLogin0 = lazy(() => import("./pages/partnerlogin0"));
   const PartnerLogin = lazy(() => import("./pages/partnerlogin"));
@@ -324,8 +328,13 @@ function App() {
 
 
                 <Route path="/display-detail-article/:articleId" exact component={New_Article_Detail_2025} />
+
+
                 <Route path="/Display-Detail-Article/:articleId" exact component={New_Article_Detail_2025} />
 
+                <Route path="/display-article-support-elyos/:articleId" exact component={New_Article_Support_2025} />
+
+
                 <Route path="/detail-formation/:classId" exact component={New_Formation_Detail_2025} />
                 {/* ex :  http://localhost:3009/detail-formation/habilitation-electrique-882*/}
 
@@ -363,6 +372,8 @@ function App() {
                 <Route path="/Connexion" exact component={New_Sign_In_2025} />
                 <Route path="/Recherche-Article-formation" exact component={RechecheArticles} />
 
+                <Route path="/elyos-support" exact component={HelpArticles} />
+
                 <Route path="/Display-Detail-formation_v3/:classId" exact component={New_Formation_Detail_2025} />
                 <Route path="/Display-Detail-formation/:classId" exact component={New_Formation_Detail_2025} />
                 <Route path="/Display-Detail-formation/:classId/:action" exact component={New_Formation_Detail_2025} />
diff --git a/src/components/Account.js b/src/components/Account.js
index 3a005a5..32fc7c0 100644
--- a/src/components/Account.js
+++ b/src/components/Account.js
@@ -191,8 +191,8 @@ function Account() {
 
     function logout() {
         confirmAlert({
-            title: 'Deconnexion ?',
-            message: 'Confirmez la deconnexion',
+            title: 'Déconnexion ?',
+            message: 'Confirmez la déconnexion',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/AddClassManual_ARG.js b/src/components/AddClassManual_ARG.js
index be10c7b..5033306 100644
--- a/src/components/AddClassManual_ARG.js
+++ b/src/components/AddClassManual_ARG.js
@@ -632,7 +632,7 @@ const AddClassManual_ARG = (props) => {
     var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_List_Unite_Enseignement_Of_Given_Class/";
 
     setLoading(true);
-
+ 
     axios.post(myurl, form).then(res => {
 
       setLoading(false);
diff --git a/src/components/Article.js b/src/components/Article.js
index 697d050..a17f9e2 100644
--- a/src/components/Article.js
+++ b/src/components/Article.js
@@ -1034,7 +1034,7 @@ registerLocale('fr', fr);
               {props.connected_user_article_avis_droit_modif === "1" && <div style={{ "width": "100%", "float": "left" }} onClick={(e) => {
                 e.preventDefault();
 
-              }}>
+              }}> 
                 <nav style={{
                   "width": "40%", "float": "left", "textAlign": "left", "paddingLeft": "2px", "paddingRight": "2px",
                 }}
diff --git a/src/components/Article_Help.js b/src/components/Article_Help.js
new file mode 100644
index 0000000..651624f
--- /dev/null
+++ b/src/components/Article_Help.js
@@ -0,0 +1,1166 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Button, } from "reactstrap";
+
+import parse from 'html-react-parser'
+import img_met_autre from "../mysy_img/met_autre.jpg";
+import img_met_digital from "../mysy_img/met_digital.jpg";
+import { Rating } from 'react-simple-star-rating'
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import moment from "moment";
+import SendIcon from '@mui/icons-material/Send';
+import axios from "axios";
+import { Editor } from '@tinymce/tinymce-react';
+import fr from 'date-fns/locale/fr';
+import { registerLocale } from 'react-datepicker';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { format } from 'date-fns'
+import { FcInfo } from "react-icons/fc";
+import 'react-tooltip/dist/react-tooltip.css'
+import { Tooltip } from 'react-tooltip'
+import { getCookie } from 'react-use-cookie';
+import { useHistory } from "react-router-dom";
+import Checkbox from '@mui/material/Checkbox';
+import Box from '@mui/material/Box';
+import Fab from '@mui/material/Fab';
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import NavigationIcon from '@mui/icons-material/Navigation';
+import { FcPlus } from "react-icons/fc";
+import { MdDeleteForever } from "react-icons/md";
+
+import { AddCircleOutline } from "@mui/icons-material";
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+import TextField from '@mui/material/TextField';
+
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import { IconButton } from '@material-ui/core';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+
+function PaperComponent(props) {
+  return (
+    <Draggable
+      handle="#draggable-dialog-title"
+      cancel={'[class*="MuiDialogContent-root"]'}
+    >
+      <Paper {...props} />
+    </Draggable>
+  );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+  dialog: {
+    position: 'absolute',
+    // left: 10,
+    top: 400
+  },
+
+  paper: {
+    overflowY: 'unset',
+  },
+  customizedButton: {
+    position: 'absolute',
+    left: '98%',
+    top: '-3%',
+    backgroundColor: 'lightgray',
+    color: 'gray',
+  },
+}));
+
+
+const Article_Help = (props) => {
+  registerLocale('fr', fr);
+  const classes = useStyles();
+  const history = useHistory();
+  const [isLoading, setLoading] = useState();
+
+  const [rating, setRating] = useState(props.article.note * 20)
+  //console.log(props.article.note * 10);
+  // Catch Rating value
+
+  function handleRating(rate) {
+    alert(" rate =" + rate);
+    setRating(40);
+  }
+
+  const [country_code, setcountry_code] = useState("FR");
+  const [country_name, setcountry_name] = useState("France");
+  const [city, setcity] = useState("Paris");
+  const [postal, setpostal] = useState("75001");
+  const [latitude, setlatitude] = useState("48.861000061035156");
+  const [longitude, setlongitude] = useState("2.3380000591278076");
+  const [IPv4, setIPv4] = useState("172.71.122.128");
+  const [state, setstate] = useState("France");
+  const [userIp, setuserIp] = useState("172.71.122.128");
+
+  const [title_resized, settitle_resized] = useState("")
+
+  const [article_img, setarticle_img] = useState("")
+
+  const [edit_article, setedit_article] = useState("")
+
+  const [selected_id, setselected_id] = useState(props.article._id)
+
+
+  const editorRef_texte_avis = useRef(null);
+  const [editorRef_texte_avis_limite, seteditorRef_texte_avis] = useState(1000);
+  const [field_texte_avis, setfield_texte_avis] = useState("");
+  const [field_texte_avis_initial_value, setfield_texte_avis_initial_value] = useState("");
+
+  const [is_data_changed, setis_data_changed] = useState("");
+
+  const [editor_tochanged, seteditor_tochanged] = useState("");
+
+  function editor_keyup() {
+    setis_data_changed("1");
+  }
+
+
+
+  const [Get_Partner_Article_Avis_Data_api, setGet_Partner_Article_Avis_Data_api] = useState();
+  const [Get_Partner_Article_Avis_Data_message, setGet_Partner_Article_Avis_Data_message] = useState();
+  const [Get_Partner_Article_Avis_Data_result, setGet_Partner_Article_Avis_Data_result] = useState();
+  function Get_Partner_Article_Avis_Data() {
+
+    var form = new FormData();
+    form.append("_id", props.article._id);
+
+    //console.log(" ## form = ", form);
+
+    var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_help_article_from_id/";
+    setLoading(true);
+    axios.post(myurl, form).then(res => {
+      setLoading(false);
+      if (String(res.data.status) === "true") {
+        //console.log(" In Get_Partner_Article_Avis_Data  res.data.status = " + res.data.status);
+        console.log(" In Get_Partner_Article_Avis_Data  res.data.message r_class = " + res.data.message);
+        setGet_Partner_Article_Avis_Data_api("true");
+        setGet_Partner_Article_Avis_Data_result(res.data.message);
+
+        if (res.data.message.length > 0) {
+          var mylocal_document = JSON.parse(res.data.message);
+
+          if (mylocal_document.date_publication) {
+            setarticle_avis_date_publication(moment((String(mylocal_document.date_publication)).substring(0, 10)).format('YYYY-MM-DD'));
+
+            //console.log(" ### mylocal_document.date_publication = ", mylocal_document.date_publication);
+          }
+
+          if (mylocal_document.avis) {
+            setarticle_avis_avis(mylocal_document.avis);
+            setfield_texte_avis_initial_value(mylocal_document.avis);
+            setfield_texte_avis(mylocal_document.avis);
+          }
+          else {
+            setarticle_avis_avis("");
+            setfield_texte_avis_initial_value("");
+          }
+
+
+          if (mylocal_document.internal_url)
+            setarticle_avis_internal_url(mylocal_document.internal_url);
+
+          setarticle_avis_display_header_img(false);
+          if (mylocal_document.display_header_img && String(mylocal_document.display_header_img) === "1") {
+            setarticle_avis_display_header_img(true);
+          }
+
+
+
+          if (mylocal_document.img_path) {
+            setarticle_avis_img_path(mylocal_document.img_path);
+            setimg_img_article_file(mylocal_document.img_path);
+          } else {
+            setarticle_avis_img_path("");
+            setimg_img_article_file("");
+          }
+
+
+          if (mylocal_document.video_path) {
+            setarticle_avis_video_path(mylocal_document.video_path);
+
+          } else {
+            setarticle_avis_video_path("");
+
+          }
+
+
+          if (mylocal_document.meta_description) {
+            setarticle_avis_meta_description(mylocal_document.meta_description);
+          } else {
+            setarticle_avis_meta_description("");
+          }
+
+
+        } else {
+          alert(" Aucun article recuperé");
+        }
+
+
+      } else if (String(res.data.status) === String("Err_Connexion")) {
+        alert('Erreur: ' + res.data.message);
+        history.push("/Connexion");
+      }
+
+      else {
+        setGet_Partner_Article_Avis_Data_api("false");
+        setGet_Partner_Article_Avis_Data_message(res.data.message);
+        alert(res.data.message);
+      }
+
+    }).catch((error) => {
+      setLoading(false);
+      console.warn('Not good man :( Get_Partner_Article_Avis_Data = ', error);
+      setGet_Partner_Article_Avis_Data_api("false");
+      alert(" Impossible de recuperer les données de l'article");
+      //setmyApimyApiMessage("")
+    })
+  }
+
+
+  useEffect(() => {
+
+
+
+    var local_title = "";
+    if (props.article.title_formation && String(props.article.title_formation).length > 45) {
+      local_title = String(props.article.title_formation).substring(0, 43) + " ...";
+
+    } else {
+      local_title = String(props.article.title_formation);
+
+    }
+    settitle_resized(local_title);
+
+
+
+    var img_article = "";
+    if (props.article.img_path && String(props.article.img_path).length > 10) {
+      img_article = String(props.article.img_path)
+      setarticle_img(img_article);
+
+    } else {
+      setarticle_img(img_met_digital);
+    }
+
+
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+
+  }, []);
+
+
+  const [Dialog_1_avis, setDialog_1_avis] = React.useState(false);
+  const [Dialog_1_open, setDialog_1_open] = React.useState(false);
+  function Dialog_1_handle_change_participant_session(avis) {
+    setDialog_1_avis(avis);
+    setDialog_1_open(true);
+  }
+
+  const Dialog_1_handleClose = () => {
+    //alert(" Utiliser le bouton 'fermer' ");
+    //setOpen(false);
+  };
+
+  const Dialog_1_handleClose_buton = () => {
+    setDialog_1_open(false);
+  };
+
+
+  const [Dialog_article_avis_avis, setDialog_article_avis_avis] = React.useState(false);
+  const [Dialog_article_avis_open, setDialog_article_avis_open] = React.useState(false);
+  function Dialog_article_avis_handle_change_participant_session(avis) {
+    setDialog_article_avis_avis(avis);
+    setDialog_article_avis_open(true);
+  }
+
+  const Dialog_article_avis_handleClose = () => {
+
+  };
+
+  const Dialog_article_avis_handleClose_buton = () => {
+
+    setDialog_article_avis_open(false);
+    sethandleSubmission_img_article_message("");
+    setlogo_file_name("");
+    setimg_img_article_file("");
+    setimg_img_article_file2("");
+    clear_article_avis_fields();
+
+  };
+
+  function clear_article_avis_fields() {
+    setarticle_avis_title_formation("");
+    setarticle_avis_email("");
+    setarticle_avis_url_formation("");
+    setarticle_avis_sujet("");
+    setarticle_avis_avis("");
+    setis_data_changed("");
+    setarticle_avis_meta_description("");
+    setarticle_avis_display_header_img(false);
+  }
+
+  const [article_avis_date_publication, setarticle_avis_date_publication] = useState(new Date().toLocaleDateString('fr-FR'));
+  const [article_avis_title_formation, setarticle_avis_title_formation] = React.useState("");
+  const [article_avis_email, setarticle_avis_email] = React.useState("");
+  const [article_avis_url_formation, setarticle_avis_url_formation] = React.useState("");
+  const [article_avis_sujet, setarticle_avis_sujet] = React.useState("");
+  const [article_avis_avis, setarticle_avis_avis] = React.useState("");
+  const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState("");
+  const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false);
+  const [article_avis_img_path, setarticle_avis_img_path] = React.useState("");
+  const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState("");
+
+
+  const [article_avis_video_path, setarticle_avis_video_path] = React.useState("");
+
+  function Add_Update_Article_Avis() {
+
+    var form = new FormData();
+
+    const stored_cookie = getCookie('tokenmysypart');
+    form.append("token", stored_cookie);
+    form.append("title_formation", article_avis_title_formation);
+    form.append("avis", field_texte_avis);
+    form.append("qualite", "");
+    form.append("note", "");
+
+
+    if (img_img_article_file2) {
+      form.append('File', img_img_article_file2);
+      form.append('img_file_name', img_img_article_file2.name);
+    }
+    else {
+      form.append('File', "");
+      form.append('img_file_name', "");
+    }
+
+
+    if (!article_avis_img_path || String(article_avis_img_path).trim() === "") {
+      alert(" Vous devez saisir une image à afficher avec l'article ");
+      return;
+    }
+    form.append("img_path", article_avis_img_path);
+
+
+    form.append("video_path", article_avis_video_path);
+
+
+    if (article_avis_date_publication.trim() === "") {
+      alert(" Vous devez saisir la date de naissance de l'apprenant");
+      return;
+    }
+
+    var formated_date_tmp = new Date(moment(article_avis_date_publication, "YYYY-MM-DD"));
+    var formated_date_final = moment(formated_date_tmp).format('DD/MM/YYYY');
+
+    form.append("date_publication", formated_date_final);
+
+
+    if (article_avis_display_header_img) {
+      form.append("display_header_img", "1");
+    } else {
+      form.append("display_header_img", "0");
+    }
+
+    form.append("user_ip", IPv4);
+    form.append("user_country_code", country_code);
+    form.append("user_country_name", country_name);
+    form.append("user_city", city);
+    form.append("user_postal", postal);
+    form.append("user_latitude", latitude);
+    form.append("user_longitude", longitude);
+    form.append("user_state", state);
+
+    // Si une balise meta description n'est pas fourni, alors on lui donne le titre
+    var local_meta_description = "";
+    if (article_avis_meta_description) {
+      local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 200);
+    } else {
+      local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 200);
+    }
+    form.append("meta_description", local_meta_description);
+
+    setLoading(true);
+
+    // console.log(" ## form = ", form);
+    var myurl = "";
+
+    if (selected_id && String(selected_id).length > 3) {
+      myurl = process.env.REACT_APP_API_URL + "myclass/api/update_help_article/";
+      form.append("_id", selected_id);
+    } else {
+      myurl = process.env.REACT_APP_API_URL + "myclass/api/add_help_article/";
+    }
+
+
+    axios.post(myurl, form).then(res => {
+      setLoading(false);
+      if (String(res.data.status) === String("false")) {
+        alert(res.data.message);
+      }
+
+      else if (String(res.data.status) === String("true")) {
+        alert(res.data.message);
+        Dialog_article_avis_handleClose_buton();
+        window.location.reload();
+
+      }
+      else {
+
+      }
+    }).catch((error) => {
+      setLoading(false);
+      console.warn('contact-nous  Not good man :( mysearchtext = ');
+
+
+    })
+  }
+
+
+  const [Delete_Article_Avis_Data_api, setDelete_Article_Avis_Data_api] = useState();
+  const [Delete_Article_Avis_Data_message, setDelete_Article_Avis_Data_message] = useState();
+  const [Delete_Article_Avis_Data_result, setDelete_Article_Avis_Data_result] = useState();
+  function Delete_Article_Avis_Data(article_id) {
+
+    var form = new FormData();
+    //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
+
+
+    const stored_cookie = getCookie('tokenmysypart');
+    form.append("token", stored_cookie);
+    form.append("_id", article_id);
+
+
+    var myurl = process.env.REACT_APP_API_URL + "myclass/api/delete_help_article_from_id/";
+    setLoading(true);
+    axios.post(myurl, form).then(res => {
+      setLoading(false);
+      //console.log(" In Delete_Article_Avis_Data  res.data.status = " + res.data.status);
+      //console.log(" In Delete_Article_Avis_Data  res.data.message r_class = " + res.data.message);
+
+      if (String(res.data.status) === String("true")) {
+        alert(res.data.message);
+        window.location.reload();
+      }
+      else {
+        setDelete_Article_Avis_Data_api("false");
+        setDelete_Article_Avis_Data_message(res.data.message);
+        alert(res.data.message);
+
+      }
+
+    }).catch((error) => {
+      setLoading(false);
+      console.warn('Delete_Article_Avis_Data : Not good man :( mysearchtext = ' + error);
+      setDelete_Article_Avis_Data_api("false");
+      alert(" Impossible de supprimer le document");
+    })
+  }
+
+
+  /**** Gestion image de l'article */
+
+  const [logo_file_name, setlogo_file_name] = useState();
+  const hiddenFileInput_logo = React.useRef(null);
+
+  const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState("");
+
+  const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState();
+  const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState();
+  const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState();
+
+
+  const [img_img_article_file, setimg_img_article_file] = useState();
+  const [img_bg_file, setimg_bg_file] = useState();
+
+  const [img_img_article_file2, setimg_img_article_file2] = useState();
+  const [img_bg_file2, setimg_bg_file2] = useState();
+
+  const handleSubmission_logo = event => {
+    clear_message();
+    setis_data_changed("1");
+
+    const fileUploaded = event.target.files[0];
+    let file_size = event.target.files[0].size;
+    let file_type = event.target.files[0].type;
+
+    //console.log("file_size =  ", file_size, " file_type = ", file_type);
+    //console.log(" fileUploaded = ", fileUploaded);
+    if (file_size > 10000000) {
+      alert("Le fichier ne doit pas dépasser un 1 Méga octets");
+      return;
+    }
+
+    //image/png
+    if (String(file_type) !== "image/png" && String(file_type) !== "image/jpg" && String(file_type) !== "image/webp" &&
+      String(file_type) !== "image/jpeg") {
+      alert("Le fichier n'est pas au format PNG");
+      return;
+    }
+
+    setLoading(true);
+
+    var _URL = window.URL || window.webkitURL;
+    var file, img;
+    var img_height, img_width;
+
+    if ((file = event.target.files[0])) {
+      img = new Image();
+      var objectUrl = _URL.createObjectURL(file);
+      img.onload = function () {
+        img_height = this.height;
+        img_width = this.width;
+        _URL.revokeObjectURL(objectUrl);
+        console.log(" img_width = ", img_width, "  img_height = ", img_height)
+
+        if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1100 &&
+          parseFloat(img_height) > 130 && parseFloat(img_height) < 1100) {
+          //console.log(" img_height est = ", img_height, " < à 1500 ");
+
+          // Verification que le nom du fichier est alpha numerique
+          /*var regExp = /^[A-Za-z0-9]+$/;
+          if (!regExp.test(event.target.files[0].name)) {
+              sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques");
+              sethandleSubmission_img_article_api("false");
+              setLoading(false);
+ 
+              return
+          }*/
+
+
+          if (String(event.target.files[0].name).length > 50) {
+            sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère");
+            sethandleSubmission_img_article_api("false");
+            setLoading(false);
+
+            return
+          }
+
+          setlogo_file_name(event.target.files[0].name);
+          setimg_img_article_file(URL.createObjectURL(event.target.files[0]));
+          setimg_img_article_file2(event.target.files[0]);
+
+        } else {
+          sethandleSubmission_img_article_message(" La taille de l'image est incorrecte.  Larg = " + String(img_width) + " px Long = " + String(img_height) + " px");
+          sethandleSubmission_img_article_api("false");
+          setLoading(false);
+          return;
+        }
+
+        //console.log(" after img_width = ", img_width, "  after img_height = ", img_height)
+      };
+      img.src = objectUrl;
+
+    }
+    setLoading(false);
+  };
+
+  function clear_message() {
+    sethandleSubmission_img_article_message();
+    sethandleSubmission_img_article_api();
+  }
+
+
+  const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState();
+  const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState();
+  const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState();
+  function Send_img_article_Img() {
+    clear_message();
+    setLoading(true);
+    const formData = new FormData();
+    formData.append('File', img_img_article_file2);
+    //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+    const stored_cookie = getCookie('tokenmysypart');
+    formData.append("token", stored_cookie);
+
+    console.log(" ## le nom du fichier est : ", img_img_article_file2.name);
+
+    fetch(
+      process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/",
+      {
+        method: 'POST',
+        body: formData,
+      }
+    )
+      .then((response) => response.json())
+      .then((result) => {
+        //console.log('Success:', result['message']);
+
+        if (String(result['status']) === String("true")) {
+          setSend_img_article_Img_api("true");
+          alert(" La mise à jour du logo a été correctement effectuée. ");
+
+        } else if (String(result['status']) === String("Err_Connexion")) {
+          alert('Erreur: ' + result['message']);
+          history.push("/Connexion");
+        }
+
+        else {
+          setSend_img_article_Img_api("false");
+          setSend_img_article_Img_message(result['message']);
+        }
+        setLoading(false);
+
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        setSend_img_article_Img_api("false");
+
+        setLoading(false);
+      });
+
+  }
+
+
+  const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState();
+  const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState();
+  const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState();
+  function Delete_img_article_Img() {
+    clear_message();
+
+
+    setLoading(true);
+
+
+    const formData = new FormData();
+
+    //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+    const stored_cookie = getCookie('tokenmysypart');
+    formData.append("token", stored_cookie);
+
+
+    fetch(
+      process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/",
+      {
+        method: 'POST',
+        body: formData,
+      }
+    )
+      .then((response) => response.json())
+      .then((result) => {
+        //console.log('Success:', result['message']);
+
+        if (String(result['status']) === String("true")) {
+          setDelete_img_article_Img_api("true");
+          setGetLms_Themes_img_article_Img('');
+          alert(" Le logo a été correctement supprimé ");
+
+        } else if (String(result['status']) === String("Err_Connexion")) {
+          alert('Erreur: ' + result['message']);
+          history.push("/Connexion");
+        }
+
+        else {
+          setDelete_img_article_Img_api("false");
+          setDelete_img_article_Img_message(result['message']);
+        }
+        setLoading(false);
+
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        setDelete_img_article_Img_api("false");
+        setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo");
+        setLoading(false);
+      });
+
+  }
+
+  const changeHandler2_logo = (event) => {
+    clear_message();
+    hiddenFileInput_logo.current.click();
+  };
+
+  function Annule_img_article_img() {
+    clear_message();
+    setimg_img_article_file();
+    setimg_img_article_file2();
+    sethandleSubmission_img_article_message();
+    setSend_img_article_Img_api();
+    setSend_img_article_Img_message();
+    setlogo_file_name();
+  }
+
+  /***** Fin gestion de l'image de l'article */
+
+  // Prevent Bootstrap dialog from blocking focusin
+  document.addEventListener('focusin', (e) => {
+    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
+      e.stopImmediatePropagation();
+    }
+  });
+
+  return (
+
+    <div className="article">
+
+
+
+      {/***   GESTION article */}
+      <Dialog
+        open={Dialog_article_avis_open}
+        //  onClose={Dialog_article_avis_handleClose}
+        className="displaypartnersession"
+        static
+        onClose={() => null}
+
+        PaperProps={{
+
+
+          className: classes.paper, // Apply the paper style
+          style: {
+            overflowY: 'unset',
+            position: 'absolute',
+            top: '5rem',
+            margin: "2px",
+          },
+        }}
+        hideBackdrop={true}
+        disableScrollLock
+        classes={{
+          paper: classes.dialog
+        }}
+
+        PaperComponent={PaperComponent}
+        aria-labelledby="draggable-dialog-title"
+      >
+
+        <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title">Votre article </DialogTitle>
+        <DialogContent className="DialogContent_width DialogContent_width_session_800px" >
+
+
+          {String(is_data_changed) === String("1") && <div className="div_row_dialog">
+            <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
+          </div>}
+
+          <div className="div_row_dialog">
+            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+              <b> Titre </b>
+            </div>
+            <div className="div_row_dialog" >
+              <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                <input
+                  type='text'
+                  name='name'
+                  value={article_avis_title_formation}
+                  onChange={(e) => {
+                    setarticle_avis_title_formation(e.target.value);
+                    setis_data_changed("1");
+                  }}
+                  className='disabled_style_width_100_percent'
+
+                ></input>
+              </div>
+            </div>
+          </div>
+
+
+
+          <div className="div_row_dialog">
+            <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
+              <b>   Date publication </b>
+            </div>
+
+
+            <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
+              <DatePicker
+                name="date_publication"
+                id="date_publication"
+                selected={new Date(moment(article_avis_date_publication, "YYYY-MM-DD"))}
+                onChange={(date) => {
+                  setarticle_avis_date_publication(format(date, 'yyyy-MM-dd'));
+                  setis_data_changed("1");
+                }
+                }
+                showTimeSelect={false}
+                dateFormat="dd/MM/yyyy"
+                className="disabled_style session_caract_Dialog_DatePicker"
+              />
+            </div>
+          </div>
+
+          <div className="div_row_dialog">
+            <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
+              <b>   Affiche image </b>
+            </div>
+            <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
+              <Checkbox
+                name="document_join_pdf"
+                className="disabled_style session_caract_Dialog_DatePicker"
+                checked={article_avis_display_header_img}
+                onChange={(e) => {
+                  setarticle_avis_display_header_img(e.target.checked);
+                  setis_data_changed("1");
+                }}
+
+              />
+
+            </div>
+          </div>
+          <div className="div_row_dialog">
+            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+              <b> Image Url </b>
+            </div>
+            <div className="div_row_dialog" >
+
+              <div className="div_row_dialog" >
+                <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                  <input
+                    type='text'
+                    name='img_url'
+                    id='img_url'
+                    value={article_avis_img_path}
+                    className='disabled_style_width_100_percent'
+                    disabled
+
+                  ></input>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <div className="div_row_dialog">
+            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+              <b> Images  </b>
+            </div>
+
+            <div className="div_row_dialog" >
+
+              <div className="div_row">
+
+                <nav className="koUpdateData" style={{ "color": "orange" }}>
+
+                </nav>
+                {logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
+                <input type="file"
+                  accept=".png, .jpg, .webp"
+                  ref={hiddenFileInput_logo}
+                  style={{ display: 'none' }}
+                  name="liste_formation_file"
+                  onChange={handleSubmission_logo}
+                />
+
+                {img_img_article_file && <nav> Fichier à importer : {img_img_article_file.name}  <br />
+                  <nav style={{ maxWidth: '20rem', margin: 'auto' }}>
+                    <img src={img_img_article_file} style={{ "width": "100%" }} />
+                  </nav>
+
+
+                  <br />
+                </nav>}
+
+                {String(Send_img_article_Img_api) === "true" && <div className="okUpdateData"> La mise à jour a été correctement faite</div>}
+                {String(Send_img_article_Img_api) === "false" && <div className="koUpdateData"> {Send_img_article_Img_message}</div>}
+
+                {String(handleSubmission_img_article_api) === "false" && <div className="koUpdateData"> {handleSubmission_img_article_message}</div>}
+
+                <br />
+                <Tooltip className="tooltip_css" id="tooltip_taille_img" />
+                <a data-tooltip-id="tooltip_taille_img" data-tooltip-html=" <i> longueur  entre  200px et 1000px  et largeur entre 200px et 1000px, au format PNG ou JPG <br />
+                      Le nom du fichier ne contient que des caractères alphanumériques, sans espaces </i>">
+                  <Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
+                    "background": "#c8cfd5",
+                    "minWidth": "15rem", "color": "black", "width": "auto"
+                  }}
+                    id='menu_import_formation' name='menu_import_formation'>Choisir une image  &nbsp; <FcInfo style={{ fontSize: "14px" }} /> <br />
+
+                  </Button>
+                </a>
+                <br />
+
+              </div>
+
+
+
+            </div>
+          </div>
+
+          <div className="div_row_dialog">
+            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+              <b> Video Url </b>
+            </div>
+            <div className="div_row_dialog" >
+              <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                <input
+                  type='text'
+                  name='name'
+                  value={article_avis_video_path}
+                  onChange={(e) => {
+                    setarticle_avis_video_path(e.target.value);
+                    setis_data_changed("1");
+                  }}
+                  className='disabled_style_width_100_percent'
+
+                ></input>
+              </div>
+            </div>
+          </div>
+
+          <div className="div_row_dialog">
+            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+              <b> Meta description </b>
+              <div className="div_row_dialog" >
+
+                <TextField
+                  maxRows={4}
+                  minRows={3}
+                  inputProps={{ maxLength: 200 }}
+                  multiline
+                  sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
+
+                  name="meta_description"
+                  id="meta_description"
+
+                  fullWidth
+
+                  value={article_avis_meta_description}
+                  onChange={(e) => {
+                    setarticle_avis_meta_description(e.target.value);
+                    setis_data_changed("1");
+                  }
+                  }
+
+
+                />
+              </div>
+
+            </div>
+
+          </div>
+
+          <div className="div_row_dialog">
+            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+              <b> Texte Article</b>
+            </div>
+            <div className="div_row_dialog" >
+
+              <Editor
+                id="detail_document_principal"
+                name="detail_document_principal"
+                onInit={(evt, editor) => editorRef_texte_avis.current = editor}
+                // initialValue={field_texte_avis}
+
+                onKeyUp={editor_keyup}
+                value={field_texte_avis}
+                onEditorChange={(newValue, editor) => {
+                  setfield_texte_avis(editorRef_texte_avis.current.getContent());
+                  setis_data_changed("1");
+
+                }}
+                init={{
+                  resize: false,
+                  height: 700,
+                  menubar: true,
+                  plugins: [
+                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace',
+                    'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount',
+                    'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
+
+                  ],
+                  toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
+                    'alignleft aligncenter alignright alignjustify | ' +
+                    'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
+
+                  content_style: 'body { font-family:DM Sans,sans-serif; font-size:14px; }'
+                }}
+              />
+
+            </div>
+
+            {String(is_data_changed) === String("1") && <div className="div_row_dialog">
+              <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
+            </div>}
+
+            <button onClick={(e) => {
+
+              if (document.getElementsByName('one_detail_document_principal') && document.getElementsByName('one_detail_document_principal')[0])
+                document.getElementsByName('one_detail_document_principal')[0].focus();
+            }}> editer </button>
+
+          </div>
+
+
+
+        </DialogContent>
+
+        <DialogActions>
+          <IconButton
+            autoFocus
+            onClick={Dialog_article_avis_handleClose_buton}
+            color="primary"
+            className={classes.customizedButton}
+          >
+            <CancelPresentationIcon />
+          </IconButton>
+          <div className="div_row">
+            <div className="div_row_gauche">
+              <Button onClick={Dialog_article_avis_handleClose_buton} className="bton_annule_dialog" style={{ textAlign: "center" }}>Fermer &nbsp;</Button>
+            </div>
+            <div className="div_row_droite" style={{ "textAlign": 'center' }}>
+              <Button onClick={Add_Update_Article_Avis} className="bton_enreg_dialog">Enregistrer &nbsp; </Button>
+
+            </div>
+          </div>
+
+        </DialogActions>
+
+
+      </Dialog>
+      {/***  FIN GESTION article */}
+
+
+      <div className="div_row">
+        <div className="div_row_border" >
+          <div style={{ "width": "100%", textAlign: "center" }}>
+
+            <div className="gauche_img">
+              <img src={article_img} alt={props.article.title_formation} className="img_categorie" id="projets" />
+            </div>
+
+            <div className="droite_txt">
+              <div className="met_text" id="projets" onClick={(e) => {
+                e.preventDefault();
+                window.location.href = "/display-article-support-elyos/" + props.article.internal_url
+              }} style={{
+                cursor: "pointer"
+              }} >   {title_resized} </div>
+
+              <div className="met_text_detail" >
+
+
+                <div className="art_criteres_value">
+
+                  {parse(String(props.article.avis).replace(/(<([^>]+)>)/ig, ''))}
+
+                </div>
+
+
+              </div>
+              <div style={{
+                width: '100%', "textAlign": "right", paddingRight: "10px", float: "left", height: "2rem",
+                fontStyle: "italic"
+              }}>  {(String(props.article.date_publication)).substring(0, 10)}
+              </div>
+
+              <div className="grid8p" onClick={(e) => {
+                e.preventDefault();
+                window.location.href = "/display-article-support-elyos/" + props.article.internal_url
+              }}> En savoir plus &rsaquo;
+              </div>
+
+
+
+              {props.connected_user_article_avis_droit_modif === "1" && <div style={{ "width": "100%", "float": "left" }} onClick={(e) => {
+                e.preventDefault();
+
+              }}>
+                <nav style={{
+                  "width": "40%", "float": "left", "textAlign": "left", "paddingLeft": "2px", "paddingRight": "2px",
+                }}
+                >
+ 
+
+                  <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+                    setarticle_avis_title_formation(props.article.title_formation);
+                    // setarticle_avis_avis(props.article.avis);
+                    // setfield_texte_avis_initial_value(props.article.avis);
+                    setarticle_avis_date_publication(moment((String(props.article.date_avis)).substring(0, 10)).format('YYYY-MM-DD'))
+
+                    Get_Partner_Article_Avis_Data();
+                    setedit_article("1");
+                    setis_data_changed("");
+                    setDialog_article_avis_open(true);
+
+                  }}>
+                    <Fab size="small" color="primary" aria-label="edit" variant="extended">
+                      <EditIcon sx={{ pr: 1 }} /> Edit
+                    </Fab>
+                  </Box> </nav>
+
+
+                <nav style={{ "width": "40%", "float": "right", "textAlign": "right", "paddingLeft": "2px", "paddingRight": "2px" }} >
+                  <Popup
+                    trigger={
+                      <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+
+
+                      }}>
+                        <Fab size="small" color="warning" aria-label="edit" variant="extended">
+                          <MdDeleteForever sx={{ pr: 1 }} /> <font style={{ "fontsize": "9px" }}> Supr </font>
+                        </Fab>
+                      </Box>
+                    }
+                    modal
+                    nested
+                    position="center center"
+                  >
+                    {close => (
+                      <div>
+                        <button className="gest_close" onClick={close}>
+                          &times;
+                        </button>
+                        <div className="gest_header"> MySy Information </div>
+                        <div className="gest_content">
+                          {' '}
+
+                          En confirmant cette opération, le document sera <i><font color="red"> définitivement supprimé</font></i>. <br />
+
+                        </div>
+                        <div className="gest_actions">
+                          <div style={{ "width": "45%", "float": "left" }}>
+                            <button className="gest_bton_popup" onClick={(event) => {
+                              Delete_Article_Avis_Data(props.article._id);
+                              close();
+                            }}> Valider </button>
+
+                          </div>
+                          <div style={{ "width": "45%", "float": "right" }}>
+                            <button
+                              className="gest_bton_popup"
+                              onClick={() => {
+                                console.log('modal closed ');
+                                close();
+                              }}
+                            >
+                              Annuler
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </Popup>
+                </nav>
+
+              </div>}
+
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+
+    </div>
+  )
+}
+
+
+export default Article_Help;
\ No newline at end of file
diff --git a/src/components/ButtonHilight.js b/src/components/ButtonHilight.js
index f04d2f8..bffc2ec 100644
--- a/src/components/ButtonHilight.js
+++ b/src/components/ButtonHilight.js
@@ -237,7 +237,7 @@ const ButtonHilight = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -283,7 +283,7 @@ const ButtonHilight = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -628,7 +628,7 @@ const ButtonHilight = () => {
                 <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> MySy Information</DialogTitle>
                 <DialogContent className="DialogContent_width">
                     <DialogContentText>
-                        Confirmez la deconnexion
+                        Confirmez la déconnexion
                     </DialogContentText>
 
                 </DialogContent>
@@ -643,7 +643,7 @@ const ButtonHilight = () => {
                                 if (userconnected && String(userconnected) === '1')
                                     user_logout_confirmation();
 
-                            }} className="bton_enreg_dialog">Deconnexion</Button>
+                            }} className="bton_enreg_dialog">Déconnexion</Button>
                         </div>
                         <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                             <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -674,7 +674,7 @@ const ButtonHilight = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                 >Mon Compte</MenuItem>
                 <MenuItem onClick={PartnerMenu_Close} className="mymenu_item"
-                >Deconnexion</MenuItem>
+                >Déconnexion</MenuItem>
 
             </Menu>
 
@@ -694,7 +694,7 @@ const ButtonHilight = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                 >S'inscrire</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                >Deconnexion</MenuItem>
+                >Déconnexion</MenuItem>
             </Menu>
 
             <Menu
@@ -773,7 +773,7 @@ const ButtonHilight = () => {
                                 {String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white} alt="connexion"
                                     style={{ "width": "25%" }} /> Connexion
                                 </button>}
-                                {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={(e) => setDialog_1_open(true)}> Deconnexion <img src={connect_green}
+                                {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={(e) => setDialog_1_open(true)}> Déconnexion <img src={connect_green}
                                     alt="deconnexion" style={{ "width": "25%" }} />
                                 </button>}
                             </div>
diff --git a/src/components/DisplayDetailClass_new_v2.js b/src/components/DisplayDetailClass_new_v2.js
index 9c5a72d..8cba423 100644
--- a/src/components/DisplayDetailClass_new_v2.js
+++ b/src/components/DisplayDetailClass_new_v2.js
@@ -1015,7 +1015,7 @@ const DisplayDetailClass_new_v2 = (props) => {
   function part_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (pro)',
+      message: 'Confirmez la déconnexion (pro)',
       buttons: [
         {
           label: 'Oui',
@@ -1041,7 +1041,7 @@ const DisplayDetailClass_new_v2 = (props) => {
   function user_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (user)',
+      message: 'Confirmez la déconnexion (user)',
       buttons: [
         {
           label: 'Oui',
diff --git a/src/components/DisplayDetailClass_new_v3.js b/src/components/DisplayDetailClass_new_v3.js
index a9a5cff..932053f 100644
--- a/src/components/DisplayDetailClass_new_v3.js
+++ b/src/components/DisplayDetailClass_new_v3.js
@@ -939,7 +939,7 @@ const DisplayDetailClass_new_v3 = (props) => {
   function part_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (pro)',
+      message: 'Confirmez la déconnexion (pro)',
       buttons: [
         {
           label: 'Oui',
@@ -965,7 +965,7 @@ const DisplayDetailClass_new_v3 = (props) => {
   function user_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (user)',
+      message: 'Confirmez la déconnexion (user)',
       buttons: [
         {
           label: 'Oui',
diff --git a/src/components/Display_Action_And_Class.js b/src/components/Display_Action_And_Class.js
index 3cd12bb..6eed111 100644
--- a/src/components/Display_Action_And_Class.js
+++ b/src/components/Display_Action_And_Class.js
@@ -987,7 +987,7 @@ const Display_Action_And_Class = (props) => {
   function part_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (pro)',
+      message: 'Confirmez la déconnexion (pro)',
       buttons: [
         {
           label: 'Oui',
@@ -1013,7 +1013,7 @@ const Display_Action_And_Class = (props) => {
   function user_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (user)',
+      message: 'Confirmez la déconnexion (user)',
       buttons: [
         {
           label: 'Oui',
diff --git a/src/components/Display_Partner_Catalog_DetailClass_new_v2.js b/src/components/Display_Partner_Catalog_DetailClass_new_v2.js
index 2d85f63..96f8c78 100644
--- a/src/components/Display_Partner_Catalog_DetailClass_new_v2.js
+++ b/src/components/Display_Partner_Catalog_DetailClass_new_v2.js
@@ -1131,7 +1131,7 @@ const Display_Partner_Catalog_DetailClass_new_v2 = (props) => {
   function part_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (pro)',
+      message: 'Confirmez la déconnexion (pro)',
       buttons: [
         {
           label: 'Oui',
@@ -1157,7 +1157,7 @@ const Display_Partner_Catalog_DetailClass_new_v2 = (props) => {
   function user_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (user)',
+      message: 'Confirmez la déconnexion (user)',
       buttons: [
         {
           label: 'Oui',
diff --git a/src/components/ENT_Student_header_automatic_files/ENT_Student_Header.jsx b/src/components/ENT_Student_header_automatic_files/ENT_Student_Header.jsx
index ecdd13e..b6bcdc5 100644
--- a/src/components/ENT_Student_header_automatic_files/ENT_Student_Header.jsx
+++ b/src/components/ENT_Student_header_automatic_files/ENT_Student_Header.jsx
@@ -315,7 +315,7 @@ const ENT_Student_Header = () => {
   return (
     <div className='ent_student_header_automatic_files'>
 
-      {/***   GESTION Deconnexion */}
+      {/***   GESTION Déconnexion */}
       <Dialog
         open={Dialog_1_open}
         // onClose={Dialog_1_handleClose}
@@ -347,7 +347,7 @@ const ENT_Student_Header = () => {
         <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title" >MySy Information</DialogTitle>
         <DialogContent className="DialogContent_width">
           <DialogContentText>
-            Confirmez la deconnexion de l'ENT <br />
+            Confirmez la déconnexion de l'ENT <br />
 
 
           </DialogContentText>
@@ -378,7 +378,7 @@ const ENT_Student_Header = () => {
 
                 }}
 
-                className="bton_enreg_dialog">Deconnexion</Button>
+                className="bton_enreg_dialog">Déconnexion</Button>
             </div>
             <div className="div_row_droite" style={{ "textAlign": 'center' }}>
               <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -388,7 +388,7 @@ const ENT_Student_Header = () => {
         </DialogActions>
       </Dialog>
 
-      {/***  Fin GESTION Deconnexion */}
+      {/***  Fin GESTION Déconnexion */}
 
       <header className="header_new_2025">
         <div className="header-content">
@@ -441,7 +441,7 @@ const ENT_Student_Header = () => {
 
             {String(someoneconnected) === String("1") && <div className="login-link hide_on_mobile" onClick={(e) => setDialog_1_open(true)}>
               <img src={Header_User} alt="User icon" className="user-icon hide_on_mobile" />
-              <span className='hide_on_mobile'>Deconnexion</span>
+              <span className='hide_on_mobile'>Déconnexion</span>
             </div>}
 
           </div>
diff --git a/src/components/Employes.js b/src/components/Employes.js
index 37c0514..554bdad 100644
--- a/src/components/Employes.js
+++ b/src/components/Employes.js
@@ -12,6 +12,7 @@ import { Editor } from '@tinymce/tinymce-react';
 import { FcViewDetails, FcDisapprove } from "react-icons/fc";
 import { FcInfo } from "react-icons/fc";
 import { LiaDharmachakraSolid } from "react-icons/lia";
+import { FcMoneyTransfer } from "react-icons/fc";
 import 'react-tooltip/dist/react-tooltip.css'
 import { Tooltip } from 'react-tooltip'
 import Chip from "@mui/material/Chip";
@@ -7711,6 +7712,8 @@ const Employes = (props) => {
                         position: 'absolute',
                         top: mouse_y,
                         margin: "2px",
+                        left:'45%',
+                        backgroundColor:'#ebf1f4',
                     },
                 }}
                 hideBackdrop={true}
@@ -7723,7 +7726,7 @@ const Employes = (props) => {
                 aria-labelledby="draggable-dialog-title"
             >
 
-                <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily: 'DM Sans' }} id="draggable-dialog-title">  Tarif spécifiques</DialogTitle>
+                <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily: 'DM Sans', backgroundColor:'orange' }} id="draggable-dialog-title">  Tarifs spécifiques</DialogTitle>
                 <DialogContent className="DialogContent_width" style={{ "minHeight": "20rem" }}>
 
 
@@ -9390,31 +9393,37 @@ const Employes = (props) => {
                     }
 
 
-                    {String(p_employe_contrat_groupe_prix_achat_id) === "" && <div className="session_caract_Dialog" > <b> Taux Horaire Brut (HT) </b>
-                        <Button onClick={(e) => {
-                            setDialog_tarif_specific_open(true);
-                        }}
-                        > spécifique</Button>
-                        <Tooltip className="tooltip_css" id="tooltip_id_3" />
-                        <a data-tooltip-id="tooltip_id_3" data-tooltip-html=" Il s'agit du montant de rémunération (HT) du contrat par heure ">
+                    {String(p_employe_contrat_groupe_prix_achat_id) === "" && <div className="session_caract_Dialog" >
+                        <div style={{ width: '100%', float: 'left' }}>
+                            <div style={{ width: '50%', float: 'left' }}>   <b> Taux Horaire Brut (HT) </b> </div>
 
-                            <TextField
-                                sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
+                            <Tooltip className="tooltip_css" id="tooltip_id_prix_spe" />
+                            <a data-tooltip-id="tooltip_id_prix_spe" data-tooltip-html=" Saisir les cout par type : Animation, Préparation, Suivi.... ">
+                                <div style={{ width: '30%', float: 'right', textAlign: 'right', paddingRight: '5px', cursor:'pointer', color:'orange' }} onClick={(e) => {
+                                    setDialog_tarif_specific_open(true);
+                                }}>
+                                    Coûts spécifiques <FcMoneyTransfer />  <FcInfo /> </div>
+                            </a>
+                        </div>
 
-                                name="event_dialog_price"
-                                id="event_dialog_qte"
-                                type="number"
-                                step="any"
-                                fullWidth
 
-                                value={p_employe_contrat_cout}
-                                onChange={(e) => {
-                                    setp_employe_contrat_cout(e.target.value);
-                                    setdialog_contrat_data_changed("1");
-                                }
-                                }
-                            />
-                        </a>
+                        <TextField
+                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
+
+                            name="event_dialog_price"
+                            id="event_dialog_qte"
+                            type="number"
+                            step="any"
+                            fullWidth
+
+                            value={p_employe_contrat_cout}
+                            onChange={(e) => {
+                                setp_employe_contrat_cout(e.target.value);
+                                setdialog_contrat_data_changed("1");
+                            }
+                            }
+                        />
+
                     </div>
                     }
 
diff --git a/src/components/Ent_Intranet.js b/src/components/Ent_Intranet.js
index 7e52a1e..e57b0b1 100644
--- a/src/components/Ent_Intranet.js
+++ b/src/components/Ent_Intranet.js
@@ -1869,7 +1869,7 @@ const Ent_Intranet = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -1917,7 +1917,7 @@ const Ent_Intranet = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Header.js b/src/components/Header.js
index 2f52f0c..028cd18 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -151,7 +151,7 @@ const Header = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -197,7 +197,7 @@ const Header = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -569,7 +569,7 @@ const Header = () => {
                 <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> MySy Information</DialogTitle>
                 <DialogContent className="DialogContent_width">
                     <DialogContentText>
-                        Confirmez la deconnexion  <br />
+                        Confirmez la déconnexion  <br />
 
 
                     </DialogContentText>
@@ -590,7 +590,7 @@ const Header = () => {
 
                                 }}
 
-                                className="bton_enreg_dialog">Deconnexion</Button>
+                                className="bton_enreg_dialog">Déconnexion</Button>
                         </div>
                         <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                             <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -611,7 +611,7 @@ const Header = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                     style={{ "fontSize": "0.7rem" }} >Mon Compte</MenuItem>
                 <MenuItem onClick={part_logout} className="mymenu_item"
-                    style={{ "fontSize": "0.7rem" }} >Deconnexion</MenuItem>
+                    style={{ "fontSize": "0.7rem" }} >Déconnexion</MenuItem>
 
             </Menu>
 
@@ -629,7 +629,7 @@ const Header = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                     style={{ "fontSize": "0.7rem" }}>Creation</MenuItem>
                 <MenuItem onClick={user_logout} className="mymenu_item"
-                    style={{ "fontSize": "0.7rem" }}>Deconnexion</MenuItem>
+                    style={{ "fontSize": "0.7rem" }}>Déconnexion</MenuItem>
             </Menu>
 
             <Menu
@@ -723,7 +723,7 @@ const Header = () => {
                                         </div>}
 
                                     {String(someoneconnected) === String("1") && <div className="header_menuPrincipal" onClick={(e) => setDialog_1_open(true)}>
-                                        <font style={{ color: "rgb(129, 188, 58)" }}> Deconnexion </font>
+                                        <font style={{ color: "rgb(129, 188, 58)" }}> Déconnexion </font>
                                     </div>}
 
                                 </div>
diff --git a/src/components/Jmj_Theme/Jmj_Display_Partner_Catalog_DetailClass_new_v2.js b/src/components/Jmj_Theme/Jmj_Display_Partner_Catalog_DetailClass_new_v2.js
index 84480c6..3251788 100644
--- a/src/components/Jmj_Theme/Jmj_Display_Partner_Catalog_DetailClass_new_v2.js
+++ b/src/components/Jmj_Theme/Jmj_Display_Partner_Catalog_DetailClass_new_v2.js
@@ -1019,7 +1019,7 @@ const JmJ_Display_Partner_Catalog_DetailClass_new_v2 = (props) => {
   function part_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (pro)',
+      message: 'Confirmez la déconnexion (pro)',
       buttons: [
         {
           label: 'Oui',
@@ -1045,7 +1045,7 @@ const JmJ_Display_Partner_Catalog_DetailClass_new_v2 = (props) => {
   function user_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (user)',
+      message: 'Confirmez la déconnexion (user)',
       buttons: [
         {
           label: 'Oui',
diff --git a/src/components/Jmj_Theme/Jmjformation_Catalogue_Public.js b/src/components/Jmj_Theme/Jmjformation_Catalogue_Public.js
index 7e0a300..e66c1d9 100644
--- a/src/components/Jmj_Theme/Jmjformation_Catalogue_Public.js
+++ b/src/components/Jmj_Theme/Jmjformation_Catalogue_Public.js
@@ -1917,7 +1917,7 @@ const Jmjformation_Catalogue_Public = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -1965,7 +1965,7 @@ const Jmjformation_Catalogue_Public = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/ListeArticles.js b/src/components/ListeArticles.js
index 7698671..57b6cda 100644
--- a/src/components/ListeArticles.js
+++ b/src/components/ListeArticles.js
@@ -265,7 +265,7 @@ const ListeArticles = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -332,7 +332,7 @@ const ListeArticles = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -380,7 +380,7 @@ const ListeArticles = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Module_Connexion_Ent_Student.js b/src/components/Module_Connexion_Ent_Student.js
index cba6c20..6744f2b 100644
--- a/src/components/Module_Connexion_Ent_Student.js
+++ b/src/components/Module_Connexion_Ent_Student.js
@@ -114,8 +114,8 @@ function Module_Connexion_Ent_Student() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Module_Connexion_Ent_Student_V2.js b/src/components/Module_Connexion_Ent_Student_V2.js
index 80f450c..9feec3e 100644
--- a/src/components/Module_Connexion_Ent_Student_V2.js
+++ b/src/components/Module_Connexion_Ent_Student_V2.js
@@ -115,8 +115,8 @@ function Module_Connexion_Ent_Student_V2() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Module_Connexion_Intranet_Client.js b/src/components/Module_Connexion_Intranet_Client.js
index 6d4f7b6..5a37ca2 100644
--- a/src/components/Module_Connexion_Intranet_Client.js
+++ b/src/components/Module_Connexion_Intranet_Client.js
@@ -61,8 +61,8 @@ function Module_Connexion_Intranet_Client() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Mon_Catalogue_Public.js b/src/components/Mon_Catalogue_Public.js
index 9c69b3e..a496037 100644
--- a/src/components/Mon_Catalogue_Public.js
+++ b/src/components/Mon_Catalogue_Public.js
@@ -1988,7 +1988,7 @@ const Mon_Catalogue_Public = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2036,7 +2036,7 @@ const Mon_Catalogue_Public = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Mon_Intranet_Public.js b/src/components/Mon_Intranet_Public.js
index 4e27770..11d3631 100644
--- a/src/components/Mon_Intranet_Public.js
+++ b/src/components/Mon_Intranet_Public.js
@@ -2016,7 +2016,7 @@ const Mon_Intranet_Public = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2064,7 +2064,7 @@ const Mon_Intranet_Public = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/New_ButtonHilight_2025.js b/src/components/New_ButtonHilight_2025.js
index 60fe196..5194450 100644
--- a/src/components/New_ButtonHilight_2025.js
+++ b/src/components/New_ButtonHilight_2025.js
@@ -238,7 +238,7 @@ const New_ButtonHilight_2025 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -284,7 +284,7 @@ const New_ButtonHilight_2025 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/New_ButtonHilight_ENT_Student_2025.js b/src/components/New_ButtonHilight_ENT_Student_2025.js
index 589f6b0..135626a 100644
--- a/src/components/New_ButtonHilight_ENT_Student_2025.js
+++ b/src/components/New_ButtonHilight_ENT_Student_2025.js
@@ -239,7 +239,7 @@ const New_ButtonHilight_ENT_Student_2025 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -285,7 +285,7 @@ const New_ButtonHilight_ENT_Student_2025 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/New_ButtonHilight_Intranet_Client_2025.js b/src/components/New_ButtonHilight_Intranet_Client_2025.js
index 83116c0..aafce1d 100644
--- a/src/components/New_ButtonHilight_Intranet_Client_2025.js
+++ b/src/components/New_ButtonHilight_Intranet_Client_2025.js
@@ -238,7 +238,7 @@ const New_ButtonHilight_Intrnaet_Client_2025 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -284,7 +284,7 @@ const New_ButtonHilight_Intrnaet_Client_2025 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/New_C_Article_Help_2025.js b/src/components/New_C_Article_Help_2025.js
new file mode 100644
index 0000000..28a3db9
--- /dev/null
+++ b/src/components/New_C_Article_Help_2025.js
@@ -0,0 +1,1443 @@
+import React, { useRef, useState, useEffect } from "react";
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+import { Helmet } from "react-helmet";
+import { useCookies } from "react-cookie";
+import Articles from "./Article";
+
+import New_Article_2025 from "./New_C_Article_2025";
+
+import 'react-discussion-board/dist/index.css'
+import { useForm } from 'react-hook-form';
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import parse from 'html-react-parser'
+import Fotter_v3 from "./Fotter_v3";
+import Header from "./Header";
+import img_met_digital from "../mysy_img/met_digital.jpg";
+
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { FcRightUp } from "react-icons/fc";
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+import { FcUndo } from "react-icons/fc";
+import IMG_Default_Article from "../mysy_img/img_default_article_detail.jpg";
+
+function PaperComponent(props) {
+    return (
+        <Draggable
+            handle="#draggable-dialog-title"
+            cancel={'[class*="MuiDialogContent-root"]'}
+        >
+            <Paper {...props} />
+        </Draggable>
+    );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+    dialog: {
+        position: 'absolute',
+        // left: 10,
+        top: 400
+    },
+
+    paper: {
+        overflowY: 'unset',
+    },
+    customizedButton: {
+        position: 'absolute',
+        left: '98%',
+        top: '-3%',
+        backgroundColor: 'lightgray',
+        color: 'gray',
+    },
+}));
+
+
+function New_C_Article_Help_2025() {
+
+    const classes = useStyles();
+
+    const [img_displayed, setimg_displayed] = useState("");
+
+    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+    const { articleId } = useParams();
+    const [result, setResult] = useState("");
+
+    const [myApiResponse, setmyApiResponse] = useState("false");
+    const [DetailArticleAvis, setDetailArticleAvis] = useState([]);
+    const [country_code, setcountry_code] = useState("");
+    const [country_name, setcountry_name] = useState("");
+    const [city, setcity] = useState("");
+    const [postal, setpostal] = useState("");
+    const [latitude, setlatitude] = useState("");
+    const [longitude, setlongitude] = useState("");
+    const [IPv4, setIPv4] = useState("");
+    const [state, setstate] = useState("");
+    const [userIp, setuserIp] = useState("");
+    const [action, setaction] = useState("");
+    const [userconnected, setuserconnected] = useState("");
+    const stored_user = cookie.tokenmysych;
+
+
+    const [display_header_img, setdisplay_header_img] = useState("");
+
+    const {
+        register,
+        handleSubmit,
+        reset,
+        formState: { errors }
+    } = useForm();
+
+
+    const [pagecanoniktitle, setpagecanoniktitle] = useState("");
+    const [pagecanonikurl, setpagecanonikurl] = useState(window.location.host);
+    const [article_img, setarticle_img] = useState("")
+    const [page_meta_description, setpage_meta_description] = useState("");
+
+
+    useEffect(() => {
+
+        setpagecanonikurl(window.location.host);
+
+
+
+        async function fetchData() {
+            const result = await axios('https://geolocation-db.com/json/',);
+            setuserIp(result.data.IPv4);
+            setcountry_code(result.data.country_code);
+            setcountry_name(result.data.country_name);
+            setcity(result.data.city);
+            setpostal(result.data.postal);
+            setlatitude(result.data.latitude);
+            setlongitude(result.data.longitude);
+            setIPv4(result.data.IPv4);
+            setstate(result.data.state);
+            setuserIp(result.data.IPv4);
+
+        }
+        fetchData();
+        Display();
+        //  Display_article_comment();
+        Get_3_Articles();
+
+        //alert("stored_user =  "+stored_user);
+        if (typeof (articleId) === "undefined") {
+            setaction("creation");
+        } else {
+            setaction("affichage");
+
+        }
+
+        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+            setuserconnected("0");
+        } else {
+            setuserconnected("1");
+        }
+
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        });
+        //     setwindowWidth(window.innerWidth);
+        //   setwindowheight(window.innerHeight);
+
+
+        //console.log(" articleId = " + articleId);
+    }, []);
+
+
+
+
+    function Display(e) {
+
+
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis/";
+        var form = new FormData();
+        form.append("internal_url", articleId);
+        form.append("token", "");
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        //alert("myurl = "+myurl);
+
+        axios.post(myurl, form).then(res => {
+            // console.log(" In test  res.data.status = " + res.data.status);
+            //console.log(" In Display iiii  res.data.message = " + res.data.message);
+            if (String(res.data.status) === "true") {
+                setmyApiResponse("True");
+
+                setResult(res.data.message);
+                setDetailArticleAvis(JSON.parse(res.data.message));
+
+                var my_avis = JSON.parse(res.data.message)
+
+                if (my_avis && my_avis.display_header_img && String(my_avis.display_header_img) === "0") {
+                    setdisplay_header_img("0")
+                }
+
+                if (my_avis && my_avis.title_formation) {
+                    setpagecanoniktitle(my_avis.title_formation);
+                }
+
+                if (my_avis && my_avis.meta_description) {
+                    setpage_meta_description(my_avis.meta_description);
+                } else {
+                    setpage_meta_description(my_avis.title_formation);
+                }
+
+
+                if (my_avis && my_avis.internal_url) {
+                    setpagecanonikurl(my_avis.internal_url);
+
+                    console.log(process.env.REACT_APP_BASE_URL + "/" + my_avis.internal_url);
+                }
+
+
+                if (my_avis && my_avis.img_path && String(my_avis.img_path).length > 10) {
+                    setarticle_img(my_avis.img_path);
+                } else {
+                    setarticle_img(img_met_digital);
+                }
+
+                //  console.log(" ### my_avis.display_header_img = ", my_avis.display_header_img);
+            }
+            else {
+                //console.log(" In Erreur   res.data.status = " + res.data.status);
+                //console.log(" In Erreur  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+            }
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+        })
+    }
+
+    const [Get_3_Articles_api, setGet_3_Articles_api] = useState();
+    const [Get_3_Articles_result, setGet_3_Articles_result] = useState([]);
+    function Get_3_Articles(e) {
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_last_3_articles/";
+        var form = new FormData();
+        form.append("internal_url", articleId);
+        form.append("token", "");
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        // console.log("#### form = ", form);
+
+        axios.post(myurl, form).then(res => {
+            //console.log(" In Get_3_Articles  res.data.status = " + res.data.status);
+            //console.log(" In Get_3_Articles  res.data.message = " + res.data.message);
+
+            if (String(res.data.status) === "true") {
+
+                setGet_3_Articles_result(res.data.message);
+
+            }
+            else {
+                //console.log(" In Erreur   res.data.status = " + res.data.status);
+                //console.log(" In Erreur  res.data.message = " + res.data.message);
+                setGet_3_Articles_result([]);
+                setGet_3_Articles_api("False");
+
+            }
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setGet_3_Articles_api("False");
+        })
+    }
+
+
+    const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+    const [alert_message, setalert_message] = useState("");
+    const [alert_type, setalert_type] = useState("");
+
+    function clear_alert_message() {
+        setalert_message("");
+    }
+    function clear_alert_type() {
+        setalert_type("");
+    }
+
+    function clear_display_alert_mysy() {
+        setdisplay_alert_mysy("");
+    }
+
+    const relatedArticles = [
+        {
+            id: 1,
+            title: "Optimiser le suivi qualité de vos actions de formation",
+            excerpt:
+                "Centralisez vos justificatifs, structurez vos preuves et gagnez en sérénité sur le suivi opérationnel.",
+            image:
+                "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1400&q=80",
+            category: "Qualité",
+            date: "23 nov. 2024",
+            readTime: "6 min",
+        },
+        {
+            id: 2,
+            title: "Dossier apprenant : les bonnes pratiques pour éviter les oublis",
+            excerpt:
+                "Les réflexes à mettre en place pour fiabiliser vos pièces, évaluations, attestations et documents clés.",
+            image:
+                "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80",
+            category: "Conformité",
+            date: "20 nov. 2024",
+            readTime: "4 min",
+        },
+        {
+            id: 3,
+            title: "Automatiser les relances sans dégrader l’expérience utilisateur",
+            excerpt:
+                "Des relances mieux pensées, mieux ciblées, et beaucoup moins bricolées entre trois outils et deux cafés.",
+            image:
+                "https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1400&q=80",
+            category: "Automatisation",
+            date: "18 nov. 2024",
+            readTime: "4 min",
+        },
+    ];
+
+    return (
+        <div className="new_s_article_detail_2025">
+
+            {/***  Affichage des messages d'alerte*/}
+            {display_alert_mysy && String(display_alert_mysy) === "1" &&
+                <Module_Alert_Confirmation alert_message={alert_message}
+                    alert_type={alert_type}
+                    clear_alert_message={clear_alert_message}
+                    clear_alert_type={clear_alert_type}
+                    clear_display_alert_mysy={clear_display_alert_mysy}
+                />
+            }
+            {/*** FIN Affichage des messages d'alerte*/}
+
+            <Helmet>
+                <title>{`${pagecanoniktitle}`}</title>
+                <meta name="title" content={`${pagecanoniktitle}`} />
+                <meta name="description" content={`${page_meta_description}`} />
+                <meta name="robots" content="index,follow" />
+                <link rel="canonical" href={window.location.href} />
+
+            </Helmet>
+
+            {(!display_header_img || String(display_header_img) === "0") && <div className="head_background_without_img_displayed">
+                &nbsp;
+            </div>}
+
+            {display_header_img && String(display_header_img) !== "0" && <div className="head_background_with_img_displayed">
+                &nbsp;
+            </div>}
+
+            <main>
+                <section className="article-hero">
+                    <div className="elyos-container article-hero__inner">
+                        <a href="/" className="back-link">
+                            ← Retour au support
+                        </a>
+
+                        <span className="support-kicker">Guide support</span>
+
+                        <h1>La signature électronique et les organismes de formation</h1>
+
+                        <div className="article-meta">
+                            <span>Publié le 18 nov. 2024</span>
+                            <span>•</span>
+                            <span>Lecture 6 min</span>
+                            <span>•</span>
+                            <span>Administratif</span>
+                        </div>
+
+                        <p className="article-intro">
+                            La signature électronique permet de sécuriser les validations,
+                            fluidifier les échanges documentaires et accélérer la gestion
+                            administrative des organismes de formation, tout en renforçant la
+                            conformité et la traçabilité.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="article-main-section">
+                    <div className="elyos-container article-center-layout">
+                        <article className="article-content-card">
+                            <section className="article-section">
+                                <span className="article-section__eyebrow">Définition</span>
+                                <h2>Pourquoi la signature électronique est devenue incontournable</h2>
+
+                                <p>
+                                    La signature électronique est une méthode de validation
+                                    numérique qui garantit l’identité de la personne qui signe un
+                                    document ou un contrat en ligne. Elle a la même valeur légale
+                                    qu’une signature manuscrite, dès lors que son cadre
+                                    d’utilisation respecte les exigences applicables.
+                                </p>
+
+                                <p>
+                                    Pour les organismes de formation, elle apporte un gain concret
+                                    de fluidité : moins d’allers-retours, moins de délais, moins
+                                    de documents dispersés, et une meilleure lisibilité des étapes
+                                    de validation.
+                                </p>
+
+                                <div className="article-callout article-callout--info">
+                                    <strong>À retenir :</strong> la signature électronique ne sert
+                                    pas seulement à signer plus vite. Elle sert surtout à signer
+                                    plus proprement, avec plus de sécurité et moins de friction
+                                    dans les parcours administratifs.
+                                </div>
+                            </section>
+
+                            <section className="article-section">
+                                <div className="article-video-inline">
+                                    <div className="article-video-inline__top">
+                                        <span className="video-card__badge">Vidéo</span>
+                                        <h3>Présentation rapide</h3>
+                                        <p>
+                                            Ajoute ici une vidéo tutorielle, une démo produit ou une
+                                            explication métier.
+                                        </p>
+                                    </div>
+
+                                    <div className="video-placeholder">
+                                        {false ? (
+                                            <iframe
+                                                src="https://www.youtube.com/embed/TON_ID_VIDEO"
+                                                title="Vidéo explicative"
+                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                                allowFullScreen
+                                            />
+                                        ) : (
+                                            <>
+                                                <div className="video-placeholder__play">▶</div>
+                                                <div className="video-placeholder__text">
+                                                    Zone vidéo
+                                                    <span>Iframe YouTube, Vimeo ou lecteur interne</span>
+                                                </div>
+                                            </>
+                                        )}
+                                    </div>
+
+                                    <div className="video-card__footer">
+                                        <small>Format recommandé : 16:9</small>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <section className="article-section">
+                                <span className="article-section__eyebrow">Niveaux</span>
+                                <h2>Les différents types de signature électronique</h2>
+
+                                <p>
+                                    Il existe plusieurs niveaux de signature électronique, selon
+                                    le niveau de sécurité, d’authentification et de preuve
+                                    attendu.
+                                </p>
+
+                                <div className="article-feature-grid">
+                                    <div className="article-feature-card">
+                                        <h3>Signature simple</h3>
+                                        <p>
+                                            Adaptée à certains usages courants, avec une mise en œuvre
+                                            rapide et un niveau de sécurité plus limité.
+                                        </p>
+                                    </div>
+
+                                    <div className="article-feature-card">
+                                        <h3>Signature avancée</h3>
+                                        <p>
+                                            Repose sur des mécanismes renforcés pour vérifier
+                                            l’identité du signataire et l’intégrité du document.
+                                        </p>
+                                    </div>
+
+                                    <div className="article-feature-card">
+                                        <h3>Signature qualifiée</h3>
+                                        <p>
+                                            Offre le niveau de sécurité le plus élevé, avec un
+                                            certificat qualifié délivré par une autorité agréée.
+                                        </p>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <section className="article-section">
+                                <span className="article-section__eyebrow">Fonctionnement</span>
+                                <h2>Comment cela fonctionne concrètement</h2>
+
+                                <p>
+                                    Une signature électronique est générée via un logiciel ou une
+                                    plateforme qui applique un procédé cryptographique au
+                                    document. Cela permet notamment :
+                                </p>
+
+                                <ul className="article-list">
+                                    <li>D’authentifier le signataire</li>
+                                    <li>De garantir l’intégrité du document</li>
+                                    <li>D’obtenir une preuve juridique fiable</li>
+                                </ul>
+
+                                <p>
+                                    Toute modification du document après signature peut être
+                                    détectée, ce qui renforce sa valeur probante et sécurise les
+                                    échanges.
+                                </p>
+                            </section>
+
+                            <section className="article-section">
+                                <span className="article-section__eyebrow">Outils</span>
+                                <h2>Plateformes de signature électronique</h2>
+
+                                <p>
+                                    Des solutions comme DocuSign, Adobe Sign ou Yousign permettent
+                                    de gérer la signature électronique de manière rapide et fiable.
+                                    Elles s’appuient sur des mécanismes de contrôle adaptés aux
+                                    niveaux de sécurité recherchés.
+                                </p>
+
+                                <p>
+                                    Mais lorsque la signature est gérée dans un outil séparé du
+                                    reste du processus, cela peut créer des ruptures : ressaisies,
+                                    suivi moins lisible, documents dispersés, dépendance à
+                                    plusieurs interfaces.
+                                </p>
+                            </section>
+
+                            <section className="article-section">
+                                <span className="article-section__eyebrow">Vision Elyos</span>
+                                <h2>Comment Elyos s’inscrit dans cette logique</h2>
+
+                                <p>
+                                    L’enjeu n’est pas simplement d’ajouter une fonctionnalité de
+                                    signature. L’enjeu est de l’intégrer dans un parcours métier
+                                    cohérent : documents, validations, suivi des dossiers,
+                                    traçabilité et accès rapide à l’information.
+                                </p>
+
+                                <p>
+                                    Dans une logique dédiée aux organismes de formation, la
+                                    signature doit s’insérer dans un processus plus global, sans
+                                    multiplier les outils ni casser la fluidité opérationnelle.
+                                </p>
+
+                                <div className="article-callout article-callout--accent">
+                                    <strong>Vision premium :</strong> ne pas juxtaposer des
+                                    briques, mais construire une expérience fluide, rigoureuse et
+                                    centralisée.
+                                </div>
+                            </section>
+                        </article>
+
+                        <div className="support-section-title">
+                            <div>
+                                <span className="support-section-title__eyebrow">
+                                    Ressources complémentaires
+                                </span>
+                                <h2>À lire aussi</h2>
+                            </div>
+                            <a href="/" className="support-inline-link">
+                                Voir tous les articles
+                            </a>
+                        </div>
+
+                        <div className="article-grid-premium">
+                            {relatedArticles.map((article) => (
+                                <article className="article-card-premium" key={article.id}>
+                                    <div className="article-card-premium__image-wrap">
+                                        <img src={article.image} alt={article.title} />
+                                        <span className="article-card-premium__category">
+                                            {article.category}
+                                        </span>
+                                    </div>
+
+                                    <div className="article-card-premium__body">
+                                        <div className="article-card-premium__meta">
+                                            <span>{article.date}</span>
+                                            <span>•</span>
+                                            <span>{article.readTime}</span>
+                                        </div>
+
+                                        <h3>{article.title}</h3>
+                                        <p>{article.excerpt}</p>
+
+                                        <a href="/" className="article-card-premium__link">
+                                            En savoir plus <span>→</span>
+                                        </a>
+                                    </div>
+                                </article>
+                            ))}
+                        </div>
+                    </div>
+                </section>
+            </main>
+
+
+
+            {/*<> 
+            <div style={{ width: '100%', float: 'left' }}>
+
+
+                <div style={{ "width": '90%', margin: 'auto' }}>
+                    {(!display_header_img || String(display_header_img) === "0") && <div className="blog_info_without_img_displayed">
+                        <div className="blog_info_title">
+                            {DetailArticleAvis.title_formation}
+                        </div>
+
+                        {DetailArticleAvis && DetailArticleAvis.date_avis && <div className="blog_info_date">
+                            {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
+                        </div>}
+                        <div className="frame1_img">
+                            &nbsp;
+                        </div>
+                    </div>}
+
+                    {display_header_img && String(display_header_img) !== "0" && <div className="blog_info_with_img_displayed">
+                        <div className="blog_info_title">
+                            {DetailArticleAvis.title_formation}
+                        </div>
+
+                        {DetailArticleAvis && DetailArticleAvis.date_avis && <div className="blog_info_date">
+                            {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
+                        </div>}
+                        <div className="frame1_img">
+                            <img src={article_img} alt={pagecanoniktitle} className="frame1_img_class" />
+                        </div>
+                    </div>}
+
+                    {DetailArticleAvis && DetailArticleAvis.avis && <div className="blog_info_paragraphe">
+                        <div className="paragraphe_text">
+                            {parse(DetailArticleAvis.avis)}
+                        </div>
+                    </div>}
+
+                </div>
+
+            </div>
+
+            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
+                <div style={{ "width": '80%', margin: 'auto' }}>
+                    <div className="retour_list_articles" onClick={(e) => {
+                        e.preventDefault();
+                        window.location.href = "/elyos-support"
+                    }}>
+                        <FcUndo /> &nbsp; Retour vers le support
+                    </div>
+
+
+                </div>
+            </div>
+
+
+            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
+                <div style={{ "width": '80%', margin: 'auto' }}>
+                    <div className="a_decouvrir">
+                        À découvrir également
+                    </div>
+
+                    <div style={{ width: '100%', float: 'left' }}>
+
+                        {Get_3_Articles_result && Get_3_Articles_result.map((formation) => (
+                            <div style={{ width: '32%', float: 'left', }}>
+                                <New_Article_2025 article={JSON.parse(formation)} key={JSON.parse(formation).title_formation} />
+                            </div>
+
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
+                <div style={{ "width": '80%', margin: 'auto' }}>
+                    <div className="a_decouvrir">
+                        À découvrir également
+                    </div>
+
+                    <div style={{ width: '100%', float: 'left' }}>
+
+
+                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
+                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
+                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
+                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
+                                    How collaboration makes us better designers
+                                </div>
+                                <div style={{ width: '9%', float: 'right' }}>
+                                    <FcRightUp style={{}} />
+                                </div>
+
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
+                                Collaboration can make our teams stronger, and our individual designs better.
+                            </div>
+
+                        </div>
+
+                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
+                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
+                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
+                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
+                                    How collaboration makes us better designers
+                                </div>
+                                <div style={{ width: '9%', float: 'right' }}>
+                                    <FcRightUp style={{}} />
+                                </div>
+
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
+                                Collaboration can make our teams stronger, and our individual designs better.
+                            </div>
+
+                        </div>
+
+                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
+                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
+                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
+                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
+                                    How collaboration makes us better designers
+                                </div>
+                                <div style={{ width: '9%', float: 'right' }}>
+                                    <FcRightUp style={{}} />
+                                </div>
+
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
+                                Collaboration can make our teams stronger, and our individual designs better.
+                            </div>
+
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+</>*/}
+
+            <style>{local_css}</style>
+        </div>
+    );
+}
+
+export default New_C_Article_Help_2025;
+
+const local_css = `
+:root {
+  --elyos-primary: #2f63e0;
+  --elyos-primary-dark: #234fb8;
+  --elyos-turquoise: #18c1b7;
+  --elyos-navy: #142b63;
+  --elyos-text: #1d2b4f;
+  --elyos-text-soft: #66728f;
+  --elyos-border: #e5eaf5;
+  --elyos-border-strong: #d8e1f0;
+  --elyos-bg: #f5f8fd;
+  --elyos-bg-soft: #f9fbff;
+  --elyos-white: #ffffff;
+
+  --shadow-soft: 0 12px 30px rgba(20, 43, 99, 0.07);
+  --shadow-medium: 0 18px 40px rgba(20, 43, 99, 0.1);
+  --shadow-strong: 0 28px 60px rgba(20, 43, 99, 0.14);
+
+  --radius-xxl: 28px;
+  --radius-xl: 24px;
+  --radius-lg: 18px;
+  --radius-md: 14px;
+
+  --container: 1320px;
+  --article-width: 980px;
+  --article-reading-width: 860px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  background: var(--elyos-bg);
+  color: var(--elyos-text);
+  font-family: 'DM Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+body {
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.elyos-container {
+  width: min(var(--container), calc(100% - 40px));
+  margin: 0 auto;
+}
+
+/* HEADER */
+.elyos-header {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+  backdrop-filter: blur(14px);
+  background: rgba(255, 255, 255, 0.86);
+  border-bottom: 1px solid rgba(229, 234, 245, 0.9);
+}
+
+.elyos-header__inner {
+  min-height: 86px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 28px;
+}
+
+.elyos-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.elyos-brand__logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  color: white;
+  font-weight: 800;
+  font-size: 1.45rem;
+  background: linear-gradient(
+    135deg,
+    var(--elyos-turquoise),
+    var(--elyos-primary)
+  );
+  box-shadow: 0 12px 24px rgba(47, 99, 224, 0.22);
+}
+
+.elyos-brand__text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1;
+}
+
+.elyos-brand__name {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--elyos-navy);
+}
+
+.elyos-brand__sub {
+  margin-top: 4px;
+  font-size: 0.84rem;
+  color: var(--elyos-text-soft);
+  font-weight: 600;
+}
+
+.elyos-nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 28px;
+}
+
+.elyos-nav a {
+  color: var(--elyos-text);
+  font-weight: 600;
+  position: relative;
+}
+
+.elyos-nav a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--elyos-primary),
+    var(--elyos-turquoise)
+  );
+  transition: width 0.25s ease;
+}
+
+.elyos-nav a:hover::after {
+  width: 100%;
+}
+
+.elyos-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.elyos-btn {
+  height: 46px;
+  padding: 0 20px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  transition: all 0.22s ease;
+}
+
+.elyos-btn--secondary {
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid var(--elyos-border-strong);
+  color: var(--elyos-text);
+}
+
+.elyos-btn--secondary:hover {
+  transform: translateY(-1px);
+  border-color: #c8d3e7;
+  box-shadow: var(--shadow-soft);
+}
+
+.elyos-btn--primary {
+  color: white;
+  background: linear-gradient(135deg, var(--elyos-primary), #4b7dff);
+  box-shadow: 0 16px 28px rgba(47, 99, 224, 0.22);
+}
+
+.elyos-btn--primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 34px rgba(47, 99, 224, 0.28);
+}
+
+/* HERO */
+.article-hero {
+  position: relative;
+  overflow: hidden;
+  padding: 54px 0 34px;
+  background:
+    radial-gradient(circle at 15% 20%, rgba(24, 193, 183, 0.12), transparent 24%),
+    radial-gradient(circle at 85% 15%, rgba(47, 99, 224, 0.14), transparent 24%),
+    linear-gradient(180deg, #f9fbff 0%, #f5f8fd 100%);
+}
+
+.article-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)),
+    repeating-linear-gradient(
+      90deg,
+      rgba(20, 43, 99, 0.02) 0,
+      rgba(20, 43, 99, 0.02) 1px,
+      transparent 1px,
+      transparent 120px
+    );
+  pointer-events: none;
+}
+
+.article-hero__inner {
+  position: relative;
+  z-index: 1;
+  max-width: var(--article-width);
+  margin: 0 auto;
+  padding: 28px 0 18px;
+  text-align: center;
+}
+
+.back-link {
+  display: inline-flex;
+  margin-bottom: 16px;
+  color: var(--elyos-primary);
+  font-weight: 700;
+}
+
+.support-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  background: rgba(24, 193, 183, 0.1);
+  color: #0c7c74;
+  font-size: 0.92rem;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+}
+
+.article-hero h1 {
+  margin: 20px 0 0;
+  font-size: clamp(2.4rem, 4vw, 4.4rem);
+  line-height: 1.02;
+  letter-spacing: -0.05em;
+  color: var(--elyos-navy);
+}
+
+.article-meta {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  color: var(--elyos-text-soft);
+  font-size: 0.95rem;
+}
+
+.article-intro {
+  max-width: 860px;
+  margin: 22px auto 0;
+  font-size: 1.08rem;
+  line-height: 1.8;
+  color: var(--elyos-text-soft);
+}
+
+/* MAIN */
+.article-main-section {
+  padding: 24px 0 72px;
+}
+
+.article-center-layout {
+  max-width: var(--article-width);
+}
+
+.article-content-card {
+  padding: 38px;
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(229, 234, 245, 0.95);
+  box-shadow: var(--shadow-medium);
+}
+
+.article-section + .article-section {
+  margin-top: 42px;
+}
+
+.article-section__eyebrow {
+  display: inline-block;
+  margin-bottom: 8px;
+  color: var(--elyos-primary);
+  font-size: 0.84rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.article-section h2 {
+  max-width: 760px;
+  margin: 0 0 16px;
+  font-size: 2rem;
+  line-height: 1.12;
+  letter-spacing: -0.03em;
+  color: var(--elyos-navy);
+}
+
+.article-section h3 {
+  margin: 0 0 10px;
+  font-size: 1.12rem;
+  color: var(--elyos-navy);
+}
+
+.article-section p,
+.article-list,
+.article-callout,
+.article-feature-grid,
+.article-video-inline {
+  max-width: var(--article-reading-width);
+}
+
+.article-section p {
+  margin: 0 0 16px;
+  color: var(--elyos-text);
+  line-height: 1.9;
+}
+
+/* CALLOUT */
+.article-callout {
+  margin-top: 24px;
+  padding: 18px 20px;
+  border-radius: 18px;
+  line-height: 1.75;
+}
+
+.article-callout--info {
+  background: linear-gradient(
+    180deg,
+    rgba(47, 99, 224, 0.08),
+    rgba(47, 99, 224, 0.04)
+  );
+  border: 1px solid rgba(47, 99, 224, 0.14);
+}
+
+.article-callout--accent {
+  background: linear-gradient(
+    180deg,
+    rgba(24, 193, 183, 0.1),
+    rgba(24, 193, 183, 0.05)
+  );
+  border: 1px solid rgba(24, 193, 183, 0.16);
+}
+
+/* VIDEO */
+.article-video-inline {
+  margin: 6px 0 4px;
+  padding: 24px;
+  border-radius: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.96) 0%,
+    rgba(246, 249, 255, 0.98) 100%
+  );
+  border: 1px solid rgba(216, 225, 240, 0.95);
+  box-shadow: var(--shadow-soft);
+}
+
+.article-video-inline__top h3 {
+  margin: 10px 0 8px;
+  font-size: 1.4rem;
+  line-height: 1.2;
+  color: var(--elyos-navy);
+}
+
+.article-video-inline__top p {
+  margin: 0 0 18px;
+  color: var(--elyos-text-soft);
+  line-height: 1.7;
+}
+
+.video-card__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(24, 193, 183, 0.12);
+  color: #0c7c74;
+  font-size: 0.82rem;
+  font-weight: 800;
+}
+
+.video-placeholder {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 22px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top left, rgba(24, 193, 183, 0.18), transparent 30%),
+    radial-gradient(circle at bottom right, rgba(47, 99, 224, 0.2), transparent 32%),
+    linear-gradient(135deg, #122758, #264eb8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.video-placeholder__play {
+  width: 68px;
+  height: 68px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.16);
+  color: white;
+  font-size: 1.3rem;
+  backdrop-filter: blur(8px);
+}
+
+.video-placeholder__text {
+  text-align: center;
+  color: white;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.video-placeholder__text span {
+  display: block;
+  margin-top: 6px;
+  font-size: 0.88rem;
+  font-weight: 500;
+  opacity: 0.88;
+}
+
+.video-card__footer {
+  margin-top: 14px;
+  text-align: center;
+  color: var(--elyos-text-soft);
+}
+
+.video-placeholder iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
+/* FEATURE CARDS */
+.article-feature-grid {
+  display: grid;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.article-feature-card {
+  padding: 18px;
+  border-radius: 18px;
+  background: var(--elyos-bg-soft);
+  border: 1px solid var(--elyos-border);
+}
+
+.article-feature-card p {
+  margin-bottom: 0;
+}
+
+.article-list {
+  margin: 0 0 18px 0;
+  padding-left: 20px;
+}
+
+.article-list li {
+  margin-bottom: 10px;
+  line-height: 1.8;
+}
+
+/* RELATED */
+.support-section-title {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 34px 0 20px;
+}
+
+.support-section-title__eyebrow {
+  display: inline-block;
+  margin-bottom: 8px;
+  color: var(--elyos-primary);
+  font-size: 0.84rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.support-section-title h2 {
+  margin: 0;
+  font-size: 2rem;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--elyos-navy);
+}
+
+.support-inline-link {
+  color: var(--elyos-primary);
+  font-weight: 700;
+}
+
+.article-grid-premium {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 22px;
+}
+
+.article-card-premium {
+  overflow: hidden;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(229, 234, 245, 0.95);
+  box-shadow: var(--shadow-soft);
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+}
+
+.article-card-premium:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-medium);
+}
+
+.article-card-premium__image-wrap {
+  position: relative;
+  height: 210px;
+  overflow: hidden;
+}
+
+.article-card-premium__image-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.35s ease;
+}
+
+.article-card-premium:hover .article-card-premium__image-wrap img {
+  transform: scale(1.04);
+}
+
+.article-card-premium__category {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--elyos-navy);
+  font-size: 0.8rem;
+  font-weight: 800;
+  backdrop-filter: blur(8px);
+}
+
+.article-card-premium__body {
+  padding: 20px;
+}
+
+.article-card-premium__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--elyos-text-soft);
+  font-size: 0.9rem;
+  margin-bottom: 12px;
+}
+
+.article-card-premium h3 {
+  margin: 0 0 10px;
+  font-size: 1.2rem;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  color: var(--elyos-navy);
+}
+
+.article-card-premium p {
+  margin: 0 0 16px;
+  color: var(--elyos-text-soft);
+  line-height: 1.7;
+}
+
+.article-card-premium__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--elyos-primary);
+  font-weight: 800;
+}
+
+.article-card-premium__link span {
+  transition: transform 0.2s ease;
+}
+
+.article-card-premium:hover .article-card-premium__link span {
+  transform: translateX(4px);
+}
+
+/* FOOTER */
+.elyos-footer {
+  margin-top: 60px;
+  border-top: 1px solid rgba(229, 234, 245, 0.95);
+  background: linear-gradient(180deg, #f8fbff 0%, #f2f6fc 100%);
+}
+
+.elyos-footer__inner {
+  min-height: 86px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--elyos-text-soft);
+  font-size: 0.95rem;
+}
+
+.elyos-footer__links {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.elyos-footer__links a:hover {
+  color: var(--elyos-text);
+}
+
+/* RESPONSIVE */
+@media (max-width: 1080px) {
+  .article-grid-premium {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .elyos-header__inner {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    padding: 16px 0;
+  }
+}
+
+@media (max-width: 760px) {
+  .elyos-container {
+    width: min(var(--container), calc(100% - 24px));
+  }
+
+  .article-grid-premium {
+    grid-template-columns: 1fr;
+  }
+
+  .support-section-title,
+  .elyos-footer__inner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .elyos-nav,
+  .elyos-actions {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .article-hero h1 {
+    font-size: 2.2rem;
+  }
+
+  .article-content-card,
+  .article-video-inline {
+    padding: 20px;
+  }
+}
+`;
\ No newline at end of file
diff --git a/src/components/New_C_Article_Help_2025_ARG.js b/src/components/New_C_Article_Help_2025_ARG.js
new file mode 100644
index 0000000..aa8f12b
--- /dev/null
+++ b/src/components/New_C_Article_Help_2025_ARG.js
@@ -0,0 +1,472 @@
+import React, { useRef, useState, useEffect } from "react";
+import axios from "axios";
+import { useParams } from 'react-router-dom'
+import { Helmet } from "react-helmet";
+import { useCookies } from "react-cookie";
+import Articles from "./Article";
+
+import New_Article_2025 from "./New_C_Article_2025";
+
+import 'react-discussion-board/dist/index.css'
+import { useForm } from 'react-hook-form';
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import parse from 'html-react-parser'
+import Fotter_v3 from "./Fotter_v3";
+import Header from "./Header";
+import img_met_digital from "../mysy_img/met_digital.jpg";
+
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { FcRightUp } from "react-icons/fc";
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+import { FcUndo } from "react-icons/fc";
+import IMG_Default_Article from "../mysy_img/img_default_article_detail.jpg";
+
+function PaperComponent(props) {
+    return (
+        <Draggable
+            handle="#draggable-dialog-title"
+            cancel={'[class*="MuiDialogContent-root"]'}
+        >
+            <Paper {...props} />
+        </Draggable>
+    );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+    dialog: {
+        position: 'absolute',
+        // left: 10,
+        top: 400
+    },
+
+    paper: {
+        overflowY: 'unset',
+    },
+    customizedButton: {
+        position: 'absolute',
+        left: '98%',
+        top: '-3%',
+        backgroundColor: 'lightgray',
+        color: 'gray',
+    },
+}));
+
+
+function New_C_Article_Help_2025_ARG() {
+
+    const classes = useStyles();
+
+    const [img_displayed, setimg_displayed] = useState("");
+
+    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+    const { articleId } = useParams();
+    const [result, setResult] = useState("");
+
+    const [myApiResponse, setmyApiResponse] = useState("false");
+    const [DetailArticleAvis, setDetailArticleAvis] = useState([]);
+    const [country_code, setcountry_code] = useState("");
+    const [country_name, setcountry_name] = useState("");
+    const [city, setcity] = useState("");
+    const [postal, setpostal] = useState("");
+    const [latitude, setlatitude] = useState("");
+    const [longitude, setlongitude] = useState("");
+    const [IPv4, setIPv4] = useState("");
+    const [state, setstate] = useState("");
+    const [userIp, setuserIp] = useState("");
+    const [action, setaction] = useState("");
+    const [userconnected, setuserconnected] = useState("");
+    const stored_user = cookie.tokenmysych;
+
+
+    const [display_header_img, setdisplay_header_img] = useState("");
+
+    const {
+        register,
+        handleSubmit,
+        reset,
+        formState: { errors }
+    } = useForm();
+
+
+    const [pagecanoniktitle, setpagecanoniktitle] = useState("");
+    const [pagecanonikurl, setpagecanonikurl] = useState(window.location.host);
+    const [article_img, setarticle_img] = useState("")
+    const [page_meta_description, setpage_meta_description] = useState("");
+
+
+    useEffect(() => {
+
+        setpagecanonikurl(window.location.host);
+
+
+
+        async function fetchData() {
+            const result = await axios('https://geolocation-db.com/json/',);
+            setuserIp(result.data.IPv4);
+            setcountry_code(result.data.country_code);
+            setcountry_name(result.data.country_name);
+            setcity(result.data.city);
+            setpostal(result.data.postal);
+            setlatitude(result.data.latitude);
+            setlongitude(result.data.longitude);
+            setIPv4(result.data.IPv4);
+            setstate(result.data.state);
+            setuserIp(result.data.IPv4);
+
+        }
+        fetchData();
+        Display();
+        //  Display_article_comment();
+        Get_3_Articles();
+
+        //alert("stored_user =  "+stored_user);
+        if (typeof (articleId) === "undefined") {
+            setaction("creation");
+        } else {
+            setaction("affichage");
+
+        }
+
+        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
+            setuserconnected("0");
+        } else {
+            setuserconnected("1");
+        }
+
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        });
+        //     setwindowWidth(window.innerWidth);
+        //   setwindowheight(window.innerHeight);
+
+
+        //console.log(" articleId = " + articleId);
+    }, []);
+
+
+
+
+    function Display(e) {
+
+
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis/";
+        var form = new FormData();
+        form.append("internal_url", articleId);
+        form.append("token", "");
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        //alert("myurl = "+myurl);
+
+        axios.post(myurl, form).then(res => {
+            // console.log(" In test  res.data.status = " + res.data.status);
+            //console.log(" In Display iiii  res.data.message = " + res.data.message);
+            if (String(res.data.status) === "true") {
+                setmyApiResponse("True");
+
+                setResult(res.data.message);
+                setDetailArticleAvis(JSON.parse(res.data.message));
+
+                var my_avis = JSON.parse(res.data.message)
+
+                if (my_avis && my_avis.display_header_img && String(my_avis.display_header_img) === "0") {
+                    setdisplay_header_img("0")
+                }
+
+                if (my_avis && my_avis.title_formation) {
+                    setpagecanoniktitle(my_avis.title_formation);
+                }
+
+                if (my_avis && my_avis.meta_description) {
+                    setpage_meta_description(my_avis.meta_description);
+                } else {
+                    setpage_meta_description(my_avis.title_formation);
+                }
+
+
+                if (my_avis && my_avis.internal_url) {
+                    setpagecanonikurl(my_avis.internal_url);
+
+                    console.log(process.env.REACT_APP_BASE_URL + "/" + my_avis.internal_url);
+                }
+
+
+                if (my_avis && my_avis.img_path && String(my_avis.img_path).length > 10) {
+                    setarticle_img(my_avis.img_path);
+                } else {
+                    setarticle_img(img_met_digital);
+                }
+
+                //  console.log(" ### my_avis.display_header_img = ", my_avis.display_header_img);
+            }
+            else {
+                //console.log(" In Erreur   res.data.status = " + res.data.status);
+                //console.log(" In Erreur  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+            }
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+        })
+    }
+
+    const [Get_3_Articles_api, setGet_3_Articles_api] = useState();
+    const [Get_3_Articles_result, setGet_3_Articles_result] = useState([]);
+    function Get_3_Articles(e) {
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_last_3_articles/";
+        var form = new FormData();
+        form.append("internal_url", articleId);
+        form.append("token", "");
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        // console.log("#### form = ", form);
+
+        axios.post(myurl, form).then(res => {
+            //console.log(" In Get_3_Articles  res.data.status = " + res.data.status);
+            //console.log(" In Get_3_Articles  res.data.message = " + res.data.message);
+
+            if (String(res.data.status) === "true") {
+
+                setGet_3_Articles_result(res.data.message);
+
+            }
+            else {
+                //console.log(" In Erreur   res.data.status = " + res.data.status);
+                //console.log(" In Erreur  res.data.message = " + res.data.message);
+                setGet_3_Articles_result([]);
+                setGet_3_Articles_api("False");
+
+            }
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setGet_3_Articles_api("False");
+        })
+    }
+
+
+    const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
+    const [alert_message, setalert_message] = useState("");
+    const [alert_type, setalert_type] = useState("");
+
+    function clear_alert_message() {
+        setalert_message("");
+    }
+    function clear_alert_type() {
+        setalert_type("");
+    }
+
+    function clear_display_alert_mysy() {
+        setdisplay_alert_mysy("");
+    }
+
+
+    return (
+        <div className="new_s_article_detail_2025">
+
+            {/***  Affichage des messages d'alerte*/}
+            {display_alert_mysy && String(display_alert_mysy) === "1" &&
+                <Module_Alert_Confirmation alert_message={alert_message}
+                    alert_type={alert_type}
+                    clear_alert_message={clear_alert_message}
+                    clear_alert_type={clear_alert_type}
+                    clear_display_alert_mysy={clear_display_alert_mysy}
+                />
+            }
+            {/*** FIN Affichage des messages d'alerte*/}
+
+            <Helmet>
+                <title>{`${pagecanoniktitle}`}</title>
+                <meta name="title" content={`${pagecanoniktitle}`} />
+                <meta name="description" content={`${page_meta_description}`} />
+                <meta name="robots" content="index,follow" />
+                <link rel="canonical" href={window.location.href} />
+
+            </Helmet>
+
+            {(!display_header_img || String(display_header_img) === "0") && <div className="head_background_without_img_displayed">
+                &nbsp;
+            </div>}
+
+            {display_header_img && String(display_header_img) !== "0" && <div className="head_background_with_img_displayed">
+                &nbsp;
+            </div>}
+
+
+            <div style={{ width: '100%', float: 'left' }}>
+
+
+                <div style={{ "width": '90%', margin: 'auto' }}>
+                    {(!display_header_img || String(display_header_img) === "0") && <div className="blog_info_without_img_displayed">
+                        <div className="blog_info_title">
+                            {DetailArticleAvis.title_formation}
+                        </div>
+
+                        {DetailArticleAvis && DetailArticleAvis.date_avis && <div className="blog_info_date">
+                            {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
+                        </div>}
+                        <div className="frame1_img">
+                            &nbsp;
+                        </div>
+                    </div>}
+
+                    {display_header_img && String(display_header_img) !== "0" && <div className="blog_info_with_img_displayed">
+                        <div className="blog_info_title">
+                            {DetailArticleAvis.title_formation}
+                        </div>
+
+                        {DetailArticleAvis && DetailArticleAvis.date_avis && <div className="blog_info_date">
+                            {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
+                        </div>}
+                        <div className="frame1_img">
+                            <img src={article_img} alt={pagecanoniktitle} className="frame1_img_class" />
+                        </div>
+                    </div>}
+
+                    {DetailArticleAvis && DetailArticleAvis.avis && <div className="blog_info_paragraphe">
+                        <div className="paragraphe_text">
+                            {parse(DetailArticleAvis.avis)}
+                        </div>
+                    </div>}
+
+                </div>
+
+            </div>
+
+            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
+                <div style={{ "width": '80%', margin: 'auto' }}>
+                    <div className="retour_list_articles" onClick={(e) => {
+                        e.preventDefault();
+                        window.location.href = "/elyos-support"
+                    }}>
+                        <FcUndo /> &nbsp; Retour vers le support
+                    </div>
+
+
+                </div>
+            </div>
+
+
+            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
+                <div style={{ "width": '80%', margin: 'auto' }}>
+                    <div className="a_decouvrir">
+                        À découvrir également
+                    </div>
+
+                    <div style={{ width: '100%', float: 'left' }}>
+
+                        {Get_3_Articles_result && Get_3_Articles_result.map((formation) => (
+                            <div style={{ width: '32%', float: 'left', }}>
+                                <New_Article_2025 article={JSON.parse(formation)} key={JSON.parse(formation).title_formation} />
+                            </div>
+
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
+                <div style={{ "width": '80%', margin: 'auto' }}>
+                    <div className="a_decouvrir">
+                        À découvrir également
+                    </div>
+
+                    <div style={{ width: '100%', float: 'left' }}>
+
+
+                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
+                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
+                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
+                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
+                                    How collaboration makes us better designers
+                                </div>
+                                <div style={{ width: '9%', float: 'right' }}>
+                                    <FcRightUp style={{}} />
+                                </div>
+
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
+                                Collaboration can make our teams stronger, and our individual designs better.
+                            </div>
+
+                        </div>
+
+                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
+                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
+                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
+                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
+                                    How collaboration makes us better designers
+                                </div>
+                                <div style={{ width: '9%', float: 'right' }}>
+                                    <FcRightUp style={{}} />
+                                </div>
+
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
+                                Collaboration can make our teams stronger, and our individual designs better.
+                            </div>
+
+                        </div>
+
+                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
+                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
+                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
+                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
+                                    How collaboration makes us better designers
+                                </div>
+                                <div style={{ width: '9%', float: 'right' }}>
+                                    <FcRightUp style={{}} />
+                                </div>
+
+                            </div>
+
+                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
+                                Collaboration can make our teams stronger, and our individual designs better.
+                            </div>
+
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+}
+
+export default New_C_Article_Help_2025_ARG;
+
diff --git a/src/components/New_C_Sign_In_2025.js b/src/components/New_C_Sign_In_2025.js
index c582f5d..359f3f0 100644
--- a/src/components/New_C_Sign_In_2025.js
+++ b/src/components/New_C_Sign_In_2025.js
@@ -139,7 +139,7 @@ function New_C_Sign_In_2025() {
     function Logout_Partenaire() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion compte PRO',
+            message: 'Confirmez la déconnexion compte PRO',
             buttons: [
                 {
                     label: 'Oui',
@@ -181,8 +181,8 @@ function New_C_Sign_In_2025() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/New_C_Sign_Up_2025.js b/src/components/New_C_Sign_Up_2025.js
index 795b3e6..0b7e6a2 100644
--- a/src/components/New_C_Sign_Up_2025.js
+++ b/src/components/New_C_Sign_Up_2025.js
@@ -138,7 +138,7 @@ function New_C_Sign_Up_2025() {
     function Logout_Partenaire() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion compte PRO',
+            message: 'Confirmez la déconnexion compte PRO',
             buttons: [
                 {
                     label: 'Oui',
@@ -180,8 +180,8 @@ function New_C_Sign_Up_2025() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/New_Sidebar_2025.js b/src/components/New_Sidebar_2025.js
index 3359ac3..9a85ca9 100644
--- a/src/components/New_Sidebar_2025.js
+++ b/src/components/New_Sidebar_2025.js
@@ -72,8 +72,8 @@ const New_SideBar_2025 = () => {
 
   function logout() {
     confirmAlert({
-      title: 'Deconnexion ?',
-      message: 'Confirmez la deconnexion',
+      title: 'Déconnexion ?',
+      message: 'Confirmez la déconnexion',
       buttons: [
         {
           label: 'Oui',
@@ -208,7 +208,7 @@ const New_SideBar_2025 = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -217,7 +217,7 @@ const New_SideBar_2025 = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -273,7 +273,7 @@ const New_SideBar_2025 = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -282,7 +282,7 @@ const New_SideBar_2025 = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -339,7 +339,7 @@ const New_SideBar_2025 = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -348,7 +348,7 @@ const New_SideBar_2025 = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
diff --git a/src/components/New_Sidebar_Client_Intranet_2025.js b/src/components/New_Sidebar_Client_Intranet_2025.js
index 639ee21..b9e8fc1 100644
--- a/src/components/New_Sidebar_Client_Intranet_2025.js
+++ b/src/components/New_Sidebar_Client_Intranet_2025.js
@@ -72,8 +72,8 @@ const New_Sidebar_Client_Intranet_2025 = () => {
 
   function logout() {
     confirmAlert({
-      title: 'Deconnexion ?',
-      message: 'Confirmez la deconnexion',
+      title: 'Déconnexion ?',
+      message: 'Confirmez la déconnexion',
       buttons: [
         {
           label: 'Oui',
@@ -208,7 +208,7 @@ const New_Sidebar_Client_Intranet_2025 = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -217,7 +217,7 @@ const New_Sidebar_Client_Intranet_2025 = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -273,7 +273,7 @@ const New_Sidebar_Client_Intranet_2025 = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -282,7 +282,7 @@ const New_Sidebar_Client_Intranet_2025 = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -339,7 +339,7 @@ const New_Sidebar_Client_Intranet_2025 = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -348,7 +348,7 @@ const New_Sidebar_Client_Intranet_2025 = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
diff --git a/src/components/New_Sidebar_ENT_Student_2025.js b/src/components/New_Sidebar_ENT_Student_2025.js
index 3faaeba..8fe37bc 100644
--- a/src/components/New_Sidebar_ENT_Student_2025.js
+++ b/src/components/New_Sidebar_ENT_Student_2025.js
@@ -90,8 +90,8 @@ const New_Sidebar_ENT_Student_2025 = () => {
 
   function logout() {
     confirmAlert({
-      title: 'Deconnexion ?',
-      message: 'Confirmez la deconnexion',
+      title: 'Déconnexion ?',
+      message: 'Confirmez la déconnexion',
       buttons: [
         {
           label: 'Oui',
@@ -260,14 +260,14 @@ const New_Sidebar_ENT_Student_2025 = () => {
           {typeof (stored_partner) !== "undefined" &&
             /* Connexion partner active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
 
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -290,14 +290,14 @@ const New_Sidebar_ENT_Student_2025 = () => {
           {typeof (stored_partner) !== "undefined" &&
             /* Connexion partner active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
 
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -334,14 +334,14 @@ const New_Sidebar_ENT_Student_2025 = () => {
           {typeof (stored_partner) !== "undefined" &&
             /* Connexion partner active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
 
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -366,14 +366,14 @@ const New_Sidebar_ENT_Student_2025 = () => {
           {typeof (stored_partner) !== "undefined" &&
             /* Connexion partner active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
 
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -413,14 +413,14 @@ const New_Sidebar_ENT_Student_2025 = () => {
           {typeof (stored_partner) !== "undefined" &&
             /* Connexion partner active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
 
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -442,14 +442,14 @@ const New_Sidebar_ENT_Student_2025 = () => {
           {typeof (stored_partner) !== "undefined" &&
             /* Connexion partner active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
 
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
diff --git a/src/components/PROD_100326/detail_formation_automatic_files/new_detail_formation_2025.js b/src/components/PROD_100326/detail_formation_automatic_files/new_detail_formation_2025.js
index 215b3d1..d6d2f78 100644
--- a/src/components/PROD_100326/detail_formation_automatic_files/new_detail_formation_2025.js
+++ b/src/components/PROD_100326/detail_formation_automatic_files/new_detail_formation_2025.js
@@ -1013,7 +1013,7 @@ const New_C_Detail_Formation_2025 = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -1039,7 +1039,7 @@ const New_C_Detail_Formation_2025 = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/PROD_230326/Display_Partner_Catalog_DetailClass_new_v2.js b/src/components/PROD_230326/Display_Partner_Catalog_DetailClass_new_v2.js
index 0bf6745..7bb4a1e 100644
--- a/src/components/PROD_230326/Display_Partner_Catalog_DetailClass_new_v2.js
+++ b/src/components/PROD_230326/Display_Partner_Catalog_DetailClass_new_v2.js
@@ -1121,7 +1121,7 @@ const Display_Partner_Catalog_DetailClass_new_v2 = (props) => {
   function part_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (pro)',
+      message: 'Confirmez la déconnexion (pro)',
       buttons: [
         {
           label: 'Oui',
@@ -1147,7 +1147,7 @@ const Display_Partner_Catalog_DetailClass_new_v2 = (props) => {
   function user_logout() {
     confirmAlert({
       title: '',
-      message: 'Confirmez la deconnexion (user)',
+      message: 'Confirmez la déconnexion (user)',
       buttons: [
         {
           label: 'Oui',
diff --git a/src/components/Partner.js b/src/components/Partner.js
index 0ced31f..49513b0 100644
--- a/src/components/Partner.js
+++ b/src/components/Partner.js
@@ -171,6 +171,11 @@ import { Presentation, CalendarDays } from "lucide-react";
 import { Landmark } from 'lucide-react';
 import { SquareSplitHorizontal } from 'lucide-react';
 import { Scale } from 'lucide-react';
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { IconButton } from '@material-ui/core';
 
 const menuData_Full = [
     {
@@ -205,7 +210,7 @@ const menuData_Full = [
 
             { label: "Catalogue", name: "Catalogue Init", icon: BookOpen, items_color: "#4F8CFF", },
             { label: "Unit. Ensei", name: "Unit. Ensei", icon: GraduationCap, items_color: "#4F8CFF" },
-            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal , items_color: "#4F8CFF" },
+            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal, items_color: "#4F8CFF" },
             { label: "Promotions", name: "Promotions", icon: Landmark, items_color: "#4F8CFF", },
             { label: "Notes & éval", name: "Notes & éval", icon: ClipboardList, items_color: "#4F8CFF", },
 
@@ -233,7 +238,7 @@ const menuData_Full = [
 
             { label: "Catalogue", name: "Catalogue Cont", icon: BookOpen, items_color: "#8B7CF6", },
             { label: "Modules", name: "Modules", icon: GraduationCap, items_color: "#8B7CF6", },
-            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal , items_color: "#8B7CF6" },
+            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal, items_color: "#8B7CF6" },
             { label: "Sessions", name: "Sessions", icon: Landmark, active: false, items_color: "#8B7CF6" },
 
         ],
@@ -373,7 +378,7 @@ const menuData_Ftion_Initiale = [
 
             { label: "Catalogue", name: "Catalogue Init", icon: BookOpen, items_color: "#4F8CFF", },
             { label: "Unit. Ensei", name: "Unit. Ensei", icon: GraduationCap, items_color: "#4F8CFF" },
-            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal , items_color: "#4F8CFF" },
+            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal, items_color: "#4F8CFF" },
             { label: "Promotions", name: "Promotions", icon: Landmark, items_color: "#4F8CFF", },
             { label: "Notes & éval", name: "Notes & éval", icon: ClipboardList, items_color: "#4F8CFF", },
 
@@ -391,7 +396,7 @@ const menuData_Ftion_Initiale = [
         ],
     },
 
-  
+
     {
         bloc_title: "Gestion",
         title: "Gestion",
@@ -516,7 +521,7 @@ const menuData_Ftion_Continue = [
             { label: "Emails", name: "Emails", icon: Mail, badge: 1, items_color: "#7FB069", },
         ],
     },
-  
+
 
     {
         bloc_title: "Ftion. Continue",
@@ -528,7 +533,7 @@ const menuData_Ftion_Continue = [
 
             { label: "Catalogue", name: "Catalogue Cont", icon: BookOpen, items_color: "#8B7CF6", },
             { label: "Modules", name: "Modules", icon: GraduationCap, items_color: "#8B7CF6", },
-            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal , items_color: "#8B7CF6" },
+            { label: "Caractéristiques", name: "Caractéristiques", icon: SquareSplitHorizontal, items_color: "#8B7CF6" },
             { label: "Sessions", name: "Sessions", icon: Landmark, active: false, items_color: "#8B7CF6" },
 
         ],
@@ -544,7 +549,7 @@ const menuData_Ftion_Continue = [
                 hasChildren: true,
                 children: [
                     { label: "Apprenants", name: "Apprenants" },
-                    { label: "Inscriptions", name: "Inscriptions", },                  
+                    { label: "Inscriptions", name: "Inscriptions", },
                     { label: "Grp Apprenants", name: "Grp Apprenants", },
                 ]
             },
@@ -619,9 +624,40 @@ const menuData_Ftion_Continue = [
 
 ];
 
+function PaperComponent(props) {
+    return (
+        <Draggable
+            handle="#draggable-dialog-title"
+            cancel={'[class*="MuiDialogContent-root"]'}
+        >
+            <Paper {...props} />
+        </Draggable>
+    );
+}
+
+const useStyles = makeStyles((theme) => ({
+
+    dialog: {
+        position: 'absolute',
+        // left: 10,
+        top: 400
+    },
+
+    paper: {
+        overflowY: 'unset',
+    },
+    customizedButton: {
+        position: 'absolute',
+        left: '98%',
+        top: '-3%',
+        backgroundColor: 'lightgray',
+        color: 'gray',
+    },
+}));
+
 const Partner = (props) => {
 
-
+    const classes = useStyles();
     const [class_is_ftion_initiale, setclass_is_ftion_initiale] = useState("");
     function macro_menu_function(local_menu) {
 
@@ -2191,8 +2227,8 @@ const Partner = (props) => {
 
     function logout() {
         confirmAlert({
-            title: 'Deconnexion ?',
-            message: 'Confirmez la deconnexion',
+            title: 'Déconnexion ?',
+            message: 'Confirmez la déconnexion',
             buttons: [
                 {
                     label: 'Oui',
@@ -2677,6 +2713,42 @@ const Partner = (props) => {
 
     const [open_menu_admin_plateforme, setopen_menu_admin_plateforme] = useState(false);
 
+    const [Dialog_deconnexion_open, setDialog_deconnexion_open] = React.useState(false);
+    const Dialog_deconnexion_handleClose = () => {
+
+        setDialog_deconnexion_open(false);
+    };
+
+    function part_logout_confirmation() {
+        /* si c'est une connexion partner qui est active */
+
+        if (typeof (stored_part) != "undefined") {
+            const stored_cookie = getCookie('tokenmysypart');
+            var acces_right_token_name = stored_cookie + "_uar";
+
+            setCookie_part("tokenmysypart", "", { path: '/' });
+            setCookie_part(acces_right_token_name, "", { path: '/' });
+            removeCookie_part(acces_right_token_name, { path: '/' });
+
+
+            setCookie_part("mysy_session_display_view", "", { path: '/' });
+            setCookie_part("mysy_menu_gauche_reduit", "", { path: '/' });
+            setCookie_part("mysy_catalog_data_row_grouped_by", "", { path: '/' });
+
+            removeCookie_part("tokenmysypart", { path: '/' });
+            removeCookie_part("mysy_session_display_view", { path: '/' });
+            removeCookie_part("mysy_menu_gauche_reduit", { path: '/' });
+            removeCookie_part("mysy_catalog_data_row_grouped_by", { path: '/' });
+
+
+        }
+        // setsomeoneconnected("0");
+        setDialog_deconnexion_open(false);
+        history.push("/recherche-formation");
+    }
+
+
+
     return (
 
         <div className="partner">
@@ -2725,6 +2797,77 @@ const Partner = (props) => {
                     </DialogActions>
                 </Dialog>
 
+
+                {/***   GESTION Déconnexion */}
+                <Dialog
+                    open={Dialog_deconnexion_open}
+                    // onClose={Dialog_1_handleClose}
+                    className="displaypartnersession"
+                    static
+                    onClose={() => null}
+
+                    PaperProps={{
+
+
+                        className: classes.paper, // Apply the paper style
+                        style: {
+                            overflowY: 'unset',
+                            position: 'absolute',
+                            top: '20rem',
+                            margin: "2px",
+                        },
+                    }}
+                    hideBackdrop={true}
+                    disableScrollLock
+                    classes={{
+                        paper: classes.dialog
+                    }}
+
+                    PaperComponent={PaperComponent}
+                    aria-labelledby="draggable-dialog-title"
+                >
+
+                    <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title" >MySy Information</DialogTitle>
+                    <DialogContent className="DialogContent_width">
+                        <DialogContentText>
+                            Confirmez la déconnexion  <br />
+
+                        </DialogContentText>
+
+                    </DialogContent>
+
+                    <DialogActions>
+
+                        <IconButton
+                            //autoFocus
+                            onClick={Dialog_1_handleClose_buton}
+                            color="primary"
+                            className={classes.customizedButton}
+                        >
+                            <CancelPresentationIcon />
+                        </IconButton>
+
+                        <div className="div_row">
+                            <div className="div_row_gauche">
+                                <Button
+
+                                    onClick={(e) => {
+                                        part_logout_confirmation();
+                                    }}
+
+                                    className="bton_enreg_dialog">Déconnexion</Button>
+                            </div>
+                            <div className="div_row_droite" style={{ "textAlign": 'center' }}>
+                                <Button onClick={Dialog_deconnexion_handleClose} className="bton_annule_dialog" >Annuler</Button>
+                            </div>
+                        </div>
+
+                    </DialogActions>
+                </Dialog>
+
+                {/***  Fin GESTION Déconnexion */}
+
+
                 { /********* Dialog redaction email */}
                 <Dialog
 
@@ -2917,7 +3060,7 @@ const Partner = (props) => {
                                                     setopen_menu_config_ftion_initale(!open_menu_config_ftion_initale);
                                                 }
 
-                                               
+
 
                                             }}
 
@@ -2931,7 +3074,7 @@ const Partner = (props) => {
                                                     {section.bloc_title === "Espace E-Learning" && <SlidersHorizontal size={15} style={{ color: `${section.menu_color}` }} />}
 
                                                     {section.bloc_title === "Config. Gle" && <SlidersHorizontal size={15} style={{ color: `${section.menu_color}` }} />}
-                                                 
+
                                                     <span className="menu-item-left">{section.title}</span>
 
                                                     {/** Mon compte */}
@@ -2998,7 +3141,7 @@ const Partner = (props) => {
                                                     </span>}
 
 
-                                                   
+
 
 
                                                 </div>
@@ -3009,7 +3152,7 @@ const Partner = (props) => {
                                                     <MenuItem_MySy item={item} key={itemIndex} />
                                                 ))}
                                             </div>}
-                                           
+
 
                                             {/** Gestion */}
                                             {section.bloc_title === "Gestion" && open_menu_gestion && <div className="section-items">
@@ -3049,7 +3192,7 @@ const Partner = (props) => {
                                             </div>}
 
 
-                                           
+
 
 
                                         </section>
@@ -3092,7 +3235,7 @@ const Partner = (props) => {
                                                     setopen_menu_config_ftion_initale(!open_menu_config_ftion_initale);
                                                 }
 
-                                               
+
 
                                             }}
 
@@ -3451,7 +3594,13 @@ const Partner = (props) => {
                                 <div className="sidebar-footer">
 
 
-                                    <button type="button" className="footer-link">
+                                    <button type="button" className="footer-link" onClick={(e) => {
+                                        e.preventDefault();
+                                        window.open(
+                                            "/elyos-support",
+                                            '_blank'
+                                        );
+                                    }}>
                                         <HelpCircle size={16} />
                                         <span>Aide</span>
                                     </button>
@@ -3466,7 +3615,9 @@ const Partner = (props) => {
                                         <Settings size={16} />
                                         <span>Paramètres</span>
                                     </button>
-                                    <button type="button" className="footer-link footer-link-danger">
+                                    <button type="button" className="footer-link footer-link-danger" onClick={(event) => {
+                                        setDialog_deconnexion_open(true);
+                                    }}>
                                         <LogOut size={16} />
                                         <span>Déconnexion</span>
                                     </button>
@@ -3520,7 +3671,7 @@ const Partner = (props) => {
                             </div>
                         }
 
-                         {String(menu) === "affichage_fi" && 
+                        {String(menu) === "affichage_fi" &&
                             <div className="div_droite">
 
                                 <PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
@@ -4521,23 +4672,23 @@ const Partner = (props) => {
                             <div className="div_droite div_droite_ralonge">
 
                                 <PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
-                                    class_external_code={orderid} class_internal_url={packs} 
+                                    class_external_code={orderid} class_internal_url={packs}
                                     check_user_acces_right={check_user_acces_right}
                                     partner_lms_virtualhost_url={partner_lms_virtualhost_url}
-                                    class_is_ftion_initiale={"1"} 
-                                    formation_initiale={"1"}/>
+                                    class_is_ftion_initiale={"1"}
+                                    formation_initiale={"1"} />
                             </div>
                         }
 
-                         {String(menu) === "affichage_fi" && 
+                        {String(menu) === "affichage_fi" &&
                             <div className="div_droite div_droite_ralonge">
 
                                 <PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
-                                    class_external_code={orderid} class_internal_url={packs} 
+                                    class_external_code={orderid} class_internal_url={packs}
                                     check_user_acces_right={check_user_acces_right}
                                     partner_lms_virtualhost_url={partner_lms_virtualhost_url}
-                                    class_is_ftion_initiale={"1"} 
-                                    formation_initiale={"1"}/>
+                                    class_is_ftion_initiale={"1"}
+                                    formation_initiale={"1"} />
                             </div>
                         }
 
@@ -4545,11 +4696,11 @@ const Partner = (props) => {
                             <div className="div_droite div_droite_ralonge">
 
                                 <PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
-                                    class_external_code={orderid} class_internal_url={packs} 
+                                    class_external_code={orderid} class_internal_url={packs}
                                     check_user_acces_right={check_user_acces_right}
                                     partner_lms_virtualhost_url={partner_lms_virtualhost_url}
-                                    class_is_ftion_initiale={"0"} 
-                                    formation_initiale={""}/>
+                                    class_is_ftion_initiale={"0"}
+                                    formation_initiale={""} />
                             </div>
                         }
 
diff --git a/src/components/PartnerSignIn.js b/src/components/PartnerSignIn.js
index c020c53..f754047 100644
--- a/src/components/PartnerSignIn.js
+++ b/src/components/PartnerSignIn.js
@@ -39,7 +39,7 @@ function PartnerSignIn() {
     function Logout_Partenaire() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion partenaire',
+            message: 'Confirmez la déconnexion partenaire',
             buttons: [
                 {
                     label: 'Oui',
@@ -93,8 +93,8 @@ function PartnerSignIn() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur zzz',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur zzz',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/PartnerSignInFirst.js b/src/components/PartnerSignInFirst.js
index f887856..5251e64 100644
--- a/src/components/PartnerSignInFirst.js
+++ b/src/components/PartnerSignInFirst.js
@@ -63,8 +63,8 @@ function PartnerSignIn() {
 
     function Logout_Partenaire() {
         confirmAlert({
-            title: 'Deconnexion Partenaire ?',
-            message: 'Confirmez la deconnexion partenaire',
+            title: 'Déconnexion Partenaire ?',
+            message: 'Confirmez la déconnexion partenaire',
             buttons: [
                 {
                     label: 'Oui',
@@ -94,8 +94,8 @@ function PartnerSignIn() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/PartnerSignInSecond.js b/src/components/PartnerSignInSecond.js
index d1a3b2d..5118449 100644
--- a/src/components/PartnerSignInSecond.js
+++ b/src/components/PartnerSignInSecond.js
@@ -38,8 +38,8 @@ function PartnerSignIn() {
 
     function Logout_Partenaire() {
         confirmAlert({
-            title: 'Deconnexion Partenaire ?',
-            message: 'Confirmez la deconnexion partenaire',
+            title: 'Déconnexion Partenaire ?',
+            message: 'Confirmez la déconnexion partenaire',
             buttons: [
                 {
                     label: 'Oui',
@@ -69,8 +69,8 @@ function PartnerSignIn() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Partner_ARG_140326.js b/src/components/Partner_ARG_140326.js
index 5a1d9c3..77a47e3 100644
--- a/src/components/Partner_ARG_140326.js
+++ b/src/components/Partner_ARG_140326.js
@@ -1505,8 +1505,8 @@ const Partner_ARG_140326 = (props) => {
 
     function logout() {
         confirmAlert({
-            title: 'Deconnexion ?',
-            message: 'Confirmez la deconnexion',
+            title: 'Déconnexion ?',
+            message: 'Confirmez la déconnexion',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Partner_header_automatic_files/Partner_Header.jsx b/src/components/Partner_header_automatic_files/Partner_Header.jsx
index 587481b..2d29226 100644
--- a/src/components/Partner_header_automatic_files/Partner_Header.jsx
+++ b/src/components/Partner_header_automatic_files/Partner_Header.jsx
@@ -199,7 +199,7 @@ const Partner_Header = () => {
   return (
     <div className='partner_header_automatic_files'>
 
-      {/***   GESTION Deconnexion */}
+      {/***   GESTION Déconnexion */}
       <Dialog
         open={Dialog_1_open}
         // onClose={Dialog_1_handleClose}
@@ -231,7 +231,7 @@ const Partner_Header = () => {
         <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title" >MySy Information</DialogTitle>
         <DialogContent className="DialogContent_width">
           <DialogContentText>
-            Confirmez la deconnexion de l'Intranet<br />
+            Confirmez la déconnexion de l'Intranet<br />
 
 
           </DialogContentText>
@@ -262,7 +262,7 @@ const Partner_Header = () => {
 
                 }}
 
-                className="bton_enreg_dialog">Deconnexion</Button>
+                className="bton_enreg_dialog">Déconnexion</Button>
             </div>
             <div className="div_row_droite" style={{ "textAlign": 'center' }}>
               <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -272,7 +272,7 @@ const Partner_Header = () => {
         </DialogActions>
       </Dialog>
 
-      {/***  Fin GESTION Deconnexion */}
+      {/***  Fin GESTION Déconnexion */}
 
       <header className="header_new_2025">
         <div className="header-content">
@@ -325,7 +325,7 @@ const Partner_Header = () => {
 
             {String(someoneconnected) === String("1") && <div className="login-link hide_on_mobile" onClick={(e) => setDialog_1_open(true)}>
               <img src={Header_User} alt="User icon" className="user-icon hide_on_mobile" />
-              <span className='hide_on_mobile'>Deconnexion</span>
+              <span className='hide_on_mobile'>Déconnexion</span>
             </div>}
 
           </div>
diff --git a/src/components/RechercheArticles.js b/src/components/RechercheArticles.js
index d50e49d..07a4a7d 100644
--- a/src/components/RechercheArticles.js
+++ b/src/components/RechercheArticles.js
@@ -275,7 +275,7 @@ const RechercheArticles = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -342,7 +342,7 @@ const RechercheArticles = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -392,7 +392,7 @@ const RechercheArticles = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -453,7 +453,7 @@ const RechercheArticles = (props) => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                     style={{ "fontSize": "0.7rem" }} >Mon Compte</MenuItem>
                 <MenuItem onClick={PartnerMenu_Close} className="mymenu_item"
-                    style={{ "fontSize": "0.7rem" }} >Deconnexion</MenuItem>
+                    style={{ "fontSize": "0.7rem" }} >Déconnexion</MenuItem>
 
             </Menu>
 
@@ -471,7 +471,7 @@ const RechercheArticles = (props) => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                     style={{ "fontSize": "0.7rem" }}>Creation</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                    style={{ "fontSize": "0.7rem" }}>Deconnexion</MenuItem>
+                    style={{ "fontSize": "0.7rem" }}>Déconnexion</MenuItem>
             </Menu>
 
 
@@ -504,7 +504,7 @@ const RechercheArticles = (props) => {
                                     {String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
                                         style={{ "width": "25%" }} /> Connexion
                                     </button>}
-                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
+                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Déconnexion<img src={connect_green}
                                         style={{ "width": "25%" }} />
                                     </button>}
                                 </div>
diff --git a/src/components/RechercheArticles_new_v2.js b/src/components/RechercheArticles_new_v2.js
index ddfcdc3..3d871db 100644
--- a/src/components/RechercheArticles_new_v2.js
+++ b/src/components/RechercheArticles_new_v2.js
@@ -476,7 +476,7 @@ const RechercheArticles_new_v2 = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -543,7 +543,7 @@ const RechercheArticles_new_v2 = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -593,7 +593,7 @@ const RechercheArticles_new_v2 = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Recherche_Help_new_v2.js b/src/components/Recherche_Help_new_v2.js
new file mode 100644
index 0000000..7f76206
--- /dev/null
+++ b/src/components/Recherche_Help_new_v2.js
@@ -0,0 +1,3195 @@
+import React, { useRef, useState, useMemo, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import axios from "axios";
+import Article_Help from "./Article_Help";
+import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
+import { format } from 'date-fns'
+import moment from "moment";
+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 LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Fab from '@mui/material/Fab';
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import { useCookies } from "react-cookie";
+import connect_white from "../mysy_img/connect_white_v2.png";
+import connect_green from "../mysy_img/connect_green.png";
+import { BsFillXCircleFill } from "react-icons/bs";
+import Fotter_v3 from "./Fotter_v3";
+import Popup from 'reactjs-popup';
+import { MdDeleteForever } from "react-icons/md";
+import 'reactjs-popup/dist/index.css';
+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 EditIcon from '@mui/icons-material/Edit';
+import SendIcon from '@mui/icons-material/Send';
+import { Editor } from '@tinymce/tinymce-react';
+import fr from 'date-fns/locale/fr';
+import { registerLocale } from 'react-datepicker';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { FcInfo } from "react-icons/fc";
+import 'react-tooltip/dist/react-tooltip.css'
+import { Tooltip } from 'react-tooltip'
+import Checkbox from '@mui/material/Checkbox';
+
+
+import { FcPlus } from "react-icons/fc";
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+import { FcInternal } from "react-icons/fc";
+
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import { IconButton } from '@material-ui/core';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+
+
+
+function PaperComponent(props) {
+    return (
+        <Draggable
+            handle="#draggable-dialog-title"
+            cancel={'[class*="MuiDialogContent-root"]'}
+        >
+            <Paper {...props} />
+        </Draggable>
+    );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+    dialog: {
+        position: 'absolute',
+        // left: 10,
+        top: 400
+    },
+
+    paper: {
+        overflowY: 'unset',
+    },
+    customizedButton: {
+        position: 'absolute',
+        left: '98%',
+        top: '-3%',
+        backgroundColor: 'lightgray',
+        color: 'gray',
+    },
+}));
+
+
+
+let PageSize = 5;
+const Recherche_Help_new_v2 = (props) => {
+    const classes = useStyles();
+    const [userconnected, setuserconnected] = useState("");
+    const [SearchText, setSearchText] = useState("");
+    const [result, setResult] = useState("");
+    const [myApiResponse, setmyApiResponse] = useState("false");
+    const [displayAllClasses, setdisplayAllClasses] = useState(true);
+    const [showelement, setshowelement] = useState("init");
+    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 [currentPage, setCurrentPage] = useState(1);
+    const [currentPage2, setCurrentPage2] = useState(1);
+    const [fin, setfin] = useState(0);
+    const [ismobilephone, setismobilephone] = useState();
+    const [TrainingDistanciel, setTrainingDistanciel] = useState();
+
+
+    const stored_user = getCookie('tokenmysych');
+    const history = useHistory();
+
+
+    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) => {
+        const formData = new FormData();
+        //await sleep(20);
+        formData.append('search_text', data.name);
+        formData.append('name', data.name);
+        formData.append('surname', data.surname);
+        formData.append('email', data.email);
+        formData.append('pwd', data.pwd);
+        const res = await fetch(
+            url,
+            {
+                method: "POST",
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json'
+                    // 'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                redirect: 'follow',
+                referrerPolicy: 'no-referrer',
+                body: formData,
+            }
+        );
+        const results = await res.json();
+        //console.log(results);
+    };
+
+    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");
+        }
+        else if (showelement == "false") {
+            setshowelement("true");
+        }
+
+
+    }
+
+    function clearsearchtext(event) {
+        setSearchText("");
+        document.getElementById("SearchText").value = "";
+    }
+
+
+    function SearchTextHandle(event) {
+        setSearchText(event.target.value);
+    }
+
+
+
+    function displayAllClassesHandle(event) {
+
+        setdisplayAllClasses(event.target.checked);
+        if (event.target.checked == true)
+            document.getElementById("SearchText").disabled = true;
+        else
+            document.getElementById("SearchText").disabled = false;
+    }
+
+
+    const [get_all_articles_avis_api, setget_all_articles_avis_api] = useState();
+    const [get_all_articles_avis_message, setget_all_articles_avis_message] = useState();
+    const [get_all_articles_avis_result, setget_all_articles_avis_result] = useState([]);
+    function get_all_articles_avis(e) {
+
+        var token = "";
+        if (typeof (stored_user) != "undefined") {
+            token = stored_user
+        }
+
+
+        var form = new FormData();
+        form.append("search_text", SearchText);
+        form.append("token", token);
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        var myurl = ""
+
+        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_help_article/";
+
+        axios.post(myurl, form).then(res => {
+            if (String(res.data.status) != String("false")) {
+                //console.log(" In get_all_articles_avis  res.data.status = " + res.data.status);
+                //console.log(" In get_all_articles_avis  res.data.message = " + res.data.message);
+                setget_all_articles_avis_api(res.data.status);
+                setget_all_articles_avis_result(res.data.message);
+                setmyApiResponse("True");
+                setResult(res.data.message)
+
+            }
+            else {
+                //console.log(" In test  res.data.status = " + res.data.status);
+                //console.log(" In test  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+                setget_all_articles_avis_api(res.data.status);
+                setget_all_articles_avis_message(res.data.message);
+                //setmyApimyApiMessage("")
+            }
+
+
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+            setget_all_articles_avis_api("False");
+            //setmyApimyApiMessage("")
+        })
+    }
+
+
+    const [New_get_all_published_articles_avis_result_With_Image_Or_Video, setNew_get_all_published_articles_avis_result_With_Image_Or_Video] = useState([]);
+
+    const [get_all_published_articles_avis_api, setget_all_published_articles_avis_api] = useState();
+    const [get_all_published_articles_avis_message, setget_all_published_articles_avis_message] = useState();
+    const [get_all_published_articles_avis_result, setget_all_published_articles_avis_result] = useState([]);
+    function get_all_published_articles_avis(e) {
+
+        var token = "";
+        if (typeof (stored_user) != "undefined") {
+            token = stored_user
+        }
+
+
+        var form = new FormData();
+        form.append("search_text", SearchText);
+        form.append("token", token);
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        var myurl = ""
+
+        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_published_help_article/";
+
+        axios.post(myurl, form).then(res => {
+            if (String(res.data.status) != String("false")) {
+                //console.log(" In get_all_published_articles_avis  res.data.status = " + res.data.status);
+                console.log(" In get_all_published_articles_avis  res.data.message = " + res.data.message);
+                setget_all_published_articles_avis_api(res.data.status);
+                setget_all_published_articles_avis_result(res.data.message);
+                setmyApiResponse("True");
+
+                var new_data2 = [];
+                const new_data = res.data.message.map((x) => {
+
+                    //---
+                    var video_path = JSON.parse(x).video_path;
+                    var img_path = JSON.parse(x).img_path;
+                    if ((video_path && video_path.length > 10) ||
+                        (img_path && img_path.length > 10)
+                    ) {
+                        new_data2.push(x)
+                    }
+
+                });
+
+                if (new_data2.length > 0)
+                    setNew_get_all_published_articles_avis_result_With_Image_Or_Video(new_data2);
+                else
+                    setNew_get_all_published_articles_avis_result_With_Image_Or_Video([]);
+
+
+            }
+            else {
+                //console.log(" In test  res.data.status = " + res.data.status);
+                //console.log(" In test  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+                setget_all_published_articles_avis_api(res.data.status);
+                setget_all_published_articles_avis_message(res.data.message);
+                //setmyApimyApiMessage("")
+            }
+
+
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+            setget_all_published_articles_avis_api("False");
+            //setmyApimyApiMessage("")
+        })
+    }
+
+
+
+    const [get_all_non_published_articles_avis_api, setget_all_non_published_articles_avis_api] = useState();
+    const [get_all_non_published_articles_avis_message, setget_all_non_published_articles_avis_message] = useState();
+    const [get_all_non_published_articles_avis_result, setget_all_non_published_articles_avis_result] = useState([]);
+    function get_all_non_published_articles_avis(e) {
+
+        var token = "";
+        if (typeof (stored_user) != "undefined") {
+            token = stored_user
+        }
+
+
+        var form = new FormData();
+        form.append("search_text", SearchText);
+        form.append("token", token);
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        var myurl = ""
+
+        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_non_published_help_article/";
+
+        axios.post(myurl, form).then(res => {
+            if (String(res.data.status) != String("false")) {
+                //console.log(" In get_all_non_published_articles_avis  res.data.status = " + res.data.status);
+                //console.log(" In get_all_non_published_articles_avis  res.data.message = " + res.data.message);
+                setget_all_non_published_articles_avis_api(res.data.status);
+                setget_all_non_published_articles_avis_result(res.data.message);
+                setmyApiResponse("True");
+
+
+            }
+            else {
+                //console.log(" In test  res.data.status = " + res.data.status);
+                //console.log(" In test  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+                setget_all_non_published_articles_avis_api(res.data.status);
+                setget_all_non_published_articles_avis_message(res.data.message);
+                //setmyApimyApiMessage("")
+            }
+
+
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+            setget_all_non_published_articles_avis_api("False");
+            //setmyApimyApiMessage("")
+        })
+    }
+
+
+
+    const currentTableData2 = useMemo(() => {
+        if (result) {
+            const firstPageIndex = (currentPage2 - 1) * PageSize;
+            const lastPageIndex = firstPageIndex + PageSize;
+            setfin(1);
+            return result.slice(firstPageIndex, lastPageIndex);
+        }
+        else {
+            return [];
+            setfin(0);
+        }
+    }, [currentPage2]);
+
+
+    const [PartnerMenu, setPartnerMenu] = React.useState(null);
+    const [AccountMenu, setAccountMenu] = React.useState(null);
+
+    const [someoneconnected, setsomeoneconnected] = useState("0");
+    const [partnerconnected, setpartnerconnected] = useState("0");
+    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+
+    const stored_part = getCookie('tokenmysypart');
+
+
+    const [connected_user_article_avis_droit_modif, setconnected_user_article_avis_droit_modif] = useState("0");
+
+
+    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;
+            retrieve_user_acces_right();
+
+            //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;
+            retrieve_user_acces_right();
+
+
+            // 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 déconnexion (user)',
+            buttons: [
+                {
+                    label: 'Oui',
+                    onClick: () => user_logout_confirmation()
+                },
+                {
+                    label: 'Non',
+                    onClick: () => { return }
+                }
+            ]
+        });
+    }
+
+
+    const PartnerMenu_Close = () => {
+        setPartnerMenu(null);
+    };
+
+    const AccountMenu_Close = () => {
+        setAccountMenu(null);
+    };
+
+    const handlePartnerMenu = (event) => {
+        setPartnerMenu(event.currentTarget);
+    };
+
+    const handleAccountMenu = (event) => {
+        setAccountMenu(event.currentTarget);
+    };
+
+    const handleClose_Account = () => {
+        alert(" my account");
+        setAccountMenu(null);
+    };
+
+    const handleAccountConnexion = () => {
+        setAccountMenu(null);
+        history.push("/Connexion")
+    };
+
+    const handleMyAccount = () => {
+        setAccountMenu(null);
+        history.push("/mysy-user-account")
+    };
+
+    const handleAccountCreation = () => {
+        setAccountMenu(null);
+        history.push("/create_account")
+    };
+
+    const handlePartnerConnexion = () => {
+        setAccountMenu(null);
+        history.push("/PartnerLogin")
+    };
+
+    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 déconnexion (user)',
+            buttons: [
+                {
+                    label: 'Oui',
+                    onClick: () => user_logout_confirmation()
+                },
+                {
+                    label: 'Non',
+                    onClick: () => { return }
+                }
+            ]
+        });
+    }
+
+
+    const handleMyPartnerAccount = () => {
+        setAccountMenu(null);
+        history.push("/Partner")
+    };
+
+    const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
+    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: '/' });
+        }
+        history.push("/recherche-formation");
+    }
+
+    function part_logout() {
+        confirmAlert({
+            title: '',
+            message: 'Confirmez la déconnexion (pro)',
+            buttons: [
+                {
+                    label: 'Oui',
+                    onClick: () => part_logout_confirmation()
+                },
+                {
+                    label: 'Non',
+                    onClick: () => { return }
+                }
+            ]
+        });
+    }
+    const [ProduitMenu, setproduitMenu] = React.useState(null);
+    const [AvisMenu, setavisMenu] = React.useState(null);
+
+
+    const handleProduitMenu = (event) => {
+        setproduitMenu(event.currentTarget);
+    };
+
+    const handleProduitService = () => {
+        setproduitMenu(null);
+        history.push("/tarifs_produits_services/")
+    };
+
+    const handleQuisommesNousMenu = () => {
+        setproduitMenu(null);
+        history.push("/qui-sommes-nous/")
+    };
+
+    const ProduitMenu_Close = () => {
+        setproduitMenu(null);
+    };
+
+    function publiecatalogue() {
+        history.push("/Partner", { mysy_arg: 'partner' });
+    }
+
+    const handleFtionMenu = (event) => {
+        history.push("/")
+    };
+
+    useEffect(() => {
+        setdisplayAllClasses("true");
+        async function chloadfunction() {
+            if (document.getElementById('allelement')) {
+                document.getElementById("allelement").checked = true;
+            }
+            // document.getElementById("SearchText").disabled = true;
+
+        }
+        chloadfunction();
+        get_all_published_articles_avis();
+        whosisconnected();
+
+    }, []);
+
+
+
+    // Cette fonction recuperer les droits d'acces stocké en cookie
+    const [connected_user_access_right, setconnected_user_access_right] = React.useState([]);
+    function retrieve_user_acces_right() {
+        const stored_cookie = getCookie('tokenmysypart');
+
+        if (!stored_cookie || String(stored_cookie).trim() === "") {
+            history.push("/Connexion");
+            return;
+        }
+
+        var acces_right_token_name = stored_cookie + "_uar";
+        var acces_right_token_val = getCookie(acces_right_token_name, { path: '/' });
+
+        var tab_json_access_right = JSON.parse(acces_right_token_val);
+
+        setconnected_user_access_right(tab_json_access_right);
+
+
+        var article_avis_droit_ecriture_retval = check_user_acces_right_with_tab("article_avis", "write", tab_json_access_right);
+        if (article_avis_droit_ecriture_retval === 1) {
+            setconnected_user_article_avis_droit_modif("1");
+        } else {
+            setconnected_user_article_avis_droit_modif("0");
+        }
+
+
+    }
+
+    // check du droit d'acces de l'utilisateur
+    function check_user_acces_right(local_module, local_action) {
+
+        //console.log(" ### connected_user_access_right = ", connected_user_access_right);
+        //console.log(" #### check_user_acces_right = ", local_module, " --- local_action = ", local_action);
+
+        if (String(local_action) === "read") {
+            for (let i = 0; i < connected_user_access_right.length; i++) {
+                if (String(connected_user_access_right[i].module) === String(local_module)
+                    && String(connected_user_access_right[i].read) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else if (String(local_action) === "write") {
+            for (let i = 0; i < connected_user_access_right.length; i++) {
+                if (String(connected_user_access_right[i].module) === String(local_module)
+                    && String(connected_user_access_right[i].write) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else {
+            return 0;
+        }
+
+    }
+
+
+    // check du droit d'acces de l'utilisateur avec la table des droits
+    function check_user_acces_right_with_tab(local_module, local_action, tab_acces_right) {
+
+        //console.log(" ### connected_user_access_right = ", connected_user_access_right);
+        //console.log(" #### check_user_acces_right = ", local_module, " --- local_action = ", local_action);
+
+        if (String(local_action) === "read") {
+            for (let i = 0; i < tab_acces_right.length; i++) {
+                if (String(tab_acces_right[i].module) === String(local_module)
+                    && String(tab_acces_right[i].read) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else if (String(local_action) === "write") {
+            for (let i = 0; i < tab_acces_right.length; i++) {
+                if (String(tab_acces_right[i].module) === String(local_module)
+                    && String(tab_acces_right[i].write) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else {
+            return 0;
+        }
+
+    }
+
+
+
+
+    const [Dialog_article_avis_avis, setDialog_article_avis_avis] = React.useState(false);
+    const [Dialog_article_avis_open, setDialog_article_avis_open] = React.useState(false);
+    function Dialog_article_avis_handle_change_participant_session(avis) {
+        setDialog_article_avis_avis(avis);
+        setDialog_article_avis_open(true);
+    }
+
+    const Dialog_article_avis_handleClose = () => {
+
+    };
+
+    const Dialog_article_avis_handleClose_buton = () => {
+
+        setDialog_article_avis_open(false);
+        sethandleSubmission_img_article_message("");
+        setlogo_file_name("");
+        setimg_img_article_file("");
+        setimg_img_article_file2("");
+        clear_article_avis_fields();
+        setfield_texte_avis("");
+
+
+    };
+
+    function clear_article_avis_fields() {
+        setarticle_avis_title_formation("");
+        setarticle_avis_email("");
+        setarticle_avis_url_formation("");
+        setarticle_avis_sujet("");
+        setarticle_avis_avis("");
+        setis_data_changed("");
+        setarticle_avis_internal_url("");
+        setarticle_avis_display_header_img(false);
+        setarticle_avis_meta_description("");
+        setfield_texte_avis("");
+    }
+
+    const [article_avis_date_publication, setarticle_avis_date_publication] = useState(new Date().toLocaleDateString('fr-FR'));
+
+    const [article_avis_title_formation, setarticle_avis_title_formation] = React.useState("");
+    const [article_avis_email, setarticle_avis_email] = React.useState("");
+    const [article_avis_url_formation, setarticle_avis_url_formation] = React.useState("");
+    const [article_avis_sujet, setarticle_avis_sujet] = React.useState("");
+    const [article_avis_avis, setarticle_avis_avis] = React.useState("");
+    const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState("");
+    const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false);
+    const [article_avis_img_path, setarticle_avis_img_path] = React.useState("");
+    const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState("");
+    const [article_avis_video_path, setarticle_avis_video_path] = React.useState("");
+
+    function Add_Update_Article_Avis(e) {
+
+        clear_message();
+        setLoading(true);
+
+        var form = new FormData();
+
+        const stored_cookie = getCookie('tokenmysypart');
+        form.append("token", stored_cookie);
+        form.append("title_formation", article_avis_title_formation);
+        form.append("avis", field_texte_avis);
+        form.append("qualite", " --- ");
+        form.append("note", "---");
+
+        if (article_avis_internal_url && String(article_avis_internal_url).trim().length > 5) {
+            form.append("internal_url", article_avis_internal_url);
+        }
+
+        if (img_img_article_file2) {
+            form.append('File', img_img_article_file2);
+            form.append('img_file_name', img_img_article_file2.name);
+        }
+        else {
+            form.append('File', "");
+            form.append('img_file_name', "");
+        }
+
+        if (article_avis_date_publication.trim() === "") {
+            alert(" Vous devez saisir la date de naissance de l'apprenant");
+            return;
+        }
+
+        var formated_date_tmp = new Date(moment(article_avis_date_publication, "YYYY-MM-DD"));
+        var formated_date_final = moment(formated_date_tmp).format('DD/MM/YYYY');
+
+        form.append("date_publication", formated_date_final);
+
+
+        if (article_avis_display_header_img) {
+            form.append("display_header_img", "1");
+        } else {
+            form.append("display_header_img", "0");
+        }
+
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+        // Si une balise meta description n'est pas fourni, alors on lui donne le titre
+        var local_meta_description = "";
+        if (article_avis_meta_description) {
+            local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 200);
+        } else {
+            local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 200);
+        }
+        form.append("meta_description", local_meta_description);
+
+
+        //  console.log(" ## form = ", form);
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_help_article/";
+
+        setLoading(true);
+
+        axios.post(myurl, form).then(res => {
+            setLoading(false);
+            if (String(res.data.status) === String("false")) {
+                alert(res.data.message);
+            }
+
+            else if (String(res.data.status) === String("true")) {
+                alert(res.data.message);
+                Dialog_article_avis_handleClose_buton();
+                window.location.reload();
+
+            }
+            else {
+
+            }
+        }).catch((error) => {
+            setLoading(false);
+            console.warn('contact-nous  Not good man :( mysearchtext = ');
+        })
+
+
+    }
+
+
+
+    const editorRef_texte_avis = useRef(null);
+    const [editorRef_texte_avis_limite, seteditorRef_texte_avis] = useState(1000);
+    const [field_texte_avis, setfield_texte_avis] = useState("");
+    const [field_texte_avis_initial_value, setfield_texte_avis_initial_value] = useState("");
+
+    const [is_data_changed, setis_data_changed] = useState("");
+
+    const [editor_tochanged, seteditor_tochanged] = useState("");
+
+    function editor_keyup() {
+        setis_data_changed("1");
+    }
+
+
+    const New_Option_Filter = [
+        { "id": "published", "label": "Publié", "value": "published" },
+        { "id": "notpublished", "label": "Non Publié", "value": "notpublished" },
+        { "id": "all", "label": "Tout", "value": "all" },
+    ]
+
+    const [publish_status, setpublish_status] = useState("published");
+    const [isLoading, setLoading] = useState();
+
+    /**** Gestion image de l'article */
+
+    const [logo_file_name, setlogo_file_name] = useState();
+    const hiddenFileInput_logo = React.useRef(null);
+
+    const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState("");
+
+    const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState();
+    const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState();
+    const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState();
+
+
+    const [img_img_article_file, setimg_img_article_file] = useState();
+    const [img_bg_file, setimg_bg_file] = useState();
+
+    const [img_img_article_file2, setimg_img_article_file2] = useState();
+    const [img_bg_file2, setimg_bg_file2] = useState();
+
+    const handleSubmission_logo = event => {
+        clear_message();
+
+
+        const fileUploaded = event.target.files[0];
+        let file_size = event.target.files[0].size;
+        let file_type = event.target.files[0].type;
+
+        //console.log("file_size =  ", file_size, " file_type = ", file_type);
+        //console.log(" fileUploaded = ", fileUploaded);
+        if (file_size > 10000000) {
+            alert("Le fichier ne doit pas dépasser un 1 Méga octets");
+            return;
+        }
+
+
+        //image/png
+        if (String(file_type) !== "image/png" && String(file_type) !== "image/jpg" && String(file_type) !== "image/webp" &&
+            String(file_type) !== "image/jpeg") {
+            alert("Le fichier n'est pas au format PNG, String(file_type)" + String(file_type));
+            return;
+        }
+
+        setLoading(true);
+
+        var _URL = window.URL || window.webkitURL;
+        var file, img;
+        var img_height, img_width;
+
+        if ((file = event.target.files[0])) {
+            img = new Image();
+            var objectUrl = _URL.createObjectURL(file);
+            img.onload = function () {
+                img_height = this.height;
+                img_width = this.width;
+                _URL.revokeObjectURL(objectUrl);
+                console.log(" img_width = ", img_width, "  img_height = ", img_height)
+
+                if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1100 &&
+                    parseFloat(img_height) > 130 && parseFloat(img_height) < 1100) {
+                    //console.log(" img_height est = ", img_height, " < à 1500 ");
+
+                    // Verification que le nom du fichier est alpha numerique
+                    /*var regExp = /^[A-Za-z0-9]+$/;
+                    if (!regExp.test(event.target.files[0].name)) {
+               sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques");
+               sethandleSubmission_img_article_api("false");
+               setLoading(false);
+            
+               return
+                    }*/
+
+
+                    if (String(event.target.files[0].name).length > 50) {
+                        sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère");
+                        sethandleSubmission_img_article_api("false");
+                        setLoading(false);
+
+                        return
+                    }
+
+                    setlogo_file_name(event.target.files[0].name);
+                    setimg_img_article_file(URL.createObjectURL(event.target.files[0]));
+                    setimg_img_article_file2(event.target.files[0]);
+
+                } else {
+                    sethandleSubmission_img_article_message(" La taille de l'image est incorrecte.  Larg = " + String(img_width) + " px Long = " + String(img_height) + " px");
+                    sethandleSubmission_img_article_api("false");
+                    setLoading(false);
+                    return;
+                }
+
+                //console.log(" after img_width = ", img_width, "  after img_height = ", img_height)
+            };
+            img.src = objectUrl;
+
+        }
+        setLoading(false);
+    };
+
+    function clear_message() {
+        sethandleSubmission_img_article_message();
+        sethandleSubmission_img_article_api();
+    }
+
+
+    const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState();
+    const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState();
+    const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState();
+    function Send_img_article_Img() {
+        clear_message();
+        setLoading(true);
+        const formData = new FormData();
+        formData.append('File', img_img_article_file2);
+        //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+        const stored_cookie = getCookie('tokenmysypart');
+        formData.append("token", stored_cookie);
+
+        console.log(" ## le nom du fichier est : ", img_img_article_file2.name);
+
+        fetch(
+            process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/",
+            {
+                method: 'POST',
+                body: formData,
+            }
+        )
+            .then((response) => response.json())
+            .then((result) => {
+                //console.log('Success:', result['message']);
+
+                if (String(result['status']) === String("true")) {
+                    setSend_img_article_Img_api("true");
+                    alert(" La mise à jour du logo a été correctement effectuée. ");
+
+                } else if (String(result['status']) === String("Err_Connexion")) {
+                    alert('Erreur: ' + result['message']);
+                    history.push("/Connexion");
+                }
+
+                else {
+                    setSend_img_article_Img_api("false");
+                    setSend_img_article_Img_message(result['message']);
+                }
+                setLoading(false);
+
+            })
+            .catch((error) => {
+                console.error('Error:', result);
+                setSend_img_article_Img_api("false");
+                setSend_img_article_Img_message(result['message']);
+                setLoading(false);
+            });
+
+    }
+
+
+    const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState();
+    const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState();
+    const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState();
+    function Delete_img_article_Img() {
+        clear_message();
+
+
+        setLoading(true);
+
+
+        const formData = new FormData();
+
+        //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+        const stored_cookie = getCookie('tokenmysypart');
+        formData.append("token", stored_cookie);
+
+
+        fetch(
+            process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/",
+            {
+                method: 'POST',
+                body: formData,
+            }
+        )
+            .then((response) => response.json())
+            .then((result) => {
+                //console.log('Success:', result['message']);
+
+                if (String(result['status']) === String("true")) {
+                    setDelete_img_article_Img_api("true");
+                    setGetLms_Themes_img_article_Img('');
+                    alert(" Le logo a été correctement supprimé ");
+
+                } else if (String(result['status']) === String("Err_Connexion")) {
+                    alert('Erreur: ' + result['message']);
+                    history.push("/Connexion");
+                }
+
+                else {
+                    setDelete_img_article_Img_api("false");
+                    setDelete_img_article_Img_message(result['message']);
+                }
+                setLoading(false);
+
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                setDelete_img_article_Img_api("false");
+                setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo");
+                setLoading(false);
+            });
+
+    }
+
+    const changeHandler2_logo = (event) => {
+        clear_message();
+        hiddenFileInput_logo.current.click();
+    };
+
+    function Annule_img_article_img() {
+        clear_message();
+        setimg_img_article_file();
+        setimg_img_article_file2();
+        sethandleSubmission_img_article_message();
+        setSend_img_article_Img_api();
+        setSend_img_article_Img_message();
+        setlogo_file_name();
+    }
+
+    /***** Fin gestion de l'image de l'article */
+
+
+    function init_with_modele() {
+        var init_text = '<div style="font-family: DM Sans;     font-style: normal;     font-weight: 600;     font-size: 24px;     line-height: 28px;     color: #16274F;     text-align: left;     margin-bottom: 10px;">    \
+  1. Une solution complète et intégrée :</div> <div style="font-family: Inter;     font-style: normal;     font-weight: 400;     font-size: 20px;     line-height: 32px;     color: #4B5162;   \
+  margin-bottom: 2rem;">      Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la    \
+  planification des sessions jusqu\'à la facturation, en passant par le suivi des apprenants. <br />     Cette centralisation réduit les tâches administratives et optimise votre efficacité.<br />  \
+  Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la      planification des sessions jusqu\'à la facturation, en passant par le suivi \
+  des apprenants. Cette centralisation     réduit les tâches administratives et     optimise votre efficacité. </div>\
+  <div style="font-family:DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">\
+  2. Conformité avec les réglementations :</div> <div style="font-family: Inter; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; color: #4B5162; margin-bottom: 2rem;"> \
+  La solution est conçue pour répondre aux exigences légales, comme Qualiopi ou les obligations de suivi des     financements CPF. Vous êtes ainsi assuré de     rester conforme aux normes en vigueur. </div>\
+  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">    \
+  3. Liste numérotée </div> <ol style="margin-bottom: 2rem;">     <li>        \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word; margin-bottom: 10px;">    \
+  Renforcer la cr&eacute;dibilit&eacute; des &eacute;tablissements de formation. </div>     </li>     <li>        \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">      \
+  Assurer une meilleure qualit&eacute; des prestations de formation. </div>     </li>     <li>       \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">       \
+  Rendre les organismes &eacute;ligibles aux aides financi&egrave;res &nbsp; (par exemple, des OPCO ou             P&ocirc;le Emploi).</div>     </li> </ol> \
+  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;"> \
+  4. Liste bullet point </div> <ul style="margin-bottom: 2rem;">     <li>         \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">        \
+  MySy offre un module de gestion administrative permettant de centraliser tous les documents li&eacute;s aux             formations, y compris les conventions, convocations, programmes,\
+  et certificats de satisfaction.</div>     </li>     <li>       \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">            \
+  Gr&acirc;ce &agrave; des fonctionnalit&eacute;s telles que l\'import/export de donn&eacute;es en Excel et la             gestion automatis&eacute;e des documents,     \
+  les organismes peuvent facilement fournir des preuves de conformit&eacute; lors de l\'audit Qualiopi.</div>     </li> </ul> \
+  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">    \
+  5. Une solution complète et intégrée (suite):</div> <div style="font-family: Inter; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; color: #4B5162; margin-bottom: 2rem;">    \
+  Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la      planification des sessions jusqu\'à la facturation, en passant par \
+  le suivi des apprenants. <br />     Cette centralisation réduit les tâches administratives et optimise votre efficacité.<br /> </div>'
+
+        setfield_texte_avis(init_text);
+    }
+
+    const featuredArticles = [
+        {
+            id: 1,
+            title: "Signature électronique : sécuriser vos validations sans alourdir vos process",
+            excerpt:
+                "Découvrez comment fluidifier les signatures, fiabiliser les documents et accélérer la gestion administrative de vos dossiers.",
+            image:
+                "https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=1400&q=80",
+            category: "Administratif",
+            date: "28 nov. 2024",
+            readTime: "5 min",
+            featured: true,
+        },
+        {
+            id: 2,
+            title: "Optimiser le suivi qualité de vos actions de formation",
+            excerpt:
+                "Centralisez vos justificatifs, structurez vos preuves et gagnez en sérénité sur le suivi opérationnel.",
+            image:
+                "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1400&q=80",
+            category: "Qualité",
+            date: "23 nov. 2024",
+            readTime: "6 min",
+        },
+    ];
+
+    const articles = [
+        {
+            id: 3,
+            title: "Nouveautés Elyos : les évolutions à connaître",
+            excerpt:
+                "Un tour d’horizon des dernières améliorations produit pour gagner du temps sur vos tâches quotidiennes.",
+            image:
+                "https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?auto=format&fit=crop&w=1400&q=80",
+            category: "Produit",
+            date: "24 nov. 2024",
+            readTime: "3 min",
+        },
+        {
+            id: 4,
+            title: "Dossier apprenant : les bonnes pratiques pour éviter les oublis",
+            excerpt:
+                "Les réflexes à mettre en place pour fiabiliser vos pièces, évaluations, attestations et documents clés.",
+            image:
+                "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80",
+            category: "Conformité",
+            date: "20 nov. 2024",
+            readTime: "4 min",
+        },
+        {
+            id: 5,
+            title: "Automatiser les relances sans dégrader l’expérience utilisateur",
+            excerpt:
+                "Des relances mieux pensées, mieux ciblées, et beaucoup moins bricolées entre trois outils et deux cafés.",
+            image:
+                "https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1400&q=80",
+            category: "Automatisation",
+            date: "18 nov. 2024",
+            readTime: "4 min",
+        },
+        {
+            id: 6,
+            title: "Avant de contacter le support : les vérifications utiles",
+            excerpt:
+                "Quelques contrôles simples pour résoudre plus rapidement les demandes les plus fréquentes.",
+            image:
+                "https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=80",
+            category: "Aide",
+            date: "15 nov. 2024",
+            readTime: "2 min",
+        },
+        {
+            id: 7,
+            title: "Structurer vos processus administratifs pour gagner en fluidité",
+            excerpt:
+                "Une organisation plus lisible, des étapes plus claires, et moins de frictions dans vos parcours.",
+            image:
+                "https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1400&q=80",
+            category: "Organisation",
+            date: "12 nov. 2024",
+            readTime: "5 min",
+        },
+        {
+            id: 8,
+            title: "Traçabilité : comment mieux suivre les actions de formation",
+            excerpt:
+                "Consolidez vos preuves, clarifiez vos étapes et réduisez les zones floues dans vos dossiers.",
+            image:
+                "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1400&q=80",
+            category: "Traçabilité",
+            date: "09 nov. 2024",
+            readTime: "5 min",
+        },
+    ];
+
+    const categories = [
+        "Tous les articles",
+        "Produit",
+        "Qualité",
+        "Conformité",
+        "Administratif",
+        "Automatisation",
+        "Organisation",
+        "Traçabilité",
+        "Aide",
+    ];
+
+    const quickLinks = [
+        "Premiers pas sur Elyos",
+        "Gestion administrative",
+        "Suivi pédagogique",
+        "Documents & signatures",
+        "Marketplace",
+        "Compte & accès",
+    ];
+
+    const [Get_Partner_Article_Avis_Data_api, setGet_Partner_Article_Avis_Data_api] = useState();
+    const [Get_Partner_Article_Avis_Data_message, setGet_Partner_Article_Avis_Data_message] = useState();
+    const [Get_Partner_Article_Avis_Data_result, setGet_Partner_Article_Avis_Data_result] = useState();
+    function Get_Partner_Article_Avis_Data(local_article_id) {
+
+        var form = new FormData();
+        form.append("_id", local_article_id);
+
+        //console.log(" ## form = ", form);
+
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_help_article_from_id/";
+        setLoading(true);
+        axios.post(myurl, form).then(res => {
+            setLoading(false);
+            if (String(res.data.status) === "true") {
+                //console.log(" In Get_Partner_Article_Avis_Data  res.data.status = " + res.data.status);
+                console.log(" In Get_Partner_Article_Avis_Data  res.data.message r_class = " + res.data.message);
+                setGet_Partner_Article_Avis_Data_api("true");
+                setGet_Partner_Article_Avis_Data_result(res.data.message);
+
+                if (res.data.message.length > 0) {
+                    var mylocal_document = JSON.parse(res.data.message);
+
+                    if (mylocal_document.date_publication) {
+                        setarticle_avis_date_publication(moment((String(mylocal_document.date_publication)).substring(0, 10)).format('YYYY-MM-DD'));
+
+                        //console.log(" ### mylocal_document.date_publication = ", mylocal_document.date_publication);
+                    }
+
+                    if (mylocal_document.avis) {
+                        setarticle_avis_avis(mylocal_document.avis);
+                        setfield_texte_avis_initial_value(mylocal_document.avis);
+                        setfield_texte_avis(mylocal_document.avis);
+                    }
+                    else {
+                        setarticle_avis_avis("");
+                        setfield_texte_avis_initial_value("");
+                    }
+
+
+                    if (mylocal_document.internal_url)
+                        setarticle_avis_internal_url(mylocal_document.internal_url);
+
+                    setarticle_avis_display_header_img(false);
+                    if (mylocal_document.display_header_img && String(mylocal_document.display_header_img) === "1") {
+                        setarticle_avis_display_header_img(true);
+                    }
+
+
+
+                    if (mylocal_document.img_path) {
+                        setarticle_avis_img_path(mylocal_document.img_path);
+                        setimg_img_article_file(mylocal_document.img_path);
+                    } else {
+                        setarticle_avis_img_path("");
+                        setimg_img_article_file("");
+                    }
+
+
+                    if (mylocal_document.video_path) {
+                        setarticle_avis_video_path(mylocal_document.video_path);
+
+                    } else {
+                        setarticle_avis_video_path("");
+
+                    }
+
+
+                    if (mylocal_document.meta_description) {
+                        setarticle_avis_meta_description(mylocal_document.meta_description);
+                    } else {
+                        setarticle_avis_meta_description("");
+                    }
+
+
+                } else {
+                    alert(" Aucun article recuperé");
+                }
+
+
+            } else if (String(res.data.status) === String("Err_Connexion")) {
+                alert('Erreur: ' + res.data.message);
+                history.push("/Connexion");
+            }
+
+            else {
+                setGet_Partner_Article_Avis_Data_api("false");
+                setGet_Partner_Article_Avis_Data_message(res.data.message);
+                alert(res.data.message);
+            }
+
+        }).catch((error) => {
+            setLoading(false);
+            console.warn('Not good man :( Get_Partner_Article_Avis_Data = ', error);
+            setGet_Partner_Article_Avis_Data_api("false");
+            alert(" Impossible de recuperer les données de l'article");
+            //setmyApimyApiMessage("")
+        })
+    }
+
+    const [edit_article, setedit_article] = useState("");
+
+    const [Delete_Article_Avis_Data_api, setDelete_Article_Avis_Data_api] = useState();
+    const [Delete_Article_Avis_Data_message, setDelete_Article_Avis_Data_message] = useState();
+    const [Delete_Article_Avis_Data_result, setDelete_Article_Avis_Data_result] = useState();
+    function Delete_Article_Avis_Data(article_id) {
+
+        var form = new FormData();
+        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
+
+
+        const stored_cookie = getCookie('tokenmysypart');
+        form.append("token", stored_cookie);
+        form.append("_id", article_id);
+
+
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/delete_help_article_from_id/";
+        setLoading(true);
+        axios.post(myurl, form).then(res => {
+            setLoading(false);
+            //console.log(" In Delete_Article_Avis_Data  res.data.status = " + res.data.status);
+            //console.log(" In Delete_Article_Avis_Data  res.data.message r_class = " + res.data.message);
+
+            if (String(res.data.status) === String("true")) {
+                alert(res.data.message);
+                window.location.reload();
+            }
+            else {
+                setDelete_Article_Avis_Data_api("false");
+                setDelete_Article_Avis_Data_message(res.data.message);
+                alert(res.data.message);
+
+            }
+
+        }).catch((error) => {
+            setLoading(false);
+            console.warn('Delete_Article_Avis_Data : Not good man :( mysearchtext = ' + error);
+            setDelete_Article_Avis_Data_api("false");
+            alert(" Impossible de supprimer le document");
+        })
+    }
+
+
+
+    return (
+        <div style={{ width: "100%", float: "left" }}>
+
+
+            {/***   GESTION article */}
+            <Dialog
+                open={Dialog_article_avis_open}
+                //  onClose={Dialog_article_avis_handleClose}
+                className="displaypartnersession"
+                static
+                onClose={() => null}
+
+                PaperProps={{
+
+
+                    className: classes.paper, // Apply the paper style
+                    style: {
+                        overflowY: 'unset',
+                        position: 'absolute',
+                        top: '5rem',
+                        margin: "2px",
+                    },
+                }}
+                hideBackdrop={true}
+                disableScrollLock
+                classes={{
+                    paper: classes.dialog
+                }}
+
+                PaperComponent={PaperComponent}
+                aria-labelledby="draggable-dialog-title"
+            >
+
+                <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title">Votre article </DialogTitle>
+                <DialogContent className="DialogContent_width DialogContent_width_session_800px" >
+
+
+                    {String(is_data_changed) === String("1") && <div className="div_row_dialog">
+                        <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
+                    </div>}
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Titre </b>
+                        </div>
+                        <div className="div_row_dialog" >
+                            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                                <input
+                                    type='text'
+                                    name='name'
+                                    value={article_avis_title_formation}
+                                    onChange={(e) => {
+                                        setarticle_avis_title_formation(e.target.value);
+                                        setis_data_changed("1");
+                                    }}
+                                    className='disabled_style_width_100_percent'
+
+                                ></input>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            Url souhaitée
+                        </div>
+                        <div className="div_row_dialog" >
+                            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                                <input
+                                    type='text'
+                                    name='name'
+                                    value={article_avis_internal_url}
+                                    onChange={(e) => {
+                                        setarticle_avis_internal_url(e.target.value);
+                                        setis_data_changed("1");
+                                    }}
+                                    className='disabled_style_width_100_percent'
+
+                                ></input>
+                            </div>
+                        </div>
+                    </div>
+
+
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
+                            <b>   Date publication </b>
+                        </div>
+
+
+                        <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
+                            <DatePicker
+                                name="date_publication"
+                                id="date_publication"
+                                selected={new Date(moment(article_avis_date_publication, "YYYY-MM-DD"))}
+                                onChange={(date) => {
+                                    setarticle_avis_date_publication(format(date, 'yyyy-MM-dd'));
+                                    setis_data_changed("1");
+                                }
+                                }
+                                showTimeSelect={false}
+                                dateFormat="dd/MM/yyyy"
+                                className="disabled_style session_caract_Dialog_DatePicker"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
+                            <b>   Affiche image </b>
+                        </div>
+                        <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
+                            <Checkbox
+                                name="document_join_pdf"
+                                className="disabled_style session_caract_Dialog_DatePicker"
+                                checked={article_avis_display_header_img}
+                                onChange={(e) => {
+                                    setarticle_avis_display_header_img(e.target.checked);
+                                    setis_data_changed("1");
+                                }}
+
+                            />
+
+                        </div>
+                    </div>
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Image Url </b>
+                        </div>
+                        <div className="div_row_dialog" >
+
+                            <div className="div_row_dialog" >
+                                <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                                    <input
+                                        type='text'
+                                        name='img_url'
+                                        id='img_url'
+                                        disabled
+
+                                        className='disabled_style_width_100_percent'
+
+                                    ></input>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Image  </b>
+                        </div>
+
+                        <div className="div_row_dialog" >
+
+                            <div className="div_row">
+
+                                <nav className="koUpdateData" style={{ "color": "orange" }}>
+
+                                </nav>
+                                {logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
+                                <input type="file"
+                                    accept=".png, .jpg, .webp"
+                                    ref={hiddenFileInput_logo}
+                                    style={{ display: 'none' }}
+                                    name="liste_formation_file"
+                                    onChange={handleSubmission_logo}
+                                />
+
+                                {img_img_article_file && <nav> Fichier à importer : {img_img_article_file.name}  <br />
+                                    <nav style={{ maxWidth: '20rem', margin: 'auto' }}>
+                                        <img src={img_img_article_file} style={{ "width": "100%" }} />
+                                    </nav>
+
+
+                                    <br />
+                                </nav>}
+
+                                {String(Send_img_article_Img_api) === "true" && <div className="okUpdateData"> La mise à jour a été correctement faite</div>}
+                                {String(Send_img_article_Img_api) === "false" && <div className="koUpdateData"> {Send_img_article_Img_message}</div>}
+
+                                {String(handleSubmission_img_article_api) === "false" && <div className="koUpdateData"> {handleSubmission_img_article_message}</div>}
+
+
+
+                                <br />
+                                <Tooltip className="tooltip_css" id="tooltip_taille_img" />
+                                <a data-tooltip-id="tooltip_taille_img" data-tooltip-html=" <i> longueur  entre  200px et 1000px  et largeur entre 200px et 1000px, au format PNG ou JPG <br />
+           Le nom du fichier ne contient que des caractères alphanumériques, sans espaces </i>">
+                                    <Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
+                                        "background": "#c8cfd5",
+                                        "minWidth": "15rem", "color": "black", "width": "auto"
+                                    }}
+                                        id='menu_import_formation' name='menu_import_formation'>Choisir une image  &nbsp; <FcInfo style={{ fontSize: "14px" }} /> <br />
+
+                                    </Button>
+                                </a>
+                                <br />
+                            </div>
+
+
+
+                        </div>
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Meta description </b>
+                            <div className="div_row_dialog" >
+
+                                <TextField
+                                    maxRows={4}
+                                    minRows={3}
+                                    inputProps={{ maxLength: 200 }}
+                                    multiline
+                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
+
+                                    name="meta_description"
+                                    id="meta_description"
+
+                                    fullWidth
+
+                                    value={article_avis_meta_description}
+                                    onChange={(e) => {
+                                        setarticle_avis_meta_description(e.target.value);
+                                        setis_data_changed("1");
+                                    }
+                                    }
+
+
+                                />
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ with: '100%', float: 'left' }}>
+                            <div style={{ "textAlign": 'left', with: '65%', float: 'left' }}>
+                                <b> Texte Article </b>
+                            </div>
+                            <div style={{ "textAlign": 'right', with: '30%', paddingRight: '15px', cursor: 'pointer', float: 'right' }}
+                                onClick={(event) => {
+
+                                    if (field_texte_avis && String(field_texte_avis).length > 0) {
+                                        if (window.confirm("Vos modifications seront perdues, Confirmer-vous la réinitialisation du text ?")) {
+                                            init_with_modele();
+                                        }
+                                    } else {
+                                        init_with_modele();
+                                    }
+
+                                }}>
+                                Init <FcInternal style={{ fontSize: '14px' }} />
+                            </div>
+                        </div>
+                        <div className="div_row_dialog" >
+
+                            <Editor
+                                id="detail_document_principal"
+                                name="detail_document_principal"
+                                onInit={(evt, editor) => editorRef_texte_avis.current = editor}
+                                // initialValue={field_texte_avis}
+
+                                onKeyUp={editor_keyup}
+                                value={field_texte_avis}
+                                onEditorChange={(newValue, editor) => {
+                                    setfield_texte_avis(editorRef_texte_avis.current.getContent());
+
+                                }}
+                                init={{
+                                    resize: false,
+                                    height: 700,
+                                    menubar: true,
+
+                                    plugins: [
+                                        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace',
+                                        'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount',
+                                        'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
+
+                                    ],
+                                    toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
+                                        'alignleft aligncenter alignright alignjustify | ' +
+                                        'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
+
+                                    content_style: 'body { font-family:DM Sans,sans-serif; font-size:14px; }'
+                                }}
+                            />
+
+                        </div>
+
+                        {String(is_data_changed) === String("1") && <div className="div_row_dialog">
+                            <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
+                        </div>}
+
+                    </div>
+
+
+
+                </DialogContent>
+
+                <DialogActions>
+
+                    <IconButton
+                        autoFocus
+                        onClick={Dialog_article_avis_handleClose_buton}
+                        color="primary"
+                        className={classes.customizedButton}
+                    >
+                        <CancelPresentationIcon />
+                    </IconButton>
+
+
+                    <div className="div_row">
+                        <div className="div_row_gauche">
+                            <Button onClick={Dialog_article_avis_handleClose_buton} className="bton_annule_dialog" >Fermer</Button>
+                        </div>
+                        <div className="div_row_droite" style={{ "textAlign": 'center' }}>
+                            <Button onClick={Add_Update_Article_Avis} className="bton_enreg_dialog">Envoyer&nbsp; <SendIcon /></Button>
+
+                        </div>
+                    </div>
+
+                </DialogActions>
+
+
+            </Dialog>
+            {/***  FIN GESTION article */}
+
+
+            <div className="recherchearticles_new_v2_style">
+                <Helmet>
+                    <meta name="title" content={"Le blog, liste des articles"} />
+                    <meta name="description" content="Le blog, liste des articles. Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser l’audit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé. Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code),  QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF).  Nos options comme la signature électronique sont inclus dans le tarif de base." />
+                    <meta name="robots" content="index,follow" />
+                    <link rel="canonical" href={window.location.href} />
+
+
+                </Helmet>
+
+                <main>
+                    <section className="support-hero-premium">
+                        <div className="elyos-container support-hero-premium__grid">
+                            <div className="support-hero-premium__content">
+
+                                <h1>
+                                    Centre de support
+                                    <br />
+                                    Elyos
+                                </h1>
+
+                                <p>
+                                    Retrouvez les articles, guides et ressources utiles pour mieux
+                                    utiliser Elyos, fluidifier vos processus et avancer plus
+                                    sereinement au quotidien.
+                                </p>
+
+                                <div className="support-search-premium">
+                                    <div className="support-search-premium__icon">⌕</div>
+                                    <input
+                                        type="text"
+                                        placeholder="Rechercher un article, une fonctionnalité, une thématique..."
+                                    />
+                                    <button>Rechercher</button>
+                                </div>
+
+                                <div className="support-tags">
+                                    {categories.slice(0, 6).map((tag) => (
+                                        <button key={tag} className="support-tag">
+                                            {tag}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+
+
+                        </div>
+                    </section>
+
+                    <section className="support-main-section">
+                        <div className="elyos-container support-layout">
+
+
+                            <div className="support-content-area">
+                                <div className="support-section-title">
+                                    <div>
+                                        <span className="support-section-title__eyebrow">
+                                            À la une
+                                        </span>
+                                        <h2>Articles mis en avant</h2>
+                                    </div>
+                                    <a href="/" className="support-inline-link">
+                                        Voir tous les articles
+                                    </a>
+                                </div>
+
+                                <div className="featured-grid">
+                                    {featuredArticles.map((article, index) => (
+                                        <article
+                                            className={`featured-card ${index === 0 ? "featured-card--large" : ""
+                                                }`}
+                                            key={article.id}
+                                        >
+                                            <div className="featured-card__image-wrap">
+                                                <img src={article.image} alt={article.title} />
+                                                <span className="featured-card__category">
+                                                    {article.category}
+                                                </span>
+                                            </div>
+
+                                            <div className="featured-card__body">
+                                                <div className="featured-card__meta">
+                                                    <span>{article.date}</span>
+                                                    <span>•</span>
+                                                    <span>{article.readTime}</span>
+                                                </div>
+
+                                                <h3>{article.title}</h3>
+                                                <p>{article.excerpt}</p>
+
+                                                <a href="/" className="featured-card__link">
+                                                    Lire l’article <span>→</span>
+                                                </a>
+                                            </div>
+
+                                            {connected_user_article_avis_droit_modif === "1" && <div style={{ "width": "100%", "float": "left" }} onClick={(e) => {
+                                                e.preventDefault();
+
+                                            }}>
+                                                <nav style={{
+                                                    "width": "40%", "float": "left", "textAlign": "left", "paddingLeft": "2px", "paddingRight": "2px",
+                                                }}
+                                                >
+
+
+                                                    <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+                                                        setarticle_avis_title_formation(article.title_formation);
+                                                        // setarticle_avis_avis(props.article.avis);
+                                                        // setfield_texte_avis_initial_value(props.article.avis);
+                                                        setarticle_avis_date_publication(moment((String(article.date_avis)).substring(0, 10)).format('YYYY-MM-DD'))
+
+                                                        Get_Partner_Article_Avis_Data(article._id);
+                                                        setedit_article("1");
+                                                        setis_data_changed("");
+                                                        setDialog_article_avis_open(true);
+
+                                                    }}>
+                                                        <Fab size="small" color="primary" aria-label="edit" variant="extended">
+                                                            <EditIcon />
+                                                        </Fab>
+                                                    </Box> </nav>
+
+
+                                                <nav style={{ "width": "40%", "float": "right", "textAlign": "right", "paddingLeft": "2px", "paddingRight": "2px" }} >
+                                                    <Popup
+                                                        trigger={
+                                                            <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+
+
+                                                            }}>
+                                                                <Fab size="small" color="warning" aria-label="edit" variant="extended">
+                                                                    <MdDeleteForever />
+                                                                </Fab>
+                                                            </Box>
+                                                        }
+                                                        modal
+                                                        nested
+                                                        position="center center"
+                                                    >
+                                                        {close => (
+                                                            <div>
+                                                                <button className="gest_close" onClick={close}>
+                                                                    &times;
+                                                                </button>
+                                                                <div className="gest_header"> MySy Information </div>
+                                                                <div className="gest_content">
+                                                                    {' '}
+
+                                                                    En confirmant cette opération, le document sera <i><font color="red"> définitivement supprimé</font></i>. <br />
+
+                                                                </div>
+                                                                <div className="gest_actions">
+                                                                    <div style={{ "width": "45%", "float": "left" }}>
+                                                                        <button className="gest_bton_popup" onClick={(event) => {
+                                                                            Delete_Article_Avis_Data(props.article._id);
+                                                                            close();
+                                                                        }}> Valider </button>
+
+                                                                    </div>
+                                                                    <div style={{ "width": "45%", "float": "right" }}>
+                                                                        <button
+                                                                            className="gest_bton_popup"
+                                                                            onClick={() => {
+                                                                                console.log('modal closed ');
+                                                                                close();
+                                                                            }}
+                                                                        >
+                                                                            Annuler
+                                                                        </button>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        )}
+                                                    </Popup>
+                                                </nav>
+
+                                            </div>}
+
+
+                                        </article>
+                                    ))}
+                                </div>
+
+                                <div className="support-section-title support-section-title--spaced">
+                                    <div>
+                                        <span className="support-section-title__eyebrow">
+                                            Ressources
+                                        </span>
+                                        <h2>Articles récents</h2>
+                                    </div>
+                                </div>
+
+                                <div className="article-grid-premium">
+                                    {articles.map((article) => (
+                                        <article className="article-card-premium" key={article.id}>
+                                            <div className="article-card-premium__image-wrap">
+                                                <img src={article.image} alt={article.title} />
+                                                <span className="article-card-premium__category">
+                                                    {article.category}
+                                                </span>
+                                            </div>
+
+                                            <div className="article-card-premium__body">
+                                                <div className="article-card-premium__meta">
+                                                    <span>{article.date}</span>
+                                                    <span>•</span>
+                                                    <span>{article.readTime}</span>
+                                                </div>
+
+                                                <h3>{article.title}</h3>
+                                                <p>{article.excerpt}</p>
+
+                                                <a href="/" className="article-card-premium__link">
+                                                    En savoir plus <span>→</span>
+                                                </a>
+                                            </div>
+
+                                            {connected_user_article_avis_droit_modif === "1" && <div style={{ "width": "100%", "float": "left" }} onClick={(e) => {
+                                                e.preventDefault();
+
+                                            }}>
+                                                <nav style={{
+                                                    "width": "40%", "float": "left", "textAlign": "left", "paddingLeft": "2px", "paddingRight": "2px",
+                                                }}
+                                                >
+
+
+                                                    <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+                                                        setarticle_avis_title_formation(article.title_formation);
+                                                        // setarticle_avis_avis(props.article.avis);
+                                                        // setfield_texte_avis_initial_value(props.article.avis);
+                                                        setarticle_avis_date_publication(moment((String(article.date_avis)).substring(0, 10)).format('YYYY-MM-DD'))
+
+                                                        Get_Partner_Article_Avis_Data(article._id);
+                                                        setedit_article("1");
+                                                        setis_data_changed("");
+                                                        setDialog_article_avis_open(true);
+
+                                                    }}>
+                                                        <Fab size="small" color="primary" aria-label="edit" variant="extended">
+                                                            <EditIcon sx={{ pr: 1 }} />
+                                                        </Fab>
+                                                    </Box> </nav>
+
+
+                                                <nav style={{ "width": "40%", "float": "right", "textAlign": "right", "paddingLeft": "2px", "paddingRight": "2px" }} >
+                                                    <Popup
+                                                        trigger={
+                                                            <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+
+
+                                                            }}>
+                                                                <Fab size="small" color="warning" aria-label="edit" variant="extended">
+                                                                    <MdDeleteForever sx={{ pr: 1 }} />
+                                                                </Fab>
+                                                            </Box>
+                                                        }
+                                                        modal
+                                                        nested
+                                                        position="center center"
+                                                    >
+                                                        {close => (
+                                                            <div>
+                                                                <button className="gest_close" onClick={close}>
+                                                                    &times;
+                                                                </button>
+                                                                <div className="gest_header"> MySy Information </div>
+                                                                <div className="gest_content">
+                                                                    {' '}
+
+                                                                    En confirmant cette opération, le document sera <i><font color="red"> définitivement supprimé</font></i>. <br />
+
+                                                                </div>
+                                                                <div className="gest_actions">
+                                                                    <div style={{ "width": "45%", "float": "left" }}>
+                                                                        <button className="gest_bton_popup" onClick={(event) => {
+                                                                            Delete_Article_Avis_Data(article._id);
+                                                                            close();
+                                                                        }}> Valider </button>
+
+                                                                    </div>
+                                                                    <div style={{ "width": "45%", "float": "right" }}>
+                                                                        <button
+                                                                            className="gest_bton_popup"
+                                                                            onClick={() => {
+                                                                                console.log('modal closed ');
+                                                                                close();
+                                                                            }}
+                                                                        >
+                                                                            Annuler
+                                                                        </button>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        )}
+                                                    </Popup>
+                                                </nav>
+
+                                            </div>}
+
+
+                                        </article>
+                                    ))}
+                                </div>
+
+
+                                <div className="article-grid-premium">
+                                    {New_get_all_published_articles_avis_result_With_Image_Or_Video && New_get_all_published_articles_avis_result_With_Image_Or_Video.length > 0 &&
+                                        New_get_all_published_articles_avis_result_With_Image_Or_Video.map((article) => (
+                                            <article className="article-card-premium" key={article.id}>
+                                                <div className="article-card-premium__image-wrap">
+                                                    <img src={String(JSON.parse(article).img_path)} alt={JSON.parse(article).title_formation} />
+                                                    {JSON.parse(article).categorie && <span className="article-card-premium__category">
+                                                        {String(JSON.parse(article).categorie).substring(0, 20)}
+                                                    </span>}
+                                                </div>
+
+                                                <div className="article-card-premium__body">
+                                                    <div className="article-card-premium__meta">
+                                                        <span>{String(JSON.parse(article).date_avis).substring(0, 10)}</span>
+                                                        <span>•</span>
+                                                        <span>5 min</span>
+                                                    </div>
+
+                                                    <h3>{String(JSON.parse(article).title_formation).substring(0, 50)}</h3>
+                                                    <p>{String(JSON.parse(article).avis).substring(0, 100)}</p>
+
+                                                    <a href="/" className="article-card-premium__link" onClick={(e) => {
+                                                        e.preventDefault();
+                                                        window.location.href = "/display-article-support-elyos/" + `${JSON.parse(article).internal_url}`
+                                                    }}>
+                                                        En savoir plus <span>→</span>
+                                                    </a>
+                                                </div>
+
+                                                {connected_user_article_avis_droit_modif === "1" && <div style={{ "width": "100%", "float": "left" }} onClick={(e) => {
+                                                    e.preventDefault();
+
+                                                }}>
+                                                    <nav style={{
+                                                        "width": "40%", "float": "left", "textAlign": "left", "paddingLeft": "2px", "paddingRight": "2px",
+                                                    }}
+                                                    >
+
+
+                                                        <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+                                                            setarticle_avis_title_formation(JSON.parse(article).title_formation);
+                                                            // setarticle_avis_avis(props.article.avis);
+                                                            // setfield_texte_avis_initial_value(props.article.avis);
+                                                            setarticle_avis_date_publication(moment((String(JSON.parse(article).date_avis)).substring(0, 10)).format('YYYY-MM-DD'))
+
+                                                            Get_Partner_Article_Avis_Data(JSON.parse(article)._id);
+                                                            setedit_article("1");
+                                                            setis_data_changed("");
+                                                            setDialog_article_avis_open(true);
+
+                                                        }}>
+                                                            <Fab size="small" color="primary" aria-label="edit" variant="extended">
+                                                                <EditIcon />
+                                                            </Fab>
+                                                        </Box> </nav>
+
+
+                                                    <nav style={{ "width": "40%", "float": "right", "textAlign": "right", "paddingLeft": "2px", "paddingRight": "2px" }} >
+                                                        <Popup
+                                                            trigger={
+                                                                <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
+
+
+                                                                }}>
+                                                                    <Fab size="small" color="warning" aria-label="edit" variant="extended">
+                                                                        <MdDeleteForever />
+                                                                    </Fab>
+                                                                </Box>
+                                                            }
+                                                            modal
+                                                            nested
+                                                            position="center center"
+                                                        >
+                                                            {close => (
+                                                                <div>
+                                                                    <button className="gest_close" onClick={close}>
+                                                                        &times;
+                                                                    </button>
+                                                                    <div className="gest_header"> MySy Information </div>
+                                                                    <div className="gest_content">
+                                                                        {' '}
+
+                                                                        En confirmant cette opération, le document sera <i><font color="red"> définitivement supprimé</font></i>. <br />
+
+                                                                    </div>
+                                                                    <div className="gest_actions">
+                                                                        <div style={{ "width": "45%", "float": "left" }}>
+                                                                            <button className="gest_bton_popup" onClick={(event) => {
+                                                                                Delete_Article_Avis_Data(JSON.parse(article)._id);
+                                                                                close();
+                                                                            }}> Valider </button>
+
+                                                                        </div>
+                                                                        <div style={{ "width": "45%", "float": "right" }}>
+                                                                            <button
+                                                                                className="gest_bton_popup"
+                                                                                onClick={() => {
+                                                                                    console.log('modal closed ');
+                                                                                    close();
+                                                                                }}
+                                                                            >
+                                                                                Annuler
+                                                                            </button>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            )}
+                                                        </Popup>
+                                                    </nav>
+
+                                                </div>}
+
+
+                                            </article>
+                                        ))}
+                                </div>
+
+
+
+                            </div>
+                        </div>
+                    </section>
+                </main>
+
+
+                {/*<div className="div_mobile">
+
+                    <div className="div_row block_entete" >
+                        <div className="Background-header">
+
+                            <div className="Title">
+
+                                <div className="besoin_aide">
+                                    Support Elyos. Quelques articles pour vous.
+                                    <div className="detail_text_aide">
+                                        &nbsp;
+                                    </div>
+                                </div>
+
+                                <div className="barre_recherche">
+                                    <form onSubmit={handleSubmit(onSubmit)} className="div_005">
+                                        <div class="form">
+
+                                            <i class="fa fa-search"></i>
+
+                                            <input
+                                                type="text"
+                                                class="form-control form-input"
+                                                placeholder=" Texte (Titre, Description)"
+                                                onChange={SearchTextHandle}
+                                                id={"SearchText"}
+                                                name={"SearchText"}
+                                                style={{ "width": "80%", float: "left" }}
+                                            />
+                                            <nav style={{ "width": "15%", float: "left", paddingTop: "5px" }}>
+                                                {SearchText.length > 2 && <span_clear> <BsFillXCircleFill onClick={clearsearchtext} /> </span_clear>} <span class="left-pan" >
+                                                    &nbsp;<FaSearch onClick={get_all_articles_avis} /></span>
+                                            </nav>
+
+
+                                        </div>
+                                    </form>
+                                </div>
+
+                            </div>
+
+
+                        </div>
+
+                    </div>
+                    <div className="block_centrer">
+                        {connected_user_article_avis_droit_modif === "1" && <div className="div_row">
+                            <Button onClick={(e) => {
+                                var al = moment((new Date()));
+                                setarticle_avis_date_publication(moment(al).format('YYYY-MM-DD'));
+
+
+                                clear_article_avis_fields();
+                                setis_data_changed("");
+                                setDialog_article_avis_open(true);
+
+                            }}
+                                className="bton_enreg_dialog"> Ajouter 1 article &nbsp;&nbsp;
+                                <FcPlus style={{ fontSize: "20px" }} />
+                            </Button>
+                        </div>}
+
+                        {connected_user_article_avis_droit_modif === "1" && New_Option_Filter && New_Option_Filter.length > 0 && <Autocomplete
+                            disablePortal
+                            name="filtre1"
+                            id="filtre1"
+                            className="disabled_style"
+                            options={New_Option_Filter}
+                            defaultValue={{ id: "published", label: "Publié", value: "published" }}
+                            getOptionLabel={(option) => option.label}
+                            onChange={(event, value) => {
+                                if (value && value.value) {
+                                    setpublish_status(value.value);
+
+                                    if (value.value === "published") {
+                                        get_all_published_articles_avis();
+                                    } else if (value.value === "notpublished") {
+                                        get_all_non_published_articles_avis();
+                                    } else if (value.value === "all") {
+                                        get_all_articles_avis();
+                                    }
+                                }
+
+                            }}
+
+                            renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
+                                inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}
+
+                            />
+                            }
+                        />}
+
+                        <div className="liste_articles">
+
+                            {/*result && myApiResponse === "True" && <div className="okUpdateData">
+      <Pagination
+          className="pagination-bar"
+          currentPage={currentPage2}
+          totalCount={result.length}
+          pageSize={PageSize}
+          onPageChange={page => setCurrentPage2(page)}
+      />
+
+
+    </div>* /}
+
+                            {String(publish_status) === "all" && get_all_articles_avis_result && get_all_articles_avis_result.length > 0 && currentTableData2 && get_all_articles_avis_result.map((formation) => (
+                                <div className="block_article">
+                                    <Article_Help article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
+                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
+                                        get_all_articles_avis={get_all_articles_avis}
+
+                                    />
+                                </div>
+
+                            ))}
+
+                            {String(publish_status) === "published" && get_all_published_articles_avis_result && get_all_published_articles_avis_result.length > 0 && get_all_published_articles_avis_result.map((formation) => (
+                                <div className="block_article">
+                                    <Article_Help article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
+                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
+                                        get_all_articles_avis={get_all_articles_avis}
+
+                                    />
+                                </div>
+
+                            ))}
+
+                            {String(publish_status) === "notpublished" && get_all_non_published_articles_avis_result && get_all_non_published_articles_avis_result.length > 0 && get_all_non_published_articles_avis_result.map((formation) => (
+                                <div className="block_article">
+                                    <Article_Help article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
+                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
+                                        get_all_articles_avis={get_all_articles_avis}
+
+                                    />
+                                </div>
+
+                            ))}
+
+
+                            {/*result && <div>
+      <Pagination
+          className="pagination-bar"
+          currentPage={currentPage2}
+          totalCount={result.length}
+          pageSize={PageSize}
+          onPageChange={page => setCurrentPage2(page)}
+      />
+
+    </div>
+    * /}
+                        </div>
+
+                    </div>
+                </div>*/}
+            </div>
+
+            <style>{local_css}</style>
+        </div>
+    )
+}
+
+export default Recherche_Help_new_v2;
+
+
+const local_css = `
+:root {
+  --elyos-primary: #2f63e0;
+  --elyos-primary-dark: #234fb8;
+  --elyos-turquoise: #18c1b7;
+  --elyos-navy: #142b63;
+  --elyos-text: #1d2b4f;
+  --elyos-text-soft: #66728f;
+  --elyos-border: #e5eaf5;
+  --elyos-border-strong: #d8e1f0;
+  --elyos-bg: #f5f8fd;
+  --elyos-bg-soft: #f9fbff;
+  --elyos-white: #ffffff;
+
+  --shadow-soft: 0 12px 30px rgba(20, 43, 99, 0.07);
+  --shadow-medium: 0 18px 40px rgba(20, 43, 99, 0.1);
+  --shadow-strong: 0 28px 60px rgba(20, 43, 99, 0.14);
+
+  --radius-xxl: 28px;
+  --radius-xl: 24px;
+  --radius-lg: 18px;
+  --radius-md: 14px;
+
+  --container: 1320px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  background: var(--elyos-bg);
+  color: var(--elyos-text);
+  font-family: 'DM Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+body {
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.elyos-container {
+  width: min(var(--container), calc(100% - 40px));
+  margin: 0 auto;
+}
+
+/* HEADER */
+.elyos-header {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+  backdrop-filter: blur(14px);
+  background: rgba(255, 255, 255, 0.86);
+  border-bottom: 1px solid rgba(229, 234, 245, 0.9);
+}
+
+.elyos-header__inner {
+  min-height: 86px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 28px;
+}
+
+.elyos-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.elyos-brand__logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  color: white;
+  font-weight: 800;
+  font-size: 1.45rem;
+  background: linear-gradient(135deg, var(--elyos-turquoise), var(--elyos-primary));
+  box-shadow: 0 12px 24px rgba(47, 99, 224, 0.22);
+}
+
+.elyos-brand__text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1;
+}
+
+.elyos-brand__name {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--elyos-navy);
+}
+
+.elyos-brand__sub {
+  margin-top: 4px;
+  font-size: 0.84rem;
+  color: var(--elyos-text-soft);
+  font-weight: 600;
+}
+
+.elyos-nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 28px;
+}
+
+.elyos-nav a {
+  color: var(--elyos-text);
+  font-weight: 600;
+  position: relative;
+}
+
+.elyos-nav a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--elyos-primary), var(--elyos-turquoise));
+  transition: width 0.25s ease;
+}
+
+.elyos-nav a:hover::after {
+  width: 100%;
+}
+
+.elyos-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.elyos-btn {
+  height: 46px;
+  padding: 0 20px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  transition: all 0.22s ease;
+}
+
+.elyos-btn--secondary {
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid var(--elyos-border-strong);
+  color: var(--elyos-text);
+}
+
+.elyos-btn--secondary:hover {
+  transform: translateY(-1px);
+  border-color: #c8d3e7;
+  box-shadow: var(--shadow-soft);
+}
+
+.elyos-btn--primary {
+  color: white;
+  background: linear-gradient(135deg, var(--elyos-primary), #4b7dff);
+  box-shadow: 0 16px 28px rgba(47, 99, 224, 0.22);
+}
+
+.elyos-btn--primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 34px rgba(47, 99, 224, 0.28);
+}
+
+/* HERO */
+.support-hero-premium {
+  position: relative;
+  overflow: hidden;
+  padding: 54px 0 34px;
+  background:
+    radial-gradient(circle at 15% 20%, rgba(24, 193, 183, 0.12), transparent 24%),
+    radial-gradient(circle at 85% 15%, rgba(47, 99, 224, 0.14), transparent 24%),
+    linear-gradient(180deg, #f9fbff 0%, #f5f8fd 100%);
+}
+
+.support-hero-premium::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)),
+    repeating-linear-gradient(
+      90deg,
+      rgba(20, 43, 99, 0.02) 0,
+      rgba(20, 43, 99, 0.02) 1px,
+      transparent 1px,
+      transparent 120px
+    );
+  pointer-events: none;
+}
+
+.support-hero-premium__grid {
+
+}
+
+.support-hero-premium__content {
+  padding: 46px 0 26px;
+}
+
+.support-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  background: rgba(24, 193, 183, 0.1);
+  color: #0c7c74;
+  font-size: 0.92rem;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+}
+
+.support-hero-premium h1 {
+  margin: 20px 0 0;
+  max-width: 720px;
+  font-size: clamp(2.8rem, 4vw, 4.8rem);
+  line-height: 0.98;
+  letter-spacing: -0.05em;
+  color: var(--elyos-navy);
+  margin: auto;
+}
+
+.support-hero-premium p {
+  max-width: 760px;
+  margin: 22px 0 0;
+  font-size: 1.08rem;
+  line-height: 1.8;
+  color: var(--elyos-text-soft);
+  margin: auto;
+}
+
+.support-search-premium {
+  margin-top: 34px;
+  display: grid;
+  grid-template-columns: 56px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  min-height: 74px;
+  padding: 10px;
+  border: 1px solid rgba(216, 225, 240, 0.85);
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: var(--shadow-medium);
+  border-radius: 24px;
+  backdrop-filter: blur(10px);
+}
+
+.support-search-premium__icon {
+  height: 52px;
+  width: 52px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, rgba(24, 193, 183, 0.12), rgba(47, 99, 224, 0.12));
+  color: var(--elyos-navy);
+  font-size: 1.4rem;
+}
+
+.support-search-premium input {
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--elyos-text);
+  font-size: 1rem;
+}
+
+.support-search-premium button {
+  border: 0;
+  height: 52px;
+  padding: 0 20px;
+  border-radius: 18px;
+  cursor: pointer;
+  color: white;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--elyos-primary), #4f82ff);
+  box-shadow: 0 14px 24px rgba(47, 99, 224, 0.2);
+  transition: 0.2s ease;
+}
+
+.support-search-premium button:hover {
+  transform: translateY(-1px);
+}
+
+.support-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.support-tag {
+  border: 1px solid rgba(216, 225, 240, 0.9);
+  background: rgba(255, 255, 255, 0.78);
+  color: var(--elyos-text);
+  padding: 10px 15px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.support-tag:hover {
+  background: white;
+  border-color: #cad6ea;
+  transform: translateY(-1px);
+}
+
+/* HERO PANEL */
+.support-hero-premium__panel {
+  display: flex;
+  align-items: stretch;
+}
+
+.support-panel-card {
+  width: 100%;
+  padding: 24px;
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,249,255,0.98) 100%);
+  border: 1px solid rgba(216, 225, 240, 0.95);
+  box-shadow: var(--shadow-medium);
+}
+
+.support-panel-card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.support-panel-card__badge,
+.support-panel-card__pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 800;
+  padding: 8px 12px;
+}
+
+.support-panel-card__badge {
+  background: rgba(24, 193, 183, 0.12);
+  color: #0c7c74;
+}
+
+.support-panel-card__pill {
+  background: rgba(47, 99, 224, 0.1);
+  color: var(--elyos-primary);
+}
+
+.support-panel-card h3 {
+  margin: 18px 0 16px;
+  font-size: 1.45rem;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  color: var(--elyos-navy);
+}
+
+.support-panel-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.support-panel-list li + li {
+  margin-top: 10px;
+}
+
+.support-panel-list a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 50px;
+  padding: 0 14px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(229, 234, 245, 0.95);
+  font-weight: 600;
+  color: var(--elyos-text);
+  transition: all 0.2s ease;
+}
+
+.support-panel-list a:hover {
+  transform: translateX(2px);
+  background: white;
+  border-color: #d3ddee;
+}
+
+.support-panel-list a::after {
+  content: "→";
+  color: var(--elyos-primary);
+  font-weight: 700;
+}
+
+.support-panel-card__footer {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(229, 234, 245, 0.95);
+}
+
+.support-panel-card__footer a {
+  color: var(--elyos-primary);
+  font-weight: 700;
+}
+
+/* LAYOUT */
+.support-main-section {
+  padding: 24px 0 72px;
+}
+
+.support-layout {
+}
+
+.support-sidebar {
+  position: sticky;
+  top: 108px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.support-sidebar__card {
+  padding: 22px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(229, 234, 245, 0.95);
+  box-shadow: var(--shadow-soft);
+}
+
+.support-sidebar__card h3 {
+  margin: 0 0 14px;
+  font-size: 1.1rem;
+  color: var(--elyos-navy);
+}
+
+.support-sidebar__links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.support-sidebar__links a {
+  padding: 11px 12px;
+  border-radius: 14px;
+  color: var(--elyos-text);
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.support-sidebar__links a:hover {
+  background: #f5f8ff;
+  color: var(--elyos-primary);
+}
+
+.support-sidebar__card--highlight {
+  background:
+    radial-gradient(circle at top right, rgba(24, 193, 183, 0.1), transparent 28%),
+    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
+}
+
+.support-sidebar__mini {
+  display: inline-block;
+  margin-bottom: 10px;
+  font-size: 0.84rem;
+  font-weight: 800;
+  color: var(--elyos-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.support-sidebar__card--highlight p {
+  margin: 0 0 14px;
+  color: var(--elyos-text-soft);
+  line-height: 1.7;
+}
+
+.support-inline-link {
+  color: var(--elyos-primary);
+  font-weight: 700;
+}
+
+.support-content-area {
+  min-width: 0;
+}
+
+/* TITLES */
+.support-section-title {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.support-section-title--spaced {
+  margin-top: 34px;
+}
+
+.support-section-title__eyebrow {
+  display: inline-block;
+  margin-bottom: 8px;
+  color: var(--elyos-primary);
+  font-size: 0.84rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.support-section-title h2 {
+  margin: 0;
+  font-size: 2rem;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--elyos-navy);
+}
+
+/* FEATURED */
+.featured-grid {
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  gap: 22px;
+}
+
+.featured-card {
+  overflow: hidden;
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(229, 234, 245, 0.95);
+  box-shadow: var(--shadow-medium);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.featured-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-strong);
+}
+
+.featured-card__image-wrap {
+  position: relative;
+  height: 260px;
+  overflow: hidden;
+}
+
+.featured-card--large .featured-card__image-wrap {
+  height: 320px;
+}
+
+.featured-card__image-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.35s ease;
+}
+
+.featured-card:hover .featured-card__image-wrap img {
+  transform: scale(1.04);
+}
+
+.featured-card__category {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--elyos-navy);
+  font-size: 0.82rem;
+  font-weight: 800;
+  backdrop-filter: blur(8px);
+}
+
+.featured-card__body {
+  padding: 24px;
+}
+
+.featured-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--elyos-text-soft);
+  font-size: 0.92rem;
+  margin-bottom: 12px;
+}
+
+.featured-card h3 {
+  margin: 0 0 12px;
+  font-size: 1.5rem;
+  line-height: 1.28;
+  letter-spacing: -0.03em;
+  color: var(--elyos-navy);
+}
+
+.featured-card p {
+  margin: 0 0 18px;
+  color: var(--elyos-text-soft);
+  line-height: 1.75;
+}
+
+.featured-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--elyos-primary);
+  font-weight: 800;
+}
+
+.featured-card__link span {
+  transition: transform 0.2s ease;
+}
+
+.featured-card:hover .featured-card__link span {
+  transform: translateX(4px);
+}
+
+/* ARTICLES GRID */
+.article-grid-premium {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 22px;
+}
+
+.article-card-premium {
+  overflow: hidden;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(229, 234, 245, 0.95);
+  box-shadow: var(--shadow-soft);
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+}
+
+.article-card-premium:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-medium);
+}
+
+.article-card-premium__image-wrap {
+  position: relative;
+  height: 210px;
+  overflow: hidden;
+}
+
+.article-card-premium__image-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.35s ease;
+}
+
+.article-card-premium:hover .article-card-premium__image-wrap img {
+  transform: scale(1.04);
+}
+
+.article-card-premium__category {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--elyos-navy);
+  font-size: 0.8rem;
+  font-weight: 800;
+  backdrop-filter: blur(8px);
+}
+
+.article-card-premium__body {
+  padding: 20px;
+}
+
+.article-card-premium__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--elyos-text-soft);
+  font-size: 0.9rem;
+  margin-bottom: 12px;
+}
+
+.article-card-premium h3 {
+  margin: 0 0 10px;
+  font-size: 1.2rem;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  color: var(--elyos-navy);
+}
+
+.article-card-premium p {
+  margin: 0 0 16px;
+  color: var(--elyos-text-soft);
+  line-height: 1.7;
+}
+
+.article-card-premium__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--elyos-primary);
+  font-weight: 800;
+}
+
+.article-card-premium__link span {
+  transition: transform 0.2s ease;
+}
+
+.article-card-premium:hover .article-card-premium__link span {
+  transform: translateX(4px);
+}
+
+/* FOOTER */
+.elyos-footer {
+  border-top: 1px solid rgba(229, 234, 245, 0.95);
+  background: linear-gradient(180deg, #f8fbff 0%, #f2f6fc 100%);
+}
+
+.elyos-footer__inner {
+  min-height: 86px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--elyos-text-soft);
+  font-size: 0.95rem;
+}
+
+.elyos-footer__links {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.elyos-footer__links a:hover {
+  color: var(--elyos-text);
+}
+
+/* RESPONSIVE */
+@media (max-width: 1240px) {
+  .support-hero-premium__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .support-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .support-sidebar {
+    position: static;
+  }
+}
+
+@media (max-width: 1080px) {
+  .article-grid-premium {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .featured-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .elyos-header__inner {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    padding: 16px 0;
+  }
+}
+
+@media (max-width: 760px) {
+  .elyos-container {
+    width: min(var(--container), calc(100% - 24px));
+  }
+
+  .support-search-premium {
+    grid-template-columns: 1fr;
+    padding: 14px;
+  }
+
+  .support-search-premium__icon {
+    display: none;
+  }
+
+  .support-search-premium button {
+    width: 100%;
+  }
+
+  .article-grid-premium {
+    grid-template-columns: 1fr;
+  }
+
+  .support-section-title,
+  .elyos-footer__inner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .elyos-nav,
+  .elyos-actions {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .support-hero-premium h1 {
+    font-size: 2.4rem;
+  }
+}
+`;
\ No newline at end of file
diff --git a/src/components/Recherche_Help_new_v2_ARG.js b/src/components/Recherche_Help_new_v2_ARG.js
new file mode 100644
index 0000000..f84d7b8
--- /dev/null
+++ b/src/components/Recherche_Help_new_v2_ARG.js
@@ -0,0 +1,1652 @@
+import React, { useRef, useState, useMemo, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import axios from "axios";
+import Article_Help from "./Article_Help";
+import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
+import { format } from 'date-fns'
+import moment from "moment";
+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 LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import Button from '@mui/material/Button';
+
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import { useCookies } from "react-cookie";
+import connect_white from "../mysy_img/connect_white_v2.png";
+import connect_green from "../mysy_img/connect_green.png";
+import { BsFillXCircleFill } from "react-icons/bs";
+import Fotter_v3 from "./Fotter_v3";
+
+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 SendIcon from '@mui/icons-material/Send';
+import { Editor } from '@tinymce/tinymce-react';
+import fr from 'date-fns/locale/fr';
+import { registerLocale } from 'react-datepicker';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { FcInfo } from "react-icons/fc";
+import 'react-tooltip/dist/react-tooltip.css'
+import { Tooltip } from 'react-tooltip'
+import Checkbox from '@mui/material/Checkbox';
+
+
+import { FcPlus } from "react-icons/fc";
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+import { FcInternal } from "react-icons/fc";
+
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import { IconButton } from '@material-ui/core';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+
+
+
+function PaperComponent(props) {
+    return (
+        <Draggable
+            handle="#draggable-dialog-title"
+            cancel={'[class*="MuiDialogContent-root"]'}
+        >
+            <Paper {...props} />
+        </Draggable>
+    );
+}
+
+
+const useStyles = makeStyles((theme) => ({
+
+    dialog: {
+        position: 'absolute',
+        // left: 10,
+        top: 400
+    },
+
+    paper: {
+        overflowY: 'unset',
+    },
+    customizedButton: {
+        position: 'absolute',
+        left: '98%',
+        top: '-3%',
+        backgroundColor: 'lightgray',
+        color: 'gray',
+    },
+}));
+
+
+
+let PageSize = 5;
+const Recherche_Help_new_v2_ARG = (props) => {
+    const classes = useStyles();
+    const [userconnected, setuserconnected] = useState("");
+    const [SearchText, setSearchText] = useState("");
+    const [result, setResult] = useState("");
+    const [myApiResponse, setmyApiResponse] = useState("false");
+    const [displayAllClasses, setdisplayAllClasses] = useState(true);
+    const [showelement, setshowelement] = useState("init");
+    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 [currentPage, setCurrentPage] = useState(1);
+    const [currentPage2, setCurrentPage2] = useState(1);
+    const [fin, setfin] = useState(0);
+    const [ismobilephone, setismobilephone] = useState();
+    const [TrainingDistanciel, setTrainingDistanciel] = useState();
+
+
+    const stored_user = getCookie('tokenmysych');
+    const history = useHistory();
+
+
+    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) => {
+        const formData = new FormData();
+        //await sleep(20);
+        formData.append('search_text', data.name);
+        formData.append('name', data.name);
+        formData.append('surname', data.surname);
+        formData.append('email', data.email);
+        formData.append('pwd', data.pwd);
+        const res = await fetch(
+            url,
+            {
+                method: "POST",
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json'
+                    // 'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                redirect: 'follow',
+                referrerPolicy: 'no-referrer',
+                body: formData,
+            }
+        );
+        const results = await res.json();
+        //console.log(results);
+    };
+
+    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");
+        }
+        else if (showelement == "false") {
+            setshowelement("true");
+        }
+
+
+    }
+
+    function clearsearchtext(event) {
+        setSearchText("");
+        document.getElementById("SearchText").value = "";
+    }
+
+
+    function SearchTextHandle(event) {
+        setSearchText(event.target.value);
+    }
+
+
+
+    function displayAllClassesHandle(event) {
+
+        setdisplayAllClasses(event.target.checked);
+        if (event.target.checked == true)
+            document.getElementById("SearchText").disabled = true;
+        else
+            document.getElementById("SearchText").disabled = false;
+    }
+
+
+    const [get_all_articles_avis_api, setget_all_articles_avis_api] = useState();
+    const [get_all_articles_avis_message, setget_all_articles_avis_message] = useState();
+    const [get_all_articles_avis_result, setget_all_articles_avis_result] = useState([]);
+    function get_all_articles_avis(e) {
+
+        var token = "";
+        if (typeof (stored_user) != "undefined") {
+            token = stored_user
+        }
+
+
+        var form = new FormData();
+        form.append("search_text", SearchText);
+        form.append("token", token);
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        var myurl = ""
+
+        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_help_article/";
+
+        axios.post(myurl, form).then(res => {
+            if (String(res.data.status) != String("false")) {
+                //console.log(" In get_all_articles_avis  res.data.status = " + res.data.status);
+                //console.log(" In get_all_articles_avis  res.data.message = " + res.data.message);
+                setget_all_articles_avis_api(res.data.status);
+                setget_all_articles_avis_result(res.data.message);
+                setmyApiResponse("True");
+                setResult(res.data.message)
+
+            }
+            else {
+                //console.log(" In test  res.data.status = " + res.data.status);
+                //console.log(" In test  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+                setget_all_articles_avis_api(res.data.status);
+                setget_all_articles_avis_message(res.data.message);
+                //setmyApimyApiMessage("")
+            }
+
+
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+            setget_all_articles_avis_api("False");
+            //setmyApimyApiMessage("")
+        })
+    }
+
+
+    const [get_all_published_articles_avis_api, setget_all_published_articles_avis_api] = useState();
+    const [get_all_published_articles_avis_message, setget_all_published_articles_avis_message] = useState();
+    const [get_all_published_articles_avis_result, setget_all_published_articles_avis_result] = useState([]);
+    function get_all_published_articles_avis(e) {
+
+        var token = "";
+        if (typeof (stored_user) != "undefined") {
+            token = stored_user
+        }
+
+
+        var form = new FormData();
+        form.append("search_text", SearchText);
+        form.append("token", token);
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        var myurl = ""
+
+        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_published_help_article/";
+
+        axios.post(myurl, form).then(res => {
+            if (String(res.data.status) != String("false")) {
+                //console.log(" In get_all_published_articles_avis  res.data.status = " + res.data.status);
+                //console.log(" In get_all_published_articles_avis  res.data.message = " + res.data.message);
+                setget_all_published_articles_avis_api(res.data.status);
+                setget_all_published_articles_avis_result(res.data.message);
+                setmyApiResponse("True");
+
+
+            }
+            else {
+                //console.log(" In test  res.data.status = " + res.data.status);
+                //console.log(" In test  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+                setget_all_published_articles_avis_api(res.data.status);
+                setget_all_published_articles_avis_message(res.data.message);
+                //setmyApimyApiMessage("")
+            }
+
+
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+            setget_all_published_articles_avis_api("False");
+            //setmyApimyApiMessage("")
+        })
+    }
+
+
+
+    const [get_all_non_published_articles_avis_api, setget_all_non_published_articles_avis_api] = useState();
+    const [get_all_non_published_articles_avis_message, setget_all_non_published_articles_avis_message] = useState();
+    const [get_all_non_published_articles_avis_result, setget_all_non_published_articles_avis_result] = useState([]);
+    function get_all_non_published_articles_avis(e) {
+
+        var token = "";
+        if (typeof (stored_user) != "undefined") {
+            token = stored_user
+        }
+
+
+        var form = new FormData();
+        form.append("search_text", SearchText);
+        form.append("token", token);
+        // Ajout des info IP user
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+
+        var myurl = ""
+
+        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_non_published_help_article/";
+
+        axios.post(myurl, form).then(res => {
+            if (String(res.data.status) != String("false")) {
+                //console.log(" In get_all_non_published_articles_avis  res.data.status = " + res.data.status);
+                //console.log(" In get_all_non_published_articles_avis  res.data.message = " + res.data.message);
+                setget_all_non_published_articles_avis_api(res.data.status);
+                setget_all_non_published_articles_avis_result(res.data.message);
+                setmyApiResponse("True");
+
+
+            }
+            else {
+                //console.log(" In test  res.data.status = " + res.data.status);
+                //console.log(" In test  res.data.message = " + res.data.message);
+                setmyApiResponse("False");
+                setget_all_non_published_articles_avis_api(res.data.status);
+                setget_all_non_published_articles_avis_message(res.data.message);
+                //setmyApimyApiMessage("")
+            }
+
+
+        }).catch((error) => {
+            console.warn('Not good man :( mysearchtext = ');
+            setmyApiResponse("False");
+            setget_all_non_published_articles_avis_api("False");
+            //setmyApimyApiMessage("")
+        })
+    }
+
+
+
+    const currentTableData2 = useMemo(() => {
+        if (result) {
+            const firstPageIndex = (currentPage2 - 1) * PageSize;
+            const lastPageIndex = firstPageIndex + PageSize;
+            setfin(1);
+            return result.slice(firstPageIndex, lastPageIndex);
+        }
+        else {
+            return [];
+            setfin(0);
+        }
+    }, [currentPage2]);
+
+
+    const [PartnerMenu, setPartnerMenu] = React.useState(null);
+    const [AccountMenu, setAccountMenu] = React.useState(null);
+
+    const [someoneconnected, setsomeoneconnected] = useState("0");
+    const [partnerconnected, setpartnerconnected] = useState("0");
+    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
+
+    const stored_part = getCookie('tokenmysypart');
+
+
+    const [connected_user_article_avis_droit_modif, setconnected_user_article_avis_droit_modif] = useState("0");
+
+
+    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;
+            retrieve_user_acces_right();
+
+            //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;
+            retrieve_user_acces_right();
+
+
+            // 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 déconnexion (user)',
+            buttons: [
+                {
+                    label: 'Oui',
+                    onClick: () => user_logout_confirmation()
+                },
+                {
+                    label: 'Non',
+                    onClick: () => { return }
+                }
+            ]
+        });
+    }
+
+
+    const PartnerMenu_Close = () => {
+        setPartnerMenu(null);
+    };
+
+    const AccountMenu_Close = () => {
+        setAccountMenu(null);
+    };
+
+    const handlePartnerMenu = (event) => {
+        setPartnerMenu(event.currentTarget);
+    };
+
+    const handleAccountMenu = (event) => {
+        setAccountMenu(event.currentTarget);
+    };
+
+    const handleClose_Account = () => {
+        alert(" my account");
+        setAccountMenu(null);
+    };
+
+    const handleAccountConnexion = () => {
+        setAccountMenu(null);
+        history.push("/Connexion")
+    };
+
+    const handleMyAccount = () => {
+        setAccountMenu(null);
+        history.push("/mysy-user-account")
+    };
+
+    const handleAccountCreation = () => {
+        setAccountMenu(null);
+        history.push("/create_account")
+    };
+
+    const handlePartnerConnexion = () => {
+        setAccountMenu(null);
+        history.push("/PartnerLogin")
+    };
+
+    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 déconnexion (user)',
+            buttons: [
+                {
+                    label: 'Oui',
+                    onClick: () => user_logout_confirmation()
+                },
+                {
+                    label: 'Non',
+                    onClick: () => { return }
+                }
+            ]
+        });
+    }
+
+
+    const handleMyPartnerAccount = () => {
+        setAccountMenu(null);
+        history.push("/Partner")
+    };
+
+    const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
+    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: '/' });
+        }
+        history.push("/recherche-formation");
+    }
+
+    function part_logout() {
+        confirmAlert({
+            title: '',
+            message: 'Confirmez la déconnexion (pro)',
+            buttons: [
+                {
+                    label: 'Oui',
+                    onClick: () => part_logout_confirmation()
+                },
+                {
+                    label: 'Non',
+                    onClick: () => { return }
+                }
+            ]
+        });
+    }
+    const [ProduitMenu, setproduitMenu] = React.useState(null);
+    const [AvisMenu, setavisMenu] = React.useState(null);
+
+
+    const handleProduitMenu = (event) => {
+        setproduitMenu(event.currentTarget);
+    };
+
+    const handleProduitService = () => {
+        setproduitMenu(null);
+        history.push("/tarifs_produits_services/")
+    };
+
+    const handleQuisommesNousMenu = () => {
+        setproduitMenu(null);
+        history.push("/qui-sommes-nous/")
+    };
+
+    const ProduitMenu_Close = () => {
+        setproduitMenu(null);
+    };
+
+    function publiecatalogue() {
+        history.push("/Partner", { mysy_arg: 'partner' });
+    }
+
+    const handleFtionMenu = (event) => {
+        history.push("/")
+    };
+
+    useEffect(() => {
+        setdisplayAllClasses("true");
+        async function chloadfunction() {
+            if (document.getElementById('allelement')) {
+                document.getElementById("allelement").checked = true;
+            }
+            // document.getElementById("SearchText").disabled = true;
+
+        }
+        chloadfunction();
+        get_all_published_articles_avis();
+        whosisconnected();
+
+    }, []);
+
+
+
+    // Cette fonction recuperer les droits d'acces stocké en cookie
+    const [connected_user_access_right, setconnected_user_access_right] = React.useState([]);
+    function retrieve_user_acces_right() {
+        const stored_cookie = getCookie('tokenmysypart');
+
+        if (!stored_cookie || String(stored_cookie).trim() === "") {
+            history.push("/Connexion");
+            return;
+        }
+
+        var acces_right_token_name = stored_cookie + "_uar";
+        var acces_right_token_val = getCookie(acces_right_token_name, { path: '/' });
+
+        var tab_json_access_right = JSON.parse(acces_right_token_val);
+
+        setconnected_user_access_right(tab_json_access_right);
+
+
+        var article_avis_droit_ecriture_retval = check_user_acces_right_with_tab("article_avis", "write", tab_json_access_right);
+        if (article_avis_droit_ecriture_retval === 1) {
+            setconnected_user_article_avis_droit_modif("1");
+        } else {
+            setconnected_user_article_avis_droit_modif("0");
+        }
+
+
+    }
+
+    // check du droit d'acces de l'utilisateur
+    function check_user_acces_right(local_module, local_action) {
+
+        //console.log(" ### connected_user_access_right = ", connected_user_access_right);
+        //console.log(" #### check_user_acces_right = ", local_module, " --- local_action = ", local_action);
+
+        if (String(local_action) === "read") {
+            for (let i = 0; i < connected_user_access_right.length; i++) {
+                if (String(connected_user_access_right[i].module) === String(local_module)
+                    && String(connected_user_access_right[i].read) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else if (String(local_action) === "write") {
+            for (let i = 0; i < connected_user_access_right.length; i++) {
+                if (String(connected_user_access_right[i].module) === String(local_module)
+                    && String(connected_user_access_right[i].write) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else {
+            return 0;
+        }
+
+    }
+
+
+    // check du droit d'acces de l'utilisateur avec la table des droits
+    function check_user_acces_right_with_tab(local_module, local_action, tab_acces_right) {
+
+        //console.log(" ### connected_user_access_right = ", connected_user_access_right);
+        //console.log(" #### check_user_acces_right = ", local_module, " --- local_action = ", local_action);
+
+        if (String(local_action) === "read") {
+            for (let i = 0; i < tab_acces_right.length; i++) {
+                if (String(tab_acces_right[i].module) === String(local_module)
+                    && String(tab_acces_right[i].read) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else if (String(local_action) === "write") {
+            for (let i = 0; i < tab_acces_right.length; i++) {
+                if (String(tab_acces_right[i].module) === String(local_module)
+                    && String(tab_acces_right[i].write) === "true") {
+
+                    return 1;
+                }
+            }
+            return 0;
+        } else {
+            return 0;
+        }
+
+    }
+
+
+
+
+    const [Dialog_article_avis_avis, setDialog_article_avis_avis] = React.useState(false);
+    const [Dialog_article_avis_open, setDialog_article_avis_open] = React.useState(false);
+    function Dialog_article_avis_handle_change_participant_session(avis) {
+        setDialog_article_avis_avis(avis);
+        setDialog_article_avis_open(true);
+    }
+
+    const Dialog_article_avis_handleClose = () => {
+
+    };
+
+    const Dialog_article_avis_handleClose_buton = () => {
+
+        setDialog_article_avis_open(false);
+        sethandleSubmission_img_article_message("");
+        setlogo_file_name("");
+        setimg_img_article_file("");
+        setimg_img_article_file2("");
+        clear_article_avis_fields();
+        setfield_texte_avis("");
+
+
+    };
+
+    function clear_article_avis_fields() {
+        setarticle_avis_title_formation("");
+        setarticle_avis_email("");
+        setarticle_avis_url_formation("");
+        setarticle_avis_sujet("");
+        setarticle_avis_avis("");
+        setis_data_changed("");
+        setarticle_avis_internal_url("");
+        setarticle_avis_display_header_img(false);
+        setarticle_avis_meta_description("");
+        setfield_texte_avis("");
+    }
+
+    const [article_avis_date_publication, setarticle_avis_date_publication] = useState(new Date().toLocaleDateString('fr-FR'));
+
+    const [article_avis_title_formation, setarticle_avis_title_formation] = React.useState("");
+    const [article_avis_email, setarticle_avis_email] = React.useState("");
+    const [article_avis_url_formation, setarticle_avis_url_formation] = React.useState("");
+    const [article_avis_sujet, setarticle_avis_sujet] = React.useState("");
+    const [article_avis_avis, setarticle_avis_avis] = React.useState("");
+    const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState("");
+    const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false);
+    const [article_avis_img_path, setarticle_avis_img_path] = React.useState("");
+    const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState("");
+
+    function Add_Update_Article_Avis(e) {
+
+        clear_message();
+        setLoading(true);
+
+        var form = new FormData();
+
+        const stored_cookie = getCookie('tokenmysypart');
+        form.append("token", stored_cookie);
+        form.append("title_formation", article_avis_title_formation);
+        form.append("avis", field_texte_avis);
+        form.append("qualite", " --- ");
+        form.append("note", "---");
+
+        if (article_avis_internal_url && String(article_avis_internal_url).trim().length > 5) {
+            form.append("internal_url", article_avis_internal_url);
+        }
+
+        if (img_img_article_file2) {
+            form.append('File', img_img_article_file2);
+            form.append('img_file_name', img_img_article_file2.name);
+        }
+        else {
+            form.append('File', "");
+            form.append('img_file_name', "");
+        }
+
+        if (article_avis_date_publication.trim() === "") {
+            alert(" Vous devez saisir la date de naissance de l'apprenant");
+            return;
+        }
+
+        var formated_date_tmp = new Date(moment(article_avis_date_publication, "YYYY-MM-DD"));
+        var formated_date_final = moment(formated_date_tmp).format('DD/MM/YYYY');
+
+        form.append("date_publication", formated_date_final);
+
+
+        if (article_avis_display_header_img) {
+            form.append("display_header_img", "1");
+        } else {
+            form.append("display_header_img", "0");
+        }
+
+        form.append("user_ip", IPv4);
+        form.append("user_country_code", country_code);
+        form.append("user_country_name", country_name);
+        form.append("user_city", city);
+        form.append("user_postal", postal);
+        form.append("user_latitude", latitude);
+        form.append("user_longitude", longitude);
+        form.append("user_state", state);
+
+        // Si une balise meta description n'est pas fourni, alors on lui donne le titre
+        var local_meta_description = "";
+        if (article_avis_meta_description) {
+            local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 200);
+        } else {
+            local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 200);
+        }
+        form.append("meta_description", local_meta_description);
+
+
+        //  console.log(" ## form = ", form);
+        var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_help_article/";
+
+        setLoading(true);
+
+        axios.post(myurl, form).then(res => {
+            setLoading(false);
+            if (String(res.data.status) === String("false")) {
+                alert(res.data.message);
+            }
+
+            else if (String(res.data.status) === String("true")) {
+                alert(res.data.message);
+                Dialog_article_avis_handleClose_buton();
+                window.location.reload();
+
+            }
+            else {
+
+            }
+        }).catch((error) => {
+            setLoading(false);
+            console.warn('contact-nous  Not good man :( mysearchtext = ');
+        })
+
+
+    }
+
+
+
+    const editorRef_texte_avis = useRef(null);
+    const [editorRef_texte_avis_limite, seteditorRef_texte_avis] = useState(1000);
+    const [field_texte_avis, setfield_texte_avis] = useState("");
+    const [field_texte_avis_initial_value, setfield_texte_avis_initial_value] = useState("");
+
+    const [is_data_changed, setis_data_changed] = useState("");
+
+    const [editor_tochanged, seteditor_tochanged] = useState("");
+
+    function editor_keyup() {
+        setis_data_changed("1");
+    }
+
+
+    const New_Option_Filter = [
+        { "id": "published", "label": "Publié", "value": "published" },
+        { "id": "notpublished", "label": "Non Publié", "value": "notpublished" },
+        { "id": "all", "label": "Tout", "value": "all" },
+    ]
+
+    const [publish_status, setpublish_status] = useState("published");
+    const [isLoading, setLoading] = useState();
+
+    /**** Gestion image de l'article */
+
+    const [logo_file_name, setlogo_file_name] = useState();
+    const hiddenFileInput_logo = React.useRef(null);
+
+    const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState("");
+
+    const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState();
+    const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState();
+    const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState();
+
+
+    const [img_img_article_file, setimg_img_article_file] = useState();
+    const [img_bg_file, setimg_bg_file] = useState();
+
+    const [img_img_article_file2, setimg_img_article_file2] = useState();
+    const [img_bg_file2, setimg_bg_file2] = useState();
+
+    const handleSubmission_logo = event => {
+        clear_message();
+
+
+        const fileUploaded = event.target.files[0];
+        let file_size = event.target.files[0].size;
+        let file_type = event.target.files[0].type;
+
+        //console.log("file_size =  ", file_size, " file_type = ", file_type);
+        //console.log(" fileUploaded = ", fileUploaded);
+        if (file_size > 10000000) {
+            alert("Le fichier ne doit pas dépasser un 1 Méga octets");
+            return;
+        }
+
+
+        //image/png
+        if (String(file_type) !== "image/png" && String(file_type) !== "image/jpg" && String(file_type) !== "image/webp" &&
+            String(file_type) !== "image/jpeg") {
+            alert("Le fichier n'est pas au format PNG, String(file_type)" + String(file_type));
+            return;
+        }
+
+        setLoading(true);
+
+        var _URL = window.URL || window.webkitURL;
+        var file, img;
+        var img_height, img_width;
+
+        if ((file = event.target.files[0])) {
+            img = new Image();
+            var objectUrl = _URL.createObjectURL(file);
+            img.onload = function () {
+                img_height = this.height;
+                img_width = this.width;
+                _URL.revokeObjectURL(objectUrl);
+                console.log(" img_width = ", img_width, "  img_height = ", img_height)
+
+                if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1100 &&
+                    parseFloat(img_height) > 130 && parseFloat(img_height) < 1100) {
+                    //console.log(" img_height est = ", img_height, " < à 1500 ");
+
+                    // Verification que le nom du fichier est alpha numerique
+                    /*var regExp = /^[A-Za-z0-9]+$/;
+                    if (!regExp.test(event.target.files[0].name)) {
+               sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques");
+               sethandleSubmission_img_article_api("false");
+               setLoading(false);
+            
+               return
+                    }*/
+
+
+                    if (String(event.target.files[0].name).length > 50) {
+                        sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère");
+                        sethandleSubmission_img_article_api("false");
+                        setLoading(false);
+
+                        return
+                    }
+
+                    setlogo_file_name(event.target.files[0].name);
+                    setimg_img_article_file(URL.createObjectURL(event.target.files[0]));
+                    setimg_img_article_file2(event.target.files[0]);
+
+                } else {
+                    sethandleSubmission_img_article_message(" La taille de l'image est incorrecte.  Larg = " + String(img_width) + " px Long = " + String(img_height) + " px");
+                    sethandleSubmission_img_article_api("false");
+                    setLoading(false);
+                    return;
+                }
+
+                //console.log(" after img_width = ", img_width, "  after img_height = ", img_height)
+            };
+            img.src = objectUrl;
+
+        }
+        setLoading(false);
+    };
+
+    function clear_message() {
+        sethandleSubmission_img_article_message();
+        sethandleSubmission_img_article_api();
+    }
+
+
+    const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState();
+    const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState();
+    const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState();
+    function Send_img_article_Img() {
+        clear_message();
+        setLoading(true);
+        const formData = new FormData();
+        formData.append('File', img_img_article_file2);
+        //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+        const stored_cookie = getCookie('tokenmysypart');
+        formData.append("token", stored_cookie);
+
+        console.log(" ## le nom du fichier est : ", img_img_article_file2.name);
+
+        fetch(
+            process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/",
+            {
+                method: 'POST',
+                body: formData,
+            }
+        )
+            .then((response) => response.json())
+            .then((result) => {
+                //console.log('Success:', result['message']);
+
+                if (String(result['status']) === String("true")) {
+                    setSend_img_article_Img_api("true");
+                    alert(" La mise à jour du logo a été correctement effectuée. ");
+
+                } else if (String(result['status']) === String("Err_Connexion")) {
+                    alert('Erreur: ' + result['message']);
+                    history.push("/Connexion");
+                }
+
+                else {
+                    setSend_img_article_Img_api("false");
+                    setSend_img_article_Img_message(result['message']);
+                }
+                setLoading(false);
+
+            })
+            .catch((error) => {
+                console.error('Error:', result);
+                setSend_img_article_Img_api("false");
+                setSend_img_article_Img_message(result['message']);
+                setLoading(false);
+            });
+
+    }
+
+
+    const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState();
+    const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState();
+    const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState();
+    function Delete_img_article_Img() {
+        clear_message();
+
+
+        setLoading(true);
+
+
+        const formData = new FormData();
+
+        //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
+        const stored_cookie = getCookie('tokenmysypart');
+        formData.append("token", stored_cookie);
+
+
+        fetch(
+            process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/",
+            {
+                method: 'POST',
+                body: formData,
+            }
+        )
+            .then((response) => response.json())
+            .then((result) => {
+                //console.log('Success:', result['message']);
+
+                if (String(result['status']) === String("true")) {
+                    setDelete_img_article_Img_api("true");
+                    setGetLms_Themes_img_article_Img('');
+                    alert(" Le logo a été correctement supprimé ");
+
+                } else if (String(result['status']) === String("Err_Connexion")) {
+                    alert('Erreur: ' + result['message']);
+                    history.push("/Connexion");
+                }
+
+                else {
+                    setDelete_img_article_Img_api("false");
+                    setDelete_img_article_Img_message(result['message']);
+                }
+                setLoading(false);
+
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                setDelete_img_article_Img_api("false");
+                setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo");
+                setLoading(false);
+            });
+
+    }
+
+    const changeHandler2_logo = (event) => {
+        clear_message();
+        hiddenFileInput_logo.current.click();
+    };
+
+    function Annule_img_article_img() {
+        clear_message();
+        setimg_img_article_file();
+        setimg_img_article_file2();
+        sethandleSubmission_img_article_message();
+        setSend_img_article_Img_api();
+        setSend_img_article_Img_message();
+        setlogo_file_name();
+    }
+
+    /***** Fin gestion de l'image de l'article */
+
+
+    function init_with_modele() {
+        var init_text = '<div style="font-family: DM Sans;     font-style: normal;     font-weight: 600;     font-size: 24px;     line-height: 28px;     color: #16274F;     text-align: left;     margin-bottom: 10px;">    \
+  1. Une solution complète et intégrée :</div> <div style="font-family: Inter;     font-style: normal;     font-weight: 400;     font-size: 20px;     line-height: 32px;     color: #4B5162;   \
+  margin-bottom: 2rem;">      Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la    \
+  planification des sessions jusqu\'à la facturation, en passant par le suivi des apprenants. <br />     Cette centralisation réduit les tâches administratives et optimise votre efficacité.<br />  \
+  Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la      planification des sessions jusqu\'à la facturation, en passant par le suivi \
+  des apprenants. Cette centralisation     réduit les tâches administratives et     optimise votre efficacité. </div>\
+  <div style="font-family:DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">\
+  2. Conformité avec les réglementations :</div> <div style="font-family: Inter; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; color: #4B5162; margin-bottom: 2rem;"> \
+  La solution est conçue pour répondre aux exigences légales, comme Qualiopi ou les obligations de suivi des     financements CPF. Vous êtes ainsi assuré de     rester conforme aux normes en vigueur. </div>\
+  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">    \
+  3. Liste numérotée </div> <ol style="margin-bottom: 2rem;">     <li>        \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word; margin-bottom: 10px;">    \
+  Renforcer la cr&eacute;dibilit&eacute; des &eacute;tablissements de formation. </div>     </li>     <li>        \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">      \
+  Assurer une meilleure qualit&eacute; des prestations de formation. </div>     </li>     <li>       \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">       \
+  Rendre les organismes &eacute;ligibles aux aides financi&egrave;res &nbsp; (par exemple, des OPCO ou             P&ocirc;le Emploi).</div>     </li> </ol> \
+  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;"> \
+  4. Liste bullet point </div> <ul style="margin-bottom: 2rem;">     <li>         \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">        \
+  MySy offre un module de gestion administrative permettant de centraliser tous les documents li&eacute;s aux             formations, y compris les conventions, convocations, programmes,\
+  et certificats de satisfaction.</div>     </li>     <li>       \
+  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">            \
+  Gr&acirc;ce &agrave; des fonctionnalit&eacute;s telles que l\'import/export de donn&eacute;es en Excel et la             gestion automatis&eacute;e des documents,     \
+  les organismes peuvent facilement fournir des preuves de conformit&eacute; lors de l\'audit Qualiopi.</div>     </li> </ul> \
+  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">    \
+  5. Une solution complète et intégrée (suite):</div> <div style="font-family: Inter; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; color: #4B5162; margin-bottom: 2rem;">    \
+  Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la      planification des sessions jusqu\'à la facturation, en passant par \
+  le suivi des apprenants. <br />     Cette centralisation réduit les tâches administratives et optimise votre efficacité.<br /> </div>'
+
+        setfield_texte_avis(init_text);
+    }
+    return (
+        <div style={{ width: "100%", float: "left" }}>
+
+
+            {/***   GESTION article */}
+            <Dialog
+                open={Dialog_article_avis_open}
+                //  onClose={Dialog_article_avis_handleClose}
+                className="displaypartnersession"
+                static
+                onClose={() => null}
+
+                PaperProps={{
+
+
+                    className: classes.paper, // Apply the paper style
+                    style: {
+                        overflowY: 'unset',
+                        position: 'absolute',
+                        top: '5rem',
+                        margin: "2px",
+                    },
+                }}
+                hideBackdrop={true}
+                disableScrollLock
+                classes={{
+                    paper: classes.dialog
+                }}
+
+                PaperComponent={PaperComponent}
+                aria-labelledby="draggable-dialog-title"
+            >
+
+                <DialogTitle style={{ cursor: 'move', fontFamily:"DM Sans"}} id="draggable-dialog-title">Votre article </DialogTitle>
+                <DialogContent className="DialogContent_width DialogContent_width_session_800px" >
+
+
+                    {String(is_data_changed) === String("1") && <div className="div_row_dialog">
+                        <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
+                    </div>}
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Titre </b>
+                        </div>
+                        <div className="div_row_dialog" >
+                            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                                <input
+                                    type='text'
+                                    name='name'
+                                    value={article_avis_title_formation}
+                                    onChange={(e) => {
+                                        setarticle_avis_title_formation(e.target.value);
+                                        setis_data_changed("1");
+                                    }}
+                                    className='disabled_style_width_100_percent'
+
+                                ></input>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            Url souhaitée
+                        </div>
+                        <div className="div_row_dialog" >
+                            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                                <input
+                                    type='text'
+                                    name='name'
+                                    value={article_avis_internal_url}
+                                    onChange={(e) => {
+                                        setarticle_avis_internal_url(e.target.value);
+                                        setis_data_changed("1");
+                                    }}
+                                    className='disabled_style_width_100_percent'
+
+                                ></input>
+                            </div>
+                        </div>
+                    </div>
+
+
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
+                            <b>   Date publication </b>
+                        </div>
+
+
+                        <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
+                            <DatePicker
+                                name="date_publication"
+                                id="date_publication"
+                                selected={new Date(moment(article_avis_date_publication, "YYYY-MM-DD"))}
+                                onChange={(date) => {
+                                    setarticle_avis_date_publication(format(date, 'yyyy-MM-dd'));
+                                    setis_data_changed("1");
+                                }
+                                }
+                                showTimeSelect={false}
+                                dateFormat="dd/MM/yyyy"
+                                className="disabled_style session_caract_Dialog_DatePicker"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
+                            <b>   Affiche image </b>
+                        </div>
+                        <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
+                            <Checkbox
+                                name="document_join_pdf"
+                                className="disabled_style session_caract_Dialog_DatePicker"
+                                checked={article_avis_display_header_img}
+                                onChange={(e) => {
+                                    setarticle_avis_display_header_img(e.target.checked);
+                                    setis_data_changed("1");
+                                }}
+
+                            />
+
+                        </div>
+                    </div>
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Image Url </b>
+                        </div>
+                        <div className="div_row_dialog" >
+
+                            <div className="div_row_dialog" >
+                                <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                                    <input
+                                        type='text'
+                                        name='img_url'
+                                        id='img_url'
+                                        disabled
+
+                                        className='disabled_style_width_100_percent'
+
+                                    ></input>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Image  </b>
+                        </div>
+
+                        <div className="div_row_dialog" >
+
+                            <div className="div_row">
+
+                                <nav className="koUpdateData" style={{ "color": "orange" }}>
+
+                                </nav>
+                                {logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
+                                <input type="file"
+                                    accept=".png, .jpg, .webp"
+                                    ref={hiddenFileInput_logo}
+                                    style={{ display: 'none' }}
+                                    name="liste_formation_file"
+                                    onChange={handleSubmission_logo}
+                                />
+
+                                {img_img_article_file && <nav> Fichier à importer : {img_img_article_file.name}  <br />
+                                    <nav style={{ maxWidth: '20rem', margin: 'auto' }}>
+                                        <img src={img_img_article_file} style={{ "width": "100%" }} />
+                                    </nav>
+
+
+                                    <br />
+                                </nav>}
+
+                                {String(Send_img_article_Img_api) === "true" && <div className="okUpdateData"> La mise à jour a été correctement faite</div>}
+                                {String(Send_img_article_Img_api) === "false" && <div className="koUpdateData"> {Send_img_article_Img_message}</div>}
+
+                                {String(handleSubmission_img_article_api) === "false" && <div className="koUpdateData"> {handleSubmission_img_article_message}</div>}
+
+
+
+                                <br />
+                                <Tooltip className="tooltip_css" id="tooltip_taille_img" />
+                                <a data-tooltip-id="tooltip_taille_img" data-tooltip-html=" <i> longueur  entre  200px et 1000px  et largeur entre 200px et 1000px, au format PNG ou JPG <br />
+           Le nom du fichier ne contient que des caractères alphanumériques, sans espaces </i>">
+                                    <Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
+                                        "background": "#c8cfd5",
+                                        "minWidth": "15rem", "color": "black", "width": "auto"
+                                    }}
+                                        id='menu_import_formation' name='menu_import_formation'>Choisir une image  &nbsp; <FcInfo style={{ fontSize: "14px" }} /> <br />
+
+                                    </Button>
+                                </a>
+                                <br />
+                            </div>
+
+
+
+                        </div>
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
+                            <b> Meta description </b>
+                            <div className="div_row_dialog" >
+
+                                <TextField
+                                    maxRows={4}
+                                    minRows={3}
+                                    inputProps={{ maxLength: 200 }}
+                                    multiline
+                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
+
+                                    name="meta_description"
+                                    id="meta_description"
+
+                                    fullWidth
+
+                                    value={article_avis_meta_description}
+                                    onChange={(e) => {
+                                        setarticle_avis_meta_description(e.target.value);
+                                        setis_data_changed("1");
+                                    }
+                                    }
+
+
+                                />
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <div className="div_row_dialog">
+                        <div className="div_row_dialog" style={{ with: '100%', float: 'left' }}>
+                            <div style={{ "textAlign": 'left', with: '65%', float: 'left' }}>
+                                <b> Texte Article </b>
+                            </div>
+                            <div style={{ "textAlign": 'right', with: '30%', paddingRight: '15px', cursor: 'pointer', float: 'right' }}
+                                onClick={(event) => {
+
+                                    if (field_texte_avis && String(field_texte_avis).length > 0) {
+                                        if (window.confirm("Vos modifications seront perdues, Confirmer-vous la réinitialisation du text ?")) {
+                                            init_with_modele();
+                                        }
+                                    } else {
+                                        init_with_modele();
+                                    }
+
+                                }}>
+                                Init <FcInternal style={{ fontSize: '14px' }} />
+                            </div>
+                        </div>
+                        <div className="div_row_dialog" >
+
+                            <Editor
+                                id="detail_document_principal"
+                                name="detail_document_principal"
+                                onInit={(evt, editor) => editorRef_texte_avis.current = editor}
+                                // initialValue={field_texte_avis}
+
+                                onKeyUp={editor_keyup}
+                                value={field_texte_avis}
+                                onEditorChange={(newValue, editor) => {
+                                    setfield_texte_avis(editorRef_texte_avis.current.getContent());
+
+                                }}
+                                init={{
+                                    resize: false,
+                                    height: 700,
+                                    menubar: true,
+
+                                    plugins: [
+                                        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',  'preview', 'anchor', 'searchreplace',
+                                        'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table',  'code', 'help', 'wordcount',
+                                        'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
+
+                                    ],
+                                    toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
+                                        'alignleft aligncenter alignright alignjustify | ' +
+                                        'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',
+
+                                    content_style: 'body { font-family:DM Sans,sans-serif; font-size:14px; }'
+                                }}
+                            />
+
+                        </div>
+
+                        {String(is_data_changed) === String("1") && <div className="div_row_dialog">
+                            <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
+                        </div>}
+
+                    </div>
+
+
+
+                </DialogContent>
+
+                <DialogActions>
+
+                    <IconButton
+                        autoFocus
+                        onClick={Dialog_article_avis_handleClose_buton}
+                        color="primary"
+                        className={classes.customizedButton}
+                    >
+                        <CancelPresentationIcon />
+                    </IconButton>
+
+
+                    <div className="div_row">
+                        <div className="div_row_gauche">
+                            <Button onClick={Dialog_article_avis_handleClose_buton} className="bton_annule_dialog" >Fermer</Button>
+                        </div>
+                        <div className="div_row_droite" style={{ "textAlign": 'center' }}>
+                            <Button onClick={Add_Update_Article_Avis} className="bton_enreg_dialog">Envoyer&nbsp; <SendIcon /></Button>
+
+                        </div>
+                    </div>
+
+                </DialogActions>
+
+
+            </Dialog>
+            {/***  FIN GESTION article */}
+
+
+            <div className="recherchearticles_new_v2_style">
+                <Helmet>
+                    <meta name="title" content={"Le blog, liste des articles"} />
+                    <meta name="description" content="Le blog, liste des articles. Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser l’audit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé. Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code),  QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF).  Nos options comme la signature électronique sont inclus dans le tarif de base." />
+                    <meta name="robots" content="index,follow" />
+                    <link rel="canonical" href={window.location.href} />
+
+
+                </Helmet>
+
+                <div className="div_mobile">
+
+                    <div className="div_row block_entete" >
+                        <div className="Background-header">
+
+                            <div className="Title">
+
+                                <div className="besoin_aide">
+                                  Support Elyos. Quelques articles pour vous.
+                                    <div className="detail_text_aide">
+                                        &nbsp;
+                                    </div>
+                                </div>
+
+                                <div className="barre_recherche">
+                                    <form onSubmit={handleSubmit(onSubmit)} className="div_005">
+                                        <div class="form">
+
+                                            <i class="fa fa-search"></i>
+
+                                            <input
+                                                type="text"
+                                                class="form-control form-input"
+                                                placeholder=" Texte (Titre, Description)"
+                                                onChange={SearchTextHandle}
+                                                id={"SearchText"}
+                                                name={"SearchText"}
+                                                style={{ "width": "80%", float: "left" }}
+                                            />
+                                            <nav style={{ "width": "15%", float: "left", paddingTop: "5px" }}>
+                                                {SearchText.length > 2 && <span_clear> <BsFillXCircleFill onClick={clearsearchtext} /> </span_clear>} <span class="left-pan" >
+                                                    &nbsp;<FaSearch onClick={get_all_articles_avis} /></span>
+                                            </nav>
+
+
+                                        </div>
+                                    </form>
+                                </div>
+
+                            </div>
+
+
+                        </div>
+
+                    </div>
+                    <div className="block_centrer">
+                        {connected_user_article_avis_droit_modif === "1" && <div className="div_row">
+                            <Button onClick={(e) => {
+                                var al = moment((new Date()));
+                                setarticle_avis_date_publication(moment(al).format('YYYY-MM-DD'));
+
+
+                                clear_article_avis_fields();
+                                setis_data_changed("");
+                                setDialog_article_avis_open(true);
+
+                            }}
+                                className="bton_enreg_dialog"> Ajouter 1 article &nbsp;&nbsp;
+                                <FcPlus style={{ fontSize: "20px" }} />
+                            </Button>
+                        </div>}
+
+                        {connected_user_article_avis_droit_modif === "1" && New_Option_Filter && New_Option_Filter.length > 0 && <Autocomplete
+                            disablePortal
+                            name="filtre1"
+                            id="filtre1"
+                            className="disabled_style"
+                            options={New_Option_Filter}
+                            defaultValue={{ id: "published", label: "Publié", value: "published" }}
+                            getOptionLabel={(option) => option.label}
+                            onChange={(event, value) => {
+                                if (value && value.value) {
+                                    setpublish_status(value.value);
+
+                                    if (value.value === "published") {
+                                        get_all_published_articles_avis();
+                                    } else if (value.value === "notpublished") {
+                                        get_all_non_published_articles_avis();
+                                    } else if (value.value === "all") {
+                                        get_all_articles_avis();
+                                    }
+                                }
+
+                            }}
+
+                            renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
+                                inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}
+
+                            />
+                            }
+                        />}
+
+                        <div className="liste_articles">
+
+                            {/*result && myApiResponse === "True" && <div className="okUpdateData">
+      <Pagination
+          className="pagination-bar"
+          currentPage={currentPage2}
+          totalCount={result.length}
+          pageSize={PageSize}
+          onPageChange={page => setCurrentPage2(page)}
+      />
+
+
+    </div>*/}
+
+                            {String(publish_status) === "all" && get_all_articles_avis_result && get_all_articles_avis_result.length > 0 && currentTableData2 && get_all_articles_avis_result.map((formation) => (
+                                <div className="block_article">
+                                    <Article_Help article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
+                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
+                                        get_all_articles_avis={get_all_articles_avis}
+
+                                    />
+                                </div>
+
+                            ))}
+
+                            {String(publish_status) === "published" && get_all_published_articles_avis_result && get_all_published_articles_avis_result.length > 0 && get_all_published_articles_avis_result.map((formation) => (
+                                <div className="block_article">
+                                    <Article_Help article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
+                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
+                                        get_all_articles_avis={get_all_articles_avis}
+
+                                    />
+                                </div>
+
+                            ))}
+
+                            {String(publish_status) === "notpublished" && get_all_non_published_articles_avis_result && get_all_non_published_articles_avis_result.length > 0 && get_all_non_published_articles_avis_result.map((formation) => (
+                                <div className="block_article">
+                                    <Article_Help article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
+                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
+                                        get_all_articles_avis={get_all_articles_avis}
+
+                                    />
+                                </div>
+
+                            ))}
+
+
+                            {/*result && <div>
+      <Pagination
+          className="pagination-bar"
+          currentPage={currentPage2}
+          totalCount={result.length}
+          pageSize={PageSize}
+          onPageChange={page => setCurrentPage2(page)}
+      />
+
+    </div>
+    */}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Recherche_Help_new_v2_ARG;
\ No newline at end of file
diff --git a/src/components/Recherche_formation_com.js b/src/components/Recherche_formation_com.js
index 864b97b..d90fc7f 100644
--- a/src/components/Recherche_formation_com.js
+++ b/src/components/Recherche_formation_com.js
@@ -1641,7 +1641,7 @@ const Recherche_new = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -1680,7 +1680,7 @@ const Recherche_new = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2118,7 +2118,7 @@ const Recherche_new = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                 >Mon Compte</MenuItem>
                 <MenuItem onClick={PartnerMenu_Close} className="mymenu_item"
-                >Deconnexion</MenuItem>
+                >Déconnexion</MenuItem>
 
             </Menu>
 
@@ -2138,7 +2138,7 @@ const Recherche_new = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                 >S'inscrire</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                >Deconnexion</MenuItem>
+                >Déconnexion</MenuItem>
             </Menu>
 
             <Menu
@@ -2173,7 +2173,7 @@ const Recherche_new = () => {
                                     {String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
                                         style={{ "width": "25%" }} /> Connexion
                                     </button>}
-                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
+                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Déconnexion<img src={connect_green}
                                         style={{ "width": "25%" }} />
                                     </button>}
                                 </div>
diff --git a/src/components/Recherche_new_v2.js b/src/components/Recherche_new_v2.js
index 55da880..0aedec1 100644
--- a/src/components/Recherche_new_v2.js
+++ b/src/components/Recherche_new_v2.js
@@ -2083,7 +2083,7 @@ const Recherche_new_v2 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2131,7 +2131,7 @@ const Recherche_new_v2 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2913,7 +2913,7 @@ const Recherche_new_v2 = () => {
                 <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> MySy Information</DialogTitle>
                 <DialogContent className="DialogContent_width">
                     <DialogContentText>
-                        Confirmez la deconnexion
+                        Confirmez la déconnexion
                     </DialogContentText>
 
                 </DialogContent>
@@ -2921,7 +2921,7 @@ const Recherche_new_v2 = () => {
                 <DialogActions>
                     <div className="div_row">
                         <div className="div_row_gauche">
-                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Deconnexion</Button>
+                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Déconnexion</Button>
                         </div>
                         <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                             <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -2950,7 +2950,7 @@ const Recherche_new_v2 = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                 >Mon Compte</MenuItem>
                 <MenuItem onClick={(e) => setDialog_1_open(true)} className="mymenu_item"
-                >Deconnexion  </MenuItem>
+                >Déconnexion  </MenuItem>
 
             </Menu>
 
@@ -2970,7 +2970,7 @@ const Recherche_new_v2 = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                 >S'inscrire</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                >Deconnexion </MenuItem>
+                >Déconnexion </MenuItem>
             </Menu>
 
             <Menu
@@ -3005,7 +3005,7 @@ const Recherche_new_v2 = () => {
                                     {String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
                                         style={{ "width": "25%" }} /> Connexion
                                     </button>}
-                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
+                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Déconnexion<img src={connect_green}
                                         style={{ "width": "25%" }} />
                                     </button>}
                                 </div>
diff --git a/src/components/Recherche_new_v3.js b/src/components/Recherche_new_v3.js
index 79d582a..f894ec4 100644
--- a/src/components/Recherche_new_v3.js
+++ b/src/components/Recherche_new_v3.js
@@ -2070,7 +2070,7 @@ const Recherche_new_v3 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2118,7 +2118,7 @@ const Recherche_new_v3 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2608,7 +2608,7 @@ const Recherche_new_v3 = () => {
                 <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> MySy Information</DialogTitle>
                 <DialogContent className="DialogContent_width">
                     <DialogContentText>
-                        Confirmez la deconnexion
+                        Confirmez la déconnexion
                     </DialogContentText>
 
                 </DialogContent>
@@ -2616,7 +2616,7 @@ const Recherche_new_v3 = () => {
                 <DialogActions>
                     <div className="div_row">
                         <div className="div_row_gauche">
-                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Deconnexion</Button>
+                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Déconnexion</Button>
                         </div>
                         <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                             <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -2645,7 +2645,7 @@ const Recherche_new_v3 = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                 >Mon Compte</MenuItem>
                 <MenuItem onClick={(e) => setDialog_1_open(true)} className="mymenu_item"
-                >Deconnexion  </MenuItem>
+                >Déconnexion  </MenuItem>
 
             </Menu>
 
@@ -2665,7 +2665,7 @@ const Recherche_new_v3 = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                 >S'inscrire</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                >Deconnexion </MenuItem>
+                >Déconnexion </MenuItem>
             </Menu>
 
             <Menu
@@ -2700,7 +2700,7 @@ const Recherche_new_v3 = () => {
                                     {String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
                                         style={{ "width": "25%" }} /> Connexion
                                     </button>}
-                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
+                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Déconnexion<img src={connect_green}
                                         style={{ "width": "25%" }} />
                                     </button>}
                                 </div>
diff --git a/src/components/Recherche_new_v4.js b/src/components/Recherche_new_v4.js
index 8cc1e78..5ab5c6e 100644
--- a/src/components/Recherche_new_v4.js
+++ b/src/components/Recherche_new_v4.js
@@ -2072,7 +2072,7 @@ const Recherche_new_v4 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2120,7 +2120,7 @@ const Recherche_new_v4 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2620,7 +2620,7 @@ const Recherche_new_v4 = () => {
                 <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> MySy Information</DialogTitle>
                 <DialogContent className="DialogContent_width">
                     <DialogContentText>
-                        Confirmez la deconnexion
+                        Confirmez la déconnexion
                     </DialogContentText>
 
                 </DialogContent>
@@ -2628,7 +2628,7 @@ const Recherche_new_v4 = () => {
                 <DialogActions>
                     <div className="div_row">
                         <div className="div_row_gauche">
-                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Deconnexion</Button>
+                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Déconnexion</Button>
                         </div>
                         <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                             <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -2657,7 +2657,7 @@ const Recherche_new_v4 = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                 >Mon Compte</MenuItem>
                 <MenuItem onClick={(e) => setDialog_1_open(true)} className="mymenu_item"
-                >Deconnexion  </MenuItem>
+                >Déconnexion  </MenuItem>
 
             </Menu>
 
@@ -2677,7 +2677,7 @@ const Recherche_new_v4 = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                 >S'inscrire</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                >Deconnexion </MenuItem>
+                >Déconnexion </MenuItem>
             </Menu>
 
             <Menu
@@ -2712,7 +2712,7 @@ const Recherche_new_v4 = () => {
                                     {String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
                                         style={{ "width": "25%" }} /> Connexion
                                     </button>}
-                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
+                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Déconnexion<img src={connect_green}
                                         style={{ "width": "25%" }} />
                                     </button>}
                                 </div>
diff --git a/src/components/SignIn.js b/src/components/SignIn.js
index a8239ea..92f5b09 100644
--- a/src/components/SignIn.js
+++ b/src/components/SignIn.js
@@ -62,7 +62,7 @@ function SignIn() {
     function Logout_Partenaire() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion compte PRO',
+            message: 'Confirmez la déconnexion compte PRO',
             buttons: [
                 {
                     label: 'Oui',
@@ -103,8 +103,8 @@ function SignIn() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Student_Account_Ent.js b/src/components/Student_Account_Ent.js
index cc9f2d0..b297544 100644
--- a/src/components/Student_Account_Ent.js
+++ b/src/components/Student_Account_Ent.js
@@ -201,8 +201,8 @@ function Student_Account_Ent() {
 
     function logout() {
         confirmAlert({
-            title: 'Deconnexion ?',
-            message: 'Confirmez la deconnexion',
+            title: 'Déconnexion ?',
+            message: 'Confirmez la déconnexion',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/Subdomain_Recherche_new_v2.js b/src/components/Subdomain_Recherche_new_v2.js
index a66143f..e820a06 100644
--- a/src/components/Subdomain_Recherche_new_v2.js
+++ b/src/components/Subdomain_Recherche_new_v2.js
@@ -2052,7 +2052,7 @@ const Subdomain_Recherche_new_v2 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2100,7 +2100,7 @@ const Subdomain_Recherche_new_v2 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2590,7 +2590,7 @@ const Subdomain_Recherche_new_v2 = () => {
                 <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> MySy Information</DialogTitle>
                 <DialogContent className="DialogContent_width">
                     <DialogContentText>
-                        Confirmez la deconnexion
+                        Confirmez la déconnexion
                     </DialogContentText>
 
                 </DialogContent>
@@ -2598,7 +2598,7 @@ const Subdomain_Recherche_new_v2 = () => {
                 <DialogActions>
                     <div className="div_row">
                         <div className="div_row_gauche">
-                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Deconnexion</Button>
+                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Déconnexion</Button>
                         </div>
                         <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                             <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -2627,7 +2627,7 @@ const Subdomain_Recherche_new_v2 = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                 >Mon Compte</MenuItem>
                 <MenuItem onClick={(e) => setDialog_1_open(true)} className="mymenu_item"
-                >Deconnexion  </MenuItem>
+                >Déconnexion  </MenuItem>
 
             </Menu>
 
@@ -2647,7 +2647,7 @@ const Subdomain_Recherche_new_v2 = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                 >S'inscrire</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                >Deconnexion </MenuItem>
+                >Déconnexion </MenuItem>
             </Menu>
 
             <Menu
@@ -2682,7 +2682,7 @@ const Subdomain_Recherche_new_v2 = () => {
                                     {String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
                                         style={{ "width": "25%" }} /> Connexion
                                     </button>}
-                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
+                                    {String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Déconnexion<img src={connect_green}
                                         style={{ "width": "25%" }} />
                                     </button>}
                                 </div>
diff --git a/src/components/UserSignInFirst.js b/src/components/UserSignInFirst.js
index 9a54b5a..ddb4349 100644
--- a/src/components/UserSignInFirst.js
+++ b/src/components/UserSignInFirst.js
@@ -58,7 +58,7 @@ function SignIn() {
     function Logout_Partenaire() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion compte PRO',
+            message: 'Confirmez la déconnexion compte PRO',
             buttons: [
                 {
                     label: 'Oui',
@@ -76,8 +76,8 @@ function SignIn() {
 
     function Logout_User() {
         confirmAlert({
-            title: 'Deconnexion utilisateur ?',
-            message: 'Confirmez la deconnexion utilisateur',
+            title: 'Déconnexion utilisateur ?',
+            message: 'Confirmez la déconnexion utilisateur',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/detail_formation_automatic_files/PROD_25102025/new_detail_formation_2025.js b/src/components/detail_formation_automatic_files/PROD_25102025/new_detail_formation_2025.js
index 81a3129..b276763 100644
--- a/src/components/detail_formation_automatic_files/PROD_25102025/new_detail_formation_2025.js
+++ b/src/components/detail_formation_automatic_files/PROD_25102025/new_detail_formation_2025.js
@@ -997,7 +997,7 @@ const New_C_Detail_Formation_2025 = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -1023,7 +1023,7 @@ const New_C_Detail_Formation_2025 = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/detail_formation_automatic_files/new_detail_formation_2025.js b/src/components/detail_formation_automatic_files/new_detail_formation_2025.js
index 3ed9aca..a4352af 100644
--- a/src/components/detail_formation_automatic_files/new_detail_formation_2025.js
+++ b/src/components/detail_formation_automatic_files/new_detail_formation_2025.js
@@ -1014,7 +1014,7 @@ const New_C_Detail_Formation_2025 = (props) => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -1040,7 +1040,7 @@ const New_C_Detail_Formation_2025 = (props) => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
diff --git a/src/components/header_automatic_files/Header.jsx b/src/components/header_automatic_files/Header.jsx
index e60d52c..8d37dca 100644
--- a/src/components/header_automatic_files/Header.jsx
+++ b/src/components/header_automatic_files/Header.jsx
@@ -182,7 +182,7 @@ const Header = () => {
   return (
     <div className='header_automatic_files'>
 
-      {/***   GESTION Deconnexion */}
+      {/***   GESTION Déconnexion */}
       <Dialog
         open={Dialog_1_open}
         // onClose={Dialog_1_handleClose}
@@ -214,7 +214,7 @@ const Header = () => {
         <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title" >MySy Information</DialogTitle>
         <DialogContent className="DialogContent_width">
           <DialogContentText>
-            Confirmez la deconnexion  <br />
+            Confirmez la déconnexion  <br />
 
 
           </DialogContentText>
@@ -245,7 +245,7 @@ const Header = () => {
 
                 }}
 
-                className="bton_enreg_dialog">Deconnexion</Button>
+                className="bton_enreg_dialog">Déconnexion</Button>
             </div>
             <div className="div_row_droite" style={{ "textAlign": 'center' }}>
               <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -255,7 +255,7 @@ const Header = () => {
         </DialogActions>
       </Dialog>
 
-      {/***  Fin GESTION Deconnexion */}
+      {/***  Fin GESTION Déconnexion */}
 
       <header className="header_new_2025">
         <div className="header-content">
@@ -312,7 +312,7 @@ const Header = () => {
 
             {String(someoneconnected) === String("1") && <div className="login-link hide_on_mobile" onClick={(e) => setDialog_1_open(true)}>
               <img src={Header_User} alt="User icon" className="user-icon hide_on_mobile" />
-              <span className='hide_on_mobile'>Deconnexion</span>
+              <span className='hide_on_mobile'>Déconnexion</span>
             </div>}
 
           </div>
diff --git a/src/components/header_automatic_files/Header_Client_Intranet.jsx b/src/components/header_automatic_files/Header_Client_Intranet.jsx
index 1cf8726..4031911 100644
--- a/src/components/header_automatic_files/Header_Client_Intranet.jsx
+++ b/src/components/header_automatic_files/Header_Client_Intranet.jsx
@@ -250,7 +250,7 @@ const Header_Client_Intranet = () => {
   return (
     <div className='header_automatic_files'>
 
-      {/***   GESTION Deconnexion */}
+      {/***   GESTION Déconnexion */}
       <Dialog
         open={Dialog_1_open}
         // onClose={Dialog_1_handleClose}
@@ -282,7 +282,7 @@ const Header_Client_Intranet = () => {
         <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title" >MySy Information</DialogTitle>
         <DialogContent className="DialogContent_width">
           <DialogContentText>
-            Confirmez la deconnexion  <br />
+            Confirmez la déconnexion  <br />
 
 
           </DialogContentText>
@@ -313,7 +313,7 @@ const Header_Client_Intranet = () => {
 
                 }}
 
-                className="bton_enreg_dialog">Deconnexion</Button>
+                className="bton_enreg_dialog">Déconnexion</Button>
             </div>
             <div className="div_row_droite" style={{ "textAlign": 'center' }}>
               <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -323,7 +323,7 @@ const Header_Client_Intranet = () => {
         </DialogActions>
       </Dialog>
 
-      {/***  Fin GESTION Deconnexion */}
+      {/***  Fin GESTION Déconnexion */}
 
       <header className="header_new_2025">
         <div className="header-content">
@@ -372,7 +372,7 @@ const Header_Client_Intranet = () => {
 
             {String(someoneconnected) === String("1") && <div className="login-link hide_on_mobile" onClick={(e) => setDialog_1_open(true)}>
               <img src={Header_User} alt="User icon" className="user-icon hide_on_mobile" />
-              <span className='hide_on_mobile'>Deconnexion</span>
+              <span className='hide_on_mobile'>Déconnexion</span>
             </div>}
 
           </div>
diff --git a/src/components/header_automatic_files/Header_ENT_Student.jsx b/src/components/header_automatic_files/Header_ENT_Student.jsx
index e23c3b2..f8b7652 100644
--- a/src/components/header_automatic_files/Header_ENT_Student.jsx
+++ b/src/components/header_automatic_files/Header_ENT_Student.jsx
@@ -306,7 +306,7 @@ const Header_ENT_Student = () => {
   return (
     <div className='header_automatic_files'>
 
-      {/***   GESTION Deconnexion */}
+      {/***   GESTION Déconnexion */}
       <Dialog
         open={Dialog_1_open}
         // onClose={Dialog_1_handleClose}
@@ -338,7 +338,7 @@ const Header_ENT_Student = () => {
         <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title" >MySy Information</DialogTitle>
         <DialogContent className="DialogContent_width">
           <DialogContentText>
-            Confirmez la deconnexion de l'ENT <br />
+            Confirmez la déconnexion de l'ENT <br />
 
 
           </DialogContentText>
@@ -369,7 +369,7 @@ const Header_ENT_Student = () => {
 
                 }}
 
-                className="bton_enreg_dialog">Deconnexion</Button>
+                className="bton_enreg_dialog">Déconnexion</Button>
             </div>
             <div className="div_row_droite" style={{ "textAlign": 'center' }}>
               <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -379,7 +379,7 @@ const Header_ENT_Student = () => {
         </DialogActions>
       </Dialog>
 
-      {/***  Fin GESTION Deconnexion */}
+      {/***  Fin GESTION Déconnexion */}
 
       <header className="header_new_2025">
         <div className="header-content">
@@ -436,7 +436,7 @@ const Header_ENT_Student = () => {
 
             {String(someoneconnected) === String("1") && <div className="login-link hide_on_mobile" onClick={(e) => setDialog_1_open(true)}>
               <img src={Header_User} alt="User icon" className="user-icon hide_on_mobile" />
-              <span className='hide_on_mobile'>Deconnexion</span>
+              <span className='hide_on_mobile'>Déconnexion</span>
             </div>}
 
           </div>
diff --git a/src/components/marketplace_automatic_files/new_marketplace_2025.js b/src/components/marketplace_automatic_files/new_marketplace_2025.js
index bca8a87..95cb90c 100644
--- a/src/components/marketplace_automatic_files/new_marketplace_2025.js
+++ b/src/components/marketplace_automatic_files/new_marketplace_2025.js
@@ -2073,7 +2073,7 @@ const New_C_Marketplace_2025 = () => {
     function user_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (user)',
+            message: 'Confirmez la déconnexion (user)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2121,7 +2121,7 @@ const New_C_Marketplace_2025 = () => {
     function part_logout() {
         confirmAlert({
             title: '',
-            message: 'Confirmez la deconnexion (pro)',
+            message: 'Confirmez la déconnexion (pro)',
             buttons: [
                 {
                     label: 'Oui',
@@ -2901,7 +2901,7 @@ const New_C_Marketplace_2025 = () => {
                 <DialogTitle>MySy Information</DialogTitle>
                 <DialogContent className="DialogContent_width">
                     <DialogContentText>
-                        Confirmez la deconnexion
+                        Confirmez la déconnexion
                     </DialogContentText>
 
                 </DialogContent>
@@ -2909,7 +2909,7 @@ const New_C_Marketplace_2025 = () => {
                 <DialogActions>
                     <div className="div_row">
                         <div className="div_row_gauche">
-                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Deconnexion</Button>
+                            <Button onClick={part_logout_confirmation} className="bton_enreg_dialog">Déconnexion</Button>
                         </div>
                         <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                             <Button onClick={Dialog_1_handleClose_buton} className="bton_annule_dialog" >Annuler</Button>
@@ -2938,7 +2938,7 @@ const New_C_Marketplace_2025 = () => {
                 <MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
                 >Mon Compte</MenuItem>
                 <MenuItem onClick={(e) => setDialog_1_open(true)} className="mymenu_item"
-                >Deconnexion  </MenuItem>
+                >Déconnexion  </MenuItem>
 
             </Menu>
 
@@ -2958,7 +2958,7 @@ const New_C_Marketplace_2025 = () => {
                 <MenuItem onClick={handleAccountCreation} className="mymenu_item"
                 >S'inscrire</MenuItem>
                 <MenuItem onClick={AccountMenu_Close} className="mymenu_item"
-                >Deconnexion </MenuItem>
+                >Déconnexion </MenuItem>
             </Menu>
 
             <Menu
diff --git a/src/components/sidebar.js b/src/components/sidebar.js
index b02bab7..401f4be 100644
--- a/src/components/sidebar.js
+++ b/src/components/sidebar.js
@@ -71,8 +71,8 @@ const SideBar = () => {
 
   function logout() {
     confirmAlert({
-      title: 'Deconnexion ?',
-      message: 'Confirmez la deconnexion',
+      title: 'Déconnexion ?',
+      message: 'Confirmez la déconnexion',
       buttons: [
         {
           label: 'Oui',
@@ -210,7 +210,7 @@ const SideBar = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -219,7 +219,7 @@ const SideBar = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -275,7 +275,7 @@ const SideBar = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -284,7 +284,7 @@ const SideBar = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
@@ -372,7 +372,7 @@ const SideBar = () => {
               color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
               padding: "5px", letterSpacing: "2px"
             }}>
-              <i> Deconnexion </i>
+              <i> Déconnexion </i>
             </Button>
 
 
@@ -381,7 +381,7 @@ const SideBar = () => {
           {typeof (stored_user) != "undefined" &&
             /* Connexion utilisateur active */
             <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
-              Deconnexion
+              Déconnexion
             </Button>
           }
         </Menu>}
diff --git a/src/pages/help_page.js b/src/pages/help_page.js
new file mode 100644
index 0000000..e0878c4
--- /dev/null
+++ b/src/pages/help_page.js
@@ -0,0 +1,18 @@
+
+import HelpArticle_new_v2 from "../components/Recherche_Help_new_v2";
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Footer_Without_Testimony_2025_V2 from "../components/footer_automatic_files/Layout_Without_Testimony";
+
+export default function help_page() {
+    return (
+        <div>
+            <New_Navigation_2025 />
+            <New_C_Header_2025_V2 />
+            <HelpArticle_new_v2 />
+            <New_C_Footer_Without_Testimony_2025_V2 />
+
+
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/new_p_article_help_detail_2025.js b/src/pages/new_p_article_help_detail_2025.js
new file mode 100644
index 0000000..dc9e44a
--- /dev/null
+++ b/src/pages/new_p_article_help_detail_2025.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+import New_C_Footer_2025_V2 from "../components/footer_automatic_files/Layout";
+import New_C_Header_2025_V2 from "../components/header_automatic_files/Header";
+import New_C_Article_Help_2025 from "../components/New_C_Article_Help_2025";
+import New_Navigation_2025 from "../components/New_Navigation_2025";
+
+const new_p_article_help_detail_2025 = () => {
+
+
+  return (
+    <div>
+      <New_Navigation_2025 />
+      <New_C_Header_2025_V2 />
+
+      <New_C_Article_Help_2025 />
+
+      <New_C_Footer_2025_V2 />
+
+    </div>
+
+  )
+}
+
+
+export default new_p_article_help_detail_2025;
diff --git a/src/pages/recherchearticles.js b/src/pages/recherchearticles.js
index 5547a83..ac6d6f0 100644
--- a/src/pages/recherchearticles.js
+++ b/src/pages/recherchearticles.js
@@ -15,6 +15,6 @@ export default function displaydetailarticle() {
             <New_C_Footer_Without_Testimony_2025_V2 />
 
 
-        </div>
+        </div> 
     );
 }
\ No newline at end of file