/* Composant réutilisable : saisie d'une note de 1 à 5 par 5 boutons radio réels (js/components/star-rating-input.js).
   Navigation clavier = celle des radios (Tab entre dans le groupe, flèches changent la note). Cibles ≥ 44 px.
   Étoiles allumées jusqu'à la note cochée ou survolée (sélecteurs :has ; sans :has, seule l'étoile cochée s'allume). */
.sri { --sri-size: 48px; --sri-off: var(--color-border-field); --sri-on: var(--color-ember); border: 0; padding: 0; margin: 0; min-width: 0; }
.sri__legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); }
.sri__stars { display: inline-flex; gap: 4px; }
.sri__item { position: relative; width: var(--sri-size); height: var(--sri-size); }
.sri__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sri__label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 34px; line-height: 1; color: var(--sri-off); border-radius: var(--r-control); transition: color 120ms ease, transform 120ms ease; }
.sri__glyph { pointer-events: none; }

/* Allumées : l'étoile cochée et toutes celles qui la précèdent ; au survol, jusqu'à l'étoile survolée */
.sri__item:has(.sri__input:checked) .sri__label,
.sri__item:has(~ .sri__item .sri__input:checked) .sri__label,
.sri__item:hover .sri__label,
.sri__item:has(~ .sri__item:hover) .sri__label { color: var(--sri-on); }
.sri__item:hover .sri__label { transform: scale(1.08); }
.sri__input:focus-visible + .sri__label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.sri__status { min-height: 24px; margin-top: 6px; font-size: var(--fs-sm); color: var(--color-ink); }
.sri__status[data-empty] { color: var(--color-text-muted); }
/* Erreur : cadre autour des étoiles (les étoiles restent éteintes : une couleur d'erreur les ferait passer pour « cochées ») */
.sri[aria-invalid="true"] .sri__stars { outline: 1.5px solid var(--color-alert); outline-offset: 2px; border-radius: var(--r-control); }

@media (max-width: 374px) { .sri { --sri-size: 44px; } .sri__label { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .sri__label { transition: none; } .sri__item:hover .sri__label { transform: none; } }