.app {
    --tapis-width: 30rem;
    --tapis-height: calc(var(--tapis-width) * 9 / 27);

    --paddingH: calc(var(--tapis-width) / 27 / 2);
    --paddingV: calc(var(--tapis-height) / 9 / 2);

    --taille-jeton: min(calc((var(--tapis-height) - 2 * var(--paddingV)) / 9), calc((var(--tapis-width) - 2 * var(--paddingH)) / 27));

    font-size: calc(16 * var(--taille-jeton) / 19.750);

}

.tapis {
    display: grid;
    grid-template-columns: repeat(27, 1fr);
    grid-template-rows: repeat(9, 1fr);
    padding: var(--paddingV) var(--paddingH);
    position: relative;
    box-sizing: border-box;
}

.visuelTapis {
    position: relative;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-auto-flow: column dense;
    z-index: -1;
}

/* Bloc qui permet que chaque modification sur le tapis des 
boutons soit fait également sur le tapis visuel et vice versa*/
.tapis,
.visuelTapis {
    justify-self: center;
    grid-row: 1/2;
    grid-column: 1/2;
    width: var(--tapis-width);
    height: var(--tapis-height);
    font-family: 'Times New Roman', Times, serif;
    gap: 1px;
}

.num0 {
    grid-column: 1/2;
    grid-row: 3/6;
}

.numero:nth-of-type(3n+2) {
    grid-row: 3/4;
}

.numero:nth-of-type(3n+1) {
    grid-row: 4/5;
}

.numero:nth-of-type(3n) {
    grid-row: 5/6;
}

.num0,
.numero,
.vColonne,
.vDouzaine,
.vChancesSimples {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid white 1px;
    background-color: #347642;
}

.visuelTapis span {
    rotate: -90deg;
    font-size: 1.3em;
}

.vColonne span {
    font-size: 0.875em;
    text-wrap: nowrap;
}

.vDouzaine span {
    rotate: 0deg;
    font-size: 0.875em;
}

.vColonne {
    grid-column: 14/15;
}

.vDouzaine {
    grid-row: 2/3;
    grid-column: span 4;
}

.vChancesSimples {
    grid-row: 1/2;
    grid-column: span 2;
}

.vChancesSimples span {
    font-size: 0.875em;
    rotate: 0deg;
}

#P12 {
    grid-column: 3/10;
}

#M12 {
    grid-column: 11/18;
}

#D12 {
    grid-column: 19/26;
}

#manque {
    grid-column: 3/6;
}

#pair {
    grid-column: 7/10;
}

#rouge {
    grid-column: 11/14;
}

#noir {
    grid-column: 15/18;
}

#impair {
    grid-column: 19/22;
}

#passe {
    grid-column: 23/26;
}

.mise {
    text-align: center;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.tapis .jeton {
    height: var(--taille-jeton);
    position: absolute;
    width: var(--taille-jeton);

    clip-path: circle(50%);

    &:nth-of-type(1) {
        bottom: calc(50% - var(--taille-jeton) / 2);
        left: calc(50% - var(--taille-jeton) / 2);
        z-index: 1;
    }

    &:nth-of-type(2) {
        bottom: calc(3.5px + 50% - var(--taille-jeton) / 2);
        left: calc(1.5px + 50% - var(--taille-jeton) / 2);
        z-index: 2;
    }
}

.tapis .nbJeton {
    align-items: center;
    bottom: calc(3.5px + 50% - var(--taille-jeton) / 2);
    color: rgb(255, 180, 60);
    display: flex;
    font-size: 0.8em;
    font-weight: bold;
    height: var(--taille-jeton);
    justify-content: center;
    left: calc(1.5px + 50% - var(--taille-jeton) / 2);
    position: absolute;
    width: var(--taille-jeton);
    z-index: 3;
}

.gomme img {
    width: 2rem;
    height: 2rem;
}

.gommeActive {
    background-color: #b78383;
}


/* NE JAMAIS SUPPRIMER!!!!!!!!!!!!!!!!!!!!!!!! c'est pour le debug */

/* .plein {background-color: #ffc2c2;}
.cheval {background-color: #fffbb6;}
.carre {background-color: #bdffba;}
.trans {background-color: #bcdfff;}
.sixain {background-color: #ebb9ff;}
.colonne {background-color: #9a9abb;}
.douzaine {background-color: #d2f09b;}
.cSimple {background-color: #c5a6f9;}
.douzCheval {background-color: #bb847b;}
.colCheval {background-color: #dfb690;} */