diff --git a/public/index.html b/public/index.html
index 7e0376a..423d83c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,8 @@
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
-  <title>Agrégateur Multi-Source</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>CineKids: Recommandations d'âge requis pour films et séries tv :-)</title>
   <style>
     body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #1a1a1a; color: #e0e0e0; margin: 0; padding: 20px; font-size: 14px; }
     .container { max-width: 1200px; margin: auto; }
@@ -35,12 +36,62 @@
       min-width:2.5em;display:inline-block;letter-spacing:0.05em;
       margin-left:10px;transition:background 0.2s;
     }
+    @media (max-width: 800px) {
+      .searchbox {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .searchbox input[type="text"] {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .searchbox button {
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+      .maxagebox {
+        margin-left: 0;
+        margin-top: 10px;
+        justify-content: center;
+      }
+      .results-table,
+      .results-table tbody,
+      .results-table tr,
+      .results-table td {
+        display: block;
+        width: 100% !important;
+      }
+      .results-table thead {
+        display: none;
+      }
+      .results-table tr {
+        margin-bottom: 20px;
+        border-bottom: 1px solid #333;
+      }
+      .results-table td {
+        border: none;
+        padding: 10px 0;
+        text-align: left;
+      }
+      .results-table td:first-child div {
+        font-size: 1.2em;
+        margin-bottom: 10px;
+      }
+      .results-table img,
+      .source-block img {
+        width: 100% !important;
+        height: auto !important;
+        display: block;
+        margin: 10px 0 !important;
+        float: none !important;
+      }
+    }
   </style>
 </head>
 <body>
   <div class="container">
-    <img src="/logo.png" alt="Logo Cine Kids" style="display:block;margin:30px auto 10px;max-width:130px;height:auto;">
-    <h1>Ciné-agrégateur Multi-Source</h1>
+    <img src="/logo.png" alt="Logo CineKids" style="display:block;margin:30px auto 10px;max-width:130px;height:auto;">
+    <h1>CinéKids - Recommandations d'âge requis pour films et séries tv</h1>
     <div class="searchbox">
       <input type="text" id="q" placeholder="Ex: Dune, Spider-Man, Oppenheimer..." />
       <button onclick="search()">Rechercher</button>
@@ -187,7 +238,6 @@
     });
   }
 
-  // Extraction de la partie rendering pour pouvoir la réutiliser
   function renderFilms(films) {
     const filmsDiv = document.getElementById('films');
     if (!films.length) {
@@ -210,7 +260,7 @@
         <td style="vertical-align:top;">
           <div style="text-align:center;">
             <div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
-            ${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
+            ${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:200px;max-height:250px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
           </div>
         </td>
         <td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
