:root { --fond:#f4f1e9; --papier:#fffdf8; --encre:#193c40; --second:#667774; --trait:#d8dfd7; --a:#b36c28; --b:#416c9c; font:15px/1.45 system-ui,sans-serif; color:var(--encre); background:var(--fond); }
* { box-sizing:border-box; }
body { margin:0; height:100dvh; overflow:hidden; }
button,input,select { font:inherit; }
button { border:1px solid var(--trait); background:var(--papier); color:var(--encre); border-radius:7px; padding:9px 12px; cursor:pointer; }
button:hover { border-color:var(--encre); background:#e8eee5; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,.fin:focus-visible { outline:3px solid #c48d42; outline-offset:2px; }
.primaire { background:var(--encre); color:#fffdf8; border-color:var(--encre); }
.primaire:hover { background:#28585c; color:white; }
header { height:84px; display:flex; align-items:center; justify-content:space-between; padding:12px 26px; border-bottom:1px solid var(--trait); }
.signature,.surTitre { font-size:10px; letter-spacing:.16em; font-weight:650; }
h1 { font-family:Georgia,serif; font-size:29px; font-weight:normal; margin:1px 0 0; }
h1 small { font:10px system-ui,sans-serif; color:var(--second); }
h2 { font-family:Georgia,serif; font-size:24px; font-weight:normal; margin:6px 0 12px; }
h3 { font-size:15px; margin:20px 0 8px; }
.historique { display:flex; gap:6px; }
.transport { height:64px; display:flex; align-items:center; gap:9px; padding:9px 26px; background:#e6ece3; border-bottom:1px solid var(--trait); }
.transport select { width:140px; }
.transport input[type=number] { width:65px; padding:7px; }
.tempo,.boucle { display:flex; align-items:center; gap:5px; font-size:13px; }
#lecture { margin-left:auto; font-size:12px; color:var(--second); }
main { height:calc(100dvh - 148px); display:grid; grid-template-columns:minmax(0,1fr) 350px; }
.contenu { min-height:0; min-width:0; display:flex; flex-direction:column; }
nav { display:flex; gap:8px; align-items:center; padding:14px 24px; }
nav button { border-radius:30px; padding:7px 15px; }
nav button[aria-pressed=true] { color:white; background:var(--encre); }
nav span { margin-left:auto; font-size:11px; color:var(--second); }
.defilement { overflow:auto; min-height:0; flex:1; padding:8px 24px 24px; overscroll-behavior:contain; }
#message { margin:0; border-top:1px solid var(--trait); padding:9px 24px; font-size:12px; min-height:38px; background:#eaf0e7; }
aside { overflow:auto; border-left:1px solid var(--trait); background:var(--papier); padding:22px; overscroll-behavior:contain; }
.titreEdition { border-bottom:1px solid var(--trait); margin-bottom:15px; }
.titreEdition p { font-size:12px; color:var(--second); }
.partie { display:flex; gap:14px; align-items:baseline; margin:16px 0 10px; }
.partie h2 { margin:0; }
.partie span { color:var(--second); font-size:12px; }
.phrase { margin-bottom:18px; }
.entetePhrase { font-size:12px; margin:4px 0 7px; color:var(--second); display:flex; gap:9px; align-items:center; }
.entetePhrase b { color:var(--encre); font-family:Georgia,serif; font-size:23px; font-weight:normal; }
.mesures { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.carte { position:relative; text-align:left; display:flex; flex-direction:column; gap:9px; min-height:135px; padding:11px; border-top:3px solid var(--a); box-shadow:0 2px 4px #183b4005; }
.carte.mode1 { border-top-color:var(--b); }
.carte.mixte { border-top-color:#76946d; }
.carte.selection { outline:2px solid var(--encre); outline-offset:1px; }
.carte.enLecture { background:#d9eac7; box-shadow:inset 0 0 0 3px #7b9c57; }
.numero { font-size:11px; color:var(--second); display:flex; justify-content:space-between; width:100%; }
.accordsCarte { font-family:Georgia,serif; font-size:22px; line-height:1.2; }
.degresCarte { color:var(--second); font-size:10px; }
.rythmeCarte { font-size:13px; margin-top:auto; letter-spacing:2px; }
.notesCarte { font-size:10px; color:var(--second); overflow-wrap:anywhere; }
label { display:block; font-size:12px; margin:11px 0; }
input[type=text],input:not([type]),input[type=number],select { display:block; width:100%; border:1px solid var(--trait); border-radius:5px; background:#fffdf8; color:var(--encre); padding:8px; margin-top:4px; }
.transport select,.transport input { margin-top:0; }
.aide { color:var(--second); font-size:11px; line-height:1.55; }
.ligne { display:flex; gap:7px; align-items:center; }
.ligne>* { min-width:0; flex:1; }
.ligne button { font-size:12px; }
.editionNotes { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0; }
.note { font-size:12px; padding:8px; flex:1; min-width:50px; }
.note.active { background:#e1e9db; border-color:var(--encre); }
.note small { display:block; font-size:9px; color:var(--second); }
.fin { height:24px; position:relative; touch-action:none; cursor:ew-resize; --position:50%; }
.fin:before { content:''; position:absolute; left:0; right:0; top:11px; height:3px; background:linear-gradient(to right,#68896c var(--position),#dce2d6 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 { border-top:1px solid var(--trait); margin-top:24px; padding-top:15px; }
summary { cursor:pointer; font-size:14px; font-weight:600; }
.exports { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:14px 0; }
.exports button { font-size:12px; }
a { color:var(--encre); font-size:12px; }
.introduction { padding:8px 0 16px; }
.introduction p { margin:0; font-size:13px; color:var(--second); }
.modes { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.modeChoix { padding:17px; background:var(--papier); border:1px solid var(--trait); border-top:3px solid var(--a); border-radius:7px; }
.modeChoix:nth-child(2) { border-top-color:var(--b); }
.modeChoix h3 { margin:0; }
.actionsModes { display:flex; align-items:center; gap:15px; margin:15px 0 25px; }
.actionsModes span { font-size:11px; color:var(--second); }
table { width:100%; border-collapse:collapse; font-size:12px; margin:12px 0 20px; }
th,td { text-align:left; border-bottom:1px solid var(--trait); padding:10px 8px; }
th { color:var(--second); font-size:10px; text-transform:uppercase; }
.puces { display:flex; flex-wrap:wrap; gap:6px; }
.puce { font-size:12px; background:#e7eddf; border:1px solid #d4dec8; padding:5px 9px; border-radius:20px; }
.avertissement { border-left:3px solid #ba8646; background:#f8efdc; padding:10px 12px; font-size:12px; }
dialog { max-width:540px; width:calc(100% - 32px); border:1px solid var(--trait); border-radius:12px; padding:25px; color:var(--encre); background:var(--papier); }
dialog::backdrop { background:#142b32a0; }
[hidden] { display:none!important; }
@media(max-width:900px) { main { grid-template-columns:minmax(0,1fr) 290px; } aside { padding:15px; } nav span { display:none; } .defilement { padding:8px 15px 20px; } .mesures { gap:6px; } .carte { padding:8px; } .accordsCarte { font-size:19px; } }
@media(max-width:650px) {
    header { height:67px; padding:9px 12px; } h1 { font-size:22px; } .signature { font-size:8px; } .historique button { font-size:11px; padding:7px; }
    .transport { height:96px; padding:8px 12px; gap:6px; flex-wrap:wrap; align-content:center; }
    .transport button { padding:7px 10px; } .transport select { width:110px; font-size:12px; } #lecture { font-size:10px; } .boucle { font-size:11px; }
    main { height:calc(100dvh - 163px); grid-template-columns:1fr; grid-template-rows:minmax(150px,1fr) min(40dvh,330px); }
    aside { border-left:0; border-top:1px solid var(--trait); padding:13px 16px; } .titreEdition { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding-bottom:6px; margin-bottom:8px; } .titreEdition h2 { font-size:21px; margin:0; } .titreEdition p { margin:0; }
    nav { padding:8px 12px; } nav button { font-size:12px; } #message { padding:6px 12px; font-size:10px; min-height:28px; }
    .carte { min-height:112px; gap:6px; } .accordsCarte { font-size:17px; } .notesCarte { display:none; } .rythmeCarte { letter-spacing:0; font-size:12px; } .modes { gap:8px; } .modeChoix { padding:9px; } .actionsModes { flex-direction:column; align-items:stretch; }
    .partie span { font-size:10px; } .mesures { gap:5px; }
}
@media(max-height:550px) and (min-width:651px) { header { height:58px; } .transport { height:52px; } main { height:calc(100dvh - 110px); } }
/* Un petit téléphone en paysage garde l’éditeur à côté, jamais sous une zone hors écran. */
@media (max-height:550px) and (min-width:500px) {
    header { height:54px; padding:5px 12px; }
    h1 { font-size:21px; }
    .transport { height:52px; padding:5px 12px; flex-wrap:nowrap; }
    .boucle,#lecture { display:none; }
    main { height:calc(100dvh - 106px); grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:1fr; }
    aside { border-top:0; border-left:1px solid var(--trait); }
    nav { padding:6px 10px; }
    .mesures { grid-template-columns:repeat(2,minmax(0,1fr)); }
}