      
    
#home{  
    /////////////////animation pilliers //////////////
    #paragraph-id--7 .colone-picto h5, 
    #paragraph-id--7 .colone-picto p, 
    #paragraph-id--7 .colone-picto svg #pillier-1-path365, 
    #paragraph-id--7 .colone-picto svg #pillier-2-path367, 
    #paragraph-id--7 .colone-picto svg #pillier-3-path369{
        opacity: 0;
    }

    .visible{
        h5:nth-of-type(1) {
            animation: Appear 1s 0s forwards;
        }
        svg #pillier-1-path365 {
            stroke-dasharray: 1000; /* Longueur totale du chemin */
            stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
            animation: Appear 1s 0s forwards, fillAnimation 2s 0s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
        }
        p:nth-of-type(1) {
            animation: Appear 1s 0.5s forwards;
        }


        h5:nth-of-type(2) {
            animation: Appear 1s 1.2s forwards;
            
        }
        svg #pillier-2-path367 {
            stroke-dasharray: 1000; /* Longueur totale du chemin */
            stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
            animation: Appear 1s 1.5s forwards, fillAnimation 2s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
        }
        p:nth-of-type(2) {
            animation: Appear 1s 2s forwards;
        }
        
        h5:nth-of-type(3) {
            animation: Appear 1s 2.2s forwards;
        }
        svg #pillier-3-path369 {
            stroke-dasharray: 1000; /* Longueur totale du chemin */
            stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
            animation: Appear 1s 2.5s forwards, fillAnimation 2s 2.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
        }
        p:nth-of-type(3) {
            animation: Appear 1s 3s forwards;
        }

        @keyframes Appear {
            0%{
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fillAnimation {
            from {
                stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
            }
            to {
                stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */
            }
        }
    }
    // #paragraph-id--7 .colone-picto svg #pillier-1-path365{
    //     stroke-dasharray: 1000; /* Longueur totale du chemin */
    //     stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
    //     animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
    //     animation-delay: 5s;
        // animation-direction: alternate; /* Animation en aller-retour */


    // }
    // #paragraph-id--7 .colone-picto svg #pillier-2-path367{
    //     stroke-dasharray: 0; /* Longueur totale du chemin */
    //     stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
    //     animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
    //     animation-delay: 5s;
    //     // animation-direction: alternate; /* Animation en aller-retour */

    // }
    // #paragraph-id--7 .colone-picto svg #pillier-3-path369{
    //     stroke-dasharray: 1000; /* Longueur totale du chemin */
    //     stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
    //     animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
    //     animation-delay: 5s;
    //     // animation-direction: alternate; /* Animation en aller-retour */

    // }


    

}