#videos{   
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
padding: 40px;
justify-content:center; 
height: auto;
width: calc(100%-80px);
margin-top: 100px;
}

.v{
position: relative;
width: 100%;
height: auto;
border-radius: 40px;
background-color: #E6E6E6;
box-sizing: border-box;
cursor: pointer;
z-index: 30;
transform-style: preserve-3d;
border: solid white 2px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.778) 0px 1px 3px -1px;  
transition: .2s;
}

  .v:hover{
  border: solid #1F2226 2px;
  transition: .5s;
  }

  .v:hover::before{
  content: '';
  position: absolute;
  border-radius: 40px;
  background: linear-gradient(45deg,#83a1ff,#0e51d8, #173acc, #0e51d8, #83a1ff);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  filter: blur(10px);
  transform: translateZ(-1px);
  animation: light 20s linear infinite;   
  }

  .v h1{
  z-index: 35;
  transition: .5s;
  margin: 20px;
  pointer-events: none;
  }
  
    .v:hover h1{
    transition: .5s;
    }

  .v p{
  position: absolute;
  background-color: white;
  border-radius: 150px;
  width: auto;
  bottom: 0;
  right: 20px;
  padding: 10px;
  z-index: 35;
  transition: .5s;
  margin-left: 20px;
  pointer-events: none;
  }

/*ul li*/

.v ul{
background-size: cover;
list-style: none;
border-radius: 20px;
width: calc(100% - 40px);
top: 0;
margin: 20px;
padding: 0;
aspect-ratio: 16/9;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
transform-origin: center;
transition: .5s;
overflow: hidden;
}

  .v:hover ul{
  grid-template-columns: 0fr 6fr 0fr;
  transition: .5s;
  }

  
  .v ul li:first-child, .v ul li:last-child{
  transform: skew(-20deg);
  overflow: hidden;
  box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
  }

  .v ul li:first-child{
  margin-left: -40%;
  }

  .v ul li:last-child{
  margin-right: -40%;
  }

  .v ul li:first-child:before, .v ul li:last-child:before {
  content: '';
  position: absolute;
  width: 210%;
  height: 100%;
  margin: 0;
  padding: 0;
  transform: skew(20deg);
  background-size: cover;
  transform-origin: bottom left;
  }
  
  .v ul li:first-child:before{
  background-position: right 35% bottom 45%
  }
    
  .v ul li:last-child:before{
  background-position: right 35% bottom 45%
  }
        
  .v ul li:nth-child(2){
  background-color: rgb(0, 60, 255);
  opacity: 0;
  }



/*pop-up*/

.popup{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 120;
}
    
  .popupclose, .popnext,.poppre{/*bouton*/
  position: fixed;
  z-index: 1;
  }
    
  .popupclose{
  background-image: url(../images/icon/picto/croix.webp);
  top: 10vh;
  right: 5vw;
  }
    
  .popnext{
  background-image: url(../images/icon/picto/fleche.webp);
  top: 47vH;
  right: 5vw;
  }
          
  .poppre{
  background-image: url(../images/icon/picto/fleche.webp);
  transform: rotate(180deg);
  top: 47vH;
  left: 5vw;
  }
    
  iframe {
  position: fixed;
  width: 50vw;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 3.5% / 6%;
  top: 100vh;
  z-index: 120;
  left: 25vw;
  transform: translateY(0);
  transition: transform 0.5s;
  }
        
  .popup-open iframe {
  top: 20vh;
  }
    





/*Visuel*/

.posters {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 40px;
padding: 40px;
height: auto;
width: calc(100% - 80px);
margin-top: 100px;
}
    
.p{
width: 100%;
height: auto; 
border-radius: 40px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.778) 0px 1px 3px -1px;  
cursor: pointer;
border: solid white 2px;
transition: .2s;
transform-style: preserve-3d;
background-color: #E6E6E6;
}
    
  .p:hover{
  border: solid #1F2226 2px;
  transition: 0.5s;
  }   
  .p:hover::before{
  content: '';
  position: absolute;
  border-radius: 40px;
  background: linear-gradient(45deg,#83a1ff,#0e51d8, #173acc, #0e51d8, #83a1ff);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  filter: blur(10px);
  transform: translateZ(-1px);
  animation: light 20s linear infinite;   
  }
    
  .p img{
  width: calc(100% - 40px);
  padding: 20px;
  border-radius: 40px;
  }
  .p h1{
  margin-left: 20px;
  }

  .p p{
    position: absolute;
    background-color: white;
    border-radius: 150px;
    width: auto;
    bottom: 0;
    right: 20px;
    padding: 10px;
    z-index: 35;
    transition: .5s;
    margin-left: 20px;
    pointer-events: none;
    }


  /*visuels popup*/
        
  .poster-preview{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.922);
  top: 0;
  left: 0vw;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  }
    
  .poster-preview img{
  width: auto;
  margin: auto;
  height: 70%;
  border-radius: 20px;
  }
    
  .pos-close, .pos-next, .pos-prev{/*bouton*/
  position: absolute;
  }
    
  .pos-close{
  top: 5vw;
  right: 5vw;
  background-image: url(../images/icon/picto/croix.webp);
  }
    
  .pos-next{
  background-image: url(../images/icon/picto/fleche.webp);
  top: 40vh;
  right: 5vw;
  }
    
  .pos-prev{
  background-image: url(../images/icon/picto/fleche.webp);
  transform: rotate(180deg);
  top: 40vh;
  left: 5vw;
  }
    









@media only screen and (max-width: 1400px) {

  #videos{   
grid-template-columns: 1fr 1fr;
}

.posters {
 grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding: 40px;
  height: auto;
  width: calc(100% - 80px);
  margin-top: 100px;
  }

}

@media only screen and (max-width: 1000px) {
/*videos*/
#videos{   
grid-template-columns: 1fr;
gap: 15px;
padding: 15px;
width: calc(100%-30px);
margin-top: 100px;
}

iframe {
width: 90vw;
left: 5vw;
}

.popupclose{
top: 5vh;
}

.popnext{
top: auto;
bottom: 10vh;
right: 20vw;
}
    
.poppre{
top: auto;
bottom: 10vh;
left: 20vw;
}


/*visuels*/

.posters {
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
width: calc(100% - 40px);
}

.p{
border-radius: 20px;
}

.p img{
width: calc(100% - 20px);
padding: 10px;
border-radius: 20px;
}

.p h1{
margin-left: 10px;
}

.p p{
position: static;
background-color: white;
border-radius: 150px;
width: 60px;
padding: 10px;
margin-left: 10px;
display: flex;
justify-content: center;
}

.poster-preview img{
width: 80%;
margin: auto;
height:auto;
} 

}