/*
 * Card
 *   <a class="card" href="…">
 *     <div class="card-media"><img …></div>              (ou <div class="card-media-placeholder">✦</div> dedans)
 *     <div class="card-header">
 *       <p class="kicker">…</p><h3 class="card-title">…</h3><p class="card-description">…</p>
 *     </div>
 *     <div class="card-content">…</div>
 *     <div class="card-footer">…</div>
 *   </a>
 *   modifiers : card-flat (image + texte, sans conteneur)
 *   media     : card-media-4x5 · card-media-2x3 · card-media-wide · card-media-muted · card-media-zoom
 *   title     : card-title-lg
 *   badge dans le média : .badge (haut gauche) · .badge-end (haut droite)
 */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 0.5px solid rgba(var(--color-primary-dark-rgb), 0.10);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* ── Média ── */
.card-media {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  background: var(--color-surface-container-high);
}
.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease, filter var(--transition-medium);
}
a.card:hover .card-media img,
.card-media-zoom:hover img { transform: scale(1.03); }

.card-media-4x5  { aspect-ratio: 4 / 5; }
.card-media-2x3  { aspect-ratio: 2 / 3; }
.card-media-wide { aspect-ratio: 16 / 10; }
.card-media-zoom { cursor: zoom-in; }
.card-media-muted img { filter: grayscale(8%); }
a.card:hover .card-media-muted img { filter: grayscale(0%); }

.card-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-placeholder);
  color: var(--color-placeholder-glyph);
  font-size: 2.5rem;
}
.card-media-placeholder.is-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
}

.card-media .badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; backdrop-filter: blur(8px); }
.card-media .badge-end { left: auto; right: 1rem; }

/* ── Texte ── */
.card-header { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 1.4rem 0; }
.card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-on-surface);
}
.card-title-lg { font-size: var(--text-xl); font-style: italic; }
a.card-title,
.card-title-link { text-decoration: none; transition: color var(--transition-base); }
a.card-title:hover,
.card-title-link:hover { color: var(--color-primary); }
.card-description {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-on-surface-muted);
}
.card-header .badge { align-self: flex-start; margin-top: 0.3rem; }

.card-content {
  padding: 0.8rem 1.4rem 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}
.card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.4rem 1.4rem;
  margin-top: auto;
}

/* ── Variante « flat » : image + texte, sans conteneur ── */
.card-flat { background: none; border: 0; border-radius: 0; overflow: visible; }
.card-flat .card-media { box-shadow: var(--shadow-ambient); }
.card-flat .card-header,
.card-flat .card-content,
.card-flat .card-footer { padding-left: 0; padding-right: 0; }
.card-flat .card-header { padding-top: 1rem; }
.card-flat .card-footer { padding-bottom: 0; }
a.card-flat:hover { transform: translateY(-4px); box-shadow: none; }
a.card-flat:hover .card-media { box-shadow: var(--shadow-lift); }