Noufissa Kessar prend les rênes du groupe Al Mada : une nouvelle ère s’ouvre

/* Design: micro-interactions sans dépendances lourdes */ #alMadaTimelineWidget * { -webkit-tap-highlight-color: transparent; } #alMadaTimelineWidget ::selection { background: rgba(15,23,42,.12); } .almada-stepBtn[data-active= »true »]{ background: linear-gradient(135deg, rgba(15,23,42,.06), rgba(15,23,42,.02)); border-color: rgba(15,23,42,.18); } .almada-dot{ box-shadow: 0 0 0 5px rgba(15,23,42,.06); } /* Scrollbar discrète (support partiel selon navigateur) */ #almadaStepList{ scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.25) transparent; } #almadaStepList::-webkit-scrollbar{ height: 10px; width: 10px; } #almadaStepList::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.22); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;} #almadaStepList::-webkit-scrollbar-track{ background: transparent; } @media (prefers-reduced-motion: reduce){ #alMadaTimelineWidget *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /** * Timeline interactive — Transition de direction (FR) * – Pur HTML + JS (pas d’images, pas d’API payante, pas de dépendances lourdes) * – Toutes les chaînes sont en français et éditables. * * API externe (100% gratuite) : NON REQUISE pour cet outil (données locales). * Si vous souhaitez tout de même une API gratuite pour enrichir (optionnel), * vous pouvez utiliser WorldTimeAPI (sans clé) : * URL : https://worldtimeapi.org/api/timezone/Africa/Casablanca * Exemple de réponse JSON : * { * « abbreviation »: »+01″, * « client_ip »: »x.x.x.x », * « datetime »: »2026-05-28T12:34:56.789123+01:00″, * « timezone »: »Africa/Casablanca », * « utc_offset »: »+01:00″ * } * (Non utilisé ici pour éviter tout appel réseau inutile.) */ (function () { // ———- Textes & données (100% FR, facilement éditables) ———- const I18N = { phase: « PHASE », priorite: { haute: « Priorité : Haute », moyenne: « Priorité : Moyenne », structurante: « Priorité : Structurante » }, toastCopied: « Copié : le résumé de l’étape est dans votre presse-papiers. », emptySearch: « Aucune étape ne correspond à votre recherche. », activeLabelPrefix: « Sélection :  » }; // Étapes demandées par la consigne (incluant 30/60/120 jours) const STEPS = [ { id: « annonce », jour: 0, phase: « Annonce officielle », titre: « Annonce officielle de la prise de fonctions », resume: « Publier l’annonce, cadrer le récit, sécuriser la confiance des parties prenantes. », priorite: « haute », objectifs: [ « Clarifier le périmètre du mandat et la continuité de gouvernance », « Rassurer marchés, partenaires et écosystème », « Installer une tonalité : stabilité, ambition, responsabilité » ], acteurs: [ « Présidence / Conseil », « Direction générale », « Communication corporate », « Juridique (validation des messages) » ], livrables: [ « Communiqué officiel », « FAQ presse et éléments de langage », « Calendrier des prises de parole », « Message de transition (vision + continuité) » ], risques: [ « Incohérences de message entre canaux », « Surinterprétation médiatique / rumeurs », « Attentes irréalistes à court terme », « Timing mal synchronisé avec le marché » ], tags: [« communication », « gouvernance », « presse », « narratif »] }, { id: « interne », jour: 2, phase: « Communication interne », titre: « Aligner l’interne dès les premiers jours », resume: « Expliquer le sens, protéger l’engagement des équipes, ouvrir des boucles d’écoute. », priorite: « haute », objectifs: [ « Éviter l’incertitude opérationnelle », « Donner une feuille de route de transition (court terme) », « Créer un espace d’écoute et de remontées terrain » ], acteurs: [ « Direction RH », « Managers de filiales », « Communication interne », « Représentants du personnel (selon contexte) » ], livrables: [ « Note interne + vidéo/meeting d’alignement », « Canal de questions/réponses », « Cartographie des sujets sensibles (internes) » ], risques: [ « Baisse de motivation due au flou », « Silos (si les filiales n’ont pas la même information) », « Fuite d’informations non finalisées » ], tags: [« RH », « interne », « engagement », « écoute »] }, { id: « stabilisation », jour: 7, phase: « Stabilisation des opérations », titre: « Assurer la continuité sans friction », resume: « Geler les décisions non critiques, sécuriser la performance, vérifier les points de fragilité. », priorite: « haute », objectifs: [ « Maintenir la qualité d’exécution (run the business) », « Identifier les risques immédiats (cash, supply, sécurité, conformité) », « Confirmer les responsables de pilotage opérationnel » ], acteurs: [ « Directeurs opérationnels », « Finance / Trésorerie », « Audit / Risques / Conformité », « DSI (continuité des services) » ], livrables: [ « Tableau des “must-win” à 14 jours », « Point de contrôle des KPI critiques », « Plan de continuité et escalade » ], risques: [ « Décisions retardées trop longtemps », « Sous-estimation d’un risque latent », « Perte de cadence dans les filiales » ], tags: [« opérations », « KPI », « risques », « continuité »] }, { id: « portefeuille », jour: 15, phase: « Revue de portefeuille », titre: « Cartographier actifs, filiales et zones de valeur », resume: « Établir une vue claire des métiers, synergies, et arbitrages nécessaires. », priorite: « structurante », objectifs: [ « Comprendre la création de valeur par activité », « Repérer doublons, gaps et synergies », « Qualifier les arbitrages : renforcer, transformer, céder » ], acteurs: [ « Stratégie », « Finance (contrôle / M&A si applicable) », « Directions métiers », « Comité d’investissement » ], livrables: [ « Carte du portefeuille (performance, potentiel, risque) », « Hypothèses de scénarios (3 horizons) », « Liste courte d’arbitrages à instruire » ], risques: [ « Données hétérogènes entre entités », « Biais politique dans l’évaluation », « Sous-estimation des coûts de transformation » ], tags: [« stratégie », « portefeuille », « valeur », « arbitrage »] }, { id: « priorites », jour: 21, phase: « Définition des priorités stratégiques », titre: « Traduire l’intention en priorités actionnables », resume: « Choisir quelques priorités nettes, mesurables, compréhensibles par tous. », priorite: « structurante », objectifs: [ « Formuler 3 à 5 priorités (claires et finies) », « Fixer des indicateurs et des owners », « Aligner la gouvernance de pilotage » ], acteurs: [ « Direction générale », « Stratégie », « Finance (allocation) », « Communication (mise en récit) » ], livrables: [ « Note de priorités + KPI », « RACI de gouvernance », « Calendrier de revues (mensuel/trimestriel) » ], risques: [ « Trop de priorités (dilution) », « KPI mal définis (non actionnables) », « Non-alignement entre siège et filiales » ], tags: [« priorités », « KPI », « gouvernance », « alignement »] }, { id: « rh », jour: 30, phase: « Alignement RH », titre: « Mettre l’organisation au service des priorités (J+30) », resume: « Ajuster rôles, compétences, incentives et modes de collaboration. », priorite: « moyenne », objectifs: [ « Valider l’organigramme cible de transition », « Sécuriser les postes critiques et la succession », « Aligner la performance management sur les priorités » ], acteurs: [ « Direction RH », « Direction générale », « Managers clés », « Juridique (si changements contractuels) » ], livrables: [ « Cartographie talents & postes critiques », « Plan de mobilité / recrutement ciblé », « Cadre d’objectifs et d’incentives » ], risques: [ « Perte de talents (incertitude) », « Fatigue organisationnelle (trop de changements) », « Résistance culturelle aux nouveaux modes » ], tags: [« RH », « organisation », « talents », « jour 30 »] }, { id: « chantiers », jour: 45, phase: « Lancement des premiers chantiers », titre: « Démarrer vite, livrer tôt, apprendre », resume: « Lancer des chantiers à impact avec des livrables rapides pour crédibiliser la dynamique. », priorite: « haute », objectifs: [ « Démontrer des résultats visibles (quick wins) », « Installer une méthode de pilotage transverse », « Réduire les irritants opérationnels majeurs » ], acteurs: [ « PMO / Transformation », « Directions métiers », « DSI / Data (si digitalisation) », « Finance (suivi des gains) » ], livrables: [ « Portefeuille de chantiers (roadmap) », « Plan de communication sur avancement », « Tableau de gains/impacts (qualitatifs & quantitatifs) » ], risques: [ « Chantiers trop nombreux (dispersion) », « Sous-capacité des équipes », « Gains annoncés non mesurés » ], tags: [« transformation », « PMO », « quick wins », « pilotage »] }, { id: « j60 », jour: 60, phase: « Point d’étape à 60 jours », titre: « J+60 : arbitrer, renforcer, accélérer », resume: « Mesurer l’avancement, ajuster les arbitrages, sécuriser la trajectoire. », priorite: « haute », objectifs: [ « Comparer exécution vs plan », « Décider des corrections (scope, budget, priorités) », « Renforcer la communication aux parties prenantes » ], acteurs: [ « Direction générale », « Comité d’investissement », « Finance », « Communication corporate » ], livrables: [ « Rapport d’avancement (KPI + décisions) », « Liste d’arbitrages actés », « Plan d’accélération (90 jours) » ], risques: [ « Biais de confirmation (ne pas voir les signaux faibles) », « Arbitrages retardés », « Désalignement sur les budgets » ], tags: [« jour 60 », « arbitrage », « KPI », « décisions »] }, { id: « j120 », jour: 120, phase: « Point d’étape à 120 jours », titre: « J+120 : consolider la nouvelle ère », resume: « Capitaliser, institutionnaliser les routines, et préparer la phase suivante. », priorite: « structurante », objectifs: [ « Évaluer la performance des chantiers et leur pérennisation », « Stabiliser la gouvernance et les rituels de pilotage », « Préparer une communication de cap (horizon 12–24 mois) » ], acteurs: [ « Direction générale », « Conseil / Gouvernance », « PMO / Transformation », « RH (soutien managérial) » ], livrables: [ « Bilan 120 jours (résultats, écarts, leçons) », « Plan 12–24 mois (axes & jalons) », « Mise à jour des risques et plans de mitigation » ], risques: [ « Essoufflement après la phase d’impulsion », « Projets non industrialisés », « Manque de clarté sur la phase suivante » ], tags: [« jour 120 », « bilan », « cap », « pérennisation »] } ]; // Étape supplémentaire demandée explicitement : point à 30 jours (déjà couvert par « Alignement RH ») // Étape supplémentaire demandée : point à 30 jours, 60, 120 (60 et 120 inclus). // Pour rendre le “J+30” plus “point d’étape” dans l’UX, on le tague et on l’affiche comme jalon. // ———- Helpers ———- const $ = (sel, root = document) => root.querySelector(sel); const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel)); function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); } function priorityStyle(prio) { // Chips + pastilles if (prio === « haute ») return { chip: « background: #0f172a; », dot: « background:#0f172a; » }; if (prio === « moyenne ») return { chip: « background: #334155; », dot: « background:#334155; » }; return { chip: « background: #1e293b; », dot: « background:#1e293b; » }; // structurante } function priorityLabel(prio) { if (prio === « haute ») return I18N.priorite.haute; if (prio === « moyenne ») return I18N.priorite.moyenne; return I18N.priorite.structurante; } function makeLi(text, tone) { const li = document.createElement(« li »); li.className = « flex gap-2 leading-snug »; const bullet = document.createElement(« span »); bullet.className = « mt-[7px] inline-block h-1.5 w-1.5 shrink-0 rounded-full  » + (tone || « bg-slate-400 »); const span = document.createElement(« span »); span.textContent = text; li.appendChild(bullet); li.appendChild(span); return li; } function stepMatches(step, q) { if (!q) return true; const hay = [ step.phase, step.titre, step.resume, step.priorite, …(step.objectifs || []), …(step.acteurs || []), …(step.livrables || []), …(step.risques || []), …(step.tags || []) ].join( » « ).toLowerCase(); return hay.includes(q.toLowerCase()); } function modeMatches(step, mode) { if (mode === « tout ») return true; if (mode === « points ») return [30, 60, 120].includes(step.jour); if (mode === « fondations ») return step.jour lines.push(`- ${o}`)); lines.push(«  »); lines.push(« Acteurs impliqués : »); (step.acteurs || []).forEach(a => lines.push(`- ${a}`)); lines.push(«  »); lines.push(« Livrables attendus : »); (step.livrables || []).forEach(l => lines.push(`- ${l}`)); lines.push(«  »); lines.push(« Risques à surveiller : »); (step.risques || []).forEach(r => lines.push(`- ${r}`)); return lines.join(« n »); } // ———- DOM refs ———- const listEl = $(« #almadaStepList »); const searchEl = $(« #almadaSearch »); const modeEl = $(« #almadaMode »); const prevBtn = $(« #almadaPrev »); const nextBtn = $(« #almadaNext »); const resetBtn = $(« #almadaReset »); const countEl = $(« #almadaCount »); const activeLabelEl = $(« #almadaActiveLabel »); const phaseBadgeEl = $(« #almadaPhaseBadge »); const titleEl = $(« #almadaTitle »); const dayChipEl = $(« #almadaDayChip »); const priorityChipEl = $(« #almadaPriorityChip »); const summaryEl = $(« #almadaSummary »); const goalsEl = $(« #almadaGoals »); const actorsEl = $(« #almadaActors »); const deliverablesEl = $(« #almadaDeliverables »); const risksEl = $(« #almadaRisks »); const progressEl = $(« #almadaProgress »); const progressLabelEl = $(« #almadaProgressLabel »); const copyBtn = $(« #almadaCopy »); const toastEl = $(« #almadaToast »); // ———- State ———- let filtered = […STEPS].sort((a,b)=>a.jour-b.jour); let activeId = filtered[0]?.id || null; // ———- Rendering ———- function renderList() { const q = (searchEl.value || «  »).trim(); const mode = modeEl.value; filtered = STEPS .filter(s => modeMatches(s, mode)) .filter(s => stepMatches(s, q)) .sort((a,b)=>a.jour-b.jour); listEl.innerHTML = «  »; // Si l’étape active n’est plus visible, sélectionner la première visible if (!filtered.some(s => s.id === activeId)) { activeId = filtered[0]?.id || null; } countEl.textContent = String(filtered.length); if (filtered.length === 0) { const li = document.createElement(« li »); li.className = « px-4 py-4 text-sm text-slate-600 »; li.textContent = I18N.emptySearch; listEl.appendChild(li); updateDetail(null); updateNavButtons(); return; } for (const step of filtered) { const isActive = step.id === activeId; const styles = priorityStyle(step.priorite); const li = document.createElement(« li »); li.className = « px-2 »; const btn = document.createElement(« button »); btn.type = « button »; btn.className = « almada-stepBtn w-full text-left rounded-2xl border border-slate-200 bg-white px-3 py-3 my-2 shadow-sm hover:bg-slate-50 active:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-300 »; btn.setAttribute(« data-active », isActive ? « true » : « false »); btn.setAttribute(« aria-pressed », isActive ? « true » : « false »); btn.setAttribute(« aria-label », `${step.phase}, ${step.titre}, jour ${step.jour}`); btn.addEventListener(« click », () => { activeId = step.id; renderList(); // Scroll doux vers l’item actif btn.scrollIntoView({ block: « nearest », behavior: prefersReducedMotion() ? « auto » : « smooth » }); }); const row = document.createElement(« div »); row.className = « flex items-start gap-3 »; const dotWrap = document.createElement(« div »); dotWrap.className = « relative mt-1.5 »; const dot = document.createElement(« div »); dot.className = « almada-dot h-3 w-3 rounded-full »; dot.style = styles.dot; const dotInner = document.createElement(« div »); dotInner.className = « absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/90 »; dotWrap.appendChild(dot); dotWrap.appendChild(dotInner); const content = document.createElement(« div »); content.className = « min-w-0 flex-1 »; const top = document.createElement(« div »); top.className = « flex flex-wrap items-center justify-between gap-2 »; const h = document.createElement(« p »); h.className = « text-sm font-semibold text-slate-900 truncate »; h.textContent = step.titre; const chips = document.createElement(« div »); chips.className = « flex items-center gap-2 shrink-0 »; const day = document.createElement(« span »); day.className = « inline-flex items-center rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-slate-800 »; day.textContent = `Jour ${step.jour}`; const pr = document.createElement(« span »); pr.className = « inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold text-white »; pr.style = styles.chip; pr.textContent = step.priorite === « haute » ? « Haute » : (step.priorite === « moyenne » ? « Moyenne » : « Structurante »); chips.appendChild(day); chips.appendChild(pr); top.appendChild(h); top.appendChild(chips); const sub = document.createElement(« p »); sub.className = « mt-1 text-xs font-semibold text-slate-500 »; sub.textContent = step.phase; const desc = document.createElement(« p »); desc.className = « mt-1 text-sm text-slate-600 line-clamp-2 »; desc.textContent = step.resume; content.appendChild(top); content.appendChild(sub); content.appendChild(desc); row.appendChild(dotWrap); row.appendChild(content); btn.appendChild(row); li.appendChild(btn); listEl.appendChild(li); } updateDetail(getActiveStep()); updateNavButtons(); } function updateDetail(step) { if (!step) { phaseBadgeEl.textContent = I18N.phase; titleEl.textContent = « Aucune étape sélectionnée »; summaryEl.textContent = « Ajustez la recherche ou le mode d’affichage pour retrouver une étape. »; dayChipEl.textContent = « — »; priorityChipEl.textContent = « — »; priorityChipEl.style = « background:#64748b; »; goalsEl.innerHTML = «  »; actorsEl.innerHTML = «  »; deliverablesEl.innerHTML = «  »; risksEl.innerHTML = «  »; setProgress(0, « — »); activeLabelEl.textContent = « — »; return; } phaseBadgeEl.textContent = step.phase.toUpperCase(); titleEl.textContent = step.titre; summaryEl.textContent = step.resume; dayChipEl.textContent = `Jour ${step.jour}`; const styles = priorityStyle(step.priorite); priorityChipEl.textContent = priorityLabel(step.priorite); priorityChipEl.style = styles.chip; goalsEl.innerHTML = «  »; (step.objectifs || []).forEach(t => goalsEl.appendChild(makeLi(t, « bg-slate-500 »))); actorsEl.innerHTML = «  »; (step.acteurs || []).forEach(t => actorsEl.appendChild(makeLi(t, « bg-slate-500 »))); deliverablesEl.innerHTML = «  »; (step.livrables || []).forEach(t => { const li = document.createElement(« li »); li.className = « rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 »; li.textContent = t; deliverablesEl.appendChild(li); }); risksEl.innerHTML = «  »; (step.risques || []).forEach(t => { const li = document.createElement(« li »); li.className = « rounded-xl border border-rose-200 bg-white/50 px-3 py-2 »; li.textContent = t; risksEl.appendChild(li); }); const label = `${I18N.activeLabelPrefix}${step.phase} (Jour ${step.jour})`; activeLabelEl.textContent = label; setProgress(step.jour, `Jour ${step.jour} sur 120`); } function setProgress(day, label) { const d = clamp(Number(day) || 0, 0, 120); const pct = (d / 120) * 100; progressEl.style.width = pct.toFixed(1) + « % »; progressLabelEl.textContent = label; const bar = progressEl.parentElement; if (bar) bar.setAttribute(« aria-valuenow », String(d)); } function getActiveStep() { return filtered.find(s => s.id === activeId) || null; } function getActiveIndex() { return filtered.findIndex(s => s.id === activeId); } function updateNavButtons() { const i = getActiveIndex(); prevBtn.disabled = !(filtered.length && i > 0); nextBtn.disabled = !(filtered.length && i >= 0 && i { const i = getActiveIndex(); if (i > 0) { activeId = filtered[i – 1].id; renderList(); } }); nextBtn.addEventListener(« click », () => { const i = getActiveIndex(); if (i >= 0 && i { searchEl.value = «  »; modeEl.value = « tout »; filtered = […STEPS].sort((a,b)=>a.jour-b.jour); activeId = filtered[0]?.id || null; renderList(); searchEl.focus(); }); let searchTimer = null; searchEl.addEventListener(« input », () => { // Petit debounce pour éviter de rerender à chaque frappe rapide window.clearTimeout(searchTimer); searchTimer = window.setTimeout(() => renderList(), 80); }); modeEl.addEventListener(« change », () => renderList()); // Raccourci de recherche : Ctrl/⌘ + K document.addEventListener(« keydown », (e) => { const isMac = navigator.platform.toLowerCase().includes(« mac »); const mod = isMac ? e.metaKey : e.ctrlKey; if (mod && e.key.toLowerCase() === « k ») { e.preventDefault(); searchEl.focus(); searchEl.select(); return; } // Navigation clavier ← → if (e.key === « ArrowLeft ») { if (document.activeElement && (document.activeElement.tagName === « INPUT » || document.activeElement.tagName === « TEXTAREA »)) return; if (!prevBtn.disabled) prevBtn.click(); } if (e.key === « ArrowRight ») { if (document.activeElement && (document.activeElement.tagName === « INPUT » || document.activeElement.tagName === « TEXTAREA »)) return; if (!nextBtn.disabled) nextBtn.click(); } }); // Copier le résumé détaillé copyBtn.addEventListener(« click », async () => { const step = getActiveStep(); if (!step) return; const text = buildCopyText(step); try { await navigator.clipboard.writeText(text); showToast(); } catch (err) { // Fallback discret (sélection dans un textarea temporaire) const ta = document.createElement(« textarea »); ta.value = text; ta.setAttribute(« readonly », « true »); ta.style.position = « absolute »; ta.style.left = « -9999px »; document.body.appendChild(ta); ta.select(); document.execCommand(« copy »); document.body.removeChild(ta); showToast(); } }); let toastTimer = null; function showToast() { // Toast simple et non intrusif (sans animation agressive) toastEl.classList.remove(« hidden »); window.clearTimeout(toastTimer); toastTimer = window.setTimeout(() => toastEl.classList.add(« hidden »), 1600); } // ———- Init ———- renderList(); })();