body {
   margin:0;
   padding:0;
   height:100%;
   font-family: "Gill Sans", sans-serif;
  // background-color: #6ea5c3;
   background-color: #ccc;
}
main {
   position:fixed;
   width: 100%;
   top: 120px;
   bottom: 30px;
   overflow:scroll;
   overflow-x: hidden;
}
header {
   position:fixed;
   top:0;  /* on le colle en bas */
   width:100%;
   height:100px;   /* Hauteur du pied de page */
   text-align: left;
}
footer {
   position:fixed;
   bottom:0;  /* on le colle en bas */
   width:100%;
   text-align: center;
}
#menu {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
//column-count:4;
}
#liste{
display: none;
position: absolute;
opacity: 0;
text-align: left;
width: 300px;
border: 1px solid gray;
border-radius: 3%;
margin: 3px;
padding: 10px;
background-color:#fff;
box-shadow: 2px 2px 7px #999;
}
#liste p {
margin: 2px;
}
.lespages {
//position:absolute;
//top: 120px;
//bottom: 100px;
//left:0;
//right:0;
opacity:0;
display:none;
width:100%;
height: 100%;
}
#mespages {
height:90%;
display:none;
}
.bouton_menu {
width:100px;
height: 100px;
text-align: center;
vertical-align:middle;
border: 5px solid gray;
border-radius: 50%;
font-size:20px;
background-color: #ccf;
margin: 5px;
}
.listecontenu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
height: 100%;
}
.contenu {
display: grid;
grid-template-columns: 12fr 2fr 1fr;
}
.col1 {
text-align:left;
}
.col2, .col3 {
text-align:right;
}
.meslistes {
//position:absolute;
//border: 1px solid gray;
border-radius: 10px;
background-color:white;
margin: 10px;
box-shadow: inset 2px 2px 4px #999;
padding: 8px;
}
.contenu {
width: 100%;
//height: 80%;
   overflow:scroll;
   overflow-x: hidden;
   overflow-y: auto;
}
.contenu > div {
//text-align:left;
margin: 4px;
border-bottom: 1px solid #80808029;
}
.bouton_plus {
margin-left:10px;
border: 1px solid gray;
border-radius: 5px;
padding: 3px;
background-color: #f5f5f5;
}
#choix_duree {
display: none;
position:absolute;
border: 1px solid gray;
border-radius: 10px;
background-color:#ebe7e7;
margin: 10px;
padding: 10px;
}
.nombre_clavier {
border: 1px solid gray;
border-radius: 10px;
background-color:white;
margin: 3px;
padding: 3px;
text-align: center;
}
.nombre_clavier:active {
background-color:#999;
}
.selectionne {
background-color:#666;
}

img.superpose {
position: absolute;
height: 150px;
width:150px;
top:25px;
left:10px;
}
.demi {
 display:none;
}
.horloge {
position: relative;
height: 150px;
width:150px;
top: -30px;
left: -10px;
}
.tdhorloge {
height: 170px;
width: 150px;
}
@media (hover: hover) { 
.nombre_clavier:hover {
cursor:pointer;
background-color:#ddd;
}
.bouton_plus:hover, .col2 {
cursor:pointer;
}
.bouton_menu:active {
background-color: #555;
}
.bouton_menu:hover,.text_bouton:hover {
cursor: pointer;
background-color: #cdf;
}
#liste p:hover{
cursor: pointer;
color: #555;
}
#logo:hover {
cursor:pointer;
}


}