/* ═══════════════════════════════════════════════════
   GuitarMaster — components.css
   Dépend de : base.css (tokens CSS requis)

   SOMMAIRE
   ────────
   1.  Boutons             — btn, cta-btn, icon-btn
   2.  Inputs & Forms      — text, select, range, toggle
   3.  Tabs                — tab bar horizontale
   4.  Cards               — card, stat-card, course card
   5.  Hero                — section hero avec anneaux
   6.  Today Card          — leçon du jour
   7.  Challenge Card      — défis quotidiens
   8.  Song Card           — grille répertoire
   9.  Song Viewer         — vue plein écran chanson
   10. Lesson Flow         — moteur leçon plein écran
   11. Chord Diagram       — grille + détail accord
   12. Tuner               — accordeur (aiguille SVG)
   13. Metronome           — dots, BPM display
   14. Coach IA            — messages, input, API dot
   15. Profile             — streak, barres, badges
   16. Admin               — dashboard admin
   17. Level-Up Overlay    — animation montée de niveau
   18. Toast               — notification bas de page
   19. Tab Box             — tablature ASCII
   20. Pima Legend         — légende doigts fingerstyle
   21. Backing Track       — boutons pattern BT
   22. Overlays            — auth, fullscreen
═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   1. BOUTONS
══════════════════════════════════════════════════ */

.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  gap:            var(--space-2);
  padding:        9px var(--space-4);
  border-radius:  var(--r-md);
  border:         none;
  font-family:    inherit;
  font-size:      var(--text-sm);
  font-weight:    var(--fw-semi);
  cursor:         pointer;
  touch-action:   manipulation;
  transition:     background var(--dur-base), transform var(--dur-fast),
                  box-shadow var(--dur-base), opacity var(--dur-base);
  white-space:    nowrap;
  user-select:    none;
  text-decoration:none;
}
.btn:active          { transform: scale(.97); }
.btn:disabled        { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Variantes */
.btn-p {
  background:  linear-gradient(135deg, var(--accent), #5a3af8);
  color:       #fff;
  box-shadow:  0 3px 12px rgba(var(--accent-rgb), .3);
}
.btn-p:hover { box-shadow: 0 5px 18px rgba(var(--accent-rgb), .45); }

.btn-s {
  background: var(--bg4);
  color:      var(--text);
  border:     1px solid var(--border);
}
.btn-s:hover { background: var(--bg5); border-color: var(--border2); }

.btn-ok {
  background: linear-gradient(135deg, var(--green), var(--green-dk));
  color:      #fff;
  box-shadow: 0 3px 12px rgba(0, 214, 143, .3);
}
.btn-ok:hover { box-shadow: 0 5px 18px rgba(0, 214, 143, .45); }

.btn-d {
  background: linear-gradient(135deg, var(--red), var(--red-dk));
  color:      #fff;
  box-shadow: 0 3px 12px rgba(255, 77, 109, .3);
}
.btn-d:hover { box-shadow: 0 5px 18px rgba(255, 77, 109, .45); }

.btn-ghost {
  background: transparent;
  color:      var(--t2);
  border:     1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg3); color: var(--text); }

/* Tailles */
.btn-sm { padding: 5px 10px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn-lg { padding: 13px 24px; font-size: var(--text-md); border-radius: var(--r-lg); }
.btn-xl { padding: 16px 32px; font-size: var(--text-lg); border-radius: var(--r-xl); }

/* CTA principal */
.cta-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--space-2);
  background:   linear-gradient(135deg, var(--accent), #5a3af8);
  color:        #fff;
  border:       none;
  border-radius:var(--r-lg);
  padding:      10px var(--space-5);
  font-family:  inherit;
  font-size:    var(--text-sm);
  font-weight:  var(--fw-bold);
  cursor:       pointer;
  touch-action: manipulation;
  transition:   transform var(--dur-base), box-shadow var(--dur-base);
  box-shadow:   0 4px 16px rgba(var(--accent-rgb), .35);
  white-space:  nowrap;
}
.cta-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(var(--accent-rgb), .5); }
.cta-btn:active { transform: scale(.97); }

/* Hero CTA */
.hero-cta {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--space-3);
  background:   linear-gradient(135deg, var(--accent), #5a3af8);
  color:        #fff;
  border:       none;
  border-radius:var(--r-xl);
  padding:      14px 28px;
  font-family:  inherit;
  font-size:    var(--text-md);
  font-weight:  var(--fw-black);
  cursor:       pointer;
  touch-action: manipulation;
  box-shadow:   var(--shadow-glow);
  transition:   transform var(--dur-base), box-shadow var(--dur-base);
  letter-spacing:-.2px;
}
.hero-cta:hover  { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(var(--accent-rgb), .55); }
.hero-cta:active { transform: scale(.98); }

/* Bouton icon-only */
.icon-btn {
  width:          34px;
  height:         34px;
  border-radius:  var(--r-full);
  border:         none;
  background:     var(--bg3);
  color:          var(--t2);
  font-size:      15px;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  transition:     background var(--dur-base), color var(--dur-base);
  flex-shrink:    0;
}
.icon-btn:hover  { background: var(--bg4); color: var(--text); }
.icon-btn:active { transform: scale(.93); }

/* ══════════════════════════════════════════════════
   2. INPUTS & FORMS
══════════════════════════════════════════════════ */

.input {
  width:         100%;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       10px 14px;
  font-family:   inherit;
  font-size:     var(--text-sm);
  color:         var(--text);
  outline:       none;
  transition:    border-color var(--dur-base), box-shadow var(--dur-base);
  box-sizing:    border-box;
  appearance:    none;
}
.input::placeholder { color: var(--t3); }
.input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(var(--accent-rgb), .15);
}
.input:hover:not(:focus) { border-color: var(--border2); }

.input-label {
  font-size:     var(--text-xs);
  color:         var(--t2);
  display:       block;
  margin-bottom: var(--space-1);
  font-weight:   var(--fw-semi);
  letter-spacing:.3px;
}

/* Select */
select.input {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2355558a'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  padding-right:       32px;
  cursor:              pointer;
}
select.input option { background: var(--bg3); color: var(--text); }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             5px;
  background:         var(--bg4);
  border-radius:      var(--r-full);
  outline:            none;
  cursor:             pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              18px;
  height:             18px;
  border-radius:      var(--r-full);
  background:         var(--accent);
  cursor:             pointer;
  box-shadow:         0 0 6px rgba(var(--accent-rgb), .5);
  transition:         transform var(--dur-fast);
}
input[type="range"]::-moz-range-thumb {
  width:        18px;
  height:       18px;
  border-radius:var(--r-full);
  background:   var(--accent);
  border:       none;
  cursor:       pointer;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"].green-thumb::-webkit-slider-thumb { background: var(--green); box-shadow: 0 0 6px rgba(0,214,143,.5); }

/* Toggle switch */
.toggle {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  cursor:         pointer;
  user-select:    none;
}
.toggle-track {
  width:           36px;
  height:          20px;
  background:      var(--bg4);
  border-radius:   var(--r-full);
  border:          1px solid var(--border);
  position:        relative;
  transition:      background var(--dur-base), border-color var(--dur-base);
  flex-shrink:     0;
}
.toggle-track::after {
  content:         '';
  position:        absolute;
  top:             2px;
  left:            2px;
  width:           14px;
  height:          14px;
  border-radius:   var(--r-full);
  background:      var(--t3);
  transition:      transform var(--dur-base) var(--ease-spring), background var(--dur-base);
}
.toggle input:checked + .toggle-track {
  background:    rgba(var(--accent-rgb), .25);
  border-color:  var(--accent);
}
.toggle input:checked + .toggle-track::after {
  transform:  translateX(16px);
  background: var(--accent);
}
.toggle input { display: none; }

/* ══════════════════════════════════════════════════
   3. TABS
══════════════════════════════════════════════════ */

.tabs {
  display:                  flex;
  gap:                      3px;
  background:               var(--bg3);
  border-radius:            var(--r-lg);
  padding:                  3px;
  margin-bottom:            var(--space-4);
  overflow-x:               auto;
  scrollbar-width:          none;
  -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex:           1;
  padding:        7px var(--space-2);
  border:         none;
  background:     none;
  border-radius:  var(--r-md);
  color:          var(--t2);
  font-family:    inherit;
  font-size:      var(--text-sm);
  font-weight:    var(--fw-normal);
  cursor:         pointer;
  white-space:    nowrap;
  min-width:      fit-content;
  touch-action:   manipulation;
  transition:     background var(--dur-base), color var(--dur-base), font-weight var(--dur-base);
  user-select:    none;
}
.tab:hover       { color: var(--text); }
.tab.on {
  background:   var(--bg);
  color:        var(--text);
  font-weight:  var(--fw-semi);
  box-shadow:   var(--shadow-sm);
}

/* ══════════════════════════════════════════════════
   4. CARDS
══════════════════════════════════════════════════ */

/* Carte générique */
.card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--space-4);
  margin-bottom: var(--space-3);
  transition:    border-color var(--dur-base), transform var(--dur-base);
}
.card.interactive {
  cursor: pointer;
}
.card.interactive:hover {
  border-color: var(--accent);
  transform:    translateY(-1px);
}

/* ── Stat Cards ── */
.stat-row {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-2);
  margin-bottom:         var(--space-4);
}
.stat-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--space-3);
  text-align:    center;
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--dur-base), box-shadow var(--dur-base);
}
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.stat-card::after {
  content:       '';
  position:      absolute;
  top:           0; left: 0; right: 0;
  height:        2px;
  border-radius: 2px 2px 0 0;
}
.stat-card.green::after  { background: var(--green); }
.stat-card.gold::after   { background: var(--gold); }
.stat-card.blue::after   { background: var(--blue); }
.stat-card.purple::after { background: var(--a2); }
.stat-card.teal::after   { background: var(--teal); }
.stat-card.red::after    { background: var(--red); }

.stat-num {
  font-size:   22px;
  font-weight: var(--fw-black);
  line-height: 1.1;
  margin-bottom: 2px;
  letter-spacing:-.5px;
}
.stat-lbl {
  font-size:  var(--text-xs);
  color:      var(--t3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Course Cards (scroll horizontal) ── */
.c-scroll {
  display:                  flex;
  gap:                      var(--space-3);
  overflow-x:               auto;
  padding-bottom:           var(--space-2);
  scrollbar-width:          none;
  -webkit-overflow-scrolling:touch;
}
.c-scroll::-webkit-scrollbar { display: none; }

.c-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--space-3) var(--space-4);
  min-width:     155px;
  cursor:        pointer;
  flex-shrink:   0;
  position:      relative;
  transition:    border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.c-card:hover          { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.c-card.done           { border-color: rgba(0, 214, 143, .3); }
.c-card.locked         { opacity: .4; pointer-events: none; }
.c-icon                { font-size: 28px; margin-bottom: var(--space-1); }
.c-num                 { font-size: var(--text-xs); color: var(--t3); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; }
.c-name                { font-size: var(--text-sm); font-weight: var(--fw-bold); margin: 2px 0; color: var(--text); }
.c-desc                { font-size: var(--text-xs); color: var(--t2); line-height: 1.4; }
.c-status              { position: absolute; top: 8px; right: 8px; font-size: 12px; }
.c-xp                  { font-size: var(--text-xs); color: var(--gold); margin-top: 4px; font-weight: var(--fw-semi); }

/* ── Learn List Cards ── */
.lv-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--space-4);
  margin-bottom: var(--space-2);
  transition:    border-color var(--dur-base), transform var(--dur-base);
}
.lv-card:hover         { border-color: var(--accent); }
.lv-card.locked        { opacity: .4; pointer-events: none; }

/* ══════════════════════════════════════════════════
   5. HERO
══════════════════════════════════════════════════ */

.hero {
  position:   relative;
  overflow:   hidden;
  background: linear-gradient(160deg, #0d0820 0%, #150d2e 40%, #0a1a2e 100%);
  padding:    3rem 2rem 2.5rem;
  text-align: center;
}

/* Halo lumineux */
.hero-glow {
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 65% 55% at 50% 100%,
                    rgba(var(--accent-rgb), .28), transparent);
  pointer-events: none;
}

/* Anneaux décoratifs */
.hero-rings {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content:center;
  pointer-events: none;
  opacity:        .18;
}
.hero-rings svg { width: 120%; max-width: 700px; }

.hero-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    rgba(var(--accent-rgb), .15);
  border:        1px solid rgba(var(--accent-rgb), .3);
  border-radius: var(--r-full);
  padding:       5px 14px;
  font-size:     var(--text-xs);
  color:         var(--a3);
  margin-bottom: var(--space-4);
  letter-spacing:.5px;
  font-weight:   var(--fw-semi);
  position:      relative;
}

.hero-title {
  font-size:     var(--text-hero);
  font-weight:   var(--fw-black);
  line-height:   1.1;
  margin-bottom: var(--space-3);
  letter-spacing:-1px;
  position:      relative;
}

.hero-sub {
  color:         var(--t2);
  font-size:     var(--text-base);
  max-width:     500px;
  margin:        0 auto var(--space-6);
  line-height:   1.65;
  position:      relative;
}

.hero-stats {
  display:         flex;
  justify-content: center;
  gap:             2rem;
  margin-top:      2rem;
  padding-top:     1.5rem;
  border-top:      1px solid var(--border);
  position:        relative;
}
.hero-stat       { text-align: center; }
.hero-stat-num   { font-size: 22px; font-weight: var(--fw-black); letter-spacing: -.5px; }
.hero-stat-lbl   { font-size: var(--text-xs); color: var(--t3); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }

/* ══════════════════════════════════════════════════
   6. TODAY CARD
══════════════════════════════════════════════════ */

.today-card {
  background:    linear-gradient(135deg, #1a0d38, #0d1a38);
  border:        1px solid rgba(var(--accent-rgb), .25);
  border-radius: var(--r-xl);
  padding:       1.25rem;
  position:      relative;
  overflow:      hidden;
  margin-bottom: var(--space-4);
  cursor:        pointer;
  transition:    border-color var(--dur-base), transform var(--dur-base);
}
.today-card:hover {
  border-color: rgba(var(--accent-rgb), .5);
  transform:    translateY(-1px);
}
.today-card::before {
  content:    '';
  position:   absolute;
  top: -30px; right: -30px;
  width:      120px; height: 120px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .2), transparent 70%);
  pointer-events: none;
}

.today-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    rgba(0, 214, 143, .12);
  border:        1px solid rgba(0, 214, 143, .25);
  border-radius: var(--r-full);
  padding:       3px 10px;
  font-size:     var(--text-xs);
  color:         var(--green);
  margin-bottom: var(--space-2);
  font-weight:   var(--fw-semi);
}

.t-title       { font-size: 18px; font-weight: var(--fw-bold); margin-bottom: 4px; }
.t-sub         { font-size: var(--text-sm); color: var(--t2); margin-bottom: var(--space-3); }
.t-pb          { background: rgba(255,255,255,.1); border-radius: var(--r-full); height: 5px; margin-bottom: 5px; }
.t-pb-fill     { height: 5px; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .5s var(--ease); }

/* ══════════════════════════════════════════════════
   7. CHALLENGE CARD
══════════════════════════════════════════════════ */

.ch-card {
  background:    linear-gradient(135deg, #0a1a10, #051510);
  border:        1px solid rgba(0, 214, 143, .2);
  border-radius: var(--r-xl);
  padding:       var(--space-4);
  margin-bottom: var(--space-3);
  cursor:        pointer;
  transition:    border-color var(--dur-base), transform var(--dur-base);
}
.ch-card:hover     { border-color: rgba(0, 214, 143, .45); transform: translateY(-1px); }
.ch-card.ch-done   { opacity: .6; }
.ch-head           { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.ch-ico            { width: 38px; height: 38px; border-radius: var(--r-md); background: rgba(0, 214, 143, .12); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ch-title          { font-size: var(--text-sm); font-weight: var(--fw-bold); }
.ch-sub            { font-size: var(--text-xs); color: var(--t2); margin-top: 2px; }
.ch-reward         { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--gold); font-weight: var(--fw-semi); }

/* ══════════════════════════════════════════════════
   8. SONG CARDS
══════════════════════════════════════════════════ */

.song-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-2);
}

.s-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--space-3) var(--space-4);
  cursor:        pointer;
  position:      relative;
  overflow:      hidden;
  transition:    border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}

/* Bande de couleur par genre */
.s-card::before {
  content:  '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height:   3px;
}
.s-card.folk::before     { background: linear-gradient(90deg, var(--green), var(--teal)); }
.s-card.blues::before    { background: linear-gradient(90deg, var(--blue), #0080ff); }
.s-card.rock::before     { background: linear-gradient(90deg, var(--red), #ff8040); }
.s-card.classique::before{ background: linear-gradient(90deg, var(--gold), #ffcc00); }
.s-card.afrobeat::before { background: linear-gradient(90deg, var(--teal), var(--green)); }

.s-card:hover {
  border-color: var(--accent);
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
}
.s-card:active    { transform: scale(.98); }
.s-emoji          { font-size: 24px; margin-bottom: 5px; }
.s-title          { font-size: var(--text-sm); font-weight: var(--fw-bold); line-height: 1.3; margin-bottom: 2px; }
.s-artist         { font-size: var(--text-xs); color: var(--t3); }
.s-badges         { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 5px; }
.sb               { font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--r-full); font-weight: var(--fw-semi); }
.sb.b             { background: var(--green-bg); color: var(--green); }
.sb.i             { background: var(--gold-bg);  color: var(--gold); }
.sb.a             { background: var(--red-bg);   color: var(--red); }
.sb.arp           { background: rgba(var(--accent-rgb), .15); color: var(--a3); }

/* ══════════════════════════════════════════════════
   9. SONG VIEWER (plein écran)
══════════════════════════════════════════════════ */

.sv {
  display:        none;
  position:       fixed;
  inset:          0;
  background:     var(--bg);
  z-index:        var(--z-modal);
  flex-direction: column;
  overflow:       hidden;
}
.sv.on { display: flex; animation: slideUp var(--dur-slow) var(--ease) both; }

.sv-top {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  padding:        var(--space-4) var(--space-5);
  border-bottom:  1px solid var(--border);
  flex-shrink:    0;
  background:     var(--bg2);
}

.sv-close {
  width:          32px; height: 32px;
  border-radius:  var(--r-full);
  border:         none;
  background:     var(--bg3);
  color:          var(--t2);
  font-size:      15px;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-shrink:    0;
  transition:     background var(--dur-base), color var(--dur-base);
}
.sv-close:hover { background: var(--bg4); color: var(--text); }

.sv-body {
  flex:                    1;
  overflow-y:              auto;
  -webkit-overflow-scrolling:touch;
  padding:                 var(--space-5);
}

.sv-sec-title {
  font-size:     var(--text-xs);
  font-weight:   var(--fw-bold);
  color:         var(--a2);
  text-transform:uppercase;
  letter-spacing:.5px;
  border-left:   3px solid var(--accent);
  padding-left:  var(--space-2);
  margin-bottom: var(--space-2);
  margin-top:    var(--space-4);
}
.sv-sec-title:first-child { margin-top: 0; }

.sv-text {
  font-size:  var(--text-sm);
  color:      var(--t2);
  line-height:1.75;
  margin-bottom: var(--space-2);
}
.sv-text strong { color: var(--text); }

.sv-footer {
  padding:      var(--space-4) var(--space-5);
  border-top:   1px solid var(--border);
  display:      flex;
  gap:          var(--space-2);
  flex-wrap:    wrap;
  background:   var(--bg2);
}

/* ══════════════════════════════════════════════════
   10. LESSON FLOW (plein écran)
══════════════════════════════════════════════════ */

.lf {
  display:        none;
  position:       fixed;
  inset:          0;
  background:     var(--bg);
  z-index:        var(--z-modal);
  flex-direction: column;
  overflow:       hidden;
}
.lf.on { display: flex; animation: fadeIn var(--dur-base) var(--ease) both; }

/* Barre supérieure */
.lf-top {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  padding:        var(--space-3) var(--space-5);
  border-bottom:  1px solid var(--border);
  flex-shrink:    0;
  background:     var(--bg2);
}

.lf-close {
  width:          32px; height: 32px;
  border-radius:  var(--r-full);
  border:         none;
  background:     var(--bg3);
  color:          var(--t2);
  font-size:      15px;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-shrink:    0;
  transition:     background var(--dur-base);
}
.lf-close:hover { background: var(--bg4); color: var(--text); }

.lf-pb {
  flex:          1;
  height:        6px;
  background:    var(--bg3);
  border-radius: var(--r-full);
  overflow:      hidden;
}
.lf-pb-fill {
  height:        6px;
  border-radius: var(--r-full);
  background:    linear-gradient(90deg, var(--accent), var(--teal));
  transition:    width .4s var(--ease);
}
.lf-meta { font-size: var(--text-xs); color: var(--t3); white-space: nowrap; }
.lf-xp   { font-size: var(--text-sm); color: var(--gold); white-space: nowrap; font-weight: var(--fw-bold); }

/* Corps leçon */
.lf-body {
  flex:                    1;
  overflow-y:              auto;
  -webkit-overflow-scrolling:touch;
}

.lf-screen {
  padding:     var(--space-5);
  display:     flex;
  flex-direction:column;
  gap:         var(--space-3);
  animation:   slideIn var(--dur-base) var(--ease) both;
  min-height:  100%;
}

/* Tag de leçon */
.lf-tag {
  display:       inline-flex;
  align-items:   center;
  background:    rgba(var(--accent-rgb), .12);
  border:        1px solid rgba(var(--accent-rgb), .25);
  border-radius: var(--r-full);
  padding:       4px 12px;
  font-size:     var(--text-xs);
  color:         var(--a3);
  font-weight:   var(--fw-semi);
  letter-spacing:.3px;
  align-self:    flex-start;
}

.lf-title {
  font-size:   22px;
  font-weight: var(--fw-black);
  line-height: 1.2;
  letter-spacing:-.3px;
}

.lf-sub {
  font-size:  var(--text-sm);
  color:      var(--t2);
  line-height:1.6;
}

.lf-visual {
  background:     var(--bg3);
  border:         1px solid var(--border);
  border-radius:  var(--r-xl);
  padding:        var(--space-5);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            var(--space-3);
  min-height:     160px;
  position:       relative;
  overflow:       hidden;
}
.lf-visual::before {
  content:    '';
  position:   absolute;
  top: -40px; right: -40px;
  width:      120px; height: 120px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .08), transparent 70%);
  pointer-events: none;
}

/* Tip pédagogique */
.lf-tip {
  background:    rgba(245, 166, 35, .08);
  border:        1px solid rgba(245, 166, 35, .22);
  border-radius: var(--r-lg);
  padding:       var(--space-3) var(--space-4);
  font-size:     var(--text-sm);
  color:         #f5c842;
  line-height:   1.65;
}
.lf-tip::before { content: '💡 '; }

.lf-text {
  font-size:  var(--text-sm);
  color:      var(--t2);
  line-height:1.75;
}
.lf-text strong { color: var(--text); }

/* Barre de bouton bas */
.lf-bottom {
  padding:      var(--space-4) var(--space-5);
  border-top:   1px solid var(--border);
  flex-shrink:  0;
  background:   var(--bg2);
  /* Safe area iOS */
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.lf-btn {
  width:         100%;
  border:        none;
  border-radius: var(--r-xl);
  padding:       16px;
  font-family:   inherit;
  font-size:     var(--text-md);
  font-weight:   var(--fw-bold);
  cursor:        pointer;
  touch-action:  manipulation;
  transition:    transform var(--dur-fast), box-shadow var(--dur-base), background var(--dur-base);
}
.lf-btn:active   { transform: scale(.98); }
.lf-btn.next {
  background:  linear-gradient(135deg, var(--accent), #5a3af8);
  color:       #fff;
  box-shadow:  0 4px 20px rgba(var(--accent-rgb), .35);
}
.lf-btn.next:hover { box-shadow: 0 6px 28px rgba(var(--accent-rgb), .5); }
.lf-btn.done {
  background:  linear-gradient(135deg, var(--green), var(--green-dk));
  color:       #fff;
  box-shadow:  0 4px 20px rgba(0, 214, 143, .35);
}

/* ══════════════════════════════════════════════════
   11. CHORD DIAGRAM
══════════════════════════════════════════════════ */

.chord-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-2);
  margin-bottom:         var(--space-3);
}

.chord-box {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--space-2) var(--space-3);
  cursor:        pointer;
  text-align:    center;
  transition:    background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast);
}
.chord-box:hover, .chord-box.sel {
  border-color: var(--accent);
  background:   rgba(var(--accent-rgb), .08);
  transform:    translateY(-1px);
}
.chord-box-name { font-size: 15px; font-weight: var(--fw-black); margin-bottom: 2px; }
.chord-box-full { font-size: var(--text-xs); color: var(--t3); }

.chord-detail {
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       var(--space-5);
  margin-top:    var(--space-3);
  display:       flex;
  gap:           var(--space-4);
  align-items:   flex-start;
  flex-wrap:     wrap;
  animation:     fadeIn var(--dur-base) var(--ease) both;
}

.fg { display: flex; flex-direction: column; gap: 5px; }
.fr { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--t2); }
.fd {
  width:          20px; height: 20px;
  border-radius:  var(--r-full);
  background:     var(--accent);
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      9px;
  font-weight:    var(--fw-bold);
  color:          #fff;
  flex-shrink:    0;
}
.fd.o  { background: transparent; border: 2px solid var(--t3); color: var(--t3); }
.fd.x  { background: var(--red); }

.chord-pills {
  display:   flex;
  gap:       var(--space-1);
  flex-wrap: wrap;
  margin:    var(--space-2) 0;
}

/* ══════════════════════════════════════════════════
   12. TUNER (accordeur)
══════════════════════════════════════════════════ */

.tstr-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-2);
  margin-bottom:         var(--space-3);
}

.str-btn {
  background:     var(--card);
  border:         2px solid var(--border);
  border-radius:  var(--r-lg);
  padding:        var(--space-3) var(--space-2);
  text-align:     center;
  cursor:         pointer;
  touch-action:   manipulation;
  transition:     border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
}
.str-btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.str-btn:active { transform: scale(.96); }
.str-btn.playing {
  animation: glow .7s ease-in-out infinite alternate;
}

.ref-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-2);
}
.ref-btn {
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       var(--space-2) var(--space-1);
  text-align:    center;
  cursor:        pointer;
  touch-action:  manipulation;
  transition:    border-color var(--dur-base), background var(--dur-base);
}
.ref-btn:hover, .ref-btn.playing {
  border-color: var(--accent);
  background:   rgba(var(--accent-rgb), .1);
}

/* Aiguille SVG */
.needle-svg {
  display:         flex;
  justify-content: center;
  margin-bottom:   var(--space-2);
}

/* ══════════════════════════════════════════════════
   13. MÉTRONOME
══════════════════════════════════════════════════ */

.metro-dot {
  width:          16px;
  height:         16px;
  border-radius:  var(--r-full);
  background:     var(--border);
  transition:     background var(--dur-fast), transform var(--dur-fast);
  flex-shrink:    0;
}
.metro-dot.beat {
  background: var(--a2);
  transform:  scale(1.4);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .6);
}
.metro-dot.beat-accent {
  background: var(--teal);
  transform:  scale(1.6);
  box-shadow: 0 0 12px rgba(0, 200, 171, .7);
}

.m-bpm {
  font-size:     52px;
  font-weight:   var(--fw-black);
  color:         var(--a2);
  letter-spacing:-2px;
  line-height:   1;
  transition:    color var(--dur-fast);
}
.m-btn {
  width:         36px;
  height:        36px;
  border-radius: var(--r-md);
  border:        1px solid var(--border);
  background:    var(--bg3);
  color:         var(--text);
  font-family:   inherit;
  font-size:     var(--text-sm);
  cursor:        pointer;
  touch-action:  manipulation;
  transition:    background var(--dur-base);
  flex-shrink:   0;
}
.m-btn:hover  { background: var(--bg4); }
.m-btn:active { transform: scale(.93); }

/* ══════════════════════════════════════════════════
   14. COACH IA
══════════════════════════════════════════════════ */

.coach-box {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  overflow:      hidden;
  margin-bottom: var(--space-4);
}

.c-hdr {
  background:   var(--bg3);
  padding:      var(--space-3) var(--space-4);
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  border-bottom:1px solid var(--border);
}
.c-av {
  width:          34px; height: 34px;
  border-radius:  var(--r-full);
  background:     linear-gradient(135deg, var(--accent), var(--teal));
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      18px;
  flex-shrink:    0;
}

.msgs {
  padding:                 var(--space-3);
  min-height:              180px;
  max-height:              300px;
  overflow-y:              auto;
  display:                 flex;
  flex-direction:          column;
  gap:                     var(--space-2);
  -webkit-overflow-scrolling:touch;
  scroll-behavior:         smooth;
}

.msg {
  max-width:    86%;
  font-size:    var(--text-sm);
  line-height:  1.65;
  padding:      9px 13px;
  border-radius:var(--r-lg);
  animation:    slideIn var(--dur-base) var(--ease) both;
  word-break:   break-word;
}
.msg.c {
  background:          var(--bg3);
  color:               var(--text);
  align-self:          flex-start;
  border-bottom-left-radius: 3px;
}
.msg.u {
  background:          linear-gradient(135deg, var(--accent), #5a3af8);
  color:               #fff;
  align-self:          flex-end;
  border-bottom-right-radius: 3px;
}
.msg.t {
  color:      var(--t3);
  font-style: italic;
  align-self: flex-start;
  animation:  pulse 1.2s infinite;
}
.msg.e {
  background:     rgba(255, 77, 109, .1);
  border:         1px solid rgba(255, 77, 109, .2);
  color:          var(--red);
  align-self:     flex-start;
  border-radius:  var(--r-md);
}

.c-inp {
  border-top: 1px solid var(--border);
  padding:    var(--space-2);
  display:    flex;
  gap:        var(--space-1);
}
.c-inp input {
  flex:          1;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       9px 12px;
  font-family:   inherit;
  font-size:     var(--text-sm);
  color:         var(--text);
  outline:       none;
  min-width:     0;
  transition:    border-color var(--dur-base);
}
.c-inp input:focus        { border-color: var(--accent); }
.c-inp input::placeholder { color: var(--t3); }
.c-inp button {
  background:    linear-gradient(135deg, var(--accent), #5a3af8);
  border:        none;
  border-radius: var(--r-md);
  padding:       9px 14px;
  color:         #fff;
  font-size:     16px;
  cursor:        pointer;
  flex-shrink:   0;
  touch-action:  manipulation;
  transition:    transform var(--dur-fast);
}
.c-inp button:active { transform: scale(.93); }

/* Indicateur statut API */
.api-dot {
  width:          8px; height: 8px;
  border-radius:  var(--r-full);
  display:        inline-block;
  margin-right:   5px;
  flex-shrink:    0;
}
.api-dot.ok  { background: var(--green); }
.api-dot.err { background: var(--red); }
.api-dot.chk { background: var(--gold); animation: blink 1s infinite; }

/* ══════════════════════════════════════════════════
   15. PROFILE
══════════════════════════════════════════════════ */

.week-bars {
  display:     flex;
  gap:         5px;
  align-items: flex-end;
  height:      70px;
}
.wb-wrap {
  flex:        1;
  display:     flex;
  flex-direction:column;
  align-items: center;
  gap:         3px;
}
.wb {
  width:         100%;
  border-radius: 4px 4px 0 0;
  transition:    height .5s var(--ease);
  min-height:    3px;
}
.wb-lbl { font-size: var(--text-xs); color: var(--t3); }

.badge {
  width:          46px; height: 46px;
  border-radius:  var(--r-lg);
  background:     var(--bg3);
  border:         1px solid var(--border);
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      22px;
  transition:     transform var(--dur-base), box-shadow var(--dur-base);
  cursor:         default;
}
.badge.ok {
  border-color: var(--gold);
  background:   linear-gradient(135deg, #1a1200, #2a1a00);
  box-shadow:   0 0 10px rgba(245, 166, 35, .25);
}
.badge.ok:hover { transform: scale(1.1); }
.badge.locked   { opacity: .3; filter: grayscale(1); }

/* ══════════════════════════════════════════════════
   16. ADMIN
══════════════════════════════════════════════════ */

.admin-user-row {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         var(--space-2) var(--space-4);
  border-bottom:   .5px solid var(--border);
  transition:      background var(--dur-base);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row:hover      { background: var(--bg3); }

/* ══════════════════════════════════════════════════
   17. LEVEL-UP OVERLAY
══════════════════════════════════════════════════ */

.lvlup-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      var(--modal-bg);
  z-index:         var(--z-top);
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4);
}
.lvlup-overlay.on {
  display:   flex;
  animation: fadeIn var(--dur-slow) var(--ease) both;
}

.lvlup-card {
  background:    linear-gradient(135deg, #1a0d38, #0d1a38);
  border:        2px solid var(--accent);
  border-radius: var(--r-2xl);
  padding:       2.5rem var(--space-8);
  text-align:    center;
  max-width:     340px;
  width:         100%;
  animation:     scaleIn var(--dur-slow) var(--ease-spring) both;
  position:      relative;
  overflow:      hidden;
}
.lvlup-card::before {
  content:        '';
  position:       absolute;
  top: -60px; left: 50%;
  transform:      translateX(-50%);
  width:          200px; height: 200px;
  background:     radial-gradient(circle, rgba(var(--accent-rgb), .25), transparent 70%);
  pointer-events: none;
}

#lvlup-icon  { font-size: 56px; margin-bottom: var(--space-2); display: block; }
#lvlup-title {
  font-size:     24px;
  font-weight:   var(--fw-black);
  color:         var(--a2);
  margin-bottom: var(--space-1);
  letter-spacing:-.5px;
}
#lvlup-name  { font-size: var(--text-base); color: var(--t2); margin-bottom: var(--space-4); }

/* Confetti effect (CSS only) */
.lvlup-card::after {
  content:     '🎉';
  position:    absolute;
  top:         10px; right: 16px;
  font-size:   28px;
  animation:   pulse 1.5s infinite;
}

/* ══════════════════════════════════════════════════
   18. TOAST
══════════════════════════════════════════════════ */

#gm-toast {
  position:      fixed;
  bottom:        calc(var(--botnav-h) + 12px);
  left:          50%;
  transform:     translateX(-50%);
  color:         #fff;
  padding:       10px 20px;
  border-radius: var(--r-xl);
  font-size:     var(--text-sm);
  font-weight:   var(--fw-bold);
  z-index:       var(--z-toast);
  opacity:       0;
  transition:    opacity .3s var(--ease);
  white-space:   nowrap;
  max-width:     90vw;
  text-align:    center;
  box-shadow:    var(--shadow-lg);
  pointer-events:none;
}
@media (min-width: 641px) {
  #gm-toast { bottom: 24px; }
}

/* ══════════════════════════════════════════════════
   19. TAB BOX (tablature ASCII)
══════════════════════════════════════════════════ */

.tab-box {
  background:    #050510;
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--space-4);
  font-family:   var(--font-mono);
  font-size:     13px;
  overflow-x:    auto;
  width:         100%;
  line-height:   1.9;
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
}
.tab-box::-webkit-scrollbar       { height: 4px; }
.tab-box::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: var(--r-full); }

.tab-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin:      1px 0;
}
.tab-sn {
  color:       var(--a2);
  font-weight: var(--fw-bold);
  width:       18px;
  flex-shrink: 0;
}
.tab-ln {
  color:          var(--t2);
  letter-spacing: 1.5px;
  white-space:    nowrap;
}
.tab-cm {
  font-size: var(--text-xs);
  color:     var(--t3);
  margin:    2px 0;
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════
   20. PIMA LEGEND (fingerstyle)
══════════════════════════════════════════════════ */

.pima-legend {
  display:     flex;
  gap:         var(--space-2);
  flex-wrap:   wrap;
  align-items: center;
  margin:      var(--space-2) 0 var(--space-3);
}
.pima-dot {
  width:          22px; height: 22px;
  border-radius:  var(--r-full);
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      11px;
  font-weight:    var(--fw-bold);
  color:          #fff;
  flex-shrink:    0;
}

/* ══════════════════════════════════════════════════
   21. BACKING TRACK
══════════════════════════════════════════════════ */

.bt-card {
  background:    linear-gradient(135deg, #0a1a10, #051510);
  border:        1px solid rgba(0, 214, 143, .2);
  border-radius: var(--r-xl);
  padding:       var(--space-4);
  margin-bottom: var(--space-4);
}

.bt-pat-btn {
  font-size:     var(--text-sm);
  padding:       5px 11px;
  border-radius: var(--r-md);
  border:        1px solid var(--border);
  background:    var(--bg4);
  color:         var(--t2);
  cursor:        pointer;
  touch-action:  manipulation;
  transition:    background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.bt-pat-btn.on, .bt-pat-btn:hover {
  background:    rgba(0, 214, 143, .13);
  border-color:  var(--green);
  color:         var(--green);
}

/* ══════════════════════════════════════════════════
   22. OVERLAYS (auth, fullscreen)
══════════════════════════════════════════════════ */

#auth-overlay {
  position:        fixed;
  inset:           0;
  background:      var(--bg);
  z-index:         var(--z-auth);
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4);
  overflow-y:      auto;
}
/* Affiché via JS (style="display:flex") */

/* Fond modal générique */
.modal-backdrop {
  position:        fixed;
  inset:           0;
  background:      var(--modal-bg);
  z-index:         var(--z-overlay);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4);
  animation:       fadeIn var(--dur-base) var(--ease) both;
}

.modal-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--r-2xl);
  padding:       2rem;
  width:         100%;
  max-width:     440px;
  box-shadow:    var(--shadow-lg);
  animation:     scaleIn var(--dur-slow) var(--ease-spring) both;
}