/* ==========================================================================
   MYRIAGE — Fiche vidéo + lecteur (assets/js/video.js)
   La fiche est un lien vers le MP4 : sans JavaScript, il s'ouvre dans le
   lecteur du navigateur. Avec JavaScript, il ouvre un <dialog>.
   ========================================================================== */

.project-card__link { display: block; border-radius: var(--r-sm); color: inherit; }
.project-card__link:hover { color: inherit; }
.project-card__link .project-card__media { position: relative; }
.project-card__link img { transition: transform .5s var(--ease-out); }
.project-card__link:hover img,
.project-card__link:focus-visible img { transform: scale(1.03); }

.project-card__play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  transition: transform .3s var(--ease-out), background-color .2s;
}
.project-card__play svg { width: 22px; height: 22px; margin-left: 3px; }
.project-card__link:hover .project-card__play,
.project-card__link:focus-visible .project-card__play {
  background: var(--c-accent-hover);
  transform: scale(1.08);
}
.project-card__duration {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(26, 24, 19, .82);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.3;
}

.video-dialog {
  --vr: 1.7778;                 /* largeur / hauteur, posé par video.js */
  width: min(92vw, 1120px, calc((100vh - 140px) * var(--vr)));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-bg-page);
  color: var(--c-text);
  overflow: hidden;
}
.video-dialog::backdrop { background: rgba(14, 13, 9, .86); }

.video-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 18px;
}
.video-dialog__title {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-dialog__close {
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.video-dialog__close:hover { border-color: var(--c-text); }

.video-dialog__video {
  display: block;
  width: 100%;
  aspect-ratio: var(--vr);
  background: #000;
  object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .video-dialog[open] { animation: video-in .22s var(--ease-out); }
  .video-dialog[open]::backdrop { animation: video-fade .22s linear; }
}
@keyframes video-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes video-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .project-card__link img,
  .project-card__play { transition: none; }
  .project-card__link:hover img,
  .project-card__link:focus-visible img { transform: none; }
}

/* Lecteur YouTube : un <iframe> à la place du <video> */
.video-dialog__frame { border: 0; }

/* Mention affichée sous la grille quand une vidéo passe par YouTube
   (cachée par défaut, révélée par video.js) */
.video-note {
  max-width: 62ch;
  margin: 28px 0 0;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.video-note[hidden] { display: none; }
.video-note a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.video-note a:hover { color: var(--c-accent-hover); }