Ajout d'une section si la recherche est sans résultat.

@@ -4,7 +4,7 @@ import SearchBar from "~/components/SearchBar.vue";
 import { onBeforeUnmount, ref } from "vue";
 import { onBeforeUnmount, ref } from "vue";
 import { useTMDB } from "~/composables/tMDB";
 import { useTMDB } from "~/composables/tMDB";
 import { Movie } from "~/models/movie";
 import { Movie } from "~/models/movie";
-import { FilmIcon } from "lucide-vue-next";
+import { FilmIcon, SearchXIcon } from "lucide-vue-next";
 import type { MovieInterface } from "~/interfaces/movie";
 import type { MovieInterface } from "~/interfaces/movie";
 import { useDateFormat } from "@vueuse/core";
 import { useDateFormat } from "@vueuse/core";
 //#endregion
 //#endregion
@@ -119,6 +119,7 @@ function handleSearchEvent(event: string) {
 
 
 function handleClearSearchEvent() {
 function handleClearSearchEvent() {
   searchQuery.value = '';
   searchQuery.value = '';
+  currentPage.value = 1;
   // Fetch popular movies after clear.
   // Fetch popular movies after clear.
   fetchMovies(1);
   fetchMovies(1);
 }
 }
@@ -127,7 +128,7 @@ function handleClearSearchEvent() {
 
 
 //#region --Global event--.
 //#region --Global event--.
 onMounted(() => {
 onMounted(() => {
-  // Chargement des premiers films.
+  // First loading.
   fetchMovies(1);
   fetchMovies(1);
   // Création et stockage dans la ref de l'instance IntersectionObserver.
   // Création et stockage dans la ref de l'instance IntersectionObserver.
   observer.value = createIntersectionObserver();
   observer.value = createIntersectionObserver();
@@ -142,7 +143,7 @@ onMounted(() => {
 });
 });
 
 
 onBeforeUnmount(() => {
 onBeforeUnmount(() => {
-  // Disconnect the observer when the component is unmounted
+  // Disconnect the observer when the component is unmounted.
   if (observer.value) {
   if (observer.value) {
     observer.value.disconnect();
     observer.value.disconnect();
   }
   }
@@ -192,6 +193,13 @@ onBeforeUnmount(() => {
       </div>
       </div>
     </div>
     </div>
 
 
+    <!-- Message si aucun film trouvé -->
+    <section v-else-if="searchQuery && !movies.length" class="text-center py-12">
+      <SearchXIcon :size="64" class="mx-auto mb-4 text-gray-600" />
+      <h3 class="text-xl font-bold mb-2">Aucun film trouvé</h3>
+      <p class="text-gray-400">Essayez avec un autre terme de recherche</p>
+    </section>
+
     <!-- Élément observé pour le défilement infini -->
     <!-- Élément observé pour le défilement infini -->
     <div ref="loadMoreTrigger" class="h-10 mt-4" />
     <div ref="loadMoreTrigger" class="h-10 mt-4" />
   </section>
   </section>