Ajout section supplémentaire si aucun commentaire existant dans le store.

 <script setup lang="ts">
 <script setup lang="ts">
 //#region --Import--.
 //#region --Import--.
 import type { MovieCommentInterface } from "~/interfaces/movieComment";
 import type { MovieCommentInterface } from "~/interfaces/movieComment";
+import { MessageSquareIcon } from "lucide-vue-next";
 //#endregion
 //#endregion
 
 
 //#region --Props--.
 //#region --Props--.
@@ -15,6 +16,7 @@ defineProps({
 </script>
 </script>
 
 
 <template>
 <template>
+  <section>
     <!-- Liste des commentaires -->
     <!-- Liste des commentaires -->
     <section v-if="comments.length > 0" class="mt-10">
     <section v-if="comments.length > 0" class="mt-10">
       <h2>Commentaires publiés</h2>
       <h2>Commentaires publiés</h2>
@@ -24,17 +26,23 @@ defineProps({
         class="bg-gray-800 rounded-lg p-6 mb-4"
         class="bg-gray-800 rounded-lg p-6 mb-4"
       >
       >
         <div class="flex justify-between items-start mb-2">
         <div class="flex justify-between items-start mb-2">
-        <div>
+          <section>
             <h4 class="font-bold text-lg">Par {{ comment.username }}</h4>
             <h4 class="font-bold text-lg">Par {{ comment.username }}</h4>
             <p class="text-sm text-gray-400">Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}</p>
             <p class="text-sm text-gray-400">Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}</p>
-        </div>
-        <div class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
+          </section>
+          <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
             {{ comment.rating }}
             {{ comment.rating }}
-        </div>
+          </section>
         </div>
         </div>
         <p class="text-gray-300">{{ comment.message }}</p>
         <p class="text-gray-300">{{ comment.message }}</p>
       </div>
       </div>
     </section>
     </section>
+    <!-- Si aucun commentaire -->
+    <section v-else class="text-center py-8 bg-gray-800 rounded-lg mt-10">
+      <MessageSquareIcon :size="48" class="mx-auto mb-3 text-gray-600" />
+      <p class="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à donner votre avis !</p>
+    </section>
+  </section>
 </template>
 </template>
 
 
 <style scoped>
 <style scoped>