.main {
    display: flex;
    --s: 40px;
    /* size  */
    --m: 1px;
    /* margin */
    --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);

    /*taille container*/
    --taille: calc(var(--s) * 9 + var(--m) * 18);
    min-width: var(--taille);

}

.button {
    display: inline-block;
    padding: 5px 15px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #141414;
    background-color: #ebcc78;
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px #999;
    user-select: none;
    margin: 10px;
}



.button:active {
    background-color: #ebcc78;
    box-shadow: 0 2px #666;
    transform: translateY(3px);
}

.container {
    font-size: 0;
    /* disable white space between inline block element */
    width: var(--taille);
    left: calc((100% - var(--taille))/2);
    position: relative;
}

#touches {
    margin-top: 50px;
    display: grid;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    user-select: none;
    gap: 10px;
}

.themetouche:active {
    background-color: #ebcc78;
    box-shadow: 0 2px #666;
    transform: translateY(3px);
}

.themetouche {
    cursor: pointer;
    height: 30px;
    width: 20px;
    font-size: 20px;
    border: 1px solid;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 5px #999;
}

#op {
    height: 40px;
    width: 30px;
    font-size: 25px;
}

#g1 {
    grid-column: 1;
    grid-row: 1;
}

#g2 {
    grid-column: 2;
    grid-row: 1;
}

#g3 {
    grid-column: 3;
    grid-row: 1;
}

#g4 {
    grid-column: 4;
    grid-row: 1;
}

#g5 {
    grid-column: 1;
    grid-row: 2;
}

#g6 {
    grid-column: 2;
    grid-row: 2;
}

#g7 {
    grid-column: 3;
    grid-row: 2;
}

#g8 {
    grid-column: 4;
    grid-row: 2;
}


#g9 {
    grid-column: 1;
    grid-row: 3;
}

#g10 {
    grid-column: 2;
    grid-row: 3;
}

#g11 {
    grid-column: 3;
    grid-row: 3;
}

#g12 {
    grid-column: 4;
    grid-row: 3;
}



#d1 {
    grid-column: 6;
    grid-row: 1;
}

#d2 {
    grid-column: 7;
    grid-row: 1;
}

#d3 {
    grid-column: 8;
    grid-row: 1;
}

#d4 {
    grid-column: 9;
    grid-row: 1;
}

#d5 {
    grid-column: 6;
    grid-row: 2;
}

#d6 {
    grid-column: 7;
    grid-row: 2;
}

#d7 {
    grid-column: 8;
    grid-row: 2;
}

#d8 {
    grid-column: 9;
    grid-row: 2;
}


#d9 {
    grid-column: 6;
    grid-row: 3;
}

#d10 {
    grid-column: 7;
    grid-row: 3;
}

#d11 {
    grid-column: 8;
    grid-row: 3;
}

#d12 {
    grid-column: 9;
    grid-row: 3;
}

#op {
    grid-column: 5;
    grid-row: 2;
}

.container div {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s) * 1.1547 - var(--s) * 0.2);
    display: inline-block;
    font-size: initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    margin-bottom: calc(var(--m) - var(--s) * 0.2885);
    background-color: rgb(250, 239, 143);
    text-align: center;
    padding: calc(var(--s) * 0.2) 0 0;
    font-size: 20px;
    user-select: none;

}

.container::before {
    content: "";
    width: calc(var(--s) / 2 + var(--m));
    float: left;
    height: 120%;
    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));

}

.container::after {
    box-shadow: 0 5px #999;
}

.vide {
    visibility: hidden;
}

#phrase {
    margin: 10px;
    font-size: larger;
    text-align: center;
}

#entete {
    text-align: center;
}

.carre {
    display: inline-block;
    width: 15px;
    height: 15px;
    cursor: pointer;

}