:root {
  --stars: #FAB703;
}

.stars-rater {
  width: 320px;
  margin: var(--spacing) auto;
  text-align: center;
  border: 2px solid var(--light);
  border-radius: var(--border-radius);
  padding: 1em;
}

.star {
  cursor: pointer;
  font-size: 36px;
  color: var(--medium);
}

.star.active {
  color: var(--stars);
}

.stars-rating,
.stars-rater > h2,
.vote-info {
  margin-bottom: 0;
}

.stars-rating:hover .star {
  color: var(--darkest) !important;
}

.stars-rating .star:hover ~ .star {
  color: var(--medium) !important;
}

.vote-info {
  font-size: 1rem;
  color: var(--dark);
}

.star-container {
  margin: 1em 0;
}

.star-position {
  display: inline-block;
}

.star-rating {
  display: flex;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  flex-direction: row-reverse !important;
  font-size: 1.5em;
  justify-content: space-around;
  padding: 0 .2em;
  width: 6em;
}

.star-rating input {
  display: none !important;
}

.star-not-rated,
.star-rating label {
  color: var(--medium);
  font-style: normal;
}

.star-rating label:hover {
  cursor: pointer;
}

.star-rating :checked~label,
.star-rated {
  color: var(--stars);
  font-style: normal;
}

.star-rating label:hover,
.star-rating label:hover~label {
  color: var(--primary);
}
/* ==================================================================
   Personnalisation VideoDL — notation
   Deux widgets distincts partagent cette feuille : le bloc d'affichage
   #rate-content.stars-rater, et le sélecteur du formulaire de commentaire
   (.star-container), qui n'est PAS imbriqué dans le premier. Toute règle
   doit donc viser les deux.
   ================================================================== */

/* Le doré du fournisseur (#FAB703) plafonne à 1,77:1 sur blanc et le vert
   de marque à 1,60:1 : ni l'un ni l'autre ne distingue l'état « noté » au
   seuil de 3:1 exigé pour un composant d'interface. On bascule sur le bleu
   de marque, qui est déjà la couleur d'action du site. */
:root {
	--stars: #2A2DE0;
	--etoile-vide: #8A8DA8;
}

/* --- Bloc d'affichage : la bordure crème cède la place à un filet vert --- */
#rate-content.stars-rater,
.stars-rater {
	border: 0;
	border-left: 4px solid var(--vert);
	border-radius: 0;
	background-color: var(--base);
	padding: 24px;
	width: 320px;
	margin: var(--spacing) auto;
}

.stars-rater > h2 {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 19px;
	line-height: 1.05;
	letter-spacing: -0.005em;
	margin: 0 0 12px;
	color: var(--contrast);
}

.stars-rater .vote-info {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	color: var(--contrast-2);
	margin: 12px 0 0;
	/* Surtout pas de flex ici : le paragraphe contient un <br> et des fragments
	   inline, que flex transformait en trois colonnes tassées et illisibles. */
	display: block;
	line-height: 1.55;
}

.stars-rater .vote-info::before {
	content: '';
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 auto 12px;
	background-color: var(--bordure-champ);
}

.stars-rater .vote-info a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stars-rater .vote-info sup {
	text-transform: none;
}

/* --- Sélecteur du formulaire de commentaire --- */
.star-container {
	margin: 1.4em 0;
}

/* --- Étoiles : état vide, état noté, survol — pour les deux widgets --- */
.star,
.star-not-rated,
.star-rating label {
	/* les étoiles vides identifient le contrôle : 3:1 minimum (WCAG 1.4.11) ;
	   --medium (#DCDDEA) ne donnait que 1,35:1 sur blanc. */
	color: var(--etoile-vide);
}

.star.active,
.star-rated,
.star-rating :checked ~ label {
	color: var(--stars);
}

.stars-rating:hover .star,
.star-rating label:hover,
.star-rating label:hover ~ label {
	color: var(--contrast) !important;
}

.stars-rating .star:hover ~ .star {
	color: var(--etoile-vide) !important;
}