/* montagne premier plan */

#mountains{
    position: absolute;
    
    background-color: var(--couleur-fond-montagne);
    width: 100%;
    height: var(--hautaur-montagne);
    bottom:var(--bottom-hauteur-montagne);
}
.mountain, .mountain-fond{
    position: absolute;
    content: "";
    bottom: 0;
    left: 130px;
    border-top: 0px solid transparent;
    border-right: 180px solid transparent;
    border-bottom: 350px solid var(--couleur-montagne);
    border-left: 180px solid transparent;
    /* z-index: 5; */
}
.mountain::after, .mountain-fond::after{
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    border-top: 0px solid transparent;
    border-right: 140px solid transparent;
    border-bottom: 350px solid var(--couleur-ombre-montagne);
    border-left: 0px solid transparent;
    /* z-index: 5; */
    transform-origin: top right ;
    transform: skewX(18deg);
}
#mountain-1{
    left: inherit;
    right: 80%;
}

#mountain-2{
    
    border-bottom-width: 400px;
}
/* #mountain-2::after{
    border-bottom-width: 400px !important;
} */
#mountain-3{
    left: 40px;
    border-bottom-width: 300px;
}
#mountain-4{
    left: 50%;
    translate: -50%;
    border-bottom-width: 100px;
}
#mountain-5{
    left: 50%;
    z-index: 5;
}
#mountain-6{
    left: 60%;
    border-bottom-width: 300px;
}
#mountain-7{
    left: 80%;
    border-bottom-width: 370px;
    z-index: 5;
}



#mountain-3::after{
    border-bottom-width: 300px;
}
#mountain-4::after{
    border-bottom-width: 100px;
}
#mountain-6::after{
    border-bottom-width: 300px;
}
#mountain-7::after{
    border-bottom-width: 370px;
}



.snow{
    position: absolute;
    content: "";
    bottom: -100px;
    left: -50px;
    border-top: 0px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 102px solid var(--couleur-neige);
    border-left: 50px solid transparent;
    z-index: 5;
}


.snow::after{
    position: absolute;
    content: "";
    top: 100%;
    left: 0px;
    border-top: 0px solid transparent;
    border-right: 42px solid transparent;
    border-bottom: 102px solid var(--couleur-ombre-neige);
    border-left: 0px solid transparent;
    z-index: 6;
    
    transform-origin: top right ;
    transform: skewX(18deg);
}

#mountain-1 .snow{
    left:-52px;
    border-left-width: 52px;
}


#mountain-2 .snow{
    border-right-width: 46px;
    border-left-width: 45px;
    left:50%;
    translate:-50%;
}
#mountain-2 .snow::after{
    border-right-width: 36px;
    
}
#mountain-3 .snow{
    left: -62px;
    border-left-width: 62px;
}

#mountain-3 .snow::after{
    border-right-width: 46px;
}
#mountain-5 .snow{
    left: -51px;
    
    border-right-width: 37px;
    border-left-width: 52px;
}
#mountain-5 .snow::after{
    border-right-width: 40px;

}
#mountain-7 .snow{
    left: -49px;
    border-right-width: 32px;
    border-left-width: 50px;
}
#mountain-7 .snow::after{
    transform: skewX(17deg);
}



/* montagne fond */
#mountain-fond--2{
    left:-10%;
}
#mountain-fond--1{
    left:90%;
}
#mountain-fond-0{
    left:100%;
}


#mountain-fond-1{
    left:50px;
    border-bottom-width: 350px;
}
#mountain-fond-2{
    border-bottom-width: 420px;
    left:21%;
}
#mountain-fond-3{
    /* border-bottom-width: 300px; */
    left:30%;
    border-bottom-width: 300px;
}
#mountain-fond-4{
    /* border-bottom-width: 400px; */
    border-bottom-width: 444px;
    left:40%;
}
#mountain-fond-5{
    /* border-bottom-width: 300px; */
    border-bottom-width: 500px;
    left:70%;
}


#mountain-fond--1 .snow{
    left: -52px;
    
}
#mountain-fond-2 .snow{
    left: -43px;
    border-left-width: 43px;
}
#mountain-fond-2 .snow::after{
    border-right-width: 40px;

}


#mountain-fond-4 .snow{
    left: -41px;
    border-left-width: 41px;
    border-right-width: 34px;    
}
#mountain-fond-4 .snow::after{
    border-right-width: 40px;    
}



#mountain-fond-5 .snow{
    left: -36px;
    border-left-width: 36px;
    border-right-width: 34px;  
}
#mountain-fond-5 .snow::after{
    border-right-width: 40px;    
}


#mountain-2::after{
    border-bottom-width: 400px !important;
    }
    
    /* style */

.pierre{
    border-bottom-color: var(--couleur-montagne-pierre);
}

.pierre::after{
    border-bottom-color: var(--couleur-ombre-montagne-pierre);
}

.vert2{
    border-bottom-color: var(--couleur-montagne2);
}

.vert2::after{
    border-bottom-color: var(--couleur-ombre-montagne2);
}

.pierre2{
    border-bottom-color: var(--couleur-montagne-pierre2);
}

.pierre2::after{
    border-bottom-color: var(--couleur-ombre-montagne-pierre2);
}



.snow::before{
    position: absolute;
    content: "";
    left: -5px;
    bottom: -135px;

    border-bottom: 0px solid transparent;
    border-right: 18px solid transparent;
    border-top: 35px solid var(--couleur-neige);
    border-left: 18px solid transparent;
}
/* 
#premierPlan > *{
    z-index: 0;
}
#secondPlan > *{
    z-index: 1;
} */