/*mise en forme et positionnement des éléments */
body{
    margin: 0px;
    padding: 0px;


}


/* règle pour importer et définir une police de caractère précise */
@font-face {
    font-family: 'a Asian Hiro';
    src: url(../fonts/a-asian-hiro/aasianhiro.otf);

}



@font-face {
    font-family: 'Blogger Sans';
    src: url(../fonts/blogger-sans/Blogger_Sans.otf);

}


@font-face {
    font-family: 'Blogger Sans Light';
    src: url(../fonts/blogger-sans/Blogger_Sans-Light.otf);
}

header{
    width: 1000px;
    height: 140px;
    margin-left: auto;
    margin-right: auto;

    /* mise en forme 
   background-image: url(../images/header_bar.png);
    /* positionnement */
    margin-top: -24px;
    padding: 0px;

}


  /*mise en forme*/
  h1{
    width: 1000px;
    height: 105px;
    font-family: 'a Asian Hiro';
    /*police*/text-align: center;
    /*alignement*/text-transform: uppercase;
    /*style*/position: relative;
    top:0px;
    padding-top: 35px;
    font-size: 36px;
    /*taille*/color: #2e8ece;
    background-image: url(../images/header_bar.png);
}

 

main{
    
    margin-top:-160px;
    width: 100%;
    height: auto;
/*    background-color: rgba(116, 91, 139,0.2);*/
    margin-left: auto;
    margin-right: auto;

}



    /* définition et positionnement de la nav identifiée menu */
    #menu{
        width: 100%;
        /* height:auto; */
    

        /* background-color: hotpink; */
        position: absolute;

    
        margin-top: 140px;

    }


/* définition et positionnement de la div identifiée icone_nav */
#icone_navgauche{
    width: 50px;
    height: 140px;
    /* background-color: lightpink; */
    position: fixed;
    padding: 0px;
    margin-left: 10px;
    top:0px;

}



/* définition des bouton back, before, retour  */
 #bt_back, #bt_before, #bt_retour, #bt_next {
    width: 40px;
    height: 40px;

}


/* positionnement du bouton icon1 (home) */
    #bt_icon1, #bt_icon2 {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    margin-top: 30px;
    margin-left: 5px;
    text-align: center;
    position: absolute;

}



#icone_navdroite{
    width: 50px;
    height: 140px;
    /* background-color: lightpink; */
    position: fixed;
    padding: 0px;
    margin-left: 1850px;
    top: 0px;
}


/* positionnement du bouton icon2 (flèche)*/
#bt_icone1, #bt_icone2 {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    position: absolute;
    text-align: center;
    margin-top: 30px;
    margin-left: 5px;
    
        
    }




   /* définition et positionnement du lien et état du lien bt_back & next */
   /* état initial */
#bt_back a, #bt_next a, #bt_before a, #bt_retour a{
    text-align: center;
    font-size: 30px;
    text-decoration: none;

    line-height: 38px;
    color: #FFFFFF;

   
}



/* état au survol */
#bt_back :hover, #bt_next :hover, #bt_before :hover, #bt_retour :hover{
    
    color:#0099cc;

}



/* état visité */
#bt_back :visited, #bt_next :visited, #bt_before :visited, #bt_retour :visited{
    text-decoration: none;

}



/* état du lien actif */
#bt_back :active, #bt_next :active, #bt_before :active, #bt_retour :active{
    text-decoration: none;

}






section{
    width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
    font-family: 'blogger sans';/* police*/
    font-size: 18px;
}

#promoblog{
    width: 1900px;
    height: 1110px;

    margin-left: auto;
    margin-right: auto;

}


#promoblog figure{
    width: 1900px;
    height: 1080px;
    margin-left: auto;
    margin-right: auto;
}

#promoblog figcaption{
    margin-top: -5px;
    width: 100%;
    height:30px;
    /* font-family: 'blogger sans';police*/
    text-align: center;
    line-height: 28px;
    color: #35cece;
    background-color: #000000;
}



#promoblog ul{
    width: 500px;
    height: 400px;
    margin-left:50px;
    color: #000000;
    background-color:rgba(255, 255, 255,0.5);
    margin-top: -920px;
    position: relative;
    padding-top:200px;

} 



#promoblog ul li a{
text-decoration: none;
color: #0099cc;
}


#promoblog ul li a:hover{
    text-decoration: none;
    color: #35cece;
    font-weight: bolder;
    }

    #promoblog ul li a:active{
        text-decoration: none;

        }
  

        #promoblog ul li a:visited{
            text-decoration: none;
            color: #35cece;
            font-weight: bolder;
            }

/* mise en forme et position pied de page */
footer{
    width: 750px;
    height: 55px;

    
    left :50%;
    margin-left: -375px;


    font-family: 'Blogger Sans';
    
    /* background-color: aqua;  */
    position: absolute; 

}

h3{
    margin-top: 7px;
    font-family: 'Blogger Sans';
    font-weight: lighter;
    font-size: 16px;
    text-align: center;
    
    color:#2E8ECE;
    text-transform: uppercase;
    line-height: 20px;/* style */
    
}