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;
}







/*     FORMAT DU TEXTE DU SOMMAIRE     */
.sommaire   {
color: rgb(51, 51, 51); 
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; 
font-size: 15px; 
font-style: normal; 
font-variant-ligatures: normal; 
font-variant-caps: normal; 
font-weight: 400; 
letter-spacing: normal; 
orphans: 2; 
text-align: start; 
text-indent: 0px; 
text-transform: none; 
white-space: normal; 
widows: 2; 
word-spacing: 0px; 
-webkit-text-stroke-width: 0px; 
background-color: white; 
text-decoration-thickness: initial; 
text-decoration-style: initial; 
text-decoration-color: initial; 
display: inline !important; 
float: none;
} 


/*     BORDURES DU TABLEAU     */
th, td {
border: 1px solid;
}
  
/*         IMAGE DE HEADER = BANIERE ESPERANTO GIRONDE      */
#logo {
    position: absolute;
    top: 0px;
    left: 24px;
    width: 400px;
    height: 141px;
    background-image:url('esperanto-gironde-banniere-400x141.png');
    background-repeat:no-repeat;    
}


/* ==== 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) {
  
/* 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;
    }
    
        
  
}