/**
 * Star Rating System - Version Simple & Clean
 * Système d'étoiles de notation ultra-simple
 * Date: 05 Octobre 2025
 * 
 * Fonctionne avec une structure HTML basique :
 * - Inputs radio de 1 à 5
 * - Labels avec étoiles Unicode ★
 * - Pas de dépendance à Dashicons
 */

/* ========================================
   CONTAINER DES ÉTOILES
   ======================================== */

.star-rating-simple {
    display: flex;
    flex-direction: row; /* Ordre normal : 1→5 de gauche à droite */
    gap: 8px;
    margin: 15px 0;
    align-items: center;
}

/* ========================================
   INPUTS (cachés)
   ======================================== */

.star-rating-simple input[type="radio"] {
    display: none;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

/* ========================================
   LABELS (étoiles cliquables)
   ======================================== */

.star-rating-simple label {
    cursor: pointer;
    transition: transform 0.2s ease;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline-block;
}

.star-rating-simple label:hover {
    transform: scale(1.15);
}

/* ========================================
   ÉTOILES (caractère Unicode ★)
   ======================================== */

.star-rating-simple .star {
    font-size: 36px;
    color: #d2d2d7; /* Gris clair par défaut */
    transition: color 0.2s ease;
    display: inline-block;
    line-height: 1;
}

/* ========================================
   LOGIQUE D'ALLUMAGE DES ÉTOILES
   ======================================== */

/* Méthode simple : cibler chaque input et ses labels correspondants */

/* 1 étoile cochée = 1ère étoile allumée */
.star-rating-simple input[value="1"]:checked ~ label[for="rating-1"] .star {
    color: #D4AF37;
}

/* 2 étoiles cochées = 1ère + 2ème allumées */
.star-rating-simple input[value="2"]:checked ~ label[for="rating-1"] .star,
.star-rating-simple input[value="2"]:checked ~ label[for="rating-2"] .star {
    color: #D4AF37;
}

/* 3 étoiles cochées = 1ère + 2ème + 3ème allumées */
.star-rating-simple input[value="3"]:checked ~ label[for="rating-1"] .star,
.star-rating-simple input[value="3"]:checked ~ label[for="rating-2"] .star,
.star-rating-simple input[value="3"]:checked ~ label[for="rating-3"] .star {
    color: #D4AF37;
}

/* 4 étoiles cochées = 1ère + 2ème + 3ème + 4ème allumées */
.star-rating-simple input[value="4"]:checked ~ label[for="rating-1"] .star,
.star-rating-simple input[value="4"]:checked ~ label[for="rating-2"] .star,
.star-rating-simple input[value="4"]:checked ~ label[for="rating-3"] .star,
.star-rating-simple input[value="4"]:checked ~ label[for="rating-4"] .star {
    color: #D4AF37;
}

/* 5 étoiles cochées = toutes allumées */
.star-rating-simple input[value="5"]:checked ~ label .star {
    color: #D4AF37;
}

/* ========================================
   HOVER (survol)
   ======================================== */

/* Au survol de l'étoile 1 */
.star-rating-simple label[for="rating-1"]:hover .star {
    color: #D4AF37;
}

/* Au survol de l'étoile 2 = allumer 1 + 2 */
.star-rating-simple label[for="rating-2"]:hover ~ label[for="rating-1"] .star,
.star-rating-simple label[for="rating-2"]:hover .star {
    color: #D4AF37;
}

/* Au survol de l'étoile 3 = allumer 1 + 2 + 3 */
.star-rating-simple label[for="rating-3"]:hover ~ label[for="rating-1"] .star,
.star-rating-simple label[for="rating-3"]:hover ~ label[for="rating-2"] .star,
.star-rating-simple label[for="rating-3"]:hover .star {
    color: #D4AF37;
}

/* Au survol de l'étoile 4 = allumer 1 + 2 + 3 + 4 */
.star-rating-simple label[for="rating-4"]:hover ~ label[for="rating-1"] .star,
.star-rating-simple label[for="rating-4"]:hover ~ label[for="rating-2"] .star,
.star-rating-simple label[for="rating-4"]:hover ~ label[for="rating-3"] .star,
.star-rating-simple label[for="rating-4"]:hover .star {
    color: #D4AF37;
}

/* Au survol de l'étoile 5 = allumer toutes */
.star-rating-simple label[for="rating-5"]:hover ~ label .star,
.star-rating-simple label[for="rating-5"]:hover .star {
    color: #D4AF37;
}

/* ========================================
   TEXTE DE NOTATION
   ======================================== */

.rating-text {
    font-size: 14px;
    color: #86868b;
    margin-top: 8px;
    min-height: 20px;
    font-weight: 500;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .star-rating-simple .star {
        font-size: 32px;
    }
    
    .star-rating-simple {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .star-rating-simple .star {
        font-size: 28px;
    }
    
    .star-rating-simple {
        gap: 4px;
    }
}