/* ================================================================
   APERÇU PROJET — cadre image/vidéo flottant
   ================================================================
   Créé par creerApercuProjet() dans main.js et positionné par lui
   (style.top / style.right). Utilisé par la mini-nav latérale : au
   survol d'un item, on voit le projet avant d'y aller.
   L'image s'affiche immédiatement, la vidéo (clip de 4 s pré-généré sur R2)
   se fond par-dessus quand elle est prête.
   ================================================================ */

.apercu-projet {
  position: fixed;
  width: min(24vw, 400px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #0F0E0C;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  opacity: 0;
  scale: 0.94;
  transform-origin: right center;
  transition:
    opacity 220ms var(--ease-doux),
    scale 220ms var(--ease-doux),
    top 260ms var(--ease-doux);
  pointer-events: none;
  z-index: 80; /* au-dessus du contenu, sous la nav (100) */
}

.apercu-projet--visible {
  opacity: 1;
  scale: 1;
}

.apercu-projet img,
.apercu-projet video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apercu-projet video {
  opacity: 0;
  transition: opacity var(--duree-moyenne) var(--ease-doux);
}

.apercu-projet video.apercu-projet__video--prete {
  opacity: 1;
}

/* Tactile ou écran étroit (la side-nav y est déjà cachée) : rien */
@media (hover: none), (max-width: 900px) {
  .apercu-projet { display: none; }
}