.conteneur{
    display: flex;
    justify-content: center;
    align-content:  center;
    text-align: center;
    font-size: 24px;
    color: white;
    display: grid;
    grid-template-columns: repeat(19,50px);
    grid-template-rows: repeat(15,50px);
    grid-template-areas: 
    "a a a a a a a a a a a a a a a a . b b"
    "a a a a a a a a a a a a a a a a . b b"
    ". . . . . . . . . . . . . . . . . b b"
    "d d . e e e e e e e e e e . f f . b b"
    "d d . e e e e e e e e e e . f f . b b"
    "d d . . . . . . . . . . . . f f . b b"
    "d d . h h . r r r r r r r . f f . b b"
    "d d . h h . r r r r r r r . f f . b b"
    "d d . h h . r r r r r r r . f f . b b"
    "d d . h h . . . . . . . . . . . . b b"
    "d d . h h . g g g g g g g g g g . b b"
    "d d . h h . g g g g g g g g g g . b b"
    "d d . . . . . . . . . . . . . . . . ."
    "d d . c c c c c c c c c c c c c c c c"
    "d d . c c c c c c c c c c c c c c c c"
    ;
}

.a{
    grid-area: a;
    background-color:#d5e8d4;
    border: 2px groove green;
}
.b{
    grid-area: b;
    background-color:#d5e8d4;
    border: 2px groove green;
}
.c{
    grid-area: c;
    background-color:#d5e8d4;
    border: 2px groove green;
}
.d{
    grid-area: d;
    background-color:#d5e8d4;
    border: 2px groove green;
}
.e{
    grid-area: e;
    background-color:#dae8fc;
    border: 2px groove #7494c3;
}
.f{
    grid-area: f;
    background-color:#dae8fc;
    border: 2px groove #7494c3;
}
.g{
    grid-area: g;
    background-color:#dae8fc;
    border: 2px groove #7494c3;
}
.h{
    grid-area: h;
    background-color:#dae8fc;
    border: 2px groove #7494c3;
}
.r{
    grid-area: r;
    background-color:#ffe6cc;
    border: 2px groove #d79c03;
}