L’OFPPT et l’UM6P unissent leurs forces pour inaugurer le Programme d’Innovation Entrepreneuriale (P.I.E

<!– Widget : Frise chronologique interactive (2 ans) — Programme d’Innovation Entrepreneuriale (P.I.E) – Pur HTML + JavaScript – Pas d’images – Texte 100 % français – Hauteur max (environ) : /* Styles légers + accessibilité */ #pie-timeline-widget { color: #0f172a; } #pie-timeline-widget .card-shadow { box-shadow: 0 10px 30px rgba(2,6,23,.08); } #pie-timeline-widget .soft-ring:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(59,130,246,.25); } #pie-timeline-widget .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } #pie-timeline-widget .no-scrollbar::-webkit-scrollbar { display: none; } #pie-timeline-widget .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } #pie-timeline-widget .gridline { background-image: linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px); background-size: 72px 100%; } #pie-timeline-widget .tag { background: rgba(2,132,199,.10); color: rgb(3,105,161); border: 1px solid rgba(2,132,199,.18); } #pie-timeline-widget .chip { border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.75); backdrop-filter: blur(6px); } #pie-timeline-widget .dot { width: 10px; height: 10px; border-radius: 999px; background: rgb(59,130,246); box-shadow: 0 0 0 6px rgba(59,130,246,.12); } #pie-timeline-widget .bar { height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(59,130,246,.2), rgba(59,130,246,.65)); } #pie-timeline-widget .barTrack { height: 10px; border-radius: 999px; background: rgba(15,23,42,.08); overflow: hidden; } @media (prefers-reduced-motion: reduce) { #pie-timeline-widget * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* Logique JS — Timeline P.I.E Objectifs : – Rendu dynamique des étapes sur 24 mois – Sélection d’une étape (clic/keyboard) – Détails : objectifs, activités, livrables, indicateurs de progrès – Slider de mois pour visualiser la progression globale – Option « Aujourd’hui » (ligne verticale) au mois sélectionné – Zoom horizontal (densité de la grille) Accessibilité : – Boutons focusables + aria-expanded sur les cartes – Navigation clavier (flèches gauche/droite pour changer de carte) – Respect de prefers-reduced-motion (pas d’animations indispensables) */ (function () { const STRINGS = { moisPrefix: « M », rangeLabel: « M0 → M24 », todayLabel: « Aujourd’hui », aucunDetail: « Sélectionnez une étape sur la frise pour afficher les détails ici. », objectifs: « Objectifs », activites: « Exemples d’activités », livrables: « Livrables attendus », indicateurs: « Indicateurs de progrès », periode: « Période », duree: « Durée », mois: « mois », etape: « Étape », selection: « Sélection », ouvrirFermer: « Ouvrir/fermer les détails de l’étape », quickreadTitre: « Résumé », quickreadObjectif: « But », quickreadFocus: « Focus », quickreadSorties: « Sorties », checklistTitre: « Critères (éditables) », progression: « Progression » }; // Données (100 % français, éditables) const STEPS = [ { id: « pie-etape-1 », titre: « Sensibilisation et acculturation », sousTitre: « Rencontres, inspiration, déconstruction des stéréotypes, découverte des opportunités », debut: 0, fin: 6, // mois 0..6 (6 mois) objectifs: [ « Déclencher l’envie d’entreprendre et développer une posture d’exploration. », « Démystifier l’entrepreneuriat (stéréotypes, peurs, fausses croyances). », « Faire émerger des problématiques réelles et des opportunités ancrées dans le terrain. », « Créer un premier réseau (pairs, mentors, écosystème) et des repères méthodologiques. » ], activites: [ « Rencontres avec des entrepreneur(e)s et intrapreneur(e)s (retours d’expérience). », « Ateliers de découverte : opportunités sectorielles, défis locaux, tendances. », « Sessions d’inspiration : cas d’usage, innovations frugales, impact. », « Mini-exercices : cartographie des problèmes, observation terrain, interviews exploratoires. » ], livrables: [ « Journal d’exploration (apprentissages, hypothèses, angles d’opportunité). », « Cartographie initiale d’opportunités (problèmes, publics, contexte). », « Pitch d’intention (1 minute) : « le problème que je veux comprendre ». », « Plan personnel de progression (compétences à renforcer, ressources, réseau). » ], indicateurs: [ « Nombre d’entretiens exploratoires réalisés et synthétisés. », « Qualité des problématiques formulées (clarté, ancrage, pertinence). », « Engagement : présence, contributions, itérations du journal d’exploration. », « Capacité à expliquer une opportunité sans jargon (pitch d’intention). » ], checklist: [ « J’ai réalisé au moins 10 entretiens exploratoires. », « J’ai identifié 3 opportunités plausibles et je peux les expliquer. », « J’ai rédigé un pitch d’intention clair (≤ 1 minute). », « J’ai trouvé au moins 1 mentor/ressource de l’écosystème. » ], quickread: { but: « Ouvrir le champ des possibles et ancrer l’opportunité dans le réel. », focus: « Comprendre avant de construire. », sorties: « Opportunités + hypothèses + pitch d’intention. » }, couleur: { bord: « border-sky-200 », fond: « bg-sky-50 », badge: « bg-sky-600 » } }, { id: « pie-etape-2 », titre: « Fondamentaux et outils », sousTitre: « Proposition de valeur, segmentation, étude terrain, plan d’affaires vivant, marketing stratégique, budget », debut: 6, fin: 14, // 8 mois objectifs: [ « Structurer une proposition de valeur compréhensible et différenciante. », « Choisir une segmentation réaliste et prioriser un premier segment cible. », « Valider/infirmer les hypothèses via une étude terrain plus structurée. », « Construire un plan d’affaires vivant (hypothèses, chiffres, risques) et le mettre à jour. », « Poser les bases : marketing stratégique, canaux, positionnement, budget. » ], activites: [ « Ateliers : proposition de valeur, segmentation, personas et parcours. », « Étude terrain : tests de messages, analyse de concurrence, estimation de la demande. », « Modélisation : coûts, prix, marges, scénarios, points de vigilance. », « Marketing stratégique : positionnement, canaux, acquisition, narration. », « Mises en situation : pitch de 3 minutes, feedbacks, itérations. » ], livrables: [ « Proposition de valeur (1 page) + preuves terrain (notes, verbatims). », « Segmentation + segment prioritaire + critères de choix. », « Plan d’affaires vivant (hypothèses, scénario prudent, scénario ambitieux). », « Budget initial (coûts fixes/variables) + logique de prix. », « Pitch deck « problème → solution → marché → modèle » (version 1). » ], indicateurs: [ « Cohérence : segment cible ↔ proposition de valeur ↔ canaux. », « Traçabilité des décisions (preuves terrain, apprentissages, arbitrages). », « Qualité des hypothèses chiffrées (plausibilité, sources, scénarios). », « Amélioration du pitch (clarté, structure, crédibilité). » ], checklist: [ « J’ai une proposition de valeur écrite + preuves terrain (verbatims). », « J’ai choisi un segment prioritaire et j’explique pourquoi. », « Mon plan d’affaires est vivant (mis à jour au fil des apprentissages). », « J’ai un budget initial et une logique de prix défendable. » ], quickread: { but: « Transformer une opportunité en projet structuré et testable. », focus: « Clarté + validation + chiffres utiles. », sorties: « Proposition de valeur + plan d’affaires vivant + budget + pitch v1. » }, couleur: { bord: « border-indigo-200 », fond: « bg-indigo-50 », badge: « bg-indigo-600 » } }, { id: « pie-etape-3 », titre: « Studio d’immersion et d’expérimentation », sousTitre: « Prototypage, tests clients, itérations, gestion de projet, pitch, préparation au lancement », debut: 14, fin: 24, // 10 mois objectifs: [ « Passer du concept à un prototype utile (et itérable). », « Tester avec des client(e)s, apprendre vite, améliorer vite. », « Installer une exécution rigoureuse : gestion de projet, priorisation, jalons. », « Préparer le lancement : offre, canaux, opérations, pitch final. », « Renforcer la confiance : répétition, retours, démonstration. » ], activites: [ « Sprints d’expérimentation : prototypage, tests, itérations. », « Tests clients : démonstrations, préventes, pilotes, lettres d’intention. », « Gestion de projet : backlog, priorités, risques, jalons de livraison. », « Préparation au lancement : plan go-to-market, support, process. », « Coaching pitch : storytelling, démonstration, Q/R, objections. » ], livrables: [ « Prototype (MVP) + journal d’expériences (ce qui a marché/échoué). », « Résultats de tests clients (apprentissages, décisions, prochaines itérations). », « Backlog priorisé + feuille de route de lancement. », « Kit de lancement : offre, messages, canaux, process, métriques. », « Pitch final + démonstration prête (avec preuves). » ], indicateurs: [ « Rythme d’itération (cycles test → apprentissage → amélioration). », « Signaux marché : préventes, pilotes, lettres d’intention, rétention test. », « Qualité d’exécution (jalons respectés, priorités claires, risques gérés). », « Capacité à présenter une preuve (démo, chiffres, retours client). » ], checklist: [ « J’ai un MVP démontrable et documenté (ce que j’ai appris). », « J’ai mené des tests clients réguliers et j’ai itéré en conséquence. », « J’ai une feuille de route claire jusqu’au lancement. », « Je peux pitcher avec une preuve (démo, pilote, lettre d’intention, chiffres). » ], quickread: { but: « Accélérer l’apprentissage par l’expérimentation jusqu’à la mise sur le marché. », focus: « Tester, itérer, exécuter. », sorties: « MVP + preuves terrain + kit de lancement + pitch final. » }, couleur: { bord: « border-emerald-200 », fond: « bg-emerald-50 », badge: « bg-emerald-600 » } } ]; // — DOM const root = document.getElementById(« pie-timeline-widget »); const ticksEl = root.querySelector(« #pie-ticks »); const lanesEl = root.querySelector(« #pie-lanes »); const detailsEl = root.querySelector(« #pie-details »); const detailSubtitleEl = root.querySelector(« #pie-detail-subtitle »); const selectEtapeEl = root.querySelector(« #pie-select-etape »); const sliderEl = root.querySelector(« #pie-slider-mois »); const sliderLabelEl = root.querySelector(« #pie-slider-label »); const barEl = root.querySelector(« #pie-bar »); const progressionEl = root.querySelector(« #pie-progression »); const todayLineEl = root.querySelector(« #pie-today-line »); const todayBadgeEl = root.querySelector(« #pie-today-badge »); const timelineEl = root.querySelector(« #pie-timeline »); const timelineInnerEl = root.querySelector(« #pie-timeline-inner »); const btnTodayEl = root.querySelector(« #pie-btn-aujourdhui »); const btnResetEl = root.querySelector(« #pie-btn-reinitialiser »); const btnZoomInEl = root.querySelector(« #pie-btn-zoom-in »); const btnZoomOutEl = root.querySelector(« #pie-btn-zoom-out »); const quickreadEl = root.querySelector(« #pie-quickread »); const checklistEl = root.querySelector(« #pie-checklist »); // — Config d’affichage (zoom horizontal) let pxParMois = 52; // zoom par défaut const pxParMoisMin = 38; const pxParMoisMax = 80; // Etat let selectedIndex = 0; let todayMonth = null; // null = non affiché // LocalStorage keys (scopées) const LS_KEY = « pie_timeline_checklist_v1 »; function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); } function monthToX(month) { // month: 0..24 // L’inner a un padding px-4 (~16px) mais on calcule dans le conteneur interne, donc x relatif. return month * pxParMois; } function setTimelineMinWidth() { // 24 mois -> largeur, + marge const base = monthToX(24) + 60; timelineInnerEl.style.minWidth = base + « px »; } function renderTicks() { ticksEl.innerHTML = «  »; ticksEl.className = « relative h-8 »; const frag = document.createDocumentFragment(); // Un repère tous les 2 mois pour la lisibilité for (let m = 0; m { const top = 0 + i * 118; // hauteur de voie compacte const left = monthToX(step.debut); const width = Math.max(180, monthToX(step.fin) – monthToX(step.debut)); const wrap = document.createElement(« div »); wrap.className = « absolute »; wrap.style.top = top + « px »; wrap.style.left = left + « px »; wrap.style.width = width + « px »; const btn = document.createElement(« button »); btn.type = « button »; btn.dataset.index = String(i); btn.id = step.id; btn.className = [ « soft-ring w-full text-left rounded-2xl border », step.couleur.bord, step.couleur.fond, « hover:bg-white transition-colors », « p-4″ ].join( » « ); btn.setAttribute(« role », « group »); btn.setAttribute(« aria-label », `${STRINGS.etape} ${i + 1} : ${step.titre}. ${STRINGS.ouvrirFermer}.`); btn.setAttribute(« aria-expanded », i === selectedIndex ? « true » : « false »); // En-tête carte const header = document.createElement(« div »); header.className = « flex items-start justify-between gap-3 »; const titleBox = document.createElement(« div »); const badge = document.createElement(« div »); badge.className = « inline-flex items-center gap-2 »; badge.innerHTML = ` ${i + 1} ${STRINGS.etape} ${i + 1} `; const title = document.createElement(« div »); title.className = « mt-2 text-base sm:text-lg font-extrabold text-slate-900 leading-tight »; title.textContent = step.titre; const subtitle = document.createElement(« div »); subtitle.className = « mt-1 text-xs sm:text-sm text-slate-600 leading-relaxed »; subtitle.textContent = step.sousTitre; titleBox.appendChild(badge); titleBox.appendChild(title); titleBox.appendChild(subtitle); const meta = document.createElement(« div »); meta.className = « shrink-0 text-right »; const periode = document.createElement(« div »); periode.className = « text-xs font-bold text-slate-700 tabular-nums »; periode.textContent = `${STRINGS.periode} : M${step.debut}–M${step.fin}`; const duree = document.createElement(« div »); duree.className = « mt-1 text-xs text-slate-600 »; duree.textContent = `${STRINGS.duree} : ${stepDuration(step)} ${STRINGS.mois}`; meta.appendChild(periode); meta.appendChild(duree); header.appendChild(titleBox); header.appendChild(meta); // Aperçu compact const preview = document.createElement(« div »); preview.className = « mt-3 flex flex-wrap gap-2 »; const chips = [ { label: « Objectifs », count: step.objectifs.length }, { label: « Activités », count: step.activites.length }, { label: « Livrables », count: step.livrables.length }, { label: « Indicateurs », count: step.indicateurs.length } ]; chips.forEach(c => { const chip = document.createElement(« span »); chip.className = « chip inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-[12px] text-slate-700 »; chip.innerHTML = `${c.label}${c.count}`; preview.appendChild(chip); }); // Hint const hint = document.createElement(« div »); hint.className = « mt-3 text-[12px] text-slate-600 »; hint.textContent = « Cliquez pour afficher les détails ci-dessous. »; btn.appendChild(header); btn.appendChild(preview); btn.appendChild(hint); wrap.appendChild(btn); frag.appendChild(wrap); }); // Conteneur relativement positionné et assez haut lanesEl.className = « relative »; lanesEl.style.height = (STEPS.length * 118 + 8) + « px »; lanesEl.appendChild(frag); // Scroll auto vers la sélection scrollToStep(selectedIndex, true); updateAriaExpanded(); } function updateAriaExpanded() { const buttons = lanesEl.querySelectorAll(« button[data-index] »); buttons.forEach(btn => { const idx = Number(btn.dataset.index); btn.setAttribute(« aria-expanded », idx === selectedIndex ? « true » : « false »); }); } function renderDetails(index) { const step = STEPS[index]; if (!step) { detailsEl.innerHTML = `

${STRINGS.aucunDetail}

`; return; } detailSubtitleEl.textContent = `${STRINGS.selection} : Étape ${index + 1} (M${step.debut}–M${step.fin})`; const section = (title, items) => { const li = items.map(t => `

${escapeHtml(t)}

`).join(«  »); return ` `; }; detailsEl.innerHTML = ` `; } function renderQuickRead() { quickreadEl.innerHTML = «  »; STEPS.forEach((s, i) => { const li = document.createElement(« li »); li.className = « rounded-2xl border border-slate-200 bg-white p-4 »; li.innerHTML = ` `; quickreadEl.appendChild(li); }); } function loadChecklistState() { try { const raw = localStorage.getItem(LS_KEY); if (!raw) return {}; const parsed = JSON.parse(raw); return parsed && typeof parsed === « object » ? parsed : {}; } catch { return {}; } } function saveChecklistState(state) { try { localStorage.setItem(LS_KEY, JSON.stringify(state)); } catch { // silencieux } } function renderChecklist(index) { const step = STEPS[index]; if (!step) return; const state = loadChecklistState(); const stepKey = step.id; const stepState = state[stepKey] || {}; checklistEl.innerHTML = «  »; step.checklist.forEach((label, i) => { const id = `${step.id}-check-${i}`; const row = document.createElement(« div »); row.className = « flex items-start gap-3 »; const input = document.createElement(« input »); input.type = « checkbox »; input.id = id; input.className = « mt-1 h-4 w-4 accent-blue-600 »; input.checked = Boolean(stepState[i]); input.addEventListener(« change », () => { const newState = loadChecklistState(); newState[stepKey] = newState[stepKey] || {}; newState[stepKey][i] = input.checked; saveChecklistState(newState); // Optionnel: recalculer progression basée sur checklist (ici on garde la progression basée sur le mois) }); const lab = document.createElement(« label »); lab.setAttribute(« for », id); lab.className = « text-sm text-slate-700 leading-relaxed cursor-pointer »; lab.textContent = label; row.appendChild(input); row.appendChild(lab); checklistEl.appendChild(row); }); // Petite jauge locale (sur la checklist de l’étape) const total = step.checklist.length; const done = Object.values(stepState).filter(Boolean).length; const pct = total ? Math.round((done / total) * 100) : 0; const summary = document.createElement(« div »); summary.className = « mt-4 rounded-xl border border-slate-200 bg-white p-3 »; summary.innerHTML = ` `; checklistEl.appendChild(summary); } function setSelectedIndex(index, shouldFocusCard) { selectedIndex = clamp(index, 0, STEPS.length – 1); selectEtapeEl.value = String(selectedIndex); renderDetails(selectedIndex); renderChecklist(selectedIndex); updateAriaExpanded(); highlightSelectedCard(); scrollToStep(selectedIndex, false); if (shouldFocusCard) { const btn = lanesEl.querySelector(`button[data-index= »${selectedIndex} »]`); if (btn) btn.focus({ preventScroll: true }); } } function highlightSelectedCard() { const buttons = lanesEl.querySelectorAll(« button[data-index] »); buttons.forEach(btn => { const idx = Number(btn.dataset.index); if (idx === selectedIndex) { btn.classList.add(« ring-4 », « ring-blue-500/15 »); } else { btn.classList.remove(« ring-4 », « ring-blue-500/15 »); } }); } function scrollToStep(index, immediate) { const step = STEPS[index]; if (!step) return; const x = monthToX(step.debut); const target = clamp(x – 60, 0, 999999); try { timelineEl.scrollTo({ left: target, behavior: immediate ? « auto » : « smooth » }); } catch { timelineEl.scrollLeft = target; } } function setMonth(month) { const m = clamp(Number(month) || 0, 0, 24); sliderEl.value = String(m); sliderLabelEl.textContent = STRINGS.moisPrefix + m; // Progression globale purement temporelle (0..24) const pct = Math.round((m / 24) * 100); barEl.style.width = pct + « % »; progressionEl.textContent = pct +  » % »; // Sélection auto de l’étape correspondant au mois (sans forcer si déjà dans la bonne étape) const idx = STEPS.findIndex(s => m >= s.debut && m < s.fin); if (idx !== -1 && idx !== selectedIndex) { setSelectedIndex(idx, false); } else { // Cas m==24 (fin) : on sélectionne la dernière étape if (m === 24 && selectedIndex !== STEPS.length – 1) setSelectedIndex(STEPS.length – 1, false); } // Si la ligne "aujourd’hui" est active, la déplacer if (todayMonth !== null) { todayMonth = m; positionTodayLine(m); } } function positionTodayLine(month) { const x = monthToX(month); todayLineEl.style.left = (x + 16) + "px"; // +padding visuel approximatif todayBadgeEl.style.left = (x + 16) + "px"; todayLineEl.classList.remove("hidden"); todayBadgeEl.classList.remove("hidden"); } function hideTodayLine() { todayLineEl.classList.add("hidden"); todayBadgeEl.classList.add("hidden"); } function setZoom(delta) { pxParMois = clamp(pxParMois + delta, pxParMoisMin, pxParMoisMax); setTimelineMinWidth(); renderTicks(); renderCards(); renderDetails(selectedIndex); renderChecklist(selectedIndex); // Repositionner la ligne "aujourd’hui" si active if (todayMonth !== null) positionTodayLine(todayMonth); } function escapeHtml(str) { return String(str) .replaceAll("&", "&") .replaceAll(" », « > ») .replaceAll(‘ »‘, « " ») .replaceAll(« ‘ », « ' »); } // — Events lanesEl.addEventListener(« click », (e) => { const btn = e.target.closest(« button[data-index] »); if (!btn) return; const idx = Number(btn.dataset.index); if (Number.isFinite(idx)) setSelectedIndex(idx, false); }); // Navigation clavier sur les cartes lanesEl.addEventListener(« keydown », (e) => { const active = document.activeElement; const isCard = active && active.matches && active.matches(« button[data-index] »); if (!isCard) return; if (e.key === « ArrowRight ») { e.preventDefault(); setSelectedIndex(selectedIndex + 1, true); } else if (e.key === « ArrowLeft ») { e.preventDefault(); setSelectedIndex(selectedIndex – 1, true); } else if (e.key === « Home ») { e.preventDefault(); setSelectedIndex(0, true); } else if (e.key === « End ») { e.preventDefault(); setSelectedIndex(STEPS.length – 1, true); } else if (e.key === « Enter » || e.key ===  » « ) { // Ici, « ouvrir/fermer » = mettre en évidence + scroller vers les détails (utile sur mobile) e.preventDefault(); document.getElementById(« pie-details »).scrollIntoView({ behavior: « smooth », block: « start » }); } }); selectEtapeEl.addEventListener(« change », () => { setSelectedIndex(Number(selectEtapeEl.value), true); }); sliderEl.addEventListener(« input », () => setMonth(sliderEl.value)); btnTodayEl.addEventListener(« click », () => { const m = Number(sliderEl.value); if (todayMonth === null) { todayMonth = m; positionTodayLine(m); } else { // toggle off todayMonth = null; hideTodayLine(); } }); btnResetEl.addEventListener(« click », () => { todayMonth = null; hideTodayLine(); setMonth(0); setSelectedIndex(0, false); // Remettre scroll au début try { timelineEl.scrollTo({ left: 0, behavior: « smooth » }); } catch { timelineEl.scrollLeft = 0; } }); btnZoomInEl.addEventListener(« click », () => setZoom(+8)); btnZoomOutEl.addEventListener(« click », () => setZoom(-8)); // — Init setTimelineMinWidth(); renderTicks(); renderCards(); renderQuickRead(); setMonth(0); setSelectedIndex(0, false); highlightSelectedCard(); renderDetails(0); renderChecklist(0); // Bonus : rendre la zone “lanes” focusable indirectement via la première carte (déjà focusable) // Rien à faire. })();