body { margin: 0; padding: 0; background-color: #000; font-family: 'roboto', sans-serif; 
    background-image: url('../images/image-de-fond.jpg'); 
    background-position: top;
    background-size: 100% 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
}
h1 {font-size:32px; font-weight: bold; padding: 20px 0px;}

.boite {max-width:360px; margin: 0 auto;}
.mon-image {width:250px; height: auto;  object-fit: cover;}
.nisa-couleur {color: white;}
.nisa-couleur2 {color: #ffdc00; font-size: 50px; font-weight: 800;}
.la-nisa {background-color: #273746; text-align: center; border: 4px solid rgb(255, 255, 255); padding: 10px 5px;
          margin: 100px 10px;}
hr {background-color: #ffd700; width:60%; height: 3px;}
.bouton {display: inline-block; background-color: #ffdc00; color: #000; border: none; padding: 15px 30px; font-weight: 800;
    font-size: 16px; cursor: pointer;  border-radius: 5px;  text-decoration: none; transition: background-color 0.3s; margin: 10px;}
.bouton:hover {background-color: #ffd700;}
.code {color: #ffd700; font-weight: 600;}
.copyw {text-align: center;color: azure; font-size: 11px;}



/* Page Deux (2) */

.bloc1 {text-align: center; margin-top: 50px;}
.bloc1 p {color: white; margin: 15px auto;}
.grd-jeu {color: #ffd700; font-weight: 600; text-transform: uppercase;}
.voyage { width: 140px; height: auto;  object-fit: cover;}
.bloc1 hr {margin-top: 70px;}

.bloc-categorie {text-align: center; margin-top: 50px; margin-left: 15%; margin-right: 15%;}
.bloc-categorie p {color:white; padding: 0; margin: 0; margin-bottom: 15px;}
.bloc-categorie h1 {color: #ffd700; font-size: 22px; text-align: center; padding: 0; margin: 0;}
.bloc-categorie ul {list-style-type: none; padding: 0;}
.bloc-categorie li {background-color: #ffdc00; padding: 10px; margin: 10px 0; border-radius: 5px; transition: background-color 0.3s;}
.bloc-categorie li a {text-decoration: none; font-weight: 500; color: rgb(0, 0, 0);}
.bloc-categorie li a:hover {color: rgb(255, 255, 255);}
.bloc-categorie li:hover { background-color: #2e2a2a; cursor: pointer; color: white;}


/* Page - Meilleur revelation */
.bloc-prix-bouton { display: block;  text-decoration: none; }
.bloc-prix { display: flex; width: 100%;   max-width: 900px; 
    margin: 10px auto; /* Centrer le bloc si nécessaire */
    padding: 10px 10px;
    background-color: #080808;
    border: 2px solid #ffd700;
    box-sizing: border-box;}
.image-container { flex: 0 0 35%;}
.image-container img { width: 100%; height: auto;}
.texte-container {flex: 0 0 65%; }
.texte-container h2, .texte-container p { font-family: 'roboto', sans-serif; margin: 0; color: #ffd700; font-weight: 600; 
               text-align: center; margin-top: 13px;}
.bloc-prix:hover {border: 2px solid #fff;}
.bloc-prix-bouton:hover .texte-container h2, 
.bloc-prix-bouton:hover.texte-container p { color: #fff;}


@media only screen and (max-width: 380px) {
    h1 {font-size: 20px;}  
    .la-nisa {background-color: #101111; text-align: center; border: 4px solid rgb(255, 255, 255); padding: 5px 2px;
        margin: 100px 10px;}
    .boite { width: 350px; margin: 0 auto;}
    .mon-image { width: 160px; height: auto;  object-fit: cover;} 
    .nisa-couleur2 {color: #ffdc00; font-size: 40px; font-weight: 800;}

    .bloc1 p {text-align: center; margin: 0px 30px;}
    .bloc-categorie {text-align: center; margin-top: 50px; margin-left: 10%; margin-right: 10%;}
  }