/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   LES CARTES DU PIPELINE (js/78, 20.09.2026)

   Une carte de kanban se juge à une chose : combien d'affaires on peut comparer sans faire défiler.
   L'ancienne en montrait deux par écran de colonne. Celle-ci en montre quatre, en disant plus.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La colonne ───────────────────────────────────────────────────────────────────────────────── */
.plc-col-tete {
  display: flex; align-items: center; gap: var(--e-2, 8px);
  padding-bottom: var(--e-2, 8px); margin-bottom: var(--e-2, 8px);
  border-bottom: 2px solid var(--stade);
}
.plc-col-nom {
  font-size: 10px; font-weight: var(--t-moyen, 600); text-transform: uppercase;
  letter-spacing: .09em; color: var(--stade);
}
.plc-col-compte {
  font-size: 10px; font-variant-numeric: tabular-nums;
  min-width: 17px; text-align: center; padding: 1px 6px; border-radius: var(--r-rond, 999px);
  background: color-mix(in srgb, var(--stade) 18%, transparent); color: var(--stade);
}
/* Le total de colonne porte une astérisque quand toutes les affaires n'ont pas de montant : sans
   elle, on lit un total là où il n'y a qu'une somme partielle. */
.plc-col-total {
  margin-left: auto; font-size: var(--t-xs); font-variant-numeric: tabular-nums;
  color: var(--text-muted, #64748B);
}
.plc-cartes { display: flex; flex-direction: column; gap: var(--e-2, 8px); }
.plc-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);
}
html:not([data-theme="clair"]) .plc-vide { border-color: rgba(255, 255, 255, .13); }

/* ── La carte ─────────────────────────────────────────────────────────────────────────────────── */
.plc-carte {
  position: relative; cursor: grab;
  display: flex; flex-direction: column; gap: 7px;
  padding: var(--e-3, 12px) var(--e-3, 12px) var(--e-2, 8px) var(--e-4, 16px);
  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);
}
/* Le liseré de stade : on reconnaît d'où vient une carte même en la déplaçant. */
.plc-carte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--stade); border-radius: var(--r-s, 10px) 0 0 var(--r-s, 10px);
}
.plc-carte:hover { transform: translateY(-1px); box-shadow: var(--o-2); }
.plc-carte.plc-retard { border-color: var(--c-alerte, #F59E0B); }
/* Incomplète : pointillé, pas de rouge. Il manque une information, ce n'est pas une faute. */
.plc-carte.plc-incomplete { border-style: dashed; }

.plc-equipe { position: absolute; top: 7px; right: 8px; font-size: var(--t-s); }

.plc-tete { display: flex; align-items: flex-start; gap: var(--e-2, 8px); }
.plc-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Le client d'abord : c'est de lui qu'on parle. L'affaire dessous, en gris. */
.plc-qui b {
  font-size: var(--t-m, 13.5px); font-weight: var(--t-moyen, 600); color: var(--text, #0F172A);
  line-height: 1.3; overflow-wrap: anywhere;
}
.plc-qui small { font-size: var(--t-s, 12.5px); color: var(--text-muted, #64748B); line-height: 1.35; }

.plc-chiffres { display: flex; align-items: center; gap: var(--e-2, 8px); flex-shrink: 0; }
/* Chiffres tabulaires : les montants s'alignent d'une carte à l'autre, et la colonne se compare
   d'un coup d'œil au lieu de se lire ligne par ligne. */
.plc-montant {
  font-size: var(--t-m, 13.5px); font-weight: var(--t-moyen, 600);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text, #0F172A);
}
.plc-montant.inconnu {
  font-weight: 400; font-style: italic; font-size: var(--t-s, 12.5px);
  color: var(--text-muted, #94A3B8);
}

.plc-anneau { position: relative; display: inline-flex; align-items: center; justify-content: center;
  color: var(--g-400, #94A3B8); }
.plc-anneau b {
  position: absolute; font-size: 9.5px; font-weight: var(--t-moyen, 600);
  font-variant-numeric: tabular-nums; color: var(--text, #334155);
}

.plc-pastilles { display: flex; flex-wrap: wrap; gap: 4px; }
.plc-past {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 2px 7px; border-radius: var(--r-rond, 999px);
  background: var(--g-100, #EEF2F7); color: var(--text-muted, #64748B);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
html:not([data-theme="clair"]) .plc-past { background: rgba(255, 255, 255, .07); }
.plc-past.plc-echue { background: var(--c-alerte-fond); color: var(--c-alerte-texte); }
/* L'âge : le signal d'une affaire qui dort. Discret, puis ambre, puis rouge. */
.plc-age.tiede { background: var(--c-alerte-fond); color: var(--c-alerte-texte); }
.plc-age.froid { background: var(--c-danger-fond); color: var(--c-danger-texte); }

.plc-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2, 8px); min-height: 22px; }
.plc-actions { display: flex; gap: 5px; align-items: center; }
.plc-perdu {
  background: none; cursor: pointer; font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--c-danger) 34%, transparent);
  color: var(--c-danger-texte, #B91C1C); border-radius: 5px;
  padding: 2px 7px; font-size: 10px; font-weight: var(--t-moyen, 600);
}
.plc-perdu:hover { background: var(--c-danger-fond); }

/* Les actions n'apparaissent qu'au survol — sept cartes × deux contrôles font quatorze boutons
   à l'écran, et on ne voit plus les affaires. Au clavier, le focus les révèle aussi. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .plc-carte .plc-actions { opacity: 0; transition: opacity var(--v-court, .15s); }
  .plc-carte:hover .plc-actions, .plc-carte:focus-within .plc-actions { opacity: 1; }
}

/* ── Gagnées / perdues ────────────────────────────────────────────────────────────────────────── */
.plc-fin { margin-top: var(--e-6, 24px); }
.plc-fin > summary {
  cursor: pointer; list-style: none; padding: var(--e-2, 8px) 0;
  font-size: var(--t-xs); font-weight: var(--t-moyen, 600); text-transform: uppercase;
  letter-spacing: .09em; color: var(--c);
}
.plc-fin > summary::-webkit-details-marker { display: none; }
.plc-fin-liste { display: flex; flex-direction: column; gap: 3px; }
.plc-fin-ligne {
  display: grid; grid-template-columns: 1fr 120px 150px auto; gap: var(--e-3, 12px);
  align-items: center; cursor: pointer;
  padding: 9px var(--e-3, 12px); border-radius: var(--r-s, 10px);
  background: var(--surface, #fff); border: 1px solid var(--g-200, #E2E8F0);
}
.plc-fin-ligne:hover { background: var(--g-50, #F4F6F9); }
html:not([data-theme="clair"]) .plc-fin-ligne:hover { background: rgba(255, 255, 255, .04); }
.plc-fin-qui { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plc-fin-qui b { font-size: var(--t-m, 13.5px); font-weight: var(--t-moyen, 600); }
.plc-fin-qui small { font-size: var(--t-s, 12.5px); color: var(--text-muted, #64748B); }
.plc-fin-qui em { font-size: var(--t-xs, 11px); color: var(--text-muted, #94A3B8); }
.plc-fin-montant { font-variant-numeric: tabular-nums; font-size: var(--t-m, 13.5px); text-align: right; }

@media (max-width: 900px) {
  .plc-fin-ligne { grid-template-columns: 1fr; }
  .plc-fin-montant { text-align: left; }
}