.rating {
    display: inline-flex;
    align-items: center;
  }
  
  .star {
    
    width: 20px;
    height: 20px;
    margin-right: 2px;
    background-color: #ccc; /* Couleur des étoiles vides */
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>') no-repeat;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>') no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
  }
  
  .star.full {
    background-color: #ffcc00; /* Couleur des étoiles remplies */
  }
  
  .star.half {
    background: linear-gradient(to right, #ffcc00 50%, #ccc 50%);
  }