/* ============================================================
   VIDEO — composant vidéo (section « Zenway en mouvement »)
   ============================================================ */
/* ---------- VIDÉOS ---------- */
.videos-intro {
  max-width: 52ch;
  color: rgba(238, 247, 240, 0.85);
  margin-bottom: 38px;
}

.videos-row {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: 42px;
  align-items: center;
}

.vcard {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.vcard img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.82);
  transition:
    filter 0.4s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vcard:hover img {
  filter: saturate(1) brightness(0.92);
  transform: scale(1.03);
}

.vplay {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold);
  display: grid;
  place-items: center;
}

.vplay::after {
  content: "";
  border-left: 19px solid var(--green-900);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

.vlab {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 26px;
  background: linear-gradient(0deg, rgba(27, 67, 50, 0.95), transparent);
  color: var(--paper);
  font-size: 0.97rem;
  font-weight: 500;
}

.vaside p {
  color: rgba(238, 247, 240, 0.85);
  margin-bottom: 20px;
}

/* ---------- Galerie YouTube (alimentée par assets/js/config-videos.js) ---------- */
.videos-gallery {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.vgrid-card {
  display: block;
}

.vgrid-card .vthumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
}

.vgrid-card .vthumb .vplay {
  width: 52px;
  height: 52px;
  border: 0;
  cursor: pointer;
}

.vgrid-card .vthumb .vplay::after {
  border-left-width: 14px;
  border-top-width: 8px;
  border-bottom-width: 8px;
  margin-left: 3px;
}

.vgrid-card .vthumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vgrid-meta {
  padding: 14px 2px 0;
}

.vgrid-meta h3 {
  font-size: 1.02rem;
  color: var(--paper);
  margin-bottom: 4px;
}

.vgrid-meta p {
  font-size: 0.86rem;
  color: rgba(238, 247, 240, 0.75);
  margin: 0;
}

.videos-empty {
  color: rgba(238, 247, 240, 0.75);
}