Revivez la 1ère Journée Nationale de l’Obésité organisée par le GCC CSO : Retour en replay

Infographie interactive — Parcours pratique après la JNO (GCC CSO)

Explorez les étapes clés, personnalisez des objectifs de santé, et repérez les signaux d’alerte. Tout le contenu est en français et éditable dans le script.

Interactif Accessible

Progression de lecture

0 / 5 étapes consultées

Début Parcours complet

Réinitialiser Tout ouvrir

• 🎯
  Ciblez vos besoins

  Repérez les séquences qui correspondent à votre pratique : orientation CSO, chirurgie, éducation thérapeutique.

• ⏱️
  Visionnez en équipe

  Utilisez le replay en staff pour harmoniser les pratiques entre médecins, diététiciens et chirurgiens.

• 📌
  Prenez des notes

  Les messages sont opérationnels. Notez les critères d'éligibilité ou les étapes du parcours patient.

• 🔁
  Revenez-y

  Le replay reste accessible. Revisitez une séquence avant une consultation complexe ou un staff.

Les 5 étapes du parcours

Cliquez sur une étape pour afficher les détails et marquer la lecture.

Étapes Alertes

Signaux d’alerte — réévaluation rapide

Si un ou plusieurs signaux sont présents, ne pas attendre : recontacter l’équipe soignante.

Afficher

Remarque : cette infographie est informative et ne remplace pas un avis médical. En cas d’urgence, contactez les services d’urgence.

Détails de l’étape

Sélectionnez une étape à gauche pour afficher le contenu et un mémo actionnable.

Étape —

Choisissez une étape

Marquer comme consultée

Astuce : utilisez « Tout ouvrir » pour parcourir l’ensemble, puis personnalisez vos objectifs ci-dessous.

Mini-outil : objectifs chiffrés et datés

Renseignez 1 à 3 objectifs (sommeil, mobilité, paramètres métaboliques, qualité de vie). Export possible en texte.

Exemple

Domaine Sommeil Mobilité Paramètres métaboliques Qualité de vie Autre

Objectif chiffré

Échéance

Commentaire (optionnel)

Ajouter l’objectif Exporter Effacer

Vos objectifs

0 objectif

• Aucun objectif pour le moment.

Export (copier/coller)

Copier

Astuce : vous pouvez garder cet export dans votre dossier médical personnel.

Repère temporel (API gratuite)

Affiche la date du jour via un service public (sans clé). Si indisponible, bascule sur l’horloge locale.

Actualiser

Date (indicative)

—

Source : —

/* Petit plus : confort tactile + focus visible */ #jno-infographie button, #jno-infographie input, #jno-infographie select, #jno-infographie textarea { -webkit-tap-highlight-color: transparent; } /* API publique gratuite (sans clé) utilisée (optionnel) : URL : https://worldtimeapi.org/api/timezone/Europe/Paris Exemple de réponse JSON (extrait) : { « abbreviation »: « CEST », « client_ip »: « xxx.xxx.xxx.xxx », « datetime »: « 2026-06-10T14:05:12.345678+02:00 », « day_of_week »: 2, « timezone »: « Europe/Paris », « utc_offset »: « +02:00 » } */ (function() { // ————————— // 1) Textes (FR) éditables // ————————— const TEXTES = { etapesTitrePrefix: « Étape », progressionLabel: (vus, total) => `${vus} / ${total} étapes consultées`, boutonMarquer: « Marquer comme consultée », boutonMarqueeDeja: « Consultée », detailsKicker: (n) => `Étape ${n}`, detailsChoisir: « Choisissez une étape », reset: { confirm: « Réinitialiser la progression et vos objectifs ? » }, objectifs: { compteur0: « 0 objectif », compteur1: « 1 objectif », compteurN: (n) => `${n} objectifs`, aucun: « Aucun objectif pour le moment. », erreurValeur: « Veuillez renseigner un objectif chiffré (ex. « 7 h/nuit », « 30 min × 3/sem »). », erreurDate: « Veuillez choisir une échéance (date). », exportTitre: « Mes objectifs de santé (JNO – GCC CSO) », exportSousTitre: « Objectifs chiffrés et datés », exportCopieOK: « Copié dans le presse-papiers. », exportCopieKO: « Copie impossible automatiquement. Sélectionnez le texte puis copiez. », }, date: { sourceApi: « Source : worldtimeapi.org (Europe/Paris) », sourceLocal: « Source : horloge locale du navigateur », erreur: « Impossible de récupérer la date en ligne. Bascule en mode local. » } }; // ————————— // 2) Données (fournies) // ————————— const DATA = { etapes: [ { id: « etape1 », numero: 1, titre: « Évaluation initiale », resume: « Bilan clinique et contextuel (mesures, comorbidités, retentissement, santé mentale). », puces: [ « IMC et tour de taille », « Comorbidités : diabète, HTA, apnée du sommeil… », « Retentissement fonctionnel (douleurs, essoufflement, fatigue…) », « Santé mentale (stress, troubles du comportement alimentaire, humeur) » ], memo: « Objectif : comprendre la situation globale avant d’agir, et repérer ce qui nécessite une priorité. » }, { id: « etape2 », numero: 2, titre: « Objectifs de santé », resume: « Définir des objectifs réalistes, chiffrés et datés (sommeil, mobilité, métabolique, qualité de vie). », puces: [ « Sommeil : durée et régularité », « Mobilité : capacité à marcher, monter des escaliers, endurance », « Paramètres métaboliques : glycémie, tension artérielle, lipides (selon suivi) », « Qualité de vie : énergie, douleur, activités, estime de soi » ], memo: « Objectif : choisir des marqueurs utiles au quotidien, pas seulement le poids. » }, { id: « etape3 », numero: 3, titre: « Socle thérapeutique », resume: « Nutrition thérapeutique + activité physique adaptée progressive + travail comportemental. », puces: [ « Nutrition : régularité, apport protéique, gestion des boissons », « APA progressive : fractionné + renforcement musculaire », « Comportement : routines, gestion des déclencheurs, auto-suivi » ], memo: « Objectif : installer des habitudes soutenables, avec progression graduelle. » }, { id: « etape4 », numero: 4, titre: « Options intensives », resume: « Si indiqué : traitements médicamenteux (cadre spécialisé) et/ou discussion chirurgie bariatrique. », puces: [ « Traitements médicamenteux : uniquement si indications, suivi spécialisé », « Chirurgie bariatrique : discussion après RCP / avis multidisciplinaire », « Évaluer bénéfices/risques, préparation, et exigences de suivi » ], memo: « Objectif : intensifier de manière sécurisée, en équipe et avec information claire. » }, { id: « etape5 », numero: 5, titre: « Suivi au long cours », resume: « Prévenir les carences, dépister les reprises pondérales, soutenir la santé mentale, coordonner ville-hôpital. », puces: [ « Prévention et dépistage des carences (notamment post-chirurgie) », « Dépistage des reprises pondérales et adaptation du plan », « Soutien psychologique et social », « Coordination ville-hôpital (médecin traitant, spécialistes, paramédicaux) » ], memo: « Objectif : sécuriser la trajectoire dans la durée, éviter l’isolement et les complications. » } ], alertes: [ « Fatigue majeure », « Vomissements répétés après chirurgie », « Suspicion de carence (symptômes inhabituels, fragilité, vertiges…) », « Isolement social », « Idées noires », « Toute dégradation rapide de l’état général → réévaluation rapide » ] }; // ————————— // 3) Sélecteurs DOM // ————————— const stepsListEl = document.getElementById(« jnoStepsList »); const detailKickerEl = document.getElementById(« jnoDetailKicker »); const detailTitleEl = document.getElementById(« jnoDetailTitle »); const detailBodyEl = document.getElementById(« jnoDetailBody »); const markReadBtn = document.getElementById(« jnoMarkReadBtn »); const progressLabelEl = document.getElementById(« jnoProgressLabel »); const progressBarEl = document.getElementById(« jnoProgressBar »); const progressWrapEl = document.getElementById(« jnoProgressBarWrap »); const resetBtn = document.getElementById(« jnoResetBtn »); const allBtn = document.getElementById(« jnoAllBtn »); const alertsListEl = document.getElementById(« jnoAlertsList »); const alertToggleBtn = document.getElementById(« jnoAlertToggle »); const alertsPanelEl = document.getElementById(« jnoAlertsPanel »); // Objectifs const goalThemeEl = document.getElementById(« jnoGoalTheme »); const goalValueEl = document.getElementById(« jnoGoalValue »); const goalDateEl = document.getElementById(« jnoGoalDate »); const goalNoteEl = document.getElementById(« jnoGoalNote »); const addGoalBtn = document.getElementById(« jnoAddGoalBtn »); const exportGoalsBtn = document.getElementById(« jnoExportGoalsBtn »); const clearGoalsBtn = document.getElementById(« jnoClearGoalsBtn »); const goalsListEl = document.getElementById(« jnoGoalsList »); const goalsCountEl = document.getElementById(« jnoGoalsCount »); const exportBoxEl = document.getElementById(« jnoExportBox »); const exportTextareaEl = document.getElementById(« jnoExportTextarea »); const copyExportBtn = document.getElementById(« jnoCopyExportBtn »); const copyHintEl = document.getElementById(« jnoCopyHint »); // Date API const refreshDateBtn = document.getElementById(« jnoRefreshDateBtn »); const todayLabelEl = document.getElementById(« jnoTodayLabel »); const todaySourceEl = document.getElementById(« jnoTodaySource »); // ————————— // 4) État + stockage local // ————————— const LS_KEYS = { readSteps: « jno_cso_readSteps_v1 », selectedStepId: « jno_cso_selectedStep_v1 », goals: « jno_cso_goals_v1 » }; let readSteps = new Set(); let selectedStepId = null; let goals = []; function loadState() { try { const savedRead = JSON.parse(localStorage.getItem(LS_KEYS.readSteps) || « [] »); readSteps = new Set(Array.isArray(savedRead) ? savedRead : []); } catch (_) { readSteps = new Set(); } try { selectedStepId = localStorage.getItem(LS_KEYS.selectedStepId) || null; } catch (_) { selectedStepId = null; } try { const savedGoals = JSON.parse(localStorage.getItem(LS_KEYS.goals) || « [] »); goals = Array.isArray(savedGoals) ? savedGoals : []; } catch (_) { goals = []; } } function saveReadSteps() { try { localStorage.setItem(LS_KEYS.readSteps, JSON.stringify(Array.from(readSteps))); } catch (_) {} } function saveSelectedStep() { try { localStorage.setItem(LS_KEYS.selectedStepId, selectedStepId || «  »); } catch (_) {} } function saveGoals() { try { localStorage.setItem(LS_KEYS.goals, JSON.stringify(goals)); } catch (_) {} } // ————————— // 5) Rendu // ————————— function stepBadgeColor(n) { // Palette légère, lisible const colors = [ « bg-indigo-600 », « bg-emerald-600 », « bg-sky-600 », « bg-amber-600 », « bg-violet-600 » ]; return colors[(n – 1) % colors.length]; } function renderSteps() { stepsListEl.innerHTML = «  »; DATA.etapes.forEach((etape) => { const isRead = readSteps.has(etape.id); const isSelected = selectedStepId === etape.id; const li = document.createElement(« li »); li.className = [ « relative rounded-2xl border p-3 sm:p-4 mb-3 sm:mb-4 cursor-pointer select-none », « transition-colors duration-200 », isSelected ? « border-indigo-300 bg-indigo-50 » : « border-slate-200 bg-white hover:bg-slate-50″, ].join( » « ); li.setAttribute(« role », « button »); li.setAttribute(« tabindex », « 0 »); li.setAttribute(« aria-label », `${TEXTES.etapesTitrePrefix} ${etape.numero} : ${etape.titre}`); li.addEventListener(« click », () => selectStep(etape.id, { scrollToDetails: true })); li.addEventListener(« keydown », (e) => { if (e.key === « Enter » || e.key ===  » « ) { e.preventDefault(); selectStep(etape.id, { scrollToDetails: true }); } }); li.innerHTML = ` `; stepsListEl.appendChild(li); }); } function renderAlerts() { alertsListEl.innerHTML = «  »; DATA.alertes.forEach((a) => { const item = document.createElement(« li »); item.className = « rounded-xl border border-rose-200 bg-white p-3 text-sm text-rose-900 »; item.innerHTML = ` `; alertsListEl.appendChild(item); }); } function renderProgress() { const total = DATA.etapes.length; const vus = Math.min(readSteps.size, total); const pct = total ? Math.round((vus / total) * 100) : 0; progressLabelEl.textContent = TEXTES.progressionLabel(vus, total); progressBarEl.style.width = pct + « % »; progressWrapEl.setAttribute(« aria-valuenow », String(vus)); progressWrapEl.setAttribute(« aria-valuemax », String(total)); } function renderDetails(stepId) { const etape = DATA.etapes.find(e => e.id === stepId); if (!etape) { detailKickerEl.textContent = « Étape — »; detailTitleEl.textContent = TEXTES.detailsChoisir; detailBodyEl.innerHTML = ` `; markReadBtn.classList.add(« hidden »); return; } detailKickerEl.textContent = TEXTES.detailsKicker(etape.numero); detailTitleEl.textContent = etape.titre; const isRead = readSteps.has(etape.id); markReadBtn.classList.remove(« hidden »); markReadBtn.textContent = isRead ? TEXTES.boutonMarqueeDeja : TEXTES.boutonMarquer; markReadBtn.disabled = isRead; markReadBtn.className = [ « rounded-xl px-3 py-2 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 », isRead ? « bg-emerald-100 text-emerald-800 border border-emerald-200 cursor-not-allowed » : « bg-emerald-600 text-white hover:bg-emerald-500 active:bg-emerald-600 focus:ring-emerald-400″ ].join( » « ); detailBodyEl.innerHTML = ` `; } function renderGoals() { const n = goals.length; goalsCountEl.textContent = n === 0 ? TEXTES.objectifs.compteur0 : (n === 1 ? TEXTES.objectifs.compteur1 : TEXTES.objectifs.compteurN(n)); if (n === 0) { goalsListEl.innerHTML = `

${TEXTES.objectifs.aucun}

`; return; } goalsListEl.innerHTML = «  »; goals.forEach((g, idx) => { const li = document.createElement(« li »); li.className = « rounded-xl border border-slate-200 bg-white p-3 »; li.innerHTML = ` `; li.querySelector(« button »).addEventListener(« click », () => { goals.splice(idx, 1); saveGoals(); renderGoals(); // Si export visible, le mettre à jour if (!exportBoxEl.classList.contains(« hidden »)) { exportTextareaEl.value = buildExportText(); } }); goalsListEl.appendChild(li); }); } // ————————— // 6) Interaction // ————————— function selectStep(stepId, opts) { selectedStepId = stepId; saveSelectedStep(); renderSteps(); renderDetails(stepId); if (opts && opts.scrollToDetails) { // Scroll doux vers le panneau de détails (sans dépasser, et sans dépendance) const y = detailTitleEl.getBoundingClientRect().top + window.scrollY – 16; window.scrollTo({ top: y, behavior: « smooth » }); } } function markSelectedStepAsRead() { if (!selectedStepId) return; readSteps.add(selectedStepId); saveReadSteps(); renderSteps(); renderDetails(selectedStepId); renderProgress(); } function openAllSteps() { // Marque tout comme consulté et affiche la dernière étape (cohérent pour un « parcours complet ») DATA.etapes.forEach(e => readSteps.add(e.id)); saveReadSteps(); selectedStepId = DATA.etapes[DATA.etapes.length – 1].id; saveSelectedStep(); renderSteps(); renderDetails(selectedStepId); renderProgress(); } function resetAll() { if (!confirm(TEXTES.reset.confirm)) return; readSteps = new Set(); selectedStepId = null; goals = []; saveReadSteps(); saveSelectedStep(); saveGoals(); exportBoxEl.classList.add(« hidden »); renderSteps(); renderDetails(null); renderProgress(); renderGoals(); } // Objectifs function addGoal() { const theme = goalThemeEl.value || « Autre »; const value = (goalValueEl.value || «  »).trim(); const date = (goalDateEl.value || «  »).trim(); const note = (goalNoteEl.value || «  »).trim(); if (!value) { alert(TEXTES.objectifs.erreurValeur); goalValueEl.focus(); return; } if (!date) { alert(TEXTES.objectifs.erreurDate); goalDateEl.focus(); return; } goals.unshift({ theme, value, date, note }); saveGoals(); renderGoals(); // Reset inputs rapides goalValueEl.value = «  »; goalNoteEl.value = «  »; // Mettre à jour export si visible if (!exportBoxEl.classList.contains(« hidden »)) { exportTextareaEl.value = buildExportText(); } } function buildExportText() { const lines = []; lines.push(TEXTES.objectifs.exportTitre); lines.push(TEXTES.objectifs.exportSousTitre); lines.push(«  »); if (goals.length === 0) { lines.push(« — Aucun objectif renseigné — »); return lines.join(« n »); } goals.forEach((g, i) => { lines.push(`${i + 1}. ${g.theme}`); lines.push(` – Objectif : ${g.value}`); lines.push(` – Échéance : ${g.date}`); if (g.note) lines.push(` – Note : ${g.note}`); lines.push(«  »); }); lines.push(« Conseil : en cas de difficulté, recontactez l’équipe soignante. »); return lines.join(« n »); } function exportGoals() { exportTextareaEl.value = buildExportText(); exportBoxEl.classList.remove(« hidden »); exportTextareaEl.focus({ preventScroll: true }); } async function copyExport() { const text = exportTextareaEl.value || «  »; try { await navigator.clipboard.writeText(text); copyHintEl.textContent = TEXTES.objectifs.exportCopieOK; } catch (_) { copyHintEl.textContent = TEXTES.objectifs.exportCopieKO; exportTextareaEl.focus(); exportTextareaEl.select(); } // Rétablir le hint après un délai setTimeout(() => { copyHintEl.textContent = « Astuce : vous pouvez garder cet export dans votre dossier médical personnel. »; }, 2500); } function clearGoals() { goals = []; saveGoals(); renderGoals(); exportBoxEl.classList.add(« hidden »); } function prefillExampleGoals() { // Exemple volontairement générique, pour illustrer “chiffré et daté” const today = new Date(); const plus30 = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000); const yyyyMmDd = (d) => { const y = d.getFullYear(); const m = String(d.getMonth() + 1).padStart(2, « 0 »); const day = String(d.getDate()).padStart(2, « 0 »); return `${y}-${m}-${day}`; }; goals = [ { theme: « Sommeil », value: « Atteindre 7 h de sommeil / nuit (≥ 5 nuits/semaine) », date: yyyyMmDd(plus30), note: « Heure de coucher fixe 4 soirs/semaine » }, { theme: « Mobilité », value: « Marcher 20 min × 4 jours/semaine », date: yyyyMmDd(plus30), note: « Progression de 5 min toutes les 2 semaines si OK » } ]; saveGoals(); renderGoals(); } // Alertes function toggleAlerts() { const isHidden = alertsPanelEl.classList.contains(« hidden »); if (isHidden) { alertsPanelEl.classList.remove(« hidden »); alertToggleBtn.textContent = « Masquer »; alertToggleBtn.setAttribute(« aria-expanded », « true »); } else { alertsPanelEl.classList.add(« hidden »); alertToggleBtn.textContent = « Afficher »; alertToggleBtn.setAttribute(« aria-expanded », « false »); } } // ————————— // 7) Date via API gratuite // ————————— function formatDateFrFromIso(isoString) { // Format lisible en français (sans i18n API, pour rester léger) const d = new Date(isoString); const jours = [« dimanche », »lundi », »mardi », »mercredi », »jeudi », »vendredi », »samedi »]; const mois = [« janvier », »février », »mars », »avril », »mai », »juin », »juillet », »août », »septembre », »octobre », »novembre », »décembre »]; const dayName = jours[d.getDay()]; const day = d.getDate(); const monthName = mois[d.getMonth()]; const year = d.getFullYear(); const hh = String(d.getHours()).padStart(2, »0″); const mm = String(d.getMinutes()).padStart(2, »0″); return `${dayName} ${day} ${monthName} ${year} à ${hh}h${mm}`; } async function refreshToday() { const apiUrl = « https://worldtimeapi.org/api/timezone/Europe/Paris »; try { const res = await fetch(apiUrl, { cache: « no-store » }); if (!res.ok) throw new Error(« HTTP  » + res.status); const json = await res.json(); if (!json || !json.datetime) throw new Error(« Réponse invalide »); todayLabelEl.textContent = formatDateFrFromIso(json.datetime); todaySourceEl.textContent = TEXTES.date.sourceApi; } catch (e) { // Fallback local const now = new Date(); todayLabelEl.textContent = formatDateFrFromIso(now.toISOString()); todaySourceEl.textContent = TEXTES.date.sourceLocal +  » •  » + TEXTES.date.erreur; } } // ————————— // 8) Utilitaires // ————————— function escapeHtml(str) { return String(str) .replaceAll(« & », « & ») .replaceAll(«  », « > ») .replaceAll(‘ »‘, « " ») .replaceAll(« ‘ », « ' »); } // ————————— // 9) Boot // ————————— loadState(); renderSteps(); renderAlerts(); renderProgress(); renderGoals(); renderDetails(selectedStepId); // Wiring markReadBtn.addEventListener(« click », markSelectedStepAsRead); resetBtn.addEventListener(« click », resetAll); allBtn.addEventListener(« click », openAllSteps); alertToggleBtn.addEventListener(« click », toggleAlerts); addGoalBtn.addEventListener(« click », addGoal); exportGoalsBtn.addEventListener(« click », exportGoals); clearGoalsBtn.addEventListener(« click », clearGoals); copyExportBtn.addEventListener(« click », copyExport); document.getElementById(« jnoPrefillBtn »).addEventListener(« click », prefillExampleGoals); refreshDateBtn.addEventListener(« click », refreshToday); // Petite ergonomie : Entrée dans l’input objectif ajoute goalValueEl.addEventListener(« keydown », (e) => { if (e.key === « Enter ») addGoal(); }); // Définir une date d’échéance par défaut (facilite la saisie) : +30 jours (function setDefaultGoalDate() { const d = new Date(); d.setDate(d.getDate() + 30); const yyyy = d.getFullYear(); const mm = String(d.getMonth() + 1).padStart(2, « 0 »); const dd = String(d.getDate()).padStart(2, « 0 »); goalDateEl.value = `${yyyy}-${mm}-${dd}`; })(); // Charger la date au démarrage refreshToday(); // Si une étape était sélectionnée mais inexistante, nettoyer if (selectedStepId && !DATA.etapes.some(e => e.id === selectedStepId)) { selectedStepId = null; saveSelectedStep(); renderDetails(null); } })();