body {
    font-family: Arial, sans-serif;
    background-color: #0f0f1a; /* Deep charcoal */
    color: #e0e0e0; /* Light gray for text */
}

.navbar {
    background-color: #1a1a2e; /* Dark charcoal contrast */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Deeper shadow */
}

.gallery img {
    transition: transform 0.3s;
    border: 1px solid #2a2a2a; /* Very dark charcoal border */
}

.gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); /* More pronounced shadow on hover */
}

.btn-primary {
    background-color: #2a2a2a; /* Very dark charcoal button */
    border: none;
}

.btn-primary:hover {
    background-color: #444; /* Slightly lighter charcoal hover */
}

/* Style pour les titres de section */
h2.text-center {
    color: #ccc; /* Light charcoal title */
}

/* Styles pour la liste des champions */
#champions ul {
    list-style-type: none;
    padding-left: 0;
}

#champions .list-group-item {
    padding: 10px 15px;
    font-size: 1.1rem;
    background-color: #121212; /* Deep charcoal list item background */
    color: #e0e0e0;
    border-color: #1a1a2e; /* Dark charcoal border for list items */
}

#champions a {
    color: #ccc;
    text-decoration: none;
}

#champions a:hover {
    color: #ddd; /* Slightly lighter charcoal on hover */
}

/* Call to Action */
section.text-center.p-5.mt-5 {
    background-color: #1a1a2e; /* Dark charcoal contrast */
    color: #e0e0e0;
}

/* Styles spécifiques pour le magasin */
.product-img {
    transition: transform 0.3s ease;
    cursor: pointer;
    border: 1px solid #333; /* Dark charcoal border */
}

.product-img:hover {
    transform: scale(1.03);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); /* Subtle shadow on hover */
}

.product-card {
    transition: box-shadow 0.3s ease;
    background-color: #121212; /* Deep charcoal product card background */
    color: #e0e0e0;
    border: 1px solid #1a1a2e; /* Dark charcoal border */
}

.product-card:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow on hover */
}

.modal-img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 5px;
    border: 1px solid #2a2a2a; /* Very dark charcoal border */
}

.modal-content {
    background-color: #121212; /* Deep charcoal modal background */
    color: #e0e0e0;
}

.btn-close {
    filter: invert(1); /* Ensure close button is visible */
}

/* Style pour le texte au-dessus du logo */
.team-name {
    font-size: 3rem;
    color: #f0f0f0; /* Off-white team name */
    font-weight: bold;
    margin-bottom: 20px;
}

/* Agrandir le logo */
.logo {
    width: 250px;
    height: auto;
}