diff --git a/css/admin.css b/css/admin.css index 5e91b07..d120bfa 100644 --- a/css/admin.css +++ b/css/admin.css @@ -95,9 +95,28 @@ input[type="checkbox"]:checked::after { content: '✓'; color: var(--background) .pagination button:disabled { opacity: 0.4; cursor: not-allowed; } /* MODALES */ -.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; } +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); /* Fond sombre */ + display: flex; + justify-content: center; /* Centrage horizontal */ + align-items: center; /* Centrage vertical */ + z-index: 1000; /* Au-dessus du contenu */ + padding: 1rem; +} .overlay.open { opacity: 1; visibility: visible; } -.modal { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 2.5rem; width: 90%; max-width: 600px; position: relative; transform: translateY(20px) scale(0.95); transition: all 0.3s ease; max-height: 90vh; overflow-y: auto; } +.modal { + background: var(--surface-card); + padding: 2rem; + border-radius: 12px; + width: 100%; + max-width: 450px; + box-shadow: 0 10px 25px rgba(0,0,0,0.2); +} .overlay.open .modal { transform: translateY(0) scale(1); } .modal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: var(--surface); border: none; color: var(--muted); width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; } .modal-close:hover { background: #ff4757; color: #fff; } @@ -145,18 +164,25 @@ input[type="checkbox"]:checked::after { content: '✓'; color: var(--background) .admin-table tbody tr { display: grid; - grid-template-columns: 60px 1fr 40px; - grid-template-areas: + /* On définit 3 colonnes fixes : Image, Info, Actions */ + grid-template-columns: 60px 1fr 80px; + grid-template-areas: "poster title actions" "poster director actions" "poster info actions"; - gap: 0.2rem 1rem; - padding: 0.8rem; + align-items: center; /* Alignement vertical */ + gap: 0.5rem 1rem; + padding: 1rem; + border-bottom: 1px solid var(--border); } .admin-table td { border: none; padding: 0.3rem 0; text-align: left; } .admin-table td:nth-child(1) { display: none; } /* Checkbox */ - .admin-table td:nth-child(2) { grid-area: poster; grid-row: span 3; } /* 🔥 FIX: Ajout de grid-row pour éviter le collapse */ + .admin-table td:nth-child(2) { + grid-area: poster; + width: 60px; + overflow: hidden; + } .admin-table td:nth-child(3) { grid-area: title; font-size: 1rem; margin-bottom: 0; } .admin-table td:nth-child(4) { display: none; } /* Année */ .admin-table td:nth-child(5) { grid-area: director; margin-top: 0; font-size: 0.85rem; color: var(--muted); }