Actualiser css/admin.css

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; }
+/* Conteneur principal plus large pour le tableau */
-
+.admin-wrap {
-:root {
+  max-width: 1200px;
-  --gold:       #C9A84C;
+  padding-top: 3rem;
-  --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;
 }
 
-body {
+/* En-tête */
-  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; }
-
 .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;
+  padding-bottom: 2rem;
-  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;
   margin-bottom: 2rem;
-  border-bottom: 1px solid var(--border);
+  text-align: left;
-  padding-bottom: 0.5rem;
 }
 
-.tab-btn {
+.header-titles {
-  background: transparent;
+  margin: 0;
-  border: none;
+}
-  color: var(--muted);
+
-  padding: 0.55rem 1.2rem;
+.header-actions {
-  font-family: 'DM Sans', sans-serif;
+  display: flex;
-  font-size: 0.88rem;
+  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); }
+.btn-action:hover {
-.tab-btn.active { color: var(--gold); background: rgba(201,168,76,0.08); }
+  border-color: var(--gold);
+  background: var(--gold-dim);
+}
 
-/* ══════════════════════════════════════════════════════════════
+.btn-action.outline.danger:hover {
-   BOUTONS GÉNÉRAUX
+  border-color: #ff6b6b;
-   ══════════════════════════════════════════════════════════════ */
+  background: rgba(255, 107, 107, 0.1);
-.btn {
+  color: #ff6b6b;
-  display: inline-flex;
+}
+
+.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;
+  margin-bottom: 1.5rem;
-  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;
 }
 
-.btn-gold    { background: var(--gold); color: var(--dark); }
+.bulk-actions-bar {
-.btn-gold:hover { background: var(--gold-light); }
+  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; }
+@keyframes slideDown {
-.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 
-.btn-danger  { background: transparent; border: 1px solid #555; color: #C0BBBB; }
+/* Tableau */
-.btn-danger:hover { border-color: var(--red); color: var(--red); }
+.table-container {
-
+  background: var(--surface-card);
-.btn-primary { background: var(--gold); color: var(--dark); font-weight: 600; }
+  border: 1px solid var(--border);
-.btn-primary:hover { background: var(--gold-light); }
+  border-radius: 12px;
-
+  overflow: hidden;
-/* ══════════════════════════════════════════════════════════════
+  box-shadow: var(--shadow-cinematic);
-   TABLEAU
+}
-   ══════════════════════════════════════════════════════════════ */
-.admin-table-wrap { overflow-x: auto; }
 
 .admin-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.85rem;
+  font-size: 0.95rem;
 }
 
 .admin-table th {
-  text-align: left;
+  background: var(--surface);
-  font-size: 0.7rem;
+  color: var(--muted);
-  letter-spacing: 0.12em;
+  font-weight: 500;
-  text-transform: uppercase;
+  padding: 1.2rem 1rem;
-  color: #B8B4B0;
-  padding: 0.6rem 0.8rem;
   border-bottom: 1px solid var(--border);
-  font-weight: 600;
+  text-align: left;
 }
 
 .admin-table td {
-  padding: 0.75rem 0.8rem;
+  padding: 0.8rem 1rem;
-  border-bottom: 1px solid rgba(255,255,255,0.04);
+  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;
+  border-radius: 4px;
-  display: block;
   border: 1px solid var(--border);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
 }
 
 .thumb-ph {
-  width: 36px; height: 54px;
+  width: 45px;
-  background: var(--surface2);
+  height: 65px;
-  border-radius: 3px;
+  background: var(--surface);
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--muted);
-  font-size: 1rem;
+  border: 1px solid var(--border);
-  border: 1px dashed 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;
+  padding: 0.3rem 0.8rem;
-  width: 100%;
+  border-radius: 20px;
-  max-width: 540px;
+  font-size: 0.8rem;
-  max-height: 92vh;
+  color: var(--gold);
-  overflow-y: auto;
+  display: inline-block;
-  padding: 2rem;
+  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;
+  transition: all 0.2s;
-  scrollbar-color: var(--border) transparent;
+}
+
+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;
+  top: 1.5rem; right: 1.5rem;
-  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;
   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 {
+.modal-close:hover {
-  font-family: 'Playfair Display', serif;
+  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 {
+/* Formulaires */
-  width: 100%;
+.form-grid {
-  background: var(--surface2);
+  display: grid;
-  border: 1px solid rgba(255,255,255,0.1);
+  grid-template-columns: 1fr 1fr;
-  color: var(--text);
+  gap: 1.2rem;
-  font-family: 'DM Sans', sans-serif;
+}
+
+.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;
+  color: var(--muted);
-  border-radius: 4px;
+  font-weight: 500;
-  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;
 }
 
-/* ══════════════════════════════════════════════════════════════
+.form-group input, 
-   RESPONSIVE
+.form-group textarea, 
-   ══════════════════════════════════════════════════════════════ */
+.form-group select {
-@media (max-width: 600px) {
+  width: 100%;
-  .form-row { grid-template-columns: 1fr; }
+  padding: 0.8rem 1rem;
-  .admin-header { flex-direction: column; align-items: flex-start; }
+  background: var(--background);
-  .admin-actions { width: 100%; }
-  .modal { padding: 1.5rem; }
-}
-
-/* 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;
+  color: var(--text);
-    background: var(--surface2);
+  border-radius: 8px;
-    cursor: pointer;
+  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;
 }
 
-.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 */
-.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;
-}
 .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;
+  font-size: 3rem;
   color: var(--gold);
-    display: block;
+  margin-bottom: 1rem;
-    margin-bottom: 0.8rem;
-}
-
-/* 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;
+  }
+}