/* TeamKit — Les listes de joueurs (6 oct. 2026, soir) : la page /joueurs (joueurs.php) et le bloc « Les joueurs de
   <commu> » de la page d'une communauté (js/communaute-joueurs.js). Préfixe jl-. Même famille que /communities (cm-)
   et /streamers (st-) : héros, outils en puces, cartes. Les cartes sont dessinées par includes/JoueursListe.php. */

.jl-lead2 { font-size: .98rem; }
.jl-moi { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(255,209,102,.5); color: #ffd166; font-size: .92rem; max-width: 60ch; }
.jl-moi a { color: inherit; text-decoration: underline; }

/* ---- Outils ---- */
.jl-outils { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.jl-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jl-search { flex: 1 1 240px; max-width: 360px; padding: 9px 12px; }
.jl-select { flex: 0 1 280px; max-width: 100%; padding: 9px 12px; }
.jl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jl-chip { display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.jl-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jl-chip:focus-within { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.jl-point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-success); box-shadow: 0 0 8px var(--accent-success); }
.js-jl .jl-go { display: none; }
.jl-compte { margin: 0 0 12px; color: var(--text-muted); font-size: .9rem; }
.jl-compte b { color: var(--text-primary); font-family: var(--font-mono); font-size: 1.05rem; }
.jl-reset { margin-left: 8px; color: var(--accent-primary); }

/* ---- Cartes ---- */
.jl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jl-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; transition: transform .15s, border-color .15s, box-shadow .15s; min-width: 0; }
.jl-card:hover, .jl-card:focus-within { transform: translateY(-3px); border-color: var(--accent-primary); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.jl-card.is-enjeu { border-color: rgba(0,255,136,.45); }
.jl-card[hidden] { display: none; }
.jl-haut { display: flex; gap: 12px; align-items: center; min-width: 0; }
.jl-av { position: relative; width: 56px; height: 56px; flex: none; border-radius: 16px; overflow: hidden; background: var(--gradient-primary); display: grid; place-items: center; }
.jl-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.jl-ini { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: #fff; }
.jl-qui { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jl-pseudo { margin: 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; overflow-wrap: anywhere; }
.jl-lien { color: var(--text-primary); text-decoration: none; }
.jl-lien::after { content: ''; position: absolute; inset: 0; border-radius: 16px; z-index: 2; }   /* toute la carte est le lien */
.jl-lien:focus-visible { outline: none; }
.jl-card:has(.jl-lien:focus-visible) { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.jl-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.jl-rep, .jl-enjeu, .jl-tag { font-size: .74rem; border-radius: 99px; padding: 1px 8px; border: 1px solid var(--border-color); white-space: nowrap; color: var(--text-secondary); }
.jl-rep.r-or { color: #f5c542; border-color: rgba(245,197,66,.55); }
.jl-rep.r-platine { color: #c4b5fd; border-color: rgba(167,139,250,.65); }
.jl-rep.r-argent { color: #d6d6e2; }
.jl-rep.r-bronze { color: #e0a36b; }
.jl-enjeu { color: var(--accent-success); border-color: rgba(0,255,136,.45); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jl-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.jl-puce { font-size: .8rem; padding: 2px 9px; border-radius: 99px; background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.25); color: var(--text-primary); white-space: nowrap; }
.jl-puce.is-plus { background: transparent; color: var(--text-muted); }
.jl-jeux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.jl-jeux li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-secondary); min-width: 0; }
.jl-jeux li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-jeux img, .jl-jeu-ini { width: 46px; height: 22px; border-radius: 4px; object-fit: cover; flex: none; background: var(--bg-tertiary); }
.jl-jeu-ini { display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: var(--text-muted); }
.jl-commu { margin: 0; font-size: .86rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.jl-commu b { color: var(--text-primary); }
.jl-discret { color: var(--text-muted); font-style: italic; }
.jl-bas { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; }
.jl-voir { color: var(--accent-primary); font-weight: 700; }
.jl-partie { color: #ffd166; font-weight: 700; }

/* ---- Messages ---- */
.jl-aucun { margin-top: 14px; padding: 18px; border: 1px dashed var(--border-color); border-radius: 14px; color: var(--text-secondary); text-align: center; }
.jl-aucun b { display: block; color: var(--text-primary); margin-bottom: 4px; }
.jl-aucun a { color: var(--accent-primary); }
.jl-vide-tout { text-align: center; padding: 36px 22px; border-radius: 20px; background: radial-gradient(ellipse at top, rgba(0,240,255,.10), transparent 60%), linear-gradient(135deg, rgba(123,44,191,.14), rgba(0,240,255,.05)); border: 1px solid rgba(0,240,255,.25); }
.jl-vide-ico { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; font-size: 2.6rem; background: rgba(0,240,255,.10); border: 1px solid rgba(0,240,255,.35); box-shadow: 0 0 34px rgba(0,240,255,.25); margin-bottom: 14px; animation: jl-flotte 3.5s ease-in-out infinite; }
.jl-vide-tout h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.25rem; }
.jl-vide-tout p { margin: 0 auto 10px; max-width: 62ch; color: var(--text-secondary); line-height: 1.55; }
.jl-vide-tout .jl-cta-vide { justify-content: center; margin: 18px 0 10px; }
.jl-note { font-size: .86rem; color: var(--text-muted) !important; }
@keyframes jl-flotte { 50% { transform: translateY(-6px); } }

/* ---- Bloc d'une communauté (community.html) ---- */
.jl-commu-sec { padding: 2.5rem 0; }
.jl-commu-sec h2 { font-size: 1.75rem; margin-bottom: .4rem; }
.jl-commu-sec .jl-intro { color: var(--text-muted); margin: 0 0 1.2rem; }
.jl-commu-sec .jl-plus { margin: 14px 0 0; color: var(--text-muted); font-size: .9rem; }
.jl-commu-sec .jl-plus a { color: var(--accent-primary); }

@media (max-width: 980px) { .jl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .jl-grid { grid-template-columns: minmax(0, 1fr); }
  .jl-search, .jl-select { flex: 1 1 100%; max-width: none; }
  .jl-vide-tout { padding: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) { .jl-card { transition: none; } .jl-vide-ico { animation: none; } }