/*mise en forme et positionnement des éléments */
body{
    margin: 0px;
    /* background-color:blueviolet; */
}


/* 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);
}
 /* définition et positionnement de l'entete  */
header{
    /* taille */
        width: 1000px;
        height: 140px;

    /* mise en forme */
        background-image: url(../images/header_bar.png);
        /* positionnement */
        margin-top: 0px;
        left:50%;
        margin-left: -500px;

        position:absolute;

    }


    
    /*mise en forme*/
    h1{ 
    
        font-family: 'a Asian Hiro';/* police*/
        text-align: center;/* alignement*/
        text-transform: uppercase;/* style*/
        line-height: 46px;/* interlignage*/
        font-size: 36px;/* taille*/
        color: #2e8ece;

    }


main{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    background-color: darkslateblue;
}



    /* 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: 480px;
    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: 1381px;
    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 de la div identifiée catégorie */
  #galerie{
    width: 450px;
    height: auto;
    margin-top: 30px;
    margin-left: 30px;
    background-color: indigo;

  }



   /* 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;

}



/* positionnement des 4 div contenant des bloc categorie */
#bt_mini00, #bt_mini01, #bt_mini02, #bt_mini03, #bt_mini04, #bt_mini05, #bt_mini06, #bt_mini07, #bt_mini08, #bt_mini09, #bt_mini10, #bt_mini11 {
    width: 150px;
    height: 150px;
    float: left;
    text-align: center;
    color:turquoise;
    line-height: 150px;
}



/* en haut à gauche par défaut, 1ere miniature */
#bt_mini00 {
    background-image: url(../images/croquis_carre.jpg);

}


/* au survol */
#bt_mini00:hover, #bt_mini01:hover, #bt_mini02:hover,#bt_mini03:hover, #bt_mini04:hover, #bt_mini05:hover, #bt_mini06:hover, #bt_mini07:hover, #bt_mini08:hover, #bt_mini09:hover, #bt_mini10:hover, #bt_mini11:hover{
background-position: left -150px;

text-decoration: none;

}



/* 2ème miniature milieu haut */
#bt_mini01{ 
    background-image: url(../images/sketch_carre.jpg);
    /* margin-top: -300px;
    margin-left: 300px; */

}




/* 3ème miniature haut droite */
#bt_mini02{
/* background-color: cyan; */
background-image: url(../images/ori_carre.jpg);

}




/* 4ème miniature  */
#bt_mini03{
    /* background-color:darkmagenta; */
    background-image: url(../images/ink27_carre.jpg);
    
}


/* 5ème miniature */
#bt_mini04{
    /* background-color:firebrick; */
    background-image: url(../images/ink14_carre.jpg);
    
}



/* 6ème miniature */
#bt_mini05{
    /* background-color:gold; */
    background-image: url(../images/ink09_carre.jpg);
    
}



/* 7ème miniature */
#bt_mini06{
    /* background-color:indianred; */
    background-image: url(../images/raijinfujin_carre.jpg);

    
}



/* 8ème miniature  */
#bt_mini07{
    /* background-color:olivedrab; */
    background-image: url(../images/meena_carre.jpg);
    
}



/* 9ème miniature */
#bt_mini08{
    /* background-color:peachpuff; */
    background-image: url(../images/rpg_carre.jpg);
    
}




/* 10ème miniature */
#bt_mini09{
    /* background-color:yellow; */
background-image: url(../images/sakura_carre.jpg);
    
}

/* 11ème miniature */
#bt_mini10{
    /* background-color:slateblue; */
background-image: url(../images/dieuloup_carre.jpg);
    
}



/* 12ème miniature */
#bt_mini11{
    /* background-color:orchid; */
background-image: url(../images/tora_carre.jpg);
    
}

/* insertion de la boite_pix*/
#pix_box{
    width: 850px;
    height: 650px;
    margin-left: 500px;
    margin-top: 0px;
    /* background-color: black; */
    
    padding: 0px;
    position: absolute;



    /* animation in-out */



}

figure{
    margin: 0px;
    padding: 0px;


}

figcaption{
    max-width: 850px;
    height: auto;
    color:#9c9c9c;
    font-family:'Blogger Sans Light';
    font-size: 16px;
    text-align: center;
    float: center;
    margin-top: -3px;


}


/* état image*/
#img00, #img01, #img02, #img03, #img04, #img05, #img06, #img07, #img08, #img09, #img10, #img11{
visibility: hidden;



}


/* etat lors du ciblage */
#img00:target{
    visibility: visible;
    text-align: center;
    /* position: absolute; */


}


/* etat lors du ciblage */
#img01:target {
    visibility: visible;
    margin-top:-641px;
    }


    
/* etat lors du ciblage */
#img02:target {
    visibility: visible;
    margin-top: -1281px;
    text-align: center;

    }

    
    
/* etat lors du ciblage */
#img03:target {
    visibility: visible;
    text-align: center;
    margin-top: -1921px;

 

    }

/* .transition_image3
transition: 20s;

} */

/* etat lors du ciblage */
#img04:target {
    visibility: visible;
    text-align: center;
    margin-top: -2561px;

 

    }

    /* etat lors du ciblage */
#img05:target {
    visibility: visible;
    text-align: center;
    margin-top: -3202px;

 

    }


/* etat lors du ciblage */
#img06:target {
    visibility: visible;
    text-align: center;
    margin-top: -3842px;
    
     
    
        }

/* etat lors du ciblage */
#img07:target {
    visibility: visible;
    text-align: center;
    margin-top: -4482px;
    
     
    
        }

/* etat lors du ciblage */
#img08:target {
    visibility: visible;
    text-align: center;
    margin-top: -5122px; 
    
         
        }


/* etat lors du ciblage */
#img09:target {
    visibility: visible;
    text-align: center;
    margin-top: -5765px;
    
         
        }

/* etat lors du ciblage */
#img10:target {
    visibility: visible;
    text-align: center;
    margin-top: -6405px;
    
         
        }


/* etat lors du ciblage */
#img11:target {
    visibility: visible;
    text-align: center;
    margin-top: -7047px;
    
         
        }



#bonus{

    width: 435px;
    height: 619px;
    /* background-color: navy; */
    position: absolute;
    margin-left: 1400px;


}


#bonus figcaption{
    width: 435px;
    height: 50px;
    margin-top: -50px;
    color: #35cece;
    background-color: #000000;
    position: relative;
    margin-top: -54px;
    line-height: 25px;

}



footer{
    width: 750px;
    height: 55px;

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

    margin-top: 840px;

    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 */
    
}