From 5b014dcfa4249d4fd37d1139a1f046b974d6b7f5 Mon Sep 17 00:00:00 2001
From: Cedric <cedric.chagnaud@gmail.com>
Date: Sat, 20 Jun 2026 20:53:50 +0200
Subject: [PATCH] Actualiser css/admin.css

---
 css/admin.css | 310 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 209 insertions(+), 101 deletions(-)

diff --git a/css/admin.css b/css/admin.css
index bda2629..cd0e194 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -113,138 +113,246 @@
 
 /* Tableau */
 .table-container {
-  background: var(--surface-card);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: var(--shadow-cinematic);
+    background: var(--surface-card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: var(--shadow-cinematic);
 }
 
 .admin-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.95rem;
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.95rem;
 }
 
-.admin-table th {
-  background: var(--surface);
-  color: var(--muted);
-  font-weight: 500;
-  padding: 1.2rem 1rem;
-  border-bottom: 1px solid var(--border);
-  text-align: left;
+.admin-table thead th {
+    background: var(--surface);
+    color: var(--muted);
+    font-weight: 500;
+    padding: 1rem 0.8rem;
+    border-bottom: 1px solid var(--border);
+    text-align: left;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
 }
 
-.admin-table td {
-  padding: 0.8rem 1rem;
-  border-bottom: 1px solid var(--border);
-  vertical-align: middle;
-  color: var(--text-secondary);
+.admin-table thead th:first-child,
+.admin-table tbody td:first-child {
+    width: 40px;
+    text-align: center;
+}
+
+.admin-table thead th:nth-child(2),
+.admin-table tbody td:nth-child(2) {
+    width: 70px;
+    text-align: center;
+}
+
+.admin-table thead th:last-child,
+.admin-table tbody td:last-child {
+    width: 100px;
+    text-align: right;
+}
+
+.admin-table tbody td {
+    padding: 0.8rem;
+    border-bottom: 1px solid var(--border);
+    vertical-align: middle;
+    color: var(--text-secondary);
 }
 
 .admin-table tbody tr {
-  transition: background 0.2s;
+    transition: background 0.2s;
 }
 
 .admin-table tbody tr:hover {
-  background: var(--surface-hover);
+    background: var(--surface-hover);
 }
 
 .admin-table tbody tr:last-child td {
-  border-bottom: none;
+    border-bottom: none;
 }
 
-.admin-table strong {
-  color: var(--text);
-  font-weight: 600;
-  font-size: 1.05rem;
+.admin-table tbody td strong {
+    color: var(--text);
+    font-weight: 600;
+    font-size: 1rem;
 }
 
-/* Éléments du tableau */
+/* Affiches */
 .thumb {
-  width: 45px;
-  height: 65px;
-  object-fit: cover;
-  border-radius: 4px;
-  border: 1px solid var(--border);
-  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
+    width: 50px;
+    height: 70px;
+    object-fit: cover;
+    border-radius: 4px;
+    border: 1px solid var(--border);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
+    display: block;
+    margin: 0 auto;
 }
 
 .thumb-ph {
-  width: 45px;
-  height: 65px;
-  background: var(--surface);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--muted);
-  border: 1px solid var(--border);
+    width: 50px;
+    height: 70px;
+    background: var(--surface);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+    border: 1px solid var(--border);
+    margin: 0 auto;
 }
 
+/* Badges */
 .badge-format {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  padding: 0.3rem 0.8rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
-  color: var(--gold);
-  display: inline-block;
-  font-weight: 500;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    color: var(--gold);
+    display: inline-block;
+    font-weight: 500;
 }
 
 .tbl-stars {
-  color: var(--gold);
-  letter-spacing: 2px;
-  font-size: 0.95rem;
+    color: var(--gold);
+    letter-spacing: 2px;
+    font-size: 0.95rem;
+}
+
+.info-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-start;
+}
+
+.rating-badge {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--gold);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.streaming-badge {
+    font-size: 0.75rem;
+    color: var(--gold);
+    background: var(--gold-dim);
+    padding: 0.25rem 0.7rem;
+    border-radius: 20px;
+    display: inline-block;
+    width: fit-content;
+    border: 1px solid rgba(212, 175, 55, 0.2);
+    font-weight: 500;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.physical-badge {
+    font-size: 0.75rem;
+    color: var(--muted);
+    background: var(--surface);
+    padding: 0.25rem 0.7rem;
+    border-radius: 20px;
+    display: inline-block;
+    width: fit-content;
+    border: 1px solid var(--border);
+}
+
+/* Actions */
+.tbl-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.3rem;
 }
 
 .tbl-actions button {
-  background: transparent;
-  border: none;
-  color: var(--muted);
-  cursor: pointer;
-  padding: 0.5rem;
-  font-size: 1.2rem;
-  transition: all 0.2s;
-  border-radius: 6px;
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    cursor: pointer;
+    padding: 0.5rem;
+    font-size: 1.2rem;
+    transition: all 0.2s;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .tbl-actions button:hover {
-  color: var(--gold);
-  background: var(--surface);
+    color: var(--gold);
+    background: var(--surface);
 }
 
 .tbl-actions button.del:hover {
-  color: #ff4757;
+    color: #ff4757;
 }
 
-/* Checkbox personnalisées */
+/* Checkbox */
 input[type="checkbox"] {
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--muted);
-  border-radius: 6px;
-  background: var(--surface);
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--muted);
+    border-radius: 6px;
+    background: var(--surface);
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s;
+    display: inline-block;
+    vertical-align: middle;
 }
 
 input[type="checkbox"]:checked {
-  background: var(--gold);
-  border-color: var(--gold);
+    background: var(--gold);
+    border-color: var(--gold);
 }
 
 input[type="checkbox"]:checked::after {
-  content: '✓';
-  color: var(--background);
-  position: absolute;
-  top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 13px;
-  font-weight: 900;
+    content: '✓';
+    color: var(--background);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 13px;
+    font-weight: 900;
+}
+
+/* Demi-étoiles */
+.half-star {
+    position: relative;
+    display: inline-block;
+    color: #ffffff;
+    opacity: 0.45;
+    font-size: 0.95rem;
+}
+
+.half-star::before {
+    content: '★';
+    position: absolute;
+    left: 0;
+    width: 50%;
+    overflow: hidden;
+    color: var(--gold);
+    opacity: 1;
+}
+
+.stars-muted {
+    color: #ffffff;
+    opacity: 0.35;
 }
 
 /* Bandeau de sécurité */
@@ -746,11 +854,11 @@ input[type="checkbox"]:checked::after {
     }
     
     /* ═══ TRANSFORMATION DU TABLEAU EN CARTES ═══ */
+    @media (max-width: 768px) {
     .table-container {
-        border-radius: 10px;
         background: transparent;
-        box-shadow: none;
         border: none;
+        box-shadow: none;
     }
     
     .admin-table,
@@ -762,7 +870,6 @@ input[type="checkbox"]:checked::after {
         display: block;
     }
     
-    /* Cacher l'en-tête du tableau */
     .admin-table thead {
         position: absolute;
         width: 1px;
@@ -774,7 +881,6 @@ input[type="checkbox"]:checked::after {
         border: 0;
     }
     
-    /* Chaque ligne devient une carte */
     .admin-table tbody tr {
         background: var(--surface-card);
         border: 1px solid var(--border);
@@ -789,7 +895,6 @@ input[type="checkbox"]:checked::after {
         transform: none;
     }
     
-    /* Cellules en flex */
     .admin-table td {
         display: flex;
         align-items: center;
@@ -804,7 +909,7 @@ input[type="checkbox"]:checked::after {
         padding-bottom: 0;
     }
     
-    /* Checkbox : pleine largeur en haut */
+    /* Checkbox en haut à droite */
     .admin-table td:first-child {
         justify-content: flex-end;
         padding-bottom: 0.6rem;
@@ -812,33 +917,30 @@ input[type="checkbox"]:checked::after {
         margin-bottom: 0.4rem;
     }
     
-    /* Affiche : centrée avec taille augmentée */
+    /* Affiche centrée */
     .admin-table td:nth-child(2) {
         justify-content: center;
         padding: 0.6rem 0;
     }
-    .thumb {
-        width: 70px;
-        height: 100px;
-        border-radius: 6px;
-    }
-    .thumb-ph {
+    
+    .thumb, .thumb-ph {
         width: 70px;
         height: 100px;
     }
     
-    /* Titre : mis en avant */
+    /* Titre en avant */
     .admin-table td:nth-child(3) {
         flex-direction: column;
         align-items: flex-start;
         padding: 0.5rem 0;
     }
+    
     .admin-table td:nth-child(3) strong {
         font-size: 1.05rem;
         line-height: 1.3;
     }
     
-    /* Année et Réalisateur : avec labels */
+    /* Année avec label */
     .admin-table td:nth-child(4)::before {
         content: 'Année';
         font-size: 0.7rem;
@@ -847,6 +949,8 @@ input[type="checkbox"]:checked::after {
         letter-spacing: 0.05em;
         margin-right: 0.5rem;
     }
+    
+    /* Réalisateur avec label */
     .admin-table td:nth-child(5)::before {
         content: 'Réal.';
         font-size: 0.7rem;
@@ -856,13 +960,14 @@ input[type="checkbox"]:checked::after {
         margin-right: 0.5rem;
     }
     
-    /* Informations : pleine largeur */
+    /* Informations pleine largeur */
     .admin-table td:nth-child(6) {
         flex-direction: column;
         align-items: flex-start;
         gap: 0.5rem;
         padding: 0.6rem 0;
     }
+    
     .admin-table td:nth-child(6)::before {
         content: 'Informations';
         font-size: 0.7rem;
@@ -871,12 +976,13 @@ input[type="checkbox"]:checked::after {
         letter-spacing: 0.05em;
     }
     
-    /* Actions : boutons plus grands pour le tactile */
+    /* Actions : boutons plus grands */
     .admin-table td:nth-child(7) {
         justify-content: flex-end;
         gap: 0.5rem;
         padding-top: 0.6rem;
     }
+    
     .tbl-actions button {
         width: 40px;
         height: 40px;
@@ -885,9 +991,11 @@ input[type="checkbox"]:checked::after {
         background: var(--surface);
         border: 1px solid var(--border);
     }
+    
     .tbl-actions button:hover {
         background: var(--surface-hover);
     }
+
     
     /* Pagination */
     .pagination {