@import url("main.css");/*Import de la page de référence (header, nav, footer,...)*/


#qsn{
    background:linear-gradient(white 90%, rgb(233,236,239));
    position: relative;
    padding-bottom:1px;
}

h3{
    text-align: center;
    padding-top:50px;
}
#qsn h3, #agenda h3{
    text-align: center;
}
#qsn h3{
padding-bottom: 20px;
}

#adhesion hr, #agenda hr{
    width: 70%;
}

#qsnFrise{
    position: relative;
}

.bulle{
    margin-bottom:150px;
    width:50%;
    padding: 15px 40px;
    position: relative;
}

#qsnFrise::after{
    z-index: 0;
    content: "";
    width:5px;
    height: 90%;
    position: absolute;
    top:0px;
    left:50%;
    border:dashed ;
    border-color: black;
    border-radius: 40%;
    animation-name: animationFrise;
    animation-duration: 0.4s;
    animation-iteration-count:infinite;
    
}
@keyframes animationFrise{
    0%{
        top: 0px;
    }
    100%{
        top: 10px;
    }
}


/*Rond de frise*/
#bloc1::after, #bloc3::after, #bloc2::after{
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    background-size: 100%;
    border:5px rgb(90,160,100) solid;
    border-radius: 50%;
    right:-150px;
    top:5px;
    z-index: 1;
}
#bloc1::after, #bloc3::after{
    animation-name: animationRondGauche;
    animation-duration: 2s;
}
@keyframes animationRondGauche{
    0%{
        right:200px;
    }
    100%{
        right:-150px;
    }
}

#bloc1::after{
    background: url('../img/qsnBloc1.jpg') no-repeat;
    background-size: 100%;
 }

#bloc3::after{
   background: url('../img/qsnBloc3.jpg') no-repeat;
    background-color: rgba(0,0,0,0.8);
}

#bloc2::after{
    background: url('../img/qsnBloc2.jpg') no-repeat;
    border:5px rgb(60,146,190) solid;
}
#bloc2:after, #bloc3::after{
    background-size: 100%;
}


.bulleDroite::after{
    left: -150px;
    animation-name: animationRondDroite;
    animation-duration: 2s;
}

@keyframes animationRondDroite{
    0%{
        left: 200px;
    }
    100%{
        left:-150px;
    }
}
#bloc1>.content, #bloc2>.content, #bloc3>.content{
    background-color: rgba(0,0,0,0.8);
    border-radius: 20px;
    padding: 15px;
    color:white;
    height:250px;
    padding-right: 100px;
    display: table-cell;
    vertical-align: middle;
    width:10%;
    
}
#bloc2>.content{
    padding-right: 0;
    padding-left: 130px;
}
#bloc3>.content{
    padding-right: 100px;
    text-align: center;
    width:10%;
}

.bulleDroite{
    left:50%;
}

/*Section adhesion*/
#adhesionButton{
    margin-top: 30px;
}
#adhesion{
    margin-top: -100px;
    text-align: justify;
}
#adhesionIntro{
    text-align: center;
}
#adhesion .btn{
    margin:20px;
    transition:0.5s;
}

/*Section agenda*/
#agenda{
    margin-top:-40px;
    padding-bottom: 100px;
    background-image: linear-gradient(rgb(233,236,239) 50%, rgba(51,51,51, 1));
}
#agenda h3{
    margin-bottom:40px;
}
#agenda h5{
    text-align: center;
}
#agenda .card-header{
    background-color: rgb(255,100,100);
    border-radius:50px;
    text-align: center;
}
#agenda .card{
    border:3px white solid;
    border-radius:30px;
    height: 250px;
    padding-bottom: 20px;
    margin: 10px 10px 40px 10px;
    transition:0.5s;  
}
#agenda .card:hover{
    border-color: rgb(255,100,100);
}
#agenda .card-body{
    overflow-y: auto;
    hyphens: auto;
}
#agenda .btn{
    float:right;
    margin:5px;
}

/*Sous-menu*/
.list-groupA{
    
    margin-top:-20px;
    position: sticky;
    top: -20px;
    z-index: 500;
    
}
.list-group .nav-link{
    color:black;
}


@media screen and (max-width : 700px)
{
    #qsn h3{
    padding-top:50px;
    }
    #adhesion h3{
    padding-top: 100px;
    }
    
    .bulle{
        margin-bottom: 0;
    }
    .bulleDroite{
        left:0;   
    }
    .bulleDroite::after{
        left:0;
    }
    
    #bloc1, #bloc3, #bloc2{
        padding: 0;
        position: relative;
        padding-top:300px;
        width: 100%;
    }
    #bloc1>.content, #bloc3>.content, #bloc2>.content{  
        padding: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 100%;
        text-align: center;
    }
    #bloc1::after, #bloc3::after, #bloc2::after{
        height: 200px;
        width: 200px;
        right: 0;
        left: 0;
        top:100px;
        margin-left: auto;
        margin-right: auto;
    }
    
    @keyframes animationRondGauche{
        0%{
            left:-250px
        }
        100%{
            left:0;
        }
    }
    @keyframes animationRondDroite{
        0%{
            left: 200px;
        }
        100%{
            left:0;
        }
    }

    /*frise en dessous des zones de txt*/
    #bloc1, #bloc2, #bloc3{
        z-index: 50;
    }
    h3{
        padding-top:150px;
    }
    #agenda{
        padding-bottom: 0;
    }
    
    .list-group .nav-link{
        margin-right: 70px;
        padding: 0;
    }      
}

.loadingEvent #qsnFrise::after,
.scroll#bloc3::after,
.scroll.bulleDroite::after{
    animation:0;
}