/* STYLES DE LA PAGE INDEX DU SITE */

/* BEZIER STOCK ->

# ease rebond
cubic-bezier(.52,1.84,.24,.72)

<- */

html{
    background-color: #111111;
}

/* passer l'animation */

.pass-animation{

    cursor: pointer;

    position: absolute;
    right: 20px;
    bottom: 20px;

    padding: 10px 15px 10px 15px;

    border-radius: 6px;
    border: 2px solid rgb(133, 133, 133);

    font-size: 18px;
    color: rgb(133, 133, 133);

}

/* effet accueil */

.accueil{

    width: 100%;
    height: calc(100vh - 120px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.accueil h1{

    font-family: var(--title-font);
    font-weight: normal;
    font-size: 44px;

    color: transparent;

}

    .accueil h1 i{

        display: inline-block;
        font-style: normal;

        transform: translate(-20px, 20px) rotate(45deg);

    }

.accueil .logo{

    position: relative;

    width: 100%;
    height: 140px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

}

    .es5-comp-block{

        position: relative;

        width: 60%;
        height: 140px;

    }

    .logo img{

        width: 100%;
        max-height: 140px;

        position: absolute;

        /* pour transition */
        transform: translateY(60px);
        opacity: 0;

    }

/* annulé par JS */

main{
    background-color: #111111;
    overflow: hidden;
}

header{
    transform: translateY(-60px);
}

/* sections */

.page{

    width: 100%;
    padding-bottom: 40px;

    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

}

.page > section{

    width: 100%;

    filter: opacity(0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    margin-bottom: 10px;

}

.page > section article{

    display: flex;
    flex-direction: row;
    align-items: center;

}

.page > section .point{

    width: 8px;
    height: 8px;

    margin: 3px;

    border-radius: 0;
    transform: rotate(45deg);

}

.page > section h2{

    height: 30px;

    margin: 0;
    margin-left: 5px;
    margin-right: 5px;

    line-height: 30px;
    font-size: 22px;
    font-weight: bold;

    padding: 10px;
    padding-left: 14px;
    padding-right: 14px;

}

.page > section p{

    width: 70%;
    max-width: 600px;
    min-width: 200px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 0px;

    font-size: 18px;
    font-weight: normal;

}

code{
    font-size: 14px;
    margin-left: 15px;
    margin-right: 15px;
}

/* left */

.left{  
    align-items: flex-start;
    /* transform: translateX(-30px);   */
}

.left article{  justify-content: flex-start;  }

.left .point{  background-color: var(--purple);  }

.left h2{  
    color: var(--background-color);
    background-color: var(--purple); 
    border-radius: 25px 0px; 
}

.left p{  color: var(--purple);text-align: left;  }

.left code{
    align-self: flex-start;
}

/* right */

.right{  
    align-items: flex-end;
    /* transform: translateX(30px);   */
}

.right article{  justify-content: flex-end;  }

.right .point{  background-color: var(--sand);  }

.right h2{  
    color: var(--background-color);
    background-color: var(--sand); 
    border-radius: 8px 25px 25px 8px; 
}

.right p{  color: var(--sand);text-align: right;  }

.right code{
    align-self: flex-end;
}

/* what-is */

.what-is{  max-width: 300px;  }
.utility{  max-width: 500px;  }
.vocation{  max-width: 600px;  }
.erreurs{  max-width: 700px;  }
.structure{  max-width: 800px;  }
.evolutions{  max-width: 900px;  }
.promesses{  max-width: 1000px;  }
.integrer{  max-width: 1080px;  }

/* demos section */
.demos{

    width: 100%;
    max-width: var(--main-max-width);
    height: 20vw;
    max-height: 220px;
    padding-left: 10px;
    padding-right: 10px;

    position: relative;

    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;

    /* border-top: 1px solid white; */

    box-sizing: border-box;

}


    /* le vent */

    @keyframes offst{
        to{
            offset-distance: 100%;
        }
    }

    .demos > .vent{

        width: calc(100% - 20px);
        max-width: var(--main-max-width);
        position: absolute;

        stroke: rgba(234, 213, 240, 0.3);

        stroke-dashoffset: 10%;
        stroke-dasharray: 5, 200;

    }

    .demos > .feuille-morte{

        width: 20px;
        height: 20px;

        position: absolute;

        left: 200px;
        bottom: 2px;

        offset-path: path("M 100 16 C 93 24 80 24 71 21 C 57 15 72 4 74 14 C 75 23 59 22 33 15 C 20 11 10 23 0 17");
        offset-distance: 0%;

    }


    /* les arbres */

    .arbre{
        
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;

        /* border: 1px solid white; */

    }

    .s1{

        height: 80%;
        width: 10%;

    }

    .s2{

        height: 60%;
        width: 8%;

    }

    .fe1{

        height: 90%;
        width: 14%;

    }

    .fe2{

        height: 70%;
        width: 11%;

    }

    .seco{

        height: 98%;
        width: 12%;

    }

    .bao{

        height: 92%;
        width: 12%;

    }

    .feuille{

        flex: none;

        margin-bottom: 2px;
        border-radius: 6px;

    }

    .bao .feuille{

        background-color: rgb(171, 86, 204);
        height: 10%;

    }

    .bao .tronc{

        width: 40%;
        height: 26%;
        
        background-color: rgb(139, 112, 54);
        border-radius: 5px 5px 0 0;

    }

    .bao .br{

        width: 34%;

        margin-top: 2px;
        margin-bottom: 2px;
        
        border-radius: 5px;

    }

    .bao .br2{

        width: 30%;
        
        border-radius: 5px;

    }

    .seco .feuille{

        background-color: rgb(187, 81, 107);
        height: 10%;

    }

    .seco .tronc{

        width: 16%;
        height: 22%;

        margin-top: 2px;
        
        background-color: rgb(70, 52, 37);
        border-radius: 5px 5px 0 0;

    }

    .seco .br{

        height: 8%;

        margin-top: 0;
        margin-bottom: 2px;
        border-radius: 0;

    }

    .feuillu .feuille{

        background-color: rgb(157, 67, 199);
        height: 10%;

    }

    .feuillu .tronc{

        width: 16%;
        height: 18%;

        margin-top: 2px;
        
        background-color: rgb(112, 93, 50);
        border-radius: 5px 5px 0 0;

    }

    .sapin .feuille{

        background-color: rgb(94, 55, 117);
        height: 14%;

    }

    .sapin .tronc{

        width: 22%;
        height: 16%;

        margin-top: 2px;
        
        background-color: rgb(90, 63, 45);
        border-radius: 5px 5px 0 0;

    }

    .f1{

        width: 24%;

    }

    .f2{

        width: 50%;

    }

    .f3{

        width: 80%;

    }

    .f4{

        width: 100%;

    }


/* footer */
footer{

    /* none pour transition */
    display: none;

}