#bloc-avis-clients{
    position: absolute;
    width: 100%;
    height: 100vh;

}
.avis-client{
    position: absolute;
    width: 300px;
    text-align: center;
    opacity: 0;
     
}
.avis-client p{
    font-size: 15px;
}

.avis-client h3 {

    color: #c38821;
font-family: "louis";
text-transform: uppercase;
}
#eleves{
    color: #c38821;
}
#avis-1 {
    top: 20%;
    left: 30%;
    
}

#avis-2 {
    top: 25%;
    right: 20%;
}

#avis-3 {
    top: 40%;
    left: 10%;
}

#avis-4 {
    top: 340px;
    right: 12%;
}

#avis-5 {
    top: 520px;
    left: 20%; 
}

#avis-6 {
    bottom: 20%;
    right: 18%;
}

#avis-7 {
    bottom: 100px;
    left: 35%;
}

/* #avis-8 {
    bottom: 220px;
    right: 10%;
}

#avis-9 {
    bottom: 80px;
    left: 12%;
}

#avis-10 {
    bottom: 40px;
    right: 20%;
} */

#tarifs{
    height: 100vh;
    width: 100%;
    
    position: relative;
    margin-top: 400px;
}
   .fente-blanche-path {
       fill: none;
       stroke: #fff;
       stroke-miterlimit: 10; 
       stroke-width: 4px;
    z-index: 3;
   }
   #fente-blanche-svg{
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: visible;
    z-index: 3;
   }    
   #box-texte-tarif{

    width: 150px;
    text-align: center;
    top:35%;
    left: 40%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    z-index: 3; 
    
   }
        #box-texte-tarif h2 {
         
            font-size: 60px; 
            z-index: 3;
       
        }


    #box-commentaire-tarif{

            position: absolute;
            width: 150px;
            text-align: center;
            top: 60%;
                left: 63%;  
                transform: translateX(-50%) translateY(-50%);
                
    }
#cta{
    
    display: flex;
align-items: center;
justify-content: center;
   position: relative;
    height: 100vh;
    flex-direction: column;
    transform: translateY(-100px);
    
}
#cta p{
    width: 400px;
    text-align: center;
}
#cta button{
    width: 400px;
}

#savoir-plus{
    position: absolute;
   text-align: center;
   left: 15%;
    bottom: 80px; 
    transform: rotate(-10deg); 
}
#savoir-plus img{
    height: 70px;
}
#savoir-plus p{
    font-family: 'valentine';
    font-size: 40px; 
    font-weight: 1;
}
#bloc-questions-reponses{
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding:150px; 
    margin-bottom: 100px;
}
#bloc-q-r-intro{
width: 100%;
display: flex;
flex-direction: column;
text-align: center;
z-index: 2;
margin-bottom: 50px;
}
#bloc-q-r-intro h2{
    font-family: 'valentine';
    font-size: 60px;
    font-weight: 100;

}
#q-r{
    display: flex;
   justify-content: center;
    flex-wrap: wrap;
    gap: 10px;


}
.mini-bloc-q-r{

    border: 2px solid white;
    color: white; 
    background: none;
    border-radius: 30px;
    padding: 10px;
    transition: all 0.5s ease;
    font-family:'louis' ;
    opacity: 1;
    position: relative;
    z-index: 0;
    position: relative;

}
.mini-bloc-q-r::before{
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 30px;
   
    background: linear-gradient(-45deg, #f4c662, #ebeec7, #d58523, #efd648);
    opacity: 0;
    transition: all 0.5s;
    top: 0;
    left: 0;
    z-index: 0;
  
    
}
.mini-bloc-q-r span{
    cursor: pointer;
    position: relative;
    color: rgb(255, 255, 255);
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.mini-bloc-q-r:hover::before{
 
color: white; 
background: linear-gradient(-45deg, #f4c662, #ebeec7, #d58523, #efd648);
    background-size: 400% 400%;
    animation: gradient 50s ease infinite;
 opacity: 1;
cursor: pointer;
z-index: 1;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
#bloc-questions-reponses::before{
    content: "";
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
 width: 100%;
    height: 100%;
    background: linear-gradient(121deg, #a17310, #6b3714, #c6830f);
        background-size: 100% 900%;
        mask-image: linear-gradient(transparent 0%, black 30%, black 70%,transparent 100%);
        -webkit-animation: AnimationName 36s ease infinite;
            -moz-animation: AnimationName 36s ease infinite;
            animation: AnimationName 36s ease infinite;
        }
        
        @-webkit-keyframes AnimationName {
            0% {
                background-position: 74% 0%
            }
        
            50% {
                background-position: 27% 100%
            }
        
            100% {
                background-position: 74% 0%
            }
        }
        
        @-moz-keyframes AnimationName {
            0% {
                background-position: 74% 0%
            }
        
            50% {
                background-position: 27% 100%
            }
        
            100% {
                background-position: 74% 0%
            }
        }
        
        @keyframes AnimationName {
            0% {
                background-position: 74% 0%
            }
        
            50% {
                background-position: 27% 100%
            }
        
            100% {
                background-position: 74% 0%
            }
        }

#bloc-questions-reponses{

       
   position: relative;
   
}
        


    .panneau-faq{

        width: 400px; 
       height: 400px;
        position: fixed; 
        z-index :33;
        background-color: rgba(0, 0, 0, 0.221);
        backdrop-filter: blur(10px) ; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 20px;
        visibility: hidden;
        opacity: 0;
        transition: all 0.2s;
       
    }
    .panneau-faq.active{
        width: 400px;
            height: 400px;
            position: fixed;
            z-index: 33;
            background-color: rgba(0, 0, 0, 0.221);
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 20px;
            transition: all 0.2s; 
            visibility: visible;
            opacity: 1;
    }
    
   
    .close{
        height: 20px;
        width: 30px;
        position: relative;
        cursor: pointer;
    }

    #barre1{
        position: absolute;
        transform: rotate(0deg);
        width: 20px;
        height:3px;
        background-color: white;
        border-radius: 20px;
        transition: all 1s;
    }
    #barre2{
        position: absolute;
       
        transform: rotate(0deg);
        width: 20px;
        height: 3px;
        background-color: rgb(255, 255, 255);
        border-radius: 20px;
        z-index: 5;
        top: 0;
        left: 0;
        transition: all 1s;
    }
    .close:hover #barre2{
        transform: rotate(-45deg);
        transition: all 0.2s;
         
    }
          .close:hover #barre1 {
              transform: rotate(45deg);
              transition: all 0.2s;
    
          }
#position-close{
    position: absolute;
    top: 20px;
    left: 20px;
}
#box-commentaire-tarif-mobile{
    display: none; 
}

/* ============ MOBILE ============ */
@media screen and (max-width: 769px) {

    /* AVIS CLIENTS */
    #bloc-post-intro .split-e h2 {
        text-align: center;
        padding: 0 20px;
    }

    .avis-client {
        width: min(300px, 64vw);
    }

    .avis-client p {
        font-size: 13px;
    }

    #avis-1 {
        top: 14%;
        left: 8%;
    }

    #avis-2 {
        top: 28%;
        right: 6%;
    }

    #avis-3 {
        top: 42%;
        left: 6%;
    }

    #avis-4 {
        top: 56%;
        right: 8%;
    }

    #avis-5 {
        top: 70%;
        left: 8%;
    }

    #avis-6 {
        bottom: 12%;
        right: 6%;
    }

    #avis-7 {
        bottom: 30px;
        left: 18%;
    }

    /* TARIFS */
    #tarifs {
        margin-top: 120px;
        height: 80vh;
    }

    #fente-blanche-svg {
        height: 62%;
    }

    #box-texte-tarif {
        left: 30%;
        top: 32%;
    }

    #box-texte-tarif h2 {
        font-size: 44px;
    }

    /* sous la boucle blanche pour ne pas la chevaucher */
    #box-commentaire-tarif-mobile {
        position: relative; 
        transform: translate(0);
        display: flex;
        text-align: center;
        padding : 1em;
    }
         #box-commentaire-tarif {
          
             display: none;
         }
    /* CTA */
    #cta {
        height: auto;
        transform: none;
        padding: 60px 0 170px;
    }

    #cta p,
    #cta button {
        width: min(400px, 86vw);
    }
    #texte-cta{
        display: none;
    }
    #savoir-plus {
        left: 6%;
        bottom: 20px;
    } 

    #savoir-plus img {
        height: 50px;
    }

    #savoir-plus p {
        font-size: 30px;
    }

    /* QUESTIONS REPONSES */
    #bloc-questions-reponses {
        padding: 80px 16px;
        margin-bottom: 40px;
    }

    #bloc-q-r-intro h2 {
        font-size: 44px;
    }

    .mini-bloc-q-r {
        font-size: 14px;
    }

    /* POPUP FAQ */
    .panneau-faq,
    .panneau-faq.active {
        width: min(400px, 92vw);
        height: auto;
        min-height: 260px;
        padding: 60px 20px 40px;
    }
}
@media screen and ((min-width: 770px) and (max-width: 1100px)) {

    .avis-client{
        display: none;
    }
        #box-commentaire-tarif {
    
            position: absolute;
            width: 150px;
            text-align: center;
            top: 60%;
            left: 70%;
            transform: translateX(-50%) translateY(-50%);
    
        }
}