.widget-etoiles {
  position: relative;
  width: 100%;
  max-width: 13rem;
  height: 1.75rem;
  margin: 0.75rem 0;
}

.couche-etoiles {
  position: absolute;
  inset: 0;
}

.couche-etoiles svg {
  width: 100%;
  height: 100%;
}

.etoile-vide { fill: #e2e2e2; stroke: none; }
.etoile-remplie { fill: #f5a623; stroke: none; } /* couleur de la moyenne */

.couche-remplissage {
  overflow: hidden;
  transition: clip-path 0.2s ease;
}

.trace-etoile-contour {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3px;
  cursor: default;
}

.trace-etoile-contour.votee {
  stroke: #2b8aef; /* couleur du vote personnel */
}

.trace-etoile-contour.cliquable {
  cursor: pointer;
  pointer-events: all;
}

/* Zone tactile confortable sur mobile : les étoiles sont espacées de 24
   unités sur un viewBox de 120, soit chacune environ 41 à 44px une fois le
   SVG mis à l'échelle sur une largeur de 13rem (~208px). */
@media (hover: hover) {
  .trace-etoile-contour.cliquable:hover {
    stroke: #90c2f7;
  }
}