/* ratings.css — Étoiles des recettes (catalogue et page d'une recette).
   L'étoile est une vraie image (SVG intégré) : coins arrondis, dégradé doré, légère ombre.
   Le remplissage partiel (4,5 sur 5 = quatre étoiles et demie) se fait en découpant l'étoile dorée avec --f. */

:root {
    --star-on:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fde047'/%3E%3Cstop offset='0.55' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2.7l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 2.9 1.1-6.3L2.9 9.3l6.3-.9z' fill='url(%23g)' stroke='%23f59e0b' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --star-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 2.9 1.1-6.3L2.9 9.3l6.3-.9z' fill='%23e5e7eb' stroke='%23d1d5db' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Catalogue : petite note sur les cartes (étoile dorée + moyenne + nombre de notes) */
.card-rating { color: #b45309; font-weight: 700; white-space: nowrap; }
.card-rating::before {
    content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px;
    background: var(--star-on) center / contain no-repeat;
}
.card-rating small { color: var(--text-muted, #6b7280); font-weight: 600; }

/* Page d'une recette : une ligne discrète (cinq étoiles, la moyenne, ta note) */
.rating-line { display: flex; align-items: center; justify-content: center; gap: 4px 10px; flex-wrap: wrap; margin: 4px 0 6px 0; font-size: 0.9rem; }

/* Cinq étoiles de 44 px à toucher ; ordre inversé dans le HTML pour que le survol allume aussi les précédentes */
.rating-stars { display: inline-flex; flex-direction: row-reverse; }
.rating-stars .rs {
    position: relative; width: 44px; height: 44px; padding: 0; margin: 0; border: none; background-color: transparent;
    background-image: var(--star-off); background-repeat: no-repeat; background-position: center; background-size: 32px 32px;
    font-size: 0; color: transparent;   /* le « ★ » du HTML sert seulement aux lecteurs d'écran */
    cursor: default; -webkit-tap-highlight-color: transparent;
}
/* Étoile dorée par-dessus, découpée à --f (part de la moyenne qui tombe sur cette étoile : 0 à 100 %) */
.rating-stars .rs::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--star-on) center / 32px 32px no-repeat;
    clip-path: inset(0 calc(100% - var(--f, 0%)) 0 0);
    filter: drop-shadow(0 1px 1.5px rgba(180, 83, 9, 0.35));
    transition: transform 0.15s ease;
}
.rating-stars.can .rs { cursor: pointer; }
/* Survol : la note visée s'allume en entier, avec un petit grossissement sur l'étoile touchée */
.rating-stars.can .rs:hover::after, .rating-stars.can .rs:hover ~ .rs::after { clip-path: inset(0); }
.rating-stars.can .rs:hover::after { transform: scale(1.14); }
.rating-stars .rs:disabled { opacity: 1; }
.rating-stars .rs:focus-visible { outline: 2px solid #f59e0b; border-radius: 10px; }

.rating-text { font-weight: 700; color: #92400e; }
.rating-text.rating-none { color: #9ca3af; font-weight: 600; }
.rating-mine { color: #6b7280; }
.rating-mine b { color: #92400e; }
.rating-clear { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 0.9rem; padding: 12px 8px; line-height: 1; }
.rating-clear:hover { color: #b91c1c; }
.rating-note { color: #9ca3af; font-size: 0.78rem; }
.rating-err { color: #b91c1c; font-size: 0.85rem; }
.rating-err:empty { display: none; }

/* Catalogue : sélection du tri */
.sort-label { font-weight: bold; font-size: 0.85rem; color: var(--text-muted, #6b7280); margin-left: 8px; }