Actualiser css/admin.css

css/admin.css

@@ -126,17 +126,39 @@
     font-size: 0.95rem;
 }
 
-.admin-table th {
+.admin-table thead th {
     background: var(--surface);
     color: var(--muted);
     font-weight: 500;
-  padding: 1.2rem 1rem;
+    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 {
+.admin-table thead th:first-child,
-  padding: 0.8rem 1rem;
+.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);
@@ -154,25 +176,27 @@
     border-bottom: none;
 }
 
-.admin-table strong {
+.admin-table tbody td strong {
     color: var(--text);
     font-weight: 600;
-  font-size: 1.05rem;
+    font-size: 1rem;
 }
 
-/* Éléments du tableau */
+/* Affiches */
 .thumb {
-  width: 45px;
+    width: 50px;
-  height: 65px;
+    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;
+    width: 50px;
-  height: 65px;
+    height: 70px;
     background: var(--surface);
     border-radius: 4px;
     display: flex;
@@ -180,8 +204,10 @@
     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);
@@ -199,6 +225,58 @@
     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;
@@ -208,6 +286,9 @@
     font-size: 1.2rem;
     transition: all 0.2s;
     border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .tbl-actions button:hover {
@@ -219,7 +300,7 @@
     color: #ff4757;
 }
 
-/* Checkbox personnalisées */
+/* Checkbox */
 input[type="checkbox"] {
     appearance: none;
     width: 20px;
@@ -230,6 +311,8 @@ input[type="checkbox"] {
     cursor: pointer;
     position: relative;
     transition: all 0.2s;
+    display: inline-block;
+    vertical-align: middle;
 }
 
 input[type="checkbox"]:checked {
@@ -241,12 +324,37 @@ input[type="checkbox"]:checked::after {
     content: '✓';
     color: var(--background);
     position: absolute;
-  top: 50%; left: 50%;
+    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é */
 .security-banner {
   background: rgba(255, 71, 87, 0.05);
@@ -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;
+    .thumb, .thumb-ph {
-        height: 100px;
-        border-radius: 6px;
-    }
-    .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,10 +991,12 @@ input[type="checkbox"]:checked::after {
         background: var(--surface);
         border: 1px solid var(--border);
     }
+    
     .tbl-actions button:hover {
         background: var(--surface-hover);
     }
 
+    
     /* Pagination */
     .pagination {
         gap: 0.3rem;