/* ==========================================================================
   132 — Star Rating
   Notation 5 étoiles 100 % CSS (5 radios cachés + :has()) : au survol les
   étoiles se remplissent en vague dorée jusqu'au curseur (micro-stagger),
   au clic l'étoile choisie pop avec 5 étincelles et les précédentes
   ondulent brièvement. Label discret « 4 / 5 » piloté en CSS.
   ========================================================================== */

.star-rating {
  --sr-color: var(--star-rating-color, #fbbf24);
  --sr-size: 32px;

  margin: 0;
  padding: 0;
  border: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* legend, libellés radios : visually hidden (mais présents pour l'a11y) */
.star-rating__legend,
.star-rating__sr,
.star-rating__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Étoiles ---------------------------------------------------------------- */

.star-rating__stars {
  display: flex;
}

.star-rating__star {
  position: relative;
  display: block;
  width: var(--sr-size);
  height: var(--sr-size);
  padding: 3px; /* pas de gap : aucune zone morte entre les étoiles */
  box-sizing: content-box;
  cursor: pointer;
}

.star-rating__star--1 { --sr-i: 0; }
.star-rating__star--2 { --sr-i: 1; }
.star-rating__star--3 { --sr-i: 2; }
.star-rating__star--4 { --sr-i: 3; }
.star-rating__star--5 { --sr-i: 4; }

.star-rating__input:focus-visible + .star-rating__star {
  outline: 2px solid var(--ml-accent, #7c8cff);
  outline-offset: 2px;
  border-radius: 8px;
}

.star-rating__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.star-rating__star:hover .star-rating__svg {
  transform: translateY(-2px);
}

.star-rating__outline {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  /* dorée quand l'étoile est allumée (--sr-on bascule 0 → 1) */
  stroke: color-mix(
    in srgb,
    var(--sr-color) calc(var(--sr-on, 0) * 100%),
    color-mix(in srgb, var(--ml-muted, #8b91a3) 65%, transparent)
  );
  transition: stroke 0.25s ease var(--sr-delay, 0s);
}

.star-rating__fillpath {
  fill: var(--sr-color);
  opacity: var(--sr-on, 0);
  transform: scale(var(--sr-scale, 0.4));
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) var(--sr-delay, 0s),
    opacity 0.18s ease var(--sr-delay, 0s);
}

/* État « allumée » — préview au survol (vague jusqu'au curseur, prioritaire)
   ou note fixée (hors survol d'étoile). Le stagger vient de --sr-delay. */
.star-rating__stars:has(.star-rating__star--1:hover) .star-rating__star--1,
.star-rating__stars:has(.star-rating__star--2:hover) :is(.star-rating__star--1, .star-rating__star--2),
.star-rating__stars:has(.star-rating__star--3:hover) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3),
.star-rating__stars:has(.star-rating__star--4:hover) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3, .star-rating__star--4),
.star-rating__stars:has(.star-rating__star--5:hover) .star-rating__star,
.star-rating__stars:not(:has(.star-rating__star:hover)):has(.star-rating__input[value="1"]:checked) .star-rating__star--1,
.star-rating__stars:not(:has(.star-rating__star:hover)):has(.star-rating__input[value="2"]:checked) :is(.star-rating__star--1, .star-rating__star--2),
.star-rating__stars:not(:has(.star-rating__star:hover)):has(.star-rating__input[value="3"]:checked) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3),
.star-rating__stars:not(:has(.star-rating__star:hover)):has(.star-rating__input[value="4"]:checked) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3, .star-rating__star--4),
.star-rating__stars:not(:has(.star-rating__star:hover)):has(.star-rating__input[value="5"]:checked) .star-rating__star {
  --sr-on: 1;
  --sr-scale: 1;
  --sr-delay: calc(var(--sr-i, 0) * 45ms);
}

/* --- Clic : pop de l'étoile choisie + étincelles -------------------------------- */

.star-rating__input:checked + .star-rating__star .star-rating__svg {
  animation: star-rating-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes star-rating-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.8) rotate(-8deg); }
  60%  { transform: scale(1.3) rotate(4deg); }
  100% { transform: scale(1); }
}

.star-rating__sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--sr-color);
  opacity: 0;
  pointer-events: none;
}

/* étincelles paires : plus petites, or clair */
.star-rating__sparkle--2,
.star-rating__sparkle--4 {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: color-mix(in srgb, var(--sr-color) 45%, #fff7e6);
}

.star-rating__sparkle--1 { --sr-a: 0deg;   --sr-d: 24px; }
.star-rating__sparkle--2 { --sr-a: 72deg;  --sr-d: 19px; }
.star-rating__sparkle--3 { --sr-a: 144deg; --sr-d: 22px; }
.star-rating__sparkle--4 { --sr-a: 216deg; --sr-d: 19px; }
.star-rating__sparkle--5 { --sr-a: 288deg; --sr-d: 22px; }

.star-rating__input:checked + .star-rating__star .star-rating__sparkle {
  animation: star-rating-sparkle 0.55s cubic-bezier(0.16, 0.84, 0.32, 1) 0.1s;
}

@keyframes star-rating-sparkle {
  0%   { opacity: 0; transform: rotate(var(--sr-a, 0deg)) translateY(-5px) scale(0.4); }
  25%  { opacity: 1; }
  70%  { opacity: 1; transform: rotate(var(--sr-a, 0deg)) translateY(calc(var(--sr-d, 20px) * -0.85)) scale(1); }
  100% { opacity: 0; transform: rotate(var(--sr-a, 0deg)) translateY(calc(var(--sr-d, 20px) * -1)) scale(0.2); }
}

/* --- Clic : ondulation des étoiles précédentes ------------------------------------
   Un nom de keyframes PAR valeur : changer de note change le nom d'animation,
   donc l'ondulation se rejoue à chaque nouvelle sélection. Corps identiques. */

.star-rating__stars:has(.star-rating__input[value="2"]:checked) .star-rating__star--1 .star-rating__svg {
  animation: star-rating-ripple-2 0.5s ease-in-out calc(var(--sr-i, 0) * 55ms);
}

.star-rating__stars:has(.star-rating__input[value="3"]:checked) :is(.star-rating__star--1, .star-rating__star--2) .star-rating__svg {
  animation: star-rating-ripple-3 0.5s ease-in-out calc(var(--sr-i, 0) * 55ms);
}

.star-rating__stars:has(.star-rating__input[value="4"]:checked) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3) .star-rating__svg {
  animation: star-rating-ripple-4 0.5s ease-in-out calc(var(--sr-i, 0) * 55ms);
}

.star-rating__stars:has(.star-rating__input[value="5"]:checked) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3, .star-rating__star--4) .star-rating__svg {
  animation: star-rating-ripple-5 0.5s ease-in-out calc(var(--sr-i, 0) * 55ms);
}

@keyframes star-rating-ripple-2 {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-3px) scale(1.1); }
}

@keyframes star-rating-ripple-3 {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-3px) scale(1.1); }
}

@keyframes star-rating-ripple-4 {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-3px) scale(1.1); }
}

@keyframes star-rating-ripple-5 {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-3px) scale(1.1); }
}

/* --- Note « 4 / 5 » ------------------------------------------------------------- */

.star-rating__result {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--ml-muted, #8b91a3);
}

.star-rating__nums {
  display: grid;
  overflow: hidden;
  min-width: 1.4ch;
  height: 1.3em;
  line-height: 1.3;
  text-align: center;
}

.star-rating__num {
  grid-area: 1 / 1;
  font-weight: 600;
  color: var(--ml-fg, #e8eaf2);
  opacity: 0;
  transform: translateY(70%);
  transition:
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
}

.star-rating__num--0 {
  color: var(--ml-muted, #8b91a3);
  font-weight: 400;
}

.star-rating:not(:has(.star-rating__input:checked)) .star-rating__num--0,
.star-rating:has(.star-rating__input[value="1"]:checked) .star-rating__num--1,
.star-rating:has(.star-rating__input[value="2"]:checked) .star-rating__num--2,
.star-rating:has(.star-rating__input[value="3"]:checked) .star-rating__num--3,
.star-rating:has(.star-rating__input[value="4"]:checked) .star-rating__num--4,
.star-rating:has(.star-rating__input[value="5"]:checked) .star-rating__num--5 {
  opacity: 1;
  transform: translateY(0);
}

/* --- Wrapper de démo (galerie) ----------------------------------------------------- */

.star-rating-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.star-rating-demo__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ml-muted, #8b91a3);
}

/* --- Reduced motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .star-rating__input:checked + .star-rating__star .star-rating__svg,
  .star-rating__input:checked + .star-rating__star .star-rating__sparkle,
  .star-rating__stars:has(.star-rating__input[value="2"]:checked) .star-rating__star--1 .star-rating__svg,
  .star-rating__stars:has(.star-rating__input[value="3"]:checked) :is(.star-rating__star--1, .star-rating__star--2) .star-rating__svg,
  .star-rating__stars:has(.star-rating__input[value="4"]:checked) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3) .star-rating__svg,
  .star-rating__stars:has(.star-rating__input[value="5"]:checked) :is(.star-rating__star--1, .star-rating__star--2, .star-rating__star--3, .star-rating__star--4) .star-rating__svg {
    animation: none;
  }

  .star-rating__svg,
  .star-rating__outline,
  .star-rating__fillpath,
  .star-rating__num {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }

  .star-rating__star:hover .star-rating__svg {
    transform: none;
  }
}