/****************************************************
 * DAMIER FMJD – THÈME BOIS
 ****************************************************/

.damier {
    width: 500px;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    border: 6px solid #3a2f1f;
    background: #3a2f1f;
    box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

/****************************************************
 * CASES
 ****************************************************/

.square {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Bois clair */
.light {
    background:
        linear-gradient(45deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%),
        repeating-linear-gradient(90deg, #e8d3a0 0px, #e8d3a0 10px, #e0c894 10px, #e0c894 20px);
    background-size: cover;
}

/* Bois foncé */
.dark {
    background:
        linear-gradient(45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 60%),
        repeating-linear-gradient(90deg, #8b6a3e 0px, #8b6a3e 10px, #7a5c34 10px, #7a5c34 20px);
    background-size: cover;
    cursor: pointer;
}

/****************************************************
 * PIONS
 ****************************************************/

.jeton {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: 10%;
    left: 10%;
}

/* Pion blanc */
.jeton-blanc {
    background: radial-gradient(circle at 30% 30%, #ffffff, #d0d0d0);
    border: 2px solid #aaa;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.4);
}

/* Pion noir */
.jeton-noir {
    background: radial-gradient(circle at 30% 30%, #222, #000);
    border: 2px solid #e0e0e0;
    box-shadow: 0 0 4px rgba(255,255,255,0.4);
}

/****************************************************
 * DAMES
 ****************************************************/

.jeton-dame-blanc {
    background: radial-gradient(circle at 30% 30%, #ffffff, #d0d0d0);
    border: 3px solid #aaa;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.4);
    position: relative;
}

.jeton-dame-blanc::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='35' fill='none' stroke='%23666' stroke-width='8'/><circle cx='50' cy='50' r='20' fill='%23666'/></svg>");
}

.jeton-dame-noir {
    background: radial-gradient(circle at 30% 30%, #222, #000);
    border: 3px solid #e0e0e0;
    box-shadow: 0 0 4px rgba(255,255,255,0.4);
    position: relative;
}

.jeton-dame-noir::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='35' fill='none' stroke='%23ddd' stroke-width='8'/><circle cx='50' cy='50' r='20' fill='%23ddd'/></svg>");
}
/****************************************************
 * NUMÉROTATION FMJD
 ****************************************************/

.dark {
    position: relative;
}

.case-numero {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 11px;
    font-weight: bold;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 0 2px rgba(0,0,0,0.6);
    pointer-events: none; /* ne gêne pas les clics */
}