/* Définition des balise HTML5 pour vieux navigateurs */
    aside, footer, header, main {display: block;}

    /* Définition des balise HTML5 pour vieux navigateurs */
    .conteneur {
      /* Largeur Fluide et liquide, changer le 1000px par 100% */
      max-width:100%; /*original: 1000px*/
      /* Centre le conteneur dans la page */
      margin:20px auto;
    }
a{text-decoration:none}
    header {
      text-align:center;
      background: #dda;
      color:#red;
      height:50px;
      padding:5px;
    }

    main {
      float:left;
      width:60%;
      text-align:justify;
       font-family:tahoma;
   font-size:0.80em;
          height:100%;
      background:#ccc;
    }
 main2 {
        float:center;
       width:60%;
      text-align:justify;
       font-family:tahoma;
   font-size:0.80em;
          height:100%;
      background:#fff;
    }
    aside {
      float:left;
      width:20%;
      text-align:center;
       font-family:tahoma;
   font-size:0.80em;
      height:100%;
        background-color: #0055FF ; /* couleur de fond */
    }

    footer {
      /* forcer l’affichage sous le contenu et la colonne */
      clear:both;
      text-align:center;
      background: #dda;
      color:#000011;
      height:40px;font-family:tahoma,sans-serif;
      padding:2px;
    }
    h4 { /* style des en-tête et en-pied */
  font-size: 1em; /* taille de la police */
  margin: 0; /* pas de marge : colle aux bords de l'écran */
  background-color: #dda; /* couleur de fonds */
  text-align:center ; /* le texte est centré */
  border-top: 1px solid black; /* style de l'encadrement haut */
  border-bottom: 1px solid black} /* style de l'encadrement bas */
h5{   font-size: 15px; /* taille de la police */
background-color: #dda; /* couleur de fonds */
  text-align:center ; /* le texte est centré */
  /*border-top: 1px solid black;  style de l'encadrement haut */
 /* border-bottom: 1px solid black;   style de l'encadrement bas */
}
     .box
{
	padding:10px;
	width:85%;/*ajout*/
	margin-left:3%; /*ajout*/
	background: #eeeeee;
	text-align:justify;
	border: 1px solid #0055ee;
		border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	 
}  
.conteneur iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.separ
{ height:5px }
/* ce qui fait le glissé */
    @media all and (max-width: 600px) {
      main {
        width:100%;
      }
      aside {
        width:100%;
      }
    }

    @media all and (max-width: 801px) and (min-width: 601px) {
      main {
        width:80%;
      }
      .saut {
        width:100%;
      }
    }
    .arrondi {
    width: 200px;
    height: 100px;
    border: 2px solid #000;
    -webkit-border-radius: 12px / 24px;
    -moz-border-radius:    12px / 24px; 
    border-radius:         12px / 24px; 
}
.coin {
background-color:#E4EFFF;
border:1px solid #9FC6FF;
padding:5px;
/*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px 0;
}

    </style>