:root{ --labo-green:#39ff14; --ink:#0f172a; --muted:#64748b; --bg:#ffffff; --card:#f8fafc; } *{box-sizing:border-box} html,body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink)} .wrap{max-width:980px;margin:0 auto;padding:24px} header{display:flex;align-items:center;gap:16px;justify-content:space-between} header .brand{display:flex;align-items:center;gap:12px} img.logo{height:56px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))} h1{font-size:clamp(1.3rem,2.4vw,2rem);margin:0;font-weight:800;letter-spacing:-.02em} .tag{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)} .start-card{margin:28px 0;padding:24px;border-radius:20px;background:linear-gradient(180deg,#fff,#f9fbff);border:1px solid #eef2f7;box-shadow:0 10px 30px rgba(0,0,0,.05)} .start-card h2{margin:0 0 10px 0;font-size:1.4rem} .start-card ul{margin:8px 0 0 0;padding-left:18px;color:#334155} .btn{appearance:none;border:0;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer} .btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 20px rgba(15,23,42,.16);position:relative;transition:transform .08s ease, box-shadow .2s ease} .btn-primary::after{content:"";position:absolute;inset:-2px;border-radius:16px;padding:2px;background:linear-gradient(45deg,var(--labo-green),transparent 40%);-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(15,23,42,.22)} .btn-secondary{background:#f1f5f9;color:#0f172a} .footer-note{font-size:12px;color:var(--muted);margin-top:12px} .quiz{display:none;margin-top:20px} .progress{position:sticky;top:0;background:#fff;border-bottom:1px solid #e2e8f0;padding:10px 0;z-index:5} .bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden} .bar>span{display:block;height:100%;width:0;background:var(--labo-green)} .hud{display:flex;align-items:center;justify-content:space-between;margin:10px 0;color:#334155} .card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:22px;box-shadow:0 8px 18px rgba(0,0,0,.04)} .q{font-size:1.05rem;font-weight:700;margin:0 0 14px 0} .options{display:grid;gap:10px} .option{border:1px solid #e2e8f0;border-radius:14px;padding:14px;cursor:pointer;transition:transform .06s ease,background .15s ease,border-color .15s ease} .option:hover{transform:translateY(-1px);background:#f8fafc} .option input{display:none} .option.correct{border-color:#16a34a;background:#ecfdf5} .option.wrong{border-color:#ef4444;background:#fef2f2} .actions{display:flex;gap:10px;margin-top:16px} .pop{animation:pop .18s ease} @keyframes pop{from{transform:scale(.98)}to{transform:scale(1)}} .shake{animation:shake .25s linear} @keyframes shake{25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}} .result{display:none} .score-badge{display:inline-block;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800} .best{font-size:12px;color:var(--muted)} .confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden} .confetti i{position:absolute;top:-10px;width:8px;height:14px;background:var(--labo-green);opacity:.9;transform:rotate(15deg);animation:fall 1.4s linear forwards} @keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:0}} .microcopy{font-size:13px;color:#475569} document.addEventListener('DOMContentLoaded', function(){ const DATA_PILOT = [ {q:"Quelle est la caractéristique principale d'un \"vrai\" projet selon la méthode du Labo des CIP ?", opts:[ "Une idée sans échéancier ni territoire.", "Une démarche structurée portée par une équipe (même réduite) avec un objectif clair, une durée, un budget et une vraie utilité pour l'insertion.", "Une initiative portée uniquement par une seule personne sans besoin identifié.", "Un vœu pieux sans plan d'action réaliste." ], a:1}, {q:"Selon les sources, qu'est-ce qui n'est pas considéré comme un \"vrai\" projet ?", opts:[ "Une réponse à un besoin identifié avec un plan d'action réaliste.", "Une démarche avec des outils de pilotage et d’évaluation en continu.", "Une belle idée sans échéancier, sans territoire, sans pilote.", "Une initiative ayant une équipe dédiée et des moyens identifiés." ], a:2}, {q:"Quelle est la première des 4 grandes étapes d'un projet selon la méthode du Labo des CIP ?", opts:[ "La mise en œuvre.", "L'évaluation.", "L'idéation et le choix de la solution.", "Le diagnostic." ], a:3}, {q:"Parmi les outils suivants, lequel est spécifiquement mentionné comme un outil clé pour l'étape de diagnostic ?", opts:[ "Le tableau de bord collaboratif (Notion, Trello).", "Le SWOT.", "La grille multicritères pour comparer les idées.", "Les compte-rendus de réunions réguliers." ], a:1}, {q:"L'étape d'idéation et de choix de la solution implique principalement :", opts:[ "La rédaction du rapport d'évaluation final du projet.", "Le brainstorming pour lister un maximum d'hypothèses de solutions possibles et leur évaluation objective.", "La coordination constante entre les intervenants du projet.", "La mesure du taux de présence aux ateliers et du niveau d'autonomie post-accompagnement." ], a:1}, {q:"Lors de l'évaluation des pistes de solutions, quels sont les critères principaux à considérer selon la méthode du Labo des CIP ?", opts:[ "Le temps de travail des équipes, la complexité administrative et l'image de marque.", "La taille de l'équipe, la durée prévisionnelle et la satisfaction du chef de projet.", "La faisabilité (technique, humaine, financière), la pertinence pour les besoins identifiés, le coût et l'impact attendu.", "L'opinion des partenaires, la popularité de l'idée et la facilité de communication." ], a:2}, {q:"Quel est le résultat attendu de l'étape \"Idéation et choix de la solution\" ?", opts:[ "Un rapport d'évaluation détaillé des performances de l'équipe.", "Un simple enregistrement des idées sans aucune priorisation.", "Un cahier des charges solide, clair et réaliste, accompagné d'un plan d'action détaillé (qui fait quoi, quand, avec quoi).", "La liste des imprévus rencontrés pendant le projet et les ajustements réalisés." ], a:2}, {q:"L'étape de la mise en œuvre (\"Action !\") d'un projet inclut des actions clés telles que :", opts:[ "La définition des objectifs précis et la planification du budget initial.", "L'analyse SWOT et le recueil d'informations via les partenaires territoriaux.", "Le lancement opérationnel avec une réunion de démarrage, le déroulement progressif des actions prévues, et les ajustements en temps réel avec agilité.", "L'évaluation des objectifs atteints et la documentation des boucles d'apprentissage." ], a:2}, {q:"Quels sont les quatre \"fils rouges\" transversaux indispensables à tout projet CIP mentionnés dans la méthode du Labo ?", opts:[ "Les bénéficiaires, les partenaires, les outils et les indicateurs de réussite.", "La planification, l'exécution, le contrôle et la clôture.", "Le temps, les moyens (budget, RH, logistique), la communication (interne/externe) et l'évaluation (quantitative + qualitative).", "Le diagnostic, l'idéation, la mise en œuvre et l'évaluation." ], a:2}, {q:"Quel est l'objectif principal de la méthodologie de projet du Labo des CIP pour les professionnels de l'insertion et du conseil (CIP) ?", opts:[ "De créer des tableaux indigestes et des schémas complexes pour la gestion administrative.", "De transformer chaque entretien en une production hollywoodienne.", "De maîtriser la démarche projet de A à Z avec des outils simples et concrets pour mieux accompagner, sans s'épuiser.", "De cocher des cases administratives pour se conformer aux exigences sans réelle utilité terrain." ], a:2} ]; initLaboQuiz('laboQuiz-pilotageProjet', DATA_PILOT); }); // --- Moteur multi‑instance (modèle commun) --- function initLaboQuiz(rootId, DATA){ const root=document.getElementById(rootId); if(!root) return; const start=root.querySelector('[data-start]'); const quiz=root.querySelector('[data-quiz]'); const result=root.querySelector('[data-result]'); const qEl=root.querySelector('[data-question]'); const optsEl=root.querySelector('[data-options]'); const btnStart=root.querySelector('[data-btn-start]'); const btnVoir=root.querySelector('[data-btn-see]'); const btnNext=root.querySelector('[data-btn-next]'); const btnSkip=root.querySelector('[data-btn-skip]'); const idxEl=root.querySelector('[data-idx]'); const totEl=root.querySelector('[data-tot]'); const scoreEl=root.querySelector('[data-score]'); const barFill=root.querySelector('[data-bar]'); const finalScoreEl=root.querySelector('[data-final-score]'); const finalTotalEl=root.querySelector('[data-final-total]'); const bestScoreEl=root.querySelector('[data-best]'); const commentEl=root.querySelector('[data-comment]'); const sheetEl=root.querySelector('[data-sheet]'); const cardEl=root.querySelector('[data-card]'); const cf=root.querySelector('[data-confetti]'); totEl.textContent=DATA.length; finalTotalEl.textContent=DATA.length; let i=0, score=0, selected=null, answered=false; function mountQuestion(){ const item=DATA[i]; idxEl.textContent=i+1; qEl.textContent=item.q; optsEl.innerHTML=''; btnNext.disabled=true; answered=false; selected=null; item.opts.forEach((t,ix)=>{ const div=document.createElement('label'); div.className='option'; div.innerHTML=` ${t}`; div.addEventListener('click',()=>onSelect(ix,div)); optsEl.appendChild(div); }); barFill.style.width=`${(i/DATA.length)*100}%`; cardEl.classList.add('pop'); setTimeout(()=>cardEl.classList.remove('pop'),200); } function onSelect(ix,el){ if(answered) return; selected=ix; answered=true; btnNext.disabled=false; const correct=DATA[i].a===ix; el.classList.add(correct?'correct':'wrong'); if(!correct) el.classList.add('shake'); if(correct){score++; scoreEl.textContent=score; confettiBurst();} [...optsEl.children].forEach(c=>{c.style.opacity=c===el?'1':'.65'}); } function next(){ if(i<DATA.length-1){ i++; mountQuestion(); } else finish(); } function skip(){ if(i=0.8){txt='Solide ! Diagnostic clair, action fluide, évaluation au rendez‑vous.';} else if(ratio>=0.6){txt='Pas mal ! Un peu plus d’outillage (SWOT + grille multicritères) et ça déroule.';} else {txt='On révise ensemble ? On a tout un labo pour ça 😉';} commentEl.textContent=txt; } function showAnswers(){ sheetEl.style.display='block'; sheetEl.innerHTML = `

Corrigé détaillé

` + DATA.map((it,idx)=>{ return `

${idx+1}. ${it.q}

${it.opts.map((o,ix)=>`
1. ${o}
`).join('')}

`; }).join(''); sheetEl.scrollIntoView({behavior:'smooth'}); } function confettiBurst(){ for(let k=0;k.2?'var(--labo-green)':'#a7f3d0'; iEl.style.transform=`rotate(${Math.random()*360}deg)`; iEl.style.animationDuration=(0.9+Math.random()*0.8)+'s'; cf.appendChild(iEl); setTimeout(()=>iEl.remove(),1600); } } function confettiStorm(){ for(let p=0;p{ start.style.display='none'; quiz.style.display='block'; i=0; score=0; scoreEl.textContent=score; mountQuestion(); }); btnVoir.addEventListener('click',()=>{ start.style.display='none'; result.style.display='block'; showAnswers(); }); btnNext.addEventListener('click',next); btnSkip.addEventListener('click',skip); root.querySelector('[data-btn-retry]').addEventListener('click',()=>{ sheetEl.style.display='none'; result.style.display='none'; quiz.style.display='block'; i=0; score=0; scoreEl.textContent=score; mountQuestion(); }); root.querySelector('[data-btn-answers]').addEventListener('click',showAnswers); }