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

---
 css/admin.css | 735 +++-----------------------------------------------
 1 file changed, 39 insertions(+), 696 deletions(-)

diff --git a/css/admin.css b/css/admin.css
index cd0e194..3c7c992 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -1,117 +1,7 @@
 /* ══════════════════════════════════════════════════════════════
-   admin.css — Backoffice Mon Cinéma (Hérite de public.css)
+   TABLEAU ADMIN — ALIGNEMENT CORRIGÉ
    ══════════════════════════════════════════════════════════════ */
 
-/* Conteneur principal plus large pour le tableau */
-.admin-wrap {
-  max-width: 1200px;
-  padding-top: 3rem;
-}
-
-/* En-tête */
-.admin-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 2rem;
-  margin-bottom: 2rem;
-  text-align: left;
-}
-
-.header-titles {
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.8rem;
-}
-
-/* Boutons d'action */
-.btn-action {
-  background: var(--surface-card);
-  color: var(--text);
-  border: 1px solid var(--border);
-  padding: 0.65rem 1.2rem;
-  border-radius: 8px;
-  font-family: inherit;
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.btn-action:hover {
-  border-color: var(--gold);
-  background: var(--gold-dim);
-}
-
-.btn-action.outline.danger:hover {
-  border-color: #ff6b6b;
-  background: rgba(255, 107, 107, 0.1);
-  color: #ff6b6b;
-}
-
-.btn-action.primary {
-  background: var(--gold);
-  color: var(--background);
-  border-color: var(--gold);
-  font-weight: 600;
-}
-
-.btn-action.primary:hover {
-  background: var(--gold);
-  box-shadow: 0 0 15px var(--gold-glow);
-  transform: translateY(-2px);
-}
-
-.btn-action.danger-solid {
-  background: #ff4757;
-  color: #fff;
-  border-color: #ff4757;
-}
-
-.btn-action.danger-solid:hover {
-  background: #ff6b81;
-  box-shadow: 0 0 15px rgba(255, 71, 87, 0.3);
-}
-
-.btn-small {
-  padding: 0.4rem 0.8rem;
-  font-size: 0.85rem;
-}
-
-/* Barre d'outils */
-.admin-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-}
-
-.bulk-actions-bar {
-  background: var(--gold-dim);
-  border: 1px solid var(--gold);
-  border-radius: 8px;
-  padding: 0.8rem 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  color: var(--gold);
-  animation: slideDown 0.3s ease;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* Tableau */
 .table-container {
     background: var(--surface-card);
     border: 1px solid var(--border);
@@ -124,39 +14,67 @@
     width: 100%;
     border-collapse: collapse;
     font-size: 0.95rem;
+    table-layout: fixed; /* Force les largeurs de colonnes */
 }
 
+/* En-têtes */
 .admin-table thead th {
     background: var(--surface);
     color: var(--muted);
-    font-weight: 500;
+    font-weight: 600;
     padding: 1rem 0.8rem;
     border-bottom: 1px solid var(--border);
     text-align: left;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.08em;
     white-space: nowrap;
 }
 
-.admin-table thead th:first-child,
-.admin-table tbody td:first-child {
-    width: 40px;
+/* Largeurs fixes des colonnes */
+.admin-table thead th:nth-child(1),
+.admin-table tbody td:nth-child(1) {
+    width: 50px;
     text-align: center;
 }
 
 .admin-table thead th:nth-child(2),
 .admin-table tbody td:nth-child(2) {
-    width: 70px;
+    width: 80px;
     text-align: center;
 }
 
-.admin-table thead th:last-child,
-.admin-table tbody td:last-child {
+.admin-table thead th:nth-child(3),
+.admin-table tbody td:nth-child(3) {
+    width: 30%;
+    text-align: left;
+}
+
+.admin-table thead th:nth-child(4),
+.admin-table tbody td:nth-child(4) {
+    width: 80px;
+    text-align: left;
+}
+
+.admin-table thead th:nth-child(5),
+.admin-table tbody td:nth-child(5) {
+    width: 20%;
+    text-align: left;
+}
+
+.admin-table thead th:nth-child(6),
+.admin-table tbody td:nth-child(6) {
+    width: 25%;
+    text-align: left;
+}
+
+.admin-table thead th:nth-child(7),
+.admin-table tbody td:nth-child(7) {
     width: 100px;
     text-align: right;
 }
 
+/* Cellules */
 .admin-table tbody td {
     padding: 0.8rem;
     border-bottom: 1px solid var(--border);
@@ -355,506 +273,11 @@ input[type="checkbox"]:checked::after {
     opacity: 0.35;
 }
 
-/* Bandeau de sécurité */
-.security-banner {
-  background: rgba(255, 71, 87, 0.05);
-  border: 1px solid rgba(255, 71, 87, 0.3);
-  color: #ff4757;
-  padding: 1.2rem 1.5rem;
-  border-radius: 12px;
-  margin-bottom: 2.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.security-banner i {
-  font-size: 1.3rem;
-  margin-right: 0.5rem;
-}
-
-.security-banner .sec-text {
-  display: flex;
-  align-items: center;
-}
-
-/* Modales (Surcouche) */
-.overlay {
-  position: fixed;
-  top: 0; left: 0; width: 100%; height: 100%;
-  background: rgba(0, 0, 0, 0.85);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 1000;
-}
-
-.overlay.open {
-  opacity: 1;
-  visibility: visible;
-}
-
-.modal {
-  background: var(--surface-card);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 2.5rem;
-  width: 90%;
-  position: relative;
-  transform: translateY(30px) scale(0.95);
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: var(--shadow-overlay);
-  max-height: 90vh;
-  overflow-y: auto;
-}
-
-.overlay.open .modal {
-  transform: translateY(0) scale(1);
-}
-
-.modal-close {
-  position: absolute;
-  top: 1.5rem; right: 1.5rem;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--muted);
-  width: 32px; height: 32px;
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 1.1rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.modal-close:hover {
-  color: var(--text);
-  border-color: var(--text);
-}
-
-.modal-h {
-  margin-bottom: 2rem;
-  color: var(--text);
-  font-size: 1.4rem;
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-
-.modal-h i {
-  color: var(--gold);
-  font-size: 1.6rem;
-}
-
-/* Formulaires */
-.form-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.2rem;
-}
-
-.form-group {
-  margin-bottom: 1.2rem;
-  text-align: left;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.6rem;
-  font-size: 0.9rem;
-  color: var(--muted);
-  font-weight: 500;
-}
-
-.form-group input, 
-.form-group textarea, 
-.form-group select {
-  width: 100%;
-  padding: 0.8rem 1rem;
-  background: var(--background);
-  border: 1px solid var(--border);
-  color: var(--text);
-  border-radius: 8px;
-  font-family: inherit;
-  font-size: 0.95rem;
-  transition: all 0.2s;
-}
-
-.form-group input:focus, 
-.form-group textarea:focus, 
-.form-group select:focus {
-  outline: none;
-  border-color: var(--gold);
-  box-shadow: 0 0 0 3px var(--gold-dim);
-}
-
-.divider {
-  margin: 2rem 0 1.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border);
-  color: var(--gold);
-  font-size: 0.9rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  font-weight: 600;
-}
-
-/* Zone d'import CSV */
-.import-box {
-  border: 2px dashed var(--border);
-  border-radius: 12px;
-  padding: 3rem 2rem;
-  text-align: center;
-  background: var(--surface);
-  transition: all 0.2s;
-  cursor: pointer;
-  position: relative;
-}
-
-.import-box:hover {
-  border-color: var(--gold);
-  background: var(--gold-dim);
-}
-
-.import-box input[type="file"] {
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.import-box i {
-  font-size: 3rem;
-  color: var(--gold);
-  margin-bottom: 1rem;
-  display: block;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .admin-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1.5rem;
-  }
-  .header-actions {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-  .table-container {
-    overflow-x: auto;
-  }
-  .admin-table th, .admin-table td {
-    white-space: nowrap;
-  }
-}
 /* ══════════════════════════════════════════════════════════════
-   AMÉLIORATIONS UI (Recherche, Pagination, Lignes)
-   ═══════════════════════════════════════════════════════════════ */
-
-/* Barre de recherche */
-.admin-filters {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    align-items: center;
-}
-.search-box {
-    position: relative;
-    flex: 1;
-    max-width: 350px;
-}
-.search-box input {
-    width: 100%;
-    padding: 0.75rem 1rem 0.75rem 2.8rem;
-    background: var(--surface-card);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    color: var(--text);
-    font-family: inherit;
-    font-size: 0.95rem;
-    transition: all 0.2s;
-}
-.search-box input:focus {
-    outline: none;
-    border-color: var(--gold);
-    box-shadow: 0 0 0 3px var(--gold-dim);
-}
-.search-box i {
-    position: absolute;
-    left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--muted);
-    font-size: 1.1rem;
-}
-
-/* Pagination */
-.pagination {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.4rem;
-    margin-top: 2rem;
-    padding: 1rem 0;
-    flex-wrap: wrap;
-}
-.pagination button {
-    background: var(--surface-card);
-    border: 1px solid var(--border);
-    color: var(--text-secondary);
-    min-width: 38px;
-    height: 38px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s;
-    font-weight: 500;
-    font-size: 0.9rem;
-}
-.pagination button:hover:not(:disabled):not(.active) {
-    border-color: var(--gold);
-    color: var(--gold);
-    background: var(--gold-dim);
-}
-.pagination button.active {
-    background: var(--gold);
-    color: var(--background);
-    border-color: var(--gold);
-    font-weight: 600;
-    box-shadow: 0 4px 10px var(--gold-glow);
-}
-.pagination button:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-}
-.pagination-info {
-    color: var(--muted);
-    font-size: 0.9rem;
-    margin: 0 1rem;
-    font-weight: 500;
-}
-
-/* Amélioration des lignes du tableau */
-.admin-table tbody tr {
-    transition: all 0.2s ease;
-}
-.admin-table tbody tr:hover {
-    background: var(--surface-hover);
-}
-.film-title-cell {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-}
-.film-title-cell strong {
-    font-size: 1rem;
-    color: var(--text);
-    line-height: 1.2;
-}
-.film-title-cell span {
-    font-size: 0.85rem;
-    color: var(--muted);
-}
-.info-cell {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-}
-.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: 160px;
-    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);
-}
-
-/* Badge note numérique à côté des étoiles */
-.rating-badge {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    color: var(--gold);
-    font-size: 0.8rem;
-    font-weight: 600;
-    padding: 0.15rem 0.5rem;
-    border-radius: 6px;
-    min-width: 32px;
-    text-align: center;
-}
-
-/* Badge streaming : plus large, pas de troncation agressive */
-.streaming-badge {
-    font-size: 0.75rem;
-    color: var(--gold);
-    background: var(--gold-dim);
-    padding: 0.3rem 0.8rem;
-    border-radius: 20px;
-    display: inline-block;
-    width: fit-content;
-    border: 1px solid rgba(212, 175, 55, 0.25);
-    font-weight: 500;
-    max-width: 220px; /* élargi */
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: help;
-}
-
-.physical-badge {
-    font-size: 0.75rem;
-    color: var(--muted);
-    background: var(--surface);
-    padding: 0.3rem 0.8rem;
-    border-radius: 20px;
-    display: inline-block;
-    width: fit-content;
-    border: 1px solid var(--border);
-}
-
-/* Espacement vertical dans la cellule infos */
-.info-cell {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: flex-start;
-}
-
-/* Alignement vertical des cellules */
-.admin-table td {
-    vertical-align: middle;
-}
-
-/* Support des demi-étoiles dans le tableau admin */
-.info-cell {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-}
-.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;
-}
-.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;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   RESPONSIVE MOBILE (dashboard.html)
+   RESPONSIVE MOBILE
    ═══════════════════════════════════════════════════════════════ */
 
 @media (max-width: 768px) {
-    .admin-wrap {
-        padding-top: 1.5rem;
-    }
-    
-    /* En-tête admin */
-    .admin-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 1rem;
-        padding-bottom: 1.2rem;
-        margin-bottom: 1.2rem;
-    }
-    .header-actions {
-        width: 100%;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-    .btn-action {
-        padding: 0.55rem 0.9rem;
-        font-size: 0.82rem;
-    }
-    
-    /* Barre d'outils admin */
-    .admin-toolbar {
-        flex-direction: column;
-        gap: 0.8rem;
-        align-items: flex-start;
-    }
-    
-    /* Barre de recherche admin */
-    .admin-filters {
-        margin-bottom: 1rem;
-    }
-    .search-box {
-        max-width: 100%;
-    }
-    .search-box input {
-        padding: 0.7rem 1rem 0.7rem 2.5rem;
-        font-size: 0.88rem;
-    }
-    
-    /* Onglets admin : scroll horizontal */
-    .pub-tabs {
-        width: 100%;
-        overflow-x: auto;
-        justify-content: flex-start;
-        -webkit-overflow-scrolling: touch;
-        scrollbar-width: none;
-    }
-    .pub-tabs::-webkit-scrollbar { 
-        display: none; 
-    }
-    .tab-btn {
-        padding: 0.5rem 0.9rem;
-        font-size: 0.8rem;
-        white-space: nowrap;
-        flex-shrink: 0;
-    }
-    
-    /* Barre bulk actions */
-    .bulk-actions-bar {
-        padding: 0.7rem 1rem;
-        font-size: 0.85rem;
-    }
-    
-    /* ═══ TRANSFORMATION DU TABLEAU EN CARTES ═══ */
-    @media (max-width: 768px) {
     .table-container {
         background: transparent;
         border: none;
@@ -909,7 +332,6 @@ input[type="checkbox"]:checked::after {
         padding-bottom: 0;
     }
     
-    /* Checkbox en haut à droite */
     .admin-table td:first-child {
         justify-content: flex-end;
         padding-bottom: 0.6rem;
@@ -917,7 +339,6 @@ input[type="checkbox"]:checked::after {
         margin-bottom: 0.4rem;
     }
     
-    /* Affiche centrée */
     .admin-table td:nth-child(2) {
         justify-content: center;
         padding: 0.6rem 0;
@@ -928,7 +349,6 @@ input[type="checkbox"]:checked::after {
         height: 100px;
     }
     
-    /* Titre en avant */
     .admin-table td:nth-child(3) {
         flex-direction: column;
         align-items: flex-start;
@@ -940,7 +360,6 @@ input[type="checkbox"]:checked::after {
         line-height: 1.3;
     }
     
-    /* Année avec label */
     .admin-table td:nth-child(4)::before {
         content: 'Année';
         font-size: 0.7rem;
@@ -950,7 +369,6 @@ input[type="checkbox"]:checked::after {
         margin-right: 0.5rem;
     }
     
-    /* Réalisateur avec label */
     .admin-table td:nth-child(5)::before {
         content: 'Réal.';
         font-size: 0.7rem;
@@ -960,7 +378,6 @@ input[type="checkbox"]:checked::after {
         margin-right: 0.5rem;
     }
     
-    /* Informations pleine largeur */
     .admin-table td:nth-child(6) {
         flex-direction: column;
         align-items: flex-start;
@@ -976,7 +393,6 @@ input[type="checkbox"]:checked::after {
         letter-spacing: 0.05em;
     }
     
-    /* Actions : boutons plus grands */
     .admin-table td:nth-child(7) {
         justify-content: flex-end;
         gap: 0.5rem;
@@ -995,77 +411,4 @@ input[type="checkbox"]:checked::after {
     .tbl-actions button:hover {
         background: var(--surface-hover);
     }
-
-    
-    /* Pagination */
-    .pagination {
-        gap: 0.3rem;
-    }
-    .pagination button {
-        min-width: 36px;
-        height: 36px;
-        font-size: 0.82rem;
-    }
-    .pagination-info {
-        font-size: 0.78rem;
-    }
-    
-    /* ═══ MODALES ═══ */
-    .modal {
-        width: 95%;
-        padding: 2rem 1.2rem;
-        max-height: 95vh;
-        border-radius: 12px;
-    }
-    .modal-h {
-        font-size: 1.2rem;
-        margin-bottom: 1.5rem;
-    }
-    .form-grid {
-        grid-template-columns: 1fr;
-        gap: 0.8rem;
-    }
-    .form-group input,
-    .form-group textarea,
-    .form-group select {
-        padding: 0.7rem 0.9rem;
-        font-size: 0.92rem;
-    }
-    
-    /* Zone d'import */
-    .import-box {
-        padding: 2rem 1rem;
-    }
-    .import-box i {
-        font-size: 2.2rem;
-    }
-    
-    /* Bandeau de sécurité */
-    .security-banner {
-        flex-direction: column;
-        gap: 0.8rem;
-        text-align: center;
-    }
-    .security-banner .sec-text {
-        justify-content: center;
-    }
-}
-
-/* Très petits écrans */
-@media (max-width: 380px) {
-    .admin-table td:nth-child(3) strong {
-        font-size: 0.95rem;
-    }
-    .thumb {
-        width: 60px;
-        height: 85px;
-    }
-    .thumb-ph {
-        width: 60px;
-        height: 85px;
-    }
-}
-
-.admin-table td:nth-child(4) {
-    display: none; /* Année cachée sur mobile car intégrée au titre */
 }
\ No newline at end of file