body {
  height: 100%;
  margin: 0;
  padding: 0;
}

header2 {
  width: 100% !important;
  height: 45px;
  position: relative;
}

footer 2{
  width: 100%;
  height: 25px;
}

#poc-responsive{background-color:white;width:15px}

.metro2 .navigation-bar-content {
 width: 80%; 
}

.metro2 .container3 {
 margin: 0 auto; 
 width: 90%;/*980px*/ 
  }

/* manuel PHP */
 
.info { display: none; visibility: hidden; }
 
/* écran de 1024 au plus */

@media screen and (max-width: 1024px) {
 #poc-responsive{background-color:green;}
} 

@media screen and (max-width: 768px) {
 #poc-responsive{background-color: black;}
} 

@media screen and (max-width: 640px) {
 #poc-responsive{background-color: red;}
}

/* Phones landscape - max-device-width: 480px - */

@media only screen and (max-width: 480px) {
 #poc-responsive{background-color: yellow;}
} 

#navigation-bar { position: fixed !important;height:45px;}
#navigation-bar2 .navigation-bar-content { width: 100%}