body { font-family: Arial, sans-serif; }
.hero { 
    position: relative; 
    background: url('photo/hero_f1_3.png') no-repeat center center/cover; /* Image de fond visible */
    color: rgb(255, 255, 255); 
    padding: 50px 0; 
    text-align: center; 
    overflow: hidden;
}
/* Suppression de .hero::before pour enlever l'overlay violet et laisser l'image apparaître */
.hero .container { 
    position: relative; 
    z-index: 1; 
}
.section-box { 
    border: 2px solid #ddd; 
    padding: 20px; 
    margin: 20px 0; 
    border-radius: 10px; 
    text-align: center; 
    transition: all 0.3s ease; 
}
.section-box:hover { 
    transform: scale(1.01); 
    box-shadow: 0 4px 8px rgba(147, 37, 190, 0.432); 
}
.social-links { margin: 20px 0; }
.social-links a { margin: 0 15px; display: inline-block; transition: transform 0.3s; }
.social-links a:hover { transform: scale(1.1); }
.social-links svg { width: 40px; height: 40px; fill: #333; }
.news-item { margin-bottom: 20px; }
/* Suppression des anciens styles de .schedule (liste) pour la nouvelle grille */
.schedule-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
    justify-content: center; 
    margin-top: 20px; 
}
.schedule-card { 
    background: #f8f9fa; 
    border: 2px solid #924eb3; /* Bordure violette pour cohérence */
    border-radius: 10px; 
    padding: 15px; 
    width: 200px; 
    text-align: center; 
    transition: all 0.3s ease; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}
.schedule-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 4px 8px rgba(146, 78, 179, 0.5); 
}
.schedule-card.off { 
    opacity: 0.6; /* Pour les jours sans stream */
    background: #e9ecef; 
}
.day-icon { 
    font-size: 2rem; 
    margin-bottom: 10px; 
}
.schedule-card h3 { 
    margin: 10px 0; 
    color: #924eb3; 
}
.schedule-card .date { 
    font-weight: bold; 
    color: #555; 
}
.schedule-card .time { 
    color: #333; 
}
.gallery img { width: 100%; height: auto; margin-bottom: 10px; }
.gallery-button { 
    display: block; 
    margin: 20px auto; 
    padding: 10px 20px; 
    border: 2px solid #333; 
    border-radius: 5px; 
    text-decoration: none; 
    color: #333; 
    background: transparent; 
    transition: background 0.3s; 
    width: fit-content; /* Centré au milieu */
}
.gallery-button:hover { background: #333; color: white; }

.twitch-embed {
    width: 100%;
    max-width: 620px; /* Largeur max pour desktop */
    height: 378px; /* Hauteur fixe pour l'embed */
    margin: 0 auto; /* Centré */
    border: none; /* Pas de bordure */
}
@media (max-width: 768px) {
    .twitch-embed { height: 250px; } /* Ajustement mobile pour éviter le débordement */
}

/* Nouvelles règles pour changer la couleur du header et footer en violet */
.navbar.bg-dark {
    background-color: #924eb3 !important; /* Override Bootstrap pour le header */
}
footer.bg-dark {
    background-color: #924eb3 !important; /* Override Bootstrap pour le footer */
}