/* ==========================================================
   NOTATION ÉTOILES
   .mpr-star-input : saisie sans JS. Les <input radio> sont
   masqués ; l'ordre DOM des étoiles est inversé (5 → 1) et le
   conteneur est en row-reverse, ce qui permet de remplir « cette
   étoile et toutes celles à sa gauche » avec un simple
   input:checked ~ label / label:hover ~ label. Un radio
   « Non noté » (value 0), hors de ce conteneur, sert de remise à
   zéro — il fait partie du même name donc cocher une étoile le
   décoche tout seul.
   .mpr-stars : rendu lecture seule (catalogue, listes, <option>).
========================================================== */

.mpr-star-field{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:4px;
}

.mpr-star-none{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
    cursor:pointer;
    white-space:nowrap;
}

.mpr-star-input{
    display:inline-flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
}

.mpr-star-input input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.mpr-star-input label{
    padding:0 2px;
    font-size:26px;
    line-height:1;
    color:var(--mpr-border);
    cursor:pointer;
    transition:color .12s ease;
}

.mpr-star-input input:checked ~ label{
    color:#f5a623;
}

/* Survol : on éteint d'abord le remplissage lié au :checked (sinon
   impossible de prévisualiser une note PLUS BASSE que celle déjà
   sélectionnée), puis on rallume l'étoile survolée et toutes celles à
   sa gauche. Le sélecteur de rallumage est volontairement plus
   spécifique (`.mpr-star-field .mpr-star-input:hover ...`) que celui
   d'extinction, pour que l'étoile réellement survolée reste allumée. */
.mpr-star-input:hover input:checked ~ label{
    color:var(--mpr-border);
}

.mpr-star-field .mpr-star-input:hover label:hover,
.mpr-star-field .mpr-star-input:hover label:hover ~ label{
    color:#f5a623;
}

.mpr-star-input input:focus-visible + label{
    outline:2px solid var(--mpr-primary);
    outline-offset:1px;
    border-radius:3px;
}

/* ---- Affichage lecture seule ---- */

.mpr-stars{
    display:inline-flex;
    margin-left:8px;
    font-size:13px;
    line-height:1;
    letter-spacing:1px;
    color:#f5a623;
    vertical-align:middle;
    white-space:nowrap;
}

.mpr-stars .mpr-star-off{
    color:var(--mpr-border);
}