@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: "PoppinsSemiBoldItalic";
  src: url("font/BBBPoppinsTN-DisplaySemiBoldItalic.woff") format("woff");
}

@font-face {
  font-family: "PoppinsSemiBold";
  src: url("font/BBBPoppinsTN-DisplaySemiBold.woff") format("woff");
}

@font-face {
  font-family: "PoppinsRegular";
  src: url("font/BBBPoppinsTN-TextRegular.woff") format("woff");
}




body{
 font-family: 'PoppinsSemiBold'
}


@media (max-width: 768px) {
  .fond { background-image: url("images/fondmobile.webp") !important;

           }
}

.fond{
  background-image: url("images/fondpc.jpg");
  background-size: cover;
  height: 100vh;
  background-position: center;
;}


.logo{
  position: absolute;
  left: 50%;            /* milieu vertical *//* recentre */
  transform: translateX(-50%);


}

.play{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.drawer {
  max-height: 0px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.7s ease;
  pointer-events: none;
}
.drawer.open {
  max-height: 100px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

::selection {
  background-color: #ff4400; /* couleur du surlignage */
}

.regular{
  font-family: "PoppinsRegular";
}

.italic{
  font-family:"PoppinsSemiBoldItalic"
}