diff --git a/src/components/LandingPage_2026.js b/src/components/LandingPage_2026.js
new file mode 100644
index 0000000..8c8c3e5
--- /dev/null
+++ b/src/components/LandingPage_2026.js
@@ -0,0 +1,1361 @@
+// LandingPage_2026.jsx
+// Thème aligné sur la charte fournie (fond clair, bleu primaire, accent turquoise).
+import React, { useMemo, useState } from "react";
+
+export default function LandingPage_2026() {
+ const year = new Date().getFullYear();
+ const [faqOpen, setFaqOpen] = useState(0);
+ const [form, setForm] = useState({
+ fullname: "",
+ email: "",
+ phone: "",
+ org: "",
+ size: "1-10",
+ goal: "demo",
+ message: "",
+ consent: true,
+ });
+ const [submitted, setSubmitted] = useState(false);
+
+ const features = useMemo(
+ () => [
+ { title: "CRM & suivi des demandes", desc: "Centralisez prospects, relances, historiques et documents.", result: "Moins d’oubli, plus d’inscriptions.", icon: "👥" },
+ { title: "Planification sans collisions", desc: "Salles, formateurs, groupes, capacités : tout est aligné.", result: "Un planning fiable, enfin.", icon: "🗓️" },
+ { title: "Suivi apprenants & traçabilité", desc: "Présences, documents, évaluations et pièces justificatives.", result: "Preuves retrouvables en 2 clics.", icon: "✅" },
+ { title: "Qualité & conformité", desc: "Dossier qualité, contrôles, indicateurs et exports.", result: "Des audits… sans sueur froide.", icon: "🛡️" },
+ { title: "Facturation & pilotage", desc: "Suivi financier, performances par session/période, KPI.", result: "Vous pilotez, pas au feeling.", icon: "📊" },
+ { title: "Équipe & rôles", desc: "Droits, circuits, commentaires internes, responsabilités.", result: "Chacun sait quoi faire, quand.", icon: "🔐" },
+ ],
+ []
+ );
+
+ const steps = useMemo(
+ () => [
+ { title: "Collectez les demandes (sans chaos)", desc: "Formulaires, appels, emails : tout entre dans un flux unique." },
+ { title: "Planifiez et remplissez vos sessions", desc: "Capacités, ressources, disponibilités : vous voyez clair, vite." },
+ { title: "Suivez l’exécution (preuves incluses)", desc: "Présences, docs, évaluations : traçabilité automatique." },
+ { title: "Pilotez et améliorez", desc: "Tableaux de bord, indicateurs qualité, reporting financier." },
+ ],
+ []
+ );
+
+ const comparison = useMemo(
+ () => [
+ { crit: "Planification ressources (salles/formateurs/capacités)", elyos: "✓ Avancé", crm: "◐ Basique", erp: "✓ Variable", lms: "✕ Souvent absent", excel: "✕ Manuel" },
+ { crit: "Traçabilité & dossier qualité centralisé", elyos: "✓ Intégré", crm: "✕", erp: "◐ Selon modules", lms: "◐ Partiel", excel: "✕" },
+ { crit: "Suivi apprenants (documents/présences/évaluations)", elyos: "✓", crm: "◐", erp: "◐", lms: "✓", excel: "✕" },
+ { crit: "Pilotage (KPI sessions, remplissage, CA)", elyos: "✓", crm: "◐", erp: "✓", lms: "◐", excel: "◐" },
+ { crit: "Mise en route guidée (import + modèles)", elyos: "✓", crm: "◐", erp: "◐", lms: "◐", excel: "✕" },
+ ],
+ []
+ );
+
+ const pricing = useMemo(
+ () => [
+ { name: "Essentiel", forWho: "Pour démarrer proprement", bullets: ["CRM + sessions + planning", "Suivi apprenants & documents", "Support standard"], cta: "Demander une démo", highlight: false },
+ { name: "Pro", forWho: "Pour scaler sans se noyer", bullets: ["Qualité & conformité avancées", "Reporting & tableaux de bord", "Rôles & workflows"], cta: "Planifier une démo", highlight: true },
+ { name: "Entreprise", forWho: "Multi-sites / besoins spécifiques", bullets: ["Paramétrage sur-mesure", "Accompagnement renforcé", "Intégrations selon contexte"], cta: "Parler à un expert", highlight: false },
+ ],
+ []
+ );
+
+ const testimonials = useMemo(
+ () => [
+ { quote: "On a réduit le temps administratif et on retrouve enfin toutes les preuves sans fouiller 12 dossiers.", name: "Responsable OF", meta: "OF tertiaire • ~300 apprenants/an" },
+ { quote: "Le planning est devenu fiable : ressources, salles, formateurs… plus de collisions, moins de stress.", name: "Coordinateur pédagogique", meta: "CFA • 12 formateurs" },
+ { quote: "Les indicateurs qualité sont clairs. Les audits sont passés de “panique” à “routine”.", name: "Directrice", meta: "Organisme multi-sites" },
+ ],
+ []
+ );
+
+ const faqs = useMemo(
+ () => [
+ { q: "Combien de temps pour démarrer ?", a: "On vise une mise en route rapide : import des données, modèles, paramétrage et une première session pilotée ensemble. Le rythme dépend surtout de votre volume et de vos processus." },
+ { q: "Peut-on importer nos données (Excel, CRM, etc.) ?", a: "Oui. On peut importer vos contacts, sessions, apprenants et historiques selon la structure. On vous aide à nettoyer le minimum vital (promis, sans punition)." },
+ { q: "Où sont hébergées les données ?", a: "Précisez votre politique d’hébergement ici (ex. France / UE), ainsi que les éléments de sécurité (sauvegardes, chiffrement, accès)." },
+ { q: "Est-ce personnalisable ?", a: "Oui : champs, statuts, circuits, modèles de documents, rôles et droits. L’objectif est de s’adapter à votre réalité sans transformer l’outil en patchwork." },
+ { q: "Support & accompagnement : comment ça se passe ?", a: "Support par email/ticket (et/ou téléphone selon offre), base de connaissances, et accompagnement au démarrage. Ajoutez ici vos SLA si vous en avez." },
+ { q: "Intégrations (LMS, visioconf, compta) ?", a: "Selon votre stack. Listez ici vos intégrations natives et indiquez ce qui se fait sur demande." },
+ ],
+ []
+ );
+
+ function onChange(e) {
+ const { name, value, type, checked } = e.target;
+ setForm((f) => ({ ...f, [name]: type === "checkbox" ? checked : value }));
+ }
+
+ function onSubmit(e) {
+ e.preventDefault();
+ setSubmitted(true);
+ }
+
+ return (
+
+
+
+ scrollToId("contact")} onSecondaryClick={() => scrollToId("dashboards")} />
+ {/* */}
+
+
+
+
+
+
+
+
+
+
💡
+
+ Astuce conversion : placez une capture ou une mini-vidéo ici (dashboard, planning, dossier qualité).
+ Une image vaut 1000 “on peut tout faire”.
+
+
+
+
+
+
+
+ {features.map((f) => )}
+
+
+
+
Ce que vous remplacez (sans regret)
+
+ - Excel / Google Sheets
+ - Dossiers Drive éparpillés
+ - Relances dans la boîte mail
+ - “Tu me renvoies l’émargement ?”
+ - Reporting à la main
+
+
+
+
+
+
+ {steps.map((s, idx) => (
+
+ ))}
+
+
+
+
+
Exemple : tableau de bord
+
Remplissage, CA, sessions à risque, performance par période… (Remplacez ce texte par une vraie capture dès que possible.)
+
+ - Remplissage par session & période
+ - Alertes sur sessions sous-capacité
+ - Qualité : indicateurs et plans d’action
+
+
+
+
+
+
(Placez ici une image/vidéo : planning, dashboard, dossier qualité.)
+
+
+
+
+ {/*
+
+
+
+
+ | Critère | MySy Training | CRM | ERP | LMS | Excel |
+
+
+
+ {comparison.map((r) => (
+
+ | {r.crit} |
+ {r.elyos} | {r.crm} | {r.erp} | {r.lms} | {r.excel} |
+
+ ))}
+
+
+
+
+
+ Vous avez déjà un outil ? On peut vous montrer une migration réaliste, sans “big bang” (et sans sacrifier l’activité).
+
+
+ */}
+
+
+
+
+
+
+
+
+
+ | Fonctionnalités |
+ MySy Training |
+ Digiforma |
+ Dendreo |
+ Autre solution |
+
+
+
+
+ | CRM & suivi des demandes |
+ ✔ |
+ ◐ |
+ ◐ |
+ ✖ |
+
+
+ | Planification sessions & ressources |
+ ✔ |
+ ✔ |
+ ✔ |
+ ◐ |
+
+
+ | Suivi apprenants & parcours |
+ ✔ |
+ ✔ |
+ ✔ |
+ ◐ |
+
+
+ | Émargement & feuilles de présence |
+ ✔ |
+ ✔ |
+ ✔ |
+ ◐ |
+
+
+ | Qualité & conformité (preuves / indicateurs) |
+ ✔ |
+ ◐ |
+ ◐ |
+ ✖ |
+
+
+ | Reporting & tableaux de bord |
+ ✔ |
+ ◐ |
+ ◐ |
+ ✖ |
+
+
+ | Mise en route guidée + support |
+ ✔ |
+ ◐ |
+ ◐ |
+ ✖ |
+
+
+
+
+
+
+ Légende : ✔ = inclus · ◐ = partiel / selon offre · ✖ = absent
+ (Ajuste ces cases selon ton positionnement exact — je te mets un format “marketable” par défaut.)
+
+
+
+
+ Vous avez déjà un outil ? On peut vous montrer une migration réaliste, sans “big bang” (et sans sacrifier l’activité).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
BASIQUE - 105 € par mois
+
Pour démarrer avec une base solide : gestion, planning, suivi.
+
+ - Planning sessions & ressources
+ - Suivi apprenants
+ - Exports & documents
+
+
+
Demander un devis
+
+
+
+
STANDARD - 209 € par mois
+
Le meilleur équilibre pour piloter l’activité au quotidien.
+
+ - Tout Essentiel
+ - CRM & relances
+ - Qualité & indicateurs
+ - Tableaux de bord
+
+
+
Planifier une démo
+
+
+
+
GOLD - 419 € par mois
+
Pour multi-sites, besoins avancés, accompagnement renforcé.
+
+ - Tout Pro
+ - Paramétrages avancés
+ - Accompagnement dédié
+ - Intégrations spécifiques
+
+
+
Parler à un expert
+
+
+
+
+
+
+
+
+
+
“On a enfin une vision claire des sessions et des inscriptions. Moins d’aller-retours, plus d’efficacité.”
+
+
+ Responsable pédagogique · CFA
+ ★★★★★
+
+
+
+
“Le suivi qualité est devenu fluide. On retrouve les preuves en 2 clics. Oui, 2. Pas 17.”
+
+ Direction · Organisme de formation
+ ★★★★★
+
+
+
+
“Les tableaux de bord nous ont aidés à mieux piloter le remplissage et à anticiper.”
+
+ Administration · Centre de formation
+ ★★★★★
+
+
+
+
+
+
+
+
+
+ {faqs.map((item, idx) => (
+ setFaqOpen((cur) => (cur === idx ? -1 : idx))} />
+ ))}
+
+
+
+ {/* */}
+
+
+
+
+
+ );
+}
+
+function Header() {
+ return (
+
+ );
+}
+
+function Hero({ onPrimaryClick, onSecondaryClick }) {
+ return (
+
+
+
+
ELYOS, l’offre tout-en-un pour gérer votre organisme de formation
+
Toutes les fonctionnalités dont vous avez besoin, au meilleur prix.
+
+
+
+
+
+
+
+
+
CRM
+
Planification
+
Suivi apprenants
+
Qualité
+
Reporting
+
+
+
+
+
+
+
+
+ );
+}
+
+function TrustBar() {
+ return (
+
+
+
CRM
+
Planification
+
Suivi apprenants
+
Qualité
+
Reporting
+
+
+ );
+}
+
+function Section({ id, title, subtitle, children }) {
+ return (
+
+
+
+
{title}
+ {subtitle ?
{subtitle}
: null}
+
+ {children}
+
+
+ );
+}
+
+function Benefit({ title, desc, icon }) {
+ return (
+
+
{icon}
+
{title}
+
{desc}
+
+ );
+}
+
+function FeatureCard({ title, desc, result, icon }) {
+ return (
+
+
+
{title} {icon}
+
{desc}
+
Résultat : {result}
+
+ );
+}
+
+function PriceCard({ name, forWho, bullets, cta, highlight, onClick }) {
+ return (
+
+
{name}
+
{forWho}
+
{bullets.map((b) => - {b}
)}
+
+
+ );
+}
+
+function Testimonial({ quote, name, meta }) {
+ return (
+
+ );
+}
+
+function FaqItem({ q, a, open, onToggle }) {
+ return (
+
+
+ {open ?
{a}
: null}
+
+ );
+}
+
+function Field({ label, name, value, onChange, type = "text", required = false }) {
+ return (
+
+ );
+}
+
+function TextArea({ label, name, value, onChange, placeholder }) {
+ return (
+
+ );
+}
+
+function Select({ label, name, value, onChange, options }) {
+ return (
+
+ );
+}
+
+function Footer({ year }) {
+ return (
+
+ );
+}
+
+function scrollToId(id) {
+ const el = document.getElementById(id);
+ if (!el) return;
+ el.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+const css = `
+:root{
+
+ /* Palette (d’après la capture fournie) */
+ --bg: #F3F4FB;
+ --card: #FFFFFF;
+ --text: #182951;
+ /* bleu nuit */
+ --muted: #5B6785;
+ --line: rgba(24, 41, 81, .12);
+
+ --primary: #3E6EE3;
+ /* bleu CTA */
+ --primary-2: #2F5ED8;
+ --accent: #0B9889;
+ /* vert/bleu logo */
+
+ --radius: 18px;
+ --radius2: 22px;
+ --shadow: 0 12px 36px rgba(24, 41, 81, .12);
+
+
+ /* pills */
+ --r2: 20px;
+ /* cards */
+ --shadow: 0 14px 40px rgba(15, 23, 42, .10);
+
+ --max: 1120px;
+
+ --bg: #E6E8F1; /* fond page (≈ 230,232,241) */
+ --surface: #FFFFFF; /* cartes */
+ --surface2:#F6F7FB; /* zones alternées */
+ --text: #102048; /* titre (≈ 16,32,72) */
+ --muted:#667085;
+ --line: rgba(16,32,72,.12);
+ --primary:#3868E0; /* bouton (≈ 56,104,224) */
+ --primaryHover:#2F5FD6;
+ --teal:#08A090; /* logo (≈ 8,160,144) */
+ --shadow: 0 12px 34px rgba(16,32,72,.10);
+}
+
+*{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{
+ background: var(--bg);
+ color:var(--text);
+ font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
+ line-height:1.55;
+}
+a{color:inherit;text-decoration:none}
+a:hover{text-decoration:underline}
+.lp{min-height:100vh}
+
+.container{width:min(1120px, calc(100% - 32px)); margin:0 auto}
+.muted{color:var(--muted)}
+.small{font-size:.92rem}
+.h1{font-size: clamp(2.1rem, 2.4vw + 1rem, 3.4rem); line-height:1.06; margin:0 0 .6rem}
+.h2{font-size: clamp(1.5rem, 1.4vw + 1rem, 2.2rem); margin:0}
+.h3{font-size:1.1rem; margin:0 0 .5rem}
+.lead{font-size:1.05rem; margin:0; color: #59607A}
+.req{color:#B42318}
+
+.header{
+ position:sticky; top:0; z-index:50;
+ background: rgba(255,255,255,.86);
+ backdrop-filter: blur(10px);
+ border-bottom:1px solid var(--line);
+}
+.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
+.brand{display:flex; align-items:center; gap:10px}
+.logozz{
+ width:34px; height:34px; border-radius:10px;
+ background: linear-gradient(135deg, var(--teal), #19C2A6);
+}
+.brand__name{font-weight:900; letter-spacing:.5px}
+.nav{display:flex; align-items:center; gap:14px}
+.nav a{font-size:.95rem}
+.nav__muted{opacity:.8}
+@media (max-width: 980px){
+ .nav a{display:none}
+ .nav .btn{display:none}
+ .nav .btn--outline{display:none}
+ .nav .nav__muted{display:inline}
+}
+
+.hero{padding:68px 0 22px}
+.hero__inner{display:grid; grid-template-columns: 1.25fr .75fr; gap:28px; align-items:center}
+@media (max-width: 900px){
+ .hero__inner{grid-template-columns:1fr}
+}
+
+.ctaRow{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 0}
+
+.badgeCard{
+ width: 220px; margin-left:auto;
+ background: var(--surface);
+ border-radius: 12px;
+ box-shadow: var(--shadow);
+ padding: 18px 18px 14px;
+ text-align:center;
+}
+.badgeCard__small{font-size:1.0rem; color:#3B4460; margin-bottom:2px}
+.badgeCard__big{font-size:2.2rem; font-weight:900; line-height:1.0}
+.badgeCard__mid{font-size:1.1rem; font-weight:900; letter-spacing:.6px}
+@media (max-width: 900px){
+ .badgeCard{margin: 8px 0 0}
+}
+
+.trust{padding: 8px 0 18px}
+.trust__inner{display:flex; flex-wrap:wrap; gap:10px}
+.trust__item{
+ padding:10px 12px; border-radius:999px;
+ background: rgba(255,255,255,.8);
+ border:1px solid var(--line);
+ box-shadow: 0 6px 18px rgba(16,32,72,.06);
+ font-size:.95rem;
+}
+
+.section{padding: 42px 0}
+.section__head{margin-bottom:18px; max-width: 100%; text-align:center}
+
+.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
+@media (max-width: 900px){ .grid3{grid-template-columns:1fr} }
+
+.box{
+ padding:16px; border-radius:14px;
+ border:1px solid var(--line);
+ background: var(--surface);
+ box-shadow: var(--shadow);
+}
+.box__icon{font-size:1.25rem}
+.box__title{font-weight:700; margin:8px 0 6px}
+.result{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(16,32,72,.16); color: #11B19B;}
+
+.callout{
+ margin-top:16px;
+ display:flex; gap:12px; align-items:flex-start;
+ padding:14px; border-radius:14px;
+ border:1px solid rgba(56,104,224,.22);
+ background: rgba(56,104,224,.06);
+}
+.callout__icon{font-size:1.2rem}
+.callout__content{flex:1}
+
+.replace{margin-top:18px}
+.chips{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:10px}
+.chips li{
+ padding:9px 12px; border-radius:999px;
+ border:1px solid var(--line);
+ background: rgba(255,255,255,.85);
+ font-size:.95rem;
+}
+
+.steps{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
+@media (max-width: 900px){ .steps{grid-template-columns:1fr} }
+.step{
+ display:flex; gap:12px; align-items:flex-start;
+ padding:14px; border-radius:14px;
+ border:1px solid var(--line);
+ background: var(--surface);
+ box-shadow: var(--shadow);
+}
+.step__n{
+ width:34px; height:34px; border-radius:999px;
+ display:grid; place-items:center;
+ background: rgba(56,104,224,.10);
+ color: var(--primary);
+ font-weight:900;
+}
+.step__title{font-weight:900; margin-bottom:4px}
+
+.mock{
+ margin-top:16px;
+ display:grid; grid-template-columns: 1fr 1fr; gap:14px;
+ padding:16px; border-radius:14px; border:1px solid var(--line);
+ background: rgba(255,255,255,.65);
+}
+@media (max-width: 900px){ .mock{grid-template-columns:1fr} }
+.mock__screen{
+ height: 210px; border-radius:12px;
+ border:1px solid rgba(16,32,72,.12);
+ background: rgba(16,32,72,.03);
+ overflow:hidden;
+}
+.mock__bar{height:14px; background: rgba(16,32,72,.08)}
+.mock__lines{padding:14px; display:grid; gap:10px}
+.mock__lines div{height:12px; border-radius:8px; background: rgba(16,32,72,.08)}
+
+.tableWrap{
+ border:1px solid var(--line);
+ border-radius:14px;
+ overflow:auto;
+ background: var(--surface);
+ box-shadow: var(--shadow);
+}
+.table{width:100%; border-collapse: collapse; min-width: 780px}
+.table th, .table td{padding:12px 12px; border-bottom:1px solid rgba(16,32,72,.10); text-align:left; font-size:.95rem}
+.table th{position:sticky; top:0; background: #FFFFFF}
+.tdStrong{font-weight:800}
+
+.note{
+ margin-top:12px; padding:14px;
+ border:1px solid rgba(8,160,144,.22);
+ border-radius:14px; background: rgba(8,160,144,.06);
+ display:flex; align-items:center; justify-content:space-between; gap:12px;
+}
+@media (max-width: 900px){ .note{flex-direction:column; align-items:flex-start} }
+
+.price{
+ position:relative;
+ padding:16px; border-radius:14px; border:1px solid var(--line);
+ background: var(--surface);
+ box-shadow: var(--shadow);
+}
+.price--highlight{ border-color: rgba(56,104,224,.35); box-shadow: 0 18px 44px rgba(56,104,224,.14); }
+.price__name{font-weight:900; font-size:1.1rem; margin-bottom:4px}
+
+.list{margin:10px 0 0; padding-left:18px; color:#3B4460; text-align: left;}
+.list li{margin:6px 0}
+
+.testimonial{
+ padding:16px; border-radius:14px; border:1px solid var(--line);
+ background: var(--surface);
+ box-shadow: var(--shadow);
+}
+.testimonial__quote{margin:0 0 10px; color:#3B4460}
+.testimonial__who{display:flex; flex-direction:column; gap:2px}
+
+.faq{display:grid; gap:10px; }
+.faqItem{
+ border:1px solid var(--line);
+ border-radius:14px;
+ background: var(--surface);
+ overflow:hidden;
+ box-shadow: var(--shadow);
+}
+.faqBtn{
+ width:100%;
+ display:flex; justify-content:space-between; gap:12px;
+ padding:14px;
+ background: transparent; color: var(--text);
+ border:none; cursor:pointer; font-size:1rem; text-align:left;
+}
+.faqBtn:hover{background: rgba(56,104,224,.05)}
+.faqAnswer{padding:0 14px 14px}
+.chev{font-weight:900; opacity:.75}
+
+.contact{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
+@media (max-width: 900px){ .contact{grid-template-columns:1fr} }
+.contact__left,.contact__right{
+ padding:16px; border-radius:14px; border:1px solid var(--line);
+ background: var(--surface);
+ box-shadow: var(--shadow);
+}
+
+.badgeRow{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0}
+.badge{
+ padding:9px 12px; border-radius:999px;
+ border:1px solid var(--line); background: rgba(56,104,224,.06);
+ font-size:.95rem; color: #3B4460;
+}
+
+.form{display:grid; gap:12px}
+.row2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
+@media (max-width: 600px){ .row2{grid-template-columns:1fr} }
+
+.field{display:grid; gap:6px}
+.label{font-size:.92rem; color:#3B4460}
+.input,.select,.textarea{
+ width:100%;
+ padding:11px 12px;
+ border-radius:12px;
+ border:1px solid rgba(16,32,72,.14);
+ background: #FFFFFF;
+ color: var(--text);
+ outline:none;
+}
+.input:focus,.select:focus,.textarea:focus{
+ border-color: rgba(56,104,224,.55);
+ box-shadow: 0 0 0 4px rgba(56,104,224,.16);
+}
+.check{display:flex; gap:10px; align-items:flex-start; color:#3B4460; font-size:.95rem}
+.check input{margin-top:4px}
+
+.btn{
+ padding:11px 18px;
+ border-radius:999px;
+ border:1px solid var(--primary);
+ background: var(--primary);
+ color:#FFFFFF;
+ font-weight:800;
+ cursor:pointer;
+ transition: transform .08s ease, background .12s ease, border-color .12s ease;
+}
+.btn:hover{background: var(--primaryHover); border-color: var(--primaryHover)}
+.btn:active{transform: translateY(1px)}
+.btn--outline{
+ background: transparent;
+ color: #3B4460;
+ border-color: rgba(16,32,72,.18);
+}
+.btn--outline:hover{
+ background: rgba(255,255,255,.9);
+ border-color: rgba(16,32,72,.22);
+}
+.btn--link{
+ background:transparent; border:none; color: var(--primary);
+ font-weight:800; cursor:pointer; padding:0; margin-left:10px;
+}
+.btn--sm{padding:9px 14px; font-size:.95rem}
+.btn--full{width:100%}
+.btn:disabled{opacity:.6; cursor:not-allowed}
+
+.success{
+ display:flex; gap:12px; align-items:flex-start;
+ padding:14px; border-radius:14px;
+ border:1px solid rgba(8,160,144,.25);
+ background: rgba(8,160,144,.06);
+}
+.success__icon{font-size:1.2rem}
+.success__title{font-weight:900; margin-bottom:4px}
+
+.footer{padding: 26px 0 40px; border-top:1px solid var(--line); background: rgba(255,255,255,.65)}
+.footer__inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
+
+
+ .hero-card {
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: var(--radius2);
+ box-shadow: var(--shadow);
+ padding: 18px;
+ }
+
+ /* Form */
+ form {
+ margin-top: 10px;
+ }
+
+ .form-grid {
+ display: grid;
+ gap: 10px;
+ }
+
+ .row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+ }
+
+ .input {
+ width: 100%;
+ padding: 11px 12px;
+ border-radius: 14px;
+ border: 1px solid var(--line);
+ background: #fff;
+ color: var(--text);
+ outline: none;
+ font-size: 14px;
+ }
+
+ .input:focus {
+ border-color: rgba(62, 110, 227, .45);
+ box-shadow: 0 0 0 4px rgba(62, 110, 227, .12);
+ }
+
+ .fineprint {
+ margin: 10px 0 0;
+ color: var(--muted);
+ font-size: 12px;
+ }
+
+ .pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 12px;
+ border-radius: var(--radius);
+ background: #eef2ff;
+ color: #2f5ce0;
+ font-weight: 700;
+ font-size: 12px;
+ border: 1px solid #dbe3ff;
+ margin-bottom: 10px;
+ }
+
+ .dot {
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ background: var(--accent);
+ box-shadow: 0 0 0 4px rgba(11, 152, 137, .14);
+ }
+
+ /* Comparison table */
+ .table-wrap {
+ background: #fff;
+ border: 1px solid var(--line);
+ border-radius: var(--radius2);
+ box-shadow: var(--shadow);
+ overflow: hidden;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 14.5px;
+ }
+
+ thead th {
+ background: rgba(62, 110, 227, .06);
+ color: var(--text);
+ font-weight: 900;
+ padding: 14px 12px;
+ border-bottom: 1px solid var(--line);
+ text-align: center;
+ white-space: nowrap;
+ }
+
+ thead th:first-child {
+ text-align: left;
+ padding-left: 16px;
+ }
+
+ tbody td {
+ padding: 12px;
+ border-bottom: 1px solid rgba(24, 41, 81, .08);
+ text-align: center;
+ }
+
+ tbody td:first-child {
+ text-align: left;
+ padding-left: 16px;
+ color: var(--text);
+ font-weight: 600;
+ }
+
+ tbody tr:last-child td {
+ border-bottom: none;
+ }
+
+ .tag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 46px;
+ padding: 6px 10px;
+ border-radius: 999px;
+ font-weight: 900;
+ border: 1px solid var(--line);
+ background: #fff;
+ }
+
+ .yes {
+ color: #0b7a3a;
+ background: rgba(11, 152, 137, .10);
+ border-color: rgba(11, 152, 137, .22);
+ }
+
+ .maybe {
+ color: #8a6a00;
+ background: rgba(255, 194, 0, .12);
+ border-color: rgba(255, 194, 0, .28);
+ }
+
+ .no {
+ color: #9b1c1c;
+ background: rgba(239, 68, 68, .10);
+ border-color: rgba(239, 68, 68, .22);
+ }
+
+ .tbd {
+ color: var(--muted);
+ background: rgba(24, 41, 81, .04);
+ }
+
+ .note {
+ margin-top: 10px;
+ color: var(--muted);
+ font-size: 12.5px;
+ }
+
+ /* FAQ */
+ .faq {
+
+ margin: 0 auto;
+ display: grid;
+ gap: 12px;
+ }
+
+ details {
+ background: #fff;
+ border: 1px solid var(--border);
+ border-radius: var(--r2);
+ box-shadow: 0 10px 20px rgba(15, 23, 42, .06);
+ padding: 14px 16px;
+ }
+
+ summary {
+ cursor: pointer;
+ font-weight: 700;
+ color: #15234a;
+ list-style: none;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ }
+
+ summary::-webkit-details-marker {
+ display: none;
+ }
+
+ summary::after {
+ content: "+";
+ font-weight: 700;
+ color: #2f5ce0;
+ font-size: 18px;
+ }
+
+ details[open] summary::after {
+ content: "—";
+ }
+
+ details p {
+ margin: 10px 0 0;
+ color: #64748b;
+ font-size: 14px;
+ }
+
+
+ /* Testimonials */
+ .quotes {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 14px;
+ }
+
+ .quote {
+ padding: 16px;
+ border-radius: var(--radius);
+ border: 1px solid rgba(255, 255, 255, .12);
+
+ background: white;
+ }
+
+ .quote p {
+ margin: 0 0 10px;
+ color: var(--muted);
+ font-size: 14px;
+ }
+
+ .who {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ color: var(--muted2);
+ font-size: 12px;
+ }
+
+ .stars {
+ letter-spacing: 1px;
+
+ color: green;
+ }
+
+
+ /* Sections */
+ section {
+ padding: 44px 0;
+ }
+
+ .section-head {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 14px;
+ margin-bottom: 16px;
+ }
+
+ h2 {
+ margin: 0;
+ font-size: clamp(22px, 2.6vw, 34px);
+ letter-spacing: -0.4px;
+ }
+
+ .sub {
+ margin: 6px 0 0;
+ color: var(--muted);
+ max-width: 72ch;
+ font-size: 15.5px;
+ }
+
+
+ /* Pricing */
+ .pricing {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 14px;
+ align-items: stretch;
+ }
+
+ .plan {
+ padding: 18px;
+ border-radius: var(--radius2);
+ border: 1px solid rgba(255, 255, 255, .12);
+ background: rgba(255, 255, 255, .04);
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ min-height: 320px;
+ }
+
+ .plan.featured {
+ background: linear-gradient(180deg, rgba(124, 92, 255, .18), rgba(255, 255, 255, .04));
+ border-color: rgba(124, 92, 255, .35);
+ box-shadow: 0 22px 70px rgba(124, 92, 255, .14);
+ transform: translateY(-4px);
+ }
+
+ .plan h3 {
+ margin: 0;
+ font-size: 16px;
+ }
+
+ .price {
+ font-size: 28px;
+ font-weight: 850;
+ letter-spacing: -0.4px;
+ }
+
+ .plan .desc {
+ margin: 0;
+ color: var(--muted);
+ font-size: 14px;
+ }
+
+ .bullets {
+ margin: 8px 0 0;
+ padding-left: 18px;
+ color: var(--muted);
+ font-size: 14px;
+ text-align: left;
+ }
+
+ .bullets li {
+ margin: 6px 0;
+ }
+
+ .plan .spacer {
+ flex: 1;
+ }
+
+ .bloc_periodicite {
+ width: 50%;
+ text-align: center;
+ font-size: 20px;
+ font-family: DM Sans;
+ margin-top: 1rem;
+ margin: auto;
+ height: 4rem;
+
+ }
+
+ .bloc_bton_mensuel {
+ width: 20%;
+ font-size: 16px;
+ padding: 5px;
+ height: auto;
+ border: 1px solid rgb(230, 232, 241);
+ border-right: none;
+ background-color: rgb(230, 232, 241);
+ color: rgb(33, 37, 41);
+ opacity: 0.8;
+ }
+
+ .bloc_bton_annuel {
+ width: 20%;
+ font-size: 16px;
+ padding: 5px;
+ height: auto;
+ border: 1px solid rgb(18, 180, 157);
+ border-left: none;
+ background-color: rgb(18, 180, 157);
+ opacity: 1;
+ color: rgb(33, 37, 41);
+ }
+
+ .bton_radius_gauche {
+ border: 1px solid;
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ border-top-right-radius: 0px !important;
+ border-bottom-right-radius: 0px !important;
+ color: #212529;
+
+ font-size: small;
+ height: 2rem;
+ cursor:pointer;
+ }
+
+ .bton_radius_droite {
+ color: #212529;
+ border: 1px solid green;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+
+ font-size: small;
+ height: 2rem;
+ cursor:pointer;
+ }
+`;
diff --git a/src/components/MarketPlace_2026.js b/src/components/MarketPlace_2026.js
new file mode 100644
index 0000000..266eade
--- /dev/null
+++ b/src/components/MarketPlace_2026.js
@@ -0,0 +1,192 @@
+import React from "react";
+import FilterBar from "./marketplace_2026/FilterBar";
+import CourseCard from "./marketplace_2026/CourseCard";
+import CourseCardSkeleton from "./marketplace_2026/CourseCardSkeleton";
+import "./marketplace_2026/marketplace.css";
+
+
+import { useRef, useState, useEffect } from "react";
+import TextField from '@mui/material/TextField';
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+import Button from '@mui/material/Button';
+import axios from "axios";
+import { getCookie, setCookie } from 'react-use-cookie';
+import { useHistory } from "react-router-dom";
+import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+
+import 'react-tooltip/dist/react-tooltip.css'
+import { Tooltip } from 'react-tooltip'
+
+import Autocomplete from '@mui/material/Autocomplete';
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
+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 moment from "moment";
+import InputAdornment from '@mui/material/InputAdornment';
+import { AiFillCloseCircle } from "react-icons/ai";
+import Box from '@mui/material/Box';
+import { CiTrash } from "react-icons/ci";
+import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md";
+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 { IoAddCircleOutline } from "react-icons/io5";
+import ToggleSwitch from "./ToggleSwitch";
+import ToggleSwitch_v2_mysy from "./ToggleSwitch_v2_mysy";
+import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
+
+
+import daygridPlugin from "@fullcalendar/daygrid";
+
+import FullCalendar, { formatDate } from "@fullcalendar/react";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+
+import allLocales from '@fullcalendar/core/locales-all'
+
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+import { IconButton } from '@material-ui/core';
+import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
+import Module_Historique_Action from "./Module_Historique_Action";
+function PaperComponent(props) {
+ return (
+
+
+
+ );
+}
+const useStyles = makeStyles((theme) => ({
+
+ dialog: {
+ position: 'absolute',
+ // left: 10,
+ top: 400
+ },
+
+ paper: {
+ overflowY: 'unset',
+ },
+ customizedButton: {
+ position: 'absolute',
+ left: '98%',
+ top: '-3%',
+ backgroundColor: 'lightgray',
+ color: 'gray',
+ },
+}));
+
+
+const MarketPlace_2026 = (props) => {
+
+ const initialFilters = {
+ q: "",
+ goal: "Tous",
+ format: "Tous",
+ duration: "Toutes",
+ funding: "Tous",
+ level: "Tous",
+ sort: "Pertinence",
+ };
+
+ const mockCourses = Array.from({ length: 12 }).map((_, i) => ({
+ id: `c-${i}`,
+ title: `Formation ${i + 1} — Intitulé clair et professionnel`,
+ provider: "Organisme partenaire",
+ durationLabel: "3 mois",
+ tags: ["CPF", "Certifiante", "Distanciel"],
+ ratingLabel: "4,7 (123)",
+ coverUrl: "",
+ }));
+
+ const [filters, setFilters] = React.useState(initialFilters);
+ const [loading, setLoading] = React.useState(false);
+ const [favorites, setFavorites] = React.useState({});
+
+ // Simulation chargement (remplace par API)
+ React.useEffect(() => {
+ setLoading(true);
+ const t = setTimeout(() => setLoading(false), 450);
+ return () => clearTimeout(t);
+ }, [filters]);
+
+ const onReset = () => setFilters(initialFilters);
+
+ const results = mockCourses; // TODO: appliquer filtres
+
+ const New_Option_Trie = [
+ { "id": "Pertinence", "label": "Pertinence", "value": "Pertinence" },
+ { "id": "Popularité", "label": "Popularité", "value": "Popularité" },
+ { "id": "Nouveautés", "label": "Nouveautés", "value": "Nouveautés" },
+ { "id": "", "label": "", "value": "" },
+ ]
+
+ return (
+
+
+
+
Marketplace de formations
+
+ Accédez aux meilleures formations certifiantes, filtrées selon vos objectifs professionnels.
+
+
+
+
setFilters((s) => ({ ...s, ...patch }))}
+ onReset={onReset}
+ />
+
+
+
+ {loading ? "Chargement…" : `${results.length} formations correspondent à vos critères`}
+
+
+
+ Trier parr
+
+
+
+
+
+
+ {loading
+ ? Array.from({ length: 8 }).map((_, i) => )
+ : results.map((c) => (
+
+ setFavorites((f) => ({ ...f, [id]: !f[id] }))
+ }
+ onView={(id) => console.log("go to course", id)}
+ />
+ ))}
+
+
+
+
+
+
+ );
+}
+
+export default MarketPlace_2026;
\ No newline at end of file
diff --git a/src/components/Module_Editique.js b/src/components/Module_Editique.js
index d071173..250ba80 100644
--- a/src/components/Module_Editique.js
+++ b/src/components/Module_Editique.js
@@ -10,13 +10,15 @@ import { useHistory } from "react-router-dom";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import ManageHistoryIcon from '@mui/icons-material/ManageHistory';
+
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import fileDownload from 'js-file-download'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
-import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint } from "react-icons/fc";
+
import fr from 'date-fns/locale/fr';
import { registerLocale } from 'react-datepicker';
import DatePicker from "react-datepicker";
@@ -43,10 +45,7 @@ import ToggleSwitch_v2_mysy from "./ToggleSwitch_v2_mysy";
import ToggleSwitch_v3_mysy from "./ToggleSwitch_v3_mysy";
import Autocomplete from '@mui/material/Autocomplete';
-import FullCalendar, { formatDate } from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
+
import { FcSearch } from "react-icons/fc";
import { Fab } from "@material-ui/core";
import {
@@ -1611,7 +1610,7 @@ const Module_Editique = (props) => {
setGet_Class_Default_Document_id_api("false");
setGet_Class_Default_Document_id_message(res.data.message);
// alert(res.data.message);
- // setdisplay_alert_mysy("1");
+ // setdisplay_alert_mysy("1");
//setalert_message(res.data.message);
//setalert_type("error");
@@ -1626,6 +1625,17 @@ const Module_Editique = (props) => {
})
}
+ const [Dialog_Config_Doc_Relance_Setup_open, setDialog_Config_Doc_Relance_Setup_open] = React.useState(false);
+ const Dialog_Config_Doc_Relance_Setup_handleClose = () => {
+ //alert(" Utiliser le bouton 'fermer' ");
+ //setOpen(false);
+ };
+
+ const Dialog_Config_Relance_Setup_handleClose_buton = () => {
+ setDialog_Config_Doc_Relance_Setup_open(false);
+
+ };
+
return (
@@ -1645,6 +1655,131 @@ const Module_Editique = (props) => {
{/*** FIN Affichage des messages d'alerte*/}
+ {/* Dialog pour gerer les Config_Doc_Relance_Setup */}
+
+ {/* FIN Dialog pour gerer les Config_Doc_Relance_Setup */}
+
+
+
+
{/**** Dialog Pour les Droits d'acces **/}
@@ -3412,6 +3544,26 @@ const Module_Editique = (props) => {
))}
+
+ r00 {
+
+
+ if (String(write_access_automatic_document_setup) !== "1") {
+ setDialog_Access_Right_message("Vos droits ne sont pas suffisants pour accéder cette fonction");
+ setDialog_Acces_Right_open(true);
+ return;
+ }
+
+ setaction_server_nom_doc(String(JSON.parse(document).courrier_template_nom))
+ setaction_server_ref_interne_doc(String(JSON.parse(document).courrier_template_ref_interne))
+
+ setDialog_Config_Doc_Relance_Setup_open(true);
+
+
+ }}
+ />
+
}
@@ -3539,6 +3691,7 @@ const Module_Editique = (props) => {