diff --git a/css/admin.css b/css/admin.css index 417b877..7534404 100644 --- a/css/admin.css +++ b/css/admin.css @@ -673,4 +673,287 @@ input[type="checkbox"]:checked::after { font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 4px; +} + +/* ══════════════════════════════════════════════════════════════ + RESPONSIVE MOBILE (dashboard.html) + ═══════════════════════════════════════════════════════════════ */ + +@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 ═══ */ + .table-container { + border-radius: 10px; + background: transparent; + box-shadow: none; + border: none; + } + + .admin-table, + .admin-table thead, + .admin-table tbody, + .admin-table th, + .admin-table td, + .admin-table tr { + display: block; + } + + /* Cacher l'en-tête du tableau */ + .admin-table thead { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + } + + /* Chaque ligne devient une carte */ + .admin-table tbody tr { + background: var(--surface-card); + border: 1px solid var(--border); + border-radius: 10px; + margin-bottom: 0.8rem; + padding: 0.8rem; + box-shadow: 0 2px 8px rgba(0,0,0,0.3); + } + + .admin-table tbody tr:hover { + background: var(--surface-card); + transform: none; + } + + /* Cellules en flex */ + .admin-table td { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.4rem 0; + border-bottom: 1px solid rgba(255,255,255,0.04); + font-size: 0.88rem; + } + + .admin-table td:last-child { + border-bottom: none; + padding-bottom: 0; + } + + /* Checkbox : pleine largeur en haut */ + .admin-table td:first-child { + justify-content: flex-end; + padding-bottom: 0.6rem; + border-bottom: 1px solid var(--border); + margin-bottom: 0.4rem; + } + + /* Affiche : centrée avec taille augmentée */ + .admin-table td:nth-child(2) { + justify-content: center; + padding: 0.6rem 0; + } + .thumb { + width: 70px; + height: 100px; + border-radius: 6px; + } + .thumb-ph { + width: 70px; + height: 100px; + } + + /* Titre : mis 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 */ + .admin-table td:nth-child(4)::before { + content: 'Année'; + font-size: 0.7rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-right: 0.5rem; + } + .admin-table td:nth-child(5)::before { + content: 'Réal.'; + font-size: 0.7rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-right: 0.5rem; + } + + /* 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; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.05em; + } + + /* Actions : boutons plus grands pour le tactile */ + .admin-table td:nth-child(7) { + justify-content: flex-end; + gap: 0.5rem; + padding-top: 0.6rem; + } + .tbl-actions button { + width: 40px; + height: 40px; + font-size: 1.2rem; + border-radius: 8px; + background: var(--surface); + border: 1px solid var(--border); + } + .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; + } } \ No newline at end of file