@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body{
  margin:0px;
  padding: 0px;
  font-family: 'Open Sans', sans-serif;
}
/* Barre de navigation */
nav{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
  position: sticky;
  top: 0;
}
nav h1{
  font-size: 30px;
  
}

nav .onglets{
  display: flex;
  flex-wrap:wrap;
}
nav .onglets p{
  font-size: 17px;
  margin-right: 10px;
  cursor:pointer;
}
nav .onglets input{
  margin: 8px 20px;
  padding: 15px;
  border-radius: 30px;
  border:none;
  background-color: #f2f2f2;
  outline:none;
}
/* Fin de la barre de navigation */

/* Header */
header{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  padding: 20px;
}
header h1{
  font-size: 50px;
  max-width: 500px;
  text-align:center;
  
}
header button{
  padding: 15px 20px;
  font-size: 20px;
  border:none;
  border-radius: 5px;
  outline:none;
  cursor:pointer;
}
/* Fin du header */

/* Section principale */

.main{
  margin: 20px;
  margin-top: 80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
/* Toutes les cartes */
.cards{
  display:flex;
  flex-wrap:wrap;
}
.cards .card{
  margin-right: 20px;
  cursor:pointer;
}
.cards .card img{
  width: 350px;
}
.cards .card .card-header{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.cards .card .card-body p{
  margin-top: -10px;
}
/* Fin de toutes les cartes */

/* Video de présentation */
.main .video{
  margin-top: 80px;
  width: 90%;
}
.main .video iframe{
  border:none;
  border-radius: 10px;
  width: 100%;
  height: 400px;
}
/* Fin de la vidéo de présentation */
/* Fin de la section principale */

/* Pied de page */
footer {
  margin-top: 100px;
  background-color: #000;
  padding: 30px;
  color: #fff;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
footer .social-media{
  display: ruby;
}
footer .social-media p{
  margin-right: 15px;
  border: 1px solid #fff;
  border-radius: 100%;
  padding: 5px;
  text-align:center;
  width: 20px;
  cursor:pointer;
}
/* Fin du pied de page */

@media screen and (max-width: 640px){
  nav .onglets .link, nav h1{
    display:none;
  }
  .cards .card img{
    width: 300px;
  }
}


.jeux-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 960px; /* Ajustez cette valeur selon la taille souhaitée */
  margin: 0 auto;
  padding: 20px;
}

.jeu {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px; /* Bords arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère derrière */
  flex: 0 0 calc(33% - 5%); /* Trois jeux par ligne avec un espace de 20px entre eux */
  margin-bottom: 10%;
  padding: 2%;
  text-align: center;
  overflow: hidden; /* Pour éviter que l'image déborde du conteneur */
  transition: transform 0.5s ease-in-out; /* Transition douce pour l'agrandissement au survol */
}

/* Effet de transition pour les images */
.jeu img {
  max-width: 100%;
  height: auto;
  border-radius: 5px; /* Bords arrondis pour les images */
  transition: transform 0.3s ease-in-out; /* Effet de transition pour les interactions */
}


/* Animation d'agrandissement en boucle */
@keyframes grow {
  0%, 100% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
}

/* Classe d'animation */
.animate {
  animation: grow 3s ease-in-out;
}

/* Agrandissement au survol */
.jeu:hover {
  transform: scale(1.1); /* Grossissement au survol */
}

/* Styles pour le bouton de réservation */
.reservation {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 10px;
}

.reservation:hover {
  background-color: #0056b3;
}



.company-name {

  display: inline-block;

  font-size: 2.5em;

  letter-spacing: 0.1em;

  margin-bottom: 20px;

  font-family: 'SPINC', sans-serif;

}


@font-face {

  font-family: 'SPINC';

  src: url('SPINC___.TTF') format('truetype');

}


/* 
.container {

  text-align: center;            

  flex-grow: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  flex: 1;

  height: 80%;



}



.logo {

  width: 250px; /* Ajustez la taille de votre logo ici */

  margin-bottom: 20px;

  animation: fadeInOut 5s infinite;

}

.company-name {

  display: inline-block;

  font-size: 2.5em;

  letter-spacing: 0.1em;

  margin-bottom: 20px;

  font-family: 'SPINC', sans-serif;

}

.company-name span {

  display: inline-block;

  opacity: 0;

  animation: fadeInLetter 10s forwards;

  animation-iteration-count: infinite;

  scale: 100%;

}

.company-name span:nth-child(1) { animation-delay: 0.2s; }

.company-name span:nth-child(2) { animation-delay: 0.4s; }

.company-name span:nth-child(3) { animation-delay: 0.6s; }

.company-name span:nth-child(4) { animation-delay: 0.8s; }

.company-name span:nth-child(5) { animation-delay: 1s; }

.company-name span:nth-child(6) { animation-delay: 1.2s; }

.company-name span:nth-child(7) { animation-delay: 1.4s; }



@keyframes fadeInOut {

  0% {

      opacity: 0;

  }

  50% {

      opacity: 1;

  }

  100% {

      opacity: 0;

  }

}

@keyframes fadeInLetter {

  0% {

      opacity: 0;

      transform: translateY(20px);

  }

  50% {

      opacity: 1;

      transform: translateY(0);

  }

  100% {

      opacity: 0;

      transform: translateY(-20px);

  }

}

/* Adaptation du style pour l'affichage mobile */
@media screen and (max-width: 640px) {
  /* Cache les éléments non essentiels dans la barre de navigation */
  nav .onglets .link, nav h1 {
    display: block;
  }

  /* Réduit la taille du logo et ajuste la police */
  .company-name {
    font-size: 1.8em; /* Réduit la taille pour s'adapter aux petits écrans */
  }

  /* Style de la grille des produits pour mobile */
  .jeux-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .jeu {
    flex: 0 0 90%; /* Utilise toute la largeur disponible avec marges */
    margin-bottom: 5%;
  }

  /* Ajustement de l'image */
  .jeu img {
    width: 90%;
    height: auto;
  }

  /* Ajustement des marges de la vidéo */
  .main .video iframe {
    width: 100%;
    height: auto;
  }
}

/* Ajustement de l'animation du logo pour une meilleure lisibilité */
.company-name span {
  display: inline-block;
  opacity: 0;
  animation: fadeInLetter 8s forwards;
  animation-iteration-count: infinite;
}

@keyframes fadeInLetter {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}