*{
margin : 0 ;
padding : 0 ;
color : red ;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    /*
     height : 400px ;
     width : 600px ;
     */

    height : 100% ;
    width : 100% ;
}

body {
	position : relative ;
    line-height: 0;
	overflow:auto;
    /*
 height : 400px ;
 width : 600px ;
 */

    height : 100% ;
    width : 100% ;
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


#debug3, #debug4, #debug5, #debug6 {
  /*      float : right;
        width : 20%;*/
        }

.debug {
    z-index : 2147483638;
    color : red;
    line-height : 1.5em;
    position : absolute ;
}

#wrapper{
        position : relative ;
	
       /*
        height : 400px ;
        width : 600px ;
		*/

		height : 100% ;
        width : 100% ;

    line-height: 1;
}
        
#barre{
        background-color : #aaa;
        width:80%;
        height:10px;
        border-radius : 8px ;
        position:absolute;
        bottom : 10% ;

}

#loupe{
        position : absolute ;
        right : 0 ;
        bottom : 0 ;
        width : 20% ;
        height : 25% ;
}

#echelle{
        height : 20%;
        width : 80% ;
        border-left : solid black 2px;
        border-right : solid black 2px;
        overflow : hidden ;
}

#echelle span{
        color : white ;
    position : relative ;
    top : 15%;

}

#cadre_mesure{
        height : 60%;
        line-height : 0.75em;
        font-size : 0.75em;
        position : relative ;
        top : 23%;
    overflow : hidden ;
}

#dessin_loupe{
    border-left : solid transparent 2px;
    border-right : solid transparent 2px;
        height :80% ;
        width : 80%;
        position : relative ;
}



.icone_loupe{
        width : 100%;
        height : 100%;
        position : absolute ;
        opacity : 0;
        transition : opacity 0.5s;
        -webkit-transition : opacity 0.5s;
        -moz-transition : opacity 0.5s;
        -o-transition : opacity 0.5s;
}

#nom_appareil{
    position : relative ;
    transform : rotate(270deg);
    -webkit-transform : rotate(270deg);
    -moz-transform : rotate(270deg);
    -o-transform : rotate(270deg);

    transform-origin : 0% 100%;
    -webkit-transform-origin : 0% 100%;
    -moz-transform-origin : 0% 100%;
    -o-transform-origin : 0% 100%;

    /*height : 1em;*/
    height : 15%;
    width : 9999px ;
    right : -100% ;

    bottom : 1.5em;
    overflow : hidden ;
    /*color : #64a9b2 ;*/
    color : #cde9f0 ;
    transition : opacity 0.5s;
    -webkit-transition : opacity 0.5s;
    -moz-transition : opacity 0.5s;
    -o-transition : opacity 0.5s;
}

#slider{
        width:0%;
        height:100%;
        background-color: rgba(255, 255, 255, 0.5);
        top:0px;
        left:0px;
        position:absolute;
        cursor:pointer;
        border-radius : 8px ;
}
 
#bouton{
        position : relative ;
        background-color : #ddd ;
        top : -10px ;
        left : -12px ;
        width:20px;
        height:20px;
        border:5px solid black;
        border-radius : 15px ;
        text-indent : -9999px ;
}

#animation
        {
    display : none ;

    /*
     height : 400px ;
     width : 600px ;
     */

    height : 100% ;
    width : 100% ;
        position : relative ;
        margin : auto ;
        overflow : hidden ;
        background-color : #222 ;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        user-select: none;
        font-family : "Arial", Gadget, sans-serif ;
        }

.calques {

        position : absolute ;
        height : 100% ;
        width : 100%;
    top : 0;
}
        
.contenus {
        position : absolute ;

        }

#affichables{
    position : absolute ;
    z-index : 1 ;
    border-radius : 50% ;
    background-image:radial-gradient(white, #999);
    background-image:-webkit-radial-gradient(white, #999);
    width : 100%;
    height : 100% ;
    overflow : hidden ;
    box-shadow: 0px 0px 90px #999 ;
}
#controles
        {
        position : relative ;
        z-index : 1000;
        }

#encadre
        {
    left : -200px ;
    z-index : 90;
    min-width : 400px ;
    max-height : 50% ;
    height : 50% ;
    background-color : white ;
    position : absolute ;
    -webkit-transform : translate3d(0px, 0px, 0px); /*contre la perte de z-index lors de transformation3D des contenus*/
    transition: left 0.5s;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    -o-transition: left 0.5s;
    box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
    border-radius : 4px ;

        }

.encart{
    margin : 2% ;
}

#description
        {
        opacity: 0;
        min-width : 250px ;
        color : black ;
        position : absolute;
        z-index : 80;
        width : 30%;
        height : 40%;
        max-height : 40%;
        background-color : #cde9f0;
        border : solid #64a9b2 3px ;
        border-radius : 5px ;
        -webkit-transform : translate3d(0px, 0px, 0px); /*contre la perte de z-index lors de transformation3D des contenus*/
        transition : opacity 0.5s;
        -webkit-transition : opacity 0.5s;
        -moz-transition : opacity 0.5s;
        -o-transition : opacity 0.5s;
        }

.fond {
    height : 100% ;
}

.fond p{
    color : darkslategrey ;
}

.fond .entete h2{
    color : darkslategrey ;
    font-size : 1.2em;
    line-height : 1.2em;
}

#encadre .fond .entete {
    margin : 2% 0;
}

#description .fond{
    margin : 2%;
}

#description .fond .entete {
    margin : 2%;
 /*   color : red ; */
}

#contenu_description
{
    width : 100%;
    line-height : 1.2em;
  /*  padding : 5%;*/
    font-size : 0.8em;
}

.contenu_scroll{
}

.contenu_scroll p{
    padding-bottom : 2%;
}
#scroll_description {
    width:100%;
    height:65%;
    overflow:hidden;
    position:relative;
    margin : 2% ;
}
#scroll_description .contenu_scroll {
    position:relative;
    line-height : 1.2em;
}
#scroll_description .scrollbar-barre {
    position:absolute;
    top:0;
    right:0;
    bottom:0px;
    width:10px;
    border-radius : 4px;
}
#scroll_description .scrollbar-ancre {
    cursor:pointer;
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:30px;
    border-radius : 4px;
    width : 100% ;
}


#contenu_encadre
{
    width : 90%;
    line-height : 1.2em;
    /*  padding : 5%;*/
    font-size : 0.8em;
}

#illustration_encart {

    width : 48%;
    height : 90%;
    overflow : hidden ;
    display : inline-block ;
    margin : auto ;
}

.illustrations_encadre {
    display : none ;
}

#liste_encadres>li>ul>li{
    display : inline-block ;
    width : 100%;
}

.image_encart {

    position : relative ;
    }

.encart {
    height : 100%;
}

.encart .fond{
    width : 48%;
    display : inline-block ;
    margin : auto ;
    float : right ;

}

#scroll_encadre {
    width:95%;
    height:85%;
    overflow:hidden;
    position:relative;
    margin : auto;
}
#scroll_encadre .contenu_scroll {
    position:relative;
    width : 90% ;

}
#scroll_encadre .scrollbar-barre {
    position:absolute;
    top:0;
    right:0px;
    bottom:0px;
    width:10px;
    border-radius : 4px;
}
#scroll_encadre .scrollbar-ancre {
    cursor:pointer;
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:30px;
    border-radius : 4px;
}

 #premier_plan
        {
        z-index : 70;
        }
        
        
        
        

TABLE {
    width : 400px ;
    }


tr {
    width : 400px ;
    }
    
td, th{
        border:3px solid black;
        padding : 2px ;
        }