/* ============================================================
   Effets visuels Sextant : groupe « odometre » (effet n° 25)
   Les grands chiffres du tableau de bord et les compteurs du kanban
   tournent comme un compteur kilométrique ancien.
   Principe : le texte réel reste en place (il garde la mise en page, la
   largeur, l'interlettrage et la lecture), seuls les chiffres qui tournent
   sont rendus transparents ; une fenêtre posée par-dessus chaque chiffre
   fait défiler une bande 0-9. Tout est retiré à la fin du mouvement.
   Aucune règle ne s'applique en dehors des éléments posés par
   static/js/fx/odometre.js.
   ============================================================ */

/* chiffre réel : garde sa place, invisible pendant le mouvement.
   pointer-events:none : un clic ou un survol vise l'élément de Sextant, comme au repos */
.fx-odometre-c{position:relative;pointer-events:none}
.fx-odometre-t{-webkit-text-fill-color:transparent}
/* élément dont le texte est découpé dans un dégradé (background-clip:text) :
   le chiffre réel doit aussi sortir du masque de texte du parent */
/* (contrôle du 16/09/2026) masqué par une découpe et non par visibility:hidden : le chiffre reste
   dans le texte rendu et l'arbre d'accessibilité pendant le mouvement ; rendu identique au pixel */
.fx-odometre-t.fx-odometre-t-cache{display:inline-block;clip-path:inset(50%)}

/* dégradé découpé dans le texte : la bande hérite du dégradé calculé de l'élément de Sextant
   (il suit une bascule de thème pendant le mouvement) ; le chiffre et la fenêtre ne le peignent pas */
.fx-odometre-c.fx-odometre-grad,.fx-odometre-grad>.fx-odometre-f{background-image:inherit;background-size:0 0}
.fx-odometre-grad>.fx-odometre-f>.fx-odometre-r{background-image:inherit}

/* fenêtre du rouleau : exactement la zone du chiffre réel (hauteur de la
   police), élargie de chaque côté pour ne pas rogner le dessin des chiffres */
.fx-odometre-f{
  position:absolute;top:0;bottom:0;left:-.15em;right:-.15em;
  overflow:hidden;pointer-events:none;
  -webkit-user-select:none;user-select:none;
  container-type:size;
  -webkit-mask-image:linear-gradient(transparent,#000 .16em,#000 calc(100% - .16em),transparent);
  mask-image:linear-gradient(transparent,#000 .16em,#000 calc(100% - .16em),transparent);
}

/* bande de chiffres : un cran = hauteur de la fenêtre (100cqh).
   Alignée à gauche (même origine que le chiffre réel, interlettrage compris) ;
   pas de will-change : une couche permanente décalerait le rendu au repos. */
.fx-odometre-r{
  display:block;white-space:pre;text-align:left;padding-left:.15em;
  line-height:100cqh;
}
.fx-odometre-r::before{
  content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
}

/* filet de sécurité : « réduire les animations » */
@media (prefers-reduced-motion: reduce){
  .fx-odometre-f{display:none}
  .fx-odometre-t{-webkit-text-fill-color:inherit}
  .fx-odometre-t.fx-odometre-t-cache{-webkit-text-fill-color:inherit;clip-path:none;display:inline}
}