.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 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;
}
.touche05
{
    text-align: center;
    grid-area: 2 / 7 / 2 / 8;
}
.touche06
{
    text-align: center;
    grid-area: 2 / 8 / 2 / 9;
}
.touche07
{
    text-align: center;
    grid-area: 2 / 9 / 2 / 10;
}
.touche08
{
    text-align: center;
    grid-area: 2 / 10 / 2 / 11;
}
.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;
}
.touche15
{
    text-align: center;
    grid-area: 3 / 7 / 3 / 8;
}
.touche16
{
    text-align: center;
    grid-area: 3 / 8 / 3 / 9;
}
.touche17
{
    text-align: center;
    grid-area: 3 / 9 / 3 / 10;
}
.touche18
{
    text-align: center;
    grid-area: 3 / 10 / 3 / 11;
}
.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;
}
.touche25
{
    text-align: center;
    grid-area: 4 / 7 / 4 / 8;
}
.touche26
{
    text-align: center;
    grid-area: 4 / 8 / 4 / 9;
}
.touche27
{
    text-align: center;
    grid-area: 4 / 9 / 4 / 10;
}
.touche28
{
    text-align: center;
    grid-area: 4 / 10 / 4 / 11;
}
.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;
}
.touche35
{
    text-align: center;
    grid-area: 5 / 7 / 5 / 8;
}
.touche36
{
    text-align: center;
    grid-area: 5 / 8 / 5 / 9;
}
.touche37
{
    text-align: center;
    grid-area: 5 / 9 / 5 / 10;
}
.touche38
{
    text-align: center;
    grid-area: 5 / 10 / 5 / 11;
}
.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;
}
.touche45
{
    text-align: center;
    grid-area: 6 / 7 / 6 / 8;
}
.touche46
{
    text-align: center;
    grid-area: 6 / 8 / 6 / 9;
}
.touche47
{
    text-align: center;
    grid-area: 6 / 9 / 6 / 10;
}
.touche48
{
    text-align: center;
    grid-area: 6 / 10 / 6 / 11;
}
.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;
}
.touche55
{
    text-align: center;
    grid-area: 7 / 7 / 7 / 8;
}
.touche56
{
    text-align: center;
    grid-area: 7 / 8 / 7 / 9;
}
.touche57
{
    text-align: center;
    grid-area: 7 / 9 / 7 / 10;
}
.touche58
{
    text-align: center;
    grid-area: 7 / 10 / 7 / 11;
}
.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;
}
.touche65
{
    text-align: center;
    grid-area: 8 / 7 / 8 / 8;
}
.touche66
{
    text-align: center;
    grid-area: 8 / 8 / 8 / 9;
}
.touche67
{
    text-align: center;
    grid-area: 8 / 9 / 8 / 10;
}
.touche68
{
    text-align: center;
    grid-area: 8 / 10 / 8 / 11;
}
.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;
}
.touche75
{
    text-align: center;
    grid-area: 9 / 7 / 9 / 8;
}
.touche76
{
    text-align: center;
    grid-area: 9 / 8 / 9 / 9;
}
.touche77
{
    text-align: center;
    grid-area: 9 / 9 / 9 / 10;
}
.touche78
{
    text-align: center;
    grid-area: 9 / 10 / 9 / 11;
}
.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;
}
.touche85
{
    text-align: center;
    grid-area: 10 / 7 / 10 / 8;
}
.touche86
{
    text-align: center;
    grid-area: 10 / 8 / 10 / 9;
}
.touche87
{
    text-align: center;
    grid-area: 10 / 9 / 10 / 10;
}
.touche88
{
    text-align: center;
    grid-area: 10 / 10 / 10 / 11;
}
.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;
}
.touche95
{
    text-align: center;
    grid-area: 11 / 7 / 11 / 8;
}
.touche96
{
    text-align: center;
    grid-area: 11 / 8 / 11 / 9;
}
.touche97
{
    text-align: center;
    grid-area: 11 / 9 / 11 / 10;
}
.touche98
{
    text-align: center;
    grid-area: 11 / 10 / 11 / 11;
}
.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;
}
.touche105
{
    text-align: center;
    grid-area: 12 / 7 / 12 / 8;
}
.touche106
{
    text-align: center;
    grid-area: 12 / 8 / 12 / 9;
}
.touche107
{
    text-align: center;
    grid-area: 12 / 9 / 12 / 10;
}
.touche108
{
    text-align: center;
    grid-area: 12 / 10 / 12 / 11;
}

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