:root {
    --fond:#f3f1e9;
    --papier:#fffdf8;
    --encre:#193e42;
    --muted:#657572;
    --trait:#d3dcd2;
    --a:#b57533;
    --b:#4478a5;
    font:14px/1.4 system-ui,sans-serif;
    color:var(--encre);
    background:var(--fond)}
* {
    box-sizing:border-box}
body {
    margin:0;
    height:100dvh;
    overflow:hidden}
button,input,select,textarea {
    font:inherit;
    color:inherit}
button {
    border:1px solid var(--trait);
    background:var(--papier);
    border-radius:6px;
    padding:8px 10px;
    cursor:pointer}
button:hover {
    background:#e9efe2;
    border-color:#899e86}
button:disabled {
    opacity:.4;
    cursor:default}
.primaire {
    background:var(--encre);
    color:white;
    border-color:var(--encre)}
.primaire:hover {
    background:#2b6065;
    color:white}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.fin:focus-visible {
    outline:3px solid #b58c39;
    outline-offset:2px}
header {
    height:78px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 22px;
    border-bottom:1px solid var(--trait)}
.signature {
    font-size:9px;
    letter-spacing:.15em}
h1 {
    font:normal 29px Georgia,serif;
    margin:1px 0}
h1 small {
    font:10px system-ui;
    color:var(--muted)}
h2 {
    font:normal 22px Georgia,serif;
    margin:8px 0 15px}
h3 {
    font-size:13px;
    margin:17px 0 9px}
h3 small {
    font-size:10px;
    font-weight:normal;
    color:var(--muted);
    margin-left:5px}
.outils {
    display:flex;
    gap:7px}
.outils button {
    font-size:12px}
.transport {
    height:60px;
    display:flex;
    gap:9px;
    align-items:center;
    padding:8px 22px;
    background:#e3eadf;
    border-bottom:1px solid var(--trait)}
.transport label {
    display:flex;
    gap:4px;
    align-items:center;
    white-space:nowrap;
    font-size:12px}
.transport input[type=number] {
    width:62px;
    margin:0}
.transport select {
    width:150px;
    margin:0}
.transport #lecture {
    margin-left:auto;
    font-size:11px;
    color:var(--muted)}
main {
    height:calc(100dvh - 138px);
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(370px,1fr)}
.partition {
    min-height:0;
    overflow:auto;
    padding:15px 18px;
    overscroll-behavior:contain}
.bandeau {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap}
.bandeau label {
    display:flex;
    align-items:center;
    gap:6px;
    margin:0}
.bandeau select {
    width:auto;
    margin:0;
    font-size:12px}
.bandeau>select {
    width:auto;
    font-size:12px}
.legende {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    color:var(--muted);
    font-size:10px;
    margin:12px 0}
.legende span:last-child {
    margin-left:auto}
.grille {
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:6px;
    margin:8px 0 17px}
.case {
    border:1px solid var(--trait);
    border-radius:7px;
    background:var(--papier);
    min-width:0;
    overflow:hidden}
.case.selection {
    outline:2px solid var(--encre);
    outline-offset:1px}
.case.enLecture {
    box-shadow:0 0 0 3px #c8b04e;
    background:#e8efbf}
.case .numero {
    display:flex;
    justify-content:space-between;
    font-size:9px;
    padding:5px 6px;
    color:var(--muted);
    background:#eaf0e7}
.case .zone {
    display:block;
    width:100%;
    border-radius:0;
    border:0;
    border-top:1px solid var(--trait);
    padding:7px 3px;
    min-height:35px;
    font-size:10px;
    text-align:center;
    overflow-wrap:anywhere}
.case .harmonie {
    border-top:3px solid var(--a)}
.case .harmonie.mode1 {
    border-top-color:var(--b);
    background:#edf3f9}
.case .harmonie.mode0 {
    background:#faf1e3}
.case .harmonie.commun {
    border-top-color:#779560;
    background:#eef4df}
.zone.vide {
    color:#8c9691;
    background:repeating-linear-gradient(135deg,transparent,transparent 5px,#b8c6b812 5px,#b8c6b812 7px)}
.zone.reception {
    background:#d7e3b8!important;
    box-shadow:inset 0 0 0 2px #829755}
.zone.rythme {
    font-size:13px;
    letter-spacing:1px}
.notesCase {
    display:flex;
    border-top:1px solid var(--trait);
    min-height:33px}
.notesCase button {
    border:0;
    border-right:1px solid #d3dcd266;
    border-radius:0;
    background:transparent;
    padding:7px 1px;
    min-width:0;
    font-size:8px;
    flex:1}
.notesCase button.vide {
    color:#99a198}
.case .harmonie small {
    display:block;
    font-size:8px;
    color:var(--muted)}
#inspecteur {
    border:1px solid var(--trait);
    border-radius:9px;
    background:var(--papier);
    padding:13px 16px}
.enteteEdition {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap}
.enteteEdition h2 {
    margin:0;
    font-size:21px}
.enteteEdition span {
    font-size:11px;
    color:var(--muted)}
.editionLigne {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:end;
    margin:8px 0}
.editionLigne label {
    flex:1;
    min-width:80px;
    margin:0}
.editionLigne label.court {
    flex:0 0 auto}
.editionLigne button {
    font-size:11px}
.notesEdition {
    display:flex;
    gap:4px;
    margin:10px 0}
.notesEdition button {
    flex:1;
    min-width:0;
    font-size:12px}
.notesEdition button.active {
    background:#dfebd6;
    border-color:#72876a}
.notesEdition small {
    display:block;
    color:var(--muted);
    font-size:9px}
.aide {
    font-size:11px;
    color:var(--muted);
    line-height:1.5}
.raison {
    font-size:11px;
    margin:8px 0;
    padding-left:8px;
    border-left:2px solid #94aa7b}
#message {
    font-size:12px;
    background:#e3ecdd;
    padding:9px 12px;
    border-radius:5px;
    min-height:35px}
aside {
    min-height:0;
    border-left:1px solid var(--trait);
    background:var(--papier);
    display:flex;
    flex-direction:column}
nav {
    display:flex;
    gap:5px;
    padding:12px;
    border-bottom:1px solid var(--trait)}
nav button {
    flex:1;
    font-size:12px;
    padding:8px 3px}
nav button[aria-pressed=true] {
    background:var(--encre);
    color:white}
.panneau {
    min-height:0;
    flex:1;
    overflow:auto;
    padding:14px 20px 25px;
    overscroll-behavior:contain}
.titrePalette {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px}
.titrePalette h2,.titrePalette h3 {
    margin:0}
.titrePalette button {
    font-size:10px;
    max-width:48%}
.titrePalette label {
    display:flex;
    gap:5px;
    align-items:center}
.titrePalette select {
    width:60px;
    margin:0}
label {
    display:block;
    font-size:12px;
    margin:10px 0}
input[type=number],input:not([type]),select,textarea {
    display:block;
    width:100%;
    padding:7px;
    border:1px solid var(--trait);
    background:#fffdf8;
    border-radius:5px;
    margin-top:4px}
textarea {
    resize:vertical;
    white-space:pre;
    overflow:auto;
    font-family:monospace;
    font-size:13px}
.deux,.trois {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px}
.trois {
    grid-template-columns:repeat(3,minmax(0,1fr))}
.choixSource {
    display:flex;
    gap:12px}
.choixSource>label {
    flex:1}
.tuiles {
    display:grid;
    gap:7px}
.tuiles.accords {
    grid-template-columns:repeat(4,minmax(0,1fr))}
.tuiles.rythmes {
    grid-template-columns:repeat(2,minmax(0,1fr))}
.tuiles.notes {
    grid-template-columns:repeat(4,minmax(0,1fr))}
.tuile {
    touch-action:none;
    user-select:none;
    min-height:48px;
    font-size:13px;
    cursor:grab;
    padding:8px 5px}
.tuile small {
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:3px}
.tuile.mode0 {
    border-top:3px solid var(--a);
    background:#fbf1e4}
.tuile.mode1 {
    border-top:3px solid var(--b);
    background:#eef4fa}
.tuile.choisie {
    outline:2px solid #77965c;
    outline-offset:1px}
.tuile.rythme {
    font-size:19px;
    letter-spacing:2px}
.tuile.rythme small {
    letter-spacing:0;
    font-size:9px}
.actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:15px 0}
.actions button {
    font-size:12px}
.actions .primaire {
    grid-column:1/-1}
.fin {
    height:25px;
    position:relative;
    touch-action:none;
    cursor:ew-resize;
    --position:50%}
.fin:before {
    content:'';
    position:absolute;
    top:11px;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(to right,#7c966b var(--position),#d9e0d2 var(--position))}
.fin:after {
    content:'';
    position:absolute;
    top:7px;
    left:clamp(0px,var(--position),calc(100% - 10px));
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--encre)}
details {
    margin:15px 0;
    border-top:1px solid var(--trait);
    padding-top:12px}
summary {
    cursor:pointer;
    font-size:12px}
a {
    color:var(--encre);
    font-size:12px}
table {
    width:100%;
    font-size:11px;
    border-collapse:collapse;
    margin:12px 0}
th,td {
    padding:7px 4px;
    border-bottom:1px solid var(--trait);
    text-align:left}
.modeChoix {
    border-top:3px solid var(--a);
    padding:8px}
.modeChoix:nth-child(2) {
    border-top-color:var(--b)}
.surTitre {
    font-size:10px;
    letter-spacing:.1em}
.puce {
    display:inline-block;
    border:1px solid var(--trait);
    padding:3px 6px;
    border-radius:15px;
    font-size:10px;
    margin:3px}
.avertissement {
    font-size:11px;
    background:#fbefd4;
    border-left:3px solid #bb9552;
    padding:9px}
#fantome {
    position:fixed;
    pointer-events:none;
    z-index:1000;
    padding:10px 14px;
    background:var(--encre);
    color:white;
    border-radius:7px;
    font-size:12px;
    box-shadow:0 5px 18px #0003;
    max-width:220px}
[hidden] {
    display:none!important}
@media(max-width:1150px) {
    main {
        grid-template-columns:minmax(0,1fr) 370px}
    .partition {
        padding:12px}
    .grille {
        grid-template-columns:repeat(4,minmax(0,1fr))}
    .transport {
        gap:6px}
    .transport #lecture {
        display:none}
    .panneau {
        padding:12px 15px}
    .outils {
        gap:4px}
    .outils button {
        font-size:11px}
}
@media(max-width:760px) {
    header {
        height:68px;
        padding:8px 12px}
    h1 {
        font-size:22px}
    .signature {
        font-size:8px}
    .outils {
        flex-wrap:wrap;
        max-width:190px;
        justify-content:end}
    .outils button {
        padding:5px 7px;
        font-size:10px}
    .transport {
        height:100px;
        padding:8px 12px;
        flex-wrap:wrap;
        align-content:center}
    .transport select {
        width:130px;
        font-size:12px}
    .transport button {
        font-size:12px;
        padding:7px 10px}
    .transport label {
        font-size:11px}
    main {
        height:calc(100dvh - 168px);
        grid-template-columns:1fr;
        grid-template-rows:minmax(140px,1fr) min(42dvh,360px)}
    aside {
        border-left:0;
        border-top:1px solid var(--trait)}
    .partition {
        padding:8px 10px}
    .grille {
        gap:5px}
    .bandeau {
        gap:7px}
    .bandeau label {
        font-size:10px}
    .legende {
        gap:7px;
        font-size:8px}
    nav {
        padding:7px}
    nav button {
        font-size:11px;
        padding:6px}
    .panneau {
        padding:10px 14px 20px}
    #inspecteur {
        padding:10px}
    .case .zone {
        min-height:30px}
    .tuiles.accords {
        grid-template-columns:repeat(4,minmax(0,1fr))}
    .tuiles.notes {
        grid-template-columns:repeat(5,minmax(0,1fr))}
    .tuiles.rythmes {
        grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-height:550px) and (min-width:500px) {
    header {
        height:52px}
    .transport {
        height:75px}
    main {
        height:calc(100dvh - 127px);
        grid-template-columns:minmax(0,1fr) 290px;
        grid-template-rows:1fr}
    aside {
        border-top:0;
        border-left:1px solid var(--trait)}
    .grille {
        grid-template-columns:repeat(4,minmax(0,1fr))}
    .tuiles.rythmes {
        grid-template-columns:repeat(2,minmax(0,1fr))}
    .tuiles.notes {
        grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Les rythmes longs restent accessibles dans l’inspecteur sans élargir la page. */
.notesEdition { flex-wrap: wrap; }
.notesEdition button { flex: 1 1 55px; }
.notesCase { overflow-x: auto; }
.notesCase button { min-width: 12px; }

/* Contrôles séparés des tuiles transportables pour éviter les dépôts lors d’un retrait. */
.motifPalette {display:flex;align-items:stretch;gap:3px;min-width:0}
.motifPalette .tuile {flex:1;min-width:0}
.retirerMotif {padding:4px 8px;font-size:20px}
.accompagnementEdition {margin:10px 0;border:1px solid var(--trait);border-radius:8px}
.gestesAccompagnement {display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.gestesAccompagnement label {flex:1 1 115px}
.jeuAccompagnement {display:block;text-align:center;font-size:9px;padding:3px}
#ambitus fieldset {min-width:0;border:1px solid var(--trait);border-radius:8px}
#ambitus input {width:72px}

/* L’aide reste accessible avant de commencer, sans recouvrir la grille. */
.aideGuide {display:inline-flex;align-items:center;padding:.4em .7em;border-radius:6px;color:inherit;text-underline-offset:.2em;font-weight:600}

.materiauxConstruction button{margin:2px}.materiauxConstruction{max-height:55vh;overflow:auto}.editionLigne [aria-pressed=true]{font-weight:bold;outline:2px solid currentColor}