/* ds › VignetteProduction. */
.vignette-production { min-width: 0; font-family: var(--f-texte); }

/* Voile léger au survol, sur le cadre de la photo seulement : jamais sur la
   légende (le crédit reste lisible), jamais sur le gabarit sans photo. */
.vignette-production .figure-creditee__cadre:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.vignette-production:hover .figure-creditee__cadre:has(img)::after {
  background: var(--c-voile-leger);
}

.vignette-production__tete {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-top: var(--e-3);
}
.vignette-production__titre {
  flex: 1;
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  font-weight: var(--g-normal);
}
.vignette-production__titre a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  color: var(--c-ink);
  text-decoration: none;
  text-underline-offset: 3px;
}
.vignette-production:hover .vignette-production__titre a { text-decoration: underline; }
/* Le badge s'aligne sur la première ligne du titre, centrée dans 44 px. */
.vignette-production__tete > :not(h3) { flex: 0 0 auto; margin-top: 10px; }

.vignette-production__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  margin: var(--e-2) 0 0;
  font-size: var(--t-small);
  color: var(--c-ink-2);
}
.vignette-production__reperes > div { display: flex; }
.vignette-production__reperes dd { margin: 0; }
.vignette-production__annee dd { font-variant-numeric: tabular-nums; }
.vignette-production__role dd { color: var(--c-ink-3); }
/* Le point séparateur est décoratif : texte de remplacement vide, il n'est
   pas lu. Un <span> entre les <div> d'un <dl> ne serait pas valide. */
.vignette-production__reperes > div + div::before {
  content: "·" / "";
  margin-right: var(--e-3);
  color: var(--c-line-fort);
}