feat: add interactive introduction slide and update layout styles

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;
+}
 </style>
 </head>
 <body>
@@ -529,8 +633,70 @@ body.formateur .formateur-flag{display:block}
 
 <main class="stage">
 
+  <!-- ════════ SLIDE 0 : INTRODUCTION ════════ -->
+<section class="slide active" data-title="Introduction" id="slideIntro">
+  <div class="intro-wrap">
+    <div class="intro-left">
+      <div class="intro-step" data-step="0">
+        <span class="intro-eyebrow">Avant de commencer…</span>
+        <p class="intro-big">Combien de temps avez-vous passé à rédiger des comptes-rendus<br>la semaine dernière ?</p>
+        <div class="intro-chips" id="introCrChips">
+          <button class="ichip" data-v="Moins de 30 min">Moins de 30 min</button>
+          <button class="ichip" data-v="Entre 30 min et 1 h">Entre 30 min et 1 h</button>
+          <button class="ichip" data-v="Entre 1 h et 2 h">Entre 1 h et 2 h</button>
+          <button class="ichip" data-v="Plus de 2 h">Plus de 2 h 😅</button>
+        </div>
+      </div>
+      <div class="intro-step" data-step="1" style="display:none">
+        <span class="intro-eyebrow">Et si c'était <em>optionnel</em> ?</span>
+        <p class="intro-big">Cette heure, vous apprenez à confier ce travail à une IA —<br>pendant que vous vous concentrez sur ce qui compte vraiment.</p>
+        <div class="intro-promise">
+          <div class="ip-row"><span class="ip-ico">✅</span><span>Aucun prérequis technique — si vous savez écrire un e-mail, vous saurez prompter.</span></div>
+          <div class="ip-row"><span class="ip-ico">✅</span><span>Pas de jargon — chaque concept atterrit dans un cas concret de votre quotidien.</span></div>
+          <div class="ip-row"><span class="ip-ico">✅</span><span>Repartez avec <b>un outil prêt à l'emploi</b>, pas avec des slides à relire un jour.</span></div>
+        </div>
+        <div class="intro-btns">
+          <button class="btn btn-primary" id="introNext">Je suis prêt·e — allons-y →</button>
+          <button class="btn btn-ghost intro-skip" onclick="go(1)">Passer l'intro</button>
+        </div>
+      </div>
+    </div>
+    <div class="intro-right">
+      <div class="intro-scene">
+        <div class="is-card is-card-1">
+          <span class="is-label">Avant l'IA</span>
+          <div class="is-line long"></div>
+          <div class="is-line med"></div>
+          <div class="is-line short"></div>
+          <div class="is-line med"></div>
+          <div class="is-timer">⏱ 35 min</div>
+        </div>
+        <div class="is-arrow">→</div>
+        <div class="is-card is-card-2">
+          <span class="is-label">Avec l'IA</span>
+          <div class="is-ai-line"><span class="is-ai-dot"></span>Résumé exécutif</div>
+          <div class="is-ai-line"><span class="is-ai-dot"></span>Décisions</div>
+          <div class="is-ai-line"><span class="is-ai-dot"></span>Plan d'action</div>
+          <div class="is-ai-line"><span class="is-ai-dot"></span>Risques</div>
+          <div class="is-timer green">⚡ 30 sec</div>
+        </div>
+      </div>
+      <p class="intro-caption">Même réunion. Mêmes notes. Résultat structuré en 30 secondes.</p>
+    </div>
+  </div>
+  <div class="fnotes">
+    <h5>🎓 Notes formateur — Introduction <span class="chrono">−3:00 → 0:00</span></h5>
+    <ul>
+      <li>S'affiche <b>avant</b> le démarrage du chrono — idéale pendant l'installation du groupe.</li>
+      <li>La question CR crée un ancrage émotionnel immédiat. Laissez 20 secondes de silence après le clic.</li>
+      <li>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à. »</li>
+      <li>Les trois promesses désarment les sceptiques avant même le démarrage.</li>
+    </ul>
+  </div>
+</section>
+
 <!-- ════════ SLIDE 0 : COUVERTURE ════════ -->
-<section class="slide active" data-title="Accueil">
+<section class="slide" data-title="Accueil">
   <div class="cover">
     <div>
       <span class="kicker">Cours interactif <span class="min">⏱ 60 min</span></span>
@@ -541,19 +707,19 @@ body.formateur .formateur-flag{display:block}
         <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>
+      <button class="btn btn-primary" onclick="go(2)">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">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">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">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">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">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">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">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 class="agenda-row" onclick="go(9)"><span class="num">08</span><span class="t">Bilan & plan d'action</span><span class="dur">3'</span></div>
     </div>
   </div>
   <div class="fnotes">
@@ -582,7 +748,7 @@ body.formateur .formateur-flag{display:block}
     <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>
+      <button class="btn btn-amber" onclick="go(3)">Passons aux outils →</button>
     </div>
   </div>
 
@@ -883,7 +1049,7 @@ body.formateur .formateur-flag{display:block}
       <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>
+      <button class="btn btn-amber" onclick="go(9)">Voir mon bilan →</button>
     </div>
   </div>
 
@@ -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."},