diff --git a/templates/index.html b/templates/index.html
index ed7a443..dad7230 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,11 +12,37 @@
         
         .main-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
 
+        /* Barre de filtres stylisée */
+        .filter-bar {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 35px;
+            flex-wrap: wrap;
+        }
+        .filter-btn {
+            border: 1px solid #333;
+            background: #161616;
+            color: #888;
+            padding: 8px 18px;
+            border-radius: 25px;
+            font-size: 0.75rem;
+            font-weight: 800;
+            transition: 0.3s;
+            cursor: pointer;
+            text-transform: uppercase;
+        }
+        .filter-btn.active { color: #000; border-color: transparent; }
+        .filter-btn[data-target="all"].active { background: #fff; color: #000; }
+        .filter-btn[data-target="ABC"].active { background: #00bcd4; color: #000; }
+        .filter-btn[data-target="Le Cratère"].active { background: #e62117; color: #fff; }
+        .filter-btn[data-target="American Cosmograph"].active { background: #ffc107; color: #000; }
+
+        /* Grille Responsive */
         .movie-grid {
             display: grid;
-            grid-template-columns: repeat(2, 1fr);
+            grid-template-columns: repeat(2, 1fr); /* 2 sur mobile */
             gap: 15px;
-            justify-content: center;
         }
         @media (min-width: 768px) {
             .movie-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@@ -32,11 +58,12 @@
             overflow: hidden;
             display: flex;
             flex-direction: column;
-            transition: transform 0.2s;
+            transition: transform 0.2s, border-color 0.2s;
+            height: 100%;
         }
         .movie-card:hover { transform: translateY(-5px); border-color: #ffc107; }
 
-        /* Ratio portrait 2:3 */
+        /* Ratio portrait 2:3 strict */
         .poster-box {
             position: relative;
             width: 100%;
@@ -53,56 +80,67 @@
             position: absolute;
             top: 10px; left: 10px;
             padding: 4px 10px;
-            font-size: 0.65rem;
+            font-size: 0.6rem;
             font-weight: 800;
             text-transform: uppercase;
             border-radius: 4px;
             box-shadow: 0 2px 5px rgba(0,0,0,0.7);
         }
 
-        .movie-info { padding: 15px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
+        .movie-info { padding: 12px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
         .movie-title { 
-            font-size: 0.95rem; font-weight: 700; color: #fff; 
-            margin-bottom: 12px; min-height: 2.4rem; 
+            font-size: 0.9rem; font-weight: 700; color: #fff; 
+            margin-bottom: 12px; min-height: 2.2rem; 
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
             text-transform: uppercase;
+            line-height: 1.2;
         }
 
-        .time-wrap { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: auto; }
+        .time-wrap { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: auto; }
         .time-pill { 
             background: #ffc107; color: #000; 
-            font-weight: 800; font-size: 0.85rem; 
-            padding: 3px 10px; border-radius: 4px; 
+            font-weight: 800; font-size: 0.8rem; 
+            padding: 2px 8px; border-radius: 4px; 
         }
 
         .footer-note { text-align: center; color: #444; font-size: 0.7rem; margin-top: 50px; padding-bottom: 30px; }
-        h1 { font-weight: 900; letter-spacing: -1px; text-align: center; color: #ffc107; margin-bottom: 30px; }
+        h1 { font-weight: 900; letter-spacing: -1px; text-align: center; color: #ffc107; margin-bottom: 20px; font-size: 1.5rem; }
     </style>
 </head>
 <body>
     <div class="main-container">
-        <h1><i class="fas fa-film me-3"></i>CINÉ TOULOUSE</h1>
+        <h1><i class="fas fa-film me-2"></i>CINÉ TOULOUSE</h1>
+
+        <!-- Barre de Filtres -->
+        <div class="filter-bar">
+            <div class="filter-btn active" data-target="all">TOUS</div>
+            <div class="filter-btn" data-target="ABC">ABC</div>
+            <div class="filter-btn" data-target="American Cosmograph">COSMO</div>
+            <div class="filter-btn" data-target="Le Cratère">CRATÈRE</div>
+        </div>
         
-        <div class="movie-grid">
+        <div class="movie-grid" id="movie-grid">
             {% for film in films %}
-            <div class="movie-card">
-                <div class="poster-box">
-                    {% if film.img %}
-                        <img src="{{ film.img }}" class="poster-img" loading="lazy">
-                    {% else %}
-                        <div class="poster-img d-flex align-items-center justify-content-center bg-dark text-muted small">IMAGE NON DISPONIBLE</div>
-                    {% endif %}
-                    <span class="cinema-label" style="background-color: {{ film.color }}; color: {{ '#000' if film.cinema != 'Le Cratère' else '#fff' }};">
-                        {{ film.cinema }}
-                    </span>
-                </div>
-                
-                <div class="movie-info">
-                    <div class="movie-title">{{ film.title }}</div>
-                    <div class="time-wrap">
-                        {% for t in film.times %}
-                            <span class="time-pill">{{ t }}</span>
-                        {% endfor %}
+            <div class="movie-item" data-cinema="{{ film.cinema }}">
+                <div class="movie-card">
+                    <div class="poster-box">
+                        {% if film.img %}
+                            <img src="{{ film.img }}" class="poster-img" loading="lazy">
+                        {% else %}
+                            <div class="poster-img d-flex align-items-center justify-content-center bg-dark text-muted small">IMAGE INDISPONIBLE</div>
+                        {% endif %}
+                        <span class="cinema-label" style="background-color: {{ film.color }}; color: {{ '#000' if film.cinema != 'Le Cratère' else '#fff' }};">
+                            {{ film.cinema }}
+                        </span>
+                    </div>
+                    
+                    <div class="movie-info">
+                        <div class="movie-title">{{ film.title }}</div>
+                        <div class="time-wrap">
+                            {% for t in film.times %}
+                                <span class="time-pill">{{ t }}</span>
+                            {% endfor %}
+                        </div>
                     </div>
                 </div>
             </div>
@@ -110,8 +148,29 @@
         </div>
 
         <div class="footer-note">
-            Auto-sync à 00:05 | Mise à jour : {{ updated }}
+            Auto-sync 00:05 | {{ updated }}
         </div>
     </div>
+
+    <script>
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+
+                const target = btn.getAttribute('data-target');
+                const items = document.querySelectorAll('.movie-item');
+
+                items.forEach(item => {
+                    const cinema = item.getAttribute('data-cinema');
+                    if (target === 'all' || cinema === target) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            });
+        });
+    </script>
 </body>
 </html>