Transport routier : lancement de nouveaux services numériques accessibles sur le portail « Téléservices » à partir de juillet

/* Option API gratuite (facultative) : URL : https://calendrier.api.gouv.fr/jour-republicain/AAAA-MM-JJ Exemple de réponse JSON (indicatif) : { « date »: « 2024-07-01 », « jour »: « 13 messidor an 232 », « jour_semaine »: « Duodi », « mois »: « Messidor », « annee »: 232, « fete »: « Fête du chien » } Note : cette API est publique et gratuite. Aucune clé n’est requise. L’outil ci-dessous n’en dépend pas : il s’agit d’un bonus. */ (function () { // —————————– // Textes (i18n FR facilement éditable) // —————————– const TEXTES = { etape: « Étape », fait: « Fait », aFaire: « À faire », filtreToutes: « toutes », toastCopie: « Résumé copié dans le presse-papiers. », toastFait: « Étape marquée comme faite. », toastReset: « Progression réinitialisée. », toastSelection: « Étape sélectionnée. », aucuneEtape: « Aucune étape ne correspond à votre recherche/filtre. », apiChargement: « Appel de l’API en cours… », apiErreur: « Impossible d’obtenir une réponse de l’API (réseau/CORS). » }; // —————————– // Données de la timeline (100 % en français) // —————————– const ETAPES = [ { id: « prep-interne », categorie: « préparation », titre: « Préparation interne », quand: « Avant juillet (idéalement 2 à 4 semaines en amont) », objectif: « Organiser l’équipe, sécuriser les accès et préparer les pièces nécessaires aux dépôts. », livrable: « Liste des comptes/accès, dossier documentaire prêt, procédure interne de dépôt validée. », responsable: « Responsable administratif + référent exploitation », risque: « Dépôts retardés faute de pièces ou de rôles clairs. », parade: « Créer une check-list unique et valider les rôles (titulaire, délégataire, suppléant). », conseils: [ « Désignez un référent « Téléservices » et un suppléant, avec des responsabilités écrites. », « Centralisez les pièces dans un répertoire partagé et versionné (ex. : « 01_Charte », « 02_Justificatifs », « 03_Demandes »). », « Vérifiez les informations entreprise (SIREN/SIRET, coordonnées, interlocuteurs) pour éviter les écarts. », « Planifiez un créneau hebdomadaire court (15–30 min) pour suivre l’avancement jusqu’à mi-juillet. » ] }, { id: « contact-dr », categorie: « relation », titre: « Prise de contact avec la direction régionale », quand: « Avant le 1er juillet », objectif: « Clarifier les modalités, anticiper les questions, et obtenir des consignes locales si nécessaire. », livrable: « Point de contact identifié + synthèse des consignes/attendus. », responsable: « Responsable conformité / administratif », risque: « Allers-retours inutiles par méconnaissance des attentes. », parade: « Envoyer un message concis avec l’objet de la demande, la liste des pièces et le calendrier. », conseils: [ « Préparez un message courtois et précis : contexte, besoin, échéances, coordonnées. », « Demandez explicitement : formats acceptés, délais moyens, erreurs fréquentes constatées. », « Conservez une trace (email/compte rendu) des consignes reçues pour homogénéiser les dépôts. », « Vérifiez l’accessibilité des comptes et la bonne réception des notifications. » ] }, { id: « charte-telechargement », categorie: « juridique », titre: « Téléchargement de la charte », quand: « Avant le 1er juillet », objectif: « Prendre connaissance des engagements liés aux nouveaux services numériques. », livrable: « Charte téléchargée + circuit de validation interne établi. », responsable: « Direction + responsable conformité », risque: « Blocage juridique interne ou validation tardive. », parade: « Fixer un délai de validation et prévoir une relecture croisée (juridique + opérationnel). », conseils: [ « Identifiez la personne habilitée à signer et vérifiez la cohérence avec vos délégations de signature. », « Relisez les clauses opérationnelles (délais, obligations de mise à jour, pièces justificatives). », « Préparez un mémo interne de 10 lignes : « ce que cela change pour nous ». », « Anticipez la date de re-signature pour ne pas la traiter en urgence. » ] }, { id: « charte-resignature », categorie: « juridique », titre: « Re-signature de la charte », quand: « Avant le 1er juillet (ou dès que la charte est disponible) », objectif: « Valider officiellement l’adhésion et sécuriser la continuité des démarches. », livrable: « Charte re-signée + preuve d’envoi/validation archivée. », responsable: « Direction / signataire habilité », risque: « Dépôt impossible si la charte n’est pas à jour. », parade: « Archiver la preuve (PDF, accusé, horodatage) et partager l’information aux équipes. », conseils: [ « Conservez une version PDF horodatée et nommée de façon stable (ex. : « Charte_Teleservices_Entreprise_Date »). », « Vérifiez que la charte signée est bien rattachée au bon compte/entité (SIRET). », « Informez l’équipe : à partir de quand les dépôts peuvent être effectués. », « Prévoyez une procédure de secours en cas d’absence du signataire (suppléant). » ] }, { id: « depot-1juillet », categorie: « dépôt », titre: « Dépôt des premières demandes », quand: « À partir du 1er juillet », objectif: « Réaliser les premiers dépôts et valider le bon fonctionnement du parcours (pièces, formulaires, notifications). », livrable: « Premiers dossiers déposés + journal des dépôts (références, dates, statuts). », responsable: « Équipe administrative / exploitation », risque: « Erreurs de saisie ou pièces manquantes lors du premier dépôt. », parade: « Faire un « dépôt pilote » et appliquer une relecture systématique avant envoi. », conseils: [ « Commencez par un dossier simple pour tester le circuit complet (dépôt → accusé → suivi). », « Utilisez une check-list : champs obligatoires, formats, lisibilité des scans, cohérence des dates. », « Renseignez un tableau de suivi : référence, date, responsable, statut, prochaine action. », « Conservez les accusés de réception et classez-les avec le dossier correspondant. » ] }, { id: « extension-10juillet », categorie: « dépôt », titre: « Extension des services », quand: « À partir du 10 juillet », objectif: « Intégrer les services nouvellement disponibles et mettre à jour votre mode opératoire interne. », livrable: « Procédure mise à jour + équipe informée + dépôts étendus. », responsable: « Référent « Téléservices » », risque: « Incohérences entre anciennes et nouvelles pratiques. », parade: « Mettre à jour la procédure et organiser un bref point d’équipe. », conseils: [ « Relisez les nouveautés et listez les impacts : pièces, délais, interlocuteurs, validations. », « Mettez à jour votre modèle de nommage de fichiers si de nouveaux justificatifs apparaissent. », « Organisez un point de 20 minutes : quoi de neuf, qui fait quoi, et comment suivre les statuts. », « Gardez une trace des changements (date, version de procédure) pour faciliter les audits. » ] }, { id: « controle-qualite », categorie: « qualité », titre: « Contrôle qualité des dossiers », quand: « Mi-juillet et ensuite en routine », objectif: « Réduire les rejets et accélérer les traitements grâce à des dossiers complets et cohérents. », livrable: « Grille de contrôle qualité + taux de retours/rejets suivi. », responsable: « Responsable conformité + contrôle interne », risque: « Retards liés à des retours administratifs répétitifs. », parade: « Mettre en place une double vérification sur les dossiers sensibles. », conseils: [ « Créez une grille simple : complétude, cohérence, lisibilité, signatures, dates, correspondance SIRET. », « Analysez les retours : classez-les par type d’erreur pour corriger la source (pas seulement le symptôme). », « Pour les dossiers complexes, appliquez une relecture croisée (2 personnes). », « Documentez les décisions : pourquoi telle pièce est acceptée/refusée en interne. » ] }, { id: « suivi-mensuel », categorie: « qualité », titre: « Mise en place d’un suivi mensuel des échéances », quand: « À partir de fin juillet (puis chaque mois) », objectif: « Sécuriser la conformité et éviter les oublis grâce à un calendrier et des rappels. », livrable: « Rituel mensuel + tableau d’échéances + indicateurs (délais, retours, volumes). », responsable: « Référent « Téléservices » + direction », risque: « Perte de visibilité et accumulation de dossiers. », parade: « Rendez-vous mensuel fixe + indicateurs simples + actions datées. », conseils: [ « Bloquez un créneau mensuel fixe (ex. : premier mardi) pour passer en revue les statuts et échéances. », « Suivez 3 indicateurs : nombre de dépôts, délai moyen, nombre de retours/rejets. », « Planifiez les renouvellements/échéances dans un calendrier partagé (avec rappels). », « Formalisez un plan d’actions : qui fait quoi, pour quand, et comment on vérifie. » ] } ]; // —————————– // État et persistance (localStorage) // —————————– const STORAGE_KEY = « teleservices_timeline_progress_v1 »; const UI_KEY = « teleservices_timeline_ui_v1 »; const state = { indexSelection: -1, filtre: TEXTES.filtreToutes, recherche: «  », mode: « detail », // « compact » | « detail » autoScroll: true, doneById: loadProgress() }; function loadProgress() { try { const raw = localStorage.getItem(STORAGE_KEY); if (!raw) return {}; const parsed = JSON.parse(raw); return (parsed && typeof parsed === « object ») ? parsed : {}; } catch { return {}; } } function saveProgress() { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state.doneById)); } catch {} } function loadUI() { try { const raw = localStorage.getItem(UI_KEY); if (!raw) return; const parsed = JSON.parse(raw); if (parsed && typeof parsed === « object ») { if (parsed.mode) state.mode = parsed.mode; if (typeof parsed.autoScroll === « boolean ») state.autoScroll = parsed.autoScroll; } } catch {} } function saveUI() { try { localStorage.setItem(UI_KEY, JSON.stringify({ mode: state.mode, autoScroll: state.autoScroll })); } catch {} } // —————————– // Sélecteurs DOM // —————————– const $ = (id) => document.getElementById(id); const timelineList = $(« timelineList »); const visibleCount = $(« visibleCount »); const progressBar = $(« progressBar »); const progressLabel = $(« progressLabel »); const detailKicker = $(« detailKicker »); const detailTitle = $(« detailTitle »); const detailWhen = $(« detailWhen »); const detailGoal = $(« detailGoal »); const detailDeliverable = $(« detailDeliverable »); const detailOwner = $(« detailOwner »); const detailRisk = $(« detailRisk »); const detailMitigation = $(« detailMitigation »); const detailTag = $(« detailTag »); const detailStatus = $(« detailStatus »); const detailTips = $(« detailTips »); const tipsToggle = $(« tipsToggle »); const tipsPanel = $(« tipsPanel »); const tipsChevron = $(« tipsChevron »); const searchInput = $(« searchInput »); const btnPrev = $(« btnPrev »); const btnNext = $(« btnNext »); const btnToday = $(« btnToday »); const btnMarkDone = $(« btnMarkDone »); const btnResetDone = $(« btnResetDone »); const btnCopySummary = $(« btnCopySummary »); const toast = $(« toast »); const btnModeCompact = $(« btnModeCompact »); const btnModeDetail = $(« btnModeDetail »); const toggleAutoScroll = $(« toggleAutoScroll »); const btnTryApi = $(« btnTryApi »); const apiBox = $(« apiBox »); const apiResult = $(« apiResult »); // —————————– // Utilitaires // —————————– function normalize(s) { return (s || «  ») .toLowerCase() .normalize(« NFD ») .replace(/[u0300-u036f]/g, «  »); } function isDone(id) { return !!state.doneById[id]; } function setToast(msg) { toast.textContent = msg; toast.classList.remove(« hidden »); clearTimeout(setToast._t); setToast._t = setTimeout(() => toast.classList.add(« hidden »), 2200); } function filteredSteps() { const q = normalize(state.recherche); return ETAPES.filter((e) => { const okFilter = (state.filtre === TEXTES.filtreToutes) ? true : e.categorie === state.filtre; if (!okFilter) return false; if (!q) return true; const hay = normalize([e.titre, e.quand, e.objectif, e.livrable, e.responsable, e.risque, e.parade, (e.conseils || []).join( » « )].join( » « )); return hay.includes(q); }); } function computeProgress() { const total = ETAPES.length; const done = ETAPES.reduce((acc, e) => acc + (isDone(e.id) ? 1 : 0), 0); const pct = total ? Math.round((done / total) * 100) : 0; return { total, done, pct }; } function categoryLabel(cat) { const map = { « préparation »: « Préparation », « relation »: « Relation avec l’administration », « juridique »: « Charte / conformité », « dépôt »: « Dépôt & extension », « qualité »: « Qualité & suivi » }; return map[cat] || « Catégorie »; } // —————————– // Rendu de la liste timeline // —————————– function renderTimeline() { const steps = filteredSteps(); timelineList.innerHTML = «  »; visibleCount.textContent = String(steps.length); const { pct } = computeProgress(); progressBar.style.width = pct + « % »; progressLabel.textContent = pct + « % »; if (steps.length === 0) { const empty = document.createElement(« div »); empty.className = « p-4 text-sm text-slate-700 »; empty.textContent = TEXTES.aucuneEtape; timelineList.appendChild(empty); return; } steps.forEach((e, idx) => { const realIndex = ETAPES.findIndex(x => x.id === e.id); const selected = (state.indexSelection === realIndex); const done = isDone(e.id); const item = document.createElement(« button »); item.type = « button »; item.role = « option »; item.setAttribute(« aria-selected », selected ? « true » : « false »); item.dataset.id = e.id; item.className = « w-full text-left p-3 rounded-xl border transition  » + (selected ? « border-indigo-300 bg-indigo-50 » : « border-slate-200 bg-white hover:bg-slate-50″) +  » focus:outline-none focus:ring-2 focus:ring-indigo-400″; const compact = (state.mode === « compact »); item.innerHTML = ` `; item.addEventListener(« click », () => { selectById(e.id, { announce: true }); }); timelineList.appendChild(item); }); } // —————————– // Détails // —————————– function renderDetails(etape) { if (!etape) { detailKicker.textContent = TEXTES.etape; detailTitle.textContent = « Sélectionnez une étape dans la frise »; detailWhen.textContent = «  »; detailGoal.textContent = « — »; detailDeliverable.textContent = « — »; detailOwner.textContent = « — »; detailRisk.textContent = « — »; detailMitigation.textContent = « — »; detailTag.textContent = « — »; detailStatus.textContent = «  »; detailTips.innerHTML = «  »; return; } const done = isDone(etape.id); detailKicker.textContent = TEXTES.etape; detailTitle.textContent = etape.titre; detailWhen.textContent = etape.quand; detailGoal.textContent = etape.objectif; detailDeliverable.textContent = etape.livrable; detailOwner.textContent = etape.responsable; detailRisk.textContent = etape.risque; detailMitigation.textContent = etape.parade; detailTag.textContent = categoryLabel(etape.categorie); detailTag.className = « inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold border  » + (done ? « border-emerald-200 bg-emerald-50 text-emerald-800 » : « border-slate-200 bg-slate-50 text-slate-700 »); detailStatus.textContent = done ? « Statut : fait » : « Statut : à faire »; detailTips.innerHTML = «  »; (etape.conseils || []).forEach((c) => { const li = document.createElement(« li »); li.textContent = c; detailTips.appendChild(li); }); } function selectById(id, opts = {}) { const idx = ETAPES.findIndex(e => e.id === id); if (idx < 0) return; state.indexSelection = idx; renderDetails(ETAPES[idx]); renderTimeline(); if (opts.announce) setToast(TEXTES.toastSelection); if (state.autoScroll) { const btn = timelineList.querySelector(`button[data-id="${CSS.escape(id)}"]`); if (btn) { btn.scrollIntoView({ block: "center", behavior: "smooth" }); btn.focus({ preventScroll: true }); } } } function selectNext(delta) { if (ETAPES.length === 0) return; const current = state.indexSelection { const active = (b.dataset.filter === filter); b.className = « filterBtn px-2.5 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-400 text-xs  » + (active ? « bg-slate-900 text-white hover:bg-slate-800 » : « bg-white text-slate-800 »); }); renderTimeline(); } tipsToggle.addEventListener(« click », () => { const expanded = tipsToggle.getAttribute(« aria-expanded ») === « true »; tipsToggle.setAttribute(« aria-expanded », expanded ? « false » : « true »); if (expanded) { tipsPanel.classList.add(« hidden »); tipsChevron.textContent = « ▸ »; } else { tipsPanel.classList.remove(« hidden »); tipsChevron.textContent = « ▾ »; } }); searchInput.addEventListener(« input », (e) => { state.recherche = e.target.value || «  »; renderTimeline(); }); btnPrev.addEventListener(« click », () => selectNext(-1)); btnNext.addEventListener(« click », () => selectNext(1)); btnToday.addEventListener(« click », () => { // « Aller à juillet » : sélectionne l’étape la plus proche du démarrage effectif (1er juillet) selectById(« depot-1juillet », { announce: false }); }); btnMarkDone.addEventListener(« click », () => { const idx = state.indexSelection; if (idx { state.doneById = {}; saveProgress(); renderDetails(state.indexSelection >= 0 ? ETAPES[state.indexSelection] : null); renderTimeline(); setToast(TEXTES.toastReset); }); btnCopySummary.addEventListener(« click », async () => { const idx = state.indexSelection; if (idx setMode(« compact »)); btnModeDetail.addEventListener(« click », () => setMode(« detail »)); toggleAutoScroll.addEventListener(« change », (e) => { state.autoScroll = !!e.target.checked; saveUI(); }); document.querySelectorAll(« #teleservices-timeline .filterBtn »).forEach((b) => { b.addEventListener(« click », () => setFilter(b.dataset.filter)); }); // Clavier : navigation et ouverture/fermeture des conseils document.addEventListener(« keydown », (e) => { const root = document.getElementById(« teleservices-timeline »); if (!root) return; // Ne pas interférer quand on tape dans un champ const tag = (document.activeElement && document.activeElement.tagName) ? document.activeElement.tagName.toLowerCase() : «  »; if (tag === « input » || tag === « textarea ») return; if (e.key === « ArrowLeft ») { e.preventDefault(); selectNext(-1); } if (e.key === « ArrowRight ») { e.preventDefault(); selectNext(1); } if (e.key === « Enter ») { e.preventDefault(); tipsToggle.click(); } }); // —————————– // API bonus (facultatif) // —————————– btnTryApi.addEventListener(« click », async () => { apiBox.classList.remove(« hidden »); apiResult.textContent = TEXTES.apiChargement; // Date illustrant « à partir du 1er juillet » const date = « 2024-07-01 »; const url = `https://calendrier.api.gouv.fr/jour-republicain/${date}`; try { const res = await fetch(url, { method: « GET » }); if (!res.ok) throw new Error(« HTTP  » + res.status); const json = await res.json(); apiResult.textContent = JSON.stringify({ url, reponse: json }, null, 2); } catch (err) { apiResult.textContent = JSON.stringify({ url, erreur: TEXTES.apiErreur, detail: String(err) }, null, 2); } }); // —————————– // Init // —————————– loadUI(); toggleAutoScroll.checked = state.autoScroll; setMode(state.mode); setFilter(TEXTES.filtreToutes); // Sélection par défaut : étape « préparation interne » selectById(« prep-interne », { announce: false }); })();