@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* @import url("https://fonts.googleapis.com/css2?family=Ranchers&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Francois+One&display=swap");
*{
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
}

body{
    background-color: #fffff2;
    overflow-y: scroll; 
}

h1{
    font-size: 55px;
    margin: 0;
    margin-left: 10px; 
    /* font-family: "Ranchers", sans-serif; */
    font-family: "Francois One", sans-serif;
}
  h2 {
    color: #ab0000;
    font-size: 20px; 
  }
  .lcd{
    font-size: 30px;
    margin: 0 0 0 20px;
  }
  strong{
    font-size: 24px;
  }
  img{
    width: 70px;
  }
  .bandeau {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    width: 100%;         
    margin: 0;     
  }

  .home-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .boutons-bandeau{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sub-links {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .sub-links a {
    font-size: 12px;
    font-weight: bold;
    color: #3c2d00;
    background-color: #ffef3f;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 10px;
  }

  .sub-links a:hover {
    background-color: #f1e87e;
    text-decoration: none;
  }


.vendre{
    font-size: 40px;
    color: #e71d1d;
}
.info{
    font-size: 18px;
    margin: 5px;
    color: #e71d1d;
}

.page-accueil {
    text-align: center;
}

.cta-button {
    margin: 10px;
    padding: 20px 30px;
    font-size: 25px;
    font-weight: bold;
    border: 2px solid #a11313;
    border-radius: 8px;
    background-color: #e71d1d; 
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    animation: pulse 1.5s infinite ease-in-out;
}

.cta-button:hover {
    background-color: #ffe11e;
    border: 2px solid #dcbe00;
    transform: scale(1.05);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.07); }
    100% { transform: scale(1); }
}

.webeps{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
}
.animation{
    width: 350px;
    margin: 10px 30px;
    border-radius: 15px;
    border: 2px solid #ebecc8;
    padding: 20px;
}

.catalogue-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    text-align: center;
}

.marques-container {
    background-color: #faddebff;
    padding: 0 0 10px 0;
    border-radius: 15px;
}
.marques-container h2 {
    color: #7e053fff;
    margin: 5px;
}

.marques-list button {
    margin: 5px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 10px;
    border: solid 2px #da55953f;
    color: #57052cff;
}
.marques-list button:not(.selected):hover {
    background-color: #be407d31;
}
.marques-list .selected {
    background-color: #be407dff;
    color: white;
    border: solid 2px #7e053fff;
}

.marque-images-container {
    display: flex;
    justify-content: center;
    gap: 20px; 
    align-items: center; 
}

.marque-images-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.marque-image-card {
    width: 150px;
    flex: 0 0 auto;
}

.marque-image-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: solid 1px #c0c0c0;
    object-fit: contain;
}

.marque-description p{
    font-size: 15px;
    max-width: 300px;
    margin: 0;
    background-color: #faddebff;
    padding: 10px;
    border-radius: 15px;
    border: solid 2px #da559516;
    color: #57052cff;
}

.formes-container {
    background-color: #c7f0dfff;
    padding: 0 0 10px 0;
    border-radius: 15px;
}

.formes-container h2 {
    color: #065f3aff;
    margin: 5px;
}
.formes-list button {
    margin: 5px;
    padding: 8px 12px;
    border-radius: 10px;
    border: solid 2px #0b975d62;
    cursor: pointer;
    color: #073d26ff;
}
.formes-list button:not(.selected):hover {
    background-color: #b1e0cc;
}
.formes-list .selected {
    background-color: #33af7b;
    color: white;
    border: solid 2px #0b975dff;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.07); }
100% { transform: scale(1); }
}
.forme-img {
    width: 80px; 
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}
.jeux-container { 
    background-color: #caddf0ff; 
    border-radius: 15px; 
    padding: 0 0 10px 0;
} 
.jeux-container h2 { 
    margin: 5px;
    color: #184d81ff; 
} 
.jeux-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.jeu-card {
    width: 120px;
    text-align: center;
    cursor: pointer;
}
.jeu-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: solid 2px #184d819c;
    transition: transform 0.2s ease;
}
.jeu-card img:hover {
    transform: scale(1.05);
}
.jeu-nom {
    margin: 0px;
    font-size: 13px;
    color: #184d81ff;
}

.repere-card {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    margin: 5px;
}

.meme_forme-card {
    width: auto;            
    display: inline;        
    font-weight: bold;
    font-size: 20px;
    margin: 5px 0;
    text-align: left;       
    color: rgb(0, 163, 168);
}


.meme_forme-card {
    color: #00a3a8;
}

.repere-card {
    color: #ff69b4;
}
.marque-link {
    color: #007276;
    text-decoration: none;
    cursor: pointer;
    display: inline;
}

.marque-link:hover {
    color: #00ced5;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.815);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: auto;
}

.gallery-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-height: 100%;
    overflow: auto;
}

.main-image {
    width: 600px;
    margin: 0 auto; 
    box-sizing: border-box;
}

.main-image img {
    width: 432px; 
    height: 432px;   
    display: block;
    border-radius: 10px;
    border: solid 2px #0516269c;
    object-fit: contain; 
    margin: 0 auto;   
}

.main-title {
    text-align: center;
    color: #fff;
    margin-bottom: 10px;
}

.game-name{
    color: white;
    font-size: 30px;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 90%;
}

.gallery-item img {
    height: 100px;
    width: auto;
    border-radius: 10px;
    border: solid 2px #184d819c;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}
.jeu-description {
    max-width: 500px;
    margin: 10px auto;
    padding: 5px;
    color: white;
    background: #000000e8;
    border-radius: 15px;
    border: 1px rgb(104, 104, 104) solid;
    font-size: 18px;
    text-align: center;
}

/* Container */
#contactForm {
  max-width: 480px;
  margin: 40px auto;
  padding: 0 15px;
  font-family: "Inter", sans-serif;
}

fieldset {
  border: 2px solid #ab000046;
  border-radius: 10px;
  padding: 25px 20px;
  background-color: #fffde7;
}

legend {
  font-weight: 600;
  color: #ab0000;
  font-size: 1.2rem;
}

.input-container,
.text-area {
  margin-bottom: 18px;
}

.item {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  transition: .25s;
}

.item:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,152,219,.15);
}

.error {
  border-color: #e74c3c !important;
}

.error-txt {
  font-size: 13px;
  color: #e74c3c;
  margin-top: 6px;
  display: none;
}

.error + .error-txt,
.error.parent .error-txt {
  display: block;
}

button.submit {
  width: 100%;
  background: #e71d1d;
  border: 2px solid #a80505;
  color: white;
  padding: 14px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: .25s;
}

button.submit:hover {
  background: #ffe11e;
  border: 2px solid #dcbe00;
  transform: scale(1.05);
}

#remerciement {
  max-width: 480px;
  margin: 25px auto;
  text-align: center;
  font-size: 1.1rem;
}

/* Recherche page */
.right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 5px;
    margin-top: 20px;
}

.search-btn {
    background-color :#7ed5e4;
    border-radius: 10px;
    padding: 5px;
    margin-top: 5px;
    width: 200px;
    text-decoration: none;
    color: #0c3f47;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}
.scheme-btn {
    background-color: #faddebff;
    border-radius: 10px;
    padding: 5px;
    margin-top: 5px;
    width: 200px;
    text-decoration: none;
    color: #7e053fff;
    text-align: center;
    font-weight: bold;
}

.search-btn:hover {
    background-color: #56b0c0b6;
}
.recherche-container {
    width: 100%;
    margin: auto;
    padding: 0 20px;
}
.jeu-marque {
    margin: 0;
    font-size: 12px;
    color: #6b6b6b;
}

.search-box {
    text-align: center;
    margin-bottom: 30px;
}

#searchInput {
    width: 300px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-right: 10px;
}

#searchButton {
    padding: 10px 20px;
    background-color: #218a9c;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

#searchButton:hover {
    background-color: #218a9ccd;
}

#searchStatus{
    padding: 0;
}

.error {
    color: red;
    text-align: center;
    padding: 20px;
}

.info {
    text-align: center;
    color: #666;
    padding: 20px;
}

.recherche{
    font-size: 30px;
    color: #218a9c;
    padding: 15px;
    font-family: "Poppins", sans-serif;
}