body {
margin: 0;
padding: 0;
}

#superglob {
position: relative;
margin: 0;
padding: 0;
border: 0;
width: 100%;
min-width: 994px;
height: 100%;
overflow: hidden;
}
#haut {
position: relative;
left: 0;
top: 0;
padding: 0;
margin: 0;
width: 100%;
min-width: 1000px;
min-height: 100px;
max-height: 400px;
overflow: hidden;
}
#logo {
position: relative;
float: left;
width: 20%;
min-width: 190px;
max-width: 300px;
}
#entete {
position: relative;
bottom: 0;
float: right;
width: 80%;
min-width: 770px;
min-height: 110px;
max-height: 400px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
overflow: hidden;
}
#inter {
position: relative;
width: 100%;
min-width: 1000px;
overflow: hidden;
clear: both;
}
#corps {
position: relative;
width: 100%;
min-width: 1000px;
min-height: 1000px;
overflow: hidden;
}
#gauche {
position: relative;
float: left;
width: 18%;
min-width: 180px;
min-height: 1000px;
margin-top: 0;
padding: 0;
padding-right: 2px;
border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
overflow: hidden;
}
#globaldrt {
position: relative;
float: right;
width: 79%;
min-width: 770px;
min-height: 1000px;
margin-top: 10px;
margin-right: 0;
margin-bottom: 8px;
overflow: hidden;
}
#fond {
position: relative;
width: 100%;
min-width: 1000px;
overflow: hidden;
clear: both;
}

.cadre {
position: relative;
margin: 0;
overflow: hidden;
}

.cadreg {
position: relative;
margin: 0;
padding: 2px;
overflow: hidden;
}

.cadrel {
position: relative;
margin: 0;
overflow: hidden;
}

.cadree {
position: relative;
margin: 0;
overflow: hidden;
}

.cadref {
position: relative;
margin: 0;
overflow: hidden;
}

.cadrei {
position: relative;
margin: 0;
overflow: hidden;
}

.cdrmenupg {
margin: 0;
padding: 2px;
border: 0;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

.bloc1, .bloc2, .bloc3, .bloc4, .bloc5, .bloc6, .bloce1, .bloce2, .bloce3, .bloce4, .bloce5, .bloce6, .blocf1, .blocf2, .blocf3, .blocf4, .blocf5, .blocf6 {
position: relative;
float: left;
padding: 6px;
margin: 1%;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
overflow: hidden;
}

.bloc1 {width: 96.4%;}
.bloc2 {width: 46%;}
.bloc3 {width: 29.7%;}
.bloc4 {width: 22%;}
.bloc5 {width: 17.15%;}
.bloc6 {width: 13.85%;}
.bloce1 {width: 96.5%;}
.bloce2 {width: 46.8%;}
.bloce3 {width: 30.37%;}
.bloce4 {width: 22.01%;}
.bloce5 {width: 17.15%;}
.bloce6 {width: 13.85%;}
.blocf1 {width: 97%;}
.blocf2 {width: 47.4%;}
.blocf3 {width: 30.83%;}
.blocf4 {width: 22%;}
.blocf5 {width: 17.6%;}
.blocf6 {width: 14.3%;}

.blocg {
position: relative;
padding: 4px;
margin-top: 6px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
overflow: hidden;
}

.blocl {
position: relative;
padding: 4px;
margin-top: 6px;
margin-left: 2px;
margin-right: 4px;
margin-bottom: 2px;
overflow: hidden;
}

.blocmenu {
position: relative;
padding: 1px;
margin: 2px;
margin-bottom: 8px;
overflow: hidden;
}

.centrer {
display : block;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
text-align: center;
clear: both;
}

.aligng {
display: block;
float: left;
margin: 4px;
margin-right: 10px;
}

.aligngvd {
display: block;
margin-left: 2px;
margin-right: auto;
margin-top: 2px;
clear: both;
}

.alignd {
float: right;
display: block;
margin: 4px;
margin-left: 10px;
}

.aligndvd {
display: block;
margin-right: 2px;
margin-left: auto;
margin-top: 2px;
clear: both;
}

p {
margin: 2px;
}

#form {
padding: 4px;
margin: 2px;
}

#video {
margin: 4px;
overflow: hidden;
}

.visionneuse1 {
display: block;
position: relative;
clear: both;
width: 720px;
height: 424px;
border: 2px solid #808080;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-radius: 6px;
background-image: url("img/transpar-gris.png");
}

.visiobase1 {
position: relative;
left: 4px;
top: 6px;
width: 510px;
height: 404px;
border: 0;
text-align:center;
display: table-cell;
vertical-align: middle;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-radius: 6px;
background-image: url("img/transpar-gris.png");
}

.visioimgbase {
display: block;
margin-left: auto;
margin-right: auto;
}

.visiolist1 {
position: absolute;
right: 2px;
top: 2px;
width: 160px;
height: 400px;
font-size: 90%;
margin-top: 5px;
margin-right: 5px;
background-image: url("plusclair.png");
overflow: auto;
}

.visiomini {
text-align: center;
font-size: 80%;
background-image: url("plusfonce2.png");
margin: 4px;
}

.visiofixe {
position: absolute;
width: 400px;
height: 350px;
top: 20px;
left: 50px;
}

.pascript {
z-index: 1;
background-color: red;
color: yellow;
font-size: 20px;
padding: 1px;
}

img {
max-width: 100%;
width: auto;
height: auto;
-webkit-box-sizing: boder-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.menusmart {
display: none;
}

@media only screen and (max-width: 900px)
{
body {
font-size: 150%;
}
#superglob {
min-width: 200px;
}
#haut {
min-width: 200px;
}
#logo {
float: none;
width: 100%;
min-width: 99%;
text-align: center;
}
#entete {
width: 100%;
min-width: 200px;
}
#corps {
min-width: 200px;
}
#globaldrt {
float: none;
width: 100%;
min-width: 180px;
padding-top: 60px;
}
.menusmart {
display: block;
top: 0;
left: 0;
height: 60px;
text-align: center;
color: black;
font-weight: bold;
font-size: 150%;
background-color: #ff0000;
}
.imgmenusmart {
float: right;
margin-right: 10px;
}

#gauche {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60%;
min-height: 60px;
height: 60px;
margin-top: 0;
border-top: 2px solid grey;
border-right: 2px solid grey;
border-bottom: 2px solid grey;
border-radius: 0 10px 10px 0;
box-shadow: 3px 3px 8px grey;
-moz-box-shadow: 3px 3px 8px grey;
-webkit-box-shadow: 3px 3px 8px grey;
-webkit-transition: height 0.8s ease-in-out;
-moz-transition: height 0.8s ease-in-out;
-o-transition: height 0.8s ease-in-out; 
transition: height 0.8s ease-in-out; 
}

.deplace #gauche {
position: absolute;
height: 99%;
}
.deplace .menusmart {
display: none;
}
.deplace .opaque {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url(plusfonce.png);
}
#fond {
min-width: 200px;
}
.bloc1, .bloc2, .bloc3, .bloc4, .blocf4, .bloc5, .blocf5, .bloc2s3, .bloc1s3 {
float: none;
}
.bloc1 { width: 99%;}
.bloc2 { width: 99%;}
.bloc3 { width: 99%;}
.bloc4, .blocf4 { width: 99%;}
.bloc5, .blocf5 { width: 99%;}
.bloc6, .blocf6 { width: 48%;}
.bloc2s3 { width: 99%;}
.bloc1s3 {width: 99%;}

}