/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CSS — APP
   Toolbar, layout, sections, mesures, accords, symboles
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Georgia', serif; background: #1a1a2e; color: #eee; min-height: 100vh; }
#toolbar { background:#16213e; padding:12px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-bottom:2px solid #f0a500; position:sticky; top:0; z-index:100; }
#toolbar h1 { font-size:1.2rem; color:#f0a500; margin-right:10px; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
#toolbar-title { line-height:1.2; align-self:flex-start; }
#toolbar-ts { font-size:0.68rem; color:#aaa; font-family:'Courier New',monospace; font-weight:normal; letter-spacing:1px; }
#print-ts { display:none; }
@media print { #print-ts { display:block; font-size:0.68rem; color:#888; font-family:'Courier New',monospace; letter-spacing:1px; text-align:center; margin-top:3px; } }
.btn { background:#f0a500; color:#1a1a2e; border:none; padding:7px 14px; border-radius:4px; cursor:pointer; font-weight:bold; font-size:0.85rem; transition:background 0.2s; }
.btn:hover { background:#ffc107; }
.btn.secondary { background:#2d4a7a; color:#eee; }
.btn.secondary:hover { background:#3a5f9a; }
.btn.danger { background:#c0392b; color:#fff; }
select, input[type="text"], input[type="number"] { background:#2d4a7a; color:#eee; border:1px solid #f0a500; padding:6px 10px; border-radius:4px; font-size:0.85rem; }
label { font-size:0.85rem; color:#aaa; }

/* Sélecteur de langue — intégré dans la toolbar, en fin de ligne */
#lang-selector { display:flex; align-items:center; gap:6px; background:#0f3460; border:1px solid #f0a500; border-radius:6px; padding:4px 10px; }
#lang-selector label { color:#f0a500; font-size:0.78rem; font-weight:bold; }
#lang-select { width:70px; font-size:0.82rem; padding:3px 6px; }

#kofi-btn { display:inline-flex; align-items:center; gap:5px; background:#ff5e5b; color:#fff; border-radius:6px; padding:5px 12px; font-size:0.8rem; font-weight:bold; text-decoration:none; white-space:nowrap; transition:background 0.2s, transform 0.15s; }
#kofi-btn:hover { background:#ff3a37; transform:translateY(-1px); }
#kofi-wrap { display:inline-flex; align-items:center; gap:8px; }
#kofi-wrap span { font-size:0.75rem; color:#aaa; white-space:nowrap; }
@media print { #kofi-wrap { position:fixed; bottom:8px; right:12px; z-index:9999; } #kofi-wrap span { display:none; } #kofi-btn { background:#ff5e5b !important; color:#fff !important; padding:4px 10px; font-size:0.72rem; } }

#transpose-group { display:flex; align-items:center; gap:6px; background:#0f3460; border:1px solid #f0a500; border-radius:6px; padding:4px 10px; }
#transpose-group label { color:#f0a500; font-size:0.8rem; font-weight:bold; }
#transpose-semitones { display:flex; align-items:center; gap:4px; }
#semitone-display { min-width:28px; text-align:center; font-size:0.85rem; color:#ffd060; font-weight:bold; }
.semi-btn { background:#2d4a7a; color:#f0a500; border:1px solid #f0a500; border-radius:3px; width:22px; height:22px; cursor:pointer; font-size:0.95rem; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.semi-btn:hover { background:#f0a500; color:#1a1a2e; }
#transpose-key-select { width:58px; }

#dropzone { border:3px dashed #f0a500; border-radius:12px; margin:40px auto; max-width:500px; padding:60px 40px; text-align:center; cursor:pointer; transition:background 0.2s; }
#dropzone:hover, #dropzone.drag-over { background:rgba(240,165,0,0.1); }
#dropzone p { color:#aaa; margin-top:10px; font-size:0.9rem; }
#dropzone .icon { font-size:3rem; }
#file-input { display:none; }
#chart-editor { display:none; padding:20px; }
#chart-header { text-align:center; margin-bottom:20px; }
#chart-title { font-size:2rem; font-weight:bold; color:#f0a500; border:none; background:transparent; text-align:center; width:100%; outline:none; border-bottom:1px dashed #555; }
#chart-meta { display:flex; justify-content:center; gap:20px; margin-top:8px; flex-wrap:wrap; font-size:0.9rem; color:#aaa; }
#chart-meta input { width:120px; text-align:center; }
.section { margin-bottom:30px; background:#16213e; border-radius:8px; overflow:hidden; border:1px solid #2d4a7a; }
.section-header { background:#0f3460; padding:8px 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.section-header-top { display:flex; align-items:center; gap:8px; width:100%; }
.section-label { font-weight:bold; color:#f0a500; font-size:0.9rem; border:none; background:none; border-bottom:1px dashed #f0a50055; padding:2px 6px; cursor:pointer; }
.section-annot-row { width:100%; display:flex; align-items:center; gap:8px; padding-top:4px; border-top:1px dashed #1a3060; margin-top:2px; }
.section-annot-input { flex:1; background:transparent; border:none; outline:none; color:#93c5fd; font-size:0.78rem; font-style:italic; font-family:Georgia,serif; }
.section-annot-input::placeholder { color:#2d4a7a; }
.section-annot-badge { font-size:0.65rem; color:#3d6aaa; }
.section-actions { margin-left:auto; display:flex; gap:6px; align-items:center; }
.section-actions button { background:none; border:1px solid #555; color:#aaa; padding:3px 8px; border-radius:3px; cursor:pointer; font-size:0.75rem; }
.section-actions button:hover { border-color:#f0a500; color:#f0a500; }
.section-drag-handle { cursor:grab; color:#4a6a9a; font-size:1rem; padding:2px 6px; border-radius:3px; user-select:none; transition:color 0.15s; }
.section-drag-handle:hover { color:#f0a500; }
.section-drag-handle:active { cursor:grabbing; }
.section.dragging { opacity:0.4; border:2px dashed #f0a500 !important; }
.section.drag-over-top { border-top:3px solid #f0a500 !important; }
.section.drag-over-bottom { border-bottom:3px solid #f0a500 !important; }
.section-annot-display { padding:6px 14px 4px; background:#0a2040; font-size:0.78rem; font-style:italic; color:#93c5fd; border-bottom:1px solid #1a3060; display:flex; gap:8px; align-items:flex-start; }
.section-annot-display .annot-icon { color:#3d6aaa; flex-shrink:0; }
.measures-grid { display:grid; padding:12px; gap:6px; }
.measure { background:#1e3a5f; border:1px solid #2d5a8a; border-radius:4px; padding:4px; position:relative; transition:border-color 0.2s; display:flex; flex-direction:column; }
.measure:hover { border-color:#f0a500; }
.measure-drag-handle { cursor:grab; color:#2d5a8a; font-size:0.8rem; padding:0 4px 0 2px; user-select:none; transition:color 0.15s; align-self:flex-start; margin-top:1px; flex-shrink:0; }
.measure-drag-handle:hover { color:#f0a500; }
.measure-drag-handle:active { cursor:grabbing; }
.measure.measure-dragging { opacity:0.35; border:2px dashed #f0a500 !important; }
.measure.measure-drag-over-left { border-left:3px solid #f0a500 !important; }
.measure.measure-drag-over-right { border-right:3px solid #f0a500 !important; }
/* ── Barlines existantes (compatibilité) ── */
.barline-repeat-start { border-left:4px double #f0a500; }
.barline-repeat-end   { border-right:4px double #f0a500; }
/* ── Barlines enrichies ── */
.bl-normal       {}
.bl-double-left  { border-left: 3px double #ccc !important; }
.bl-double-right { border-right:3px double #ccc !important; }
.bl-final-left   { border-left: 5px solid #ccc !important; }
.bl-final-right  { border-right:5px solid #ccc !important; }
.bl-repeat-start { border-left:4px double #f0a500 !important; }
.bl-repeat-end   { border-right:4px double #f0a500 !important; }
/* ── Volta bracket ── */
.volta-bracket { position:absolute; top:-18px; left:0; right:0; height:16px;
  border-top:2px solid #7dd3fc; border-left:2px solid #7dd3fc;
  font-size:0.65rem; font-weight:bold; color:#7dd3fc;
  padding:1px 4px; pointer-events:none; z-index:2; }
.volta-bracket.volta-open { border-right:none; }
.volta-bracket.volta-closed { border-right:2px solid #7dd3fc; }
/* ── Boutons barline hover ── */
.barline-btn { position:absolute; top:50%; transform:translateY(-50%);
  width:14px; height:32px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.15s; z-index:5; font-size:0.7rem; }
.barline-btn-left  { left:-7px; }
.barline-btn-right { right:-7px; }
.measure:hover .barline-btn { opacity:0.6; }
.barline-btn:hover { opacity:1 !important; color:#f0a500; }
/* ── Symboles de navigation au-dessus de la mesure ── */
.nav-symbol { position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:1.1rem; color:#f0c060; cursor:pointer; z-index:3;
  white-space:nowrap; line-height:1; }
.nav-symbol.nav-text { font-size:0.62rem; font-weight:bold; font-family:'Courier New',monospace;
  color:#f0c060; background:#1a1a2e; border:1px solid #f0c06088;
  border-radius:3px; padding:1px 4px; top:-20px; }
.nav-symbol.nav-coda  { color:#86efac; }
.nav-symbol.nav-segno { color:#c4b5fd; }
/* ── Bouton nav hover ── */
.nav-add-btn { position:absolute; top:-18px; right:2px; width:14px; height:14px;
  background:none; border:1px dashed #4a6a9a; border-radius:2px; cursor:pointer;
  font-size:0.6rem; color:#4a6a9a; opacity:0; transition:opacity 0.15s; z-index:4;
  display:flex; align-items:center; justify-content:center; line-height:1; }
.measure:hover .nav-add-btn { opacity:0.7; }
.nav-add-btn:hover { opacity:1 !important; color:#f0c060; border-color:#f0c060; }
/* ── Popup menu barline / nav ── */
.bl-popup { position:absolute; background:#16213e; border:1px solid #f0a500;
  border-radius:6px; padding:6px; z-index:200; display:flex; flex-direction:column; gap:3px;
  min-width:130px; box-shadow:0 4px 16px rgba(0,0,0,0.5); }
.bl-popup button { background:none; border:none; color:#eee; font-size:0.78rem;
  cursor:pointer; padding:4px 8px; border-radius:3px; text-align:left; white-space:nowrap; }
.bl-popup button:hover { background:#2d4a7a; color:#f0a500; }
.bl-popup button.active-item { color:#f0c060; font-weight:bold; }
.bl-popup hr { border:none; border-top:1px solid #2d4a7a; margin:2px 0; }
.beats-row { display:flex; gap:2px; }
.chord-slot { flex:1; display:flex; flex-direction:column; border:1px solid transparent; border-radius:4px; transition:border-color 0.15s; cursor:pointer; min-width:0; }
.chord-slot:hover { border-color:#f0a50088; background:rgba(240,165,0,0.06); }
.chord-slot:hover .chord-edit-hint { opacity:1; }
.chord-header { text-align:center; padding:6px 2px 2px; }
.chord-symbol { font-size:1.05rem; font-weight:bold; color:#eee; line-height:1.2; }
.chord-duration { font-size:0.6rem; color:#88a; }
.chord-edit-hint { font-size:0.55rem; color:#f0a500; opacity:0; transition:opacity 0.15s; text-align:center; }
.chord-theory { display:flex; flex-direction:column; gap:3px; }
.theory-row { display:flex; align-items:baseline; gap:4px; font-size:0.78rem; line-height:1.4; padding:2px 4px; }
.theory-row-label { color:#7a6aaa; font-size:0.72rem; font-weight:bold; min-width:20px; flex-shrink:0; }
.theory-row-value { font-family:'Courier New',monospace; word-break:break-word; }
.mode-val  { color:#c4b5fd; font-style:italic; }
.modes-alt-row { font-size:0.62rem; color:#6a5a8a; font-style:italic; padding:2px 4px 0; line-height:1.4; word-break:break-word; }
.arp-val   { color:#7dd3fc; }
.tens-val  { color:#86efac; }
.chord-free-annot { font-size:0.62rem; font-style:italic; padding:1px 3px; border-top:1px dashed #3d2a6a; word-break:break-word; line-height:1.3; }
.chord-annot-icon { font-size:0.58rem; text-align:center; opacity:0; color:#a78bfa; transition:opacity 0.15s; }
.chord-slot:hover .chord-annot-icon { opacity:0.8; }
.chord-slot.has-annot .chord-annot-icon { opacity:0.6; }
.chord-del-btn { position:absolute; top:2px; right:2px; background:none; border:none; color:#c0392b; font-size:0.6rem; cursor:pointer; opacity:0; transition:opacity 0.2s; }
.measure:hover .chord-del-btn { opacity:1; }
.add-chord-btn { align-self:stretch; display:flex; align-items:center; justify-content:center; min-width:22px; background:none; border:1px dashed #2d5a8a; border-radius:4px; color:#2d5a8a; cursor:pointer; font-size:1rem; transition:all 0.15s; flex-shrink:0; }
.add-chord-btn:hover { border-color:#f0a500; color:#f0a500; }
.add-measure-btn,.add-section-btn { border:2px dashed #2d5a8a; background:none; color:#2d5a8a; border-radius:4px; min-height:60px; cursor:pointer; font-size:1.4rem; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.add-measure-btn:hover,.add-section-btn:hover { border-color:#f0a500; color:#f0a500; }
/* ——— Symboles spéciaux de mesure ——— */
.chord-slot.sym-repeat   { background:rgba(240,165,0,0.07); }
.chord-slot.sym-repeat2  { background:rgba(240,165,0,0.07); }
/* ——— Accord alternatif (small chord) ——— */
.alt-chord-wrap { position:relative; }
.alt-chord-display { position:absolute; top:-14px; right:0;
  font-size:0.58rem; font-weight:bold; font-style:italic;
  color:#f0c060; background:#1a1a2e; border:1px solid #f0c06055;
  border-radius:3px; padding:0 3px; white-space:nowrap;
  cursor:pointer; z-index:2; line-height:1.5; }
.alt-chord-display:hover { border-color:#f0c060; background:#2a2000; }
.alt-chord-btn { position:absolute; top:-12px; left:1px;
  font-size:0.52rem; color:#6a5a2a; background:none; border:none;
  cursor:pointer; opacity:0; transition:opacity 0.15s; padding:0 2px;
  line-height:1; z-index:2; }
.chord-slot:hover .alt-chord-btn { opacity:0.8; }
.alt-chord-btn:hover { opacity:1 !important; color:#f0c060; }
.chord-slot.sym-nc       { background:rgba(200,60,60,0.08); }
.chord-slot.sym-slash    { background:rgba(100,180,255,0.07); }
.sym-display { font-size:1.6rem; font-weight:900; text-align:center; line-height:1; padding:8px 0 4px; user-select:none; }
.sym-repeat  .sym-display { color:#f0c060; }
.sym-repeat2 .sym-display { color:#f0c060; font-size:1.2rem; }
.sym-nc      .sym-display { color:#f87171; letter-spacing:1px; font-size:1rem; }
.sym-slash   .sym-display { color:#7dd3fc; font-size:1.4rem; }
.sym-label   { font-size:0.55rem; color:#666; text-align:center; padding-bottom:2px; }
/* Bouton symbole rapide sur la mesure */
.measure-sym-bar { display:flex; justify-content:flex-end; gap:3px; padding:2px 4px 0; }
.sym-quick-btn { background:none; border:1px solid #2d4a6a; border-radius:3px; color:#4a7aaa; font-size:0.68rem; cursor:pointer; padding:1px 5px; transition:all 0.15s; line-height:1.4; }
.sym-quick-btn:hover { border-color:#f0a500; color:#f0a500; background:rgba(240,165,0,0.1); }
.sym-quick-btn.active-sym { border-color:#f0c060; color:#f0c060; background:rgba(240,192,96,0.12); }
/* Panneau symboles dans la modale */
#modal-sym-panel { background:#0f2035; border:1px solid #2d4a7a; border-radius:6px; padding:8px 10px; margin-bottom:10px; }
#modal-sym-panel label { font-size:0.75rem; color:#f0a500; font-weight:bold; display:block; margin-bottom:6px; }
.modal-sym-grid { display:flex; gap:6px; flex-wrap:wrap; }
.modal-sym-btn { padding:6px 14px; background:#1e3a5f; border:1px solid #3d6aaa; border-radius:5px; color:#eee; cursor:pointer; font-size:0.85rem; font-weight:bold; transition:all 0.15s; }
.modal-sym-btn:hover { border-color:#f0a500; background:rgba(240,165,0,0.12); color:#f0a500; }
.modal-sym-btn.selected { border-color:#f0c060; background:rgba(240,192,96,0.18); color:#f0c060; }
.add-section-btn { min-height:44px; width:100%; margin:8px 0; font-size:1rem; }
.cols-select { width:60px; }
/* Toggle basse 4/5 cordes */
#btn-4str.active, #btn-5str.active {
  background: #f0a500;
  color: #1a1a2e;
  font-weight: bold;
}