* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif !important;

    /*outline: 1px solid red;
    outline-offset: -1px;*/
}

:root {
    --bg-color: radial-gradient(circle at 1800px 1100px, rgba(239, 97, 87, 0.9) 0%, #000025 50%);
    --second-bg-color: #112e42;
    --text-color: #F2F2FF;
    --main-color: #00abf0;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}


body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif !important;
    font-size:1.7em;
}


/*
//////////////////////////////////////////////////////////////////////////////////////////////
// ADMIN 
*/

.admin-container {
    width: 80%;
    margin: 0 auto;
    padding-right: 10%;
    padding-left:10%;
    padding-bottom:20px;
    border: 1px solid #2dabff;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    }

.admin-membre{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    width: 100%;
}

.admin-produits{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px; 
    width: 100%;
}

th{
    background-color: #000025;
    color: #F2F2FF;
}

td { 
color : #F2F2FF;
}


th,td { 
padding:0.7em;
font-size:12px;
}

select {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #F2F2FF;
border-radius: 5px;
margin-bottom: 15px;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
// MEMBRE 
*/

#fullpage-section{
    margin : 150px auto;
    width:80%;
}


.zonemembre-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes de tailles égales */
    gap: 20px;
    background-color: transparent;
    margin-bottom: 20px;
}
        
.vignette {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Permet de séparer le contenu */
    height: 320px; /* Fixer une hauteur pour uniformiser les vignettes */
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1); /* Fond léger pour les vignettes */
    padding: 10px;
}

.vignette img {
    border-radius: 10px;
    width: 100%;
    height: auto;
    max-height: 160px; /* Limite pour l'image */
    object-fit: cover; /* Pour couper les images correctement */
}

.vignette-bottom-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}


.vignette-sous-top {
    display: flex;
    flex-direction: column; /* Organiser les éléments en colonnes */
    gap: 5px; /* Espacement entre les lignes */
}

.vignette-date {
    text-align: left; /* Aligner à gauche */
}

.vignette-categories {
    display: flex;
    flex-wrap: wrap; /* Permet aux bulles de passer à la ligne si nécessaire */
    gap: 5px; /* Espacement entre les bulles */
}


.vignette h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #F2F2FF;
    line-height: 1.2;
}


        .category, .language {
            margin-top: 5px;
            border-radius: 10px;
            padding: 5px;
            font-size: 12px;
            background-color: rgba(127, 114, 226, 0.9);
            color: #F2F2FF;
        }

        .TEMPS {
            background-color: rgba(81, 69, 177, 0);
        }

        .GENERAL {
            background-color: rgba(34, 177, 76, 0.9);
        }
        
        .NUKE {
            background-color: rgba(255, 201, 14, 0.9);
        }
        
        .BLENDER {
            background-color: rgba(255, 127, 39, 0.9);
        }
        
        .RESOLVE {
            background-color: rgba(3, 119, 156, 0.9);
        }
        
                .REAL {
            background-color: rgba(82, 0, 156, 0.9);
        }

        .FR {
            background-color: rgba(63, 72, 204, 0.9);
        }
        
        .ENG {
            background-color: rgba(237, 66, 105, 0.9);
        }

        .pagination {
            text-align: center;
            margin-top: 20px;
        }
        
        .pagination a {
            margin: 5px 0;
            text-decoration: none;
            color: #fff;
            background: #5a5aa6;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
        }
        
        .pagination a.active {
            background: #272768;
            font-weight: bold;
        }
        
        .pagination a:hover {
            background: #7a7abc;
        }
        
        .btnadmin {
            margin-left: auto;
            margin-right: auto;
            margin-bottom:20px;
            display:block;
            width:100px;
            line-height:30px;
            text-align:center;
            background-color:rgba(81, 69, 177, 0.95);
            color:#F2F2FF;
            text-decoration:none;
            border: 2px solid #5a5aa6; 
            border-radius: 10px;
        }

        .btnadmin:hover {
            color: rgba(81, 69, 177, 0.95);
            background-color: transparent;
        }
        
        select {
            background-color: #272768; 
            color: #F2F2FF; 
            border: 2px solid #5a5aa6; 
            border-radius: 5px; 
            padding: 5px 10px; 
            font-size: 14px; 
            outline: none; 
            cursor: pointer;
        }
        
       
         select:hover {
            background-color: #5a5aa6; 
            border-color: #7a7abc; 
        }
        
        /* Style des options à l'intérieur */
        select option {
            background-color: #272768; /* Couleur de fond des options */
            color: #F2F2FF; /* Couleur du texte des options */
        }
        
        
        select option:checked {
            background-color: #5a5aa6; /* Couleur de fond de l'option sélectionnée */
            color: #ffffff; /* Couleur du texte de l'option sélectionnée */
        }


        .background {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1; /* ✅ derrière tout */
          overflow: hidden;
        }
        
        .background img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* ✅ couvre tout l'écran */
          object-position: center; /* ✅ centré */
        }


        /* Responsive Design */
        @media screen and (max-width: 992px) {
            .zonemembre-container {
                grid-template-columns: repeat(3, 1fr);
            }
            
            #fullpage-section{
                margin : 150px auto;
                width:100%;
            }

        }

        @media screen and (max-width: 768px) {
            .zonemembre-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media screen and (max-width: 576px) {
            .zonemembre-container {
                grid-template-columns: 1fr;
            }
        }