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,25 +16,32 @@ defineProps({
 </script>
 </script>
 
 
 <template>
 <template>
-  <!-- Liste des commentaires -->
-  <section v-if="comments.length > 0" class="mt-10">
-    <h2>Commentaires publiés</h2>
-    <div
-      v-for="(comment, index) in comments"
-      :key="index"
-      class="bg-gray-800 rounded-lg p-6 mb-4"
-    >
-      <div class="flex justify-between items-start mb-2">
-        <div>
-          <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>
-        </div>
-        <div class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
-          {{ comment.rating }}
+  <section>
+    <!-- Liste des commentaires -->
+    <section v-if="comments.length > 0" class="mt-10">
+      <h2>Commentaires publiés</h2>
+      <div
+        v-for="(comment, index) in comments"
+        :key="index"
+        class="bg-gray-800 rounded-lg p-6 mb-4"
+      >
+        <div class="flex justify-between items-start mb-2">
+          <section>
+            <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>
+          </section>
+          <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
+            {{ comment.rating }}
+          </section>
         </div>
         </div>
+        <p class="text-gray-300">{{ comment.message }}</p>
       </div>
       </div>
-      <p class="text-gray-300">{{ comment.message }}</p>
-    </div>
+    </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>
   </section>
 </template>
 </template>