1266 lines
72 KiB
HTML
1266 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IA & Gestion de projet — Cours interactif 1h</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--paper:#F4F4FB;
|
||
--paper-2:#F0F0F8;
|
||
--paper-3:#E8E8F4;
|
||
--card:#FFFFFF;
|
||
--ink:#1E1E2E;
|
||
--ink-2:#4B5563;
|
||
--ink-3:#9CA3AF;
|
||
--line:#E0E0EF;
|
||
--line-2:#D1D5DB;
|
||
--amber:#5B4FE8;
|
||
--amber-dark:#3730A3;
|
||
--amber-bg:#EEF0FB;
|
||
--amber-line:#C7C9F0;
|
||
--green:#65A30D;
|
||
--green-bg:#F0F9E8;
|
||
--green-line:#CCEAAA;
|
||
--red:#B91C1C;
|
||
--red-bg:#FEE2E2;
|
||
--red-line:#FECACA;
|
||
--blue:#6366F1;
|
||
--blue-bg:#EEF2FF;
|
||
--blue-line:#C7D2FE;
|
||
--violet:#60A5FA;
|
||
--violet-bg:#EFF6FF;
|
||
--violet-line:#BFDBFE;
|
||
--serif:'Plus Jakarta Sans', 'Inter', sans-serif;
|
||
--sans:'Inter', 'Plus Jakarta Sans', sans-serif;
|
||
--mono:'IBM Plex Mono', monospace;
|
||
--r-sm:6px; --r-md:12px; --r-lg:18px;
|
||
--sh-sm:0 1px 2px rgba(30,30,46,.05);
|
||
--sh-md:0 4px 14px rgba(30,30,46,.07);
|
||
--sh-lg:0 16px 40px rgba(30,30,46,.10);
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
background:var(--paper);
|
||
color:var(--ink);
|
||
font-family:var(--sans);
|
||
font-size:16px;
|
||
line-height:1.55;
|
||
min-height:100vh;
|
||
background-image:
|
||
radial-gradient(at 8% -10%, rgba(91,79,232,.07) 0, transparent 45%),
|
||
radial-gradient(at 95% 110%, rgba(55,48,163,.05) 0, transparent 40%);
|
||
background-attachment:fixed;
|
||
}
|
||
body::before{
|
||
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
|
||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
}
|
||
::selection{background:var(--amber);color:#fff}
|
||
|
||
/* ============ TOPBAR ============ */
|
||
.topbar{
|
||
position:sticky;top:0;z-index:50;
|
||
background:rgba(250,246,239,.88);
|
||
backdrop-filter:blur(10px);
|
||
border-bottom:1px solid var(--line);
|
||
}
|
||
.topbar-inner{
|
||
max-width:1060px;margin:0 auto;padding:10px 24px;
|
||
display:flex;align-items:center;gap:16px;
|
||
}
|
||
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
|
||
.brand-mark{
|
||
width:34px;height:34px;border-radius:9px;
|
||
background:var(--ink);color:var(--paper);
|
||
display:grid;place-items:center;
|
||
font-family:var(--serif);font-weight:700;font-size:15px;
|
||
box-shadow:inset 0 0 0 2px var(--amber);
|
||
}
|
||
.brand b{font-family:var(--serif);font-size:16px;letter-spacing:.2px}
|
||
.brand small{display:block;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
|
||
.hud{margin-left:auto;display:flex;align-items:center;gap:14px}
|
||
.xp-pill{
|
||
display:flex;align-items:center;gap:8px;
|
||
background:var(--ink);color:var(--paper);
|
||
border-radius:999px;padding:6px 14px 6px 8px;
|
||
font-weight:900;font-size:14px;
|
||
transition:transform .25s cubic-bezier(.34,1.56,.64,1);
|
||
}
|
||
.xp-pill.bump{transform:scale(1.15)}
|
||
.xp-pill .coin{
|
||
width:22px;height:22px;border-radius:50%;
|
||
background:radial-gradient(circle at 35% 30%, #A5B4FC, var(--amber) 70%);
|
||
display:grid;place-items:center;font-size:11px;color:#fff;font-weight:900;
|
||
box-shadow:0 1px 3px rgba(0,0,0,.3);
|
||
}
|
||
.badges-mini{display:flex;gap:4px}
|
||
.badge-dot{
|
||
width:26px;height:26px;border-radius:50%;
|
||
border:1.5px dashed var(--line-2);
|
||
display:grid;place-items:center;font-size:13px;
|
||
filter:grayscale(1);opacity:.4;
|
||
transition:all .4s cubic-bezier(.34,1.56,.64,1);
|
||
}
|
||
.badge-dot.won{
|
||
border:1.5px solid var(--amber);
|
||
background:var(--amber-bg);
|
||
filter:none;opacity:1;transform:scale(1.05);
|
||
}
|
||
.timer-chip{
|
||
font-family:var(--mono);font-size:12.5px;font-weight:600;
|
||
color:var(--ink-2);background:var(--card);
|
||
border:1px solid var(--line);border-radius:8px;padding:5px 10px;
|
||
display:flex;align-items:center;gap:6px;cursor:pointer;
|
||
user-select:none;
|
||
}
|
||
.timer-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
|
||
.timer-chip.running .dot{background:var(--green);animation:pulse 1.4s infinite}
|
||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
|
||
|
||
/* progress rail */
|
||
.rail{height:4px;background:var(--paper-3)}
|
||
.rail-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#818CF8);transition:width .5s ease;border-radius:0 3px 3px 0}
|
||
|
||
/* ============ LAYOUT ============ */
|
||
.stage{max-width:1060px;margin:0 auto;padding:28px 24px 120px;position:relative;z-index:1}
|
||
.slide{display:none;animation:slideIn .5s cubic-bezier(.22,1,.36,1)}
|
||
.slide.active{display:block}
|
||
@keyframes slideIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
|
||
|
||
.kicker{
|
||
display:inline-flex;align-items:center;gap:8px;
|
||
font-size:11.5px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
|
||
color:var(--amber-dark);background:var(--amber-bg);
|
||
border:1px solid var(--amber-line);border-radius:999px;padding:5px 14px;
|
||
margin-bottom:14px;
|
||
}
|
||
.kicker .min{font-family:var(--mono);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);border-left:1px solid var(--amber-line);padding-left:8px}
|
||
h1.title{font-family:var(--serif);font-size:clamp(28px,4.5vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.5px;margin-bottom:10px}
|
||
h1.title em{font-style:italic;color:var(--amber-dark)}
|
||
.lede{font-size:17.5px;color:var(--ink-2);max-width:680px;margin-bottom:26px}
|
||
h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12px}
|
||
|
||
/* cards */
|
||
.grid{display:grid;gap:14px}
|
||
.g2{grid-template-columns:repeat(2,1fr)}
|
||
.g3{grid-template-columns:repeat(3,1fr)}
|
||
.g4{grid-template-columns:repeat(4,1fr)}
|
||
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
|
||
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
|
||
.card{
|
||
background:var(--card);border:1px solid var(--line);
|
||
border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-sm);
|
||
transition:transform .2s,box-shadow .2s;
|
||
}
|
||
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
|
||
.card .ico{font-size:24px;margin-bottom:8px;display:block}
|
||
.card b{font-family:var(--serif);font-size:16.5px;display:block;margin-bottom:4px}
|
||
.card p{font-size:14px;color:var(--ink-2)}
|
||
|
||
.callout{
|
||
display:flex;gap:14px;align-items:flex-start;
|
||
border-radius:var(--r-md);padding:16px 18px;margin-top:22px;
|
||
font-size:14.5px;
|
||
}
|
||
.callout .ci{font-size:20px;flex-shrink:0;margin-top:1px}
|
||
.callout.amber{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-dark)}
|
||
.callout.green{background:var(--green-bg);border:1px solid var(--green-line);color:var(--green)}
|
||
.callout.blue{background:var(--blue-bg);border:1px solid var(--blue-line);color:var(--blue)}
|
||
.callout b{font-weight:900}
|
||
|
||
/* nav */
|
||
.navbar{
|
||
position:fixed;bottom:0;left:0;right:0;z-index:50;
|
||
background:rgba(250,246,239,.92);backdrop-filter:blur(10px);
|
||
border-top:1px solid var(--line);
|
||
}
|
||
.navbar-inner{
|
||
max-width:1060px;margin:0 auto;padding:12px 24px;
|
||
display:flex;align-items:center;gap:16px;
|
||
}
|
||
.btn{
|
||
font-family:var(--sans);font-weight:900;font-size:14.5px;
|
||
border:none;cursor:pointer;border-radius:10px;padding:11px 22px;
|
||
display:inline-flex;align-items:center;gap:8px;
|
||
transition:transform .15s,box-shadow .15s,background .2s;
|
||
}
|
||
.btn:active{transform:scale(.97)}
|
||
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh-sm)}
|
||
.btn-primary:hover{background:#000;box-shadow:var(--sh-md)}
|
||
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
|
||
.btn-ghost:hover{background:var(--paper-2)}
|
||
.btn-amber{background:var(--amber);color:#fff}
|
||
.btn-amber:hover{background:#c2670a}
|
||
.btn[disabled]{opacity:.35;cursor:not-allowed}
|
||
.step-dots{margin:0 auto;display:flex;gap:7px}
|
||
.sdot{width:9px;height:9px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:all .25s;border:none;padding:0}
|
||
.sdot.cur{background:var(--amber);transform:scale(1.35)}
|
||
.sdot.done{background:var(--ink-3)}
|
||
.slide-counter{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);min-width:54px;text-align:right}
|
||
|
||
/* toast XP */
|
||
.toast{
|
||
position:fixed;top:78px;right:24px;z-index:99;
|
||
background:var(--ink);color:var(--paper);
|
||
border-radius:12px;padding:12px 18px;font-weight:900;font-size:14.5px;
|
||
display:flex;align-items:center;gap:10px;
|
||
box-shadow:var(--sh-lg);
|
||
transform:translateX(130%);transition:transform .45s cubic-bezier(.34,1.56,.64,1);
|
||
}
|
||
.toast.show{transform:none}
|
||
.toast .t-ico{font-size:20px}
|
||
.toast small{display:block;font-weight:400;font-size:12px;color:#BBBBD4}
|
||
|
||
/* ============ SLIDE 0 : COVER ============ */
|
||
.cover{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:62vh}
|
||
@media(max-width:860px){.cover{grid-template-columns:1fr}}
|
||
.cover-stats{display:flex;gap:22px;margin:26px 0;flex-wrap:wrap}
|
||
.cstat{border-left:3px solid var(--amber);padding-left:14px}
|
||
.cstat b{font-family:var(--serif);font-size:26px;display:block;line-height:1.1}
|
||
.cstat span{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:1px;font-weight:700}
|
||
.agenda{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
|
||
.agenda-head{background:var(--ink);color:var(--paper);padding:14px 20px;font-family:var(--serif);font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
|
||
.agenda-head span{font-family:var(--mono);font-size:12px;color:#BBBBD4;font-weight:400}
|
||
.agenda-row{
|
||
display:flex;align-items:center;gap:12px;padding:11px 20px;
|
||
border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;
|
||
transition:background .15s;
|
||
}
|
||
.agenda-row:last-child{border-bottom:none}
|
||
.agenda-row:hover{background:var(--paper-2)}
|
||
.agenda-row .num{
|
||
font-family:var(--mono);font-size:11px;font-weight:600;color:var(--amber-dark);
|
||
background:var(--amber-bg);border:1px solid var(--amber-line);
|
||
width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;
|
||
}
|
||
.agenda-row .t{font-weight:700;flex:1}
|
||
.agenda-row .dur{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
|
||
.agenda-row .act-tag{font-size:9.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--violet);background:var(--violet-bg);border:1px solid var(--violet-line);padding:2px 7px;border-radius:99px}
|
||
|
||
/* ============ QUIZ (vrai/faux + final) ============ */
|
||
.qz-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:28px;max-width:760px;margin:0 auto}
|
||
.qz-progress{display:flex;gap:6px;margin-bottom:20px}
|
||
.qz-progress i{flex:1;height:5px;border-radius:3px;background:var(--paper-3);transition:background .3s}
|
||
.qz-progress i.ok{background:var(--green)}
|
||
.qz-progress i.ko{background:var(--red)}
|
||
.qz-progress i.cur{background:var(--amber)}
|
||
.qz-q{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.35;margin-bottom:20px;min-height:64px}
|
||
.qz-opts{display:grid;gap:10px}
|
||
.qz-opt{
|
||
text-align:left;background:var(--paper);border:1.5px solid var(--line-2);
|
||
border-radius:10px;padding:13px 16px;font-size:15px;font-weight:700;
|
||
cursor:pointer;font-family:var(--sans);color:var(--ink);
|
||
transition:all .15s;display:flex;align-items:center;gap:12px;
|
||
}
|
||
.qz-opt .key{
|
||
font-family:var(--mono);font-size:11px;background:var(--paper-3);
|
||
border-radius:6px;padding:2px 8px;color:var(--ink-3);flex-shrink:0;
|
||
}
|
||
.qz-opt:hover:not([disabled]){border-color:var(--amber);background:var(--amber-bg)}
|
||
.qz-opt.right{border-color:var(--green);background:var(--green-bg);color:var(--green)}
|
||
.qz-opt.wrong{border-color:var(--red);background:var(--red-bg);color:var(--red)}
|
||
.qz-opt[disabled]{cursor:default;opacity:.75}
|
||
.qz-opt.right,.qz-opt.wrong{opacity:1}
|
||
.qz-explain{
|
||
margin-top:16px;border-radius:10px;padding:14px 16px;font-size:14px;
|
||
display:none;animation:slideIn .35s;
|
||
}
|
||
.qz-explain.show{display:block}
|
||
.qz-explain.good{background:var(--green-bg);border:1px solid var(--green-line);color:var(--green)}
|
||
.qz-explain.bad{background:var(--red-bg);border:1px solid var(--red-line);color:var(--red)}
|
||
.qz-next{margin-top:18px;display:none}
|
||
.qz-next.show{display:inline-flex}
|
||
.qz-score-wrap{text-align:center;display:none;animation:slideIn .5s}
|
||
.qz-score-wrap.show{display:block}
|
||
.qz-big{font-family:var(--serif);font-size:54px;font-weight:700;color:var(--amber-dark)}
|
||
|
||
/* ============ TOOLS (slide outils) ============ */
|
||
.need-picker{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
|
||
.need-btn{
|
||
border:1.5px solid var(--line-2);background:var(--card);border-radius:99px;
|
||
padding:9px 18px;font-weight:700;font-size:14px;cursor:pointer;font-family:var(--sans);
|
||
transition:all .15s;color:var(--ink-2);
|
||
}
|
||
.need-btn:hover{border-color:var(--amber)}
|
||
.need-btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
|
||
.tool-card{position:relative;overflow:hidden}
|
||
.tool-card.dim{opacity:.25;filter:grayscale(.8);transform:scale(.98)}
|
||
.tool-card.hit{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg),var(--sh-md)}
|
||
.tool-card .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
|
||
.tool-card .tag{font-size:10.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--paper-2);color:var(--ink-3);border:1px solid var(--line)}
|
||
.tool-card .who{font-family:var(--mono);font-size:11.5px;color:var(--amber-dark);margin-top:2px;display:block}
|
||
|
||
/* ============ RCTF BUILDER ============ */
|
||
.rctf-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
|
||
@media(max-width:860px){.rctf-wrap{grid-template-columns:1fr}}
|
||
.rctf-col h4{font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
|
||
.rctf-letter{
|
||
width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
|
||
font-family:var(--serif);font-weight:700;font-size:14px;color:#fff;
|
||
}
|
||
.L-R{background:var(--amber)} .L-C{background:var(--blue)} .L-T{background:var(--green)} .L-F{background:var(--violet)}
|
||
.brick-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
|
||
.brick{
|
||
border:1.5px solid var(--line-2);background:var(--card);border-radius:9px;
|
||
padding:8px 13px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--sans);
|
||
transition:all .18s cubic-bezier(.34,1.56,.64,1);color:var(--ink-2);
|
||
}
|
||
.brick:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
|
||
.brick.sel-R{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-dark);transform:scale(1.03)}
|
||
.brick.sel-C{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);transform:scale(1.03)}
|
||
.brick.sel-T{background:var(--green-bg);border-color:var(--green);color:var(--green);transform:scale(1.03)}
|
||
.brick.sel-F{background:var(--violet-bg);border-color:var(--violet);color:var(--violet);transform:scale(1.03)}
|
||
.prompt-paper{
|
||
background:#1A1A2E;color:#E8E6F0;border-radius:var(--r-lg);
|
||
padding:22px;font-family:var(--mono);font-size:13.5px;line-height:1.8;
|
||
box-shadow:var(--sh-lg);min-height:280px;position:sticky;top:84px;
|
||
}
|
||
.prompt-paper .pp-head{
|
||
display:flex;align-items:center;gap:8px;margin-bottom:16px;
|
||
padding-bottom:12px;border-bottom:1px solid #2A2A42;
|
||
}
|
||
.pp-dot{width:10px;height:10px;border-radius:50%}
|
||
.prompt-paper .pp-title{font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#8B8BAA;margin-left:6px}
|
||
.pp-line{display:block;margin-bottom:10px;opacity:0;transform:translateX(-8px);transition:all .4s}
|
||
.pp-line.in{opacity:1;transform:none}
|
||
.pp-line .pl{font-weight:600;padding:1px 7px;border-radius:5px;margin-right:8px;font-size:11px}
|
||
.pl-R{background:rgba(91,79,232,.3);color:#A5B4FC}
|
||
.pl-C{background:rgba(99,102,241,.3);color:#C7D2FE}
|
||
.pl-T{background:rgba(101,163,13,.3);color:#CCEAAA}
|
||
.pl-F{background:rgba(96,165,250,.3);color:#BFDBFE}
|
||
.pp-placeholder{color:#555575;font-style:italic}
|
||
.power-meter{margin-top:18px;padding-top:14px;border-top:1px solid #2A2A42}
|
||
.power-meter .pm-label{font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#8B8BAA;display:flex;justify-content:space-between;margin-bottom:8px}
|
||
.pm-bar{height:9px;background:#2A2A42;border-radius:5px;overflow:hidden}
|
||
.pm-fill{height:100%;width:5%;border-radius:5px;background:linear-gradient(90deg,#B91C1C,#5B4FE8,#65A30D);transition:width .6s cubic-bezier(.22,1,.36,1)}
|
||
.pm-verdict{font-family:var(--sans);font-size:13px;font-weight:700;margin-top:8px;color:#BBBBD4;min-height:20px}
|
||
|
||
/* ============ KANBAN ============ */
|
||
.kb-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
|
||
@media(max-width:860px){.kb-board{grid-template-columns:repeat(2,1fr)}}
|
||
.kb-col{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;min-height:230px}
|
||
.kb-col h5{font-size:11.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;display:flex;justify-content:space-between}
|
||
.kb-col h5 .cnt{font-family:var(--mono);background:var(--card);border:1px solid var(--line);border-radius:5px;padding:0 6px;font-size:10.5px}
|
||
.kb-card{
|
||
background:var(--card);border:1px solid var(--line);border-radius:9px;
|
||
padding:10px 12px;margin-bottom:8px;font-size:13px;font-weight:700;
|
||
box-shadow:var(--sh-sm);position:relative;transition:all .3s;
|
||
}
|
||
.kb-card small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-3);margin-top:3px}
|
||
.kb-card.alert{border-color:var(--red);background:var(--red-bg);animation:wiggle .5s .2s}
|
||
.kb-card.boost{border-color:var(--green);background:var(--green-bg)}
|
||
.kb-card.ai-flag::after{
|
||
content:"⚠ IA";position:absolute;top:-8px;right:-6px;
|
||
font-size:9px;font-weight:900;background:var(--red);color:#fff;
|
||
padding:2px 7px;border-radius:99px;letter-spacing:.5px;
|
||
animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
|
||
}
|
||
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
|
||
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
|
||
.ai-console{
|
||
margin-top:18px;background:#1A1A2E;border-radius:var(--r-md);padding:18px 20px;
|
||
font-family:var(--mono);font-size:13px;color:#E8E6F0;line-height:1.75;
|
||
min-height:96px;box-shadow:var(--sh-md);
|
||
}
|
||
.ai-console .scan{color:#8B8BAA}
|
||
.ai-console .found{color:#F59E0B}
|
||
.ai-console .reco{color:#CCEAAA}
|
||
.cursor-blink{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;animation:pulse .9s infinite}
|
||
|
||
/* ============ CR TRANSFORMER ============ */
|
||
.cr-duo{display:grid;grid-template-columns:1fr 56px 1fr;gap:0;align-items:stretch}
|
||
@media(max-width:860px){.cr-duo{grid-template-columns:1fr}.cr-arrow{transform:rotate(90deg);margin:8px auto}}
|
||
.cr-pane{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
|
||
.cr-pane-head{padding:10px 16px;font-size:11.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
|
||
.cr-pane-head.raw{background:var(--paper-2);color:var(--ink-3)}
|
||
.cr-pane-head.out{background:var(--green-bg);color:var(--green)}
|
||
.cr-pane-body{padding:16px;font-size:13.5px;flex:1;min-height:300px}
|
||
.cr-pane-body.mono{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
|
||
.cr-arrow{display:grid;place-items:center;font-size:22px;color:var(--amber)}
|
||
.cr-out h6{font-family:var(--serif);font-size:14.5px;font-weight:700;margin:12px 0 6px;display:flex;align-items:center;gap:7px}
|
||
.cr-out h6:first-child{margin-top:0}
|
||
.cr-out ul{padding-left:18px;color:var(--ink-2)}
|
||
.cr-out li{margin-bottom:4px}
|
||
.cr-out .pill{font-size:10px;font-weight:900;padding:2px 8px;border-radius:99px;letter-spacing:.8px}
|
||
.pill-d{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-line)}
|
||
.pill-r{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}
|
||
.pill-a{background:var(--green-bg);color:var(--green);border:1px solid var(--green-line)}
|
||
.cr-reveal{opacity:0;transform:translateY(8px);transition:all .5s}
|
||
.cr-reveal.in{opacity:1;transform:none}
|
||
.stopwatch{
|
||
font-family:var(--mono);font-size:30px;font-weight:600;color:var(--amber-dark);
|
||
text-align:center;margin:14px 0 4px;
|
||
}
|
||
|
||
/* ============ WORKFLOW ============ */
|
||
.flow{position:relative;padding-left:34px}
|
||
.flow::before{
|
||
content:"";position:absolute;left:15px;top:18px;bottom:18px;width:2.5px;
|
||
background:repeating-linear-gradient(to bottom,var(--line-2) 0 6px,transparent 6px 12px);
|
||
}
|
||
.flow-step{
|
||
position:relative;background:var(--card);border:1px solid var(--line);
|
||
border-radius:var(--r-md);padding:16px 18px;margin-bottom:14px;
|
||
opacity:.35;transform:translateX(10px);transition:all .5s cubic-bezier(.22,1,.36,1);
|
||
box-shadow:var(--sh-sm);
|
||
}
|
||
.flow-step.lit{opacity:1;transform:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg),var(--sh-md)}
|
||
.flow-step.passed{opacity:1;transform:none}
|
||
.flow-step::before{
|
||
content:attr(data-n);position:absolute;left:-34px;top:16px;
|
||
width:30px;height:30px;border-radius:50%;background:var(--paper-3);
|
||
border:2px solid var(--line-2);color:var(--ink-3);
|
||
font-family:var(--mono);font-size:12px;font-weight:600;
|
||
display:grid;place-items:center;transition:all .4s;
|
||
}
|
||
.flow-step.lit::before,.flow-step.passed::before{background:var(--ink);border-color:var(--amber);color:var(--paper)}
|
||
.flow-step b{font-family:var(--serif);font-size:16px;display:flex;align-items:center;gap:8px}
|
||
.flow-step .fs-tools{font-family:var(--mono);font-size:11.5px;color:var(--amber-dark);margin:3px 0 5px}
|
||
.flow-step p{font-size:13.5px;color:var(--ink-2)}
|
||
.flow-step .gain{
|
||
display:none;margin-top:9px;font-size:12.5px;font-weight:900;color:var(--green);
|
||
background:var(--green-bg);border:1px solid var(--green-line);
|
||
border-radius:8px;padding:6px 12px;animation:slideIn .4s;
|
||
}
|
||
.flow-step.lit .gain,.flow-step.passed .gain{display:inline-block}
|
||
.flow-total{
|
||
text-align:center;margin-top:8px;font-family:var(--serif);font-size:19px;font-weight:700;
|
||
opacity:0;transition:opacity .6s;
|
||
}
|
||
.flow-total.show{opacity:1}
|
||
.flow-total b{color:var(--green);font-size:26px}
|
||
|
||
/* ============ BILAN ============ */
|
||
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 26px}
|
||
@media(max-width:860px){.impact-grid{grid-template-columns:repeat(2,1fr)}}
|
||
.impact{
|
||
background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
|
||
padding:22px 18px;text-align:center;box-shadow:var(--sh-sm);
|
||
}
|
||
.impact .big{font-family:var(--serif);font-size:38px;font-weight:700;color:var(--amber-dark);line-height:1;display:block}
|
||
.impact .lbl{font-weight:900;font-size:13.5px;margin-top:8px;display:block}
|
||
.impact .src{font-size:11.5px;color:var(--ink-3);margin-top:3px;display:block}
|
||
.plan-list{counter-reset:p;display:grid;gap:10px;max-width:680px}
|
||
.plan-item{
|
||
counter-increment:p;display:flex;gap:14px;align-items:flex-start;
|
||
background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
|
||
padding:15px 18px;font-size:14.5px;cursor:pointer;transition:all .2s;
|
||
}
|
||
.plan-item::before{
|
||
content:counter(p);font-family:var(--serif);font-weight:700;font-size:17px;
|
||
width:32px;height:32px;border-radius:50%;background:var(--amber-bg);
|
||
border:1.5px solid var(--amber-line);color:var(--amber-dark);
|
||
display:grid;place-items:center;flex-shrink:0;transition:all .25s;
|
||
}
|
||
.plan-item.ok{border-color:var(--green);background:var(--green-bg)}
|
||
.plan-item.ok::before{content:"✓";background:var(--green);border-color:var(--green);color:#fff}
|
||
.plan-item b{display:block}
|
||
.plan-item span{color:var(--ink-2);font-size:13.5px}
|
||
.final-badge{
|
||
text-align:center;padding:36px 20px;display:none;animation:slideIn .6s;
|
||
}
|
||
.final-badge.show{display:block}
|
||
.medal{
|
||
width:120px;height:120px;border-radius:50%;margin:0 auto 16px;
|
||
background:radial-gradient(circle at 35% 30%,#A5B4FC,var(--amber) 65%,var(--amber-dark));
|
||
display:grid;place-items:center;font-size:52px;
|
||
box-shadow:0 10px 30px rgba(91,79,232,.35),inset 0 2px 6px rgba(255,255,255,.5);
|
||
animation:medalSpin 1s cubic-bezier(.34,1.56,.64,1);
|
||
}
|
||
@keyframes medalSpin{from{transform:rotateY(180deg) scale(.3)}to{transform:none}}
|
||
|
||
/* ============ MODE FORMATEUR ============ */
|
||
.fnotes{
|
||
display:none;margin-top:30px;border:2px dashed var(--violet-line);
|
||
background:var(--violet-bg);border-radius:var(--r-md);padding:18px 20px;
|
||
font-size:13.5px;color:#4c2a8a;
|
||
}
|
||
body.formateur .fnotes{display:block}
|
||
.fnotes h5{font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}
|
||
.fnotes ul{padding-left:18px}
|
||
.fnotes li{margin-bottom:4px}
|
||
.fnotes .chrono{font-family:var(--mono);font-weight:600;background:#fff;border-radius:6px;padding:1px 8px;border:1px solid var(--violet-line)}
|
||
.formateur-flag{
|
||
display:none;position:fixed;bottom:74px;right:18px;z-index:60;
|
||
background:var(--violet);color:#fff;font-size:11px;font-weight:900;
|
||
letter-spacing:1.2px;text-transform:uppercase;border-radius:99px;padding:6px 14px;
|
||
box-shadow:var(--sh-md);
|
||
}
|
||
body.formateur .formateur-flag{display:block}
|
||
|
||
/* confetti */
|
||
.cf{position:fixed;top:-12px;z-index:999;width:9px;height:14px;pointer-events:none;animation:fall linear forwards}
|
||
@keyframes fall{to{transform:translateY(105vh) rotate(660deg);opacity:.7}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div class="topbar-inner">
|
||
<div class="brand">
|
||
<div class="brand-mark">IA</div>
|
||
<div><b>IA-PRO</b><small>Gestion de projet</small></div>
|
||
</div>
|
||
<div class="hud">
|
||
<div class="badges-mini" id="badgesMini" title="Badges à débloquer">
|
||
<span class="badge-dot" data-badge="quiz1">🧠</span>
|
||
<span class="badge-dot" data-badge="tools">🧰</span>
|
||
<span class="badge-dot" data-badge="rctf">🏗️</span>
|
||
<span class="badge-dot" data-badge="kanban">📋</span>
|
||
<span class="badge-dot" data-badge="cr">⚡</span>
|
||
<span class="badge-dot" data-badge="flow">🔁</span>
|
||
<span class="badge-dot" data-badge="final">🏆</span>
|
||
</div>
|
||
<div class="timer-chip" id="timerChip" title="Chronomètre de séance — cliquez pour démarrer/pauser">
|
||
<span class="dot"></span><span id="timerTxt">60:00</span>
|
||
</div>
|
||
<div class="xp-pill" id="xpPill"><span class="coin">★</span><span id="xpVal">0</span> XP</div>
|
||
</div>
|
||
</div>
|
||
<div class="rail"><div class="rail-fill" id="railFill"></div></div>
|
||
</header>
|
||
|
||
<div class="toast" id="toast"><span class="t-ico" id="toastIco">⭐</span><div><span id="toastTxt">+20 XP</span><small id="toastSub"></small></div></div>
|
||
<div class="formateur-flag">Mode formateur</div>
|
||
|
||
<main class="stage">
|
||
|
||
<!-- ════════ SLIDE 0 : COUVERTURE ════════ -->
|
||
<section class="slide active" data-title="Accueil">
|
||
<div class="cover">
|
||
<div>
|
||
<span class="kicker">Cours interactif <span class="min">⏱ 60 min</span></span>
|
||
<h1 class="title">L'IA, votre <em>copilote</em> de gestion de projet</h1>
|
||
<p class="lede">En une heure, vous repartez avec une méthode de prompt, trois démos concrètes et un plan d'action applicable dès demain matin. Pas de théorie abstraite — que du concret.</p>
|
||
<div class="cover-stats">
|
||
<div class="cstat"><b>7</b><span>badges à gagner</span></div>
|
||
<div class="cstat"><b>4</b><span>ateliers pratiques</span></div>
|
||
<div class="cstat"><b>1</b><span>méthode : RCTF</span></div>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="go(1)">Commencer le parcours →</button>
|
||
<p style="font-size:12.5px;color:var(--ink-3);margin-top:12px">💡 Naviguez avec les flèches ← → du clavier. Gagnez des XP en participant aux activités.</p>
|
||
</div>
|
||
<div class="agenda">
|
||
<div class="agenda-head">Programme de la séance <span>60 min</span></div>
|
||
<div class="agenda-row" onclick="go(1)"><span class="num">01</span><span class="t">Quiz d'échauffement</span><span class="act-tag">Quiz</span><span class="dur">5'</span></div>
|
||
<div class="agenda-row" onclick="go(2)"><span class="num">02</span><span class="t">Choisir le bon outil IA</span><span class="act-tag">Inter.</span><span class="dur">8'</span></div>
|
||
<div class="agenda-row" onclick="go(3)"><span class="num">03</span><span class="t">La méthode RCTF</span><span class="act-tag">Atelier</span><span class="dur">12'</span></div>
|
||
<div class="agenda-row" onclick="go(4)"><span class="num">04</span><span class="t">Kanban analysé par l'IA</span><span class="act-tag">Démo</span><span class="dur">8'</span></div>
|
||
<div class="agenda-row" onclick="go(5)"><span class="num">05</span><span class="t">Le CR en 30 secondes</span><span class="act-tag">Démo</span><span class="dur">10'</span></div>
|
||
<div class="agenda-row" onclick="go(6)"><span class="num">06</span><span class="t">Automatiser la chaîne</span><span class="act-tag">Inter.</span><span class="dur">8'</span></div>
|
||
<div class="agenda-row" onclick="go(7)"><span class="num">07</span><span class="t">Quiz final certifiant</span><span class="act-tag">Quiz</span><span class="dur">6'</span></div>
|
||
<div class="agenda-row" onclick="go(8)"><span class="num">08</span><span class="t">Bilan & plan d'action</span><span class="dur">3'</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — Accueil <span class="chrono">0:00 → 3:00</span></h5>
|
||
<ul>
|
||
<li>Lancez le chronomètre en haut à droite (clic sur 60:00) dès le début de séance.</li>
|
||
<li>Tour de table express : « Qui utilise déjà une IA au travail ? Pour quoi faire ? » — 2 min max.</li>
|
||
<li>Annoncez la gamification : XP + badges. Ça crée un fil rouge ludique pour l'heure.</li>
|
||
<li>Raccourci : touche <b>F</b> pour masquer/afficher ces notes.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 1 : QUIZ ÉCHAUFFEMENT ════════ -->
|
||
<section class="slide" data-title="Échauffement">
|
||
<span class="kicker">Séquence 01 — Quiz d'échauffement <span class="min">⏱ 5 min</span></span>
|
||
<h1 class="title">Vrai ou faux ? <em>Testez vos a priori</em></h1>
|
||
<p class="lede">Avant de plonger, balayons quatre idées reçues sur l'IA en gestion de projet. Répondez avec les touches <b>1</b> et <b>2</b> ou en cliquant.</p>
|
||
|
||
<div class="qz-card" id="warmCard">
|
||
<div class="qz-progress" id="warmProg"></div>
|
||
<div class="qz-q" id="warmQ"></div>
|
||
<div class="qz-opts" id="warmOpts"></div>
|
||
<div class="qz-explain" id="warmExp"></div>
|
||
<button class="btn btn-primary qz-next" id="warmNext">Question suivante →</button>
|
||
<div class="qz-score-wrap" id="warmDone">
|
||
<div class="qz-big" id="warmScore">0/4</div>
|
||
<p style="color:var(--ink-2);margin:6px 0 18px" id="warmMsg"></p>
|
||
<button class="btn btn-amber" onclick="go(2)">Passons aux outils →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — Échauffement <span class="chrono">3:00 → 8:00</span></h5>
|
||
<ul>
|
||
<li>Faites voter à main levée AVANT de cliquer : ça engage tout le groupe, pas que le volontaire au clavier.</li>
|
||
<li>Q2 (hallucinations) : c'est LE point de vigilance à marteler. Donnez un exemple vécu si possible.</li>
|
||
<li>Si le groupe est à l'aise, enchaînez vite. L'objectif est l'énergie, pas l'exhaustivité.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 2 : OUTILS ════════ -->
|
||
<section class="slide" data-title="Outils">
|
||
<span class="kicker">Séquence 02 — Panorama des outils <span class="min">⏱ 8 min</span></span>
|
||
<h1 class="title">Quel outil pour <em>quel besoin</em> ?</h1>
|
||
<p class="lede">Il n'existe pas d'outil miracle : il existe le bon outil pour votre besoin du moment. <b>Cliquez sur un besoin</b> ci-dessous — les outils adaptés s'illuminent.</p>
|
||
|
||
<div class="need-picker" id="needPicker">
|
||
<button class="need-btn" data-need="rediger">✍️ Rédiger un document</button>
|
||
<button class="need-btn" data-need="reunion">🎙️ Capturer une réunion</button>
|
||
<button class="need-btn" data-need="piloter">📌 Piloter les tâches</button>
|
||
<button class="need-btn" data-need="relier">🔁 Relier mes outils</button>
|
||
<button class="need-btn" data-need="decider">📊 Décider avec les données</button>
|
||
</div>
|
||
|
||
<div class="grid g3" id="toolGrid">
|
||
<div class="card tool-card" data-needs="rediger decider">
|
||
<span class="ico">💬</span><b>Assistants conversationnels</b>
|
||
<span class="who">Claude · ChatGPT · Gemini</span>
|
||
<p>Le couteau suisse : rédaction, synthèse, analyse, brainstorming. C'est par là qu'on commence.</p>
|
||
<div class="tags"><span class="tag">Rédaction</span><span class="tag">Synthèse</span><span class="tag">Analyse</span></div>
|
||
</div>
|
||
<div class="card tool-card" data-needs="piloter">
|
||
<span class="ico">🗂️</span><b>Gestion de projet IA</b>
|
||
<span class="who">Notion AI · ClickUp AI · Monday AI</span>
|
||
<p>L'IA intégrée à votre outil de pilotage : résumés de projet, génération de tâches, priorisation.</p>
|
||
<div class="tags"><span class="tag">Planification</span><span class="tag">Kanban</span></div>
|
||
</div>
|
||
<div class="card tool-card" data-needs="reunion">
|
||
<span class="ico">🎙️</span><b>Transcription & réunion</b>
|
||
<span class="who">Otter.ai · Fireflies · tl;dv</span>
|
||
<p>Transcrit vos réunions en temps réel et extrait automatiquement décisions et actions.</p>
|
||
<div class="tags"><span class="tag">CR auto</span><span class="tag">Action items</span></div>
|
||
</div>
|
||
<div class="card tool-card" data-needs="relier">
|
||
<span class="ico">🔗</span><b>Automatisation IA</b>
|
||
<span class="who">Make · Zapier AI · n8n</span>
|
||
<p>Le ciment entre vos outils : déclenche des actions en chaîne sans intervention humaine.</p>
|
||
<div class="tags"><span class="tag">Workflows</span><span class="tag">Alertes</span></div>
|
||
</div>
|
||
<div class="card tool-card" data-needs="decider">
|
||
<span class="ico">📈</span><b>Reporting intelligent</b>
|
||
<span class="who">Power BI Copilot · Tableau AI</span>
|
||
<p>Posez vos questions en français à vos données : tendances, anomalies, prévisions.</p>
|
||
<div class="tags"><span class="tag">Dashboard</span><span class="tag">Prédictif</span></div>
|
||
</div>
|
||
<div class="card tool-card" data-needs="rediger reunion">
|
||
<span class="ico">📝</span><b>Suites bureautiques IA</b>
|
||
<span class="who">Copilot 365 · Gemini Workspace</span>
|
||
<p>L'IA directement dans Word, Excel, Gmail : reformulation, formules, brouillons d'e-mails.</p>
|
||
<div class="tags"><span class="tag">Docs</span><span class="tag">E-mails</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout amber"><span class="ci">🎯</span><div><b>La règle d'or :</b> un seul assistant conversationnel pour commencer. Maîtrisez-le pendant un mois avant d'empiler d'autres outils. La compétence clé n'est pas l'outil — c'est le prompt. Justement…</div></div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — Outils <span class="chrono">8:00 → 16:00</span></h5>
|
||
<ul>
|
||
<li>Faites venir un apprenant cliquer les besoins. Demandez au groupe de deviner AVANT quels outils vont s'allumer.</li>
|
||
<li>Question d'ancrage : « Dans votre quotidien, quel besoin domine ? » → ça personnalise la suite.</li>
|
||
<li>Mentionnez la conformité : vérifier la politique interne de l'entreprise avant d'y mettre des données client.</li>
|
||
<li>Cliquer les 5 besoins débloque le badge 🧰 (+15 XP) — laissez les apprenants le découvrir.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 3 : RCTF BUILDER ════════ -->
|
||
<section class="slide" data-title="Méthode RCTF">
|
||
<span class="kicker">Séquence 03 — Atelier prompt <span class="min">⏱ 12 min</span></span>
|
||
<h1 class="title">Construisez un prompt <em>qui marche</em></h1>
|
||
<p class="lede">La méthode <b>RCTF</b> : <b style="color:var(--amber)">R</b>ôle, <b style="color:var(--blue)">C</b>ontexte, <b style="color:var(--green)">T</b>âche, <b style="color:var(--violet)">F</b>ormat. Assemblez votre prompt brique par brique et regardez sa puissance grimper.</p>
|
||
|
||
<div class="rctf-wrap">
|
||
<div class="rctf-col">
|
||
<h4><span class="rctf-letter L-R">R</span> Rôle — qui doit être l'IA ?</h4>
|
||
<div class="brick-row" data-slot="R">
|
||
<button class="brick" data-txt="Tu es un chef de projet senior certifié PMP, expert en gestion de crise.">Chef de projet senior</button>
|
||
<button class="brick" data-txt="Tu es un PMO expérimenté, spécialiste du reporting auprès des directions.">PMO / reporting</button>
|
||
<button class="brick" data-txt="Tu es un Scrum Master aguerri, coach d'équipes agiles depuis 10 ans.">Scrum Master</button>
|
||
</div>
|
||
<h4><span class="rctf-letter L-C">C</span> Contexte — quelle est la situation ?</h4>
|
||
<div class="brick-row" data-slot="C">
|
||
<button class="brick" data-txt="Mon projet de refonte du site web a 3 semaines de retard. Le client menace de pénalités, l'équipe est démotivée et le budget restant est de 15 000 €.">Projet en retard + client tendu</button>
|
||
<button class="brick" data-txt="Je lance un nouveau projet CRM avec une équipe de 6 personnes répartie sur 2 sites, deadline dans 4 mois.">Kick-off projet CRM</button>
|
||
<button class="brick" data-txt="Je prépare le COPIL trimestriel : 3 projets en cours, dont 1 au rouge sur le budget.">Préparation COPIL</button>
|
||
</div>
|
||
<h4><span class="rctf-letter L-T">T</span> Tâche — que doit-elle produire ?</h4>
|
||
<div class="brick-row" data-slot="T">
|
||
<button class="brick" data-txt="Propose un plan de rattrapage sur 3 semaines avec arbitrages possibles, quick wins et points de vigilance.">Plan de rattrapage</button>
|
||
<button class="brick" data-txt="Rédige l'ordre du jour de la réunion de lancement et la liste des risques à anticiper.">Ordre du jour + risques</button>
|
||
<button class="brick" data-txt="Synthétise la situation en 5 messages clés orientés décision pour la direction.">Synthèse pour direction</button>
|
||
</div>
|
||
<h4><span class="rctf-letter L-F">F</span> Format — sous quelle forme ?</h4>
|
||
<div class="brick-row" data-slot="F">
|
||
<button class="brick" data-txt="Présente le résultat en tableau : action / responsable / échéance / impact. Ton professionnel, 300 mots max.">Tableau structuré</button>
|
||
<button class="brick" data-txt="Rédige un e-mail prêt à envoyer, ton ferme mais constructif, 150 mots max.">E-mail prêt à envoyer</button>
|
||
<button class="brick" data-txt="Liste à puces hiérarchisée par priorité, avec un résumé exécutif de 3 lignes en tête.">Liste priorisée + résumé</button>
|
||
</div>
|
||
<button class="btn btn-ghost" id="rctfReset" style="margin-top:4px">↺ Recommencer</button>
|
||
</div>
|
||
|
||
<div class="prompt-paper">
|
||
<div class="pp-head">
|
||
<span class="pp-dot" style="background:#e0443e"></span>
|
||
<span class="pp-dot" style="background:#dea123"></span>
|
||
<span class="pp-dot" style="background:#1aab29"></span>
|
||
<span class="pp-title">Votre prompt en direct</span>
|
||
</div>
|
||
<div id="ppBody"><span class="pp-placeholder">Sélectionnez une brique dans chaque famille pour assembler votre prompt…</span></div>
|
||
<div class="power-meter">
|
||
<div class="pm-label"><span>Puissance du prompt</span><span id="pmPct">5 %</span></div>
|
||
<div class="pm-bar"><div class="pm-fill" id="pmFill"></div></div>
|
||
<div class="pm-verdict" id="pmVerdict">Un prompt vide n'a jamais sauvé un projet. 😅</div>
|
||
</div>
|
||
<button class="btn btn-amber" id="copyPrompt" style="margin-top:14px;display:none">📋 Copier le prompt</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout green"><span class="ci">📐</span><div><b>À retenir :</b> chaque lettre ajoutée à votre prompt réduit le nombre d'allers-retours avec l'IA. Un prompt RCTF complet donne en moyenne une réponse exploitable du premier coup — contre 3 à 4 itérations pour un prompt vague.</div></div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — RCTF <span class="chrono">16:00 → 28:00</span></h5>
|
||
<ul>
|
||
<li>C'est LE cœur de la séance. Prenez le temps : 5 min de démo guidée + 7 min de pratique libre.</li>
|
||
<li>Démarrez volontairement avec une seule brique (Tâche) → la jauge reste basse. Effet « aha » garanti.</li>
|
||
<li>Exercice miroir : demandez à chacun d'écrire mentalement sa propre brique Contexte avec un VRAI projet en cours.</li>
|
||
<li>Le bouton Copier apparaît à 100 % : faites tester le prompt en live dans Claude si vous avez le temps.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 4 : KANBAN ════════ -->
|
||
<section class="slide" data-title="Kanban IA">
|
||
<span class="kicker">Séquence 04 — Démo pilotage <span class="min">⏱ 8 min</span></span>
|
||
<h1 class="title">Votre kanban, <em>vu par une IA</em></h1>
|
||
<p class="lede">Voici un board de projet classique. À première vue, tout va bien… Lancez l'analyse IA et voyez ce qu'un œil algorithmique détecte en 2 secondes.</p>
|
||
|
||
<div class="kb-board" id="kbBoard">
|
||
<div class="kb-col"><h5>À faire <span class="cnt">3</span></h5>
|
||
<div class="kb-card">Brief client — V2<small>📅 Cette semaine</small></div>
|
||
<div class="kb-card" id="kbOnboard">Onboarding partenaire<small>👤 Thomas</small></div>
|
||
<div class="kb-card">Revue design sprint 4<small>📅 Vendredi</small></div>
|
||
</div>
|
||
<div class="kb-col"><h5>En cours <span class="cnt">2</span></h5>
|
||
<div class="kb-card" id="kbApi">Intégration API paiement<small>👤 Léa · ⏸ aucune activité depuis 3 j</small></div>
|
||
<div class="kb-card">Rédaction cahier des charges<small>👤 Karim · draft IA généré</small></div>
|
||
</div>
|
||
<div class="kb-col"><h5>En revue <span class="cnt">1</span></h5>
|
||
<div class="kb-card" id="kbAudit">Audit sécurité<small>📅 deadline J-2 · 0 relecteur assigné</small></div>
|
||
</div>
|
||
<div class="kb-col"><h5>Terminé <span class="cnt">2</span></h5>
|
||
<div class="kb-card boost">Maquettes validées<small>✅ Hier</small></div>
|
||
<div class="kb-card boost">Formation équipe IA<small>✅ Lundi</small></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;margin-top:18px">
|
||
<button class="btn btn-primary" id="kbScan">🔍 Lancer l'analyse IA du board</button>
|
||
</div>
|
||
<div class="ai-console" id="kbConsole" style="display:none"></div>
|
||
|
||
<div class="callout blue"><span class="ci">🤖</span><div><b>Comment ça marche en vrai ?</b> Notion AI, ClickUp Brain ou un workflow n8n connecté à votre board font exactement cela : croiser dates, assignations et activité pour détecter les signaux faibles qu'un humain pressé ne voit plus.</div></div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — Kanban <span class="chrono">28:00 → 36:00</span></h5>
|
||
<ul>
|
||
<li>AVANT de cliquer, demandez : « Repérez-vous des problèmes sur ce board ? » Laissez 60 s. Souvent ils voient le blocage API mais ratent l'audit sans relecteur.</li>
|
||
<li>Après l'analyse : « L'IA propose de réaffecter Thomas. Décideriez-vous comme elle ? » → débat sur IA = aide à la décision, pas décideur.</li>
|
||
<li>Pont avec leur réalité : quel est l'équivalent de ce board chez eux (Trello, planner, tableau blanc) ?</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 5 : CR 30 SECONDES ════════ -->
|
||
<section class="slide" data-title="CR express">
|
||
<span class="kicker">Séquence 05 — Démo compte-rendu <span class="min">⏱ 10 min</span></span>
|
||
<h1 class="title">Des notes brutes au CR, <em>en 30 secondes</em></h1>
|
||
<p class="lede">À gauche, de vraies notes prises à la volée — incomplètes, désordonnées, comme dans la vraie vie. Cliquez sur Transformer et chronométrez.</p>
|
||
|
||
<div class="stopwatch" id="crClock">00.0 s</div>
|
||
|
||
<div class="cr-duo">
|
||
<div class="cr-pane">
|
||
<div class="cr-pane-head raw">📥 Notes brutes — entrée</div>
|
||
<div class="cr-pane-body mono">réunion 5 juin projet Phoenix<br>— retard api 3j, léa seule dessus<br>— paul parti sur autre proj<br>— deadline 15 juin MAINTENUE (client ferme)<br>— client relancé 2x sans rép → escalade ?<br>— budget ok, design validé ✓<br>— prévoir débrief équipe lundi 9h<br>— karim propose doc partagé risques<br>— audit sécu : trouver relecteur avant jeudi</div>
|
||
</div>
|
||
<div class="cr-arrow">➜</div>
|
||
<div class="cr-pane">
|
||
<div class="cr-pane-head out">📤 Compte-rendu structuré — sortie IA</div>
|
||
<div class="cr-pane-body cr-out" id="crOut">
|
||
<div style="color:var(--ink-3);font-style:italic" id="crWait">En attente de transformation…</div>
|
||
<div class="cr-reveal"><h6><span class="pill pill-d">Décisions</span></h6>
|
||
<ul><li>Deadline du 15 juin <b>maintenue</b> — engagement client confirmé</li><li>Budget validé, design approuvé</li><li>Création d'un document partagé des risques (proposition Karim)</li></ul></div>
|
||
<div class="cr-reveal"><h6><span class="pill pill-r">Risques & blocages</span></h6>
|
||
<ul><li><b>API paiement :</b> 3 jours de retard, Léa seule sur le sujet (Paul réaffecté)</li><li><b>Client :</b> 2 relances sans réponse → escalade à envisager</li><li><b>Audit sécurité :</b> aucun relecteur identifié, échéance jeudi</li></ul></div>
|
||
<div class="cr-reveal"><h6><span class="pill pill-a">Plan d'action</span></h6>
|
||
<ul><li>Renforcer Léa sur l'API <b>avant vendredi</b> — resp. : CDP</li><li>Escalader le contact client si silence sous 48 h — resp. : CDP</li><li>Assigner un relecteur audit <b>avant jeudi</b> — resp. : Karim</li><li>Débrief équipe <b>lundi 9 h</b> — tous</li></ul></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;margin-top:18px">
|
||
<button class="btn btn-primary" id="crRun">⚡ Transformer les notes</button>
|
||
<a class="btn btn-ghost" href="prompt.html" target="_blank" style="text-decoration:none">🛠️ Ouvrir le générateur de prompt CR</a>
|
||
</div>
|
||
|
||
<div class="callout amber"><span class="ci">⏱️</span><div><b>Faites le calcul :</b> un CR manuel = 25 à 40 min. Avec l'IA = 30 s de génération + 4 min de relecture. Sur 3 réunions par semaine, c'est <b>~1h30 récupérée chaque semaine</b> — soit plus d'une semaine de travail par an.</div></div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — CR express <span class="chrono">36:00 → 46:00</span></h5>
|
||
<ul>
|
||
<li>Insistez : la sortie n'invente RIEN qui ne soit dans les notes. Faites pointer la correspondance ligne à ligne.</li>
|
||
<li>Point de vigilance : la relecture humaine reste obligatoire — l'IA peut mal interpréter une abréviation.</li>
|
||
<li>Atelier bonus si avance : ouvrez le générateur de prompt CR (bouton) et configurez un CR avec un vrai cas du groupe.</li>
|
||
<li>Données sensibles : rappeler d'anonymiser les notes avant de les confier à une IA publique.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 6 : WORKFLOW ════════ -->
|
||
<section class="slide" data-title="Automatisation">
|
||
<span class="kicker">Séquence 06 — La chaîne complète <span class="min">⏱ 8 min</span></span>
|
||
<h1 class="title">Et si tout ça tournait <em>tout seul</em> ?</h1>
|
||
<p class="lede">Chaque démo vue aujourd'hui est un maillon. Reliés entre eux, ils forment une chaîne automatisée de bout en bout. <b>Cliquez sur chaque étape</b> pour dérouler le workflow.</p>
|
||
|
||
<div class="flow" id="flowWrap">
|
||
<div class="flow-step" data-n="1" data-gain="≈ 20 min / réunion">
|
||
<b>🎙️ La réunion se tient</b>
|
||
<div class="fs-tools">Otter.ai · Fireflies · tl;dv</div>
|
||
<p>L'outil de transcription rejoint l'appel, transcrit en temps réel et génère un premier résumé dès la fin du call.</p>
|
||
<span class="gain"></span>
|
||
</div>
|
||
<div class="flow-step" data-n="2" data-gain="≈ 25 min / CR">
|
||
<b>📝 Le CR se rédige</b>
|
||
<div class="fs-tools">Claude · ChatGPT — via prompt RCTF</div>
|
||
<p>La transcription brute est envoyée à l'assistant avec votre template : décisions, risques, plan d'action ressortent structurés.</p>
|
||
<span class="gain"></span>
|
||
</div>
|
||
<div class="flow-step" data-n="3" data-gain="≈ 15 min / mise à jour">
|
||
<b>🔗 Les tâches s'injectent</b>
|
||
<div class="fs-tools">Make · Zapier · n8n</div>
|
||
<p>Le scénario d'automatisation lit le plan d'action et crée/actualise les cartes dans Notion, Trello ou Jira — doublons détectés.</p>
|
||
<span class="gain"></span>
|
||
</div>
|
||
<div class="flow-step" data-n="4" data-gain="≈ 30 min / semaine">
|
||
<b>🔔 Les relances partent</b>
|
||
<div class="fs-tools">IA + messagerie</div>
|
||
<p>Tâche en retard ? Une relance personnalisée est rédigée — ton adapté au destinataire — et soumise à votre validation avant envoi.</p>
|
||
<span class="gain"></span>
|
||
</div>
|
||
<div class="flow-step" data-n="5" data-gain="≈ 45 min / reporting">
|
||
<b>📊 Le reporting se compile</b>
|
||
<div class="fs-tools">Power BI Copilot · Notion AI</div>
|
||
<p>Chaque vendredi, un point d'avancement synthétique est généré automatiquement pour le sponsor et l'équipe.</p>
|
||
<span class="gain"></span>
|
||
</div>
|
||
</div>
|
||
<div class="flow-total" id="flowTotal">Temps récupéré sur la chaîne complète : <b>≈ 2h15 / semaine</b> 🎉</div>
|
||
|
||
<div class="callout green"><span class="ci">🧗</span><div><b>Stratégie d'adoption :</b> n'automatisez jamais tout d'un coup. Maillon 1 le premier mois, maillon 2 le suivant. Chaque étape doit être fiable à 95 % avant d'ajouter la suivante — sinon vous automatisez du chaos.</div></div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — Workflow <span class="chrono">46:00 → 54:00</span></h5>
|
||
<ul>
|
||
<li>Faites cliquer un apprenant différent par étape : 5 personnes impliquées, rythme soutenu.</li>
|
||
<li>À l'étape 4, soulignez « soumise à votre validation » : l'humain garde la main sur ce qui part vers l'extérieur.</li>
|
||
<li>Si public technique : mentionnez n8n auto-hébergé pour la maîtrise des données (RGPD).</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 7 : QUIZ FINAL ════════ -->
|
||
<section class="slide" data-title="Quiz final">
|
||
<span class="kicker">Séquence 07 — Quiz certifiant <span class="min">⏱ 6 min</span></span>
|
||
<h1 class="title">Le grand quiz : <em>validez vos acquis</em></h1>
|
||
<p class="lede">Cinq questions sur tout ce qu'on a vu. 20 XP par bonne réponse — et le badge 🏆 à la clé si vous décrochez au moins 4/5.</p>
|
||
|
||
<div class="qz-card" id="finCard">
|
||
<div class="qz-progress" id="finProg"></div>
|
||
<div class="qz-q" id="finQ"></div>
|
||
<div class="qz-opts" id="finOpts"></div>
|
||
<div class="qz-explain" id="finExp"></div>
|
||
<button class="btn btn-primary qz-next" id="finNext">Question suivante →</button>
|
||
<div class="qz-score-wrap" id="finDone">
|
||
<div class="qz-big" id="finScore">0/5</div>
|
||
<p style="color:var(--ink-2);margin:6px 0 18px" id="finMsg"></p>
|
||
<button class="btn btn-ghost" id="finRetry">↺ Retenter le quiz</button>
|
||
<button class="btn btn-amber" onclick="go(8)">Voir mon bilan →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — Quiz final <span class="chrono">54:00 → 57:00</span></h5>
|
||
<ul>
|
||
<li>Mode collectif recommandé : projection + vote du groupe avant de cliquer. Débat express sur les désaccords.</li>
|
||
<li>Le bouton « Retenter » permet la remédiation immédiate si le score est faible.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════ SLIDE 8 : BILAN ════════ -->
|
||
<section class="slide" data-title="Bilan">
|
||
<span class="kicker">Séquence 08 — Bilan & plan d'action <span class="min">⏱ 3 min</span></span>
|
||
<h1 class="title">Ce que ça change, <em>concrètement</em></h1>
|
||
<p class="lede">Constats moyens observés après 3 mois d'adoption de l'IA dans le suivi de projet :</p>
|
||
|
||
<div class="impact-grid">
|
||
<div class="impact"><span class="big" data-count="-60" data-suffix="%">0%</span><span class="lbl">Temps de rédaction</span><span class="src">CR, rapports, synthèses</span></div>
|
||
<div class="impact"><span class="big" data-count="35" data-prefix="+" data-suffix="%">0%</span><span class="lbl">Réactivité équipe</span><span class="src">Alertes sur blocages</span></div>
|
||
<div class="impact"><span class="big" data-count="-40" data-suffix="%">0%</span><span class="lbl">Réunions de suivi</span><span class="src">Remplacées par reportings auto</span></div>
|
||
<div class="impact"><span class="big" data-count="2.5" data-prefix="×" data-decimal="1">×0</span><span class="lbl">Vitesse de décision</span><span class="src">Données centralisées</span></div>
|
||
</div>
|
||
|
||
<h3 class="sub">📋 Votre plan d'action — cochez vos engagements</h3>
|
||
<div class="plan-list" id="planList">
|
||
<div class="plan-item"><div><b>Cette semaine : un seul processus</b><span>Choisissez le CR de réunion. Testez le prompt RCTF construit aujourd'hui sur votre prochaine réunion réelle.</span></div></div>
|
||
<div class="plan-item"><div><b>Semaine 2 : mesurez</b><span>Chronométrez le temps gagné. Un chiffre concret vaut mieux que mille convictions pour embarquer votre équipe.</span></div></div>
|
||
<div class="plan-item"><div><b>Mois 1 : partagez</b><span>Présentez votre gain à l'équipe et formez un collègue à la méthode RCTF. L'adoption se propage par l'exemple.</span></div></div>
|
||
<div class="plan-item"><div><b>Mois 2 : automatisez UN maillon</b><span>Reliez transcription → CR avec Make ou n8n. Un seul maillon, fiabilisé à 95 %, avant le suivant.</span></div></div>
|
||
</div>
|
||
|
||
<div class="final-badge" id="finalBadge">
|
||
<div class="medal">🏆</div>
|
||
<h3 class="sub" style="margin:0 0 4px">Parcours complété !</h3>
|
||
<p style="color:var(--ink-2)">Score final : <b id="finalXp">0 XP</b> — <span id="finalRank"></span></p>
|
||
</div>
|
||
|
||
<div style="text-align:center;margin-top:26px">
|
||
<a class="btn btn-amber" href="prompt.html" target="_blank" style="text-decoration:none">🛠️ Récupérer mon générateur de prompts CR →</a>
|
||
</div>
|
||
|
||
<div class="fnotes">
|
||
<h5>🎓 Notes formateur — Clôture <span class="chrono">57:00 → 60:00</span></h5>
|
||
<ul>
|
||
<li>Faites cocher les 4 engagements à voix haute, individuellement : l'engagement public augmente le passage à l'acte.</li>
|
||
<li>Distribuez le lien du générateur de prompt : c'est le livrable que les apprenants emportent.</li>
|
||
<li>Annoncez le suivi : un point à J+15 pour partager les premiers temps gagnés mesurés.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<nav class="navbar">
|
||
<div class="navbar-inner">
|
||
<button class="btn btn-ghost" id="prevBtn">← Précédent</button>
|
||
<div class="step-dots" id="stepDots"></div>
|
||
<span class="slide-counter" id="slideCounter">1 / 9</span>
|
||
<button class="btn btn-primary" id="nextBtn">Suivant →</button>
|
||
</div>
|
||
</nav>
|
||
<script>
|
||
/* ═══════════ ÉTAT GLOBAL ═══════════ */
|
||
const S = { idx:0, xp:0, badges:new Set(), needsSeen:new Set(), flowLit:0 };
|
||
const N = document.querySelectorAll('.slide').length;
|
||
|
||
/* ═══════════ XP / BADGES / TOAST ═══════════ */
|
||
function toast(txt, sub, ico='⭐'){
|
||
const t=document.getElementById('toast');
|
||
document.getElementById('toastTxt').textContent=txt;
|
||
document.getElementById('toastSub').textContent=sub||'';
|
||
document.getElementById('toastIco').textContent=ico;
|
||
t.classList.add('show');
|
||
clearTimeout(t._h); t._h=setTimeout(()=>t.classList.remove('show'),2600);
|
||
}
|
||
function addXP(n, why){
|
||
S.xp+=n;
|
||
document.getElementById('xpVal').textContent=S.xp;
|
||
const p=document.getElementById('xpPill');
|
||
p.classList.add('bump'); setTimeout(()=>p.classList.remove('bump'),300);
|
||
if(why) toast(`+${n} XP`, why);
|
||
}
|
||
function winBadge(id, label, ico){
|
||
if(S.badges.has(id)) return;
|
||
S.badges.add(id);
|
||
const d=document.querySelector(`.badge-dot[data-badge="${id}"]`);
|
||
if(d) d.classList.add('won');
|
||
toast(`Badge débloqué !`, label, ico);
|
||
}
|
||
|
||
/* ═══════════ NAVIGATION ═══════════ */
|
||
const slides=[...document.querySelectorAll('.slide')];
|
||
const dotsWrap=document.getElementById('stepDots');
|
||
slides.forEach((s,i)=>{
|
||
const b=document.createElement('button');
|
||
b.className='sdot'; b.title=s.dataset.title;
|
||
b.onclick=()=>go(i);
|
||
dotsWrap.appendChild(b);
|
||
});
|
||
function go(i){
|
||
if(i<0||i>=N) return;
|
||
slides[S.idx].classList.remove('active');
|
||
S.idx=i;
|
||
slides[i].classList.add('active');
|
||
window.scrollTo({top:0});
|
||
document.getElementById('railFill').style.width=((i+1)/N*100)+'%';
|
||
document.getElementById('slideCounter').textContent=`${i+1} / ${N}`;
|
||
[...dotsWrap.children].forEach((d,k)=>{
|
||
d.classList.toggle('cur',k===i);
|
||
d.classList.toggle('done',k<i);
|
||
});
|
||
document.getElementById('prevBtn').disabled=(i===0);
|
||
document.getElementById('nextBtn').disabled=(i===N-1);
|
||
if(i===8) launchBilan();
|
||
}
|
||
document.getElementById('prevBtn').onclick=()=>go(S.idx-1);
|
||
document.getElementById('nextBtn').onclick=()=>go(S.idx+1);
|
||
document.addEventListener('keydown',e=>{
|
||
if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA') return;
|
||
if(e.key==='ArrowRight') go(S.idx+1);
|
||
if(e.key==='ArrowLeft') go(S.idx-1);
|
||
if(e.key.toLowerCase()==='f') document.body.classList.toggle('formateur');
|
||
});
|
||
go(0);
|
||
|
||
/* ═══════════ CHRONO SÉANCE ═══════════ */
|
||
let chrono={left:3600, on:false, h:null};
|
||
const tChip=document.getElementById('timerChip'), tTxt=document.getElementById('timerTxt');
|
||
function fmtT(s){const m=Math.floor(s/60),x=s%60;return `${String(m).padStart(2,'0')}:${String(x).padStart(2,'0')}`}
|
||
tChip.onclick=()=>{
|
||
chrono.on=!chrono.on;
|
||
tChip.classList.toggle('running',chrono.on);
|
||
if(chrono.on){ chrono.h=setInterval(()=>{ chrono.left=Math.max(0,chrono.left-1); tTxt.textContent=fmtT(chrono.left); if(!chrono.left){clearInterval(chrono.h);toast('Temps écoulé !','Fin de séance','⏰')} },1000);}
|
||
else clearInterval(chrono.h);
|
||
};
|
||
|
||
/* ═══════════ MOTEUR DE QUIZ GÉNÉRIQUE ═══════════ */
|
||
function makeQuiz(cfg){
|
||
const prog=document.getElementById(cfg.prog), qEl=document.getElementById(cfg.q),
|
||
opts=document.getElementById(cfg.opts), exp=document.getElementById(cfg.exp),
|
||
next=document.getElementById(cfg.next), done=document.getElementById(cfg.done);
|
||
let cur=0, score=0, finished=false;
|
||
prog.innerHTML=cfg.questions.map(()=>'<i></i>').join('');
|
||
function render(){
|
||
const Q=cfg.questions[cur];
|
||
[...prog.children].forEach((p,i)=>p.classList.toggle('cur',i===cur));
|
||
qEl.textContent=Q.q;
|
||
exp.className='qz-explain'; next.classList.remove('show');
|
||
opts.innerHTML='';
|
||
Q.a.forEach((txt,i)=>{
|
||
const b=document.createElement('button');
|
||
b.className='qz-opt';
|
||
b.innerHTML=`<span class="key">${i+1}</span>${txt}`;
|
||
b.onclick=()=>answer(i,b);
|
||
opts.appendChild(b);
|
||
});
|
||
}
|
||
function answer(i,btn){
|
||
if(opts.querySelector('[disabled]')) return;
|
||
const Q=cfg.questions[cur], good=(i===Q.ok);
|
||
[...opts.children].forEach((b,k)=>{
|
||
b.disabled=true;
|
||
if(k===Q.ok) b.classList.add('right');
|
||
else if(k===i) b.classList.add('wrong');
|
||
});
|
||
prog.children[cur].classList.add(good?'ok':'ko');
|
||
prog.children[cur].classList.remove('cur');
|
||
exp.textContent=(good?'✅ ':'❌ ')+Q.e;
|
||
exp.classList.add('show',good?'good':'bad');
|
||
if(good){score++; addXP(cfg.xp);}
|
||
next.textContent=(cur<cfg.questions.length-1)?'Question suivante →':'Voir mon score →';
|
||
next.classList.add('show');
|
||
}
|
||
next.onclick=()=>{
|
||
if(cur<cfg.questions.length-1){cur++;render();}
|
||
else{
|
||
finished=true;
|
||
qEl.style.display='none';opts.style.display='none';
|
||
exp.className='qz-explain';next.classList.remove('show');
|
||
done.classList.add('show');
|
||
done.querySelector('.qz-big').textContent=`${score}/${cfg.questions.length}`;
|
||
cfg.onEnd(score);
|
||
}
|
||
};
|
||
document.addEventListener('keydown',e=>{
|
||
if(finished||!slides[cfg.slideIdx].classList.contains('active'))return;
|
||
const n=parseInt(e.key);
|
||
if(n>=1&&n<=cfg.questions.length&&opts.children[n-1]&&!opts.querySelector('[disabled]')) opts.children[n-1].click();
|
||
});
|
||
render();
|
||
return {reset(){cur=0;score=0;finished=false;qEl.style.display='';opts.style.display='grid';done.classList.remove('show');prog.innerHTML=cfg.questions.map(()=>'<i></i>').join('');render();}};
|
||
}
|
||
|
||
/* Quiz échauffement */
|
||
makeQuiz({
|
||
slideIdx:1, prog:'warmProg', q:'warmQ', opts:'warmOpts', exp:'warmExp', next:'warmNext', done:'warmDone', xp:10,
|
||
questions:[
|
||
{q:"« L'IA va remplacer les chefs de projet d'ici 5 ans. »",a:["Vrai","Faux"],ok:1,e:"Faux. L'IA automatise des tâches (CR, reporting, relances) mais pas le métier : arbitrer, négocier, motiver une équipe restent profondément humains. Elle remplace des heures, pas des rôles."},
|
||
{q:"« Une IA peut affirmer avec aplomb quelque chose de complètement faux. »",a:["Vrai","Faux"],ok:0,e:"Vrai ! C'est ce qu'on appelle une « hallucination ». Règle d'or absolue : toute donnée chiffrée, date ou nom produit par l'IA se vérifie avant diffusion."},
|
||
{q:"« Pour avoir une bonne réponse, il suffit de poser une question courte et simple. »",a:["Vrai","Faux"],ok:1,e:"Faux. C'est l'inverse : plus vous donnez de contexte (rôle, situation, attendu, format), meilleure est la réponse. C'est exactement la méthode RCTF qu'on voit dans 10 minutes."},
|
||
{q:"« Je peux coller le contrat confidentiel d'un client dans n'importe quelle IA publique. »",a:["Vrai","Faux"],ok:1,e:"Faux, et c'est crucial : données client = vérifier la politique de confidentialité de l'outil ET les règles internes de votre entreprise. Anonymisez par défaut."},
|
||
],
|
||
onEnd(score){
|
||
document.getElementById('warmMsg').textContent=score===4?"Sans faute ! Vos a priori sont déjà bien calibrés.":score>=2?"Bonne base — les pièges classiques sont identifiés.":"Parfait, c'est exactement pour ça qu'on est là. Tout va s'éclaircir.";
|
||
winBadge('quiz1','Échauffement réussi','🧠');
|
||
}
|
||
});
|
||
|
||
/* Quiz final */
|
||
const finQuiz=makeQuiz({
|
||
slideIdx:7, prog:'finProg', q:'finQ', opts:'finOpts', exp:'finExp', next:'finNext', done:'finDone', xp:20,
|
||
questions:[
|
||
{q:"Que signifie le sigle RCTF ?",a:["Rôle, Contexte, Tâche, Format","Règles, Cadre, Temps, Finalité","Rédiger, Corriger, Tester, Finaliser"],ok:0,e:"Rôle, Contexte, Tâche, Format : les 4 briques d'un prompt qui donne une réponse exploitable du premier coup."},
|
||
{q:"Votre équipe perd du temps en réunions de suivi. Quel duo d'outils attaquer en premier ?",a:["Power BI + Tableau","Transcription (Otter/Fireflies) + assistant IA pour le CR","Un nouveau logiciel de visioconférence"],ok:1,e:"Le combo transcription + CR automatique attaque la racine : capter ce qui se dit et le transformer en décisions/actions sans ressaisie."},
|
||
{q:"L'IA de votre kanban suggère de réaffecter un collègue. Que faites-vous ?",a:["J'applique : l'IA a analysé les données","J'évalue la suggestion puis je décide, en parlant aux personnes concernées","J'ignore : une IA ne comprend rien aux équipes"],ok:1,e:"L'IA détecte les signaux et propose ; l'humain contextualise et décide. Ni soumission aveugle, ni rejet de principe."},
|
||
{q:"Quelle est la bonne stratégie pour automatiser sa chaîne de suivi projet ?",a:["Tout connecter d'un coup pour un effet maximal","Un maillon à la fois, fiabilisé à 95 % avant le suivant","Attendre que l'outil parfait tout-en-un existe"],ok:1,e:"Automatiser maillon par maillon : chaque étape doit être fiable avant d'ajouter la suivante, sinon on automatise du chaos."},
|
||
{q:"Avant de diffuser un CR généré par l'IA, l'étape non négociable est :",a:["Le mettre en page avec le logo","Le relire et vérifier les faits (noms, dates, décisions)","Le faire régénérer 3 fois pour comparer"],ok:1,e:"La relecture humaine est obligatoire : l'IA peut mal interpréter une abréviation ou halluciner un détail. Vous restez responsable de ce que vous diffusez."},
|
||
],
|
||
onEnd(score){
|
||
document.getElementById('finMsg').textContent=score>=4?"Excellent ! Vous êtes prêt·e à passer à la pratique dès demain.":score>=3?"Solide. Un dernier coup d'œil aux séquences ratées et c'est acquis.":"Les fondamentaux méritent une révision — retentez le quiz, c'est fait pour ça.";
|
||
if(score>=4) winBadge('final','Quiz certifiant réussi','🏆');
|
||
}
|
||
});
|
||
document.getElementById('finRetry').onclick=()=>finQuiz.reset();
|
||
|
||
/* ═══════════ SLIDE 2 : OUTILS ═══════════ */
|
||
document.getElementById('needPicker').addEventListener('click',e=>{
|
||
const b=e.target.closest('.need-btn'); if(!b) return;
|
||
document.querySelectorAll('.need-btn').forEach(x=>x.classList.toggle('on',x===b));
|
||
const need=b.dataset.need;
|
||
document.querySelectorAll('.tool-card').forEach(c=>{
|
||
const hit=c.dataset.needs.split(' ').includes(need);
|
||
c.classList.toggle('hit',hit);
|
||
c.classList.toggle('dim',!hit);
|
||
});
|
||
if(!S.needsSeen.has(need)){
|
||
S.needsSeen.add(need);
|
||
addXP(3);
|
||
if(S.needsSeen.size===5) winBadge('tools','Explorateur d\'outils — 5 besoins testés','🧰');
|
||
}
|
||
});
|
||
|
||
/* ═══════════ SLIDE 3 : RCTF BUILDER ═══════════ */
|
||
const rctfSel={R:null,C:null,T:null,F:null};
|
||
const verdicts={
|
||
0:["Un prompt vide n'a jamais sauvé un projet. 😅",5],
|
||
1:["L'IA va devoir deviner 75 % du boulot…",25],
|
||
2:["Ça prend forme, mais elle navigue encore à vue.",50],
|
||
3:["Presque ! Il manque une brique pour le sans-faute.",75],
|
||
4:["💪 Prompt de pro : réponse exploitable du premier coup !",100]
|
||
};
|
||
document.querySelectorAll('.brick-row').forEach(row=>{
|
||
row.addEventListener('click',e=>{
|
||
const b=e.target.closest('.brick'); if(!b) return;
|
||
const slot=row.dataset.slot;
|
||
row.querySelectorAll('.brick').forEach(x=>x.classList.remove('sel-'+slot));
|
||
b.classList.add('sel-'+slot);
|
||
rctfSel[slot]=b.dataset.txt;
|
||
renderPrompt();
|
||
});
|
||
});
|
||
function renderPrompt(){
|
||
const body=document.getElementById('ppBody');
|
||
const order=['R','C','T','F'], labels={R:'RÔLE',C:'CONTEXTE',T:'TÂCHE',F:'FORMAT'};
|
||
const picked=order.filter(k=>rctfSel[k]);
|
||
if(!picked.length){ body.innerHTML='<span class="pp-placeholder">Sélectionnez une brique dans chaque famille pour assembler votre prompt…</span>'; }
|
||
else{
|
||
body.innerHTML=order.map(k=>rctfSel[k]?`<span class="pp-line" data-k="${k}"><span class="pl pl-${k}">${labels[k]}</span>${rctfSel[k]}</span>`:'').join('');
|
||
requestAnimationFrame(()=>requestAnimationFrame(()=>body.querySelectorAll('.pp-line').forEach((l,i)=>setTimeout(()=>l.classList.add('in'),i*90))));
|
||
}
|
||
const n=picked.length, [verdict,pct]=verdicts[n];
|
||
document.getElementById('pmFill').style.width=pct+'%';
|
||
document.getElementById('pmPct').textContent=pct+' %';
|
||
document.getElementById('pmVerdict').textContent=verdict;
|
||
document.getElementById('copyPrompt').style.display=(n===4)?'inline-flex':'none';
|
||
if(n===4 && !S.badges.has('rctf')){ addXP(25); winBadge('rctf','Architecte de prompt — RCTF complet','🏗️'); }
|
||
}
|
||
document.getElementById('rctfReset').onclick=()=>{
|
||
Object.keys(rctfSel).forEach(k=>rctfSel[k]=null);
|
||
document.querySelectorAll('.brick').forEach(b=>b.className='brick');
|
||
renderPrompt();
|
||
};
|
||
document.getElementById('copyPrompt').onclick=function(){
|
||
const txt=['R','C','T','F'].map(k=>rctfSel[k]).join('\n\n');
|
||
navigator.clipboard.writeText(txt).then(()=>{this.textContent='✅ Copié !';setTimeout(()=>this.textContent='📋 Copier le prompt',1800);});
|
||
};
|
||
|
||
/* ═══════════ SLIDE 4 : KANBAN SCAN ═══════════ */
|
||
document.getElementById('kbScan').onclick=function(){
|
||
this.disabled=true;
|
||
const con=document.getElementById('kbConsole');
|
||
con.style.display='block'; con.innerHTML='<span class="scan">▶ Analyse du board en cours</span><span class="cursor-blink"></span>';
|
||
const lines=[
|
||
{t:900, h:'<span class="scan">▶ Analyse du board… 8 cartes · 4 colonnes · 3 assignations croisées</span>'},
|
||
{t:2000, h:'<span class="found">⚠ Signal 1 — « Intégration API paiement » : aucune activité depuis 3 jours, Léa seule assignée.</span>', fx:()=>{document.getElementById('kbApi').classList.add('alert','ai-flag')}},
|
||
{t:3300, h:'<span class="found">⚠ Signal 2 — « Audit sécurité » : échéance dans 2 jours, aucun relecteur assigné.</span>', fx:()=>{document.getElementById('kbAudit').classList.add('alert','ai-flag')}},
|
||
{t:4700, h:'<span class="reco">✦ Recommandation — Thomas (« Onboarding partenaire », non urgent) peut renforcer Léa sur l\'API et relire l\'audit. Réaffectation proposée → en attente de votre validation.</span>', fx:()=>{document.getElementById('kbOnboard').classList.add('boost')}},
|
||
];
|
||
let html='';
|
||
lines.forEach(L=>setTimeout(()=>{ html+=L.h+'<br>'; con.innerHTML=html+'<span class="cursor-blink"></span>'; if(L.fx)L.fx(); },L.t));
|
||
setTimeout(()=>{ con.innerHTML=html; addXP(15); winBadge('kanban','Détective de board — analyse lancée','📋'); },5600);
|
||
};
|
||
|
||
/* ═══════════ SLIDE 5 : CR TRANSFORM ═══════════ */
|
||
document.getElementById('crRun').onclick=function(){
|
||
this.disabled=true;
|
||
const clock=document.getElementById('crClock');
|
||
document.getElementById('crWait').style.display='none';
|
||
let t=0;
|
||
const h=setInterval(()=>{t+=0.1;clock.textContent=t.toFixed(1)+' s';},100);
|
||
const reveals=[...document.querySelectorAll('.cr-reveal')];
|
||
reveals.forEach((r,i)=>setTimeout(()=>r.classList.add('in'),600+i*900));
|
||
setTimeout(()=>{
|
||
clearInterval(h);
|
||
clock.textContent='✅ '+t.toFixed(1)+' s — contre 25 à 40 min à la main';
|
||
clock.style.color='var(--green)';
|
||
addXP(15); winBadge('cr','Magicien du CR — 30 s chrono','⚡');
|
||
},600+reveals.length*900+400);
|
||
};
|
||
|
||
/* ═══════════ SLIDE 6 : WORKFLOW ═══════════ */
|
||
document.querySelectorAll('.flow-step').forEach((step,i,all)=>{
|
||
step.querySelector('.gain').textContent='⏱ Gain : '+step.dataset.gain;
|
||
step.addEventListener('click',()=>{
|
||
if(step.classList.contains('lit')||step.classList.contains('passed'))return;
|
||
document.querySelectorAll('.flow-step.lit').forEach(s=>{s.classList.remove('lit');s.classList.add('passed')});
|
||
step.classList.add('lit');
|
||
S.flowLit++;
|
||
addXP(5);
|
||
if(S.flowLit===all.length){
|
||
document.getElementById('flowTotal').classList.add('show');
|
||
winBadge('flow','Chaîne complète déroulée','🔁');
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ═══════════ SLIDE 8 : BILAN ═══════════ */
|
||
let bilanDone=false;
|
||
function launchBilan(){
|
||
if(bilanDone) return; bilanDone=true;
|
||
document.querySelectorAll('.impact .big').forEach(el=>{
|
||
const target=parseFloat(el.dataset.count), pre=el.dataset.prefix||'', suf=el.dataset.suffix||'', dec=parseInt(el.dataset.decimal||0);
|
||
const t0=performance.now(), dur=1400;
|
||
(function tick(now){
|
||
const p=Math.min(1,(now-t0)/dur), ease=1-Math.pow(1-p,3);
|
||
el.textContent=pre+(target*ease).toFixed(dec)+suf;
|
||
if(p<1) requestAnimationFrame(tick);
|
||
})(t0);
|
||
});
|
||
if(S.badges.size>=5) celebrate();
|
||
}
|
||
document.getElementById('planList').addEventListener('click',e=>{
|
||
const it=e.target.closest('.plan-item'); if(!it||it.classList.contains('ok')) return;
|
||
it.classList.add('ok'); addXP(5,'Engagement pris !');
|
||
if([...document.querySelectorAll('.plan-item')].every(p=>p.classList.contains('ok'))) celebrate();
|
||
});
|
||
function celebrate(){
|
||
const fb=document.getElementById('finalBadge');
|
||
if(fb.classList.contains('show')) return;
|
||
fb.classList.add('show');
|
||
document.getElementById('finalXp').textContent=S.xp+' XP';
|
||
document.getElementById('finalRank').textContent=S.xp>=180?'rang : Copilote IA confirmé 🚀':S.xp>=110?'rang : Pilote en progression ✈️':'rang : Décollage réussi 🛫';
|
||
for(let i=0;i<90;i++){
|
||
const c=document.createElement('div');
|
||
c.className='cf';
|
||
c.style.left=Math.random()*100+'vw';
|
||
c.style.background=['#5B4FE8','#65A30D','#6366F1','#60A5FA','#A5B4FC'][i%5];
|
||
c.style.animationDuration=(2.2+Math.random()*2)+'s';
|
||
c.style.animationDelay=(Math.random()*.8)+'s';
|
||
c.style.transform=`rotate(${Math.random()*360}deg)`;
|
||
document.body.appendChild(c);
|
||
setTimeout(()=>c.remove(),5200);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|