:root {
  --dimensions-radio-bouton: var(--taille-radio-bouton, 14px);

  --couleur-fond-radio-bouton: var(--couleur-blanc);
  --couleur-radio-bouton: var(--couleur-principale-4);
  --couleur-border-radio-bouton: var(--couleur-principale-4);
}

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  outline: none;
  width: var(--dimensions-radio-bouton);
  height: var(--dimensions-radio-bouton);
  margin: var(--margin-input-radio-bouton, 0 3px);
  background-color: var(--couleur-fond-radio-bouton);
  border: 1px solid var(--couleur-border-radio-bouton);
  border-radius: 500px;
}

input[type="radio"]::after {
  --taille-interieur-radio-bouton: calc(14px - 6px);

  content: '';
  display: inline-block;
  width: var(--taille-interieur-radio-bouton);
  height: var(--taille-interieur-radio-bouton);
  background-color: var(--couleur-radio-bouton);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  visibility: hidden;
  border-radius: 500px;
}

input[type="radio"]:checked::after {
  visibility: visible;
}

input[type="radio"]:is(:hover, :focus):not([readonly], [disabled]) {
  --couleur-fond-radio-bouton: var(--couleur-principale-1);
}

input[type="radio"]:is([readonly], [disabled]) {
  --couleur-fond-radio-bouton: var(--couleur-secondaire-4);
  --couleur-radio-bouton: var(--couleur-secondaire-7);
  --couleur-border-radio-bouton: var(--couleur-secondaire-4);
}