From 31c028b38db375be774500a056b25262effecceb Mon Sep 17 00:00:00 2001
From: Yoan Guerin <Vous@exemple.com>
Date: Fri, 5 Dec 2025 02:39:38 +0100
Subject: [PATCH] mise en place jeu

---
 html/pokemon.html | 389 +++++++++++++++++++++++++++++++++++++++++++++-
 style.css         | 149 +++++++++++++++++-
 2 files changed, 535 insertions(+), 3 deletions(-)

diff --git a/html/pokemon.html b/html/pokemon.html
index f28e030..f363584 100644
--- a/html/pokemon.html
+++ b/html/pokemon.html
@@ -21,6 +21,393 @@
             </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 = [
+          {
+            open_source_name: "VSCodium",
+            open_source_website: "https://vscodium.com",
+            icon_op_link: "https://raw.githubusercontent.com/linuxserver/docker-templates/master/linuxserver.io/img/vscodium-icon.png",
+            description_op: "VSCodium est une version open source de Visual Studio Code, sans télémétrie. Il offre les mêmes fonctionnalités puissantes — extensions, IntelliSense, débogage — sans les composants propriétaires de Microsoft.",
+            against_name: "Visual Studio Code",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/2048px-Visual_Studio_Code_1.35_icon.svg.png",
+            description_against: "Visual Studio Code est l’éditeur de code populaire de Microsoft, offrant de nombreuses extensions, le débogage, et une intégration cloud. Il inclut des composants propriétaires et de la télémétrie par défaut."
+          },
+          {
+            open_source_name: "Gogs",
+            open_source_website: "https://gogs.io",
+            icon_op_link: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/gogs.png",
+            description_op: "Gogs est un service Git auto-hébergé léger, écrit en Go. Il est extrêmement rapide et facile à déployer (un seul binaire) et propose une interface semblable à GitHub, avec gestion des utilisateurs, suivi des issues, wiki, webhooks et support SSH.",
+            against_name: "GitHub",
+            icon_against_link: "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png",
+            description_against: "GitHub est une plateforme propriétaire hébergée dans le cloud pour les dépôts Git, offrant des outils de collaboration, de CI/CD et de gestion de projets."
+          },
+          {
+            open_source_name: "Ollama",
+            open_source_website: "https://ollama.com",
+            icon_op_link: "https://ollama.com/public/ollama.png",
+            description_op: "Ollama permet d’exécuter et de gérer des modèles de langage localement via de simples commandes. Il supporte des modèles comme LLaMA 3, Mistral, Gemma, et plus encore, avec des API pour l’intégration et la personnalisation.",
+            against_name: "ChatGPT",
+            icon_against_link: "https://cdn-icons-png.flaticon.com/512/11865/11865338.png",
+            description_against: "ChatGPT est la plateforme d’IA conversationnelle hébergée par OpenAI, offrant des capacités avancées de raisonnement, génération de texte et d’analyse multimodale."
+          },
+          {
+            open_source_name: "OpenCut",
+            open_source_website: "https://github.com/OpenCut-app/OpenCut",
+            icon_op_link: "https://github.com/OpenCut-app/OpenCut/blob/main/apps/web/public/logo.png?raw=true",
+            description_op: "OpenCut est une alternative open source prometteuse à CapCut. Elle vise à offrir des outils d’édition vidéo avancés sans nécessité d’envoyer les fichiers dans le cloud.",
+            against_name: "CapCut",
+            icon_against_link: "https://static.vecteezy.com/system/resources/previews/055/030/388/non_2x/capcut-circle-icon-logo-symbol-free-png.png",
+            description_against: "CapCut est un éditeur vidéo propriétaire développé par ByteDance, offrant modèles, effets et synchronisation cloud pour mobile et ordinateur."
+          },
+          {
+            open_source_name: "LibreOffice",
+            open_source_website: "https://www.libreoffice.org",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/a/a9/LibreOffice_7.5_Main_Icon.png",
+            description_op: "LibreOffice est une suite bureautique open source complète comprenant Writer, Calc, Impress, Draw et plus encore. Elle supporte les standards ouverts et fonctionne entièrement hors ligne.",
+            against_name: "Microsoft Office",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Microsoft_Office_logo_%282013%E2%80%932019%29.svg/1012px-Microsoft_Office_logo_%282013%E2%80%932019%29.svg.png",
+            description_against: "Microsoft Office est une suite bureautique propriétaire qui propose Word, Excel, PowerPoint et Outlook, très utilisée dans le monde professionnel et éducatif."
+          },
+          {
+            open_source_name: "GIMP",
+            open_source_website: "https://www.gimp.org",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/The_GIMP_icon_-_v3.0.svg/langfr-250px-The_GIMP_icon_-_v3.0.svg.png",
+            description_op: "GIMP est un logiciel open source d’édition d’images avancé, proposant calques, masques, filtres et outils de retouche adaptés à la photographie et au graphisme.",
+            against_name: "Adobe Photoshop",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg",
+            description_against: "Photoshop est l’éditeur d’images professionnel d’Adobe, utilisé dans la photographie, le design et la création numérique."
+          },
+          {
+            open_source_name: "Kdenlive",
+            open_source_website: "https://kdenlive.org",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Kdenlive-logo.svg/2560px-Kdenlive-logo.svg.png",
+            description_op: "Kdenlive est un éditeur vidéo open source complet, offrant montage multi-pistes, effets, transitions, gestion des proxys et outils professionnels de post-production.",
+            against_name: "Adobe Premiere Pro",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/4/40/Adobe_Premiere_Pro_CC_icon.svg",
+            description_against: "Premiere Pro est le logiciel de montage vidéo professionnel d’Adobe, largement utilisé dans le cinéma, YouTube et la télévision."
+          },
+          {
+            open_source_name: "Thunderbird",
+            open_source_website: "https://www.thunderbird.net",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/5/53/Thunderbird_2023_icon.png",
+            description_op: "Thunderbird est un client e-mail open source sécurisé, avec support des extensions, du chiffrement, du calendrier intégré, et de la gestion multi- comptes.",
+            against_name: "Microsoft Outlook",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg/langfr-250px-Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg.png",
+            description_against: "Outlook est le client propriétaire de Microsoft pour la gestion d’e-mails, de calendriers et de contacts, intégré à Exchange et Microsoft 365."
+          },
+          {
+            open_source_name: "Nextcloud",
+            open_source_website: "https://nextcloud.com",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/6/60/Nextcloud_Logo.svg",
+            description_op: "Nextcloud est une plateforme cloud auto-hébergée permettant de synchroniser et partager des fichiers, d’éditer des documents en collaboration, de gérer calendriers, discussions et bien plus, tout en conservant la maîtrise totale de ses données.",
+            against_name: "Google Drive",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png",
+            description_against: "Google Drive est un service de stockage cloud et de collaboration intégré aux applications Google Workspace."
+          },
+          {
+            open_source_name: "FreeCAD",
+            open_source_website: "https://www.freecad.org",
+            icon_op_link: "https://www.freecad.org/svg/logo-freecad.svg",
+            description_op: "FreeCAD est une suite open source professionnelle de modélisation et d’animation 3D utilisé dans l’industrie technique",
+            against_name: "SolidWorks",
+            icon_against_link: "https://yt3.googleusercontent.com/ytc/AIdro_lVpceaFjQyCslqet2YAzG9jt14n103-KVOjc4D0Y1A8g=s900-c-k-c0x00ffffff-no-rj",
+            description_against: "SolidWorks est un logiciel propriétaire de modélisation et d’animation 3D utilisé dans l’industrie technique"
+          },
+          {
+            open_source_name: "Mozilla Firefox",
+            open_source_website: "https://www.mozilla.org/firefox",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg",
+            description_op: "Firefox est un navigateur web open source axé sur la confidentialité, la vitesse et la liberté de personnalisation via des extensions. Il ne collecte que le strict minimum de données.",
+            against_name: "Google Chrome",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/960px-Google_Chrome_icon_%28February_2022%29.svg.png",
+            description_against: "Google Chrome est un navigateur rapide et largement utilisé, mais basé sur des technologies propriétaires avec une forte intégration à l'écosystème Google."
+          },
+          {
+            open_source_name: "KeePassXC",
+            open_source_website: "https://keepassxc.org",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/KeePassXC.svg/1200px-KeePassXC.svg.png",
+            description_op: "KeePassXC est un gestionnaire de mots de passe open source fonctionnant hors ligne. Il permet de stocker localement et de manière chiffrée toutes vos informations sensibles.",
+            against_name: "LastPass",
+            icon_against_link: "https://www.svgrepo.com/show/331461/lastpass.svg",
+            description_against: "LastPass est un gestionnaire de mots de passe propriétaire basé sur le cloud, connu pour sa facilité d'utilisation mais dépendant d'un service externe."
+          },
+          {
+            open_source_name: "Signal",
+            open_source_website: "https://signal.org",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/8/8d/Signal-Logo.svg",
+            description_op: "Signal est une application de messagerie open source hautement sécurisée, utilisant un chiffrement de bout en bout innovant et respectueux de la vie privée.",
+            against_name: "WhatsApp",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg",
+            description_against: "WhatsApp est une application de messagerie populaire appartenant à Meta, utilisant un chiffrement propriétaire et nécessitant un numéro de téléphone."
+          },
+          {
+            open_source_name: "Joplin",
+            open_source_website: "https://joplinapp.org",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Joplin-icon.svg/2048px-Joplin-icon.svg.png",
+            description_op: "Joplin est une application open source de prise de notes, compatible Markdown, avec synchronisation chiffrée et plugins pour enrichir l'expérience.",
+            against_name: "Evernote",
+            icon_against_link: "https://store-images.s-microsoft.com/image/apps.62449.9007199266246247.d208f74f-88b2-4ca7-b524-48d06b9566b1.2f46dd6e-1c39-47e2-b771-5735ccfb3d28?h=210",
+            description_against: "Evernote est un service propriétaire de notes avec synchronisation cloud, intégrations avancées et stockage centralisé."
+          },
+          {
+            open_source_name: "Inkscape",
+            open_source_website: "https://inkscape.org",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/0/0d/Inkscape_Logo.svg",
+            description_op: "Inkscape est un éditeur de graphismes vectoriels open source, idéal pour la création de logos, illustrations et interfaces en SVG.",
+            against_name: "Adobe Illustrator",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/f/fb/Adobe_Illustrator_CC_icon.svg",
+            description_against: "Illustrator est le logiciel propriétaire d'Adobe pour les illustrations vectorielles, utilisé par les graphistes professionnels."
+          },
+          {
+            open_source_name: "Audacity",
+            open_source_website: "https://www.audacityteam.org",
+            icon_op_link: "https://www.audacityteam.org/_astro/Audacity_Logo.DK8H7nvr.svg",
+            description_op: "Audacity est un éditeur audio open source simple, idéal pour l’enregistrement, le montage ou la restauration de sons.",
+            against_name: "Adobe Audition",
+            icon_against_link: "https://www.adobe.com/cc-shared/assets/img/product-icons/svg/audition-64.svg",
+            description_against: "Audition est l’éditeur audio professionnel d’Adobe, utilisé pour le traitement avancé et le mixage audio."
+          },
+          {
+            open_source_name: "VLC Media Player",
+            open_source_website: "https://www.videolan.org/vlc",
+            icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/VLC_Icon.svg/1809px-VLC_Icon.svg.png",
+            description_op: "VLC est un lecteur multimédia open source capable de lire presque tous les formats audio et vidéo sans codecs supplémentaires.",
+            against_name: "Windows media player",
+            icon_against_link: "https://img.icons8.com/fluent/1200/windows-media-player.jpg",
+            description_against: "Windows media player est le lecteur multimédia propriétaire de Microsoft, sur l’écosystème Windows."
+          },
+          {
+            open_source_name: "Stalwart Mail",
+            open_source_website: "https://stalw.art/",
+            icon_op_link: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4wbcGzFHbo7Gc3UIJpMEIqz_92tG2O1NizA&s",
+            description_op: "Stalwart Mail est un serveur mail open source (compliquer à setup il faut trouver un pote motivé)",
+            against_name: "Gmail",
+            icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Gmail_Icon.png",
+            description_against: "Gmail est le service de messagerie propriétaire de Google, riche en fonctionnalités mais basé sur l’analyse de données cloud."
+          },
+          {
+            open_source_name: "Etherpad",
+            open_source_website: "https://etherpad.org",
+            icon_op_link: "https://pbs.twimg.com/profile_images/1336377123964145665/2gTadaDt_400x400.jpg",
+            description_op: "Etherpad est un éditeur de texte collaboratif open source permettant l’écriture en temps réel, idéal pour les équipes et l’enseignement.",
+            against_name: "Google Docs",
+            icon_against_link: "https://cdn-icons-png.flaticon.com/512/5968/5968517.png",
+            description_against: "Google Docs est un éditeur de documents collaboratif propriétaire basé sur le cloud Google Workspace."
+          },
+            {
+            open_source_name: "Linux",
+            open_source_website: "https://archlinux.org",
+            icon_op_link: "https://cdn.iconscout.com/icon/free/png-512/free-linux-logo-icon-svg-download-png-2944967.png?f=webp&w=256",
+            description_op: "Linux est un système d’exploitation libre et open source, offrant un contrôle complet à l’utilisateur. Il se décline en centaines de distributions adaptées à tous les usages : serveurs, desktop, sécurité, éducation ou machines légères. Linux est réputé pour sa stabilité, sa sécurité, ses performances et son haut niveau de personnalisation. Il respecte la vie privée, ne contient pas de télémétrie imposée et peut être modifié, redistribué ou étendu librement grâce à sa communauté active.",
+            against_name: "Windows",
+            icon_against_link: "https://www.citypng.com/public/uploads/preview/hd-windows-11-logo-icon-transparent-background-701751694967888zqtluh5aaw.png?v=2025082902",
+            description_against: "Windows 11 est un système d’exploitation propriétaire conçu pour la simplicité d’utilisation, mais avec moins de contrôle et de personnalisation que les distributions Linux."
+          }
+        ];
+      
+      
+      
+        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;
+      
+        const log = document.getElementById("log");
+        const ennemyName = document.getElementById("ennemyName");
+        const playerHpBox = document.getElementById("playerHp");
+        const enemyHpBox = document.getElementById("enemyHp");
+        playerInv = [];
+        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
+            }
+          }, 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 = () => {
+          if (Math.random() < 0.5) {
+            addLog("Vous prenez la fuite avec succès !");
+          } else {
+            addLog("La fuite échoue ! L'ennemi attaque !");
+            const dmg = Math.floor(Math.random() * 6) + 2; // 2-7
+            playerHp -= dmg;
+            updateUI();
+            addLog(`La fuite échoue ! L'ennemi inflige ${dmg} dégâts !`);
+          }
+        };
+      
+        setCombat();
+      
+      
+      </script>
 </body>
 </html>
diff --git a/style.css b/style.css
index 643e89d..8c4ee98 100644
--- a/style.css
+++ b/style.css
@@ -28,9 +28,10 @@ header h1 {
 
 
 .header-gif {
-  width: 40px;        
-  height: 40px;
+  width: 3rem;        
+  height: 3rem;
   image-rendering: pixelated;
+  margin-left : 3rem;
 }
 
 section {
@@ -187,3 +188,147 @@ nav {
   margin: 0.5rem 0;
   user-select: none;
 }
+
+
+
+/* --- POKÉMON (adapté au style rétro du site) --- */
+
+.battle {
+  background: rgba(0, 0, 0, 0.3);
+  border: 2px solid #00ff88;
+  box-shadow: 0 0 15px #00ff88;
+  padding: 20px;
+  border-radius: 12px;
+  margin: 1rem;
+  color: #00ff88;
+  font-family: "Courier New", monospace;
+}
+
+.row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.monster {
+  flex: 1;
+  background: rgba(0, 255, 136, 0.1);
+  border: 1px solid #00ff88;
+  box-shadow: 0 0 10px #00ff88;
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  font-size: 18px;
+  color: #00ffcc;
+}
+
+button {
+  font-size: 16px;
+  border-radius: 8px;
+  border: 2px solid #00ff88;
+  background: rgba(0, 255, 136, 0.15);
+  color: #00ffcc;
+  cursor: pointer;
+  font-family: "Courier New", monospace;
+  text-shadow: 0 0 5px #00ff88;
+  transition: 0.2s ease;
+  margin : 0.5rem;
+  align-items: center;
+  height: 3rem;
+}
+
+button:hover {
+  background: #00ff88;
+  color: #000;
+  box-shadow: 0 0 12px #00ff88;
+}
+
+#log {
+  white-space: pre-line;
+  margin-top: 10px;
+  background: rgba(0, 255, 136, 0.1);
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #00ff88;
+  box-shadow: 0 0 8px #00ff88;
+  min-height: 60px;
+  color: #00ffcc;
+}
+
+/* --- Tooltip version rétro --- */
+
+.tooltip {
+  display: inline-block;
+  margin-left: 6px;
+  width: 18px;
+  height: 18px;
+  line-height: 16px;
+  text-align: center;
+  background: rgba(0, 255, 136, 0.2);
+  border-radius: 50%;
+  border: 1px solid #000;
+  cursor: help;
+  font-weight: bold;
+  font-size: 12px;
+  color: #000;
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: 22px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #001a0f;
+  border: 2px solid #00ff88;
+  padding: 6px 10px;
+  border-radius: 8px;
+  width: 220px;
+  color: #00ffcc;
+  font-size: 13px;
+  z-index: 999;
+  white-space: normal;
+  box-shadow: 0 0 15px #00ff88;
+  display: none;
+}
+
+.tooltip:hover::after {
+  display: block;
+}
+
+/* --- Images ennemis et icônes --- */
+
+.enemy-img-container {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.enemy-img-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+
+.attack-icon-container {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 6px;
+  overflow: hidden;
+}
+
+.attack-icon-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  image-rendering: pixelated;
+}