Mission

Mission : une barre de progression qui saute au lieu de glisser

Diagnostiquer pourquoi une custom property classique ne s'anime pas, et migrer un fragment Sass vers du nesting natif.

Contexte

Sur progression.css, une barre utilise background: conic-gradient(var(--couleur-primaire) var(--progression), #e5e5e5 0); avec transition: --progression 0.6s ease;, mais --progression est une simple custom property déclarée uniquement via :root { --progression: 0%; }, sans aucun @property. Résultat : au clic sur "Suivant", la barre saute instantanément de 0% à 40% au lieu de glisser progressivement. Par ailleurs, l'équipe veut migrer une règle Sass .carte { &:hover { border-color: blue; } & .titre { font-weight: 600; } } vers du CSS nesting natif.