/**
 * Bandes de fractions — styles des pièces
 * (styles communs dans public/css/materiel-commun.css)
 * Une couleur par dénominateur, largeur proportionnelle à la valeur (unité = 480 px).
 */

.mn-piece.fr-bar {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
}

.fr-d1 {
    background: #4a69bd;
    border: 2px solid #2c4a94;
}
.fr-d2 {
    background: #e55039;
    border: 2px solid #b03222;
}
.fr-d3 {
    background: #fa983a;
    border: 2px solid #c46f13;
}
.fr-d4 {
    background: #38ada9;
    border: 2px solid #227875;
}
.fr-d5 {
    background: #8e44ad;
    border: 2px solid #66307d;
}
.fr-d6 {
    background: #6ab04c;
    border: 2px solid #43823a;
}
.fr-d8 {
    background: #b71540;
    border: 2px solid #820e2d;
}
.fr-d10 {
    background: #079992;
    border: 2px solid #04645f;
}
.fr-d12 {
    background: #60a3bc;
    border: 2px solid #3d7a91;
}

/* Bande unité de référence, épinglée en haut du plateau */
.fr-ref {
    position: absolute;
    top: 70px;
    left: 24px;
    width: 480px;
    height: 34px;
    box-sizing: border-box;
    border: 2px dashed var(--primary-color, #4a69bd);
    border-radius: 6px;
    background: rgba(74, 105, 189, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--primary-color, #4a69bd);
    font-weight: 600;
    pointer-events: none;
}

/* Swatches de la palette */
.fr-swatch {
    display: inline-block;
    height: 14px;
    border-radius: 3px;
}