/* Conteneur global */
.ring-9 {
  --size: 100px;       /* diamètre */
  --thickness: 12px;   /* épaisseur de l’anneau */
  --base: rgb(155, 156, 156);     /* couleur segments inactifs (gris) */
  --active: #85e0a6ff;   /* couleur segments actifs (vert) */

  /* état d’activation de chaque segment */
  --s1: 0deg; --s2: 0deg; --s3: 0deg;
  --s4: 0deg; --s5: 0deg; --s6: 0deg;
  --s7: 0deg; --s8: 0deg; --s9: 0deg;

  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* L'anneau avec 9 segments */
.ring-9::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(             var(--active) 0 var(--s1), transparent 0 40deg),
    conic-gradient(from 40deg,  var(--active) 0 var(--s2), transparent 0 40deg),
    conic-gradient(from 80deg,  var(--active) 0 var(--s3), transparent 0 40deg),
    conic-gradient(from 120deg, var(--active) 0 var(--s4), transparent 0 40deg),
    conic-gradient(from 160deg, var(--active) 0 var(--s5), transparent 0 40deg),
    conic-gradient(from 200deg, var(--active) 0 var(--s6), transparent 0 40deg),
    conic-gradient(from 240deg, var(--active) 0 var(--s7), transparent 0 40deg),
    conic-gradient(from 280deg, var(--active) 0 var(--s8), transparent 0 40deg),
    conic-gradient(from 320deg, var(--active) 0 var(--s9), transparent 0 40deg),

    /* fond gris pour segments inactifs */
    conic-gradient(             var(--base) 0 40deg),
    conic-gradient(from 40deg,  var(--base) 0 40deg),
    conic-gradient(from 80deg,  var(--base) 0 40deg),
    conic-gradient(from 120deg, var(--base) 0 40deg),
    conic-gradient(from 160deg, var(--base) 0 40deg),
    conic-gradient(from 200deg, var(--base) 0 40deg),
    conic-gradient(from 240deg, var(--base) 0 40deg),
    conic-gradient(from 280deg, var(--base) 0 40deg),
    conic-gradient(from 320deg, var(--base) 0 40deg);

  -webkit-mask: radial-gradient(closest-side,
                transparent calc(100% - var(--thickness)),
                #000        calc(100% - var(--thickness)));
          mask: radial-gradient(closest-side,
                transparent calc(100% - var(--thickness)),
                #000        calc(100% - var(--thickness)));
}

/* Icône centrée */
.ring-9 > i {
  font-size: calc(var(--size) * 0.35);
  color: #111;
  z-index: 1;
}

/* Activation des segments */
.ring-9.on-1 { --s1: 40deg; }
.ring-9.on-2 { --s2: 40deg; }
.ring-9.on-3 { --s3: 40deg; }
.ring-9.on-4 { --s4: 40deg; }
.ring-9.on-5 { --s5: 40deg; }
.ring-9.on-6 { --s6: 40deg; }
.ring-9.on-7 { --s7: 40deg; }
.ring-9.on-8 { --s8: 40deg; }
.ring-9.on-9 { --s9: 40deg; }