diff --git a/index.html b/index.html
new file mode 100644
index 0000000..49ff712
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+<!-- Conteneur des cartes -->
+<div class="contenair-div">
+    <a href="#" class="uk-card-custom" id="card1">
+        <div class="image-circle">
+            <img src="/images/icons/1_savco_produits-chimiques.svg" alt="Icône bidon en plastique avec un point d'exclamation dans un triangle" />
+        </div>
+        <p>Produits chimiques</p>
+    </a>
+  
+    <a href="#" class="uk-card-custom" id="card2">
+        <div class="image-circle">
+            <img src="/images/icons/savco_travaux-en-hauteur.png" alt="Icône échafaudage" />
+        </div>
+        <p>Travailler en hauteur</p>
+    </a>
+  
+    <a href="#" class="uk-card-custom" id="card3">
+        <div class="image-circle">
+            <img src="/images/icons/savco_espace-confine.png" alt="Icône d'une personne coincé dans un carré" />
+        </div>
+        <p>Travaux en espaces confiné</p>
+    </a>
+  
+    <a href="#" class="uk-card-custom" id="card4">
+        <div class="image-circle">
+            <img src="/images/icons/savco_autres-risques.png" alt="Icône triangle avec point d'exclamation dedans" />
+        </div>
+        <p>Utilisation d'équipements dangereux</p>
+    </a>
+</div>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..61086fe
--- /dev/null
+++ b/script.js
@@ -0,0 +1,196 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const pdfUrls = {
+      card1: [
+        { url: "https://savco-campus.fr/component/edocman/2018-flash-sse-risque-fumees-soudure-b/viewdocument/455", title: "Travaux exposant à des agents CMR - <br>fumées soudage" },
+        { url: "https://savco-campus.fr/component/edocman/2022-flash-sse-travaux-points-chauds-e/viewdocument/457", title: "Travaux exposant à des agents CMR - <br>fumées soudage" },
+        { url: "https://savco-campus.fr/component/edocman/2020-flash-sse-produits-chimiques-a-pdf/viewdocument/470", title: "Exposition aux produits chimiques - <br> Produits dangereux" }
+      ], 
+      card2: [
+        { url: "https://savco-campus.fr/component/edocman/10-2020-flash-sse-bonnes-pratiques-et-risques-utilisation-echafaudage-b/viewdocument/81", title: "Travaux exposant à un risque de chute de hauteur - utilisation d'échafaudages" },
+        { url: "https://savco-campus.fr/component/edocman/34-2023-flash-sse-travail-en-hauteur-a/viewdocument/82", title: "Travaux exposant à un risque de chute de hauteur - port du harnais ou travail sur cordes" },
+        { url: "https://savco-campus.fr/component/edocman/45-2023-flash-sse-harnais-a/viewdocument/84", title: "Travaux exposant à un risque de chute de hauteur - port du harnais ou travail sur cordes" }
+      ],
+      card3: [
+        { url: "https://savco-campus.fr/component/edocman/22-2023-flash-sse-travaux-espace-confine-c/viewdocument/93", title: "Espaces confinés" },
+        { url: "https://savco-campus.fr/component/edocman/35-2023-flash-sse-utilisation-detecteur-de-gaz-va-2/viewdocument/94", title: "Utilisation detecteur de gaz" }
+      ],
+      card4: [
+        { url: "https://savco-campus.fr/component/edocman/2021-flash-sse-bp-outillage-protection-a-pdf/viewdocument/474", title: "Utilisation Meuleuse - <br> (ponçage, meulage, tronçonage)" },
+        { url: "https://example.com/second-pdf-card4.pdf", title: "Utilisation Meuleuse - <br>(ponçage, meulage, tronçonage)" },
+        { url: "https://savco-campus.fr/component/edocman/2023-flash-sse-bruit-b-pdf/viewdocument/483", title: "Bruit - vibrations" }
+      ]
+    };
+  
+    let currentStep = 1;
+    let currentPdfIndex = 0;
+    const completedCards = [false, false, false, false]; // Suivi de l'état des cartes
+    const pdfReadState = [false, false, false, false]; // Suivi de l'état des PDFs de chaque carte
+    const progress = [0, 0, 0, 0]; // Suivi de l'avancement des PDFs dans chaque carte
+  
+    function activateCard(step) {
+      const cards = document.querySelectorAll('.uk-card-custom');
+      
+      cards.forEach((card, index) => {
+        card.style.pointerEvents = 'none';
+        card.style.opacity = '0.5';
+        card.style.filter = 'grayscale(100%)';
+        card.classList.remove('active-card');
+        
+        // Réinitialisation de la progression si on revient à une carte non terminée
+        if (!completedCards[index]) {
+          progress[index] = 0; // Réinitialisation de l'index à 0 (premier PDF)
+          pdfReadState[index] = false;
+        }
+  
+        if (completedCards[index]) {
+          card.style.filter = 'grayscale(0%)';
+          card.style.opacity = '1';
+          card.style.pointerEvents = 'auto';
+        }
+      });
+  
+      const card = cards[step - 1];
+      if (card) {
+        card.style.pointerEvents = 'auto';
+        card.style.opacity = '1';
+        card.style.filter = 'grayscale(0%)';
+        card.classList.add('active-card');
+      }
+  
+      updateNavigationButtons();
+      loadPdfForCurrentCard(); 
+    }
+  
+    function loadPdfForCurrentCard() {
+      const iframe = document.getElementById("pdf-iframe");
+      const titleElement = document.getElementById("pdf-title");
+      const fileContainer = document.getElementById("pdf-container");
+      const nextButton = document.getElementById("next-button");
+      const prevButton = document.getElementById("prev-button");
+      const pdfCounter = document.getElementById("pdf-counter");
+  
+      const cardKey = "card" + currentStep;
+      const pdfData = pdfUrls[cardKey][progress[currentStep - 1]]; // Charger le PDF basé sur la progression de la carte
+  
+      iframe.src = pdfData.url;
+      titleElement.innerHTML = pdfData.title;
+      fileContainer.style.display = "block";
+  
+      nextButton.style.display = "inline-block";
+      prevButton.style.display = "inline-block";
+  
+      const totalPdfs = pdfUrls[cardKey].length;
+      pdfCounter.innerHTML = `${progress[currentStep - 1] + 1} / ${totalPdfs}`;
+  
+      iframe.onload = function() {
+        nextButton.disabled = false;
+      };
+  
+      updateNavigationButtons();
+    }
+  
+    function goToNextPdf() {
+      const pdfData = pdfUrls["card" + currentStep];
+      if (progress[currentStep - 1] < pdfData.length - 1) {
+        progress[currentStep - 1]++;
+        loadPdfForCurrentCard();
+      } else {
+        alert("Vous avez terminé de visualiser tous les PDFs de cette carte !");
+        pdfReadState[currentStep - 1] = true;
+        completedCards[currentStep - 1] = true;
+        goToNextCard();
+      }
+    }
+  
+    function goToPreviousPdf() {
+      if (progress[currentStep - 1] > 0) {
+        progress[currentStep - 1]--;
+        loadPdfForCurrentCard();
+      } else {
+        goToPreviousCard();
+      }
+    }
+  
+    function goToNextCard() {
+      if (currentStep < 4 && pdfReadState[currentStep - 1]) {
+        currentStep++;
+        progress[currentStep - 1] = 0; // Réinitialiser l'index pour la carte suivante
+        activateCard(currentStep);
+      } else {
+        alert("Veuillez d'abord lire tous les PDFs de cette carte avant de passer à la suivante.");
+      }
+    }
+  
+    function goToPreviousCard() {
+      if (currentStep > 1) {
+        currentStep--;
+        progress[currentStep - 1] = 0; // Réinitialiser l'index pour revenir à la carte précédente
+        activateCard(currentStep);
+      }
+    }
+  
+    function updateNavigationButtons() {
+      const nextButton = document.getElementById("next-button");
+      const prevButton = document.getElementById("prev-button");
+  
+      if (currentStep === 1 && progress[currentStep - 1] === 0) {
+        prevButton.style.display = "none";
+      } else {
+        prevButton.disabled = false;
+      }
+  
+      if (currentStep === 4 && progress[currentStep - 1] === pdfUrls["card4"].length - 1) {
+        nextButton.disabled = true;
+        nextButton.innerHTML = "Vous avez tout visualisé ?<br>Vous pouvez maintenant accéder au questionnaire.";
+      } else {
+        nextButton.disabled = false;
+        nextButton.textContent = "Suivant";
+      }
+    }
+  
+    activateCard(1);
+    const fileContainer = document.getElementById("pdf-container");
+    fileContainer.style.display = "none";
+    const nextButton = document.getElementById("next-button");
+    const prevButton = document.getElementById("prev-button");
+    nextButton.style.display = "none";
+    prevButton.style.display = "none";
+  
+    loadPdfForCurrentCard();
+  
+    document.getElementById("card1").addEventListener("click", function(event) {
+      event.preventDefault();
+      currentStep = 1;
+      progress[0] = 0; // Réinitialiser à la première page quand tu viens sur la carte 1
+      activateCard(1);
+    });
+  
+    document.getElementById("card2").addEventListener("click", function(event) {
+      event.preventDefault();
+      currentStep = 2;
+      progress[1] = 0; // Réinitialiser à la première page quand tu viens sur la carte 2
+      activateCard(2);
+    });
+  
+    document.getElementById("card3").addEventListener("click", function(event) {
+      event.preventDefault();
+      currentStep = 3;
+      progress[2] = 0; // Réinitialiser à la première page quand tu viens sur la carte 3
+      activateCard(3);
+    });
+  
+    document.getElementById("card4").addEventListener("click", function(event) {
+      event.preventDefault();
+      currentStep = 4;
+      progress[3] = 0; // Réinitialiser à la première page quand tu viens sur la carte 4
+      activateCard(4);
+    });
+  
+    nextButton.addEventListener("click", function() {
+      goToNextPdf();
+    });
+  
+    prevButton.addEventListener("click", function() {
+      goToPreviousPdf();
+    });
+});
\ No newline at end of file