@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;
}
h1{
  
  text-align: center;
}
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;
  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);
  }
}

.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;
  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;
}

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

.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;
}

/* 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;
}

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


button {
  background-color: #ffffff; /* Fond blanc */
  color: #333333; /* Texte gris foncé */
  border: 2px solid #4a90e2; /* Bordure bleue */
  border-radius: 25px; /* Coins arrondis */
  padding: 12px 24px; /* Espacement intérieur */
  font-size: 1.1em; /* Taille de la police */
  font-weight: bold; /* Texte en gras */
  cursor: pointer; /* Indicateur que le bouton est cliquable */
  transition: background-color 0.3s, color 0.3s, transform 0.3s; /* Animations fluides */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre */
}

button:hover {
  background-color: #4a90e2; /* Fond bleu au survol */
  color: #ffffff; /* Texte blanc au survol */
  transform: translateY(-2px); /* Légère élévation au survol */
}