
/*HEADER FOOTER BODY*/

body{
    margin: auto;
    background-color: rgb(255, 255, 255);
}

header{
    align-items: center;
    background-color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.header_view{
    display: flex;
    align-items: center;
}
.barre{
    height: 5px;
    width: auto;
    background-color: black;
}
/*INDEX*/

.banner {
  background: url('images/baniere.jpg') no-repeat center center;
  background-size: cover;
}

/*LISTING*/

.titre_h2{
  margin-bottom: 20px;
}

.h2_listing{
  margin-bottom: 30px;
}

h5{
  padding-top: 6px;
  padding-bottom: 20px;
}

.pokemon-img-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pokemon-gestion{
  max-width: 60px;
  max-height: 60px;
  height: 100%;
}

.pokemon-img {
  max-height: 240px;
  max-width: 100%;
  object-fit: contain;
}

.type-plante{
  background: linear-gradient(to bottom, #a8e6a3, #e0f2e9);
}

.type-feu{
  background: linear-gradient(to bottom, #ffb677, #ffe3c9);
}
  
.type-eau {
  background: linear-gradient(to bottom, #77bfff, #d0f0ff);
}

.type-electrik {
  background: linear-gradient(to bottom, #ffea70, #fff9c9);
}

.type-glace {
  background: linear-gradient(to bottom, #b3e5fc, #e1f5fe);
}

.type-acier {
  background: linear-gradient(to bottom, #cfd8dc, #eceff1);
}

.type-spectre {
  background: linear-gradient(to bottom, #8572ee, #d1c8ff);
}

.type-insecte {
  background: linear-gradient(to bottom, #c6e48b, #e7f3c6);
}

.type-roche {
  background: linear-gradient(to bottom, #bca88e, #e0d3c5);
}

.type-sol {
  background: linear-gradient(to bottom, #e7b56c, #f8e1c1);
}

.type-poison {
  background: linear-gradient(to bottom, #b87fd7, #e2c1f5);
}

.type-combat {
  background: linear-gradient(to bottom, #e57373, #ffb4a2);
}

.type-dragon {
  background: linear-gradient(to bottom, #6a5acd, #d1c8ff);
}

.type-psy {
  background: linear-gradient(to bottom, #ff80ab, #ffc1e3);
}

.type-tenebres {
  background: linear-gradient(to bottom, #5a5a5a, #9e9e9e);
}

.type-vol {
  background: linear-gradient(to bottom, #b3d4fc, #e1ebf7);
}


/*form_recherche*/

.pokemon-form {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 8px;
    background: #f8f9fa;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .pokemon-form .form-label {
    font-weight: bold;
    color: #333;
  }
  
  .pokemon-form .form-control {
    border-radius: 6px;
    padding: 10px;
  }
  
  .button-group {
    display: flex;
    justify-content: space-between;
  }
  
  .button-group .btn {
    width: 48%;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
  }

  .passerelle{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  .passerelle a,.passerelle button{
    width: 350px;
    margin: 10px;
    padding: 9px 0px;
  }


@media (max-width: 575.98px) {
    .banner img {
        height: 200px; /* Réduction de la hauteur */
    }
}