/* ====== RATING STARS (THEMES + A11Y) ====== */
.rating {
  /* variables ajustables si besoin */
  --star-size: 1.75rem;
  --star-gap: .25rem;
  --star-default: var(--grey);      /* grisé adapté au thème */
  --star-active:  var(--primary);   /* ORANGE du thème */
  --star-focus:   var(--primary-2); /* anneau focus cohérent */

  display: inline-flex;
  flex-direction: row-reverse;  /* on inverse visuellement 5→1 en 1→5 */
  gap: var(--star-gap);
  align-items: center;
  line-height: 1;
}

.rating-input {
  /* Visuellement caché mais accessible (mieux que display:none) */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  overflow: hidden;
  white-space: nowrap;
}

.rating-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.rating-label svg {
  width: var(--star-size);
  height: var(--star-size);
  fill: var(--star-default); 
  stroke: none;
  transition: transform .05s ease, fill .12s ease, filter .12s ease;
}

/* Hover : l’étoile sous la souris + toutes celles "à gauche" (grâce à row-reverse) */
.rating-label:hover svg,
.rating-label:hover ~ .rating-label svg {
  fill: var(--star-active);
}

/* Sélection : la radio cochée + toutes celles "à gauche" (grâce à row-reverse) */
.rating-input:checked ~ .rating-label svg {
  fill: var(--star-active);
}

/* Focus visible sur la radio associée → halo sur l’étoile */
.rating-input:focus-visible + .rating-label svg {
  filter: drop-shadow(
    0 0 0.25rem color-mix(in srgb, var(--star-focus) 60%, transparent)
  );
  stroke: var(--star-focus);
  stroke-width: 1.5;
}

/* Petit feedback tactile */
.rating-label:active svg { transform: scale(0.96); }

/* Réduction d’animation si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .rating-label svg { transition: none; }
  .rating-label:active svg { transform: none; }
}

/* ====== Mode contraste élevé ====== */
.high-contrast .rating-label svg {
  fill: #171717 !important;
  stroke: #fff !important;
  stroke-width: 2 !important;
}
.high-contrast .rating-input:checked ~ .rating-label svg,
.high-contrast .rating-label:hover svg,
.high-contrast .rating-label:hover ~ .rating-label svg {
  fill: #171717 !important;
}

/* ====== Thème sombre "nuit" ====== */
:root[data-theme="nuit"] .rating-label svg {
  fill: color-mix(in srgb, var(--text) 35%, transparent);
}