From 04c886d8f3f4f48278a281cc625d065b8d7e9e78 Mon Sep 17 00:00:00 2001
From: Cedric <cedric.chagnaud@gmail.com>
Date: Sun, 21 Jun 2026 09:27:36 +0200
Subject: [PATCH] Actualiser css/admin.css

---
 css/admin.css | 762 +++++++++++++++++++++-----------------------------
 1 file changed, 323 insertions(+), 439 deletions(-)

diff --git a/css/admin.css b/css/admin.css
index c5cecf8..ef35366 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -1,31 +1,46 @@
 /* ══════════════════════════════════════════════════════════════
-   admin.css — Backoffice Mon Cinéma (Version Améliorée)
+   admin.css — Backoffice Mon Cinéma (Refonte Ergonomique)
    ═══════════════════════════════════════════════════════════════ */
 
-/* Conteneur principal */
+/* --- VARIABLES DE BASE (Surcharge optionnelle de public.css) --- */
+:root {
+    --transition-speed: 0.25s;
+    --border-radius-sm: 6px;
+    --border-radius-md: 10px;
+    --border-radius-lg: 16px;
+    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
+    --shadow-md: 0 8px 24px rgba(0,0,0,0.2);
+    --shadow-lg: 0 20px 40px rgba(0,0,0,0.4);
+}
+
+/* --- CONTENEUR PRINCIPAL --- */
 .admin-wrap {
     max-width: 1400px;
-    padding-top: 2rem;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
 /* ══════════════════════════════════════════════════════════════
    EN-TÊTE ADMIN
    ═══════════════════════════════════════════════════════════════ */
-
 .admin-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.5rem 0;
-    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
     border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+    gap: 1rem;
 }
 
 .header-titles h1 {
-    font-family: 'Playfair Display', Georgia, serif;
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 0.3rem;
+    font-size: 2.2rem;
+    font-weight: 800;
+    margin-bottom: 0.2rem;
+    letter-spacing: -0.5px;
     color: var(--text);
 }
 
@@ -35,54 +50,67 @@
 
 .header-titles p {
     color: var(--muted);
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     margin: 0;
 }
 
 .header-actions {
     display: flex;
-    gap: 0.6rem;
+    gap: 0.75rem;
     align-items: center;
 }
 
 /* ══════════════════════════════════════════════════════════════
-   BOUTONS D'ACTION
+   BOUTONS D'ACTION (Boutons plus tactiles et accessibles)
    ═══════════════════════════════════════════════════════════════ */
-
 .btn-action {
     background: var(--surface-card);
     color: var(--text);
     border: 1px solid var(--border);
-    padding: 0.6rem 1rem;
-    border-radius: 8px;
-    font-family: inherit;
-    font-size: 0.85rem;
+    padding: 0.6rem 1.2rem;
+    border-radius: var(--border-radius-md);
+    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);
+    transition: all var(--transition-speed) ease;
     text-decoration: none;
 }
 
+.btn-action i {
+    font-size: 1.1rem;
+}
+
 .btn-action:hover {
     border-color: var(--gold);
-    background: var(--gold-dim);
     color: var(--gold);
+    background: var(--surface-hover);
     transform: translateY(-1px);
 }
 
+.btn-action.outline {
+    background: transparent;
+    border-color: var(--muted);
+    color: var(--muted);
+}
+.btn-action.outline:hover {
+    color: var(--text);
+    border-color: var(--text);
+}
+
 .btn-action.primary {
     background: var(--gold);
     color: var(--background);
     border-color: var(--gold);
     font-weight: 600;
+    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
 }
 
 .btn-action.primary:hover {
-    background: var(--gold);
-    box-shadow: 0 4px 15px var(--gold-glow);
+    background: #e5c347; /* Légèrement plus clair */
+    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
     transform: translateY(-2px);
 }
 
@@ -94,103 +122,98 @@
 
 .btn-action.danger-solid:hover {
     background: #ff6b81;
-    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
+    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
 }
 
 .btn-small {
     padding: 0.4rem 0.8rem;
-    font-size: 0.8rem;
+    font-size: 0.85rem;
 }
 
 /* ══════════════════════════════════════════════════════════════
-   ONGLETS
+   ONGLETS (Style Segmented Control moderne)
    ═══════════════════════════════════════════════════════════════ */
-
 .pub-tabs-container {
     display: flex;
-    justify-content: center;
-    margin-bottom: 2rem;
+    margin-bottom: 0.5rem;
 }
 
 .pub-tabs {
     background-color: var(--surface);
     border: 1px solid var(--border);
-    padding: 0.4rem;
-    border-radius: 30px;
+    padding: 0.3rem;
+    border-radius: var(--border-radius-md);
     display: inline-flex;
-    gap: 0.4rem;
+    gap: 0.3rem;
 }
 
 .tab-btn {
-    background: none;
+    background: transparent;
     border: none;
-    color: #d4d4de;
-    font-family: 'DM Sans', sans-serif;
-    font-size: 0.9rem;
+    color: var(--muted);
+    font-size: 0.95rem;
     font-weight: 500;
     cursor: pointer;
-    padding: 0.65rem 1.6rem;
-    border-radius: 25px;
+    padding: 0.6rem 1.5rem;
+    border-radius: var(--border-radius-sm);
     display: flex;
     align-items: center;
-    gap: 0.6rem;
-    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.tab-btn i {
-    font-size: 1.15rem;
+    gap: 0.5rem;
+    transition: all var(--transition-speed) ease;
 }
 
 .tab-btn:hover {
     color: var(--text);
-    background-color: var(--surface-hover);
 }
 
 .tab-btn.active {
-    color: var(--background);
-    background-color: var(--gold);
+    background-color: var(--surface-card);
+    color: var(--gold);
     font-weight: 600;
-    box-shadow: 0 4px 15px var(--gold-glow);
+    box-shadow: var(--shadow-sm);
 }
 
 /* ═════════════════════════════════════════════════════════════
-   BARRE D'OUTILS & FILTRES
+   BARRES D'OUTILS ET RECHERCHE
    ═══════════════════════════════════════════════════════════════ */
-
-.admin-toolbar {
+.admin-toolbar, .admin-filters {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
     gap: 1rem;
+    flex-wrap: wrap;
 }
 
-.admin-filters {
-    margin-bottom: 1.5rem;
+.count {
+    font-weight: 600;
+    color: var(--muted);
+    background: var(--surface);
+    padding: 0.4rem 0.8rem;
+    border-radius: var(--border-radius-sm);
+    font-size: 0.85rem;
 }
 
 .search-box {
     position: relative;
-    max-width: 400px;
+    width: 100%;
+    max-width: 500px;
 }
 
 .search-box input {
     width: 100%;
-    padding: 0.75rem 1rem 0.75rem 2.8rem;
-    background: var(--surface);
+    padding: 0.85rem 1rem 0.85rem 2.8rem;
+    background: var(--surface-card);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--border-radius-md);
     color: var(--text);
-    font-family: inherit;
-    font-size: 0.9rem;
-    transition: all 0.2s;
+    font-size: 0.95rem;
+    transition: all var(--transition-speed);
 }
 
 .search-box input:focus {
     outline: none;
     border-color: var(--gold);
-    box-shadow: 0 0 0 3px var(--gold-dim);
+    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
 }
 
 .search-box i {
@@ -199,180 +222,76 @@
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
-    font-size: 1.1rem;
-    pointer-events: none;
+    font-size: 1.2rem;
 }
 
-/* Barre bulk actions */
+/* ══════════════════════════════════════════════════════════════
+   BARRE ACTIONS GROUPÉES (Sticky & Animée)
+   ═══════════════════════════════════════════════════════════════ */
 .bulk-actions-bar {
-    background: var(--gold-dim);
-    border: 1px solid var(--gold);
-    border-radius: 8px;
+    background: rgba(255, 71, 87, 0.1);
+    border: 1px solid rgba(255, 71, 87, 0.3);
+    border-radius: var(--border-radius-md);
     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;
+    color: #ff4757;
+    font-weight: 600;
+    animation: slideDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    margin-bottom: 1rem;
 }
 
 @keyframes slideDown {
-    from { opacity: 0; transform: translateY(-10px); }
+    from { opacity: 0; transform: translateY(-15px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
 /* ══════════════════════════════════════════════════════════════
-   TABLEAU
+   TABLEAU PRINCIPAL (Sticky Header)
    ═══════════════════════════════════════════════════════════════ */
-
 .table-container {
     background: var(--surface-card);
     border: 1px solid var(--border);
-    border-radius: 12px;
-    overflow-y: auto;          /* Permet le défilement vertical */
-    max-height: 75vh;          /* Évite que le tableau prenne toute la page */
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    border-radius: var(--border-radius-lg);
+    overflow-y: auto;
+    overflow-x: auto;
+    max-height: 65vh; /* Ergonomie : le tableau a son propre scroll */
+    box-shadow: var(--shadow-sm);
 }
 
-.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: 80px; text-align: center; }
-.admin-table thead th:nth-child(3),
-.admin-table tbody td:nth-child(3) { width: 30%; }
-.admin-table thead th:nth-child(4),
-.admin-table tbody td:nth-child(4) { width: 80px; }
-.admin-table thead th:nth-child(5),
-.admin-table tbody td:nth-child(5) { width: 20%; }
-.admin-table thead th:nth-child(6),
-.admin-table tbody td:nth-child(6) { width: 25%; }
-.admin-table thead th:nth-child(7),
-.admin-table tbody td:nth-child(7) { width: 120px; text-align: right; }
-
-/* ══════════════════════════════════════════════════════════════
-   ÉLÉMENTS DU TABLEAU
-   ══════════════════════════════════════════════════════════════ */
-
-.thumb {
-    width: 50px;
-    height: 70px;
-    object-fit: cover;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
-    display: block;
-    margin: 0 auto;
-    transition: transform 0.3s;
+.admin-table {
+    width: 100%;
+    border-collapse: separate; /* Nécessaire pour le sticky */
+    border-spacing: 0;
+    text-align: left;
 }
 
-.thumb:hover {
-    transform: scale(1.05);
-}
-
-.thumb-ph {
-    width: 50px;
-    height: 70px;
-    background: var(--surface);
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--muted);
-    border: 1px solid var(--border);
-    margin: 0 auto;
-}
-
-.badge-format {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    padding: 0.3rem 0.8rem;
-    border-radius: 20px;
+/* En-tête fixe */
+.admin-table thead th {
+    position: sticky;
+    top: 0;
+    background: var(--surface-card);
+    z-index: 10;
+    padding: 1rem;
     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;
-}
-
-.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;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--muted);
     font-weight: 600;
-    padding: 0.1rem 0.4rem;
-    border-radius: 4px;
-    display: inline-block;
+    border-bottom: 2px solid var(--border);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Ombre légère sous le header */
 }
 
-.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;
+.admin-table tbody td {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border);
+    vertical-align: middle;
+    transition: background var(--transition-speed);
 }
 
-.physical-badge {
-    font-size: 0.75rem;
-    color: var(--muted);
+.admin-table tbody tr:hover td {
     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;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.tbl-actions button:hover {
-    color: var(--gold);
-    background: var(--surface);
-}
-
-.tbl-actions button.del:hover {
-    color: #ff4757;
 }
 
 /* Checkbox personnalisées */
@@ -381,13 +300,11 @@ input[type="checkbox"] {
     width: 20px;
     height: 20px;
     border: 2px solid var(--muted);
-    border-radius: 6px;
+    border-radius: 4px;
     background: var(--surface);
     cursor: pointer;
     position: relative;
     transition: all 0.2s;
-    display: inline-block;
-    vertical-align: middle;
 }
 
 input[type="checkbox"]:checked {
@@ -401,131 +318,162 @@ input[type="checkbox"]:checked::after {
     position: absolute;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 900;
 }
 
-/* Demi-étoiles */
-.half-star {
-    position: relative;
-    display: inline-block;
-    color: #ffffff;
-    opacity: 0.45;
-    font-size: 0.95rem;
+/* ══════════════════════════════════════════════════════════════
+   ÉLÉMENTS DU TABLEAU (Badges, Affiches, Actions)
+   ══════════════════════════════════════════════════════════════ */
+.thumb, .thumb-ph {
+    width: 60px;
+    height: 85px;
+    object-fit: cover;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border);
+    display: block;
+    margin: 0 auto;
 }
 
-.half-star::before {
-    content: '★';
-    position: absolute;
-    left: 0;
-    width: 50%;
-    overflow: hidden;
+.thumb-ph {
+    background: var(--surface);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+}
+
+.tbl-stars {
     color: var(--gold);
-    opacity: 1;
+    font-size: 1rem;
+    letter-spacing: 1px;
 }
 
-.stars-muted {
-    color: #ffffff;
-    opacity: 0.35;
+.half-star { position: relative; display: inline-block; color: rgba(255,255,255,0.2); }
+.half-star::before { content: '★'; position: absolute; left: 0; width: 50%; overflow: hidden; color: var(--gold); }
+.stars-muted { color: rgba(255,255,255,0.2); }
+
+.info-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+/* Badges unifiés */
+.rating-badge, .streaming-badge, .physical-badge, .badge-format {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.6rem;
+    border-radius: 20px;
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    font-weight: 600;
+}
+
+.rating-badge, .badge-format {
+    background: var(--surface);
+    border: 1px solid var(--gold);
+    color: var(--gold);
+}
+
+.streaming-badge {
+    background: rgba(212, 175, 55, 0.1);
+    color: var(--gold);
+    border: 1px solid transparent;
+}
+
+.physical-badge {
+    background: var(--surface);
+    color: var(--muted);
+    border: 1px solid var(--border);
+}
+
+/* Actions des lignes */
+.tbl-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+.tbl-actions button {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text);
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    transition: all 0.2s;
+}
+
+.tbl-actions button:hover {
+    border-color: var(--gold);
+    color: var(--gold);
+}
+
+.tbl-actions button.del:hover {
+    border-color: #ff4757;
+    color: #ff4757;
+    background: rgba(255, 71, 87, 0.1);
 }
 
 /* ══════════════════════════════════════════════════════════════
    PAGINATION
    ═══════════════════════════════════════════════════════════════ */
-
 .pagination {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 0.4rem;
-    margin-top: 2rem;
-    padding: 1rem 0;
-    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding-top: 1rem;
 }
 
 .pagination button {
-    background: var(--surface);
+    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;
+    color: var(--text);
+    min-width: 40px;
+    height: 40px;
+    border-radius: var(--border-radius-sm);
+    font-weight: 600;
     cursor: pointer;
-    transition: all 0.25s;
-    font-weight: 500;
-    font-size: 0.9rem;
+    transition: all 0.2s;
 }
 
-.pagination button:hover:not(:disabled):not(.active) {
+.pagination button:hover:not(:disabled) {
     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;
+    opacity: 0.4;
     cursor: not-allowed;
 }
 
-.pagination-info {
-    color: var(--muted);
-    font-size: 0.9rem;
-    margin: 0 1rem;
-    font-weight: 500;
-}
-
 /* ══════════════════════════════════════════════════════════════
-   BANDEAU DE SÉCURITÉ
+   MODALES (Fenêtres pop-up)
    ═══════════════════════════════════════════════════════════════ */
-
-.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
-   ═══════════════════════════════════════════════════════════════ */
-
 .overlay {
     position: fixed;
     top: 0; left: 0; width: 100%; height: 100%;
-    background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(8px);
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(5px);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: all 0.3s ease;
     z-index: 1000;
 }
 
@@ -537,14 +485,14 @@ input[type="checkbox"]:checked::after {
 .modal {
     background: var(--surface-card);
     border: 1px solid var(--border);
-    border-radius: 16px;
+    border-radius: var(--border-radius-lg);
     padding: 2.5rem;
     width: 90%;
-    max-width: 600px;
+    max-width: 650px;
     position: relative;
-    transform: translateY(30px) scale(0.95);
-    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9);
+    transform: translateY(20px) scale(0.98);
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: var(--shadow-lg);
     max-height: 90vh;
     overflow-y: auto;
 }
@@ -557,70 +505,67 @@ input[type="checkbox"]:checked::after {
     position: absolute;
     top: 1.5rem; right: 1.5rem;
     background: var(--surface);
-    border: 1px solid var(--border);
+    border: none;
     color: var(--muted);
-    width: 32px; height: 32px;
+    width: 36px; height: 36px;
     border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 1.1rem;
+    font-size: 1.2rem;
     cursor: pointer;
     transition: all 0.2s;
 }
 
 .modal-close:hover {
-    color: var(--text);
-    border-color: var(--text);
+    background: #ff4757;
+    color: #fff;
 }
 
 .modal-h {
     margin-bottom: 2rem;
     color: var(--text);
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0.8rem;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 1rem;
 }
 
 .modal-h i {
     color: var(--gold);
-    font-size: 1.6rem;
 }
 
 /* ═════════════════════════════════════════════════════════════
-   FORMULAIRES
+   FORMULAIRES (Intégrés dans les modales)
    ═══════════════════════════════════════════════════════════════ */
-
 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1.2rem;
+    gap: 1.5rem;
 }
 
 .form-group {
-    margin-bottom: 1.2rem;
-    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
 .form-group label {
-    display: block;
-    margin-bottom: 0.6rem;
     font-size: 0.9rem;
     color: var(--muted);
-    font-weight: 500;
+    font-weight: 600;
 }
 
 .form-group input,
 .form-group textarea,
 .form-group select {
     width: 100%;
-    padding: 0.8rem 1rem;
+    padding: 0.9rem 1rem;
     background: var(--background);
     border: 1px solid var(--border);
     color: var(--text);
-    border-radius: 8px;
-    font-family: inherit;
+    border-radius: var(--border-radius-md);
     font-size: 0.95rem;
-    transition: all 0.2s;
+    transition: all var(--transition-speed);
 }
 
 .form-group input:focus,
@@ -628,28 +573,25 @@ input[type="checkbox"]:checked::after {
 .form-group select:focus {
     outline: none;
     border-color: var(--gold);
-    box-shadow: 0 0 0 3px var(--gold-dim);
+    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
 }
 
 .divider {
     margin: 2rem 0 1.5rem;
     padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px dashed var(--border);
     color: var(--gold);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: 600;
+    font-weight: 700;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   ZONE D'IMPORT CSV
-   ══════════════════════════════════════════════════════════════ */
-
+/* Zone d'import CSV */
 .import-box {
     border: 2px dashed var(--border);
-    border-radius: 12px;
-    padding: 3rem 2rem;
+    border-radius: var(--border-radius-md);
+    padding: 2.5rem 1rem;
     text-align: center;
     background: var(--surface);
     transition: all 0.2s;
@@ -659,7 +601,7 @@ input[type="checkbox"]:checked::after {
 
 .import-box:hover {
     border-color: var(--gold);
-    background: var(--gold-dim);
+    background: rgba(212, 175, 55, 0.05);
 }
 
 .import-box input[type="file"] {
@@ -671,46 +613,50 @@ input[type="checkbox"]:checked::after {
 }
 
 .import-box i {
-    font-size: 3rem;
+    font-size: 2.5rem;
     color: var(--gold);
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
     display: block;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   BARRE DE PROGRESSION
-   ═══════════════════════════════════════════════════════════════ */
-
-#progress-overlay .modal {
-    max-width: 500px;
-    text-align: center;
-}
-
-#progress-bar {
-    width: 0%;
-    height: 12px;
-    background: var(--gold);
-    border-radius: 6px;
-    transition: width 0.3s ease;
+/* Barre de sécurité */
+.security-banner {
+    background: rgba(255, 71, 87, 0.1);
+    border: 1px solid rgba(255, 71, 87, 0.3);
+    color: #ff4757;
+    padding: 1rem 1.5rem;
+    border-radius: var(--border-radius-md);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 /* ══════════════════════════════════════════════════════════════
-   RESPONSIVE MOBILE
+   RESPONSIVE MOBILE (Transformation en Cartes)
    ═══════════════════════════════════════════════════════════════ */
-
-@media (max-width: 768px) {
+@media (max-width: 900px) {
     .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;
+        gap: 1rem;
+    }
     
-    /* On rend le conteneur transparent pour laisser les "cartes" respirer */
+    .form-group[style*="grid-column: span 2"] {
+        grid-column: span 1 !important;
+    }
+}
+
+@media (max-width: 768px) {
+    /* Nettoyage du conteneur tableau */
     .table-container {
         background: transparent;
         border: none;
@@ -719,140 +665,78 @@ input[type="checkbox"]:checked::after {
         max-height: none;
     }
     
-    .admin-table,
-    .admin-table tbody {
+    .admin-table, .admin-table tbody {
         display: block;
         width: 100%;
     }
     
-    /* Masquer l'en-tête classique du tableau */
     .admin-table thead {
-        display: none;
+        display: none; /* Masquer l'en-tête sur mobile */
     }
     
-    /* --- TRANSFORMATION DES LIGNES EN CARTES (GRID) --- */
+    /* Transformation des lignes en Grid Layout de cartes */
     .admin-table tbody tr {
         display: grid;
-        /* Définition des colonnes : Checkbox | Affiche | Contenu | Actions */
-        grid-template-columns: 30px 80px 1fr 40px; 
+        grid-template-columns: 40px 80px 1fr;
         grid-template-areas:
-            "check poster title actions"
-            "check poster year actions"
-            "check poster director actions"
-            "check poster badges actions";
-        gap: 0.3rem 0.8rem;
+            "check poster title"
+            "check poster year"
+            "check poster director"
+            "check poster badges"
+            "actions actions actions";
+        gap: 0.4rem 1rem;
         background: var(--surface-card);
         border: 1px solid var(--border);
-        border-radius: 12px;
+        border-radius: var(--border-radius-md);
         margin-bottom: 1rem;
-        padding: 1rem 0.8rem;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        padding: 1rem;
+        box-shadow: var(--shadow-sm);
         align-items: center;
     }
     
-    /* Nettoyage des styles de cellules bureau */
     .admin-table td {
         display: block;
         padding: 0;
         border: none;
         text-align: left;
     }
-
-    /* Nettoyage des anciens préfixes ("Année", "Réal.") */
-    .admin-table td:nth-child(4)::before,
-    .admin-table td:nth-child(5)::before,
-    .admin-table td:nth-child(6)::before {
-        display: none;
-    }
     
-    /* 1. Checkbox */
-    .admin-table td:nth-child(1) {
-        grid-area: check;
-        display: flex;
-        justify-content: center;
-        margin-bottom: 0;
-    }
+    .admin-table td:nth-child(1) { grid-area: check; }
+    .admin-table td:nth-child(2) { grid-area: poster; }
     
-    /* 2. Affiche */
-    .admin-table td:nth-child(2) {
-        grid-area: poster;
-        display: flex;
-        justify-content: center;
-    }
     .thumb, .thumb-ph {
-        width: 80px;
-        height: 115px;
-        margin: 0;
-        border-radius: 8px;
+        width: 80px; height: 115px; margin: 0;
     }
     
-    /* 3. Titre */
-    .admin-table td:nth-child(3) {
-        grid-area: title;
-        align-self: end;
-    }
+    .admin-table td:nth-child(3) { grid-area: title; align-self: end; }
     .admin-table td:nth-child(3) strong {
-        font-size: 1.1rem;
-        line-height: 1.2;
-        color: var(--gold);
-        white-space: normal; /* Le titre peut passer à la ligne sur mobile */
+        font-size: 1.1rem; color: var(--gold);
     }
     
-    /* 4. Année */
-    .admin-table td:nth-child(4) {
-        grid-area: year;
-        font-size: 0.85rem;
-        color: var(--muted);
-    }
-    .admin-table td:nth-child(4)::before {
-        content: '🗓 ';
-        opacity: 0.7;
-    }
+    .admin-table td:nth-child(4) { grid-area: year; font-size: 0.85rem; color: var(--muted); }
+    .admin-table td:nth-child(4)::before { content: '🗓 '; }
     
-    /* 5. Réalisateur */
-    .admin-table td:nth-child(5) {
-        grid-area: director;
-        font-size: 0.85rem;
-        color: var(--muted);
-    }
-    .admin-table td:nth-child(5)::before {
-        content: '🎬 ';
-        opacity: 0.7;
-    }
+    .admin-table td:nth-child(5) { grid-area: director; font-size: 0.85rem; color: var(--muted); }
+    .admin-table td:nth-child(5)::before { content: '🎬 '; }
     
-    /* 6. Informations (Étoiles ou Format) */
-    .admin-table td:nth-child(6) {
-        grid-area: badges;
-        align-self: start;
-        margin-top: 0.4rem;
-    }
+    .admin-table td:nth-child(6) { grid-area: badges; margin-top: 0.5rem; }
     
-    /* 7. Actions (Modifier / Supprimer) */
     .admin-table td:nth-child(7) {
         grid-area: actions;
         display: flex;
-        flex-direction: column;
-        gap: 0.8rem;
-        justify-content: center;
-        align-items: flex-end;
-        padding-top: 0;
+        justify-content: stretch;
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px dashed var(--border);
     }
     
     .tbl-actions {
-        flex-direction: column;
-        gap: 0.8rem;
+        width: 100%;
+        justify-content: space-between;
     }
     
-    /* Boutons d'action plus faciles à cliquer sur écran tactile */
     .tbl-actions button {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        padding: 0.6rem;
-        border-radius: 8px;
-        font-size: 1.2rem;
-    }
-    
-    .search-box {
-        max-width: 100%;
+        flex: 1; /* Boutons actions prennent toute la largeur dispo en bas */
+        height: 44px; /* Plus facile à cliquer sur mobile */
     }
 }
\ No newline at end of file