/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   KANBAN DES CAMPAGNES (js/70, 20.09.2026)

   Six colonnes qui défilent horizontalement plutôt que de se comprimer : à six colonnes sur un
   portable, des colonnes qui rétrécissent deviennent six bandes illisibles. On préfère faire
   glisser.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.kbc-outils { display: flex; gap: var(--e-2, 8px); align-items: center; flex-wrap: wrap; margin-bottom: var(--e-4, 16px); }

.kbc-tableau {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
  gap: var(--e-3, 12px); overflow-x: auto; padding-bottom: var(--e-3, 12px);
  scroll-snap-type: x proximity;
}
.kbc-colonne {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--e-2, 8px);
  padding: var(--e-3, 12px); border-radius: var(--r-m, 14px);
  background: var(--surface-alt, var(--g-50));
  border: 1px solid var(--g-200, #E2E8F0);
  min-height: 200px;
  transition: background var(--v-court, .15s), border-color var(--v-court, .15s);
}
.kbc-colonne.kbc-cible-survol { background: var(--c-info-fond); border-color: var(--c-info); }

.kbc-colonne-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2, 8px); }
.kbc-colonne-nom { font-size: var(--t-s, 12.5px); font-weight: var(--t-moyen, 600); color: var(--text, #334155);
  text-transform: uppercase; letter-spacing: .055em; }
.kbc-compte { font-size: var(--t-xs, 11px); font-variant-numeric: tabular-nums;
  min-width: 22px; text-align: center; padding: 2px 7px; border-radius: var(--r-rond, 999px);
  background: var(--g-200, #E2E8F0); color: var(--text-muted, #64748B); }

.kbc-cartes { display: flex; flex-direction: column; gap: var(--e-2, 8px); flex: 1; }
.kbc-vide { font-size: var(--t-s, 12.5px); color: var(--text-muted, #94A3B8); text-align: center;
  padding: var(--e-5, 20px) var(--e-2, 8px); border: 1px dashed var(--g-300, #CBD5E1);
  border-radius: var(--r-s, 10px); line-height: 1.4; }

.kbc-carte {
  cursor: grab; display: flex; flex-direction: column; gap: 6px;
  padding: var(--e-3, 12px); border-radius: var(--r-s, 10px);
  background: var(--surface, #fff); border: 1px solid var(--g-200, #E2E8F0);
  box-shadow: var(--o-1);
  transition: transform var(--v-court, .15s), box-shadow var(--v-court, .15s), opacity var(--v-court, .15s);
}
.kbc-carte:hover { transform: translateY(-1px); box-shadow: var(--o-2); }
.kbc-carte:focus-visible { outline: 2px solid var(--m-turquoise-fonce, #0095B8); outline-offset: 2px; }
.kbc-carte.kbc-en-vol { opacity: .45; cursor: grabbing; }
.kbc-carte.retard { border-left: 3px solid var(--c-alerte, #F59E0B); }

.kbc-carte-tete { display: flex; align-items: flex-start; gap: var(--e-2, 8px); }
.kbc-carte-tete b { font-size: var(--t-m, 13.5px); font-weight: var(--t-moyen, 600); line-height: 1.35;
  color: var(--text, #0F172A); text-wrap: pretty; }
.kbc-canal { font-size: var(--t-l); line-height: 1.2; flex-shrink: 0; }
.kbc-cible { font-size: var(--t-s, 12.5px); color: var(--text-muted, #64748B); line-height: 1.4; }

.kbc-carte-pied { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.kbc-carte-pied > span { font-size: var(--t-xs, 11px); padding: 2px 8px; border-radius: var(--r-rond, 999px);
  background: var(--g-100, #EEF2F7); color: var(--text-muted, #64748B); }
.kbc-date { font-variant-numeric: tabular-nums; }
.kbc-date.retard { background: var(--c-alerte-fond); color: var(--c-alerte-texte); }
.kbc-brevo { background: var(--c-info-fond) !important; color: var(--c-info-texte) !important; }

.kbc-stats { display: flex; gap: var(--e-3, 12px); flex-wrap: wrap; padding-top: 6px;
  border-top: 1px solid var(--g-100, #EEF2F7); font-size: var(--t-xs, 11px); color: var(--text-muted, #64748B); }
.kbc-stats b { font-variant-numeric: tabular-nums; color: var(--text, #334155); font-weight: var(--t-moyen, 600); }

/* ── La fiche ─────────────────────────────────────────────────────────────────────────────────── */
.kbc-modale { width: min(720px, 95vw); }
.kbc-lignes { display: flex; gap: var(--e-3, 12px); flex-wrap: wrap; }
.kbc-lignes .form-field { flex: 1 1 150px; min-width: 0; }
.kbc-brevo-bloc { border: 1px solid var(--g-200, #E2E8F0); border-radius: var(--r-s, 10px);
  padding: var(--e-3, 12px); margin: var(--e-2, 8px) 0; }
.kbc-brevo-bloc legend { padding: 0 6px; font-size: var(--t-s, 12.5px); font-weight: var(--t-moyen, 600);
  color: var(--text-muted, #64748B); }
.kbc-note { margin: 0 0 var(--e-3, 12px); font-size: var(--t-s, 12.5px); color: var(--text-muted, #64748B);
  line-height: 1.5; text-wrap: pretty; }

@media (max-width: 720px) {
  .kbc-tableau { grid-auto-columns: minmax(80vw, 1fr); }
}