/* ================================================================
   DJIGUIYA — DESIGN SYSTEM v2 "CANVAS"
   Humanitaire · Impact · Clarté · Accessibilité
   ================================================================

   COMPOSANTS PRINCIPAUX :
   ─ .dj-hero          Bandeau de page (remplace .dj-page-banner)
   ─ .dj-metrics       Rangée de métriques (remplace .dj-kpi-strip)
   ─ .dj-filterbar     Barre de filtres horizontale (remplace sidebar)
   ─ .dj-panel         Panneau de contenu (remplace .dj-section)
   ─ .dj-data-table    Table de données
   ─ .dj-tag           Étiquette de statut
   ─ .dj-ring          Indicateur circulaire de progression
   ─ .dj-alert-strip   Bandeau d'alerte contextuel
   Backward-compat: ancien noms de classes redirigés
================================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --dj-navy:      #0b3c5d;
  --dj-navy-dk:   #062a42;
  --dj-blue:      #1d4ed8;
  --dj-teal:      #0891b2;
  --dj-green:     #059669;
  --dj-amber:     #d97706;
  --dj-orange:    #ea580c;
  --dj-red:       #dc2626;
  --dj-purple:    #7c3aed;
  --dj-slate:     #475569;
  --dj-rose:      #e11d48;

  --dj-bg:        #f7f8fa;
  --dj-warm:      #fdfcfb;
  --dj-surface:   #ffffff;
  --dj-border:    #e8ecf0;
  --dj-border-md: #d1d9e0;
  --dj-text:      #111827;
  --dj-text-2:    #374151;
  --dj-muted:     #6b7280;

  --dj-r:         8px;
  --dj-r-sm:      5px;
  --dj-r-lg:      14px;
  --dj-sh:        0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --dj-sh-md:     0 2px 6px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.06);
  --dj-sh-up:     0 -1px 0 rgba(0,0,0,.03);

  /* Thème de page (surchargé par data-theme) */
  --page-color:   var(--dj-navy);
  --page-pale:    rgba(11,60,93,.06);
  --page-pale-2:  rgba(11,60,93,.10);
  --page-mid:     rgba(11,60,93,.15);
  --page-rgb:     11,60,93;
}

/* ── Thèmes de pages ─────────────────────────────────────────── */
[data-theme="financement"] {
  --page-color: #b45309; --page-pale: rgba(180,83,9,.06);
  --page-pale-2: rgba(180,83,9,.10); --page-mid: rgba(180,83,9,.15); --page-rgb: 180,83,9;
}
[data-theme="arrivees"] {
  --page-color: var(--dj-teal); --page-pale: rgba(8,145,178,.06);
  --page-pale-2: rgba(8,145,178,.10); --page-mid: rgba(8,145,178,.15); --page-rgb: 8,145,178;
}
[data-theme="besoins"] {
  --page-color: var(--dj-red); --page-pale: rgba(220,38,38,.06);
  --page-pale-2: rgba(220,38,38,.10); --page-mid: rgba(220,38,38,.15); --page-rgb: 220,38,38;
}
[data-theme="partenaires"] {
  --page-color: var(--dj-blue); --page-pale: rgba(29,78,216,.06);
  --page-pale-2: rgba(29,78,216,.10); --page-mid: rgba(29,78,216,.15); --page-rgb: 29,78,216;
}
[data-theme="sites"] {
  --page-color: var(--dj-green); --page-pale: rgba(5,150,105,.06);
  --page-pale-2: rgba(5,150,105,.10); --page-mid: rgba(5,150,105,.15); --page-rgb: 5,150,105;
}
[data-theme="rapportage"] {
  --page-color: var(--dj-purple); --page-pale: rgba(124,58,237,.06);
  --page-pale-2: rgba(124,58,237,.10); --page-mid: rgba(124,58,237,.15); --page-rgb: 124,58,237;
}
[data-theme="coordination"] {
  --page-color: var(--dj-navy); --page-pale: rgba(11,60,93,.06);
  --page-pale-2: rgba(11,60,93,.10); --page-mid: rgba(11,60,93,.15); --page-rgb: 11,60,93;
}
[data-theme="documents"] {
  --page-color: var(--dj-slate); --page-pale: rgba(71,85,105,.06);
  --page-pale-2: rgba(71,85,105,.10); --page-mid: rgba(71,85,105,.15); --page-rgb: 71,85,105;
}
[data-theme="analyse"] {
  --page-color: var(--dj-rose); --page-pale: rgba(225,29,72,.06);
  --page-pale-2: rgba(225,29,72,.10); --page-mid: rgba(225,29,72,.15); --page-rgb: 225,29,72;
}
[data-theme="afflux"] {
  --page-color: var(--dj-orange); --page-pale: rgba(234,88,12,.06);
  --page-pale-2: rgba(234,88,12,.10); --page-mid: rgba(234,88,12,.15); --page-rgb: 234,88,12;
}

/* ================================================================
   BODY / LAYOUT
   ================================================================ */

body.site-layout {
  background: var(--dj-bg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--dj-text);
}

.site-main {
  background: var(--dj-bg);
  min-height: calc(100vh - 100px);
}

/* ================================================================
   ██████  HERO — remplace .dj-page-banner
   ================================================================
   Design : blanc avec barre colorée à gauche + chips de statut
================================================================ */

.dj-hero {
  background: var(--dj-surface);
  border-bottom: 1px solid var(--dj-border);
  padding: 0;
  position: relative;
}
.dj-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: var(--page-color);
  border-radius: 0 3px 3px 0;
}
.dj-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 24px 14px 32px;
}
.dj-hero-left {}
.dj-hero-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Breadcrumb */
.dj-crumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: var(--dj-muted);
  margin-bottom: 4px;
}
.dj-crumb a { color: var(--dj-muted); text-decoration: none; transition: color .15s; }
.dj-crumb a:hover { color: var(--page-color); }
.dj-crumb i { font-size: 0.55rem; }
.dj-crumb .dj-crumb-sep { opacity: .4; }

/* Titre */
.dj-hero h1 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dj-text);
  margin: 0 0 4px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dj-hero h1 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: var(--page-pale-2);
  color: var(--page-color);
  border-radius: 7px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Méta / sous-titre */
.dj-hero-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--dj-muted);
}
.dj-hero-meta strong { color: var(--dj-text-2); font-weight: 600; }
.dj-hero-meta .sep { color: var(--dj-border-md); }

/* Chips de statut */
.dj-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.dj-status-chip.ok    { background: rgba(5,150,105,.08);  border-color: rgba(5,150,105,.25);  color: #065f46; }
.dj-status-chip.warn  { background: rgba(217,119,6,.08);  border-color: rgba(217,119,6,.25);  color: #92400e; }
.dj-status-chip.alert { background: rgba(220,38,38,.08);  border-color: rgba(220,38,38,.25);  color: #991b1b; }
.dj-status-chip.info  { background: rgba(29,78,216,.08);  border-color: rgba(29,78,216,.25);  color: #1e3a8a; }
.dj-status-chip.live  { background: rgba(8,145,178,.08);  border-color: rgba(8,145,178,.25);  color: #155e75; }

/* ── Backward compat pour dj-page-banner ─────────────────────── */
.dj-page-banner { background: var(--dj-surface); border-bottom: 1px solid var(--dj-border); position: relative; }
.dj-page-banner::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: var(--page-color); border-radius: 0 3px 3px 0; }
.dj-page-banner-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 24px 14px 32px; }
.dj-page-breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--dj-muted); margin-bottom: 4px; }
.dj-page-breadcrumb a { color: var(--dj-muted); text-decoration: none; }
.dj-page-breadcrumb a:hover { color: var(--page-color); }
.dj-page-breadcrumb i { font-size: 0.55rem; opacity: .5; }
.dj-page-banner h1 { font-size: 1.2rem; font-weight: 800; color: var(--dj-text); margin: 0 0 4px; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.dj-page-banner h1 i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--page-pale-2); color: var(--page-color); border-radius: 7px; font-size: 0.85rem; flex-shrink: 0; }
.dj-page-banner-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.7rem; color: var(--dj-muted); }
.dj-page-banner-sub strong { color: var(--dj-text-2); font-weight: 600; }
.dj-banner-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 0.62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; background: var(--page-pale-2); border: 1.5px solid rgba(var(--page-rgb), .25); color: var(--page-color); }
.dj-banner-badge.badge-warn  { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.25); color: #92400e; }
.dj-banner-badge.badge-ok    { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.25); color: #065f46; }
.dj-banner-badge.badge-alert { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: #991b1b; }
.dj-banner-badge.badge-info  { background: rgba(29,78,216,.08); border-color: rgba(29,78,216,.25); color: #1e3a8a; }

/* ================================================================
   ██████  METRICS — remplace .dj-kpi-strip
   ================================================================
   Design : cartes blanches avec barre colorée EN HAUT, icône en cercle
================================================================ */

.dj-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  background: var(--dj-surface);
  border-bottom: 1px solid var(--dj-border);
  padding: 0 16px;
}
.dj-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  border-right: 1px solid var(--dj-border);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  position: relative;
}
.dj-metric:last-child { border-right: none; }
.dj-metric:hover { background: var(--page-pale); }
.dj-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 10px; right: 10px;
  height: 3px;
  background: var(--page-color);
  border-radius: 0 0 3px 3px;
  opacity: .4;
  transition: opacity .15s;
}
.dj-metric:hover::before { opacity: 1; }
.dj-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--page-pale-2);
  color: var(--page-color);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background .15s;
}
.dj-metric:hover .dj-metric-icon { background: var(--page-mid); }
.dj-metric-body { flex: 1; min-width: 0; }
.dj-metric-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--dj-text);
  line-height: 1;
  display: block;
}
.dj-metric-lbl {
  font-size: 0.62rem;
  color: var(--dj-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dj-metric-trend {
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 99px;
  padding: 1px 5px;
  margin-top: 3px;
}
.dj-metric-trend.up   { background: rgba(5,150,105,.1);  color: var(--dj-green); }
.dj-metric-trend.down { background: rgba(220,38,38,.1);  color: var(--dj-red);   }
.dj-metric-trend.warn { background: rgba(217,119,6,.1);  color: var(--dj-amber); }

/* Variantes colorées */
.dj-metric.m-danger  .dj-metric-icon,
.dj-metric.m-danger  .dj-metric-val { color: var(--dj-red);   }
.dj-metric.m-danger  .dj-metric-icon,
.dj-metric.m-danger::before { background: rgba(220,38,38,.12); background: rgba(220,38,38,.4); }
.dj-metric.m-danger::before { background: var(--dj-red); }
.dj-metric.m-danger  .dj-metric-icon { background: rgba(220,38,38,.1); }
.dj-metric.m-success .dj-metric-icon,
.dj-metric.m-success .dj-metric-val { color: var(--dj-green);  }
.dj-metric.m-success::before { background: var(--dj-green); }
.dj-metric.m-success .dj-metric-icon { background: rgba(5,150,105,.1); }
.dj-metric.m-warn    .dj-metric-icon,
.dj-metric.m-warn    .dj-metric-val { color: var(--dj-amber);  }
.dj-metric.m-warn::before { background: var(--dj-amber); }
.dj-metric.m-warn    .dj-metric-icon { background: rgba(217,119,6,.1); }
.dj-metric.m-info    .dj-metric-icon,
.dj-metric.m-info    .dj-metric-val { color: var(--dj-teal);   }
.dj-metric.m-info::before { background: var(--dj-teal); }
.dj-metric.m-info    .dj-metric-icon { background: rgba(8,145,178,.1); }

/* ── Backward compat pour dj-kpi-strip / dj-kpi-card ──────────── */
.dj-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0;
  background: var(--dj-surface);
  border-bottom: 1px solid var(--dj-border);
  padding: 0 16px;
}
.dj-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 14px 14px 12px;
  border-right: 1px solid var(--dj-border);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  position: relative;
}
.dj-kpi-card:last-child { border-right: none; }
.dj-kpi-card:hover { background: var(--page-pale); }
/* Barre colorée en haut */
.dj-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 3px;
  background: var(--page-color);
  border-radius: 0 0 3px 3px;
  opacity: .35;
  transition: opacity .15s;
}
.dj-kpi-card:hover::before { opacity: 1; }
/* Icône en cercle */
.dj-kpi-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--page-pale-2);
  color: var(--page-color);
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.dj-kpi-card-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--dj-text);
  line-height: 1;
  display: block;
}
.dj-kpi-card-lbl {
  font-size: 0.60rem;
  color: var(--dj-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dj-kpi-card-trend {
  font-size: 0.60rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 99px;
  padding: 1px 6px;
  margin-top: 4px;
}
.dj-kpi-card-trend.up   { background: rgba(5,150,105,.1);  color: var(--dj-green); }
.dj-kpi-card-trend.down { background: rgba(220,38,38,.1);  color: var(--dj-red);   }
/* Variantes */
.dj-kpi-card.kpi-danger::before        { background: var(--dj-red); opacity: .6; }
.dj-kpi-card.kpi-danger .dj-kpi-card-icon { background: rgba(220,38,38,.1); color: var(--dj-red); }
.dj-kpi-card.kpi-danger .dj-kpi-card-val  { color: var(--dj-red); }
.dj-kpi-card.kpi-success::before       { background: var(--dj-green); opacity: .6; }
.dj-kpi-card.kpi-success .dj-kpi-card-icon { background: rgba(5,150,105,.1); color: var(--dj-green); }
.dj-kpi-card.kpi-success .dj-kpi-card-val  { color: var(--dj-green); }
.dj-kpi-card.kpi-warn::before          { background: var(--dj-amber); opacity: .6; }
.dj-kpi-card.kpi-warn .dj-kpi-card-icon { background: rgba(217,119,6,.1); color: var(--dj-amber); }
.dj-kpi-card.kpi-warn .dj-kpi-card-val  { color: var(--dj-amber); }
/* KPI card avec div wrapper (nouveau HTML) */
.dj-kpi-card > div { display: flex; flex-direction: column; gap: 0; }

/* ================================================================
   ██████  FILTER BAR — remplace .dj-sidebar-filters
   ================================================================
   Design : barre horizontale collante avec chips de filtre
================================================================ */

.dj-filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--dj-surface);
  border-bottom: 1px solid var(--dj-border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--dj-sh-up);
}
.dj-filterbar-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--dj-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 4px;
  white-space: nowrap;
}
.dj-filterbar-sep {
  width: 1px;
  height: 18px;
  background: var(--dj-border-md);
  margin: 0 4px;
}
.dj-pill-select {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border: 1.5px solid var(--dj-border-md);
  border-radius: 99px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dj-text-2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.dj-pill-select:hover { border-color: var(--page-color); color: var(--page-color); background: var(--page-pale); }
.dj-pill-select.active { border-color: var(--page-color); background: var(--page-pale-2); color: var(--page-color); }
.dj-pill-select select {
  border: none;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
/* Select inline with chevron */
.dj-select-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid var(--dj-border-md);
  border-radius: 99px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dj-text-2);
  cursor: pointer;
  transition: border-color .15s;
}
.dj-select-wrap:focus-within { border-color: var(--page-color); }
.dj-select-wrap select {
  border: none;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dj-text-2);
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  max-width: 140px;
}
.dj-filterbar-search {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border: 1.5px solid var(--dj-border-md);
  border-radius: 99px;
  background: #fff;
  font-size: 0.68rem;
  color: var(--dj-text-2);
  transition: border-color .15s;
  flex: 0 1 200px;
}
.dj-filterbar-search:focus-within { border-color: var(--page-color); }
.dj-filterbar-search i { color: var(--dj-muted); font-size: 0.7rem; flex-shrink: 0; }
.dj-filterbar-search input {
  border: none;
  background: transparent;
  font-size: 0.68rem;
  color: var(--dj-text);
  outline: none;
  width: 100%;
  min-width: 80px;
}
.dj-filterbar-search input::placeholder { color: var(--dj-muted); }
.dj-filterbar-spacer { flex: 1; }

/* ── Backward compat pour sidebar ───────────────────────────── */
.dj-page-with-sidebar { display: block; }
.dj-sidebar-filters { display: none; }
.dj-page-main { }
.dj-page-main .dj-page-content { }
.dj-filter-sidebar { display: none !important; }

/* ================================================================
   ██████  PANEL — remplace .dj-section
   ================================================================
   Design : carte blanche, ombre légère, header avec dot coloré
================================================================ */

.dj-panel {
  background: var(--dj-surface);
  border-radius: var(--dj-r-lg);
  border: 1px solid var(--dj-border);
  box-shadow: var(--dj-sh);
  overflow: hidden;
}
.dj-panel + .dj-panel { margin-top: 14px; }

.dj-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--dj-border);
}
.dj-panel-hd h2 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dj-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dj-panel-hd h2::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--page-color);
  flex-shrink: 0;
}
.dj-panel-hd h2 i { color: var(--page-color); font-size: 0.85rem; }
.dj-panel-hd-actions { display: flex; align-items: center; gap: 6px; }
.dj-panel-bd { padding: 16px 18px; }
.dj-panel-bd.p-0 { padding: 0; }
.dj-panel-ft {
  padding: 8px 18px;
  border-top: 1px solid var(--dj-border);
  background: var(--dj-bg);
  font-size: 0.65rem;
  color: var(--dj-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Backward compat pour dj-section ────────────────────────── */
.dj-section {
  background: var(--dj-surface);
  border-radius: var(--dj-r-lg);
  border: 1px solid var(--dj-border);
  box-shadow: var(--dj-sh);
  overflow: hidden;
}
.dj-section + .dj-section { margin-top: 14px; }
.dj-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--dj-border);
}
.dj-section-head h2 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dj-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dj-section-head h2::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--page-color);
  flex-shrink: 0;
}
.dj-section-head h2 i { color: var(--page-color); }
.dj-section-head-actions { display: flex; align-items: center; gap: 6px; }
.dj-section-body { padding: 16px 18px; }
.dj-section-body.p-0 { padding: 0; }
.dj-section-foot {
  padding: 8px 18px;
  border-top: 1px solid var(--dj-border);
  background: var(--dj-bg);
  font-size: 0.65rem;
  color: var(--dj-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ================================================================
   ██████  CONTENT WRAPPER
================================================================ */
.dj-page-content {
  padding: 18px 22px 32px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ================================================================
   ██████  DATA TABLE — remplace .dj-table
================================================================ */

.dj-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.73rem;
  color: var(--dj-text);
}
.dj-data-table thead tr {
  border-bottom: 2px solid var(--dj-border);
}
.dj-data-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dj-muted);
  white-space: nowrap;
  background: var(--dj-bg);
  position: sticky;
  top: 0;
}
.dj-data-table thead th:first-child { border-radius: var(--dj-r-sm) 0 0 0; }
.dj-data-table thead th:last-child  { border-radius: 0 var(--dj-r-sm) 0 0; }
.dj-data-table tbody tr {
  border-bottom: 1px solid var(--dj-border);
  transition: background .1s;
}
.dj-data-table tbody tr:last-child { border-bottom: none; }
.dj-data-table tbody tr:hover { background: var(--page-pale); }
.dj-data-table tbody td { padding: 10px 14px; vertical-align: middle; }
.dj-data-table td.dj-td-main { font-weight: 600; color: var(--dj-text); }
.dj-data-table td.dj-td-val  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.dj-data-table td.dj-td-mono { font-family: 'SF Mono', Consolas, monospace; font-size: 0.7rem; }

/* ── Backward compat pour dj-table ──────────────────────────── */
.dj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.73rem;
  color: var(--dj-text);
}
.dj-table thead tr { border-bottom: 2px solid var(--dj-border); }
.dj-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dj-muted);
  white-space: nowrap;
  background: var(--dj-bg);
}
.dj-table tbody tr { border-bottom: 1px solid var(--dj-border); transition: background .1s; }
.dj-table tbody tr:last-child { border-bottom: none; }
.dj-table tbody tr:hover { background: var(--page-pale); }
.dj-table tbody td { padding: 9px 14px; vertical-align: middle; }
.dj-table td.dj-td-main { font-weight: 600; }
.dj-table td.dj-td-val  { text-align: right; font-variant-numeric: tabular-nums; }

/* ================================================================
   ██████  TAGS / BADGES — remplace .dj-badge
================================================================ */

.dj-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.dj-tag-red    { background: rgba(220,38,38,.1);  color: #b91c1c;  }
.dj-tag-amber  { background: rgba(217,119,6,.1);  color: #92400e;  }
.dj-tag-green  { background: rgba(5,150,105,.1);  color: #065f46;  }
.dj-tag-blue   { background: rgba(29,78,216,.1);  color: #1e3a8a;  }
.dj-tag-teal   { background: rgba(8,145,178,.1);  color: #155e75;  }
.dj-tag-slate  { background: rgba(71,85,105,.1);  color: #334155;  }
.dj-tag-purple { background: rgba(124,58,237,.1); color: #5b21b6;  }

/* ── Backward compat pour dj-badge ──────────────────────────── */
.dj-badge        { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.dj-badge-red    { background: rgba(220,38,38,.1);  color: #b91c1c; }
.dj-badge-amber  { background: rgba(217,119,6,.1);  color: #92400e; }
.dj-badge-green  { background: rgba(5,150,105,.1);  color: #065f46; }
.dj-badge-blue   { background: rgba(29,78,216,.1);  color: #1e3a8a; }
.dj-badge-slate  { background: rgba(71,85,105,.1);  color: #334155; }
.dj-badge-purple { background: rgba(124,58,237,.1); color: #5b21b6; }
.dj-badge-teal   { background: rgba(8,145,178,.1);  color: #155e75; }

/* ================================================================
   ██████  BUTTONS
================================================================ */

.dj-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--dj-r);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.dj-btn-primary {
  background: var(--page-color);
  color: #fff;
  border: 1.5px solid var(--page-color);
}
.dj-btn-primary:hover { filter: brightness(1.1); color: #fff; }
.dj-btn-outline {
  background: transparent;
  color: var(--page-color);
  border: 1.5px solid var(--page-color);
}
.dj-btn-outline:hover { background: var(--page-pale); }
.dj-btn-ghost {
  background: transparent;
  color: var(--dj-muted);
  border: 1.5px solid var(--dj-border-md);
}
.dj-btn-ghost:hover { background: var(--dj-bg); color: var(--dj-text-2); border-color: var(--dj-muted); }

/* ================================================================
   ██████  PROGRESS BAR INLINE
================================================================ */

.dj-bar-track {
  height: 6px;
  background: var(--dj-border);
  border-radius: 99px;
  overflow: hidden;
}
.dj-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--page-color);
  transition: width .5s ease;
}
.dj-bar-fill.bar-green  { background: var(--dj-green); }
.dj-bar-fill.bar-amber  { background: var(--dj-amber); }
.dj-bar-fill.bar-red    { background: var(--dj-red);   }

/* Backward compat */
.dj-progress { height: 6px; background: var(--dj-border); border-radius: 99px; overflow: hidden; }
.dj-progress-bar { height: 100%; border-radius: 99px; background: var(--page-color); transition: width .5s; }

/* ================================================================
   ██████  ALERT STRIP
================================================================ */

.dj-alert-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--dj-r);
  font-size: 0.72rem;
  margin-bottom: 12px;
  border-left: 4px solid;
}
.dj-alert-strip i { font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }
.dj-alert-strip.danger { background: rgba(220,38,38,.06); border-color: var(--dj-red);   color: #7f1d1d; }
.dj-alert-strip.warn   { background: rgba(217,119,6,.06);  border-color: var(--dj-amber); color: #78350f; }
.dj-alert-strip.ok     { background: rgba(5,150,105,.06);  border-color: var(--dj-green); color: #064e3b; }
.dj-alert-strip.info   { background: rgba(29,78,216,.06);  border-color: var(--dj-blue);  color: #1e3a8a; }
.dj-alert-strip strong { font-weight: 700; }

/* ================================================================
   ██████  SEARCH INPUT
================================================================ */

.dj-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1.5px solid var(--dj-border-md);
  border-radius: var(--dj-r);
  background: #fff;
  font-size: 0.72rem;
  transition: border-color .15s;
}
.dj-search:focus-within { border-color: var(--page-color); }
.dj-search i { color: var(--dj-muted); font-size: 0.75rem; flex-shrink: 0; }
.dj-search input {
  border: none;
  background: transparent;
  font-size: 0.72rem;
  color: var(--dj-text);
  outline: none;
  width: 180px;
}
.dj-search input::placeholder { color: var(--dj-muted); }

/* ================================================================
   ██████  GRID LAYOUTS
================================================================ */

.dj-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dj-col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 860px) {
  .dj-col-2 { grid-template-columns: 1fr; }
  .dj-col-3 { grid-template-columns: 1fr; }
}

/* ================================================================
   ██████  CARD GRID (partenaires, acteurs, etc.)
================================================================ */

.dj-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.dj-actor-card {
  background: var(--dj-surface);
  border: 1px solid var(--dj-border);
  border-radius: var(--dj-r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.dj-actor-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--page-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.dj-actor-card:hover { box-shadow: var(--dj-sh-md); transform: translateY(-2px); border-color: var(--page-pale-2); }
.dj-actor-card:hover::after { transform: scaleX(1); }
.dj-actor-card-logo {
  width: 44px; height: 44px;
  object-fit: contain;
  border-radius: var(--dj-r-sm);
  border: 1px solid var(--dj-border);
  padding: 4px;
  background: var(--dj-bg);
}
.dj-actor-card-initials {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--dj-r);
  background: var(--page-pale-2);
  color: var(--page-color);
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
}
.dj-actor-card-name { font-size: 0.82rem; font-weight: 700; color: var(--dj-text); }
.dj-actor-card-type { font-size: 0.65rem; color: var(--dj-muted); }
.dj-actor-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Backward compat pour dj-partners-grid ───────────────────── */
.dj-partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

/* ================================================================
   ██████  EMPTY STATE
================================================================ */

.dj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 8px;
  color: var(--dj-muted);
}
.dj-empty i { font-size: 2.2rem; opacity: .3; }
.dj-empty strong { font-size: 0.9rem; font-weight: 700; color: var(--dj-text-2); }
.dj-empty p { font-size: 0.78rem; max-width: 320px; margin: 0; }

/* ================================================================
   ██████  FOOTER
================================================================ */

.dj-footer {
  background: var(--dj-navy-dk);
  color: rgba(255,255,255,.65);
  font-size: 0.72rem;
  margin-top: 32px;
}
.dj-footer-main {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 32px;
  padding: 28px 32px 24px;
  max-width: 1440px;
  margin: 0 auto;
}
.dj-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 32px;
  padding: 28px 32px 24px;
}
.dj-footer-brand img { height: 28px; filter: brightness(0) invert(1); opacity: .8; margin-bottom: 8px; display: block; }
.dj-footer-brand p { font-size: 0.68rem; color: rgba(255,255,255,.5); line-height: 1.5; max-width: 240px; }
.dj-footer-col h4 { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 10px; }
.dj-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dj-footer-col a { color: rgba(255,255,255,.6); text-decoration: none; display: flex; align-items: center; gap: 5px; transition: color .15s; }
.dj-footer-col a:hover { color: #fff; }
.dj-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 32px;
  font-size: 0.65rem;
  color: rgba(255,255,255,.35);
}
.dj-footer-bottom a { color: rgba(255,255,255,.45); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.dj-footer-bottom a:hover { color: rgba(255,255,255,.75); }

/* ================================================================
   ██████  MISC UTILITIES
================================================================ */

.dj-text-green { color: var(--dj-green) !important; }
.dj-text-red   { color: var(--dj-red)   !important; }
.dj-text-amber { color: var(--dj-amber) !important; }
.dj-text-muted { color: var(--dj-muted) !important; }
.dj-fw-700     { font-weight: 700 !important; }
.dj-text-val   { font-variant-numeric: tabular-nums; }

/* Divider */
.dj-divider { border: none; border-top: 1px solid var(--dj-border); margin: 16px 0; }

/* Stat inline */
.dj-inline-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.dj-inline-stat .val { font-size: 1.1rem; font-weight: 800; color: var(--dj-text); }
.dj-inline-stat .lbl { font-size: 0.65rem; color: var(--dj-muted); font-weight: 600; }

/* Chart containers: let datalabels overflow */
.dj-section-body > div,
.dj-panel-bd > div,
canvas {
  overflow: visible;
}
.dj-section-body > div[style*="height"],
.dj-panel-bd > div[style*="height"] {
  overflow: visible !important;
}

/* ================================================================
   ██████  RESPONSIVE
================================================================ */

@media (max-width: 900px) {
  .dj-footer-main,
  .dj-footer-inner { grid-template-columns: 1fr 1fr; }
  .dj-hero-inner   { padding: 12px 16px 12px 24px; }
  .dj-page-content { padding: 12px 14px 24px; }
}
@media (max-width: 600px) {
  .dj-metrics,
  .dj-kpi-strip { grid-template-columns: 1fr 1fr; padding: 0 10px; }
  .dj-footer-main,
  .dj-footer-inner { grid-template-columns: 1fr; }
  .dj-filterbar  { padding: 6px 12px; }
}

/* ================================================================
   ██████  SURCHARGES BOOTSTRAP
================================================================ */

.form-select, .form-control {
  font-size: 0.72rem;
  border-color: var(--dj-border-md);
  border-radius: var(--dj-r-sm);
  color: var(--dj-text);
}
.form-select:focus, .form-control:focus {
  border-color: var(--page-color);
  box-shadow: 0 0 0 3px rgba(var(--page-rgb), .12);
}
.input-group-text { font-size: 0.72rem; border-color: var(--dj-border-md); }

/* Alert Bootstrap */
.alert { font-size: 0.76rem; border-radius: var(--dj-r); }

/* ================================================================
   ██████  FILTER CHIPS SIDEBAR (filter-chips.js compat)
================================================================ */

/* On cache l'ancienne sidebar ; le filtre s'affiche en inline bar */
.dj-filter-sidebar .dj-filter-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.dj-filter-label { font-size: 0.65rem; font-weight: 700; color: var(--dj-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.dj-filter-select {
  padding: 4px 10px;
  border: 1.5px solid var(--dj-border-md);
  border-radius: 99px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dj-text-2);
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
}
.dj-filter-select:focus { border-color: var(--page-color); }

/* ================================================================
   ██████  EVENTS / CALENDRIER / DOCS
================================================================ */

.dj-event-list { display: flex; flex-direction: column; gap: 10px; }
.dj-event-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: var(--dj-r);
  border-left: 3px solid var(--page-color);
  background: var(--page-pale);
  transition: background .15s;
}
.dj-event-item:hover { background: var(--page-pale-2); }
.dj-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  flex-shrink: 0;
}
.dj-event-date .day { font-size: 1.2rem; font-weight: 800; color: var(--page-color); line-height: 1; }
.dj-event-date .mon { font-size: 0.6rem; font-weight: 700; color: var(--dj-muted); text-transform: uppercase; }
.dj-event-body { flex: 1; min-width: 0; }
.dj-event-title { font-weight: 700; font-size: 0.78rem; color: var(--dj-text); margin-bottom: 2px; }
.dj-event-meta  { font-size: 0.65rem; color: var(--dj-muted); }

.dj-doc-list { display: flex; flex-direction: column; gap: 8px; }
.dj-doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--dj-r);
  border: 1px solid var(--dj-border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.dj-doc-item:hover { border-color: var(--page-color); background: var(--page-pale); }
.dj-doc-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--dj-r-sm);
  background: var(--page-pale-2);
  color: var(--page-color);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.dj-doc-body { flex: 1; min-width: 0; }
.dj-doc-title { font-weight: 700; font-size: 0.76rem; color: var(--dj-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-doc-meta  { font-size: 0.63rem; color: var(--dj-muted); }

/* ================================================================
   ██████  MAP PAGE
================================================================ */

.dj-map-wrap { width: 100%; height: calc(100vh - 120px); border-radius: 0; overflow: hidden; }

/* ================================================================
   ██████  COORDINATION GRID
================================================================ */

.dj-coord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.dj-coord-card {
  background: var(--dj-surface);
  border: 1px solid var(--dj-border);
  border-radius: var(--dj-r-lg);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s, transform .15s;
  position: relative;
  overflow: hidden;
}
.dj-coord-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--page-color);
}
.dj-coord-card:hover { box-shadow: var(--dj-sh-md); transform: translateY(-2px); }
.dj-coord-icon { font-size: 1.6rem; color: var(--page-color); opacity: .7; }
.dj-coord-title { font-size: 0.85rem; font-weight: 700; color: var(--dj-text); }
.dj-coord-meta  { font-size: 0.65rem; color: var(--dj-muted); }
.dj-coord-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.dj-coord-stat  { font-size: 0.65rem; font-weight: 700; color: var(--dj-text-2); display: flex; align-items: center; gap: 3px; }

/* skip link */
.skip-link { position: absolute; top: -40px; left: 8px; background: var(--dj-navy); color: #fff; padding: 4px 12px; border-radius: 0 0 var(--dj-r) var(--dj-r); font-size: 0.75rem; text-decoration: none; z-index: 9999; transition: top .2s; }
.skip-link:focus { top: 0; }

/* text utils (compat Bootstrap) */
.text-success { color: var(--dj-green) !important; }
.text-danger  { color: var(--dj-red)   !important; }
.text-warning { color: var(--dj-amber) !important; }
.fw-bold, .fw-700 { font-weight: 700 !important; }