/* ==========================================================================
   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); }

/* --------------------------------------------------------------------------
   Aperçu au survol (video.js) : un MP4 muet posé sur l'image, qui n'apparaît
   qu'une fois la lecture réellement partie (classe is-previewing).
   -------------------------------------------------------------------------- */
.project-card__play,
.project-card__duration { z-index: 1; }
.project-card__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
}
.is-previewing .project-card__preview { opacity: 1; }
.project-card__link:hover .project-card__preview { transform: scale(1.03); }
.project-card__play { transition: transform .3s var(--ease-out), background-color .2s, opacity .3s; }
.is-previewing .project-card__play { opacity: 0; }

/* Formats des fiches vidéo */
.project-card--h .project-card__media { aspect-ratio: 16 / 9; }
.project-card--v .project-card__media { aspect-ratio: 9 / 16; }

/* --------------------------------------------------------------------------
   Portfolio vidéo : une vidéo à la une, une grille horizontale, une rangée
   de formats verticaux
   -------------------------------------------------------------------------- */
.reel-feature {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
}
.reel-feature .project-card__media { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
.reel-feature .project-card__link { border-radius: var(--r-lg); }
.reel-feature__body { display: flex; flex-direction: column; gap: 18px; }
.reel-feature__kicker { display: flex; align-items: center; gap: 8px; color: var(--track); }
.reel-feature__title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 76px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.reel-feature__text { max-width: 44ch; color: var(--c-text-soft); }
@media (min-width: 960px) {
  .reel-feature { grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr); }
  .reel-feature .project-card__play { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .reel-feature .project-card__play svg { width: 28px; height: 28px; }
}

.reel-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 44px clamp(20px, 2.4vw, 32px);
}
.reel-grid > * { grid-column: span 6; }
@media (min-width: 640px) {
  .reel-grid > * { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .reel-grid > * { grid-column: span 2; }
  .reel-grid > :nth-child(-n+2) { grid-column: span 3; }
}

.reel-vertical {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px clamp(16px, 2.4vw, 32px);
}
.reel-vertical__intro { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; }
.reel-vertical__intro p { max-width: 40ch; color: var(--c-text-soft); }
@media (min-width: 900px) {
  .reel-vertical { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)); align-items: end; }
  .reel-vertical__intro { grid-column: auto; align-self: start; }
}
.reel-vertical__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 56px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.reel-block + .reel-block { margin-top: clamp(72px, 9vw, 140px); }

@media (prefers-reduced-motion: reduce) {
  .project-card__play { transition: none; }
}
@media (min-width: 1024px) {
  .reel-grid--three > :nth-child(n) { grid-column: span 2; }
}

/* Table de montage (accueil vidéo) : un vrai plan dans le moniteur */
.edit__screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}