/* ═══════════════════════════════════════════════════════════════════════════
   GUITAR THEORY — COMPOSANTS TRAINING (guitar_training.html uniquement)
   Tabs, Ear Training, Harmonie, Grilles
   Dépend de theme.css
═══════════════════════════════════════════════════════════════════════════ */

/* ── Body training (page linéaire, pas SPA) ─────────────────────────────── */
body{min-height:100vh;background-attachment:fixed}
html{background:var(--bg)}
body,.card,.tab-btn,.btn,.preset-btn{transition:background .25s,color .25s,border-color .25s}

/* ── Tabs principaux ────────────────────────────────────────────────────── */
.main-tabs{background:var(--s1);border-bottom:1px solid var(--brd)}
.tabs-inner{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.main-tab{padding:11px 20px;font-size:.68rem;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s}
.main-tab.on{color:var(--neon);border-bottom-color:var(--neon)}
.main-tab:hover:not(.on){color:var(--txt2)}
.tab-panel{display:none;padding:16px 0 80px}
.tab-panel.on{display:block}

/* ── Ear Training ───────────────────────────────────────────────────────── */
.et-section{background:var(--s1);border:1px solid var(--brd);border-radius:8px;padding:16px;margin-bottom:14px}
.et-section-title{font-family:'Space Mono',monospace;font-size:.65rem;font-weight:700;color:var(--neon2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.toggle-row{display:flex;gap:4px;background:var(--s2);border:1px solid var(--brd);border-radius:4px;padding:3px}
.toggle-btn{flex:1;padding:6px 8px;font-size:.62rem;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.05em;border:none;background:transparent;color:var(--mut);cursor:pointer;border-radius:3px;transition:all .18s;white-space:nowrap}
.toggle-btn.on{background:linear-gradient(135deg,rgba(0,255,170,.12),rgba(0,221,255,.12));color:var(--neon);box-shadow:inset 0 0 0 1px rgba(0,221,255,.25)}
.exercise-box{background:var(--s2);border:1px solid var(--brd);border-radius:6px;padding:20px 16px;text-align:center;margin-bottom:14px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.exercise-question{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.exercise-hint{font-size:1.6rem;font-weight:800;color:var(--neon);font-family:'Space Mono',monospace;letter-spacing:.04em;min-height:2.2rem}
.exercise-sub{font-size:.65rem;color:var(--txt2);font-family:'Space Mono',monospace}
.btn-play{width:60px;height:60px;border-radius:50%;border:2px solid var(--neon);background:rgba(0,255,170,.08);color:var(--neon);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.btn-play:hover{background:rgba(0,255,170,.18)}
.btn-play:active{transform:scale(.92)}
.answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
@media(min-width:480px){.answers-grid{grid-template-columns:repeat(3,1fr)}}
.answer-btn{padding:10px 8px;font-size:.65rem;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--brd);background:var(--s2);color:var(--txt2);border-radius:4px;cursor:pointer;transition:all .18s;text-align:center}
.answer-btn:hover:not(:disabled){border-color:var(--neon2);color:var(--neon2)}
.answer-btn.correct{border-color:#2ecc71;background:rgba(46,204,113,.12);color:#2ecc71}
.answer-btn.wrong{border-color:#e74c3c;background:rgba(231,76,60,.08);color:#e74c3c}
.answer-btn:disabled{cursor:default;opacity:.6}
.feedback-row{display:flex;align-items:center;justify-content:space-between;min-height:2rem}
.feedback-txt{font-size:.72rem;font-family:'Space Mono',monospace;font-weight:700}
.feedback-txt.ok{color:#2ecc71}
.feedback-txt.err{color:#e74c3c}
.btn-next{width:100%;padding:11px;font-size:.65rem;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.07em;border:1px solid var(--neon);background:rgba(0,255,170,.06);color:var(--neon);border-radius:4px;cursor:pointer;transition:all .2s}
.btn-next:hover{background:rgba(0,255,170,.14)}
.btn-next:disabled{opacity:.3;cursor:default}
.repro-box{background:var(--s2);border:1px solid var(--brd);border-radius:6px;padding:16px;text-align:center;margin-bottom:14px}
.repro-note{font-family:'Space Mono',monospace;font-size:2.8rem;font-weight:700;color:var(--gold);margin-bottom:4px}
.repro-interval{font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;color:var(--neon2);letter-spacing:.06em}
.repro-target{font-family:'Space Mono',monospace;font-size:2.2rem;font-weight:700;color:var(--neon);margin-top:12px;transition:opacity .3s}
.repro-target.hidden{opacity:0}
.repro-controls{display:flex;gap:8px;margin-top:12px}
.repro-btn{flex:1;padding:10px;font-size:.62rem;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;cursor:pointer;transition:all .2s;border:1px solid var(--brd);background:var(--s2);color:var(--txt2)}
.repro-btn:hover{border-color:var(--neon2);color:var(--neon2)}
.repro-btn.primary{border-color:var(--neon);color:var(--neon);background:rgba(0,255,170,.06)}
.repro-btn.ok{border-color:#2ecc71;color:#2ecc71;background:rgba(46,204,113,.08)}
.repro-btn.err{border-color:#e74c3c;color:#e74c3c;background:rgba(231,76,60,.08)}
.exam-result{background:var(--s2);border:1px solid var(--brd);border-radius:6px;padding:20px;text-align:center;display:none;flex-direction:column;gap:12px}
.exam-result.show{display:flex}
.exam-score{font-family:'Space Mono',monospace;font-size:2.4rem;font-weight:700;color:var(--neon)}
.exam-detail{font-size:.65rem;color:var(--txt2);font-family:'Space Mono',monospace;line-height:1.8}
.mastery-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.mastery-label{font-family:'Space Mono',monospace;font-size:.62rem;color:var(--txt2);min-width:80px}
.mastery-bar-wrap{flex:1;height:6px;background:var(--s2);border-radius:3px;overflow:hidden}
.mastery-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.mastery-pct{font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;min-width:32px;text-align:right}
.divider{height:1px;background:var(--brd);margin:10px 0}
.hint-txt{font-size:.58rem;color:var(--mut);font-family:'Space Mono',monospace;text-align:center}
.exam-cooldown{font-family:'Space Mono',monospace;font-size:.58rem;color:var(--mut);text-align:center;padding:6px 0;display:none}
.et-menu{display:block}
.et-exercise{display:none}
.et-exercise.on{display:block}
.et-menu.on{display:block}
.et-summary{background:var(--s2);border:1px solid var(--brd);border-radius:6px;padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.et-summary-row{display:flex;justify-content:space-between;align-items:center;font-family:'Space Mono',monospace;font-size:.62rem}
.et-summary-key{color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.et-summary-val{color:var(--neon2);font-weight:700}
.btn-start{width:100%;padding:14px;font-size:.72rem;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--neon);background:linear-gradient(135deg,rgba(0,255,170,.1),rgba(0,221,255,.08));color:var(--neon);border-radius:5px;cursor:pointer;transition:all .2s}
.btn-start:hover{background:linear-gradient(135deg,rgba(0,255,170,.2),rgba(0,221,255,.15));box-shadow:0 0 16px rgba(0,255,170,.2)}
.btn-back{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;color:var(--mut);background:transparent;border:1px solid var(--brd);border-radius:4px;padding:6px 12px;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.btn-back:hover{border-color:var(--neon2);color:var(--neon2)}

/* ── Module Harmonie ────────────────────────────────────────────────────── */
.hm-acc-btn{padding:5px 12px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt2);font-family:'Space Mono',monospace;font-size:.8rem;cursor:pointer;transition:all .15s}
.hm-acc-btn.on{border-color:var(--neon);color:var(--neon);background:rgba(0,255,102,.08)}
.hm-staff-wrap{overflow-x:auto;margin:14px 0;text-align:center}
.hm-staff-wrap svg{display:inline-block;cursor:default}
.hm-clef-btn{padding:6px 14px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt2);font-family:'Space Mono',monospace;font-size:.75rem;cursor:pointer;transition:all .15s}
.hm-clef-btn.on{border-color:var(--neon);color:var(--neon);background:rgba(0,255,102,.08)}
.hm-cadence-card{background:var(--s2);border:1px solid var(--brd);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.hm-cadence-label{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--mut);margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.hm-cadence-name{font-size:1rem;font-weight:700;color:var(--neon2);margin-bottom:2px}
.hm-cadence-roman{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--txt2)}
.hm-chord-label{font-family:'Space Mono',monospace;font-size:.75rem;color:var(--txt2);text-align:center;margin-top:4px}
.hm-chord-label.active{color:var(--neon);font-weight:700}
.hm-step-dots{display:flex;gap:6px;justify-content:center;margin:10px 0}
.hm-dot{width:10px;height:10px;border-radius:50%;background:var(--brd);transition:background .2s}
.hm-dot.done{background:var(--r5)}
.hm-dot.active{background:var(--neon)}

/* ── Grilles ────────────────────────────────────────────────────────────── */
.gl-header{padding:14px 0 8px;position:sticky;top:0;background:var(--bg);z-index:10}
.gl-search-row{display:flex;gap:8px;margin-bottom:6px}
.gl-search{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt);font-family:'Space Mono',monospace;font-size:.8rem;outline:none}
.gl-search:focus{border-color:var(--neon2)}
.gl-key-sel,.gl-src-sel{padding:8px 10px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt);font-family:'Space Mono',monospace;font-size:.8rem;outline:none;cursor:pointer}
.gl-count{font-size:.65rem;color:var(--mut);font-family:'Space Mono',monospace;padding:0 2px 4px}
.gl-list{display:flex;flex-direction:column;gap:4px;padding-bottom:40px}
.gl-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.gl-item:hover{border-color:var(--neon2);background:var(--s1)}
.gl-key-badge{min-width:28px;padding:2px 6px;border-radius:5px;background:var(--neon2);color:#fff;font-size:.65rem;font-family:'Space Mono',monospace;font-weight:700;text-align:center;flex-shrink:0}
.gl-info{flex:1;min-width:0}
.gl-title{font-size:.82rem;font-weight:700;color:var(--txt);font-family:'Space Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-composer{font-size:.68rem;color:var(--mut);font-family:'Space Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-page{font-size:.62rem;color:var(--neon2);font-family:'Space Mono',monospace;opacity:.7}
.gl-arrow{color:var(--neon2);font-size:.9rem;flex-shrink:0;opacity:.7}
.gl-add-btn{padding:7px 14px;border-radius:8px;border:1px solid var(--neon);background:transparent;color:var(--neon);font-size:1.1rem;font-weight:700;cursor:pointer;flex-shrink:0;transition:background .15s}
.gl-add-btn:hover{background:rgba(0,255,102,.1)}
.gl-filter-row{display:flex;gap:6px;margin-top:6px}
.gl-filter-sel{flex:1;padding:7px 6px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt);font-family:'Space Mono',monospace;font-size:.75rem;outline:none;cursor:pointer;min-width:0}
.gl-type-badge{font-size:.58rem;padding:2px 5px;border-radius:4px;font-family:'Space Mono',monospace;font-weight:700;flex-shrink:0}
.gl-type-badge.grille{background:rgba(0,153,170,.18);color:var(--neon2)}
.gl-type-badge.tab{background:rgba(180,100,220,.18);color:#c088ee}
.gl-src-badge{font-size:.55rem;padding:2px 5px;border-radius:4px;font-family:'Space Mono',monospace;font-weight:700;flex-shrink:0}
.gl-src-badge.GJM{background:rgba(0,153,170,.15);color:var(--neon2)}
.gl-src-badge.TGJC{background:rgba(100,100,220,.15);color:#aab}
.gl-src-badge.PERSO{background:rgba(220,160,50,.18);color:#e8c060}
.gl-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.gl-modal{background:var(--s1);border:1px solid var(--brd);border-radius:14px;padding:20px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto}
.gl-modal-title{font-family:'Space Mono',monospace;font-size:.95rem;font-weight:700;color:var(--neon);margin-bottom:12px}
.gl-type-toggle{display:flex;gap:6px;margin-bottom:14px}
.gl-type-btn{flex:1;padding:8px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt2);font-family:'Space Mono',monospace;font-size:.78rem;cursor:pointer;transition:all .15s}
.gl-type-btn.on{border-color:var(--neon);color:var(--neon);background:rgba(0,255,102,.07)}
.gl-form{display:flex;flex-direction:column;gap:8px}
.gl-label{font-size:.63rem;color:var(--mut);font-family:'Space Mono',monospace;margin-bottom:-4px}
.gl-input{padding:8px 10px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt);font-family:'Space Mono',monospace;font-size:.8rem;outline:none;width:100%;box-sizing:border-box}
.gl-input:focus{border-color:var(--neon2)}
.gl-textarea{resize:vertical;min-height:60px}
.gl-modal-cancel{flex:1;padding:10px;border-radius:8px;border:1px solid var(--brd);background:var(--s2);color:var(--txt2);font-family:'Space Mono',monospace;font-size:.8rem;cursor:pointer}
.gl-modal-save{flex:2;padding:10px;border-radius:8px;border:none;background:var(--neon);color:#000;font-family:'Space Mono',monospace;font-size:.8rem;font-weight:700;cursor:pointer}
.gl-modal-delete{display:block;width:100%;margin-top:10px;padding:8px;border-radius:8px;border:1px solid var(--r1);background:transparent;color:var(--r1);font-family:'Space Mono',monospace;font-size:.75rem;cursor:pointer}
.gl-req{color:var(--r1);font-weight:700}
.gl-rec{color:var(--mut);font-size:.58rem;opacity:.8;font-style:italic}
.gl-input.gl-error{border-color:var(--r1);background:rgba(231,76,60,.07)}
.gl-error-msg{font-size:.65rem;color:var(--r1);font-family:'Space Mono',monospace;margin-top:-4px}
.gl-item-edit{font-size:.8rem;color:var(--mut);cursor:pointer;padding:4px 6px;border-radius:4px;flex-shrink:0;opacity:.6;transition:opacity .15s}
.gl-item-edit:hover{opacity:1;color:var(--neon2)}