/* ============================================================
   CARTES STATS
   ============================================================ */
.stats-container {
  display: flex;
  gap: 30px;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
}

.stat-card {
  padding: 28px;
  border-radius: var(--radius-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.stat-card.blue   { background: linear-gradient(135deg, #3730a3, #6366f1); }
.stat-card.purple { background: linear-gradient(135deg, #6b21a8, #a855f7); }
.stat-card.red    { background: linear-gradient(135deg, #9f1239, #f43f5e); }
.stat-card.green  { background: linear-gradient(135deg, #047857, #10b981); }

.stat-card:hover {
  transform: translateY(-6px) scale(1.02);
  filter: brightness(1.06);
}
.stat-card.blue:hover   { box-shadow: var(--shadow-3), 0 0 50px rgba(99,102,241,0.45); }
.stat-card.green:hover  { box-shadow: var(--shadow-3), 0 0 50px rgba(16,185,129,0.45); }
.stat-card.purple:hover { box-shadow: var(--shadow-3), 0 0 50px rgba(168,85,247,0.45); }
.stat-card.red:hover    { box-shadow: var(--shadow-3), 0 0 50px rgba(244,63,94,0.45); }

.stat-val {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 20px rgba(255,255,255,0.25);
}

.stat-label {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}


/* ============================================================
   GRILLE DE CARTES
   ============================================================ */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

/* ── Vue liste ─────────────────────────────────────────────── */
.list-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.list-layout .card-item {
  flex-direction: row;
  text-align: left;
  padding: 12px 16px;
  gap: 14px;
  align-items: center;
}
.list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
/* ── Corps de la row liste (inline) ──────────────────────── */
.list-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.list-pseudo {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-white) !important;
  margin: 0 !important;
  white-space: nowrap;
}
.list-grade-badge {
  margin-bottom: 0 !important;
  font-size: 9px !important;
  padding: 2px 9px !important;
  letter-spacing: 0.8px;
}
.list-sep {
  color: rgba(255,255,255,0.15);
  font-size: 12px;
  flex-shrink: 0;
}
.list-dim {
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.list-row-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.list-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.list-status-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.list-chip-spec   { background: rgba(14,165,233,0.12);  color: #0ea5e9; }
.list-chip-ped    { background: rgba(168,85,247,0.12);  color: #a855f7; }
.list-chip-no     { background: rgba(244,63,94,0.10);   color: var(--danger); }
.list-chip-absent { background: rgba(249,115,22,0.12);  color: #f97316; }
.list-layout .mini-badge-stack { position: static; flex-direction: row; }
.list-layout .pending-row { margin: 0; }

.card-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
              rgba(15, 23, 42, 0.65);
  padding: 25px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(99,102,241,0.1) inset;
  border-color: rgba(99,102,241,0.22);
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(255,255,255,0.03)),
              rgba(15, 23, 42, 0.75);
}

.card-item:active {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.card-item:focus-visible {
  box-shadow: var(--shadow-2), var(--ring-soft);
  border-color: rgba(99, 102, 241, 0.55);
}

.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}


/* ============================================================
   ÉTATS CARTES (BORDERS)
   ============================================================ */

/* animation flash sur passage UP */
#passage-up-container .card-item {
  border-left: 4px solid var(--primary);
  animation: flashConfirm 1.5s ease-out;
}


/* ============================================================
   MINI BADGES (SPEC / PED / UP)
   ============================================================ */
.mini-badge-stack {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 6;
  pointer-events: none;
}

.mini-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.mini-badge-ped  { color: #6ee7b7; background: rgba(16,185,129,0.18);  border-color: rgba(16,185,129,0.28);  }
.mini-badge-spec { color: #7dd3fc; background: rgba(14,165,233,0.18);  border-color: rgba(14,165,233,0.28);  }
.mini-badge-up   { color: #fde68a; background: rgba(251,191,36,0.18);  border-color: rgba(251,191,36,0.28);  }


/* ============================================================
   PENDING CHIPS (ÉLIGIBILITÉ)
   ============================================================ */
.pending-row {
  margin-top: 14px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.pending-chip {
  position: relative;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  overflow: hidden;
}

.pending-chip::after {
  content: "";
  position: absolute;
  top: -40%; left: -60%;
  width: 60%; height: 180%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: pendingShimmer 1.6s ease-in-out infinite;
}

.pending-chip.up   { border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); }
.pending-chip.ped  { border-color: rgba(255,152,0,0.35);  background: rgba(255,152,0,0.08);  }
.pending-chip.spec { border-color: rgba(14,165,233,0.35); background: rgba(14,165,233,0.08); }

.card-item:hover .pending-chip { transform: translateY(-1px); }


/* ============================================================
   ACTIONS STACK
   ============================================================ */
.actions-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Grade borders */
.card-item[data-grade="Novice"]      { border-color: rgba(99, 102, 241, 0.28); }
.card-item[data-grade="Validé"]      { border-color: rgba(16, 185, 129, 0.30); }
.card-item[data-grade="Expérimenté"] { border-color: rgba(251, 191, 36, 0.35); }

/* Pulse éligibilité */
@keyframes eligPulse {
  0%, 100% { box-shadow: var(--shadow-1), 0 0 0 0 rgba(99,102,241,0.3); }
  50%       { box-shadow: var(--shadow-1), 0 0 0 8px rgba(99,102,241,0); }
}

.card-eligible-pulse {
  animation: eligPulse 2.4s ease-in-out infinite;
}

@media (max-width: 820px) {
  .grid-layout { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}
@media (max-width: 540px) {
  .stats-container { gap: 10px; }
  .stat-card { padding: 18px 20px; }
  .stat-val { font-size: 42px; }
  .grid-layout { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .card-item { padding: 16px; }
  .list-layout .card-item { padding: 10px 12px; gap: 10px; }
  .list-dim { max-width: 140px; }
}