From a5757903ef89692983a15166f7d48cc7784e592f Mon Sep 17 00:00:00 2001
From: mirage <119869686+ClementBobin@users.noreply.github.com>
Date: Thu, 5 Mar 2026 10:29:49 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Ajout=20du=20contr=C3=B4leur=20Titre=20?=
 =?UTF-8?q?et=20des=20vues=20associ=C3=A9es=20pour=20g=C3=A9rer=20les=20ti?=
 =?UTF-8?q?tres=20musicaux,=20y=20compris=20les=20d=C3=A9tails,=20les=20st?=
 =?UTF-8?q?yles,=20les=20likes=20et=20les=20commentaires=20#16=20#18=20#19?=
 =?UTF-8?q?=20#20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Webzine.Entity/Fixtures/DataFactory.cs        |  37 +++-
 Webzine.Entity/Style.cs                       |   1 +
 Webzine.Entity/Titre.cs                       |   3 +-
 .../ILocalEntityRepository.cs                 |  12 --
 Webzine.Repository/LocalEntityRepository.cs   |  36 +---
 .../ApiController.cs                          |   2 +-
 .../Controller/TitreController.cs             | 181 ++++++++++++++++
 Webzine.WebApplication/Program.cs             |  13 --
 .../Views/Shared/_Layout.cshtml               |  13 +-
 .../Views/Titre/Details.cshtml                | 193 ++++++++++++++++++
 .../Views/Titre/Style.cshtml                  |  50 +++++
 .../ViewsModels/Titre/TitreComment.cs         |  19 ++
 .../ViewsModels/Titre/TitreContent.cs         |  26 +++
 .../ViewsModels/Titre/TitreDetail.cs          |   7 +
 .../ViewsModels/Titre/TitreLike.cs            |   6 +
 .../ViewsModels/Titre/TitreStyle.cs           |   8 +
 .../ViewsModels/Titre/TitreStyleItem.cs       |  14 ++
 Webzine.WebApplication/wwwroot/css/app.css    |  33 +++
 18 files changed, 583 insertions(+), 71 deletions(-)
 delete mode 100644 Webzine.Repository.Contracts/ILocalEntityRepository.cs
 rename Webzine.WebApplication/{Controllers => Controller}/ApiController.cs (92%)
 create mode 100644 Webzine.WebApplication/Controller/TitreController.cs
 create mode 100644 Webzine.WebApplication/Views/Titre/Details.cshtml
 create mode 100644 Webzine.WebApplication/Views/Titre/Style.cshtml
 create mode 100644 Webzine.WebApplication/ViewsModels/Titre/TitreComment.cs
 create mode 100644 Webzine.WebApplication/ViewsModels/Titre/TitreContent.cs
 create mode 100644 Webzine.WebApplication/ViewsModels/Titre/TitreDetail.cs
 create mode 100644 Webzine.WebApplication/ViewsModels/Titre/TitreLike.cs
 create mode 100644 Webzine.WebApplication/ViewsModels/Titre/TitreStyle.cs
 create mode 100644 Webzine.WebApplication/ViewsModels/Titre/TitreStyleItem.cs

diff --git a/Webzine.Entity/Fixtures/DataFactory.cs b/Webzine.Entity/Fixtures/DataFactory.cs
index f30274d..2d520c0 100644
--- a/Webzine.Entity/Fixtures/DataFactory.cs
+++ b/Webzine.Entity/Fixtures/DataFactory.cs
@@ -59,7 +59,20 @@ public class DataFactory
 
     public List<Artiste> GenerateArtists(int count)
     {
+        var artists = new List<Artiste>();
 
+        for (int i = 0; i < count; i++)
+        {
+            artists.Add(new Artiste
+            {
+                IdArtiste = i + 1,
+                Nom = Name.FullName(),
+                Biographie = Lorem.Paragraph(),
+                Titres = new List<Titre>()
+            });
+        }
+
+        return artists;
     }
 
     /// <summary>
@@ -90,7 +103,7 @@ public class DataFactory
     /// <param name="count">Nombre de titres à générer</param>
     /// <param name="artists">Liste des artistes à associer aux titres générés</param>
     /// <returns>Liste de titres de musique générés</returns>
-    public List<Titre> GenerateTitres(int count, List<Artiste> artists)
+    public List<Titre> GenerateTitres(int count, List<Artiste> artists, List<Style> styles)
     {
         var titres = new List<Titre>();
         var random = new Random();
@@ -101,12 +114,15 @@ public class DataFactory
             var randomMusic = musicItems[random.Next(musicItems.Count)];
             var randomArtist = artists[random.Next(artists.Count)];
 
-            titres.Add(new Titre
+            int numberOfStyles = random.Next(1, 4);
+            var selectedStyles = styles.OrderBy(x => random.Next()).Take(numberOfStyles).ToList();
+
+            var titre = new Titre
             {
                 IdTitre = i + 1,
                 IdArtiste = randomArtist.IdArtiste,
                 Artiste = randomArtist,
-                Libelle = Lorem.Words(3).ToString(),
+                Libelle = string.Join(" ", Lorem.Words(3)),
                 Chronique = Lorem.Paragraph(),
                 DateCreation = DateTime.Now.AddDays(-random.Next(1, 365)),
                 Duree = random.Next(120, 360), // 2 à 6 minutes en secondes
@@ -116,9 +132,20 @@ public class DataFactory
                 NbLectures = random.Next(1000, 1000000),
                 NbLikes = random.Next(100, 100000), // Likes entre 100 et 100 000
                 Album = $"Album {random.Next(1, 10)}",
-                Commentaires = new List<Commentaire>()
-            });
+                Commentaires = new List<Commentaire>(),
+                Styles = new List<Style>(),
+            };
 
+            foreach (var style in selectedStyles)
+            {
+                titre.Styles.Add(style);
+                if (!style.Titres.Contains(titre))
+                {
+                    style.Titres.Add(titre);
+                }
+            }
+
+            titres.Add(titre);
             randomArtist.Titres.Add(titres.Last());
         }
 
diff --git a/Webzine.Entity/Style.cs b/Webzine.Entity/Style.cs
index 11c6f32..ed1cd12 100644
--- a/Webzine.Entity/Style.cs
+++ b/Webzine.Entity/Style.cs
@@ -18,5 +18,6 @@ namespace Webzine.Entity
         [Display(Name = "Libellé")]
         public string Libelle { get; set; }
 
+        public List<Titre> Titres { get; set; } = new List<Titre>();
     }
 }
diff --git a/Webzine.Entity/Titre.cs b/Webzine.Entity/Titre.cs
index 2fd9671..6775064 100644
--- a/Webzine.Entity/Titre.cs
+++ b/Webzine.Entity/Titre.cs
@@ -63,5 +63,6 @@ namespace Webzine.Entity
 
         public List<Commentaire> Commentaires { get; set; }
 
+        public List<Style> Styles { get; set; } = new List<Style>();
     }
-    }
+}
diff --git a/Webzine.Repository.Contracts/ILocalEntityRepository.cs b/Webzine.Repository.Contracts/ILocalEntityRepository.cs
deleted file mode 100644
index bce9ad4..0000000
--- a/Webzine.Repository.Contracts/ILocalEntityRepository.cs
+++ /dev/null
@@ -1,12 +0,0 @@
-using Webzine.Entity;
-
-namespace Webzine.Repository.Contracts;
-
-public interface ILocalEntityRepository
-{
-    List<Artiste> Artistes { get; set; }
-    List<Style> Styles { get; set; }
-    List<Titre> Titres { get; set; }
-    List<Commentaire> Commentaires { get; set; }
-    void Seed();
-}
\ No newline at end of file
diff --git a/Webzine.Repository/LocalEntityRepository.cs b/Webzine.Repository/LocalEntityRepository.cs
index ae83014..ff19b56 100644
--- a/Webzine.Repository/LocalEntityRepository.cs
+++ b/Webzine.Repository/LocalEntityRepository.cs
@@ -1,12 +1,8 @@
-using Webzine.Repository.Contracts;
-using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.Logging;
 
 namespace Webzine.Repository;
 
-using Entity;
-using Entity.Fixtures;
-
-public class LocalEntityRepository : ILocalEntityRepository
+public class LocalEntityRepository
 {
     private readonly ILogger<LocalEntityRepository> _logger;
     public LocalEntityRepository(ILogger<LocalEntityRepository> logger)
@@ -14,32 +10,4 @@ public class LocalEntityRepository : ILocalEntityRepository
         this._logger = logger;
         this._logger.LogDebug(1, "NLog injected into LocalEntityRepository");
     }
-
-    public List<Artiste> Artistes { get; set; }
-    public List<Style> Styles { get; set; }
-    public List<Titre> Titres { get; set; }
-    public List<Commentaire> Commentaires { get; set; }
-
-    /// <summary>
-    /// Permet de remplir les listes d'entités avec des données de test.
-    /// </summary>
-    public void Seed()
-    {
-        this._logger.LogInformation("Seed was called");
-        try
-        {
-            var seedData = new DataFactory();
-
-            Artistes = seedData.GenerateArtists(10);
-            Styles = seedData.GenerateStyles(8);
-            Titres = seedData.GenerateTitres(seedData.RealMusicData.Count, Artistes);
-            Commentaires = seedData.GenerateCommentaires(30, Titres);
-            this._logger.LogInformation("Seed was completed");
-        }
-        catch (Exception e)
-        {
-            this._logger.LogError(e, "An error occurred while seeding the data");
-            throw;
-        }
-    }
 }
\ No newline at end of file
diff --git a/Webzine.WebApplication/Controllers/ApiController.cs b/Webzine.WebApplication/Controller/ApiController.cs
similarity index 92%
rename from Webzine.WebApplication/Controllers/ApiController.cs
rename to Webzine.WebApplication/Controller/ApiController.cs
index 2c2c79e..e70ae06 100644
--- a/Webzine.WebApplication/Controllers/ApiController.cs
+++ b/Webzine.WebApplication/Controller/ApiController.cs
@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 
-namespace Webzine.WebApplication.Controllers;
+namespace Webzine.WebApplication.Controller;
 
 public class ApiController : ControllerBase
 {
diff --git a/Webzine.WebApplication/Controller/TitreController.cs b/Webzine.WebApplication/Controller/TitreController.cs
new file mode 100644
index 0000000..42693d4
--- /dev/null
+++ b/Webzine.WebApplication/Controller/TitreController.cs
@@ -0,0 +1,181 @@
+using Microsoft.AspNetCore.Mvc;
+using Webzine.Entity;
+using Webzine.Entity.Fixtures;
+using Webzine.WebApplication.ViewsModels.Titre;
+
+namespace Webzine.WebApplication.Controller;
+
+/// <summary>
+/// Contrôleur responsable de la gestion des titres musicaux :
+/// affichage des détails, filtrage par style,
+/// ajout de likes et commentaires.
+/// </summary>
+[Route("titre")]
+public class TitreController : Microsoft.AspNetCore.Mvc.Controller
+{
+    private readonly ILogger<TitreController> _logger;
+    private readonly List<Titre> _titres;
+    private readonly List<Style> _styles;
+    private readonly List<Artiste> _artistes;
+
+    /// <summary>
+    /// Initialise une nouvelle instance du <see cref="TitreController"/>.
+    /// Les données sont générées dynamiquement via <see cref="DataFactory"/>.
+    /// </summary>
+    /// <param name="logger">Service de journalisation injecté.</param>
+    public TitreController(ILogger<TitreController> logger)
+    {
+        _logger = logger;
+
+        _logger.LogInformation("Initialisation du contrôleur TitreController.");
+
+        var factory = new DataFactory();
+
+        _artistes = factory.GenerateArtists(10);
+        _styles = factory.GenerateStyles(10);
+        _titres = factory.GenerateTitres(30, _artistes, _styles);
+
+        factory.GenerateCommentaires(50, _titres);
+
+        _logger.LogInformation("Données fictives générées avec succès.");
+    }
+
+    /// <summary>
+    /// Affiche le détail d'un titre spécifique.
+    /// </summary>
+    /// <param name="id">Identifiant du titre.</param>
+    /// <returns>Vue des détails ou 404 si introuvable.</returns>
+    [HttpGet("{id}")]
+    public IActionResult Details(int id)
+    {
+        _logger.LogInformation("Demande d'affichage du détail pour le titre ID {Id}.", id);
+
+        var titre = _titres.FirstOrDefault(t => t.IdTitre == id);
+
+        if (titre == null)
+        {
+            _logger.LogWarning("Titre avec ID {Id} introuvable.", id);
+            return NotFound();
+        }
+
+        var vm = new TitreDetail
+        {
+            Details = new TitreContent
+            {
+                IdTitre = titre.IdTitre,
+                Libelle = titre.Libelle,
+                Chronique = titre.Chronique,
+                DateSortie = titre.DateSortie,
+                NbLikes = titre.NbLikes,
+                UrlJaquette = titre.UrlJaquette,
+                UrlEcoute = titre.UrlEcoute,
+                ArtisteNom = titre.Artiste?.Nom,
+                Styles = titre.Styles,
+                Commentaires = titre.Commentaires
+            },
+            CommentForm = new TitreComment
+            {
+                IdTitre = titre.IdTitre
+            }
+        };
+
+        return View(vm);
+    }
+
+    /// <summary>
+    /// Affiche les titres correspondant à un style musical donné.
+    /// </summary>
+    /// <param name="style">Nom du style musical.</param>
+    /// <returns>Vue contenant la liste filtrée.</returns>
+    [HttpGet("style/{style}")]
+    public IActionResult Style(string style)
+    {
+        _logger.LogInformation("Recherche des titres pour le style : {Style}.", style);
+
+        var titresFiltres = _titres
+            .Where(t => t.Styles.Any(s => s.Libelle.Equals(style)))
+            .OrderBy(t => t.Libelle)
+            .ToList();
+
+        if (!titresFiltres.Any())
+        {
+            _logger.LogWarning("Aucun titre trouvé pour le style : {Style}.", style);
+            return NotFound();
+        }
+
+        var vm = new TitreStyle
+        {
+            StyleName = style,
+            Titres = titresFiltres.Select(t => new TitreStyleItem
+            {
+                IdTitre = t.IdTitre,
+                Libelle = t.Libelle,
+                ArtisteNom = t.Artiste?.Nom,
+                UrlJaquette = t.UrlJaquette,
+                Duree = t.Duree
+            }).ToList()
+        };
+
+        return View(vm);
+    }
+
+    /// <summary>
+    /// Ajoute un like à un titre.
+    /// </summary>
+    /// <param name="model">Modèle contenant l'identifiant du titre.</param>
+    /// <returns>Redirection vers la page détail.</returns>
+    [HttpPost("like")]
+    public IActionResult Like(TitreLike model)
+    {
+        _logger.LogInformation("Ajout d'un like pour le titre ID {Id}.", model.IdTitre);
+
+        var titre = _titres.FirstOrDefault(t => t.IdTitre == model.IdTitre);
+
+        if (titre == null)
+        {
+            _logger.LogWarning("Impossible d'ajouter un like. Titre ID {Id} introuvable.", model.IdTitre);
+            return NotFound();
+        }
+
+        titre.NbLikes++;
+
+        return RedirectToAction("Details", new { id = model.IdTitre });
+    }
+
+    /// <summary>
+    /// Ajoute un commentaire à un titre.
+    /// </summary>
+    /// <param name="model">Données du commentaire.</param>
+    /// <returns>Redirection vers la page détail.</returns>
+    [HttpPost("comment")]
+    public IActionResult Comment(TitreComment model)
+    {
+        if (!ModelState.IsValid)
+        {
+            _logger.LogWarning("Échec de validation du modèle de commentaire pour le titre ID {Id}.", model.IdTitre);
+            return RedirectToAction("Details", new { id = model.IdTitre });
+        }
+
+        var titre = _titres.FirstOrDefault(t => t.IdTitre == model.IdTitre);
+
+        if (titre == null)
+        {
+            _logger.LogWarning("Impossible d'ajouter le commentaire. Titre ID {Id} introuvable.", model.IdTitre);
+            return NotFound();
+        }
+
+        var commentaire = new Commentaire
+        {
+            Auteur = model.Auteur,
+            Contenu = model.Contenu,
+            DateCreation = DateTime.Now,
+            IdTitre = model.IdTitre
+        };
+
+        titre.Commentaires.Add(commentaire);
+
+        _logger.LogInformation("Commentaire ajouté avec succès au titre ID {Id}.", model.IdTitre);
+
+        return RedirectToAction("Details", new { id = model.IdTitre });
+    }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/Program.cs b/Webzine.WebApplication/Program.cs
index 9db9a43..4d6a9bb 100644
--- a/Webzine.WebApplication/Program.cs
+++ b/Webzine.WebApplication/Program.cs
@@ -1,7 +1,5 @@
 using NLog;
 using NLog.Web;
-using Webzine.Repository;
-using Webzine.Repository.Contracts;
 
 // Initiation du logger NLog pour la classe courante afin de pouvoir l'utiliser pour logger des messages d'information, d'erreur, etc avant la construction de l'application.
 var logger = LogManager.Setup().LoadConfigurationFromAppSettings().GetCurrentClassLogger();
@@ -23,9 +21,6 @@ try
     builder.Logging.ClearProviders();
     builder.Host.UseNLog();
 
-    // Register LocalEntityRepository as a singleton
-    builder.Services.AddSingleton<ILocalEntityRepository, LocalEntityRepository>();
-
     var app = builder.Build();
 
     // Active la possibilité de servir des fichiers statiques présents dans
@@ -41,14 +36,6 @@ try
         name: "default",
         pattern: "{controller=Home}/{action=Index}/{id?}");
 
-
-    // Permet de remplir les listes d'entités du repository avec des donn�es de test.
-    using (var scope = app.Services.CreateScope())
-    {
-        var repository = scope.ServiceProvider.GetRequiredService<ILocalEntityRepository>();
-        repository.Seed();
-    }
-
     app.Run();
 }
 catch (Exception exception)
diff --git a/Webzine.WebApplication/Views/Shared/_Layout.cshtml b/Webzine.WebApplication/Views/Shared/_Layout.cshtml
index f4aab45..e102cfe 100644
--- a/Webzine.WebApplication/Views/Shared/_Layout.cshtml
+++ b/Webzine.WebApplication/Views/Shared/_Layout.cshtml
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 
 <html lang="fr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>@ViewData["Title"] - Mon Application</title>
-    </head>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>@ViewData["Title"] - Mon Application</title>
+    <link href="/css/app.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+</head>
 <body>
 <main>
     @RenderBody()
diff --git a/Webzine.WebApplication/Views/Titre/Details.cshtml b/Webzine.WebApplication/Views/Titre/Details.cshtml
new file mode 100644
index 0000000..287f820
--- /dev/null
+++ b/Webzine.WebApplication/Views/Titre/Details.cshtml
@@ -0,0 +1,193 @@
+@model Webzine.WebApplication.ViewsModels.Titre.TitreDetail
+
+@{
+    ViewData["Title"] = Model.Details.Libelle;
+}
+
+<div class="container mt-4">
+
+    <div class="mb-3">
+        <h2>
+            <a asp-area="" asp-controller="" asp-action="" asp-route-style="@Model.Details.ArtisteNom">@Model.Details.ArtisteNom</a>
+            - @Model.Details.Libelle
+        </h2>
+
+        <div class="d-flex justify-content-between align-items-center pb-2 mb-3">
+
+            <div class="text-muted small d-flex align-items-center gap-4">
+
+                <!-- Date -->
+                <span class="text-dark">
+                    <i class="fa fa-calendar me-1"></i>
+                    Le @Model.Details.DateSortie.ToString("dd/MM/yyyy 'à' HH:mm")
+                </span>
+
+                <!-- Likes -->
+                <span>
+                    <i class="fa fa-heart text-dark me-1"></i>
+                    @Model.Details.NbLikes
+                </span>
+
+                <!-- Styles -->
+                <span class="text-dark">
+                    <i class="fa fa-tags me-1"></i>
+                    Styles :
+
+                    @for (int i = 0; i < Model.Details.Styles.Count; i++)
+                    {
+                        var style = Model.Details.Styles[i];
+
+                        <a class="text-primary text-decoration-none fw-semibold"
+                           asp-controller="Titre"
+                           asp-action="Style"
+                           asp-route-style="@style.Libelle">
+                            @style.Libelle
+                        </a>
+
+                        @if (i < Model.Details.Styles.Count - 1)
+                        {
+                            <span>, </span>
+                        }
+                    }
+                </span>
+
+            </div>
+
+            <!-- ACTION BUTTONS -->
+            <div class="d-flex gap-2">
+
+                <form asp-action="Like" method="post">
+                    <input type="hidden" name="IdTitre" value="@Model.Details.IdTitre" />
+                    <button type="submit" class="btn btn-outline-primary btn-sm">
+                        <i class="fa fa-thumbs-up me-1"></i> Like
+                    </button>
+                </form>
+
+                <a class="btn text-primary btn-sm">
+                    <i class="fa fa-pen-to-square me-1"></i> Editer
+                </a>
+
+            </div>
+
+        </div>
+    </div>
+
+    <!-- CONTENU -->
+    <div class="row mt-4">
+        <div class="col-md-8">
+            <p class="text-justify">
+                @Model.Details.Chronique
+            </p>
+        </div>
+
+        <div class="col-md-4 text-center">
+            <img src="@Model.Details.UrlJaquette"
+                 class="img-fluid rounded shadow"
+                 alt="Jaquette" />
+        </div>
+    </div>
+
+    <!-- LECTEUR -->
+    @if (!string.IsNullOrEmpty(Model.Details.UrlEcoute))
+    {
+        <div class="mt-4">
+            <iframe width="100%" height="315"
+                    src="@Model.Details.UrlEcoute"
+                    title="Lecteur"
+                    allowfullscreen>
+            </iframe>
+        </div>
+    }
+
+    <!-- FORMULAIRE COMMENTAIRE -->
+    <div class="mt-4 mb-4">
+        <div>
+
+            <h4 class="mb-4">Donne ton avis sur le titre</h4>
+
+            <form asp-action="Comment" method="post">
+                <input type="hidden" name="IdTitre" value="@Model.Details.IdTitre"/>
+
+                <div class="row mb-3 align-items-center">
+                    <label class="col-sm-2 col-form-label">
+                        Nom<span class="text-danger">*</span>
+                    </label>
+                    <div class="col">
+                        <input name="Auteur"
+                               class="form-control input-full"
+                               placeholder="Votre nom"
+                               required />
+                    </div>
+                </div>
+
+                <div class="row mb-3 align-items-start">
+                    <label class="col-sm-2 col-form-label">
+                        Commentaire<span class="text-danger">*</span>
+                    </label>
+                    <div class="col">
+                        <textarea name="Contenu"
+                      rows="3"
+                      class="form-control input-full"
+                      placeholder="Votre commentaire..."
+                      required></textarea>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-sm-6 offset-sm-2">
+                        <button type="submit" class="btn btn-primary">
+                            Envoyer
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+        </div>
+    </div>
+
+
+    <!-- COMMENTAIRES -->
+    <div class="mt-4">
+
+        <h4 class="mb-4">Commentaires</h4>
+
+        @if (Model.Details.Commentaires.Any())
+        {
+            foreach (var comment in Model.Details.Commentaires.OrderByDescending(c => c.DateCreation))
+            {
+                <div class="row mb-4">
+
+                    <div class="col-sm-1"></div>
+
+                    <div class="col-sm-6 d-flex">
+                        <img src="/images/avatar.png"
+                             width="50"
+                             height="50"
+                             class="rounded-circle me-3 shadow-sm"
+                             alt="avatar" />
+
+                        <div>
+                            <strong>@comment.Auteur</strong>,
+                            <span class="text-muted small">
+                                le @comment.DateCreation.ToString("dd/MM/yyyy HH:mm")
+                            </span>
+
+                            <p class="mb-0">@comment.Contenu</p>
+                        </div>
+                    </div>
+
+                </div>
+            }
+        }
+        else
+        {
+            <div class="row">
+                <div class="col-sm-6 offset-sm-2">
+                    <p class="text-muted">Aucun commentaire pour le moment.</p>
+                </div>
+            </div>
+        }
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/Webzine.WebApplication/Views/Titre/Style.cshtml b/Webzine.WebApplication/Views/Titre/Style.cshtml
new file mode 100644
index 0000000..cd85fd9
--- /dev/null
+++ b/Webzine.WebApplication/Views/Titre/Style.cshtml
@@ -0,0 +1,50 @@
+@model Webzine.WebApplication.ViewsModels.Titre.TitreStyle
+
+@{
+    ViewData["Title"] = $"Titres - {Model.StyleName}";
+    Layout = "_Layout";
+}
+<div class="container mt-4">
+    <div class="row">
+
+        <!-- COLUMN -->
+        <div class="col-md-8">
+
+            <h1 class="mb-4 titre-h1">Titres ayant le style @Model.StyleName</h1>
+
+            @if (!Model.Titres.Any())
+            {
+                <div class="alert alert-info">
+                    Aucun titre trouvé.
+                </div>
+            }
+            else
+            {
+                @foreach (var titre in Model.Titres)
+                {
+                    <div class="titre-item d-flex align-items-start">
+
+                        <!-- Image -->
+                        <div class="me-3">
+                            <img src="@titre.UrlJaquette" alt="@titre.Libelle" />
+                        </div>
+
+                        <!-- Infos -->
+                        <div>
+                            <a asp-action="Details"
+                               asp-route-id="@titre.IdTitre"
+                               class="titre-link">
+                                @titre.ArtisteNom - @titre.Libelle
+                            </a>
+
+                            <div class="titre-duree">
+                                Durée : @TimeSpan.FromSeconds(titre.Duree).ToString(@"mm\:ss")
+                            </div>
+                        </div>
+
+                    </div>
+                }
+            }
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreComment.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreComment.cs
new file mode 100644
index 0000000..2301088
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreComment.cs
@@ -0,0 +1,19 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreComment
+{
+    [Required]
+    public int IdTitre { get; set; }
+
+    [Required]
+    [MinLength(2)]
+    [MaxLength(30)]
+    public string Auteur { get; set; }
+
+    [Required]
+    [MinLength(10)]
+    [MaxLength(1000)]
+    public string Contenu { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreContent.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreContent.cs
new file mode 100644
index 0000000..fd671c9
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreContent.cs
@@ -0,0 +1,26 @@
+using Webzine.Entity;
+
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreContent
+{
+    public int IdTitre { get; set; }
+
+    public string Libelle { get; set; }
+
+    public string Chronique { get; set; }
+
+    public DateTime DateSortie { get; set; }
+
+    public int NbLikes { get; set; }
+
+    public string UrlJaquette { get; set; }
+
+    public string UrlEcoute { get; set; }
+
+    public string ArtisteNom { get; set; }
+
+    public List<Style> Styles { get; set; } = new();
+
+    public List<Commentaire> Commentaires { get; set; } = new();
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreDetail.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreDetail.cs
new file mode 100644
index 0000000..82f076b
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreDetail.cs
@@ -0,0 +1,7 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreDetail
+{
+    public TitreContent Details { get; set; }
+    public TitreComment CommentForm { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreLike.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreLike.cs
new file mode 100644
index 0000000..b126e20
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreLike.cs
@@ -0,0 +1,6 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreLike
+{
+    public int IdTitre { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreStyle.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreStyle.cs
new file mode 100644
index 0000000..72d2410
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreStyle.cs
@@ -0,0 +1,8 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreStyle
+{
+    public string? StyleName { get; set; }
+
+    public List<TitreStyleItem> Titres { get; set; } = new();
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/ViewsModels/Titre/TitreStyleItem.cs b/Webzine.WebApplication/ViewsModels/Titre/TitreStyleItem.cs
new file mode 100644
index 0000000..647f61f
--- /dev/null
+++ b/Webzine.WebApplication/ViewsModels/Titre/TitreStyleItem.cs
@@ -0,0 +1,14 @@
+namespace Webzine.WebApplication.ViewsModels.Titre;
+
+public class TitreStyleItem
+{
+    public int IdTitre { get; set; }
+
+    public string? Libelle { get; set; }
+
+    public string? ArtisteNom { get; set; }
+
+    public string? UrlJaquette { get; set; }
+
+    public int Duree { get; set; }
+}
\ No newline at end of file
diff --git a/Webzine.WebApplication/wwwroot/css/app.css b/Webzine.WebApplication/wwwroot/css/app.css
index e69de29..60027f0 100644
--- a/Webzine.WebApplication/wwwroot/css/app.css
+++ b/Webzine.WebApplication/wwwroot/css/app.css
@@ -0,0 +1,33 @@
+a {
+    text-decoration: none !important;
+}
+
+.titre-h1 {
+    padding: 15px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.titre-item {
+    padding: 8px 0;
+}
+
+.titre-item img {
+    width: 70px;
+    height: 70px;
+    object-fit: cover;
+}
+
+.titre-link {
+    font-size: 1.1rem;
+    color: #0d6efd;
+    text-decoration: none;
+}
+
+.titre-link:hover {
+    text-decoration: underline;
+}
+
+.titre-duree {
+    font-size: 0.9rem;
+    color: #666;
+}
\ No newline at end of file