/* Carte (.card) : du verre (comme .glass) et un panneau (.panel) en bas ; avec une image (.card__cover--image), la couverture
   la remplit et le texte passe en blanc. Toute la carte est un lien.
   Mobile : une card par écran, calée au défilement. Bureau (.cards--gallery, >= 900 px) : galerie en colonnes inégales
   dont chaque card se place par --card-col / --card-row / --card-span ; le panneau se déploie au survol.
   <a class="card"><span class="card__cover"></span><span class="card__panel panel">…</span></a> */
.cards { display: block; }
.card {
  --card-fg: var(--text-h);
  --card-radius-tl: 0px; --card-radius-tr: 0px; --card-radius-br: 0px; --card-radius-bl: 0px;
  position: relative; display: flex; align-items: flex-end; min-height: var(--card-height); overflow: hidden;
  border-radius: var(--card-radius-tl) var(--card-radius-tr) var(--card-radius-br) var(--card-radius-bl);
  color: var(--card-fg); text-decoration: none; scroll-snap-align: start;
  background: color-mix(in srgb, var(--glass-tint) var(--glass-shift), transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.card:has(.card__cover--image, .card__video.is-playing) { --card-fg: #fff; }
.card--round-tl { --card-radius-tl: var(--card-radius); }
.card--round-tr { --card-radius-tr: var(--card-radius); }
.card--round-br { --card-radius-br: var(--card-radius); }
.card--round-bl { --card-radius-bl: var(--card-radius); }
.card__cover {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .4s ease-out;
}
.card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.card__video.is-playing { opacity: 1; }
.card__cover--image { background-image: var(--card-image); }
.card__cover--image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 60%); }
.card__panel { position: relative; display: block; width: 100%; padding: var(--space-3) var(--space-2) var(--space-4); }
.card__eyebrow, .card__title, .card__lead { display: block; }
.card__eyebrow { margin: 0; font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.card__title { margin: .3rem 0; font: 700 clamp(1.8rem, 8vw, 2.6rem)/1.1 var(--display); overflow-wrap: anywhere; }
.card__lead { margin: 0 0 1rem; max-width: 34rem; }
.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font: .75rem var(--mono); }
.card__tag { padding: .15rem .5rem; background: color-mix(in srgb, currentColor 14%, transparent); }
.card__more { display: grid; grid-template-rows: 1fr; }
.card__more-inner { min-height: 0; overflow: hidden; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

@media (max-width: 899px) {
  :root:has(.cards) { scroll-snap-type: y proximity; }
}

@media (min-width: 900px) {
  .cards--gallery {
    display: grid; grid-template-columns: var(--cards-columns); grid-auto-rows: var(--cards-row); column-gap: var(--cards-gap);
  }
  .cards--gallery .card {
    min-height: 0; grid-column: var(--card-col); grid-row: var(--card-row) / span var(--card-span);
    margin-bottom: var(--cards-gap); scroll-snap-align: none;
  }
  .cards--gallery .card__panel { padding: var(--space-2); }
  .cards--gallery .card__title { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
  .cards--gallery .card--feature .card__title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
}
@media (min-width: 900px) and (hover: hover) {
  .cards--gallery .card__more { grid-template-rows: 0fr; transition: grid-template-rows var(--transition); }
  .cards--gallery .card__kind { display: none; }
  .cards--gallery .card:hover .card__more, .cards--gallery .card:focus-visible .card__more { grid-template-rows: 1fr; }
  .cards--gallery .card:hover .card__kind, .cards--gallery .card:focus-visible .card__kind { display: inline; }
  .cards--gallery .card:hover .card__cover, .cards--gallery .card:focus-visible .card__cover { transform: scale(var(--card-hover-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .card__cover, .card__more, .card__video { transition: none !important; }
  .card__cover { transform: none !important; }
}