/* ===== BODY - PAGE JOUEURS =====*/
body { 
    padding-top: 70px;              
    background-color: #0f1729;     
    color: #fff;                    
}

/* ===== HEADER - TITRE DE LA PAGE =====*/
.players-header { 
    background-color: #002d6f;
    padding: 2.5rem 1rem;           
    text-align: center;             
    color: white;                  
}

.players-header h1 { 
    font-size: 2rem;                
    margin-bottom: .4rem;           
    font-weight: 900;               /* Texte gras */
}

.players-header p { 
    color: #ccc;                    
}

/* ===== SECTION JOUEURS =====*/
.players-section { 
    padding-top: 2rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
}

.players-section h2 { 
    text-align: center;             
    color: white;                   
    margin-bottom: 1.2rem;         
    font-size: 1.8rem;              
}

/* ===== GRILLE DES CARTES JOUEURS =====*/
.players-grid {
    display: grid;                  /* Active le système de grille */
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    gap: 1.5rem;                    
    max-width: 1200px;              /* Sans ça les cartes s'agrandissent */
    margin: 0 auto;                 /* Centre les cartes */
}

/* ===== CARTE JOUEUR =====*/
.player-card {
    height: 340px;                  /* Sans ça les cartes disparraisent */
    position: relative;             
    cursor: pointer;                /* Change le curseur en pointeur */
}

/* ===== PHOTO DU JOUEUR =====*/
.player-photo { 
    position: absolute;             /* Sans ça les images disparraissent */
    inset: 0;                       /* Sans ça les images disparraissent */
    background-size: cover;         
    background-position: center;    /* Centre l'image */
}

/* ===== INFO JOUEUR - NOM EN BAS =====*/
.player-info {
    position: absolute;             /* Positionnée sur la carte */
    bottom: 0;                      /* En bas de la carte */
    left: 0;                        
    right: 0;                       
    background: rgba(0, 0, 0, 0.7);/* Fond noir semi-transparent */
    padding: 1rem;                  /* Espace intérieur */
    text-align: center;             /* Texte centré */
    color: #fff;                   
    z-index: 2;                     /* Au-dessus de la photo */
}

/* ===== STATS - COUCHE JAUNE AU SURVOL =====*/
.player-stats {
    position: absolute;             /* Couche au-dessus */
    inset: 0;                       /* Remplit toute la carte */
    display: flex;                  /* Aligne les stats verticalement */
    flex-direction: column;         /* Stats empilées */
    align-items: center;            /* Centré horizontalement */
    justify-content: center;        /* Centré verticalement */
    background: #FFC52F;            
    color: #004494;               
    padding: 1.5rem;               
    opacity: 0;                     /* Invisible par défaut */
    transition: opacity 0.3s ease;  /* Animation*/
    text-align: center;             /* Texte centré */
    z-index: 3;                     /* Au-dessus de tout */
}

/* Quand on survole la carte, les stats apparaissent */
.player-card:hover .player-stats { 
    opacity: 1;                     /* Devient visible */
}

/* ===== TITRE "STATISTIQUES" =====
   Entête de la zone stats */
.player-stats h4 {
    font-weight: 900;               /* Texte gras */
    margin-bottom: 1rem;            
    font-size: 1.1rem;              
}

/* ===== LISTE DES STATS =====
   Affiche les statistiques du joueur */
.player-stats ul {
    list-style: none;               /* Supprime les points */
    font-weight: 600;              
    font-size: 0.95rem;            
}

.player-stats li {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

/* ===== MEDIAQUERIES - TABLETTE =====*/
@media (max-width: 1024px) {
    .players-grid { 
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes */
    }
    .player-card { 
        height: 300px;              
    }
}

/* ===== MEDIAQUERIES - PETITE ECRANS =====
   À partir de 768px, ajustements des textes */
@media (max-width: 768px) {
    .players-header h1 {
        font-size: 1.6rem;          
    }
    .players-header p {
        font-size: 0.95rem;         
    }
}

/* ===== MEDIAQUERIES - MOBILE =====
   À partir de 480px, une seule colonne */
@media (max-width: 480px) {
    .players-grid { 
        grid-template-columns: 1fr;  /* 1 seule colonne */
    }
    .player-card { 
        height: 260px;             
    }
    .player-stats h4 {
        font-size: 0.95rem;        
    }
    .player-stats ul {
        font-size: 0.85rem;         
    }
}