diff --git a/flask_base/app.py b/flask_base/app.py
index 79ab7f0..1437fec 100644
--- a/flask_base/app.py
+++ b/flask_base/app.py
@@ -42,6 +42,22 @@ def show_questions():
         questions = json.load(file)
     return render_template('quiz.html', questions=questions)
 
+@app.route('/')
+def main():
+    return render_template('index.html')
+
+@app.route('/pokemon')
+def poke():
+    return render_template('pokemon.html')
+
+@app.route('/PAI')
+def pai():
+    return render_template('PAI.html')
+
+@app.route('/outils')
+def outils():
+    return render_template('outils.html')
+
 if __name__ == '__main__':
     app.run(debug=True, port=8080)
 
diff --git a/flask_base/static/style.css b/flask_base/static/style.css
new file mode 100644
index 0000000..a4b1b5a
--- /dev/null
+++ b/flask_base/static/style.css
@@ -0,0 +1,387 @@
+/* Style simple et épuré pour le site d'introduction aux logiciels libres */
+
+body {
+  background: #000;
+  color: #00ff88;
+  font-family: "Courier New", monospace;
+  margin: 2rem;
+  line-height: 1.5; 
+}
+
+header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 1rem;
+  background: #001a0f;
+  border-bottom: 2px solid #00ff88;
+  padding: 1rem;
+}
+
+header h1 {
+  margin: 0;
+  line-height: 40px;
+  font-size: 1.8rem;
+  color: #00ffcc;
+  text-align: center;
+}
+
+
+.header-gif {
+  width: 3rem;        
+  height: 3rem;
+  image-rendering: pixelated;
+  margin-left : 3rem;
+}
+
+section {
+  border: 1px solid #00ff88;
+  box-shadow: 0 0 10px #00ff88;
+  background: rgba(0, 0, 0, 0.3);
+  padding : 2rem;
+}
+
+main {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 1rem;
+}
+
+h1, h2 {
+  margin-top: 0;
+  /* augmenter la taille et améliorer contraste */
+  color: #00ffcc; /* couleur plus claire que #2c7a7b */
+}
+
+h1 {
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  font-size: 2.2rem;
+}
+
+h2 {
+  font-size: 1.6rem;
+}
+
+nav {
+  background: #256f70;       
+  padding: 0.6rem 0;         
+  margin-top: 1rem;          
+  border-radius: 6px;     
+}
+
+.menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.menu a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+  transition: opacity 0.2s;
+  font-size: 1.1rem;
+  outline-offset: 2px; /* pour focus */
+}
+
+/* Focus visible pour clavier */
+.menu a:focus {
+  outline: 3px solid #00ff88;
+  outline-offset: 2px;
+}
+
+.menu a:hover {
+  opacity: 0.8; /* plus visible au hover */
+}
+
+.menu li {
+  border: 2px smooth #00ff88;  /* bordure verte */
+  padding: 0.5rem 1rem;        /* espace intérieur */
+  border-radius: 6px;          /* coins arrondis */
+  background-color: rgba(0, 255, 136, 0.1); /* fond semi-transparent */
+}
+
+.menu li:hover {
+  background-color: #00ff88;  /* fond vert clair au hover */
+}
+
+.menu li a {
+  color: #000; /* texte noir pour contraste sur fond clair */
+  text-decoration: none;
+  font-weight: bold;
+  display: block;  /* pour que le lien prenne toute la "case" */
+}
+
+/* Styles pour la page "Outils Open Source vs Propriétaires" */
+
+.tool-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.tool-card {
+  background: rgba(0, 255, 136, 0.1);
+  border: 1px solid #00ff88;
+  border-radius: 8px;
+  width: 320px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: 0 0 8px #00ff88;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* Respecter la préférence "réduire le mouvement" */
+@media (prefers-reduced-motion: reduce) {
+  .tool-card {
+    transition: none;
+  }
+}
+
+.tool-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px #00ff88;
+}
+
+.tool-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.tool-row img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border-radius: 8px;
+  background: #000;
+  box-shadow: 0 0 8px #00ff88;
+}
+
+.tool-name {
+  font-weight: bold;
+  font-size: 1.3rem; /* un peu plus grand */
+  color: #00ffcc;    /* couleur plus claire */
+}
+
+.description {
+  font-size: 1rem; /* plus lisible */
+  color: #00ff88;
+  min-height: 60px;
+  line-height: 1.4; /* interligne */
+}
+
+.vs {
+  text-align: center;
+  font-weight: bold;
+  color: #00ff88;
+  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;
+}
+
+.pai-container {
+  margin: 3rem auto;
+  max-width: 600px;
+  text-align: center;
+}
+
+.pai-box {
+  border: 2px solid #00ff88;
+  padding: 2rem;
+  background: rgba(0, 255, 136, 0.05);
+  box-shadow: 0 0 12px #00ff88;
+  border-radius: 10px;
+}
+
+.loading-bar {
+  width: 100%;
+  height: 22px;
+  background: #003322;
+  border: 2px solid #00ff88;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-top: 1.5rem;
+}
+
+.loading-fill {
+  height: 100%;
+  width: 0%;
+  background: #00ff88;
+  box-shadow: 0 0 10px #00ff88;
+  animation: fill 7s infinite;
+}
+
+@keyframes fill {
+  0%   { width: 0%; }
+  50%  { width: 100%; }
+  100% { width: 0%; }
+}
+
+.pai-text {
+  margin-top: 1.5rem;
+  font-size: 1.2rem;
+  color: #00ffcc;
+  text-shadow: 0 0 6px #00ff88;
+  min-height: 60px;
+}
+
+.pai-small {
+  margin-top: 2rem;
+  font-size: 0.9rem;
+  color: #00ff88;
+  opacity: 0.7;
+}
\ No newline at end of file
diff --git a/flask_base/templates/PAI.html b/flask_base/templates/PAI.html
new file mode 100644
index 0000000..5326875
--- /dev/null
+++ b/flask_base/templates/PAI.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PAI - Analyse en cours</title>
+    <link rel="stylesheet" href="../static/style.css">
+
+
+</head>
+<body>
+
+{% include 'header.html' %}
+
+
+<main>
+    <section class="pai-container">
+        <div class="pai-box">
+            <h2>Protocole d’Analyse Intellectuelle</h2>
+            <p id="pai-text" class="pai-text">Initialisation du système…</p>
+
+            <div class="loading-bar">
+                <div class="loading-fill"></div>
+            </div>
+
+            <p class="pai-small">Veuillez patienter… l’analyse peut prendre plusieurs siècles.</p>
+        </div>
+    </section>
+</main>
+
+<script>
+    const messages = [
+        "Analyse du QI en cours…",
+        "Calcul du niveau de bon sens…",
+        "Mesure du taux de curiosité…",
+        "Scan des neurones disponibles…",
+        "Synchronisation avec le protocole PAI…",
+        "Détection de l'utilisateur…",
+        "Hmm… les résultats ne sont pas glorieux.",
+        "Erreur : cerveau introuvable. Reconnexion en cours…",
+        "Analyse presque terminée… enfin, peut-être.",
+    ];
+
+    let index = 0;
+
+    setInterval(() => {
+        index = (index + 1) % messages.length;
+        document.getElementById("pai-text").textContent = messages[index];
+    }, 3500);
+</script>
+
+</body>
+</html>
diff --git a/flask_base/templates/header.html b/flask_base/templates/header.html
new file mode 100644
index 0000000..201cfd8
--- /dev/null
+++ b/flask_base/templates/header.html
@@ -0,0 +1,13 @@
+<header>
+    <img src="../pinguin(1).gif" alt="Mascotte animée" class="header-gif" />
+    <h1>Logiciels Libres</h1>
+    <nav>
+        <ul class="menu">
+            <li><a href="./">Accueil </a></li>
+            <li><a href="./pokemon">Jeu Pokémon</a></li>
+            <li><a href="./PAI">PAI </a></li>
+            <li><a href="./questions">QCM</a></li>
+            <li><a href="./outils">Outils et OS</a></li>
+        </ul>
+    </nav>
+</header>
\ No newline at end of file
diff --git a/flask_base/templates/index.html b/flask_base/templates/index.html
new file mode 100644
index 0000000..50bc74f
--- /dev/null
+++ b/flask_base/templates/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<!-- head pour l'onglet -->
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Introduction aux Logiciels Libres</title>
+    <link rel="stylesheet" href="../static/style.css" />
+<!-- body pour la page -->
+</head>
+    <body>
+        {% include 'header.html' %}
+        <main>
+            <section>
+                <h2>Qu’est-ce qu’un logiciel libre ?</h2>
+                <p>
+                Un <strong>logiciel libre</strong> est un logiciel dont l'utilisateur dispose de
+                libertés essentielles : la liberté d'utiliser le programme, de l'étudier,
+                de le modifier, et de le redistribuer. Ces libertés garantissent un
+                contrôle total de l’utilisateur sur la technologie qu’il utilise.
+                </p>
+            </section>
+
+            <section>
+                <h2>Et un logiciel propriétaire ?</h2>
+                <p>
+                Un <strong>logiciel propriétaire</strong> impose des restrictions : le code source
+                n'est pas accessible, la modification est interdite, et la distribution est
+                strictement contrôlée. L’utilisateur dépend entièrement de l’éditeur.
+                </p>
+            </section>
+
+            <section>
+                <h2>Pourquoi les logiciels libres sont importants</h2>
+                <p>
+                    Les logiciels libres favorisent la transparence, l'indépendance
+                    technologique, la durabilité et la collaboration. Ils permettent à chacun de
+                    comprendre ce qu’un logiciel fait réellement et d’éviter les pratiques
+                    intrusives ou injustes.
+                </p>
+            </section>
+
+
+            <section>
+                <h2>Pourquoi s'y intéresser ?</h2>
+                <p>
+                    S'intéresser au logiciel libre, c’est soutenir un modèle ouvert, respectueux
+                    des utilisateurs et bénéfique pour la collectivité. Cela encourage un
+                    environnement numérique plus sain et plus éthique.
+                </p>
+            </section>
+        </main>
+    </body>
+</html>
\ No newline at end of file
diff --git a/flask_base/templates/outils.html b/flask_base/templates/outils.html
new file mode 100644
index 0000000..cc172b6
--- /dev/null
+++ b/flask_base/templates/outils.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="../static/style.css" />
+  <title>Outils Open Source vs Propriétaires</title>
+</head>
+<body>
+  {% include 'header.html' %}
+  <h1>Outils Open Source vs Propriétaires</h1>
+
+  <div id="tools" class="tool-container"></div>
+
+  <script>
+    const outilsData = {
+  "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": "Arch Linux",
+      "open_source_website": "https://archlinux.org",
+      "icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Arch_Linux_%22Crystal%22_icon.svg/2048px-Arch_Linux_%22Crystal%22_icon.svg.png",
+      "description_op": "Arch Linux est une distribution légère et flexible basée sur le principe KISS. Elle utilise pacman, propose un dépôt AUR très riche, et permet une personnalisation complète du système.",
+      "against_name": "Windows 11",
+      "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."
+    },
+    {
+      "open_source_name": "Debian",
+      "open_source_website": "https://www.debian.org",
+      "icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/6/66/Openlogo-debianV2.svg",
+      "description_op": "Debian est l’une des distributions Linux les plus stables et respectées, utilisée comme base pour de nombreuses autres distributions comme Ubuntu. Elle se distingue par sa fiabilité et son énorme dépôt de paquets.",
+      "against_name": "Red Hat Enterprise Linux",
+      "icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/d/d8/Red_Hat_logo.svg",
+      "description_against": "RHEL est une distribution Linux commerciale orientée entreprise, proposant un support professionnel mais non totalement libre."
+    },
+    {
+      "open_source_name": "Ubuntu",
+      "open_source_website": "https://ubuntu.com",
+      "icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/9/9e/UbuntuCoF.svg",
+      "description_op": "Ubuntu est une distribution Linux populaire et accessible, dérivée de Debian. Elle offre un environnement convivial, un large support matériel et une grande communauté.",
+      "against_name": "macOS",
+      "icon_against_link": "https://img.icons8.com/color/512/mac-logo.png",
+      "description_against": "macOS est le système d’exploitation propriétaire d’Apple, connu pour son écosystème fermé et son intégration matérielle."
+    },
+    {
+      "open_source_name": "Xubuntu",
+      "open_source_website": "https://xubuntu.org",
+      "icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Xubuntu_logo.svg/2048px-Xubuntu_logo.svg.png",
+      "description_op": "Xubuntu est une variante officielle d’Ubuntu utilisant l’environnement XFCE, optimisé pour être léger, rapide et adapté aux machines plus modestes.",
+      "against_name": "ChromeOS",
+      "icon_against_link": "https://www.computerhope.com/jargon/c/chrome-os.png",
+      "description_against": "ChromeOS est un système propriétaire centré sur les applications web et fortement dépendant des services cloud Google."
+    },
+    {
+      "open_source_name": "Fedora Linux",
+      "open_source_website": "https://www.fedoraproject.org/fr/",
+      "icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/3/3f/Fedora_logo.svg",
+      "description_op": "Fedora est une distribution moderne sponsorisée par Red Hat, connue pour proposer des technologies récentes, GNOME par défaut et un excellent support pour les développeurs.",
+      "against_name": "Windows 10",
+      "icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Windows_logo_-_2012_%28dark_blue%29.svg/480px-Windows_logo_-_2012_%28dark_blue%29.svg.png",
+      "description_against": "Windows 10 est un système d’exploitation propriétaire largement utilisé mais avec moins de contrôle utilisateur et une politique de télémétrie intrusive."
+    },
+    {
+        "open_source_name": "FreeBSD",
+        "open_source_website": "https://www.freebsd.org",
+        "icon_op_link": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmY91-6uwU9TqcQlc4EQLW4cfAUAm5_efRqg&s",
+        "description_op": "FreeBSD est un système d’exploitation libre de type Unix, réputé pour sa stabilité, ses performances réseau et sa sécurité. Il est très utilisé dans les serveurs, le stockage et les infrastructures critiques.",
+        "against_name": "Windows Server",
+        "icon_against_link": "https://e7.pngegg.com/pngimages/534/305/png-clipart-windows-server-2012-logo-organization-brand-logo-windows-7-blue-angle-thumbnail.png",
+        "description_against": "Windows Server est un système d’exploitation propriétaire orienté entreprise, proposant des outils d’administration graphiques et un écosystème fermé."
+    }
+  ]
+};
+
+    const container = document.getElementById('tools');
+
+    outilsData.outils_list.forEach(tool => {
+      // Skip empty entries
+      if (!tool.open_source_name && !tool.against_name) return;
+
+      const card = document.createElement('div');
+      card.classList.add('tool-card');
+
+      card.innerHTML = `
+        <div class="tool-row">
+          <img src="${tool.icon_op_link}" alt="${tool.open_source_name} logo" />
+          <div class="tool-name">${tool.open_source_name}</div>
+        </div>
+        <div class="description">${tool.description_op || 'Aucune description disponible.'}</div>
+        <div class="vs">VS</div>
+        <div class="tool-row">
+          <img src="${tool.icon_against_link}" alt="${tool.against_name} logo" />
+          <div class="tool-name">${tool.against_name}</div>
+        </div>
+        <div class="description">${tool.description_against || 'Aucune description disponible.'}</div>
+      `;
+
+      container.appendChild(card);
+    });
+  </script>
+</body>
+</html>
diff --git a/flask_base/templates/pokemon.html b/flask_base/templates/pokemon.html
new file mode 100644
index 0000000..7976838
--- /dev/null
+++ b/flask_base/templates/pokemon.html
@@ -0,0 +1,402 @@
+<!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>
+
+  {% include 'header.html' %}
+
+    <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/flask_base/templates/qcm.html b/flask_base/templates/qcm.html
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/flask_base/templates/qcm.html
@@ -0,0 +1 @@
+
diff --git a/flask_base/templates/quiz.html b/flask_base/templates/quiz.html
index 1ba8d69..ef39b4c 100644
--- a/flask_base/templates/quiz.html
+++ b/flask_base/templates/quiz.html
@@ -2,11 +2,12 @@
     <html>
         <head>
             <title>Nuit de l'info quiz</title>
-            <link href="/static/quiz.css" rel="stylesheet">
+            <link rel="stylesheet" href="../static/style.css">
             <link href="/static/logo_n2i_color_moon.svg" rel="icon">
             <script src="static/quizz.js"></script>
         </head>
         <body>
+            {% include 'header.html' %}
                 <a href="test.html"><img class="logo" src="static/logo_n2i_color_moon.svg"></a>
                 <h1 id="txt">page du quiz</h1>
                 <button id="strt" onclick="startQuiz({{questions.nbQuestion}})">Start Quiz!</button>