/* =========================================
   CARTES — services, articles. La carte entière est un lien (<a class="card">).
   ========================================= */

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-background);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    transform: translateY(var(--lift));
}

.card__media {
    background-color: var(--color-background-alt);
}

/* Le ratio est porté par l'image : un conteneur à ratio s'étire si l'image est plus haute que lui. */
.card__media img,
.card__media:empty {
    width: 100%;
    aspect-ratio: var(--card-image-ratio);
    object-fit: cover;
}

.card__body {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-md);
}

.card__title {
    font-size: var(--text-h3);
}

.card__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.card__meta {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
}

/* Masqué par le filtre (main.js) */
[data-filter-item][hidden] {
    display: none;
}