diff --git a/flask_base/templates/pokemon.html b/flask_base/templates/pokemon.html
new file mode 100644
index 0000000..a56cda9
--- /dev/null
+++ b/flask_base/templates/pokemon.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jeu Pokémon</title>
+    <link rel="stylesheet" href="../static/style.css">
+</head>
+<body>
+
+    <header>
+        <img src="../pinguin.gif" alt="Mascotte animée" class="header-gif" />
+        <h1>Jeu Pokémon</h1>
+        <nav>
+            <ul class="menu">
+                <li><a href="./index.html">Accueil </a></li>
+                <li><a href="./pokemon.html">Jeu Pokémon</a></li>
+                <li><a href="./partenaires.html">Partenaires</a></li>
+                <li><a href="./qcm.html">QCM</a></li>
+                <li><a href="./outils.html">Outils et OS</a></li>
+            </ul>
+        </nav>
+    </header>
+    <div class="battle">
+        <h2>Combat Pokémon-like (simple)</h2>
+      
+        <div class="row">
+          <div id = "scoreDiv">Score: 0</div>
+      
+          <div class="monster" id="enemy">
+            <div class="enemy-img-container">
+              <img id="enemyImg" src="ennemi.png" alt="Ennemi">
+            </div>
+            <span id="ennemyName">Ennemi</span><br>
+            <span id="enemyHp">HP: 30</span>
+            <span id="enemyInfo" class="tooltip" data-tooltip="">?</span>
+          </div>
+      
+          <div class="monster" id="player">Joueur<br><span id="playerHp">HP: 30</span></div>
+        </div>
+      
+        <div id="attacksDiv"></div>
+        <button id="runBtn">Fuir</button>
+      
+        <div id="log">Un ennemi sauvage apparaît !</div>
+      </div>
+      
+      <script>
+        const outils_list = {{ data|tojson }};
+      
+        
+      
+        function getAgainstNames(itemName) {
+          const item = outils_list.find(i => i.open_source_name === itemName);
+          return item ? item.against_name : null;
+        }
+      
+        console.log(outils_list); 
+        let playerHp = 30;
+        let enemyHp = 30;
+        let score = 0;
+        const max = outils_list.length;
+        let playerInv = [];
+      
+        const log = document.getElementById("log");
+        const ennemyName = document.getElementById("ennemyName");
+        const playerHpBox = document.getElementById("playerHp");
+        const enemyHpBox = document.getElementById("enemyHp");
+        
+        addRandomItemToInventory();
+        addRandomItemToInventory();
+      
+        function addRandomItemToInventory() { // Add a NEW random item to player's inventory. 
+          let nbItems = playerInv.length;
+          if(nbItems < max)
+          {
+            let newItem;
+            let found = false;
+            while(!found){
+              let randIndex = Math.floor(Math.random()*max);
+              newItem = outils_list[randIndex];
+              found = true;
+              for(let i=0; i<nbItems; i++){
+                if(playerInv[i].name == newItem.open_source_name){
+                  found = false; // already have this item
+                  break;
+                }
+              }
+            }
+            playerInv.push({name: newItem.open_source_name});
+            addLog(`Vous avez obtenu un nouvel outil open source : **${newItem.open_source_name}** !`);
+          }
+        }
+      
+        
+      
+        function updateUI() {
+          playerHpBox.textContent = "HP: " + Math.max(0, playerHp);
+          enemyHpBox.textContent = "HP: " + Math.max(0, enemyHp);
+          document.getElementById("scoreDiv").textContent = "Score: " + score;
+        }
+      
+        function addLog(text) {
+          log.textContent = log.textContent + '\n' + text;
+        }
+      
+        const attacksDiv = document.getElementById("attacksDiv");
+      
+        function setCombat(){
+          playerHp = 30;
+          enemyHp = 30;
+          updateUI();
+          ennemyNumber = Math.floor(Math.random()*max);
+          //il faut que l'ennemi soit dans le against d'un des items du joueur
+          let found = false;
+          while(!found){
+            ennemyNumber = Math.floor(Math.random()*max);
+            for(let i=0; i<playerInv.length; i++){
+              if(getAgainstNames(playerInv[i].name) == outils_list[ennemyNumber].against_name){
+                found = true;
+                break;
+              }
+            }
+          }
+          ennemyName.textContent = outils_list[ennemyNumber].against_name;
+          document.getElementById("enemyInfo").setAttribute("data-tooltip", outils_list[ennemyNumber].description_against);
+          document.getElementById("enemyImg").src = outils_list[ennemyNumber].icon_against_link;
+      
+          createAttackButtons();
+        }
+      
+        function playerAttack(index) {
+          const atk = playerInv[index];
+      
+          if(getAgainstNames(atk.name) == ennemyName.textContent){ 
+            var dmg = enemyHp; // instant win
+            addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nC'est super efficace !`);
+          } else {
+            var dmg = Math.floor(Math.random() * 5) + 2; // 2-6
+            addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nMais ce n'est pas très efficace...`);
+            playerHp -= 5; // dommage punitif
+            addLog(`Le fait d'avoir utilisé ${atk.name} contre ${ennemyName.textContent} vous blesse de 5 dégâts en retour !`);
+          }
+      
+          enemyHp -= dmg;
+          updateUI();
+      
+          if (enemyHp <= 0) {
+            addLog(`${ennemyName.textContent} est vaincu !`);
+            addRandomItemToInventory();
+            score += 1;
+            setCombat();
+            addLog("Un nouvel ennemi sauvage apparaît !\n");
+            return;
+          }
+      
+          // Riposte
+          setTimeout(() => {
+            const edmg = Math.floor(Math.random() * 6) + 3;
+            playerHp -= edmg;
+      
+            addLog(
+              `Vous utilisez ${atk.name} et infligez ${dmg} dégâts !\n` +
+              `${ennemyName.textContent} riposte et inflige ${edmg} dégâts !`
+            );
+      
+            updateUI();
+      
+            if (playerHp <= 0) {
+              addLog("Vous êtes K.O.");
+              addLog(`Score final : ${score} ennemis vaincus.`);
+              attacksDiv.innerHTML = ""; // Remove attack buttons
+              fetch("/api/leaderboard", {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({name: prompt("Entrez votre nom"), score: score})
+              });
+            }
+          }, 500);
+        }
+      
+      
+        function createAttackButtons() {
+          attacksDiv.innerHTML = ""; 
+      
+          playerInv.forEach((atk, index) => {
+            const btn = document.createElement("button");
+            btn.onclick = () => playerAttack(index);
+      
+            const data = outils_list.find(x => x.open_source_name === atk.name);
+      
+            // Conteneur icône
+            const iconContainer = document.createElement("div");
+            iconContainer.className = "attack-icon-container";
+      
+            const iconImg = document.createElement("img");
+            iconImg.src = data.icon_op_link;
+            iconImg.alt = data.open_source_name;
+            iconContainer.appendChild(iconImg);
+            btn.appendChild(iconContainer); // mettre l'icône avant le texte
+      
+            // Texte du bouton
+            const textNode = document.createTextNode(atk.name + " "); // espace avant le "?"
+            btn.appendChild(textNode);
+      
+            // Tooltip
+            const info = document.createElement("span");
+            info.className = "tooltip";
+            info.setAttribute("data-tooltip", data ? data.description_op : "Aucune description");
+            info.textContent = "?";
+            btn.appendChild(info);
+      
+            attacksDiv.appendChild(btn);
+          });
+        }
+
+        document.getElementById("runBtn").onclick = () => {
+          addLog("Vous avez fui le combat !");
+          fetch("/api/leaderboard", {
+              method: "POST",
+              headers: {"Content-Type": "application/json"},
+              body: JSON.stringify({name: prompt("Entrez votre nom"), score: score})
+          });
+          attacksDiv.innerHTML = ""; // Remove attack buttons
+        };
+      
+        setCombat();
+      
+      
+      </script>
+</body>
+</html>
