/* press.css — press.html only. Loaded after css/base.css. */

.p-head { padding-top: calc(3 * var(--leading)); }

/* — passages média : .card / .card-kicker / .card-title viennent du design system — */
.press-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: var(--leading);
}
.press-grid .card-kicker { color: var(--color-accent-700); }
.press-figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.press-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.press-grid .card-title { line-height: 1.3; }
@media (max-width: 900px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .press-grid { grid-template-columns: 1fr; } }

.press-panel {
  background: var(--color-accent-2-100);
  border-radius: calc(2 * var(--radius-lg));
  padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px);
  margin: calc(1.5 * var(--leading)) 0 calc(3 * var(--leading));
}
.press-panel h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; margin: 0 0 10px;
}
.press-panel .note { font-size: 15.5px; line-height: var(--leading); max-width: 50ch; }

/* — la carte entière mène à la vidéo — */
.press-card { padding: 0; overflow: hidden; }
.press-link {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 0 var(--half);
  color: inherit; text-decoration: none;
}
.press-link .card-kicker,
.press-link .card-title,
.press-ver { padding-inline: var(--space-3); }
.press-link .card-kicker { margin-top: 10px; }

/* vignette + pastille de lecture */
.press-figure { position: relative; margin: 0; }
.press-link:hover .press-figure img { transform: scale(1.03); }
.press-figure img { transition: transform 220ms ease; }
@media (prefers-reduced-motion: reduce) { .press-figure img { transition: none; } }

.press-play {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-accent-800);
  box-shadow: var(--shadow-md);
  transition: transform 180ms ease;
}
.press-play svg { width: 22px; height: 22px; margin-left: 2px; }
.press-link:hover .press-play { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .press-play { transition: none; } }

.press-ver {
  font-size: 13px; font-weight: 600;
  color: var(--color-accent-700);
}
.press-link:hover .press-ver { text-decoration: underline; }