body {
    margin: 0;
    font-family: Arial;
    background: #140c3a;
    color: #fff;
}

.hero {
    text-align: center;
    /* 0px en haut, 100px à droite, en bas et à gauche */
    padding: 20px 60px; 
    background: linear-gradient(#2c1f80, #140c3a);
}
.zone-texte {
    /* 1. Largeur de la zone à 80% de la page */
    width: 80%;            
    /* 2. Centre le bloc de 80% horizontalement sur la page */
    margin-left: auto;
    margin-right: auto;
    /* 3. Aligne le texte à gauche à l'intérieur du bloc */
    text-align: left;
    color: #ffffff; /* Optionnel : une couleur légèrement plus douce */
   }

.hero-subtitle {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 5px; /* Très faible espace avant le bouton */
    color: #ccc; /* Optionnel : une couleur légèrement plus douce */}

.logo {
    width: 100%;
    max-width: 800px;
    height: auto; /* garde le ratio */
    display: block; /* Évite les petits espaces sous l'image */
    margin: 0 auto; /* Centre le logo horizontalement */
}

.play-btn {
    text-align: center;
    /* 0px en haut, 100px à droite, en bas et à gauche */
    padding: 20px 60px; 
    background: #00c853;
    padding: 15px 30px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none; /* Enlève le soulignement du lien */
    display: inline-block; /* Permet au padding de s'appliquer correctement */
    margin-top: 20px;
}

.section {
    padding: 20px 60px;
    text-align: center;
}

.games {
    color : #ff16ec;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.card {
    background: #2b1f7a;
    padding: 20px;
    border-radius: 15px;
    color: #ffffff;
    color: inherit; /* Force le lien à utiliser le blanc de la classe .card */
    text-decoration: none; /* Enlève un éventuel soulignement sous le texte */    text-decoration: none; /* Optionnel : enlève le soulignement sur le titre du jeu */
}

.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

footer {
    text-align: center;
    padding: 30px;
    background: #0f082b;
}

/* Vos styles additionnels nettoyés */
.login-modal {
    margin: 0 !important;
    padding: 0 !important;
}

.header {
    margin: 0 !important;
    padding: 0 !important;
}

.login-holder {
    margin: 0 !important;
}