.df-icon-svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1s ease;
}

.df-icon.is-visible path {
  animation: df-draw-line 1s ease forwards;
  stroke-dashoffset: 0;
}

/* Cascade interne : chaque path commence après le précédent */
.df-icon.is-visible .df-icon-svg path:nth-child(1) { animation-delay: 0s; }
.df-icon.is-visible .df-icon-svg path:nth-child(2) { animation-delay: 0.4s; }
.df-icon.is-visible .df-icon-svg path:nth-child(3) { animation-delay: 0.8s; }
.df-icon.is-visible .df-icon-svg path:nth-child(4) { animation-delay: 1.2s; }
.df-icon.is-visible .df-icon-svg path:nth-child(5) { animation-delay: 1.6s; }
.df-icon.is-visible .df-icon-svg path:nth-child(6) { animation-delay: 2.0s; }
.df-icon.is-visible .df-icon-svg path:nth-child(7) { animation-delay: 2.4s; }
.df-icon.is-visible .df-icon-svg path:nth-child(8) { animation-delay: 2.8s; }
/* Ajuste la valeur (0.4s) pour accélérer ou ralentir la cascade interne */

@keyframes df-draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.df-icon-svg {
  width: 80px;
  height: 80px;
}


/* Animation universelle pour tous les traits SVG dans .df-icon */
.df-icon svg path,
.df-icon svg polyline,
.df-icon svg line {
    stroke: #23242A !important;
  stroke-dasharray: 1000; /* sera écrasé par le JS */
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1s cubic-bezier(.165,.84,.44,1);
}

.df-icon.is-visible svg path,
.df-icon.is-visible svg polyline,
.df-icon.is-visible svg line {
  stroke-dashoffset: 0;
}

.df-icon {
  display: flex;
  justify-content: center;
  align-items: center; /* Pour centrer aussi verticalement si le conteneur a une hauteur */
  width: 100%;
  /* height: 100%;  /*<-- à activer si tu veux aussi centrer verticalement dans un conteneur de hauteur fixe */
  text-align: center; /* Pour fallback inline */
}



/* Supprimer toute règle de masquage ou de display/visibility sur .df-icon ou ses enfants */