/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/


*{
    margin: 0px;
    padding: 0px;  
    -webkit-box-sizing: border-box;  
            box-sizing: border-box;
    outline: none; 
    font-family: Verdana, Geneva, Tahoma, sans-serif
}  
    /*code Zone 1  */
    #zt1 {
    padding-top: 80px;
    padding-bottom: 50px;
    background-image: url(img/programme\ 3.png);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;  
        
}


                                                                        /* design tableau*/
#zt1 .box1 table{
    border-collapse:collapse;
    text-align: justify;
    font-family: lato;
    color: rgb(56, 56, 56);
    margin: 0 auto;
    width: 60%;
    height: auto;
    
}
                                                                        /* design liste */
.box1 ul{
    text-align: justify;
    font-family: lato;
    color: rgb(56, 56, 56);
}

.box1 h1{
    text-align: center;
    font-family: Impact;
    color: rgb(255, 255, 255);
    font-size: 50px;
    text-shadow: rgb(180, 0, 111) 0.7px 3px;
}

                                                                    /* desgin des tableau */
.box1 td, th{
    padding: 30px;
    text-align: center;
    background-color:rgb(255, 255, 255);
    color: rgb(129, 10, 119);
    font-family: arial narrow;
    font-weight: bold;
    border: solid 1px  rgb(129, 10, 119) ;

}
/*  larhgeur colone tableau 1*/
td{
    width: 70px;
}

                                                                        /* table 2 */
span td, th{
    padding: 30px;
    text-align: center;
    background-color:rgb(255, 255, 255);
    color: rgb(129, 10, 119);
    font-family: arial narrow;
    font-weight: bold;
    border: solid 1px  rgb(129, 10, 119) ;
}

                                            /* ajustement colonne 2 tableau 1 et tableau 2 et ligne 3 tableau 1 */

                                                                    /* Tabelau 1 colone 2 */

span2 td,th{
    width:50px ;
    padding: 30px;
}



                                                                        /* tableau 2 */
span td{

    width: 50px;
}

span table{
    border-collapse:collapse;
    margin: 0 auto;
    padding: 30px;
    width: 600px;
    height: auto;
}

/*  zone 2  */
                                         
#zt2 {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    text-align: center;
    background-image: linear-gradient(to top, #fafafa 0%, white 100%);
} 

#zt2 .box2{
    margin: 0 auto;
    padding-top:80px ;
    width: 95%;
}
#zt2 .box2 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;
}

#zt2 .box2 p{
    padding: 12px;
    font-family: arial;
    font-size: 27px;
    text-align:justify ;
    line-height: 60px;
    color: #363636;
}
#zt2 .box2 p a{
    color:rgb(33, 14, 66);
    text-decoration: underline;
    font-family: arial;
    font-style: italic;
}
#zt2 .box2 p a:hover{
    color: rgb(0, 140, 255);
    cursor: pointer;
    transition: 0.3s;
}



                                                /* code de la zone 3 vision */

                                            /* Code général de la zone vision*/
#zone3 {
    width: 100%;
    height: auto;
} 

#zt3 .b1{
    text-align: center;
    width: 100%;
    height: 200px;
    background-image: url(img/banner\ 1.png);
    margin: 0 auto;
}

#zt3 .b1 h1{
    font-family: Impact;
    color: rgb(255, 255, 255);
    font-size: 50px;
    text-shadow: rgb(46, 46, 46) 0.6px 3px;
    padding-top: 70px;
}

                                        /* container zone 3 qui comprend le texte*/

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

                                            /* container zone 3 texte */

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

                                        /* zone 3 style button vision  */
#zt4 .box3 p a{
    color:rgb(33, 14, 66);
    text-decoration: underline;
    font-family: arial;
    font-style: italic;
}
#zt4 .box3 p a:hover{
    color: rgb(0, 140, 255);
    cursor: pointer;
    transition: 0.3s;
}


                                                  /* code de la zone 5 a propos*/

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

                                        /* boite zone 5 */

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


                                            /* boite zone 5 texte */

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

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


                                        /* zone 5 style bouton a propos  */
#zt5 .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;
    
}

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




                                                        /* code responsive */
@media all and (max-width:1260px){
    .zone1{
        margin: 0;
        padding: 0;
        padding-top: 30px;
    }
}



@media all and (max-width:800px){
   #zt1 .box1 h1{
        text-align: center;
        font-family: Impact;
        color: rgb(255, 255, 255);
        font-size: 30px;
        text-shadow: rgb(180, 0, 111) 0.7px 3px;
    }
    
   
    /* code du tableau */
                                                                            /* design tableau*/
#zt1 .table1{
    border-collapse:collapse;
    text-align: justify;
    font-family: lato;
    color: rgb(56, 56, 56);
    margin: 0 auto;
    width: 30%;
    height: auto;
    
}
                                                                        /* design liste */
#zt1 .box1 ul{
    text-align: justify;
    font-family: lato;
    color: rgb(56, 56, 56);
}


                                                                    /* desgin des tableau */
#zt1 td, th{
    padding: 10px;
    text-align: center;
    background-color:rgb(255, 255, 255);
    color: rgb(129, 10, 119);
    font-family: arial narrow;
    font-weight: bold;
    border: solid 1px  rgb(129, 10, 119) ;

}


                                                                        /* table 2 */
span td, th{
    padding: 70px;
    text-align: center;
    background-color:rgb(255, 255, 255);
    color: rgb(129, 10, 119);
    font-family: arial narrow;
    font-weight: bold;
    border: solid 1px  rgb(129, 10, 119) ;
}

                                            /* ajustement colonne 2 tableau 1 et tableau 2 et ligne 3 tableau 1 */

                                                                    /* Tabelau 1 colone 2 */

span2 td,th{
    width:50px ;
    padding: 30px;
}



                                                                        /* tableau 2 */
span td{

    width: 50px;
}

span table{
    border-collapse:collapse;
    margin: 0 auto;
    padding: 30px;
    width: 600px;
    height: auto;
}
/*  zone 2  */
                                         
#zt2 {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    text-align: center;
    background-image: linear-gradient(to top, #fafafa 0%, white 100%);
} 

#zt2 .box2{
    margin: 0 auto;
    padding-top:30px ;
    width: 95%;
}
#zt2 .box2 h1{
    text-align: center;
    font-family: Impact;
    padding-top: 10px;
    color: rgb(46, 46, 46);
    font-size: 30px;
    text-shadow: rgb(224, 224, 224) 0.7px 3px;
}

#zt2 .box2 p{
    padding: 12px;
    font-family: 'lucida Sans';
    font-size: 18px;
    text-align:justify ;
    line-height: 40px;
    color: #363636;
}
/* z3 banniere */
#zt3 .b1{
    text-align: center;
    width: 100%;
    height: 200px;
    background-image: url(img/banner\ 1.png);
    margin: 0 auto;
}

#zt3 .b1 h1{
    font-family: Impact;
    color: rgb(255, 255, 255);
    font-size: 30px;
    text-shadow: rgb(46, 46, 46) 0.6px 3px;
    padding-top: 70px;
}

/* zone4 */

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

#zt4 .box3  p{
    padding: 12px;
    font-family: 'lucida Sans';
    font-size: 16px;
    text-align:justify ;
    line-height: 40px;
}
/*  zone 5 */
#zt5 .box4 {
    margin: 0 auto;
    padding-top:20px ;
    width: 95%;
}
#zt5 .box4 p{
    padding: 12px;
    font-family: 'lucida Sans';
    font-size: 18px;
    text-align:justify ;
    line-height: 40px;
}

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


  
}