/* ============================================================
   da-2026.css — Direction artistique mda_compta (mai 2026)
   ------------------------------------------------------------
   Wrapper unique `.da` à mettre sur le <div> englobant la page.
   Hérité par toutes les pages refondues (sales/show, conventions/*,
   statements/my, reinstructions/list, cra/index, users/edit, signatures).

   Palette : indigo #6366f1 / violet #8b5cf6 / rose #ec4899
   Fonts   : Manrope (body) + Bricolage Grotesque (display)
   Radius  : 11px inputs · 14px alerts · 18px cards · 20px hero/modal · 999px pills
   ============================================================ */

.da {
  --ink:      #0f172a;
  --ink-2:    #1e293b;
  --muted:    #64748b;
  --muted-2:  #94a3b8;
  --line:     #e2e8f0;
  --line-2:   #f1f5f9;
  --bg:       #f8fafc;
  --surface:  #ffffff;
  --indigo:   #6366f1;
  --indigo-2: #4f46e5;
  --violet:   #8b5cf6;
  --rose:     #ec4899;
  --emerald:  #10b981;
  --amber:    #f59e0b;
  --red:      #f43f5e;
  --sky:      #0ea5e9;

  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 2rem;
}
.da h1, .da h2, .da h3, .da h4, .da h5, .da h6, .da legend {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ============ Hero ============ */
.da-hero {
  border-radius: 20px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(99,102,241,.18) 0%, transparent 60%),
    radial-gradient(120% 180% at 100% 100%, rgba(139,92,246,.18) 0%, transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.da-hero-pill {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%);
  color: #fff; font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(99,102,241,.32);
  flex-shrink: 0;
}
.da-hero-body { flex: 1 1 auto; min-width: 0; }
.da-hero h1, .da-hero .h1 {
  font-size: 1.55rem; font-weight: 700; margin: 0;
}
.da-hero-sub { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.da-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.da-hero-cta {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%);
  color: #fff !important;
  border: none;
  border-radius: 12px;
  padding: .7rem 1.2rem;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 8px 20px rgba(99,102,241,.32);
  transition: transform .18s, box-shadow .18s;
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
}
.da-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(99,102,241,.42);
  color: #fff;
}
.da-hero-back {
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  padding: .65rem 1.1rem;
  font-weight: 600;
  font-size: .88rem;
  transition: all .18s;
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none;
}
.da-hero-back:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: rgba(99,102,241,.06);
}

/* ============ Cards ============ */
.da .da-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
  transition: box-shadow .22s ease;
  overflow: hidden;
}
.da .da-card:hover { box-shadow: 0 10px 28px rgba(15,23,42,.08); }
.da .da-card .card-body { padding: 1.25rem 1.35rem; }
.da .da-card-header {
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.02));
  border-bottom: 1px solid var(--line);
  padding: .9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.da .da-card-header h2,
.da .da-card-header h3,
.da .da-card-header h5 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
}
.da .da-card-header i.bi,
.da .da-card-header svg { color: var(--indigo); flex-shrink: 0; }

/* Override Bootstrap .card pour intégration progressive */
.da .card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
}

/* ============ Inputs ============ */
.da .form-label,
.da label.form-label,
.da legend {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.da .form-control,
.da .form-select,
.da textarea.form-control {
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: .92rem;
  padding: .6rem .85rem;
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.da .form-control:focus,
.da .form-select:focus,
.da textarea.form-control:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
  outline: none;
}
.da .form-control:disabled,
.da .form-control[readonly],
.da .form-select:disabled {
  background: #f8fafc;
  color: var(--muted);
  border-color: var(--line-2);
}
.da .input-group-text {
  background: #f8fafc;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
  padding: .6rem .8rem;
}
.da .form-check-input {
  width: 1.15rem; height: 1.15rem;
  border-radius: 6px;
  border: 1.5px solid var(--muted-2);
  transition: all .18s;
  cursor: pointer;
}
.da .form-check-input:checked {
  background-color: var(--indigo);
  border-color: var(--indigo);
}
.da .form-check-input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}
.da .form-check-label {
  font-size: .88rem;
  color: var(--ink-2);
  font-weight: 500;
}
.da .form-text { color: var(--muted); font-size: .78rem; }

/* ============ Buttons (DA 2026 — premium gradient) ============ *
 * Règle d'or : tout bouton avec un background gradient (primary/success/
 * warning/danger/info) → texte BLANC sur tous les états (hover/focus/active),
 * incluant les <i>/<svg> enfants. Subtle inner highlight + scale-on-press.
 */
.da .btn{
  letter-spacing: 0;
  text-decoration: none;
}
.da .btn:focus,
.da .btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.22) !important;
}

/* ─── Primary (indigo→violet) ─── */
.da .btn-primary,
.da .btn-mda-primary {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: .7rem 1.4rem !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  color: #fff !important;
  box-shadow:
    0 8px 20px rgba(99,102,241,.32),
    0 1px 0 rgba(255,255,255,.18) inset !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.da .btn-primary > *,
.da .btn-mda-primary > *,
.da .btn-primary i.bi,
.da .btn-mda-primary i.bi,
.da .btn-primary svg,
.da .btn-mda-primary svg{ color: #fff !important; fill: currentColor; }
.da .btn-primary:hover,
.da .btn-primary:focus,
.da .btn-primary:active,
.da .btn-mda-primary:hover,
.da .btn-mda-primary:focus,
.da .btn-mda-primary:active {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(99,102,241,.45),
    0 1px 0 rgba(255,255,255,.24) inset !important;
  color: #fff !important;
  filter: brightness(1.05);
}
.da .btn-primary:active,
.da .btn-mda-primary:active { transform: translateY(0) scale(.98); }
.da .btn-primary:disabled,
.da .btn-mda-primary:disabled,
.da .btn-primary.disabled,
.da .btn-mda-primary.disabled{
  background: linear-gradient(135deg, #94a3b8, #cbd5e1) !important;
  color: #fff !important;
  box-shadow: none !important;
  opacity: .7;
  cursor: not-allowed;
}

/* ─── Outline / Secondary / Light ─── */
.da .btn-secondary,
.da .btn-outline-secondary,
.da .btn-light,
.da .btn-outline-primary,
.da .btn-outline-dark {
  border-radius: 11px !important;
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  padding: .55rem 1rem !important;
  transition: all .18s ease;
}
.da .btn-secondary:hover,
.da .btn-outline-secondary:hover,
.da .btn-light:hover,
.da .btn-outline-primary:hover,
.da .btn-outline-dark:hover {
  border-color: var(--indigo) !important;
  color: var(--indigo) !important;
  background: rgba(99,102,241,.06) !important;
  transform: translateY(-1px);
}
.da .btn-secondary:active,
.da .btn-outline-secondary:active,
.da .btn-light:active,
.da .btn-outline-primary:active,
.da .btn-outline-dark:active { transform: translateY(0) scale(.98); }

/* ─── Success (emerald) ─── */
.da .btn-success {
  background: linear-gradient(135deg, var(--emerald) 0%, #059669 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: .65rem 1.2rem !important;
  box-shadow:
    0 8px 20px rgba(16,185,129,.28),
    0 1px 0 rgba(255,255,255,.18) inset !important;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.da .btn-success > *,
.da .btn-success i.bi,
.da .btn-success svg{ color: #fff !important; fill: currentColor; }
.da .btn-success:hover,
.da .btn-success:focus,
.da .btn-success:active {
  transform: translateY(-1px);
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(16,185,129,.42),
    0 1px 0 rgba(255,255,255,.22) inset !important;
  filter: brightness(1.05);
}
.da .btn-success:active { transform: translateY(0) scale(.98); }

/* ─── Warning (amber) ─── */
.da .btn-warning {
  background: linear-gradient(135deg, var(--amber) 0%, #d97706 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: .65rem 1.2rem !important;
  box-shadow:
    0 8px 20px rgba(245,158,11,.30),
    0 1px 0 rgba(255,255,255,.20) inset !important;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.da .btn-warning > *,
.da .btn-warning i.bi,
.da .btn-warning svg{ color: #fff !important; fill: currentColor; }
.da .btn-warning:hover,
.da .btn-warning:focus,
.da .btn-warning:active {
  transform: translateY(-1px);
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(245,158,11,.42),
    0 1px 0 rgba(255,255,255,.24) inset !important;
  filter: brightness(1.05);
}
.da .btn-warning:active { transform: translateY(0) scale(.98); }

/* ─── Danger (rose) ─── */
.da .btn-danger {
  background: linear-gradient(135deg, var(--red) 0%, #be123c 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: .65rem 1.2rem !important;
  box-shadow:
    0 8px 20px rgba(244,63,94,.28),
    0 1px 0 rgba(255,255,255,.18) inset !important;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.da .btn-danger > *,
.da .btn-danger i.bi,
.da .btn-danger svg{ color: #fff !important; fill: currentColor; }
.da .btn-danger:hover,
.da .btn-danger:focus,
.da .btn-danger:active {
  transform: translateY(-1px);
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(244,63,94,.42),
    0 1px 0 rgba(255,255,255,.22) inset !important;
  filter: brightness(1.05);
}
.da .btn-danger:active { transform: translateY(0) scale(.98); }

/* ─── Info (sky) ─── */
.da .btn-info {
  background: linear-gradient(135deg, var(--sky) 0%, #0284c7 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: .65rem 1.2rem !important;
  box-shadow:
    0 8px 20px rgba(14,165,233,.28),
    0 1px 0 rgba(255,255,255,.18) inset !important;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.da .btn-info > *,
.da .btn-info i.bi,
.da .btn-info svg{ color: #fff !important; fill: currentColor; }
.da .btn-info:hover,
.da .btn-info:focus,
.da .btn-info:active {
  transform: translateY(-1px);
  color: #fff !important;
  filter: brightness(1.05);
}
.da .btn-info:active { transform: translateY(0) scale(.98); }

/* ─── Sizes ─── */
.da .btn-sm {
  padding: .42rem .85rem !important;
  font-size: .82rem !important;
  border-radius: 10px !important;
}
.da .btn-lg {
  padding: .85rem 1.6rem !important;
  font-size: .95rem !important;
  border-radius: 14px !important;
}

/* ============ Alerts ============ */
.da .alert {
  border-radius: 14px;
  border: 1px solid transparent;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.da .alert-danger {
  background: linear-gradient(135deg, rgba(244,63,94,.08), rgba(244,63,94,.02));
  border-color: rgba(244,63,94,.32);
  border-left: 4px solid var(--red);
  color: #881337;
}
.da .alert-warning {
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
  border-color: rgba(245,158,11,.32);
  border-left: 4px solid var(--amber);
  color: #78350f;
}
.da .alert-info {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.04));
  border-color: rgba(99,102,241,.28);
  border-left: 4px solid var(--indigo);
  color: #3730a3;
}
.da .alert-success {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02));
  border-color: rgba(16,185,129,.32);
  border-left: 4px solid var(--emerald);
  color: #065f46;
}

/* ============ Tables ============ */
.da .table {
  margin-bottom: 0;
  font-size: .87rem;
  --bs-table-bg: transparent;
}
.da .table thead th {
  background: #f8fafc !important;
  color: var(--muted);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: .85rem .9rem;
  white-space: nowrap;
}
.da .table tbody td {
  padding: .85rem .9rem;
  border: none;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  color: var(--ink-2);
}
.da .table tbody tr { transition: background .15s; }
.da .table tbody tr:hover { background: #fafbff; }
.da .table tbody tr:last-child td { border-bottom: none; }
.da .table-bordered,
.da .table-bordered > * > *,
.da .table-bordered td,
.da .table-bordered th {
  border-color: var(--line-2) !important;
}

/* ============ Badges pill soft =============
   Stratégie : on neutralise les couleurs Bootstrap pleines (bg-primary, etc.)
   et on dérive un fond pastel + texte couleur forte + border subtil. */
.da .badge {
  border-radius: 999px !important;
  padding: .35rem .75rem !important;
  font-weight: 600 !important;
  font-size: .72rem !important;
  letter-spacing: .005em;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.da .badge.bg-primary,
.da .badge.text-bg-primary {
  background: rgba(99,102,241,.12) !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(99,102,241,.28);
}
.da .badge.bg-success,
.da .badge.text-bg-success {
  background: rgba(16,185,129,.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16,185,129,.28);
}
.da .badge.bg-warning,
.da .badge.text-bg-warning {
  background: rgba(245,158,11,.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245,158,11,.28);
}
.da .badge.bg-danger,
.da .badge.text-bg-danger {
  background: rgba(244,63,94,.12) !important;
  color: #e11d48 !important;
  border: 1px solid rgba(244,63,94,.28);
}
.da .badge.bg-info,
.da .badge.text-bg-info {
  background: rgba(14,165,233,.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14,165,233,.28);
}
.da .badge.bg-secondary,
.da .badge.text-bg-secondary {
  background: rgba(100,116,139,.12) !important;
  color: #475569 !important;
  border: 1px solid rgba(100,116,139,.28);
}
.da .badge.bg-light,
.da .badge.text-bg-light {
  background: var(--line-2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line);
}
.da .badge.bg-dark,
.da .badge.text-bg-dark {
  background: rgba(15,23,42,.92) !important;
  color: #fff !important;
}

/* ============ Modal ============ */
.da-modal .modal-content {
  border-radius: 20px !important;
  border: 1px solid var(--line) !important;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(15,23,42,.25);
}
.da-modal .modal-header {
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(99,102,241,.10) 0%, transparent 60%),
    linear-gradient(135deg, #fff 0%, #fafbff 100%);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 1.5rem;
}
.da-modal .modal-title {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.da-modal .modal-body { padding: 1.25rem 1.5rem; }
.da-modal .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--line) !important; gap: .5rem; }

/* ============ Liens ============ */
.da a:not(.btn):not(.nav-link):not(.dropdown-item):not(.da-hero-cta):not(.da-hero-back) {
  color: var(--indigo-2);
  text-decoration-color: rgba(99,102,241,.4);
  text-underline-offset: 3px;
}
.da a:not(.btn):not(.nav-link):not(.dropdown-item):not(.da-hero-cta):not(.da-hero-back):hover {
  color: var(--indigo);
}

/* ============ Pagination Bootstrap ============ */
.da .pagination .page-link {
  border-radius: 9px !important;
  margin: 0 2px;
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  font-weight: 600;
  font-size: .82rem;
  padding: .4rem .75rem;
}
.da .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%);
  border-color: transparent;
  color: #fff;
}
.da .pagination .page-link:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: rgba(99,102,241,.06);
}

/* ============ Dropdown menus ============ */
.da .dropdown-menu {
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px rgba(15,23,42,.12);
  padding: .35rem;
}
.da .dropdown-item {
  border-radius: 9px;
  padding: .5rem .75rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s;
}
.da .dropdown-item:hover,
.da .dropdown-item:focus,
.da .dropdown-item.active {
  background: rgba(99,102,241,.08);
  color: var(--indigo-2);
}

/* ============ List group ============ */
.da .list-group {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.da .list-group-item {
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: .85rem 1rem;
  font-size: .9rem;
  color: var(--ink-2);
}
.da .list-group-item:last-child { border-bottom: none; }
.da .list-group-item-action:hover,
.da .list-group-item-action:focus {
  background: rgba(99,102,241,.06);
  color: var(--indigo-2);
}

/* ============ Datatables compatibility ============ */
/* Padding sur les LIGNES de contrôles (top/bottom), le tableau reste edge-to-edge */
.da .da-card .dataTables_wrapper > .row {
  margin: 0;
  padding: .9rem 1.25rem;
  align-items: center;
}
.da .da-card .dataTables_wrapper > .row:first-child {
  border-bottom: 1px solid var(--line-2);
}
.da .da-card .dataTables_wrapper > .row:last-child {
  border-top: 1px solid var(--line-2);
}
.da .da-card .dataTables_wrapper > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.da .dataTables_wrapper .dataTables_length,
.da .dataTables_wrapper .dataTables_filter,
.da .dataTables_wrapper .dataTables_info,
.da .dataTables_wrapper .dataTables_paginate {
  color: var(--muted);
  font-size: .82rem;
  padding: 0;
}
.da .dataTables_wrapper .dataTables_filter {
  text-align: right;
}
.da .dataTables_wrapper .dataTables_filter label,
.da .dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}
.da .dataTables_wrapper .dataTables_filter input,
.da .dataTables_wrapper .dataTables_length select {
  border-radius: 11px !important;
  border: 1.5px solid var(--line) !important;
  padding: .45rem .8rem !important;
  font-size: .88rem !important;
  background: #fff;
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.da .dataTables_wrapper .dataTables_filter input:focus,
.da .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.14) !important;
  outline: none !important;
}
.da .dataTables_wrapper .dt-buttons .dt-button,
.da .dt-buttons .dt-button {
  border-radius: 11px !important;
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  padding: .45rem .85rem !important;
  margin: 0 3px 0 0 !important;
}
.da .dataTables_wrapper .paginate_button {
  border-radius: 9px !important;
  padding: .35rem .75rem !important;
  margin: 0 2px !important;
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
}
.da .dataTables_wrapper .paginate_button:hover {
  background: rgba(99,102,241,.06) !important;
  border-color: var(--indigo) !important;
  color: var(--indigo) !important;
}
.da .dataTables_wrapper .paginate_button.current,
.da .dataTables_wrapper .paginate_button.current:hover {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.da .dataTables_wrapper .paginate_button.disabled {
  opacity: .4;
}

/* Responsive : sur mobile, les contrôles DataTables passent en pile */
@media (max-width: 768px) {
  .da .da-card .dataTables_wrapper > .row {
    padding: .75rem .85rem;
  }
  .da .dataTables_wrapper .dataTables_filter {
    text-align: left;
    margin-top: .5rem;
  }
  .da .dataTables_wrapper .dataTables_filter input {
    width: 100%;
  }
}

/* ============ Stats grid (mini KPI inline) ============ */
.da-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  position: relative;
  overflow: hidden;
}
.da-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--indigo), var(--violet));
  opacity: 0; transition: opacity .22s;
}
.da-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  border-color: rgba(99,102,241,.4);
}
.da-stat:hover::before { opacity: 1; }
.da-stat-label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.da-stat-value {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 4px;
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
  .da-hero { padding: 1.1rem; border-radius: 18px; }
  .da-hero h1, .da-hero .h1 { font-size: 1.2rem; }
  .da-hero-pill { width: 40px; height: 40px; font-size: 1rem; }
  .da-hero-actions { margin-left: 0; width: 100%; }
  .da-hero-cta, .da-hero-back { flex: 1 1 auto; justify-content: center; }

  .da .da-card-header { padding: .75rem 1rem; }
  .da .da-card-header h2,
  .da .da-card-header h3,
  .da .da-card-header h5 { font-size: .88rem; }
  .da .da-card .card-body { padding: 1rem 1rem; }

  .da .table { font-size: .82rem; }
  .da .table thead th,
  .da .table tbody td { padding: .65rem .55rem; }

  /* Table → cards en très petit */
  .da-stat-value { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .da-hero { padding: 1rem; }
  .da-hero h1, .da-hero .h1 { font-size: 1.05rem; }
}