/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/
    
body #content{
    min-height: 100%;
   
  
}
                                                            /* zone 1*/
#ze1 {
    text-align: center;
    width: 100%;
    background-image: url(img/bio\ back2.png);
} 
#ze1 .box1 {
    padding-top: 50px;
    width: 90%; 
    height: auto;
    text-align: center;
    margin: 0 auto;
}
                                                        /* Code zone 1 titre */
#ze1 .box1 h2{
    text-align: center;
    font-family: Impact;
    padding-top: 50px;
    color: rgb(255, 255, 255);
    font-size: 50px;
    text-shadow: rgb(123, 0, 180) 0.7px 3px;
}
#ze1 .box1 p{
    padding: 12px;
    font-family: arial;
    font-size: 25px;
    text-align:justify ;
    line-height: 60px;
    color: #fff;
}


                                                                 /* code de la zone 2 */

                                                              /* Code général */
#ze2 {
    width: 100%;
    height: auto;
    background-image: url(img/fond\ programme2.png);
    background-repeat: no-repeat;
} 

                                                                /* boite zone 2 */

#ze2  h1{
    text-align: center;
    font-family: Impact;
    color: rgb(255, 255, 255);
    font-size: 50px;
    text-shadow: rgb(180, 0, 111) 0.7px 3px;
}
                                                                    /* zone 2 box 1 */
#ze2 .box2 {
    padding-top: 50px;
    width: 90%; 
    height: auto;
    text-align: center;
    margin: 0 auto;
}
                                                                 /* boite zone 2 texte */

#ze2 .box2 p{
    padding: 12px;
    font-family: arial;
    font-size: 27px;
    text-align:justify ;
    line-height: 60px;
    color: #fff;
}

                                                                /* zone 2 style bouton a propos  */
#ze2 .box2 .button {
    padding: .5rem 1rem;
    background-color:  #380b5ed5;
    color:white;
    border: 1px solid transparent;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 80px;
    width: 170px;
    
}
#ze2 .box2 .button:hover{
    background-color: #57148de8;
}

                                                        /* code de la zone 3 Bio */

                                                        /* Code général de la zone bio*/
#ze3 {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    text-align: center;
    background-image: linear-gradient(to top, #fafafa 0%, white 100%);
} 

                                                            /* boite zone 3 */

#ze3 .box3 {
    margin: 0 auto;
    padding-top:80px ;
    width: 95%;
}

                                                            /* boite zone 3 titre bio*/

#ze3 .box3 h1{
    text-align: center;
    font-family: Impact;
    padding-top: 50px;
    color: rgb(46, 46, 46);
    font-size: 50px;
    text-shadow: rgb(224, 224, 224) 0.7px 3px;
}

                                                            /* boite zone 3 texte */

#ze3 .box3 p{
    padding: 12px;
    font-family: arial;
    font-size: 27px;
    text-align:justify ;
    line-height: 60px;
    color: #363636;
}

                                                        /* zone 3 style bouton a bio  */
#ze3 .box3 .button {
    padding: .5rem 1rem;
    background-color: rgb(37, 37, 37);
    color:#fffffffb;
    border: 1px solid transparent;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 80px;
    width: 170px;
    
}

#ze3 .box3 .button:hover{
    background-color: rgb(51, 51, 51);
    color: white;
    cursor: pointer;
}

                                                                    /* code de la zone 4 Programme */

                                                                /* Code général de la zone vision*/
#ze4 {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    text-align: center;
    background-image: linear-gradient(to top, #fafafa 0%, white 100%);
} 

                                                            /* boite zone 4 */

#ze4 .box4 {
    margin: 0 auto;
    padding-top:80px ;
    width: 95%;
}

                                                            /* boite zone 4 titre */

#ze4 .box4 h1{
    text-align: center;
    font-family: Impact;
    padding-top: 0px;
    color: rgb(51, 51, 51);
    font-size: 50px;
    text-shadow: rgb(238, 238, 238) 0.7px 3px;
}

                                                            /* boite zone 4 texte */

#ze4 .box4 p{
    padding: 12px;
    font-family: arial;
    font-size: 27px;
    text-align:justify ;
    line-height: 60px;
}

                                                    /* zone 4 style bouton a propos  */
#ze4 .box4 .button {
    padding: .5rem 1rem;
    background-color:  rgb(51, 51, 51);
    color:white;
    border: 1px solid transparent;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 80px;
    width: 170px;   
}

#ze4 .box4 .button:hover{
    background-color: rgb(59, 59, 59);
    cursor: pointer;
}

 

@media screen and (max-width:800px){
    #ze1 {
        text-align: center;
        width: 100%;
        background-image: linear-gradient(to top, #cc208e 0%, #741ce7 100%);
    } 
    #ze1 .box1 {
        padding-top: 50px;
        width: 90%; 
        height: auto;
        text-align: center;
        margin: 0 auto;
    }
                                                            /* Code zone 1 titre */
    #ze1 .box1 h2{
        text-align: center;
        font-family: Impact;
        padding-top: 50px;
        color: rgb(255, 255, 255);
        font-size: 30px;
        text-shadow: rgb(123, 0, 180) 0.7px 3px;
    }
    #ze1 .box1 p{
        padding: 12px;
        font-family: 'lucida Sans';
        font-size: 18px;
        text-align:justify ;
        line-height: 40px;
        color: #fff;
    }
    
    #ze2 {
        width: 100%;
        height: auto;
        background-image: url(img/fond\ programme2.png);
        background-repeat: no-repeat;
    } 
    
                                                                    /* boite zone 2 */
    
    #ze2  h1{
        text-align: center;
        font-family: Impact;
        color: rgb(255, 255, 255);
        font-size: 30px;
        text-shadow: rgb(180, 0, 111) 0.7px 3px;
    }
                                                                        /* zone 2 box 1 */
    #ze2 .box2 {
        padding-top: 30px;
        width: 90%; 
        height: auto;
        text-align: center;
        margin: 0 auto;
    }
                                                                     /* boite zone 2 texte */
    
    #ze2 .box2 p{
        padding: 12px;
        font-family: 'lucida Sans';
        font-size: 18px;
        text-align:justify ;
        line-height: 40px;
        color: #fff;
    }
    
                                                                    /* zone 2 style bouton a propos  */
    #ze2 .box2 .button {
        padding: .5rem 1rem;
        background-color:  #380b5ed5;
        color:white;
        border: 1px solid transparent;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 80px;
        width: 170px;
        
    }
    #ze2 .box2 .button:hover{
        background-color: #57148de8;
    }

        /* Code général de la zone bio*/
    #ze3 {
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        text-align: center;
        background-image: linear-gradient(to top, #fafafa 0%, white 100%);
    } 
    
                                                                /* boite zone 3 */
    
    #ze3 .box3 {
        margin: 0 auto;
        padding-top:80px ;
        width: 95%;
    }
    
                                                                /* boite zone 3 */
    
    #ze3 .box3 h1{
        text-align: center;
        font-family: Impact;
        padding-top: 30px;
        color: rgb(46, 46, 46);
        font-size: 30px;
        text-shadow: rgb(224, 224, 224) 0.7px 3px;
    }
    
                                                                /* boite zone 3 */
    
    #ze3 .box3 p{
        padding: 12px;
        font-family: 'lucida Sans';
        font-size: 18px;
        text-align:justify ;
        line-height: 40px;
        color: #363636;
    }
    
                                                            /* zone 3   */
    #ze3 .box3 .button {
        padding: .5rem 1rem;
        background-color: rgb(37, 37, 37);
        color:#fffffffb;
        border: 1px solid transparent;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 80px;
        width: 170px;
        
    }
    
    #ze3 .box3 .button:hover{
        background-color: rgb(51, 51, 51);
        color: white;
        cursor: pointer;
    }
    /* zone4 */
    #ze4 {
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        text-align: center;
        background-image: linear-gradient(to top, #fafafa 0%, white 100%);
    } 
    
                                                                /* boite zone 4 */
    #ze4 .box4 {
        margin: 0 auto;
        padding-top:80px ;
        width: 95%;
    }
    
                                                                /* boite zone 4 titre */
    
    #ze4 .box4 h1{
        text-align: center;
        font-family: Impact;
        padding-top: 0px;
        color: rgb(51, 51, 51);
        font-size: 30px;
        text-shadow: rgb(238, 238, 238) 0.7px 3px;
    }
    
                                                                /* boite zone 4 texte */
    
    #ze4 .box4 p{
        padding: 12px;
        font-family: 'lucida Sans';
        font-size: 18px;
        text-align:justify ;
        line-height: 40px;
    }
                                                                      
        
}