body {
    margin: 0px;
    padding: 0px;   
    font-family:"Arial","Courrier New","Times New Roman";

}

#header {
    width: 100%;
    height: 141px;
    background-image:url('bg_01.png');   
}


/*   BOUTON RETOUR MENU     */
 
#boutonmenu {
position:relative;
top : 25px;
color: red;
left: 50px;
width: 100px;
font-size: 25px;
background-color: lightblue;
text-align: center;
border: 2px solid blue;
border-radius: 5px;
}


#page {
    width: 100%;
    position: absolute;
    top: 128px;
}
#content {
    margin-top: 55px;
    width: 100%;
    min-height: 400px;
    position: relative;
}


/* PAGE RREFMENU  */
/* propriétés du tableau  */
.menu-table   {
width: 100%;
cellspacing:2;
cellpading: 2;
}

/* colonnes contenant les années   */
.menu-year {
width: 25%;
valign:top;
}
/* ligne de titre   */
.titre-gauche  {
width:10%;
valign:top;
align:center;
}
.titre-centre  {
width:80%;
valign:top;
align:center;
}
.titre-droite  {
width:10%;
valign:top;
align:center;
}
.titre  {
font-size:22px;
font-weigth:bold;
valign:top;
text-align:center;
}

/*  PAGE DE CHAQUE MOIS */
/*  Tableau du menu   */
.mois-menu-table  {
width:100%;
cellspacing:2;
cellpadding:2;
border:0; 
background-color:#33FF33;
}   
.mois-texte   {
font-size: 16px;
}
.mois-menu-table-col   {
valign:top;
align:center;
}


/*     BORDURES DU TABLEAU     */
th, td {
border: 1px solid;
}
  

/* ==== SI GRAND ECRAN NON MOBILE SUP 961px ====     */
@media screen and (min-width: 961px) {

/*  MARGE SI GRAND ECRAN    */
#page {
    left:60px;
    right:50px;
}


 /* fixer une largeur maximale de 95% aux éléments potentiellement problématiques */


 
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 95%;
    }



 
/* FORMAT DE L IMAGE DE LA COUVERTURE LE DEGI      */

.couverture {
	width: 200px;
}

}

/*    === DEBUT ECRAN TABLETTE   481 - 960 px  ======   */
@media screen and (max-width:960px) and (min-width:481px) {


/* FORMAT DE L IMAGE DE LA COUVERTURE LE DEGI      */

.couverture {
	width: 150px;
}

    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

   
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
        min-width : 50px;
    }


  
}
/* === FIN ECRAN TABLETTE  ==== */




/* === DEBUT PETIT ECRAN MAX 480   ==== */

@media (max-width: 480px) {
  



/* PAGE RREFMENU  */
/* propriétés du tableau  */
.menu-table   {
width: 100%;
cellspacing:2;
cellpading: 2;
}

/* colonnes contenant les années   */
/* caracteres plus grands   */
.menu-year {
width: 25%;
valign:top;
font-size:20px;
}





/* FORMAT DE L IMAGE DE LA COUVERTURE LE DEGI      */

.couverture {
	width: 100px;
}    


    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
        min-width : 50px;
    }
    
        
  
}