.grille-accueil
{
    /* définition de la grille de la page */
    /* width 100% prend donc toute la largeur */
    width: 100%;
    /* height 100% prend donc toute la hauteur */
    height: 100%;
    display: grid;
    /* Déclaration de la grille ici 10 rangée / 10 colonne */
    grid-template:50px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 50px / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
/* la zone de menu prend tout la rangée */
.heure
{
    /* 1 ere ligne de rangé / 1 ere ligne de colonne jusquà la 2 ligne de rangée jusqu'à la 2 ième ligne de colonne*/
    grid-area: 1 / 1 / 1 / 2;
    text-align: center;
    
    background: black;
    border-width: 2px;
    border-radius: 5px;
    border-style: double;
    border-color: cadetblue;
}
.menu
{
    /* 1 ere ligne de rangé / 1 ere ligne de colonne jusquà la 2 ligne de rangée jusqu'à la dernière ligne de colonne*/
    grid-area: 1 / 2 / 1 / -1;
    border-width: 2px;
    border-radius: 5px;
    border-style: double;
    border-color: cadetblue;
}
/* Les titres des lignes */
.titre1
{
    text-align: center;
    grid-area: 2 / 2 / 2 / 3;
}
.titre2
{
    text-align: center;
    grid-area: 3 / 2 / 3 / 3;
}
.titre3
{
    text-align: center;
    grid-area: 4 / 2 / 4 / 3;
}
.titre4
{
    text-align: center;
    grid-area: 5 / 2 / 5 / 3;
}
.titre5
{
    text-align: center;
    grid-area: 6 / 2 / 6 / 3;
}
.titre6
{
    text-align: center;
    grid-area: 7 / 2 / 7 / 3;
}
.titre7
{
    text-align: center;
    grid-area: 8 / 2 / 8 / 3;
}
.titre8
{
    text-align: center;
    grid-area: 9 / 2 / 9 / 3;
}
.titre9
{
    text-align: center;
    grid-area: 10 / 2 / 10 / 3;
}
.titre10
{
    text-align: center;
    grid-area: 11 / 2 / 11 / 3;
}
.titre11
{
    text-align: center;
    grid-area: 12 / 2 / 12 / 3;
}
/* Les positions des touches */
.touche01
{
    text-align: center;
    grid-area: 2 / 3 / 2 / 4;
}
.touche02
{
    text-align: center;
    grid-area: 2 / 4 / 2 / 5;
}
.touche03
{
    text-align: center;
    grid-area: 2 / 5 / 2 / 6;
}
.touche04
{
    text-align: center;
    grid-area: 2 / 6 / 2 / 7;
}
.touche11
{
    text-align: center;
    grid-area: 3 / 3 / 3 / 4;
}
.touche12
{
    text-align: center;
    grid-area: 3 / 4 / 3 / 5;
}
.touche13
{
    text-align: center;
    grid-area: 3 / 5 / 3 / 6;
}
.touche14
{
    text-align: center;
    grid-area: 3 / 6 / 3 / 7;
}
.touche21
{
    text-align: center;
    grid-area: 4 / 3 / 4 / 4;
}
.touche22
{
    text-align: center;
    grid-area: 4 / 4 / 4 / 5;
}
.touche23
{
    text-align: center;
    grid-area: 4 / 5 / 4 / 6;
}
.touche24
{
    text-align: center;
    grid-area: 4 / 6 / 4 / 7;
}
.touche31
{
    text-align: center;
    grid-area: 5 / 3 / 5 / 4;
}
.touche32
{
    text-align: center;
    grid-area: 5 / 4 / 5 / 5;
}
.touche33
{
    text-align: center;
    grid-area: 5 / 5 / 5 / 6;
}
.touche34
{
    text-align: center;
    grid-area: 5 / 6 / 5 / 7;
}
.touche41
{
    text-align: center;
    grid-area: 6 / 3 / 6 / 4;
}
.touche42
{
    text-align: center;
    grid-area: 6 / 4 / 6 / 5;
}
.touche43
{
    text-align: center;
    grid-area: 6 / 5 / 6 / 6;
}
.touche44
{
    text-align: center;
    grid-area: 6 / 6 / 6 / 7;
}
.touche51
{
    text-align: center;
    grid-area: 7 / 3 / 7 / 4;
}
.touche52
{
    text-align: center;
    grid-area: 7 / 4 / 7 / 5;
}
.touche53
{
    text-align: center;
    grid-area: 7 / 5 / 7 / 6;
}
.touche54
{
    text-align: center;
    grid-area: 7 / 6 / 7 / 7;
}
.touche61
{
    text-align: center;
    grid-area: 8 / 3 / 8 / 4;
}
.touche62
{
    text-align: center;
    grid-area: 8 / 4 / 8 / 5;
}
.touche63
{
    text-align: center;
    grid-area: 8 / 5 / 8 / 6;
}
.touche64
{
    text-align: center;
    grid-area: 8 / 6 / 8 / 7;
}
.touche71
{
    text-align: center;
    grid-area: 9 / 3 / 9 / 4;
}
.touche72
{
    text-align: center;
    grid-area: 9 / 4 / 9 / 5;
}
.touche73
{
    text-align: center;
    grid-area: 9 / 5 / 9 / 6;
}
.touche74
{
    text-align: center;
    grid-area: 9 / 6 / 9 / 7;
}
.touche81
{
    text-align: center;
    grid-area: 10 / 3 / 10 / 4;
}
.touche82
{
    text-align: center;
    grid-area: 10 / 4 / 10 / 5;
}
.touche83
{
    text-align: center;
    grid-area: 10 / 5 / 10 / 6;
}
.touche84
{
    text-align: center;
    grid-area: 10 / 6 / 10 / 7;
}
.touche91
{
    text-align: center;
    grid-area: 11 / 3 / 11 / 4;
}
.touche92
{
    text-align: center;
    grid-area: 11 / 4 / 11 / 5;
}
.touche93
{
    text-align: center;
    grid-area: 11 / 5 / 11 / 6;
}
.touche94
{
    text-align: center;
    grid-area: 11 / 6 / 11 / 7;
}
.touche101
{
    text-align: center;
    grid-area: 12 / 3 / 12 / 4;
}
.touche102
{
    text-align: center;
    grid-area: 12 / 4 / 12 / 5;
}
.touche103
{
    text-align: center;
    grid-area: 12 / 5 / 12 / 6;
}
.touche104
{
    text-align: center;
    grid-area: 12 / 6 / 12 / 7;
}
.footer
{
    /* 4 ere ligne de rangé / 1 ere ligne de colonne jusquà la 4 ligne de rangée jusqu'à la dernière ligne de colonne*/
    text-align: center;
    grid-area: 13 / 1 / 13 / -1;
    background: rgba(125, 125, 125, 1);
}