From 20ac3d994f019ea1e504b6cfd301fa2e757317ae Mon Sep 17 00:00:00 2001
From: Loic Masi <loic.masi@diiage.org>
Date: Tue, 24 Mar 2026 14:31:55 +0100
Subject: [PATCH] Correction de la page d'accueil

---
 .../Views/Accueil/Index.cshtml                | 52 +++++++++++++------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/Webzine.WebApplication/Views/Accueil/Index.cshtml b/Webzine.WebApplication/Views/Accueil/Index.cshtml
index 8c5c381..23290ad 100644
--- a/Webzine.WebApplication/Views/Accueil/Index.cshtml
+++ b/Webzine.WebApplication/Views/Accueil/Index.cshtml
@@ -8,15 +8,19 @@
 <div class="container">
     @foreach (var titre in Model.DerniersTitres)
     {
-        <div class="container bg-light row p-3 mt-3">
-            <div class="col-auto">
-                <img class="img-thumbnail img-fluid"
-                     style="max-width:200px;" @* TODO à virer pour que ça soit responsive *@
-                     @* UrlJaquette *@
-                     src="@titre.UrlJaquette" />
+        <div class="row bg-light p-3 mt-3 align-items-center">
+
+            <!-- Image -->
+            <div class="col-12 col-md-3 text-center mb-3 mb-md-0">
+                <img class="img-fluid img-thumbnail"
+                     src="@titre.UrlJaquette"
+                     alt="@titre.Libelle" />
             </div>
-            <div class="col">
-                @* Artiste - Titre @titre.Artiste - @titre.Libelle*@
+
+            <!-- Contenu -->
+            <div class="col-12 col-md-9">
+
+                <!-- Artiste - Titre -->
                 <div class="fw-light h4 text-primary">
                     <a asp-action="Index"
                        asp-controller="Artiste"
@@ -30,30 +34,44 @@
                         @titre.Libelle
                     </a>
                 </div>
-                @* Chronique *@
-                <p class="mt-2 mb-3 text-muted ">
+
+                <!-- Chronique -->
+                <p class="mt-2 mb-3 text-muted">
                     @titre.Chronique
                 </p>
+
+                <!-- Footer -->
                 <div class="d-flex flex-wrap align-items-center gap-3">
-                    <a asp-action="Details" asp-controller="Titre" asp-route-id="@titre.IdTitre" class="btn btn-primary btn-sm">Lire la suite</a>
+                    <a asp-action="Details"
+                       asp-controller="Titre"
+                       asp-route-id="@titre.IdTitre"
+                       class="btn btn-primary btn-sm">
+                        Lire la suite
+                    </a>
 
                     <div class="d-flex align-items-center text-muted small">
-                        <i class="fa-solid fa-calendar me-1"> </i>
-                        @* Date de création  *@
+                        <i class="fa-solid fa-calendar me-1"></i>
                         @titre.DateCreation
                     </div>
 
                     <div class="d-flex align-items-center text-muted small">
-                        <i class="fa-solid fa-tags"></i>
-                        @* Style *@
-                        <a asp-controller="Titre" asp-action="Style" asp-route-id="Pop" class="text-decoration-none m-1">Pop</a>
+                        <i class="fa-solid fa-tags me-1"></i>
+                        <a asp-controller="Titre"
+                           asp-action="Style"
+                           asp-route-id="Pop"
+                           class="text-decoration-none">
+                            Pop
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
     }
+    <!-- Bouton -->
     <div class="row justify-content-end">
-        <button class="btn btn-secondary col-auto mt-3">Titres plus anciens >></button>
+        <button class="btn btn-secondary col-auto mt-3">
+            Titres plus anciens >>
+        </button>
     </div>
 </div>