/* Dev TTFL — components/card.css (refacto) */
@layer components {

    /* Carte générique */
    .card {
        /* Variables carte : surchargées par page/variant si besoin */
        --card-bg: var(--surface);
        --card-fg: inherit;
        --card-fg-muted: var(--muted);
        --card-border: var(--border);
        --card-shadow: var(--shadow-sm);
        --card-cta-fg: currentColor;
        --card-cta-border: var(--border);

        position: relative;
        display: block;
        text-decoration: none;
        color: var(--card-fg);
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--card-shadow);
        padding: var(--space-4);
        transition: box-shadow .18s var(--ease), transform .06s var(--ease);
    }

    .card:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }

    .card:active {
        transform: scale(.996);
    }

    /* Layout interne */
    .card__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 6px;
    }

    /* Typo */
    .card__kicker {
        margin: 0;
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        opacity: .95;
    }

    .card__value {
        font-size: 32px;
        line-height: 1.1;
        margin: 4px 0 2px;
    }

    .card__value,
    .card__kicker,
    .card__cta {
        font-family: var(--font-display);
        letter-spacing: .01em;
    }

    .card__value,
    .kpi,
    .rank,
    .score {
        font-variant-numeric: tabular-nums lining-nums;
    }

    .card__meta {
        font-size: 13px;
        color: var(--card-fg-muted);
    }

    .subline {
        font-size: 14px;
        opacity: .95;
        margin-top: 6px;
    }

    .meta-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Micro-CTA (puce de droite et CTA dans les listes) */
    .card__cta {
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: 999px;
        border: 2px solid var(--card-cta-border);
        color: var(--card-cta-fg);
        opacity: .95;
        transition: background .18s var(--ease), transform .06s var(--ease);
    }

    .card__cta--head {
        margin-left: 8px;
    }

    @media (hover:hover) {
        .card:hover .card__cta {
            /* arrière-plan léger générique ; les pages peuvent surcharger */
            background: color-mix(in oklab, currentColor 10%, transparent);
        }
    }

    .card:active .card__cta {
        transform: scale(.98);
    }

    /* États génériques (réutilisés sur plusieurs pages) */
    .card .state {
        display: none;
    }

    .card .state.state--show {
        display: block;
    }

    .card .rank-states {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .card .rank-state {
        display: none;
        align-items: center;
        gap: 6px;
    }

    .card .rank-state.rank-state--show {
        display: inline-flex;
    }

    /* Variants de couleur — à définir au niveau page (ex: Dashboard)
     Exemple :
       .card--blue { --card-bg: var(--accent-blue-aa); --card-fg:#fff; --card-fg-muted: rgba(255,255,255,.9); --card-cta-fg:#fff; --card-cta-border: rgba(255,255,255,.75); }
     Supprimés d'ici pour éviter le couplage page/composant. */

    /* Accessibilité/Perf */
    @media (prefers-reduced-motion: reduce) {
        .card {
            transition: none;
        }

        .card__cta {
            transition: none;
        }
    }

    /* Légers ajustements responsifs */
    @media (min-width: 740px) {
        .card__value {
            font-size: 36px;
        }
    }
}