.conteneur{
  position: relative;
  background-color: black;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
  min-height: 730px;
  gap: 5px;
}


.contenant{
  display: flex;
  flex: 1;
  background-color: rgba(255, 0, 0, 0.477);
  text-align: center;
  border: solid 1px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  transition: all 1s;
  backdrop-filter: blur(2px);
}

.contenu{
  color: black;
  -webkit-text-stroke: 0.5px goldenrod;
  font-size: 3rem;
  white-space: nowrap;
  transform: rotate(90deg);
  transition: all 1s;
  text-shadow: 
      1px 1px gainsboro,
      1px 2px gainsboro,
      1px 3px gainsboro;
      
  backdrop-filter: blur(1px);
}
.contenant:hover{
  flex: 4;
  
}

.text-project{
position: relative;
width: 100%;
height: fit-content;
padding: 20px;
transition: 0.5s;
display: none;
font-size: 2.5rem;
}

.text-project#blur.active{
  pointer-events: none;
  user-select: none;
}
.project{
  position: relative;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
}


.popup, .popup1, .popup2, .popup3{
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.30);
  background-image: linear-gradient(60deg, black, white, black );
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}

.popup.active, .popup1.active, .popup2.active, .popup3.active{
  top: 50%;
  visibility: visible;
  transition: .5s;
  opacity: 1;
}



.btn-project{
  max-width: 20rem;
  display: inline-flex;
  height: fit-content;

  margin-top: 1rem;
  cursor: pointer;
  border:var(--border-light);
  background: none;
  font-size: 2rem;
  overflow: hidden;
  border-radius: 3rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}


.more{
display: inline-block;
padding:1rem .5rem;
background-color: var(--yellow);
font-size: 2rem;
}

.more:hover{
transform: scale(1.5);
transition: .4s;
}

.contenant:hover .contenu, .contenant:hover .text-project{
  transform: rotate(0deg);
  transition: all 1s;
  display: inline-block;
  white-space: normal;
}




.air{
  background: url(/images/projets/air.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  
}

.whats{
  background: url(/images/projets/whats.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}
.snake{
  background: url(/images/projets/snake.png);
  background: url(/images/projets/snake.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}

.mul{
  background: url(/images/projets/mul.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}