/**
 * COMPOSANT : Barre de notation
 * Fichier : /assets/css/components/rating.css
 * 
 * Composant réutilisable pour afficher une note avec barre
 * 
 * Usage :
 * - Cartes de critiques
 * - Pages de détail
 * - Profils d'œuvres
 */

/* ========================================
   RATING WRAPPER
   ======================================== */

.rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ========================================
   BARRE DE PROGRESSION
   ======================================== */

.rating-barre {
    position: relative;
    width: 100px;
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.rating-barre-remplissage {
    height: 100%;
    background: linear-gradient(90deg, #4A8BC2 0%, #667eea 100%);
    transition: width 0.3s ease;
    border-radius: 6px;
}

/* ========================================
   SCORE NUMÉRIQUE
   ======================================== */

.rating-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4A8BC2;
    min-width: 35px;
    text-align: right;
}

/* ========================================
   VARIANTES DE TAILLE
   ======================================== */

/* Petite */
.rating--petit .rating-barre {
    width: 80px;
    height: 10px;
}

.rating--petit .rating-score {
    font-size: 0.95rem;
    min-width: 30px;
}

/* Grande */
.rating--grand .rating-barre {
    width: 150px;
    height: 16px;
}

.rating--grand .rating-score {
    font-size: 1.4rem;
    min-width: 45px;
}

/* ========================================
   VARIANTES DE COULEUR
   ======================================== */

/* Success (vert) */
.rating--success .rating-barre-remplissage {
    background: linear-gradient(90deg, #5cb85c 0%, #4caf50 100%);
}

.rating--success .rating-score {
    color: #5cb85c;
}

/* Warning (orange) */
.rating--warning .rating-barre-remplissage {
    background: linear-gradient(90deg, #f0ad4e 0%, #ff9800 100%);
}

.rating--warning .rating-score {
    color: #f0ad4e;
}

/* Danger (rouge) */
.rating--danger .rating-barre-remplissage {
    background: linear-gradient(90deg, #d9534f 0%, #f44336 100%);
}

.rating--danger .rating-score {
    color: #d9534f;
}

/* ========================================
   AVEC LABEL
   ======================================== */

.rating-avec-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rating-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

@media (max-width: 1024px) {
    .rating-barre {
        width: 80px;
    }
    
    .rating-score {
        font-size: 1rem;
    }
}