/* ==========================================================================
   TS3JOKE — Design system central (thèmes clair / sombre)
   Source unique des couleurs, typographies, rayons, ombres et composants.
   Utilisé par : site public, espace membre, administration, connexion, erreurs.
   Le thème est porté par <html data-theme="light|dark"> (voir theme.js).
   ========================================================================== */

/* ---------- 1. Jetons communs ---------- */
:root {
  --ds-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-display: 'Syne', 'DM Sans', system-ui, sans-serif;
  --ds-radius-sm: 6px;
  --ds-radius: 10px;
  --ds-radius-lg: 14px;
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px;
  --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px;
  --ds-control-h: 40px;
  --ds-ease: cubic-bezier(.4, 0, .2, 1);
  --ds-dur: .18s;
  --ds-brand: #e8252a;          /* rouge TS3Joke */
  --ds-brand-2: #ff6a00;        /* orange TS3Joke */
}

/* ---------- 2. Thème sombre (valeurs d'origine conservées) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --ds-bg: #0b0f1a;
  --ds-surface: #0d1220;
  --ds-surface-2: #131a2b;
  --ds-hover: rgba(255,255,255,.05);
  --ds-hover-solid: #1c2735;
  --ds-border: rgba(99,179,237,.14);
  --ds-border-soft: rgba(99,179,237,.07);
  --ds-border-strong: rgba(99,179,237,.26);
  --ds-text: #e8eef8;
  --ds-text-2: #9fb0c8;
  --ds-muted: #8093b3;
  --ds-hint: #566884;
  --ds-primary: #63b3ed;
  --ds-primary-strong: #3b82f6;
  --ds-on-primary: #06101f;
  --ds-primary-soft: rgba(99,179,237,.14);
  --ds-success: #68d391;  --ds-success-soft: rgba(104,211,145,.14);
  --ds-warning: #f6ad55;  --ds-warning-soft: rgba(246,173,85,.14);
  --ds-danger:  #fc8181;  --ds-danger-soft:  rgba(252,129,129,.14);
  --ds-info:    #63b3ed;  --ds-info-soft:    rgba(99,179,237,.14);
  --ds-purple:  #b794f4;  --ds-purple-soft:  rgba(183,148,244,.14);
  --ds-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --ds-focus: 0 0 0 3px rgba(99,179,237,.35);
  --ds-overlay: rgba(3,6,12,.72);
}

/* ---------- 3. Thème clair ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --ds-bg: #f3f5fa;
  --ds-surface: #ffffff;
  --ds-surface-2: #eceff6;
  --ds-hover: rgba(15,23,42,.045);
  --ds-hover-solid: #e6ebf5;
  --ds-border: rgba(15,23,42,.11);
  --ds-border-soft: rgba(15,23,42,.06);
  --ds-border-strong: rgba(15,23,42,.2);
  --ds-text: #0f172a;
  --ds-text-2: #3d4b63;
  --ds-muted: #56657c;
  --ds-hint: #8793a8;
  --ds-primary: #2563eb;
  --ds-primary-strong: #2563eb;
  --ds-on-primary: #ffffff;
  --ds-primary-soft: rgba(37,99,235,.1);
  --ds-success: #047857;  --ds-success-soft: rgba(4,120,87,.1);
  --ds-warning: #b45309;  --ds-warning-soft: rgba(180,83,9,.1);
  --ds-danger:  #c81e1e;  --ds-danger-soft:  rgba(200,30,30,.09);
  --ds-info:    #0369a1;  --ds-info-soft:    rgba(3,105,161,.1);
  --ds-purple:  #6d28d9;  --ds-purple-soft:  rgba(109,40,217,.09);
  --ds-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.07);
  --ds-focus: 0 0 0 3px rgba(37,99,235,.28);
  --ds-overlay: rgba(15,23,42,.5);
}

/* ---------- 4. Pont vers les anciennes variables des layouts ----------
   Les pages existantes utilisent encore leurs variables locales (--bg, --surface,
   --bg-card, --text-primary…). On les redirige vers les jetons centraux :
   plus aucune page n'a besoin d'être modifiée pour changer de thème.        */
html[data-theme] {
  /* espace membre */
  --bg: var(--ds-bg); --surface: var(--ds-surface); --surface2: var(--ds-surface-2);
  --border: var(--ds-border); --border2: var(--ds-border-soft);
  --accent: var(--ds-primary); --accent2: var(--ds-warning); --accent3: var(--ds-success);
  --danger: var(--ds-danger); --purple: var(--ds-purple);
  --text: var(--ds-text); --muted: var(--ds-muted);
  /* administration */
  --bg-root: var(--ds-bg); --bg-surface: var(--ds-surface); --bg-hover: var(--ds-hover);
  --border-md: var(--ds-border-strong);
  --text-primary: var(--ds-text); --text-muted: var(--ds-muted); --text-hint: var(--ds-hint);
  --accent-blue: var(--ds-primary-strong); --accent-purple: var(--ds-purple);
  /* site public */
  --bg-void: var(--ds-bg); --bg-deep: var(--ds-bg); --bg-card: var(--ds-surface);
  --bg-card-alt: var(--ds-surface-2);
  --border-dim: var(--ds-border); --border-fire: rgba(232,37,42,.4);
  --text-secondary: var(--ds-text-2);
  /* typographies et formes */
  --font-sans: var(--ds-font-sans); --font-display: var(--ds-font-display);
  --font-body: var(--ds-font-sans); --radius: var(--ds-radius); --radius-lg: var(--ds-radius-lg);
  --radius-sm: var(--ds-radius-sm); --radius-md: var(--ds-radius);
}
html[data-theme="light"] { --bg-hover: var(--ds-hover-solid); }
html[data-theme="dark"]  { --bg-hover: var(--ds-hover-solid); }

/* ---------- 5. Base ---------- */
html[data-theme] body {
  background: var(--ds-bg); color: var(--ds-text);
  font-family: var(--ds-font-sans); -webkit-font-smoothing: antialiased;
}
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] .page-title {
  font-family: var(--ds-font-display); color: var(--ds-text); letter-spacing: -.01em;
}
html[data-theme] a:not([class]) { color: var(--ds-primary); }
html[data-theme] hr { border-color: var(--ds-border); opacity: 1; }
html[data-theme] ::selection { background: var(--ds-primary-soft); color: var(--ds-text); }
html[data-theme] .text-muted, html[data-theme] .muted { color: var(--ds-muted) !important; }
html:not([data-theme-ready]) body { transition: none; }
html[data-theme-ready] body, html[data-theme-ready] .ts-card, html[data-theme-ready] .admin-card,
html[data-theme-ready] #sidebar, html[data-theme-ready] #page-header {
  transition: background-color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}

/* ---------- 6. Accessibilité ---------- */
html[data-theme] :focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 7. Cartes ---------- */
html[data-theme] .ts-card, html[data-theme] .admin-card, html[data-theme] .ts-stat-card,
html[data-theme] .card, html[data-theme] .block {
  background: var(--ds-surface); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow);
}
html[data-theme] .ts-card-header, html[data-theme] .admin-card-header, html[data-theme] .card-header,
html[data-theme] .block-header {
  background: transparent; border-bottom: 1px solid var(--ds-border); color: var(--ds-text);
}
html[data-theme] .ts-card-body, html[data-theme] .admin-card-body { padding: var(--ds-space-5); }
html[data-theme] .card-footer { background: transparent; border-top: 1px solid var(--ds-border); }

/* ---------- 8. Boutons ---------- */
html[data-theme] .ts-btn, html[data-theme] .btn-admin, html[data-theme] .btn {
  min-height: var(--ds-control-h); border-radius: var(--ds-radius); font-family: var(--ds-font-sans);
  font-weight: 600; transition: background-color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
html[data-theme] .ts-btn-primary, html[data-theme] .btn-admin-primary, html[data-theme] .btn-primary {
  background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary);
}
html[data-theme] .ts-btn-primary:hover, html[data-theme] .btn-admin-primary:hover, html[data-theme] .btn-primary:hover {
  filter: brightness(1.08); color: var(--ds-on-primary);
}
html[data-theme] .ts-btn-outline, html[data-theme] .btn-admin-ghost, html[data-theme] .btn-outline-secondary {
  background: transparent; color: var(--ds-text); border: 1px solid var(--ds-border-strong);
}
html[data-theme] .ts-btn-outline:hover, html[data-theme] .btn-admin-ghost:hover, html[data-theme] .btn-outline-secondary:hover {
  background: var(--ds-hover); color: var(--ds-text);
}
html[data-theme] .btn-admin-danger, html[data-theme] .btn-danger {
  background: var(--ds-danger-soft); color: var(--ds-danger); border: 1px solid var(--ds-danger);
}
html[data-theme] .btn-admin-success, html[data-theme] .btn-success {
  background: var(--ds-success-soft); color: var(--ds-success); border: 1px solid var(--ds-success);
}
html[data-theme] .ts-btn-sm { min-height: 32px; }

/* ---------- 9. Formulaires ---------- */
html[data-theme] .ts-input, html[data-theme] .ts-select, html[data-theme] .form-control,
html[data-theme] .form-select, html[data-theme] .input-group-text, html[data-theme] textarea,
html[data-theme] select.form-control, html[data-theme] .otp-input {
  background: var(--ds-surface-2); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius); min-height: var(--ds-control-h);
  font-family: var(--ds-font-sans);
}
html[data-theme] textarea { min-height: 96px; }
html[data-theme] .ts-input:focus, html[data-theme] .ts-select:focus, html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus, html[data-theme] textarea:focus {
  background: var(--ds-surface); border-color: var(--ds-primary); box-shadow: var(--ds-focus); color: var(--ds-text);
}
html[data-theme] ::placeholder { color: var(--ds-hint); opacity: 1; }
html[data-theme] .ts-label, html[data-theme] .form-label, html[data-theme] .form-row-label {
  color: var(--ds-text-2); font-weight: 600; font-size: .85rem;
}
html[data-theme] .form-check-input { background-color: var(--ds-surface-2); border-color: var(--ds-border-strong); }
html[data-theme] .form-check-input:checked { background-color: var(--ds-primary); border-color: var(--ds-primary); }
html[data-theme] option { background: var(--ds-surface); color: var(--ds-text); }

/* ---------- 10. Tableaux & DataTables ---------- */
html[data-theme] .table, html[data-theme] .admin-table {
  --bs-table-bg: transparent; --bs-table-color: var(--ds-text); --bs-table-border-color: var(--ds-border);
  --bs-table-hover-bg: var(--ds-hover); --bs-table-striped-bg: var(--ds-hover); color: var(--ds-text);
}
html[data-theme] .table > :not(caption) > * > *, html[data-theme] .admin-table td, html[data-theme] .admin-table th {
  border-color: var(--ds-border); background-color: transparent; color: var(--ds-text);
}
html[data-theme] .table thead th, html[data-theme] .admin-table thead th {
  color: var(--ds-muted); font-weight: 600; font-size: .78rem; background: var(--ds-surface-2);
}
html[data-theme] .table-responsive { border-radius: var(--ds-radius); }
html[data-theme] .dataTables_wrapper, html[data-theme] .dataTables_info, html[data-theme] .dataTables_length,
html[data-theme] .dataTables_filter, html[data-theme] .dataTables_paginate { color: var(--ds-text-2); }
html[data-theme] .dataTables_filter input, html[data-theme] .dataTables_length select {
  background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
}
html[data-theme] .page-link { background: var(--ds-surface); color: var(--ds-text-2); border-color: var(--ds-border); }
html[data-theme] .page-item.active .page-link { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); }
html[data-theme] .page-item.disabled .page-link { background: var(--ds-surface-2); color: var(--ds-hint); }

/* ---------- 11. Navigation, menus, modales ---------- */
html[data-theme] .dropdown-menu, html[data-theme] .ts-dropdown-menu, html[data-theme] .modal-content,
html[data-theme] .popover, html[data-theme] .list-group-item {
  background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow);
  border-radius: var(--ds-radius);
}
html[data-theme] .dropdown-item { color: var(--ds-text-2); }
html[data-theme] .dropdown-item:hover, html[data-theme] .dropdown-item:focus { background: var(--ds-hover); color: var(--ds-text); }
html[data-theme] .modal-header, html[data-theme] .modal-footer { border-color: var(--ds-border); }
html[data-theme] .modal-backdrop { --bs-backdrop-bg: var(--ds-overlay); --bs-backdrop-opacity: 1; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
html[data-theme] .nav-tabs { border-color: var(--ds-border); }
html[data-theme] .nav-tabs .nav-link { color: var(--ds-muted); }
html[data-theme] .nav-tabs .nav-link.active { background: var(--ds-surface); color: var(--ds-text); border-color: var(--ds-border) var(--ds-border) var(--ds-surface); }
html[data-theme] #sidebar, html[data-theme] #page-header { background: var(--ds-surface); border-color: var(--ds-border); }

/* ---------- 12. Alertes & badges ---------- */
html[data-theme] .ts-alert, html[data-theme] .admin-alert, html[data-theme] .alert {
  border-radius: var(--ds-radius); border: 1px solid var(--ds-border); background: var(--ds-surface-2); color: var(--ds-text);
}
html[data-theme] .alert-success { background: var(--ds-success-soft); border-color: var(--ds-success); color: var(--ds-success); }
html[data-theme] .alert-danger  { background: var(--ds-danger-soft);  border-color: var(--ds-danger);  color: var(--ds-danger); }
html[data-theme] .alert-warning { background: var(--ds-warning-soft); border-color: var(--ds-warning); color: var(--ds-warning); }
html[data-theme] .alert-info    { background: var(--ds-info-soft);    border-color: var(--ds-info);    color: var(--ds-info); }
html[data-theme] .badge-pill, html[data-theme] .ts-badge { border-radius: 999px; font-weight: 600; }

/* ---------- 13. Bibliothèques tierces ---------- */
html[data-theme] .swal2-popup { background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); }
html[data-theme] .swal2-title, html[data-theme] .swal2-html-container { color: var(--ds-text); }
html[data-theme] .swal2-container.swal2-backdrop-show { background: var(--ds-overlay); }
html[data-theme] .select2-container--default .select2-selection--single,
html[data-theme] .select2-container--default .select2-selection--multiple {
  background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); min-height: var(--ds-control-h);
}
html[data-theme] .select2-container--default .select2-selection__rendered { color: var(--ds-text); line-height: calc(var(--ds-control-h) - 2px); }
html[data-theme] .select2-dropdown { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-text); }
html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ds-primary); color: var(--ds-on-primary); }
html[data-theme] .flatpickr-calendar, html[data-theme] .datepicker-dropdown { background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow); }
html[data-theme] .sceditor-container, html[data-theme] .ck.ck-editor__main > .ck-editor__editable {
  background: var(--ds-surface-2); color: var(--ds-text); border-color: var(--ds-border);
}
html[data-theme] .ck.ck-toolbar { background: var(--ds-surface); border-color: var(--ds-border); }

/* ---------- 14. Barres de défilement ---------- */
html[data-theme] { scrollbar-color: var(--ds-border-strong) transparent; }
html[data-theme] ::-webkit-scrollbar-track { background: var(--ds-bg); }
html[data-theme] ::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 3px; }

/* ---------- 15. Bouton de bascule de thème ---------- */
.ds-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border-radius: var(--ds-radius); border: 1px solid var(--ds-border); background: var(--ds-surface-2);
  color: var(--ds-text-2); cursor: pointer; line-height: 1;
}
.ds-theme-toggle:hover { color: var(--ds-text); background: var(--ds-hover-solid); }
.ds-theme-toggle .ds-ico-sun { display: none; }
html[data-theme="dark"] .ds-theme-toggle .ds-ico-sun { display: block; }
html[data-theme="dark"] .ds-theme-toggle .ds-ico-moon { display: none; }
.ds-theme-toggle--floating { position: fixed; top: 14px; right: 14px; z-index: 1080; box-shadow: var(--ds-shadow); }

/* ---------- 16. Responsive ---------- */
@media (max-width: 991.98px) {
  html[data-theme] .ts-card-body, html[data-theme] .admin-card-body { padding: var(--ds-space-4); }
  html[data-theme] .table-responsive, html[data-theme] .dataTables_wrapper { overflow-x: auto; }
}
@media (max-width: 575.98px) {
  html[data-theme] .ts-btn, html[data-theme] .btn-admin { width: auto; }
  html[data-theme] .modal-dialog { margin: var(--ds-space-3); }
  .ds-theme-toggle--floating { top: 10px; right: 10px; }
}

/* ---------- 17. Mise en page commune : espacements, titres, navigation ---------- */
html[data-theme] .content { padding: var(--ds-space-6) var(--ds-space-5); max-width: 1440px; margin-inline: auto; }
html[data-theme] .page-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; margin: 0 0 var(--ds-space-5); }
html[data-theme] .ts-card, html[data-theme] .admin-card, html[data-theme] .ts-stat-card { margin-bottom: var(--ds-space-5); }
html[data-theme] .ts-card-header, html[data-theme] .admin-card-header {
  display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5);
}
html[data-theme] .ts-card-title { font-size: 1rem; font-weight: 700; margin: 0; }
html[data-theme] .ts-form-group, html[data-theme] .form-row { margin-bottom: var(--ds-space-4); }
html[data-theme] .ts-stat-card { padding: var(--ds-space-5); }
html[data-theme] .ts-stat-val { font-family: var(--ds-font-display); font-weight: 700; }
html[data-theme] .table > :not(caption) > * > *, html[data-theme] .admin-table td, html[data-theme] .admin-table th {
  padding: var(--ds-space-3) var(--ds-space-4); vertical-align: middle;
}
html[data-theme] .filter-tab {
  border-radius: 999px; border: 1px solid var(--ds-border); background: transparent; color: var(--ds-text-2);
  padding: 6px 14px; font-weight: 600;
}
html[data-theme] .filter-tab.active, html[data-theme] .filter-tab:hover {
  background: var(--ds-primary-soft); color: var(--ds-primary); border-color: var(--ds-primary);
}
/* barre du site public */
html[data-theme] .ts-navbar { background: color-mix(in srgb, var(--ds-bg) 88%, transparent); border-bottom: 1px solid var(--ds-border); backdrop-filter: blur(12px); }
html[data-theme] .ts-nav-link { color: var(--ds-text-2); }
html[data-theme] .ts-nav-link:hover, html[data-theme] .ts-nav-link.active { color: var(--ds-text); }
html[data-theme] .ts-nav-auth { display: flex; align-items: center; gap: var(--ds-space-3); }
/* mobile : la règle ci-dessus (plus spécifique) réaffichait boutons + bascule à côté du burger */
html[data-theme] .ts-nav-theme-m { display: none; }
@media (max-width: 991px) {
  html[data-theme] .ts-nav-auth, html[data-theme] .ts-nav-links { display: none; }
  html[data-theme] .ts-nav-theme-m { display: flex; margin-left: auto; }
  html[data-theme] .ts-burger { margin-left: 0; }
  html[data-theme] .ts-nav { gap: 12px; }
}
html[data-theme] .btn-ghost { color: var(--ds-text); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius); background: transparent; }
html[data-theme] .btn-ghost:hover { background: var(--ds-hover); }
@media (max-width: 991.98px) {
  html[data-theme] .content { padding: var(--ds-space-5) var(--ds-space-4); }
  html[data-theme] .ts-card-header, html[data-theme] .admin-card-header { padding: var(--ds-space-3) var(--ds-space-4); flex-wrap: wrap; }
}

/* ---------- 18. Logo : « TS3 » suit le thème (blanc en sombre, encre en clair) ---------- */
html[data-theme] .ds-logo-ts3 { fill: var(--ds-text); }

/* ---------- 19. Menu latéral : l'administration reprend exactement le menu client ---------- */
html[data-theme] .sidebar-user { padding: 18px 22px; border-bottom: 1px solid var(--ds-border-soft); display: flex; align-items: center; gap: 12px; }
html[data-theme] .s-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ds-primary-strong), #4299e1); color: #fff; font-weight: 700; font-size: 13.6px;
}
html[data-theme] .s-user-name { font-weight: 600; font-size: 14.08px; color: var(--ds-text); }
html[data-theme] .s-user-role {
  font-size: 10.88px; color: var(--ds-primary); background: var(--ds-primary-soft); padding: 2px 7px; border-radius: 99px; display: inline-block; margin-top: 3px;
}
html[data-theme] #admin-sidebar .nav-section,
html[data-theme] #sidebar .nav-section {
  font-size: 9.92px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: var(--ds-muted); padding: 14px 12px 5px;
}

/* ---------- 20. Notifications : même rendu côté client et côté administration ---------- */
html[data-theme] .notif-btn, html[data-theme] #notif-btn, html[data-theme] .ds-theme-toggle {
  position: relative; width: 36px; height: 36px; padding: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-surface-2); border: 1px solid var(--ds-border); color: var(--ds-muted); font-size: 13.6px; cursor: pointer;
}
html[data-theme] .notif-btn:hover, html[data-theme] #notif-btn:hover, html[data-theme] .ds-theme-toggle:hover {
  border-color: var(--ds-primary); color: var(--ds-text); background: var(--ds-surface-2);
}
html[data-theme] .notif-dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-danger); border: 2px solid var(--ds-surface); box-sizing: content-box;
}
html[data-theme] .notif-dropdown-menu, html[data-theme] #notif-menu {
  min-width: 280px; max-height: 360px; overflow-y: auto; padding: 6px; border-radius: 12px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow);
}
html[data-theme] #notif-menu .hdr-dropdown-label {
  padding: 10px 12px 6px; font-size: 11.52px; font-weight: 700; letter-spacing: 1px; color: var(--ds-muted); text-transform: uppercase;
}
html[data-theme] .notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none;
  color: var(--ds-text); border-bottom: 1px solid var(--ds-border-soft); transition: background var(--ds-dur) var(--ds-ease);
}
html[data-theme] .notif-item:last-of-type { border-bottom: 0; }
html[data-theme] .notif-item:hover { background: var(--ds-primary-soft); }
html[data-theme] .notif-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 12.8px; }
html[data-theme] .notif-icon.order  { background: var(--ds-info-soft);    color: var(--ds-primary); }
html[data-theme] .notif-icon.ts     { background: var(--ds-purple-soft);  color: var(--ds-purple); }
html[data-theme] .notif-icon.ticket { background: var(--ds-warning-soft); color: var(--ds-warning); }
html[data-theme] .notif-body .notif-msg, html[data-theme] .notif-text .notif-msg { font-size: 12.48px; font-weight: 500; line-height: 1.4; color: var(--ds-text); }
html[data-theme] .notif-body .notif-time, html[data-theme] .notif-text .notif-time { font-size: 10.88px; color: var(--ds-muted); margin-top: 2px; }
html[data-theme] .ts-empty { text-align: center; padding: 36px 20px; color: var(--ds-muted); }
html[data-theme] .ts-empty i, html[data-theme] .ts-empty svg { display: block; margin: 0 auto 10px; opacity: .3; font-size: 35.2px; }
html[data-theme] .ts-empty p { font-size: 13.12px; margin: 0; }
html[data-theme] #admin-header .header-right, html[data-theme] .topbar-right { display: flex; align-items: center; gap: 10px; }
html[data-theme] .ds-theme-toggle--floating { position: fixed; top: 14px; right: 14px; }

/* ---------- 21. Widgets tiers réellement utilisés (select2, SCEditor) : lisibles en clair comme en sombre ---------- */
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ds-hint); }
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ds-muted); }
html[data-theme] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
}
html[data-theme] .select2-container--default .select2-results__option { color: var(--ds-text); }
html[data-theme] .select2-container--default .select2-results__option[aria-selected=true] { background: var(--ds-primary-soft); }
html[data-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--ds-primary-soft); border: 1px solid var(--ds-border); color: var(--ds-text);
}
html[data-theme] .select2-container--default.select2-container--open .select2-selection--single,
html[data-theme] .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--ds-primary); }
html[data-theme] .sceditor-container { border-color: var(--ds-border); }
html[data-theme] .sceditor-container textarea { background: var(--ds-surface-2); color: var(--ds-text); }