/* =========================================================
   Page "Mes licences" — filtre par saison. Tokens : tokens.css
   ========================================================= */

.season-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 1.3rem;
}

.season-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
}
.season-pill {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.84rem;
    white-space: nowrap;
    text-decoration: none;
}
.season-pill:hover { color: var(--text); }
.season-pill.active { color: var(--gold-strong); background: var(--gold-soft); }

.season-count { font-size: 0.8rem; color: var(--text-muted); }

/* Mobile : la barre de saisons devient une seule ligne qui défile
   (plus de wrap sur deux lignes, la forme pilule est conservée). Un fondu
   aux deux bords signale qu'on peut faire défiler. Vaut pour tous les usages
   de .season-filter (barre .season-toolbar et .pc-section-head). */
@media (max-width: 640px) {
    /* Empilement : le strip prend toute la largeur, le compteur passe dessous. */
    .season-toolbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .season-toolbar .season-count { align-self: flex-end; }

    .season-filter {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;                          /* autorise le défilement interne en flex-item */
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;                 /* Firefox */
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
                mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    }
    .season-filter::-webkit-scrollbar { display: none; }
    .season-pill { flex: 0 0 auto; scroll-snap-align: start; }
}

.licenses-empty {
    text-align: center;
    color: var(--text-faint);
    padding: 2rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}

/* Carte licence (style POC) */
.license-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
}
.license-card:hover { border-color: var(--border-strong); background: var(--surface-2-hov); color: var(--text); }
.lc-av {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-strong);
    font-weight: 700; font-size: 0.78rem;
}
.lc-main { flex: 1 1 auto; min-width: 0; }
.lc-title { font-weight: 600; }
.lc-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.lc-dot { color: var(--text-faint); }
.lc-badge { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.1rem 0.6rem; border: 1px solid var(--border-strong); white-space: nowrap; }
.lc-badge.is-current { color: var(--success); background: rgba(79, 174, 139, 0.12); border-color: rgba(79, 174, 139, 0.35); }
.lc-badge.is-past { color: var(--text-faint); }
.lc-go { flex: 0 0 auto; color: var(--text-faint); }
.license-card:hover .lc-go { color: var(--gold-strong); }

/* Renouvellement */
.renew-section { margin: 0.4rem 0 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.renew-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 0.7rem; }
.license-item { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.license-item .license-card { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.license-renew {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--gold-strong);
    background: var(--gold-soft);
    border: 1px solid transparent;
}
.license-renew:hover { border-color: var(--gold-strong); }
.license-renew svg { flex: 0 0 auto; }

/* Liste « à renouveler » côté club */
.renew-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.renew-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.renew-name { font-weight: 600; }
.renew-meta { font-size: 0.8rem; color: var(--text-muted); }
.renew-row .license-renew { margin-left: auto; }

@media (max-width: 560px) {
    .lc-badge { display: none; }
}