From 8133bddf7b866afb919f86f679f10fab2a1bb004 Mon Sep 17 00:00:00 2001 From: sebvtl728 Date: Fri, 12 Jun 2026 12:44:09 +0200 Subject: [PATCH] feat: add interactive introduction slide and update layout styles --- index.html | 224 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 209 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 9ed0f4a..d422225 100644 --- a/index.html +++ b/index.html @@ -216,7 +216,7 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p .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} +.cover{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:90vh} @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} @@ -495,6 +495,110 @@ 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}} + +/* ============ SLIDE INTRO ============ */ +.intro-wrap{ + display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center; + min-height:80vh; +} +@media(max-width:860px){.intro-wrap{grid-template-columns:1fr}} + +.intro-left{max-width:580px} +.intro-step{animation:slideIn .5s cubic-bezier(.22,1,.36,1)} +.intro-eyebrow{ + display:block;font-size:12px;font-weight:700;letter-spacing:2px; + text-transform:uppercase;color:var(--ink-3);margin-bottom:14px; +} +.intro-big{ + font-family:var(--serif);font-size:clamp(22px,3.2vw,32px);font-weight:700; + line-height:1.25;color:var(--ink);margin-bottom:26px; +} +.intro-big em{font-style:italic;color:var(--amber)} + +.intro-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px} +.ichip{ + border:1.5px solid var(--line-2);background:var(--card);border-radius:10px; + padding:12px 18px;font-size:14.5px;font-weight:700;cursor:pointer; + font-family:var(--sans);color:var(--ink-2); + transition:all .2s cubic-bezier(.34,1.56,.64,1); +} +.ichip:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--sh-sm)} +.ichip.picked{ + background:var(--amber-bg);border-color:var(--amber);color:var(--amber-dark); + transform:scale(1.04); +} + +.intro-promise{display:grid;gap:12px;margin-bottom:28px} +.ip-row{ + display:flex;gap:12px;align-items:flex-start; + background:var(--card);border:1px solid var(--line);border-radius:10px; + padding:12px 16px;font-size:14.5px;color:var(--ink-2); + animation:slideIn .45s cubic-bezier(.22,1,.36,1) both; +} +.ip-row:nth-child(1){animation-delay:.08s} +.ip-row:nth-child(2){animation-delay:.18s} +.ip-row:nth-child(3){animation-delay:.28s} +.ip-ico{font-size:16px;flex-shrink:0;margin-top:1px} +.intro-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap} +.intro-skip{font-size:13px;opacity:.65} +.intro-skip:hover{opacity:1} + +/* Illustration droite */ +.intro-right{display:flex;flex-direction:column;align-items:center;gap:12px} +@media(max-width:860px){.intro-right{display:none}} +.intro-scene{ + display:flex;align-items:center;gap:14px;width:100%; +} +.is-card{ + flex:1;background:var(--card);border:1px solid var(--line); + border-radius:14px;padding:18px 16px;box-shadow:var(--sh-sm); +} +.is-card-2{ + border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg),var(--sh-md); +} +.is-label{ + display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px; + text-transform:uppercase;color:var(--ink-3);margin-bottom:12px; +} +.is-card-2 .is-label{color:var(--amber-dark)} +.is-line{ + height:8px;background:var(--paper-3);border-radius:4px;margin-bottom:8px; +} +.is-line.long{width:90%} +.is-line.med{width:70%} +.is-line.short{width:50%} +.is-timer{ + font-family:var(--mono);font-size:13px;font-weight:600; + color:var(--ink-3);margin-top:14px; + background:var(--paper-2);border-radius:7px;padding:4px 10px;display:inline-block; +} +.is-timer.green{ + color:var(--green);background:var(--green-bg); + border:1px solid var(--green-line); +} +.is-arrow{ + font-size:22px;color:var(--amber);font-weight:700;flex-shrink:0; + animation:arrowPulse 1.8s ease-in-out infinite; +} +@keyframes arrowPulse{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(5px);opacity:.6}} +.is-ai-line{ + display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700; + color:var(--ink-2);margin-bottom:7px; + opacity:0;transform:translateX(-6px); + animation:lineIn .4s cubic-bezier(.22,1,.36,1) both; +} +.is-ai-line:nth-child(2){animation-delay:.3s} +.is-ai-line:nth-child(3){animation-delay:.55s} +.is-ai-line:nth-child(4){animation-delay:.8s} +.is-ai-line:nth-child(5){animation-delay:1.05s} +@keyframes lineIn{to{opacity:1;transform:none}} +.is-ai-dot{ + width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0; +} +.intro-caption{ + font-size:12.5px;color:var(--ink-3);text-align:center;font-style:italic; + max-width:340px; +} @@ -529,8 +633,70 @@ body.formateur .formateur-flag{display:block}
+ +
+
+
+
+ Avant de commencer… +

Combien de temps avez-vous passé à rédiger des comptes-rendus
la semaine dernière ?

+
+ + + + +
+
+ +
+
+
+
+ Avant l'IA +
+
+
+
+
⏱ 35 min
+
+
→
+
+ Avec l'IA +
Résumé exécutif
+
Décisions
+
Plan d'action
+
Risques
+
⚡ 30 sec
+
+
+

Même réunion. Mêmes notes. Résultat structuré en 30 secondes.

+
+
+
+
🎓 Notes formateur — Introduction −3:00 → 0:00
+
    +
  • S'affiche avant le démarrage du chrono — idéale pendant l'installation du groupe.
    • +
  • La question CR crée un ancrage émotionnel immédiat. Laissez 20 secondes de silence après le clic.
    • +
  • Si "Moins de 30 min" : « Parfait, on va faire encore mieux. » Si "Plus de 2 h" : « C'est exactement pour ça qu'on est là. »
    • +
  • Les trois promesses désarment les sceptiques avant même le démarrage.
    • +
+
+
+ -
+
Cours interactif ⏱ 60 min @@ -541,19 +707,19 @@ body.formateur .formateur-flag{display:block}
4ateliers pratiques
1méthode : RCTF
- +

💡 Naviguez avec les flèches ← → du clavier. Gagnez des XP en participant aux activités.

Programme de la séance 60 min
-
01Quiz d'échauffementQuiz5'
-
02Choisir le bon outil IAInter.8'
-
03La méthode RCTFAtelier12'
-
04Kanban analysé par l'IADémo8'
-
05Le CR en 30 secondesDémo10'
-
06Automatiser la chaîneInter.8'
-
07Quiz final certifiantQuiz6'
-
08Bilan & plan d'action3'
+
01Quiz d'échauffementQuiz5'
+
02Choisir le bon outil IAInter.8'
+
03La méthode RCTFAtelier12'
+
04Kanban analysé par l'IADémo8'
+
05Le CR en 30 secondesDémo10'
+
06Automatiser la chaîneInter.8'
+
07Quiz final certifiantQuiz6'
+
08Bilan & plan d'action3'
@@ -582,7 +748,7 @@ body.formateur .formateur-flag{display:block}
0/4

- +
@@ -883,7 +1049,7 @@ body.formateur .formateur-flag{display:block}
0/5

- + @@ -1011,6 +1177,34 @@ document.addEventListener('keydown',e=>{ }); go(0); + +/* ═══════════ INTRO SLIDE ═══════════ */ +(function(){ + const chips = document.querySelectorAll('.ichip'); + chips.forEach(c => { + c.addEventListener('click', function(){ + chips.forEach(x => x.classList.remove('picked')); + this.classList.add('picked'); + // Transition vers step 1 après 600 ms + setTimeout(() => { + const s0 = document.querySelector('.intro-step[data-step="0"]'); + const s1 = document.querySelector('.intro-step[data-step="1"]'); + if(!s0 || !s1) return; + s0.style.animation = 'none'; + s0.style.opacity = '0'; + s0.style.transform = 'translateY(-12px)'; + s0.style.transition = 'opacity .3s, transform .3s'; + setTimeout(() => { + s0.style.display = 'none'; + s1.style.display = 'block'; + }, 300); + }, 600); + }); + }); + const introNext = document.getElementById('introNext'); + if(introNext) introNext.addEventListener('click', () => go(1)); +})(); + /* ═══════════ CHRONO SÉANCE ═══════════ */ let chrono={left:3600, on:false, h:null}; const tChip=document.getElementById('timerChip'), tTxt=document.getElementById('timerTxt'); @@ -1081,7 +1275,7 @@ function makeQuiz(cfg){ /* Quiz échauffement */ makeQuiz({ - slideIdx:1, prog:'warmProg', q:'warmQ', opts:'warmOpts', exp:'warmExp', next:'warmNext', done:'warmDone', xp:10, + slideIdx:2, 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."}, @@ -1096,7 +1290,7 @@ makeQuiz({ /* Quiz final */ const finQuiz=makeQuiz({ - slideIdx:7, prog:'finProg', q:'finQ', opts:'finOpts', exp:'finExp', next:'finNext', done:'finDone', xp:20, + slideIdx:8, 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."},