diff --git a/css/admin.css b/css/admin.css index 6b843f4..71825a0 100644 --- a/css/admin.css +++ b/css/admin.css @@ -1,528 +1,449 @@ /* ══════════════════════════════════════════════════════════════ - admin.css — Backoffice Mon Cinéma + admin.css — Backoffice Mon Cinéma (Hérite de public.css) ══════════════════════════════════════════════════════════════ */ -* { box-sizing: border-box; margin: 0; padding: 0; } - -:root { - --gold: #C9A84C; - --gold-light: #E8C97A; - --gold-dim: rgba(201, 168, 76, 0.08); - --dark: #0E0E0E; - --surface: #1A1A1A; - --surface2: #252525; - --text: #F0ECE3; - --text-secondary: #C8C4BE; - --muted: #A8A4A0; - --border: rgba(201, 168, 76, 0.2); - --red: #c0392b; +/* Conteneur principal plus large pour le tableau */ +.admin-wrap { + max-width: 1200px; + padding-top: 3rem; } -body { - background: var(--dark); - color: var(--text); - font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; - min-height: 100vh; - padding: 2rem 1rem 4rem; - -webkit-font-smoothing: antialiased; -} - -/* ── Visibilité des pages ── */ -.page { display: none; } -.page.active { display: block; } - -/* ══════════════════════════════════════════════════════════════ - LAYOUT ADMIN - ══════════════════════════════════════════════════════════════ */ -.admin-wrap { max-width: 960px; margin: 0 auto; } - +/* En-tête */ .admin-header { display: flex; - align-items: center; justify-content: space-between; - padding-bottom: 1.2rem; + align-items: center; border-bottom: 1px solid var(--border); - margin-bottom: 1.8rem; - flex-wrap: wrap; - gap: 1rem; -} - -.admin-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; } -.admin-title span { color: var(--gold); font-style: italic; } -.admin-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } - -/* ══════════════════════════════════════════════════════════════ - ONGLETS ADMIN - ══════════════════════════════════════════════════════════════ */ -.admin-tabs { - display: flex; - gap: 0.4rem; + padding-bottom: 2rem; margin-bottom: 2rem; - border-bottom: 1px solid var(--border); - padding-bottom: 0.5rem; + text-align: left; } -.tab-btn { - background: transparent; - border: none; - color: var(--muted); - padding: 0.55rem 1.2rem; - font-family: 'DM Sans', sans-serif; - font-size: 0.88rem; +.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; - border-radius: 4px; - transition: all 0.2s; display: inline-flex; align-items: center; - gap: 0.45rem; + gap: 0.5rem; + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } -.tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.03); } -.tab-btn.active { color: var(--gold); background: rgba(201,168,76,0.08); } +.btn-action:hover { + border-color: var(--gold); + background: var(--gold-dim); +} -/* ══════════════════════════════════════════════════════════════ - BOUTONS GÉNÉRAUX - ══════════════════════════════════════════════════════════════ */ -.btn { - display: inline-flex; +.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; - gap: 6px; - padding: 0.55rem 1.1rem; - font-family: 'DM Sans', sans-serif; - font-size: 0.82rem; - font-weight: 500; - cursor: pointer; - border-radius: 3px; - letter-spacing: 0.04em; - transition: background 0.2s, color 0.2s, border-color 0.2s; - border: none; - text-decoration: none; + margin-bottom: 1.5rem; } -.btn-gold { background: var(--gold); color: var(--dark); } -.btn-gold:hover { background: var(--gold-light); } +.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; +} -.btn-outline { background: transparent; border: 1px solid rgba(201,168,76,0.3); color: #C8C4BE; } -.btn-outline:hover { border-color: var(--gold); color: var(--gold); } +@keyframes slideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} -.btn-danger { background: transparent; border: 1px solid #555; color: #C0BBBB; } -.btn-danger:hover { border-color: var(--red); color: var(--red); } - -.btn-primary { background: var(--gold); color: var(--dark); font-weight: 600; } -.btn-primary:hover { background: var(--gold-light); } - -/* ══════════════════════════════════════════════════════════════ - TABLEAU - ══════════════════════════════════════════════════════════════ */ -.admin-table-wrap { overflow-x: auto; } +/* Tableau */ +.table-container { + 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.85rem; + font-size: 0.95rem; } .admin-table th { - text-align: left; - font-size: 0.7rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: #B8B4B0; - padding: 0.6rem 0.8rem; + background: var(--surface); + color: var(--muted); + font-weight: 500; + padding: 1.2rem 1rem; border-bottom: 1px solid var(--border); - font-weight: 600; + text-align: left; } .admin-table td { - padding: 0.75rem 0.8rem; - border-bottom: 1px solid rgba(255,255,255,0.04); + padding: 0.8rem 1rem; + border-bottom: 1px solid var(--border); vertical-align: middle; + color: var(--text-secondary); } -.admin-table tr:hover td { background: var(--surface2); } +.admin-table tbody tr { + transition: background 0.2s; +} +.admin-table tbody tr:hover { + background: var(--surface-hover); +} + +.admin-table tbody tr:last-child td { + border-bottom: none; +} + +.admin-table strong { + color: var(--text); + font-weight: 600; + font-size: 1.05rem; +} + +/* Éléments du tableau */ .thumb { - width: 36px; height: 54px; + width: 45px; + height: 65px; object-fit: cover; - border-radius: 3px; - display: block; + border-radius: 4px; border: 1px solid var(--border); + box-shadow: 0 4px 10px rgba(0,0,0,0.5); } .thumb-ph { - width: 36px; height: 54px; - background: var(--surface2); - border-radius: 3px; + width: 45px; + height: 65px; + background: var(--surface); + border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--muted); - font-size: 1rem; - border: 1px dashed var(--border); + border: 1px solid var(--border); } -.tbl-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.05em; } - -.tbl-actions { display: flex; gap: 0.4rem; justify-content: center; } -.tbl-actions button { - background: none; - border: 1px solid #444; - cursor: pointer; - color: #B0ACAA; - font-size: 0.9rem; - padding: 5px 7px; - border-radius: 3px; - transition: color 0.15s, border-color 0.15s; - line-height: 1; -} -.tbl-actions button:hover { color: var(--gold); border-color: var(--gold); } -.tbl-actions button.del:hover { color: var(--red); border-color: var(--red); } - .badge-format { - background: var(--gold-dim); - color: var(--gold); - font-size: 0.7rem; - font-weight: 700; - padding: 0.15rem 0.5rem; - border-radius: 3px; - border: 1px solid rgba(201,168,76,0.25); - text-transform: uppercase; -} - -/* ══════════════════════════════════════════════════════════════ - BARRE D'ACTIONS EN MASSE - ══════════════════════════════════════════════════════════════ */ -.bulk-actions-bar { - background: var(--gold-dim); - border: 1px solid rgba(201,168,76,0.3); - padding: 0.8rem 1.2rem; - border-radius: 6px; - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; -} - -/* ══════════════════════════════════════════════════════════════ - BANNIÈRE SÉCURITÉ - ══════════════════════════════════════════════════════════════ */ -.security-banner { - background: #7f1d1d; - border: 1px solid #f87171; - color: #fca5a5; - padding: 1rem 1.2rem; - border-radius: 6px; - margin-bottom: 1.5rem; - font-size: 0.85rem; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} - -.security-banner button { - background: #f87171; - color: #7f1d1d; - border: none; - padding: 0.4rem 0.9rem; - font-weight: 700; - border-radius: 3px; - cursor: pointer; - transition: background 0.2s; - white-space: nowrap; -} -.security-banner button:hover { background: #fca5a5; } - -/* ══════════════════════════════════════════════════════════════ - MODALES — Overlay + panneau - ══════════════════════════════════════════════════════════════ */ -.overlay { - display: none; - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.88); - backdrop-filter: blur(6px); - z-index: 500; - align-items: center; - justify-content: center; - padding: 1rem; - overflow-y: auto; -} - -.overlay.open { display: flex; } - -.modal { background: var(--surface); border: 1px solid var(--border); - border-radius: 8px; - width: 100%; - max-width: 540px; - max-height: 92vh; - overflow-y: auto; - padding: 2rem; + 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; +} + +.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; +} + +.tbl-actions button:hover { + color: var(--gold); + background: var(--surface); +} + +.tbl-actions button.del:hover { + color: #ff4757; +} + +/* Checkbox personnalisées */ +input[type="checkbox"] { + appearance: none; + width: 20px; + height: 20px; + border: 2px solid var(--muted); + border-radius: 6px; + background: var(--surface); + cursor: pointer; position: relative; - scrollbar-width: thin; - scrollbar-color: var(--border) transparent; + transition: all 0.2s; +} + +input[type="checkbox"]:checked { + 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; +} + +/* 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: 1rem; - right: 1rem; - background: rgba(255,255,255,0.04); - border: 1px solid var(--border); - color: var(--muted); - cursor: pointer; - font-size: 1.1rem; - line-height: 1; - width: 34px; - height: 34px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s; -} -.modal-close:hover { color: var(--text); background: rgba(255,255,255,0.08); } - -.modal-h { - font-family: 'Playfair Display', serif; - font-size: 1.4rem; - color: var(--gold); - margin-bottom: 1.4rem; -} - -/* ══════════════════════════════════════════════════════════════ - FORMULAIRES DANS LES MODALES - ══════════════════════════════════════════════════════════════ */ -.form-group { margin-bottom: 1rem; } - -.form-group label { - display: block; - font-size: 0.72rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: #C0BCB8; - margin-bottom: 0.35rem; -} - -.form-group input, -.form-group select, -.form-group textarea { - width: 100%; - background: var(--surface2); - border: 1px solid rgba(255,255,255,0.1); - color: var(--text); - font-family: 'DM Sans', sans-serif; - font-size: 0.9rem; - padding: 0.65rem 0.8rem; - border-radius: 4px; - outline: none; - transition: border-color 0.2s; - appearance: auto; -} - -.form-group input:focus, -.form-group select:focus, -.form-group textarea:focus { border-color: var(--gold); } - -.form-group textarea { resize: vertical; min-height: 100px; } - -.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } - -.btn-save { - width: 100%; - background: var(--gold); - color: var(--dark); - border: none; - padding: 0.8rem; - font-family: 'DM Sans', sans-serif; - font-size: 0.9rem; - font-weight: 600; - cursor: pointer; - border-radius: 4px; - margin-top: 0.8rem; - transition: background 0.2s; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} -.btn-save:hover { background: var(--gold-light); } - -/* ══════════════════════════════════════════════════════════════ - API NOTICE - ══════════════════════════════════════════════════════════════ */ -.api-notice { - background: var(--surface2); - border: 1px solid var(--border); - border-radius: 4px; - padding: 0.9rem 1.1rem; - margin-bottom: 1.2rem; - font-size: 0.82rem; - color: #C0BCB8; - line-height: 1.6; -} -.api-notice a { color: var(--gold); } - -/* ══════════════════════════════════════════════════════════════ - PAGE LOGIN - ══════════════════════════════════════════════════════════════ */ -.login-wrap { - max-width: 360px; - margin: 7rem auto; - padding: 2rem 1.5rem; + top: 1.5rem; right: 1.5rem; background: var(--surface); border: 1px solid var(--border); - border-radius: 8px; + 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; } -.login-wrap h2 { - font-family: 'Playfair Display', serif; +.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); - margin-bottom: 1.8rem; font-size: 1.6rem; } -.login-wrap input { - width: 100%; - background: var(--surface2); - border: 1px solid rgba(255,255,255,0.1); - color: var(--text); - font-family: 'DM Sans', sans-serif; +/* 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; - padding: 0.7rem 0.85rem; - border-radius: 4px; + 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; - margin-bottom: 1rem; - transition: border-color 0.2s; -} -.login-wrap input:focus { border-color: var(--gold); } - -.login-err { - color: var(--red); - font-size: 0.82rem; - margin-bottom: 0.8rem; - display: none; + border-color: var(--gold); + box-shadow: 0 0 0 3px var(--gold-dim); } -/* ══════════════════════════════════════════════════════════════ - RESPONSIVE - ══════════════════════════════════════════════════════════════ */ -@media (max-width: 600px) { - .form-row { grid-template-columns: 1fr; } - .admin-header { flex-direction: column; align-items: flex-start; } - .admin-actions { width: 100%; } - .modal { padding: 1.5rem; } +.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; } -/* Amélioration du bouton "Choisir un fichier" pour matcher avec le style admin */ -#import-section button { - border-color: var(--gold); - color: var(--gold); - background: rgba(201, 168, 76, 0.05); -} -#import-section button:hover { - background: var(--gold); - color: var(--dark); -} - -/* Rendre le tableau plus élégant */ -.admin-table { border-spacing: 0 0.5rem; border-collapse: separate; } -.admin-table tbody tr { - background: #141414; - transition: all 0.2s; -} -.admin-table td:first-child { border-radius: 6px 0 0 6px; } -.admin-table td:last-child { border-radius: 0 6px 6px 0; } - -/* Amélioration des inputs dans les modales */ -.form-group input, .form-group select, .form-group textarea { - background: #111; /* Un peu plus sombre que le reste */ - border: 1px solid #333; -} -.form-group input:focus { border-color: var(--gold); } - -/* Style moderne pour les checkboxes */ -.film-checkbox { - appearance: none; - width: 18px; - height: 18px; - border: 1px solid var(--border); - border-radius: 4px; - background: var(--surface2); - cursor: pointer; - transition: all 0.2s; - position: relative; -} - -.film-checkbox:checked { - background: var(--gold); - border-color: var(--gold); -} - -.film-checkbox:checked::after { - content: '✓'; - color: var(--dark); - position: absolute; - top: 50%; left: 50%; - transform: translate(-50%, -50%); - font-size: 12px; - font-weight: bold; -} - -/* ══════════════════════════════════════════════════════════════ - ISOLATION ET AJUSTEMENTS FINAUX - ══════════════════════════════════════════════════════════════ */ - -/* Isolation stricte du body pour contrer public.css */ -.admin-body { - padding: 2rem 1rem 4rem !important; - background: var(--dark) !important; - min-height: 100vh; -} - -/* Zone d'importation CSV améliorée */ +/* Zone d'import CSV */ .import-box { - background: var(--surface2) !important; - border: 1px dashed rgba(201, 168, 76, 0.4) !important; - border-radius: 8px; - padding: 2rem; - text-align: center; - margin-bottom: 2rem; - transition: border-color 0.3s; + 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) !important; + 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: 2.4rem; - color: var(--gold); - display: block; - margin-bottom: 0.8rem; + font-size: 3rem; + color: var(--gold); + margin-bottom: 1rem; + display: block; } -/* Organisation de la Toolbar */ -.toolbar-container { - margin-bottom: 1.5rem; -} -.toolbar-actions { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 1rem; -} -#admin-subtitle { - color: var(--muted); - font-size: 0.85rem; - margin-top: 0.4rem; -} - -/* Alignement parfait de la case à cocher "Tout sélectionner" */ -#select-all-checkbox { - margin: 0 auto; - 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; + } } \ No newline at end of file