From d70dd93baa54322f5cf86adeec3ac2c15d531f01 Mon Sep 17 00:00:00 2001
From: Tajeddine <taje.inamils@gmail.com>
Date: Fri, 12 Jun 2026 21:40:50 +0200
Subject: [PATCH] ajout css pour rendre plus beau et ajout des virgules pour
 les prix :D

---
 .../application/views/game_detail_view.php    | 150 ++++++++++++------
 .../application/views/games_list_view.php     |  32 +++-
 .../application/views/home_view.php           |  98 +++++++-----
 .../application/views/liste_jeux_vue.php      |  50 ++++--
 .../application/views/search_results_view.php |  39 ++++-
 5 files changed, 259 insertions(+), 110 deletions(-)
diff --git a/codeigniter-develop/application/views/game_detail_view.php b/codeigniter-develop/application/views/game_detail_view.php
index 296bc33..ecf7b85 100644
--- a/codeigniter-develop/application/views/game_detail_view.php
+++ b/codeigniter-develop/application/views/game_detail_view.php
@@ -3,59 +3,111 @@
 <head>
     <meta charset="UTF-8">
     <title>Détails du jeu - <?= html_escape($game['name']) ?></title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 900px; margin: 40px auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        
+        .back-link { display: inline-block; background: #ecf0f1; padding: 8px 15px; border-radius: 5px; color: #2c3e50; text-decoration: none; margin-bottom: 20px; font-weight: bold; transition: background 0.3s; }
+        .back-link:hover { background: #bdc3c7; }
+
+        .game-header { display: flex; gap: 40px; margin-bottom: 30px; align-items: flex-start; flex-wrap: wrap; }
+        
+        .game-poster { flex-shrink: 0; max-width: 300px; width: 100%; }
+        .game-poster img { width: 100%; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); object-fit: cover; }
+        .game-poster-empty { width: 100%; height: 350px; background: #ecf0f1; display: flex; align-items: center; justify-content: center; color: #7f8c8d; border-radius: 8px; text-align: center; padding: 20px; box-sizing: border-box; }
+        
+        .game-info { flex: 1; min-width: 250px; }
+        h1 { color: #2c3e50; margin-top: 0; margin-bottom: 10px; font-size: 32px; }
+        h3 { color: #34495e; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-top: 30px; }
+        
+        p { line-height: 1.6; }
+        
+        .price-tag { display: inline-block; background: #e8f4fd; border: 1px solid #bde0fe; padding: 10px 20px; border-radius: 6px; font-size: 24px; font-weight: bold; color: #2ecc71; margin: 15px 0; }
+        
+        .description-box { line-height: 1.6; color: #444; background: #f9f9f9; padding: 20px; border-left: 4px solid #3498db; border-radius: 4px; }
+        
+        .lists-container { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 20px; }
+        .list-section { flex: 1; min-width: 250px; }
+        
+        ul { list-style: none; padding: 0; margin: 0; }
+        li { background: #f9f9f9; margin-bottom: 8px; padding: 12px 15px; border-radius: 5px; border-left: 4px solid #3498db; transition: transform 0.2s; }
+        li:hover { transform: translateX(5px); background: #f1f1f1; }
+        li a { color: #2c3e50; font-weight: bold; text-decoration: none; display: block; }
+        li a:hover { color: #3498db; }
+        li.empty-list { background: transparent; border: none; padding: 0; color: #7f8c8d; font-style: italic; }
+        li.empty-list:hover { transform: none; background: transparent; }
+    </style>
 </head>
 <body>
-    <p>
-        <a href="<?= site_url('home') ?>">⬅ Retour à l'accueil</a>
-    </p>
 
-    <div>
-        <?php if (!empty($game['poster_url'])): ?>
-            <img src="data:image/jpeg;base64,<?= base64_encode($game['poster_url']) ?>" alt="Poster de <?= html_escape($game['name']) ?>">
-        <?php else: ?>
-            <p>Aucun poster disponible pour ce jeu.</p>
-        <?php endif; ?>
+<div class="container">
+    <a href="<?= site_url('home') ?>" class="back-link">⬅ Retour à l'accueil</a>
+
+    <div class="game-header">
+        <div class="game-poster">
+            <?php if (!empty($game['poster_url'])): ?>
+                <img src="data:image/jpeg;base64,<?= base64_encode($game['poster_url']) ?>" alt="Poster de <?= html_escape($game['name']) ?>">
+            <?php else: ?>
+                <div class="game-poster-empty">
+                    <p>Aucun poster disponible pour ce jeu.</p>
+                </div>
+            <?php endif; ?>
+        </div>
+
+        <div class="game-info">
+            <h1><?= html_escape($game['name']) ?> (<?= html_escape($game['releaseYear']) ?>)</h1>
+            
+            <p style="font-size: 18px; color: #7f8c8d;">
+                <strong>Développeur :</strong> <?= !empty($game['developer_name']) ? html_escape($game['developer_name']) : 'Inconnu' ?>
+            </p>
+            
+            <div class="price-tag">
+                <?= !empty($game['price']) ? number_format($game['price'] / 100, 2, ',', ' ') . ' €' : 'Gratuit / Non renseigné' ?>
+            </div>
+            
+            <h3>Description</h3>
+            <div class="description-box">
+                <?= nl2br(html_escape($game['shortDescription'])) ?>
+            </div>
+        </div>
     </div>
 
-    <div>
-        <h1><?= html_escape($game['name']) ?> (<?= html_escape($game['releaseYear']) ?>)</h1>
-        
-        <p><strong>Développeur :</strong> <?= !empty($game['developer_name']) ? html_escape($game['developer_name']) : 'Inconnu' ?></p>
-        
-        <p><strong>Prix :</strong> <?= !empty($game['price']) ? html_escape($game['price']) . ' €' : 'Gratuit / Non renseigné' ?></p>
-        
-        <h3>Description :</h3>
-        <p><?= nl2br(html_escape($game['shortDescription'])) ?></p>
-        
-        <h3>Catégories associées :</h3>
-        <ul>
-            <?php if (!empty($categories)): ?>
-                <?php foreach ($categories as $cat): ?>
-                    <li>
-                        <a href="<?= site_url('category/view/' . $cat['id']) ?>">
-                            <?= html_escape($cat['description']) ?>
-                        </a>
-                    </li>
-                <?php endforeach; ?>
-            <?php else: ?>
-                <li><em>Aucune catégorie pour ce jeu.</em></li>
-            <?php endif; ?>
-        </ul>
+    <div class="lists-container">
+        <div class="list-section">
+            <h3>Catégories associées</h3>
+            <ul>
+                <?php if (!empty($categories)): ?>
+                    <?php foreach ($categories as $cat): ?>
+                        <li>
+                            <a href="<?= site_url('category/view/' . $cat['id']) ?>">
+                                <?= html_escape($cat['description']) ?>
+                            </a>
+                        </li>
+                    <?php endforeach; ?>
+                <?php else: ?>
+                    <li class="empty-list">Aucune catégorie pour ce jeu.</li>
+                <?php endif; ?>
+            </ul>
+        </div>
+
+        <div class="list-section">
+            <h3>Genres associés</h3>
+            <ul>
+                <?php if (!empty($genres)): ?>
+                    <?php foreach ($genres as $gen): ?>
+                        <li>
+                            <a href="<?= site_url('genre/view/' . $gen['id']) ?>">
+                                <?= html_escape($gen['description']) ?>
+                            </a>
+                        </li>
+                    <?php endforeach; ?>
+                <?php else: ?>
+                    <li class="empty-list">Aucun genre pour ce jeu.</li>
+                <?php endif; ?>
+            </ul>          
+        </div>
+    </div>
+</div>
 
-        <h3>Genres associés :</h3>
-        <ul>
-            <?php if (!empty($genres)): ?>
-                <?php foreach ($genres as $gen): ?>
-                    <li>
-                        <a href="<?= site_url('genre/view/' . $gen['id']) ?>">
-                            <?= html_escape($gen['description']) ?>
-                        </a>
-                    </li>
-                <?php endforeach; ?>
-            <?php else: ?>
-                <li><em>Aucun genre pour ce jeu.</em></li>
-            <?php endif; ?>
-        </ul>          
-    </div> 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/codeigniter-develop/application/views/games_list_view.php b/codeigniter-develop/application/views/games_list_view.php
index 8dd225e..2e69817 100644
--- a/codeigniter-develop/application/views/games_list_view.php
+++ b/codeigniter-develop/application/views/games_list_view.php
@@ -3,9 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <title>Liste des jeux</title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 900px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        h1 { color: #2c3e50; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 20px; }
+        a { color: #3498db; text-decoration: none; }
+        a:hover { text-decoration: underline; }
+        ul { list-style: none; padding: 0; }
+        li { background: #f9f9f9; margin-bottom: 10px; padding: 15px; border-radius: 5px; border-left: 4px solid #3498db; transition: transform 0.2s; display: flex; justify-content: space-between; align-items: center; }
+        li:hover { transform: translateX(5px); background: #f1f1f1; }
+        li a { font-weight: bold; color: #2c3e50; text-decoration: none; }
+        li a:hover { color: #3498db; }
+        .price-tag { background: #2ecc71; color: white; padding: 4px 10px; border-radius: 4px; font-weight: bold; font-size: 14px; }
+        .empty-msg { color: #7f8c8d; font-style: italic; }
+    </style>
 </head>
 <body>
-    <a href="<?= site_url('home') ?>">Retour à l'accueil</a>
+
+<div class="container">
+    <p><a href="<?= site_url('home') ?>">⬅ Retour à l'accueil</a></p>
 
     <?php if (isset($category)): ?>
         <h1>Jeux de la catégorie : <?= html_escape($category['description']) ?></h1>
@@ -20,13 +36,21 @@
             <?php foreach ($games as $game): ?>
                 <li>
                     <a href="<?= site_url('game/detail/' . $game['id']) ?>">
-                        <?= html_escape($game['name']) ?> (<?= html_escape($game['releaseYear']) ?>)
+                        <?= html_escape($game['name']) ?> <span style="color: #7f8c8d; font-weight: normal;">(<?= html_escape($game['releaseYear']) ?>)</span>
                     </a>
+                    
+                    <?php if (isset($game['prix'])): ?>
+                        <span class="price-tag"><?= number_format($game['prix'] / 100, 2, ',', ' ') ?> €</span>
+                    <?php elseif (isset($game['price'])): ?>
+                        <span class="price-tag"><?= number_format($game['price'] / 100, 2, ',', ' ') ?> €</span>
+                    <?php endif; ?>
                 </li>
             <?php endforeach; ?>
         <?php else: ?>
-            <p>Aucun jeu trouvé pour cette sélection.</p>
+            <p class="empty-msg">Aucun jeu trouvé pour cette sélection.</p>
         <?php endif; ?>
     </ul>
+</div>
+
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/codeigniter-develop/application/views/home_view.php b/codeigniter-develop/application/views/home_view.php
index 68e84d1..ae04580 100644
--- a/codeigniter-develop/application/views/home_view.php
+++ b/codeigniter-develop/application/views/home_view.php
@@ -3,51 +3,75 @@
 <head>
     <meta charset="UTF-8">
     <title>Univers Jeux Vidéo - Accueil</title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 900px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; }
+        h2 { color: #34495e; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 20px; }
+        a { color: #3498db; text-decoration: none; font-weight: 500; }
+        a:hover { color: #2980b9; text-decoration: underline; }
+        
+        .admin-link { display: inline-block; background-color: #2ecc71; color: white; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; margin-bottom: 20px; transition: 0.3s; }
+        .admin-link:hover { background-color: #27ae60; text-decoration: none; }
+        
+        .search-section { background: #ecf0f1; padding: 25px; border-radius: 8px; margin-bottom: 40px; text-align: center; }
+        .search-section input[type="text"] { padding: 10px 15px; width: 60%; max-width: 400px; border: 1px solid #bdc3c7; border-radius: 4px; font-size: 16px; outline: none; }
+        .search-section input[type="text"]:focus { border-color: #3498db; }
+        .search-section button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background 0.3s; margin-left: 10px; }
+        .search-section button:hover { background-color: #2980b9; }
+
+        .flex-container { display: flex; gap: 40px; }
+        .flex-child { flex: 1; }
+        ul { list-style: none; padding: 0; margin: 0; }
+        li { background: #f9f9f9; margin-bottom: 10px; padding: 12px 15px; border-radius: 5px; border-left: 4px solid #3498db; transition: transform 0.2s, background 0.2s; }
+        li:hover { transform: translateX(5px); background: #f1f1f1; }
+    </style>
 </head>
 <body>
 
-        <a href="<?php echo site_url('jeux/lister'); ?>">
-             Administration (Gestion des jeux)
-        </a>
-    </div>
+<div class="container">
+    <a href="<?php echo site_url('jeux/lister'); ?>" class="admin-link">
+        🛠 Administration (Gestion des jeux)
+    </a>
 
     <h1>Bienvenue sur l'application Jeux Vidéo</h1>
 
-    <main style="display: flex; gap: 50px;">
-    <section style="margin-bottom: 30px; background: #f4f4f4; padding: 15px; border-radius: 5px;">
-    <h2>Rechercher un jeu vidéo</h2>
-    <form action="<?php echo site_url('home/search'); ?>" method="GET">
-        <input type="text" name="keyword" placeholder="Ex: Zelda, Mario..." required style="padding: 8px; width: 250px;">
-        <button type="submit" style="padding: 8px 15px;">Rechercher</button>
-    </form>
-	</section>
+    <section class="search-section">
+        <h2 style="border:none; text-align:center; margin-top:0;">Rechercher un jeu vidéo</h2>
+        <form action="<?php echo site_url('home/search'); ?>" method="GET">
+            <input type="text" name="keyword" placeholder="Ex: Zelda, Mario..." required>
+            <button type="submit">Rechercher</button>
+        </form>
+    </section>
 
-        <section>
-    <h2>Nos Catégories</h2>
-    <ul>
-    <?php foreach ($categories as $category): ?>
-    <li>
-        <a href="<?php echo site_url('category/view/' . $category['id']); ?>">
-            <?php echo html_escape($category['description']); ?>
-        </a>
-    </li>
-<?php endforeach; ?>
-    </ul>
-</section>
+    <main class="flex-container">
+        <section class="flex-child">
+            <h2>Nos Catégories</h2>
+            <ul>
+            <?php foreach ($categories as $category): ?>
+                <li>
+                    <a href="<?php echo site_url('category/view/' . $category['id']); ?>">
+                        <?php echo html_escape($category['description']); ?>
+                    </a>
+                </li>
+            <?php endforeach; ?>
+            </ul>
+        </section>
 
-<section>
-    <h2>Nos Genres</h2>
-    <ul>
-    <?php foreach ($genres as $genre): ?>
-    <li>
-        <a href="<?php echo site_url('genre/view/' . $genre['id']); ?>">
-            <?php echo html_escape($genre['description']); ?>
-        </a>
-    </li>
-<?php endforeach; ?>
-    </ul>
-</section>
+        <section class="flex-child">
+            <h2>Nos Genres</h2>
+            <ul>
+            <?php foreach ($genres as $genre): ?>
+                <li>
+                    <a href="<?php echo site_url('genre/view/' . $genre['id']); ?>">
+                        <?php echo html_escape($genre['description']); ?>
+                    </a>
+                </li>
+            <?php endforeach; ?>
+            </ul>
+        </section>
     </main>
+</div>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/codeigniter-develop/application/views/liste_jeux_vue.php b/codeigniter-develop/application/views/liste_jeux_vue.php
index c73d2f6..dd321ce 100644
--- a/codeigniter-develop/application/views/liste_jeux_vue.php
+++ b/codeigniter-develop/application/views/liste_jeux_vue.php
@@ -3,18 +3,35 @@
 <head>
     <meta charset="UTF-8">
     <title>Administration des Jeux</title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 900px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        h2 { color: #2c3e50; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; }
+        a { color: #3498db; text-decoration: none; }
+        a:hover { text-decoration: underline; }
+        .btn-add { display: inline-block; background-color: #2ecc71; color: white; padding: 10px 15px; border-radius: 5px; margin: 15px 0; font-weight: bold; }
+        .btn-add:hover { background-color: #27ae60; text-decoration: none; }
+        .sort-links { background: #f9f9f9; padding: 10px 15px; border-radius: 5px; }
+        ul { list-style: none; padding: 0; }
+        li { background: #fff; border: 1px solid #ecf0f1; margin-bottom: 10px; padding: 15px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; transition: box-shadow 0.2s; }
+        li:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
+        .game-price { margin-left: 15px; background: #e8f4fd; color: #2b6cb0; padding: 3px 8px; border-radius: 4px; font-weight: bold; font-size: 14px; }
+        .actions a { margin-left: 15px; font-size: 14px; padding: 5px 10px; border-radius: 3px; background: #ecf0f1; color: #333; }
+        .actions a:hover { text-decoration: none; background: #bdc3c7; }
+        .actions a.delete-btn { background: #e74c3c; color: white; }
+        .actions a.delete-btn:hover { background: #c0392b; }
+    </style>
 </head>
 <body>
 
+<div class="container">
     <p><a href="<?= site_url('home') ?>">⬅ Retour au site public</a></p>
 
     <h2>Administration - Liste des jeux</h2>
 
-    <p>
-        <a href="<?= site_url('jeux/ajouter') ?>"> Ajouter un nouveau jeu</a>
-    </p>
+    <a href="<?= site_url('jeux/ajouter') ?>" class="btn-add">➕ Ajouter un nouveau jeu</a>
 
-    <p>
+    <p class="sort-links">
         <strong>Trier par :</strong> 
         <a href="<?= site_url('jeux/lister/name') ?>">Titre (A-Z)</a> | 
         <a href="<?= site_url('jeux/lister/releaseYear') ?>">Année de sortie</a>
@@ -23,17 +40,24 @@
     <ul>
         <?php foreach ($jeux as $jeu): ?>
             <li>
-                <strong><?= html_escape($jeu['name']) ?></strong> 
-                - <em>(<?= html_escape($jeu['releaseYear']) ?>)</em>
-                
-                <span>
-                    <a href="<?= site_url('jeux/modifier/' . $jeu['id']) ?>">Modifier</a> 
-                    | 
-                    <a href="<?= site_url('jeux/supprimer/' . $jeu['id']) ?>" onclick="return confirm('Es-tu sûr de vouloir supprimer définitivement ce jeu ?');"> Supprimer</a>
-                </span>
+                <div>
+                    <strong><?= html_escape($jeu['name']) ?></strong> 
+                    <span style="color: #7f8c8d;"> - (<?= html_escape($jeu['releaseYear']) ?>)</span>
+                    
+                    <?php if (isset($jeu['prix'])): ?>
+                        <span class="game-price"><?= number_format($jeu['prix'] / 100, 2, ',', ' ') ?> €</span>
+                    <?php elseif (isset($jeu['price'])): ?>
+                        <span class="game-price"><?= number_format($jeu['price'] / 100, 2, ',', ' ') ?> €</span>
+                    <?php endif; ?>
+                </div>
+                <div class="actions">
+                    <a href="<?= site_url('jeux/modifier/' . $jeu['id']) ?>">✏️ Modifier</a> 
+                    <a href="<?= site_url('jeux/supprimer/' . $jeu['id']) ?>" class="delete-btn" onclick="return confirm('Es-tu sûr de vouloir supprimer définitivement ce jeu ?');">🗑️ Supprimer</a>
+                </div>
             </li>
         <?php endforeach; ?>
     </ul>
+</div>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/codeigniter-develop/application/views/search_results_view.php b/codeigniter-develop/application/views/search_results_view.php
index 991abf5..4e66a01 100644
--- a/codeigniter-develop/application/views/search_results_view.php
+++ b/codeigniter-develop/application/views/search_results_view.php
@@ -3,28 +3,53 @@
 <head>
     <meta charset="UTF-8">
     <title>Résultats de recherche pour "<?= html_escape($search_keyword) ?>"</title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 900px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        h1 { color: #2c3e50; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 20px; }
+        a { color: #3498db; text-decoration: none; }
+        a:hover { text-decoration: underline; }
+        ul { list-style: none; padding: 0; }
+        li { background: #f9f9f9; margin-bottom: 10px; padding: 15px; border-radius: 5px; border-left: 4px solid #9b59b6; transition: transform 0.2s; display: flex; justify-content: space-between; align-items: center; }
+        li:hover { transform: translateX(5px); background: #f1f1f1; }
+        li a { text-decoration: none; color: #2c3e50; }
+        li a:hover { color: #9b59b6; }
+        .price-tag { background: #9b59b6; color: white; padding: 4px 10px; border-radius: 4px; font-weight: bold; font-size: 14px; }
+        .empty-msg { padding: 15px; background: #ffeaa7; color: #d35400; border-radius: 5px; font-weight: bold; }
+        .result-count { display: inline-block; background: #ecf0f1; padding: 5px 10px; border-radius: 4px; margin-bottom: 15px; }
+    </style>
 </head>
 <body>
 
+<div class="container">
     <p><a href="<?= site_url('home') ?>">⬅ Retour à l'accueil</a></p>
 
     <h1>Résultats pour : "<?= html_escape($search_keyword) ?>"</h1>
 
     <?php if (empty($games)): ?>
-        <p>Aucun jeu vidéo ne correspond à votre recherche.</p>
+        <p class="empty-msg">Aucun jeu vidéo ne correspond à votre recherche.</p>
     <?php else: ?>
-        <p><strong><?= count($games) ?></strong> jeu(x) trouvé(s) :</p>
+        <p class="result-count"><strong><?= count($games) ?></strong> jeu(x) trouvé(s) :</p>
         <ul>
             <?php foreach ($games as $game): ?>
                 <li>
-                    <a href="<?= site_url('game/detail/' . $game['id']) ?>">
-                        <strong><?= html_escape($game['name']) ?></strong>
-                    </a>
-                    (<?= html_escape($game['releaseYear']) ?>)
+                    <div>
+                        <a href="<?= site_url('game/detail/' . $game['id']) ?>">
+                            <strong><?= html_escape($game['name']) ?></strong>
+                        </a>
+                        <span style="color: #7f8c8d;"> - (<?= html_escape($game['releaseYear']) ?>)</span>
+                    </div>
+                    
+                    <?php if (isset($game['prix'])): ?>
+                        <span class="price-tag"><?= number_format($game['prix'] / 100, 2, ',', ' ') ?> €</span>
+                    <?php elseif (isset($game['price'])): ?>
+                        <span class="price-tag"><?= number_format($game['price'] / 100, 2, ',', ' ') ?> €</span>
+                    <?php endif; ?>
                 </li>
             <?php endforeach; ?>
         </ul>
     <?php endif; ?>
+</div>
 
 </body>
-</html>
\ No newline at end of file
+</html>
