/* /Components/Pages/Harmonisations.razor.rz.scp.css */
/* Liste de la tonalité : courte (12 notes) */
select.small[b-3l0rxvicke] {
    width: 110px;
}

/* ---------- Gamme ---------- */
.scale[b-3l0rxvicke] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-bottom: .3rem;
}

.scale-label[b-3l0rxvicke] {
    font-weight: 600;
}

.scale-notes[b-3l0rxvicke] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

/* ---------- Tableau des degrés (pleine largeur sous les réglages) ---------- */
.degrees[b-3l0rxvicke] {
    border-collapse: collapse;
    width: 100%;
    max-width: 760px;
}

/* En-tête du tableau toujours visible pendant le défilement */
.degrees th[b-3l0rxvicke] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #2a2624;
    text-align: left;
    font-size: .85rem;
    font-weight: 600;
    color: #999;
    padding: .2rem .8rem;
    border-bottom: 1px solid #444;
}

.degrees td[b-3l0rxvicke] {
    padding: .22rem .8rem;
    border-bottom: 1px solid #3a3533;
    vertical-align: middle;
}

.degrees tbody tr[b-3l0rxvicke] {
    cursor: pointer;
    transition: background .12s;
}

.degrees tbody tr:hover[b-3l0rxvicke] {
    background: #36302d;
}

.degrees tbody tr.selected[b-3l0rxvicke] {
    background: #4a3f30;
    box-shadow: inset 4px 0 0 #d9b77a;
}

.roman[b-3l0rxvicke] {
    font-weight: 700;
    color: #d9b77a;
    width: 3.5rem;
}

.tones[b-3l0rxvicke] {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.dash[b-3l0rxvicke] {
    color: #777;
    margin: 0 .3rem;
}

.symbol[b-3l0rxvicke] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.formula[b-3l0rxvicke] {
    white-space: nowrap;
}

/* Pastille de degré (1, b3, 5, b7…) : même couleur que sur le manche */
.chip[b-3l0rxvicke] {
    display: inline-block;
    min-width: 1.8rem;
    padding: 0 .4rem;
    margin-right: .25rem;
    border-radius: 999px;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: #111;
    border: 2px solid rgba(255, 255, 255, .85);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.cards[b-tty2rlwp7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.card[b-tty2rlwp7v] {
    flex: 0 1 320px;
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.card:hover[b-tty2rlwp7v] {
    border-color: #d9b77a;
    transform: translateY(-2px);
}

.card h2[b-tty2rlwp7v] {
    margin: 0 0 .4rem;
    font-size: 1.15rem;
    color: #d9b77a;
}

.card p[b-tty2rlwp7v] {
    margin: 0;
    color: #bbb;
}
/* /Components/Pages/NotesAccords.razor.rz.scp.css */
/* Liste de la fondamentale : courte (12 notes) */
select.small[b-rh576tn2qs] {
    width: 110px;
}

/* ---------- Formule de l'accord ---------- */
.formula[b-rh576tn2qs] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .2rem 0 .1rem;
}

.formula-line[b-rh576tn2qs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.symbol[b-rh576tn2qs] {
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    min-width: 3.5ch;
}

.equals[b-rh576tn2qs] {
    font-size: 1.4rem;
    color: #999;
    margin-right: .2rem;
}

/* Pastille de degré (1, b3, 5, b7…) : même couleur que sur le manche */
.chip[b-rh576tn2qs] {
    min-width: 2.2rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    border: 2px solid rgba(255, 255, 255, .85);
}

.notes[b-rh576tn2qs] {
    font-size: 1.35rem;
    font-weight: 700;
}

.dash[b-rh576tn2qs] {
    color: #777;
}
/* /Components/Pages/ReperageNotesManche.razor.rz.scp.css */
/* Styles propres à la page « Repérage des notes ».
   Le manche est dans Components/Shared/FretboardView.razor.css,
   le panneau de réglages (.panel, .field, .notation) dans wwwroot/app.css. */
/* /Components/Shared/FretboardView.razor.rz.scp.css */
.fretboard[b-g4wba5nnkt] {
    position: relative;
    width: 100%;                      /* toute la largeur de l'écran */
    container-type: inline-size;      /* permet de dimensionner les pastilles en "cqw" */
    overflow: hidden;
}

.fretboard img[b-g4wba5nnkt] {
    display: block;
    width: 100%;
    height: auto;
}

.pastille[b-g4wba5nnkt] {
    position: absolute;
    width: 1.55cqw;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62cqw;
    font-weight: 700;
    letter-spacing: -.02cqw;
    color: #111;
    border: .12cqw solid rgba(255, 255, 255, .9);
    box-shadow: 0 .1cqw .35cqw rgba(0, 0, 0, .7);
    cursor: default;
    animation: pop-b-g4wba5nnkt .25s ease-out;
}

/* Noms de 3 caractères (Bbb, D##…) : texte un peu plus petit */
.pastille.long[b-g4wba5nnkt] {
    font-size: .5cqw;
}

.pastille:hover[b-g4wba5nnkt] {
    transform: translate(-50%, -50%) scale(1.25);
    z-index: 2;
}

@keyframes pop-b-g4wba5nnkt {
    from { transform: translate(-50%, -50%) scale(0); }
    to   { transform: translate(-50%, -50%) scale(1); }
}