.sujets { font-family: sans-serif; padding: 20px; }
#ep-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border: 1px solid #eee; text-align: left; }
th { background-color: #f8f9fa; }
tr:nth-child(even) { background-color: #fafafa; }
.cell-numero { text-align: center; font-weight: bold; width: 40px; }
.cell-icon { text-align: center; width: 50px; font-size: 1.2em;}

.tag-badge { 
    background: #007bff; color: white; padding: 2px 8px; 
    border-radius: 12px; font-size: 0.75em; margin-right: 4px;
    white-space: nowrap; display: inline-block; margin-bottom: 2px;
}

.filter-container { background: #f8f9fa; padding: 15px; border-radius: 8px; }
#tag-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-checkbox-label {
    cursor: pointer; background: white; padding: 4px 10px; 
    border: 1px solid #ccc; border-radius: 20px; font-size: 0.9em;
    transition: all 0.2s;
}
.tag-checkbox-label:has(input:checked) {
    background: #007bff !important; color: white; border-color: #0056b3 !important;
}

/* --- CSS SPÉCIFIQUE SYSTÈME DE VOTE --- */
.cell-rating { text-align: center; width: 120px; }
.stars { color: #ffc107; /* Couleur jaune or */ font-size: 1.2em; display: inline-block; }
.star { cursor: default; position: relative; display: inline-block;} /* Par défaut, pas de curseur main */
.vote-count { color: #6c757d; display: block; font-size: 0.8em; }
.star.my-vote::after {
    content: "•";
    position: absolute;
    bottom: 0.9em;
    left: 0.5em;;
    color: #000; /* Vert pour bien distinguer de l'or de la moyenne */
    font-size: 0.6em;
    line-height: 0;
}
/* Styles pour quand l'utilisateur est connecté et PEUT voter */
.stars.can-vote .star { cursor: pointer; }

/* Gestion du survol (Hover) : logique CSS */
/* Quand on survole le bloc .stars, on vide d'abord toutes les étoiles */
/* Puis on remplit l'étoile survolée ET toutes celles qui la précèdent */

/* Correction du bug du sélecteur tilde (~) qui fonctionne de droite à gauche. 
    Il faut en fait forcer l'entité HTML */

/* Version plus simple et fiable du hover CSS pour les entités brutes */
.stars.can-vote:hover .star { color: #ccc; } /* Toutes grises au survol du bloc */
.stars.can-vote .star:hover ~ .star { color: #ccc; } /* Celles APRES la survolée restent grises */
.stars.can-vote .star:hover,
.stars.can-vote tr:hover .star:not(:hover ~ .star) { /* Difficile à faire uniquement en CSS sans changer le HTML */ }