From e6f7f466d7f0567c7f857becfbd5c7d65d8f16c3 Mon Sep 17 00:00:00 2001
From: Cedric <cedric.chagnaud@gmail.com>
Date: Sat, 20 Jun 2026 20:34:09 +0200
Subject: [PATCH] Actualiser css/public.css

---
 css/public.css | 380 +++++++++++++++++++++++++------------------------
 1 file changed, 197 insertions(+), 183 deletions(-)

diff --git a/css/public.css b/css/public.css
index 0055ab7..029834a 100644
--- a/css/public.css
+++ b/css/public.css
@@ -895,225 +895,239 @@ footer {
    RESPONSIVE MOBILE
    ═══════════════════════════════════════════════════════════════ */
 
+/* ══════════════════════════════════════════════════════════════
+   RESPONSIVE MOBILE (index.html)
+   ═══════════════════════════════════════════════════════════════ */
+
 @media (max-width: 720px) {
     body { 
-        padding: 2rem 1rem; 
+        padding: 1.5rem 0.8rem; 
     }
     
+    /* En-tête */
     .site-title { 
-        font-size: 2.6rem; 
-    }
-    
-    .detail-overlay { 
-        padding: 0; 
-    }
-    
-    .detail-modal {
-        flex-direction: column;
-        gap: 1.5rem;
-        padding: 4.5rem 1.5rem 2.5rem 1.5rem;
-        max-height: 100vh;
-        height: 100vh;
-        border-radius: 0;
-        border: none;
-    }
-    
-    .detail-poster {
-        margin: 0 auto;
-        width: 170px;
-        flex: 0 0 auto;
-    }
-    
-    .detail-header-block {
-        text-align: center;
-        padding-bottom: 1.5rem;
-    }
-    
-    .detail-title { 
-        font-size: 2rem; 
-    }
-    
-    .detail-stars { 
-        justify-content: center; 
-        display: flex; 
-    }
-    
-    .pub-review-card { 
-        padding: 1.8rem 1.3rem; 
-    }
-    
-    .pub-tech-grid { 
-        grid-template-columns: 1fr; 
-        gap: 0.9rem; 
+        font-size: 2.2rem; 
+        margin-bottom: 0.4rem;
+    }
+    .site-subtitle { 
+        font-size: 0.8rem; 
+    }
+    .site-header { 
+        margin-bottom: 2rem; 
     }
     
+    /* Onglets */
     .pub-tabs { 
         width: 100%; 
         justify-content: center; 
+        padding: 0.3rem;
     }
-    
     .tab-btn { 
-        padding: 0.6rem 1.1rem; 
-        font-size: 0.85rem; 
-    }
-    
-    .pub-search-box { 
-        max-width: 100%; 
-    }
-    
-    .pub-pagination button { 
-        min-width: 36px; 
-        height: 36px; 
-        font-size: 0.85rem; 
+        padding: 0.55rem 1rem; 
+        font-size: 0.82rem; 
+        gap: 0.4rem;
+    }
+    .tab-btn i { 
+        font-size: 1rem; 
     }
     
+    /* Filtres par note : scroll horizontal */
     .rating-filter-bar { 
-        gap: 0.7rem; 
+        gap: 0.5rem; 
+        padding: 0.6rem 0;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        justify-content: flex-start;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+    }
+    .rating-filter-bar::-webkit-scrollbar { 
+        display: none; 
     }
-    
     .rf-label { 
         display: none; 
     }
-    
+    .rf-buttons { 
+        flex-wrap: nowrap; 
+        gap: 0.4rem; 
+    }
     .rf-star { 
-        font-size: 0.8rem; 
+        font-size: 0.85rem; 
     }
-    
     .rating-filter-btn { 
-        padding: 0.4rem 0.65rem; 
+        padding: 0.45rem 0.7rem; 
+        flex-shrink: 0;
     }
     
+    /* Filtre streaming : scroll horizontal aussi */
     .streaming-filter-bar {
-        gap: 0.5rem;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        justify-content: flex-start;
         padding: 0.8rem;
+        gap: 0.5rem;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+    }
+    .streaming-filter-bar::-webkit-scrollbar { 
+        display: none; 
+    }
+    .streaming-filter-btn {
+        padding: 0.45rem 0.85rem;
+        font-size: 0.78rem;
+        flex-shrink: 0;
+        white-space: nowrap;
     }
     
-    .streaming-filter-btn {
-        padding: 0.4rem 0.8rem;
-        font-size: 0.8rem;
-    }
-}
-/* ═════════════════════════════════════════════════════════════
-   BARRE DE FILTRES (Recherche + Select Streaming)
-   ══════════════════════════════════════════════════════════════ */
-
-.pub-filters {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 2.5rem;
-    flex-wrap: wrap;
-}
-
-.pub-search-box {
-    position: relative;
-    flex: 1;
-    max-width: 480px;
-}
-
-.pub-search-box input {
-    width: 100%;
-    padding: 0.85rem 1.2rem 0.85rem 3rem;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 30px;
-    color: var(--text);
-    font-family: inherit;
-    font-size: 0.95rem;
-    transition: all 0.25s;
-}
-
-.pub-search-box input:focus {
-    outline: none;
-    border-color: var(--gold);
-    box-shadow: 0 0 0 3px var(--gold-dim);
-    background: var(--surface-card);
-}
-
-.pub-search-box input::placeholder {
-    color: var(--muted);
-}
-
-.pub-search-box i {
-    position: absolute;
-    left: 1.2rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--muted);
-    font-size: 1.2rem;
-}
-
-/* Select Streaming */
-.pub-streaming-select {
-    padding: 0.85rem 2.5rem 0.85rem 1.2rem;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 30px;
-    color: var(--text);
-    font-family: inherit;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: all 0.25s;
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
-    min-width: 220px;
-}
-
-.pub-streaming-select:focus {
-    outline: none;
-    border-color: var(--gold);
-    box-shadow: 0 0 0 3px var(--gold-dim);
-}
-
-.pub-streaming-select option {
-    background: var(--surface-card);
-    color: var(--text);
-    padding: 0.5rem;
-}
-
-@media (max-width: 720px) {
+    /* Barre de recherche */
     .pub-filters {
         flex-direction: column;
-        gap: 0.8rem;
+        gap: 0.7rem;
+        margin-bottom: 1.5rem;
     }
-    .pub-search-box {
-        max-width: 100%;
+    .pub-search-box { 
+        max-width: 100%; 
     }
     .pub-streaming-select {
         width: 100%;
         max-width: 100%;
     }
+    
+    /* Grille de cartes : 2 colonnes fixes */
+    .grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.2rem 0.8rem;
+        margin-top: 0.5rem;
+    }
+    
+    /* Cartes */
+    .card-poster-wrap {
+        border-radius: 6px;
+    }
+    .card-body { 
+        padding: 0.6rem 0 0 0; 
+    }
+    .card-title { 
+        font-size: 0.82rem; 
+        margin-bottom: 0.2rem;
+    }
+    .card-director { 
+        font-size: 0.7rem; 
+    }
+    .card-meta { 
+        font-size: 0.72rem; 
+    }
+    .card-stars { 
+        font-size: 0.75rem; 
+        margin-top: 0.25rem;
+    }
+    .card-rating-badge {
+        font-size: 0.65rem;
+        padding: 0.05rem 0.3rem;
+    }
+    .card-streaming-badge,
+    .card-physical-badge {
+        font-size: 0.6rem;
+        padding: 0.2rem 0.45rem;
+        top: 6px;
+        right: 6px;
+        max-width: 100px;
+    }
+    
+    /* Pagination */
+    .pub-pagination button { 
+        min-width: 34px; 
+        height: 34px; 
+        font-size: 0.82rem; 
+        border-radius: 8px;
+    }
+    .pub-pagination-info {
+        font-size: 0.75rem;
+    }
+    
+    /* Modale de détail : plein écran */
+    .detail-overlay { 
+        padding: 0; 
+        align-items: flex-end;
+    }
+    .detail-modal {
+        flex-direction: column;
+        gap: 1.2rem;
+        padding: 3.5rem 1.2rem 1.5rem 1.2rem;
+        max-height: 95vh;
+        height: 95vh;
+        border-radius: 16px 16px 0 0;
+        border: none;
+        border-top: 1px solid var(--border);
+        transform: translateY(100%);
+    }
+    .detail-overlay.open .detail-modal {
+        transform: translateY(0);
+    }
+    .detail-modal.no-poster {
+        max-width: 100%;
+    }
+    .detail-poster {
+        margin: 0 auto;
+        width: 140px;
+        flex: 0 0 auto;
+    }
+    .detail-header-block {
+        text-align: center;
+        padding-bottom: 1rem;
+        margin-bottom: 1.2rem;
+    }
+    .detail-title { 
+        font-size: 1.6rem; 
+    }
+    .detail-meta {
+        font-size: 0.85rem;
+    }
+    .detail-stars { 
+        justify-content: center; 
+        display: flex; 
+        font-size: 1.3rem;
+    }
+    .pub-review-card { 
+        padding: 1.5rem 1rem; 
+    }
+    .pub-review-text {
+        font-size: 0.95rem;
+        line-height: 1.6;
+    }
+    .pub-tech-grid { 
+        grid-template-columns: 1fr; 
+        gap: 0.8rem; 
+    }
+    .pub-tech-grid .tech-meta-item[style*="span 2"] {
+        grid-column: span 1 !important;
+    }
+    
+    /* Footer */
+    footer {
+        margin-top: 3rem;
+        font-size: 0.7rem;
+    }
+    
+    /* Empty state */
+    .empty-state { 
+        padding: 3rem 1rem; 
+    }
+    .empty-state i { 
+        font-size: 2.5rem; 
+    }
 }
 
-/* Support des demi-étoiles sur les cartes publiques */
-.card-rating-badge {
-    display: inline-block;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    color: var(--gold);
-    font-size: 0.7rem;
-    font-weight: 600;
-    padding: 0.1rem 0.4rem;
-    border-radius: 4px;
-    margin-left: 0.4rem;
-    vertical-align: middle;
-}
-.card-stars .half-star {
-    position: relative;
-    display: inline-block;
-    color: #ffffff;
-    opacity: 0.45;
-    font-size: 0.85rem;
-}
-.card-stars .half-star::before {
-    content: '★';
-    position: absolute;
-    left: 0;
-    width: 50%;
-    overflow: hidden;
-    color: #FFD700;
-    opacity: 1;
+/* Très petits écrans */
+@media (max-width: 380px) {
+    .grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem 0.6rem;
+    }
+    .card-title { 
+        font-size: 0.75rem; 
+    }
+    .site-title { 
+        font-size: 1.9rem; 
+    }
 }
\ No newline at end of file