@charset "UTF-8";
.intro-video-portfolio {
  opacity: 1; /* Vidéo visible par défaut */
  -webkit-transition: opacity 1s ease, -webkit-transform 0.8s ease-out;
  transition: opacity 1s ease, -webkit-transform 0.8s ease-out;
  transition: opacity 1s ease, transform 0.8s ease-out;
  transition: opacity 1s ease, transform 0.8s ease-out, -webkit-transform 0.8s ease-out; /* Ajout transform */
  top: 0; /* Aligne avec le haut de la fenêtre */
  left: 0;
  position: fixed; /* Position relative du conteneur principal */
  width: 100vw; /* 100% de la largeur visible de l'écran */
  height: 100vh; /* 100% de la hauteur visible de l'écran */
  overflow: hidden; /* Assure que rien ne dépasse du conteneur */
  -webkit-transform: translateY(100%);
          transform: translateY(100%); /* Position de départ: hors-écran en bas */
  will-change: transform, opacity;
  z-index: 4; /* Affiche la vidéo au-dessus de tout */
}
.intro-video-portfolio video {
  cursor: pointer;
  position: absolute; /* Positionner la vidéo absolue dans le conteneur */
  top: 50%; /* Centrer verticalement */
  left: 50%; /* Centrer horizontalement */
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); /* Ajuste le centrage pour garder la vidéo au centre de l'écran */
  width: 100%; /* La largeur par défaut sera la taille de l'écran */
  height: 100%; /* La hauteur par défaut sera alignée à l'écran */
  -o-object-fit: cover;
     object-fit: cover; /* Couvre tout l'espace du conteneur sans distorsion */
}

/* Quand on ajoute la classe, l’élément glisse depuis le bas jusqu’à sa position */
.intro-video-portfolio.is-visible {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.intro-video-portfolio.fade-out {
  opacity: 0; /* Rend la vidéo transparente */
  -webkit-transition: opacity 1s ease, -webkit-transform 0.6s ease-out;
  transition: opacity 1s ease, -webkit-transform 0.6s ease-out;
  transition: opacity 1s ease, transform 0.6s ease-out;
  transition: opacity 1s ease, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}
/*# sourceMappingURL=video-may21-portfolio.css.map */