.C2etoiles{
  background: #B0B0B0;
  color: white;
  display: inline-block;
  cursor: pointer;
}
.C2etoiles:hover{
  /* background: #631227;*/
  background:#B0B0B0;
  color:#631227;;
}
.C2etoiles div{
  display: inline-block;
  padding: 5px;
}
.C2etoiles div::after{
  font-size: 30px;
  content:"\002605"; /* une étoile en Unicode */
}





/*
 * init sizes radios/checkboxes
 * ASTUCE : à l'exception des box-shadow et outline
 * toutes les dimensions sont en 'em' et non 'rem'
 * pour que les éléments héritent de la font-size du label.
 * De cette manière, tout reste proportionnel. Youpi !
 * ¯\_(ツ)_/¯
 */
 @media (max-width: 63.9375rem) {
  :root {
    --input-size: 2em;
  }
}
@media (min-width: 64rem) {
  :root {
    --input-size: 2.5em;
  }
}
/*
 Sélecteur pour capturer les inputs 'radio' et 'checkbox'
 [type*="o"]:not([type*="t"]):not([type*="w"])
 match 'o' des deux types en excluant les 'button'/'password'
 */
[type*="o"]:not([type*="t"]):not([type*="w"]) {
  position: absolute;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
[type*="o"]:not([type*="t"]):not([type*="w"]) + label {
  position: relative;
  display: inline-block;
}
@media (any-pointer: fine) {
  [type*="o"]:not([type*="t"]):not([type*="w"]) + label {
    cursor: pointer;
  }
}
[type="checkbox"] + label {
  padding-left: calc(var(--input-size) + 0.9375em);
}
[type="radio"] + label {
  padding-left: calc(var(--input-size) / 2 + 0.9375em);
}
[type*="o"]:not([type*="t"]):not([type*="w"]):checked + label {
  color: var(--link-color,#631227);
}
[type="checkbox"] + label:before {
  border-radius: var(--input-size);
  background-color: currentColor;
  box-shadow: 0 0 0 0.0625rem currentColor;
  content: "\A0";
  display: inline-block;
  font-family: sans-serif !important;
  height: calc(var(--input-size) / 2);
  left: 0.125em;
  position: absolute;
  top: 0.25em;
  width: var(--input-size);
}
[type="radio"] + label:before {
  border-radius: var(--input-size);
  box-shadow: 0 0 0 0.125rem currentColor;
  content: "\A0";
  display: inline-block;
  font-family: sans-serif !important;
  height: calc(var(--input-size) / 2);
  left: 0.125em;
  position: absolute;
  top: 0.1875em;
  width: calc(var(--input-size) / 2);
}
[type*="o"]:not([type*="t"]):not([type*="w"]) + label:after {
  height: calc(var(--input-size) / 2);
  width: calc(var(--input-size) / 2);
  content: "\A0";
  position: absolute;
  left: 0.125em;
  border-radius: var(--input-size);
  font-family: sans-serif !important;
}
[type="checkbox"] + label:after {
  --mask-image: url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
    <path d="m16,0C7.16,0,0,7.16,0,16s7.16,16,16,16,16-7.16,16-16S24.84,0,16,0Zm8.14,24.14c-.48.48-1.24.48-1.72,0l-6.42-6.43-6.42,6.42c-.48.48-1.24.47-1.72,0-.48-.47-.47-1.25,0-1.72l6.42-6.41-6.41-6.42c-.48-.48-.48-1.25,0-1.72.48-.48,1.24-.48,1.72,0l6.41,6.42,6.42-6.42c.48-.48,1.24-.47,1.72,0,.48.47.47,1.25,0,1.72l-6.42,6.41,6.42,6.42c.48.48.48,1.25,0,1.72Z"/>\
  </svg>');
  background-color: var(--background-color-page, white);
  top: 0.25em;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--mask-image);
  mask-size: contain;
  mask-image: var(--mask-image);
}
[type="radio"] + label:after {
  background-color: transparent;
  top: 0.1875em;
}
[type="radio"]:checked + label:after {
  background-color: currentColor;
  box-shadow: 0 0 0 0.1875rem var(--background-color-page, white) inset;
}
[type="checkbox"]:checked + label:after {
  left: calc(var(--input-size) / 2 + 0.125em) !important;
  --mask-image: url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\
    <path d="m16,0C7.16,0,0,7.16,0,16s7.16,16,16,16,16-7.16,16-16S24.84,0,16,0Zm10.67,10.4l-13.66,13.92c-.46.47-1.21.47-1.67,0l-6.01-6.12c-.44-.46-.44-1.18,0-1.64l1.06-1.09c.45-.47,1.2-.47,1.66,0l3.29,3.33c.45.47,1.2.47,1.66,0l10.93-11.14h0c.46-.46,1.21-.46,1.67,0l1.07,1.09c.44.45.44,1.18,0,1.63Z"/>\
  </svg>');
}
@media (prefers-reduced-motion: no-preference) {
  [type="radio"] + label:after {
    transition: background .2s ease-in-out;
  }
  [type="checkbox"] + label:after {
    transition: left .2s ease-in-out;
  }
}
[type*="o"]:not([type*="t"]):not([type*="w"]):focus {
  outline: none;
}
[type*="o"]:not([type*="t"]):not([type*="w"]):focus + label:before {
  outline-width: 0.125rem;
  outline-offset: 0.125rem;
  outline-style: var(--outline-style, solid);
}
[type*="o"]:not([type*="t"]):not([type*="w"]):focus:not(:focus-visible) + label:before {
  outline-color: var(--outline-color,#631227);
}
[type*="o"]:not([type*="t"]):not([type*="w"]):focus-visible + label:before {
  outline-color: var(--outline-color,#631227);
}
[type*="o"]:not([type*="t"]):not([type*="w"]):disabled + label {
  opacity: .6;
}
[type*="o"]:not([type*="t"]):not([type*="w"]):disabled + label:after {
  background-color: var(--lightgray, lightgrey);
}
/* Gestion des label en erreur si implémenté */
[type*="o"]:not([type*="t"]):not([type*="w"]).error + label {
  color: var(--error-color, orangered);
}