/* ═══════════════════════════════════════════════════
   GuitarMaster — responsive.css
   Dépend de : base.css, components.css

   Stratégie : Mobile-first adaptatif
   ─────────────────────────────────
   Base     → mobile  (< 640px)
   sm       → 640px+  (tablettes portrait)
   md       → 768px+  (tablettes paysage)
   lg       → 900px+  (petits desktops)
   xl       → 1200px+ (grands desktops)
   2xl      → 1440px+ (très grands écrans)

   Breakpoints enregistrés comme custom properties
   pour cohérence avec JS si besoin :
   --bp-sm: 640px  --bp-md: 768px
   --bp-lg: 900px  --bp-xl: 1200px
═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   BASE — Mobile d'abord (< 640px)
   La sidebar et la topbar sont masquées,
   le bottom nav et le mob-hdr sont visibles.
══════════════════════════════════════════════════ */

/* Topbar masquée sur mobile */
.topbar        { display: none; }

/* Mobile header visible */
.mob-hdr       { display: flex; }

/* Sidebar masquée */
.sidebar       { display: none; }

/* Bottom nav visible */
.botnav        { display: flex; }

/* Main sans padding-bottom additionnel
   (le safe-area est géré dans components.css .lf-bottom) */
.main          { padding-bottom: 0; }

/* ── Hero mobile ── */
.hero {
  padding: 2rem 1.1rem 1.75rem;
}
.hero-stats {
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-stat-num { font-size: 20px; }

/* ── Sections mobiles ── */
.sec { padding: var(--space-4); }

/* ── Stat row : 2 colonnes sur mobile ── */
.stat-row {
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-2);
}

/* ── Song grid : 2 colonnes serrées ── */
.song-grid {
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-2);
}

/* ── Chord grid : 3 colonnes sur mobile ── */
.chord-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Chord detail : colonne sur mobile ── */
.chord-detail {
  flex-direction: column;
  align-items:    center;
}

/* ── Lesson flow : titre légèrement réduit ── */
.lf-title { font-size: 19px; }
.lf-screen { padding: var(--space-4); }

/* ── Song viewer ── */
.sv-top  { padding: var(--space-3) var(--space-4); }
.sv-body { padding: var(--space-4); }

/* ── Métronome presets : scroll horizontal ── */
#metro-presets {
  display:                  flex;
  overflow-x:               auto;
  gap:                      var(--space-1);
  scrollbar-width:          none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:           var(--space-1);
}
#metro-presets::-webkit-scrollbar { display: none; }

/* ── Admin stat row ── */
#panel-admin .stat-row {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Level-up card ── */
.lvlup-card { padding: 2rem var(--space-5); }

/* ── Tab box scroll ── */
.tab-box { font-size: 12px; }

/* ── Today card ── */
.today-card { padding: var(--space-4); }

/* ── Challenge card ── */
.ch-card { padding: var(--space-3) var(--space-4); }

/* ── Course scroll : cartes plus étroites ── */
.c-card { min-width: 138px; }

/* ── Week bars : hauteur réduite ── */
.week-bars { height: 60px; }

/* ── Pima legend : compact ── */
.pima-legend { gap: var(--space-1); }

/* ── Backing track : BPM slider ── */
.bt-card { padding: var(--space-3); }

/* ── Tabs overflow scroll ── */
.tabs {
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
.tab { flex-shrink: 0; min-width: auto; }

/* ══════════════════════════════════════════════════
   SM — 640px+ (tablettes portrait, grands téléphones)
══════════════════════════════════════════════════ */
@media (min-width: 640px) {

  /* Topbar visible, mob-hdr masqué */
  .topbar  { display: flex; }
  .mob-hdr { display: none; }

  /* Sidebar visible, bottom nav masqué */
  .sidebar { display: block; }
  .botnav  { display: none; }

  /* Hero */
  .hero        { padding: 2.5rem 2rem 2rem; }
  .hero-stats  { gap: 1.5rem; flex-wrap: nowrap; }

  /* Sections */
  .sec { padding: var(--space-5); }

  /* Stat row : 4 colonnes */
  .stat-row { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }

  /* Song grid : 2 colonnes confortables */
  .song-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  /* Chord grid : 4 colonnes */
  .chord-grid { grid-template-columns: repeat(4, 1fr); }

  /* Chord detail : row */
  .chord-detail { flex-direction: row; align-items: flex-start; }

  /* Lesson flow */
  .lf-title  { font-size: 22px; }
  .lf-screen { padding: var(--space-5); }

  /* Song viewer */
  .sv-top  { padding: var(--space-4) var(--space-5); }
  .sv-body { padding: var(--space-5); }

  /* Admin */
  #panel-admin .stat-row { grid-template-columns: repeat(4, 1fr); }

  /* Tab box */
  .tab-box { font-size: 13px; }

  /* Presets métronome */
  #metro-presets {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    overflow-x:            visible;
    padding-bottom:        0;
  }

  /* Course scroll */
  .c-card { min-width: 155px; }

  /* Week bars */
  .week-bars { height: 70px; }

  /* Toast en bas centre (pas au-dessus du bottom nav) */
  #gm-toast { bottom: 24px; }
}

/* ══════════════════════════════════════════════════
   MD — 768px+ (tablettes paysage)
══════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Song grid : 3 colonnes */
  .song-grid { grid-template-columns: repeat(3, 1fr); }

  /* Chord grid : 4 colonnes avec plus d'espace */
  .chord-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

  /* Hero plus généreux */
  .hero { padding: 3rem 2.5rem 2.5rem; }
  .hero-stat-num { font-size: 24px; }

  /* Stat row plus d'espace */
  .stat-row { gap: var(--space-3); }
  .stat-num { font-size: 24px; }

  /* Today card */
  .today-card { padding: 1.25rem; }

  /* Lesson flow title */
  .lf-title { font-size: 24px; }

  /* Presets métronome : 10 colonnes */
  #metro-presets { grid-template-columns: repeat(10, 1fr); }

  /* Week bars */
  .week-bars { height: 80px; }

  /* Level-up card */
  .lvlup-card { padding: 2.5rem 3rem; }

  /* Admin grid contenu : 3 colonnes */
  #admin-content-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════
   LG — 900px+ (petits desktops)
══════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* Sidebar légèrement plus large */
  :root { --sidebar-w: 210px; }

  /* Song grid : 3 colonnes */
  .song-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

  /* Hero plus grand */
  .hero { padding: 3.5rem 3rem 3rem; }

  /* Chord grid : 5 colonnes (plus de place) */
  .chord-grid { grid-template-columns: repeat(5, 1fr); }

  /* Stat row 4 colonnes avec espace généreux */
  .stat-row { gap: var(--space-4); }

  /* Today card : layout horizontal possible */
  .today-card { padding: 1.5rem; }

  /* Tab box */
  .tab-box { font-size: 14px; }

  /* Lesson visual plus haute */
  .lf-visual { min-height: 200px; }

  /* Section header */
  .sec-hd { margin-bottom: var(--space-5); }

  /* Coach messages : plus hauts */
  .msgs { max-height: 360px; }
}

/* ══════════════════════════════════════════════════
   XL — 1200px+ (grands desktops)
══════════════════════════════════════════════════ */
@media (min-width: 1200px) {

  /* Sidebar encore plus large */
  :root { --sidebar-w: 220px; }

  /* Content max width centré dans .main */
  .main > .panel > .sec {
    max-width: var(--content-max);
    margin-left:  auto;
    margin-right: auto;
  }
  /* Hero toujours pleine largeur */
  .main > .panel > .hero {
    max-width: none;
    margin: 0;
  }

  /* Song grid : 4 colonnes sur grands écrans */
  .song-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

  /* Chord grid : 6 colonnes */
  .chord-grid { grid-template-columns: repeat(6, 1fr); }

  /* Hero titre plus grand */
  .hero-title  { letter-spacing: -1.5px; }
  .hero-stat-num { font-size: 26px; }

  /* Stat num */
  .stat-num { font-size: 26px; }

  /* Coach messages */
  .msgs { max-height: 420px; }

  /* Level-up card plus large */
  .lvlup-card { max-width: 400px; }

  /* Lesson flow centré sur grands écrans */
  .lf-body { display: flex; flex-direction: column; align-items: center; }
  .lf-screen { max-width: 680px; width: 100%; }
  .lf-bottom { display: flex; justify-content: center; }
  .lf-bottom .lf-btn { max-width: 480px; }
}

/* ══════════════════════════════════════════════════
   2XL — 1440px+ (très grands écrans)
══════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  :root {
    --sidebar-w:   240px;
    --content-max: 1000px;
  }

  /* Song grid : 4 colonnes bien espacées */
  .song-grid { gap: var(--space-5); }

  /* Chord grid : 6 colonnes + grand */
  .chord-grid { gap: var(--space-3); }

  /* Hero très généreux */
  .hero { padding: 4rem 4rem 3.5rem; }

  /* Stat cards */
  .stat-card { padding: var(--space-4); }
  .stat-num  { font-size: 28px; }

  /* Coach box */
  .msgs { max-height: 480px; }
}

/* ══════════════════════════════════════════════════
   NARROW MOBILE — < 380px (très petits téléphones)
══════════════════════════════════════════════════ */
@media (max-width: 379px) {

  /* Song grid : 1 colonne sur très petits écrans */
  .song-grid { grid-template-columns: 1fr; }

  /* Chord grid : 3 colonnes resserrées */
  .chord-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
  .chord-box  { padding: var(--space-1) var(--space-2); }
  .chord-box-name { font-size: 13px; }

  /* Hero stats enroulés */
  .hero-stats { gap: var(--space-3); flex-wrap: wrap; }
  .hero-stat-num { font-size: 18px; }

  /* Bottom nav labels masqués */
  .bn span:last-child { display: none; }
  .bn .ico            { font-size: 24px; }
  .botnav             { height: 52px; }

  /* Stat row : 2 colonnes compactes */
  .stat-row { gap: var(--space-1); }
  .stat-num { font-size: 18px; }
  .stat-lbl { font-size: 8px; }

  /* Today card compact */
  .today-card { padding: var(--space-3); border-radius: var(--r-lg); }

  /* Lesson flow */
  .lf-title  { font-size: 17px; }
  .lf-screen { padding: var(--space-3); gap: var(--space-2); }
  .lf-visual { min-height: 130px; padding: var(--space-3); }
  .lf-tip    { font-size: 11px; padding: var(--space-2) var(--space-3); }
  .lf-btn    { padding: 13px; font-size: var(--text-md); }

  /* Tabs */
  .tab { font-size: 10px; padding: 6px var(--space-1); }

  /* Pills */
  .pill { padding: 3px 7px; font-size: 10px; }

  /* Mob logo */
  .mob-logo  { font-size: 14px; }

  /* Tab box */
  .tab-box   { font-size: 11px; padding: var(--space-3); }
  .tab-sn    { width: 14px; }

  /* Admin grid : 1 colonne */
  #panel-admin .grid-2 { grid-template-columns: 1fr; }

  /* Challenge icon réduit */
  .ch-ico    { width: 32px; height: 32px; font-size: 15px; }

  /* Badge réduit */
  .badge     { width: 38px; height: 38px; font-size: 18px; }
}

/* ══════════════════════════════════════════════════
   ORIENTATION PAYSAGE MOBILE
   (iPhone en landscape, hauteur réduite)
══════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {

  /* Bottom nav très compact */
  .botnav       { height: 48px; }
  .bn .ico      { font-size: 18px; }
  .bn span:last-child { display: none; }

  /* Hero réduit */
  .hero         { padding: 1.25rem 1.5rem 1rem; }
  .hero-title   { font-size: 22px; }
  .hero-sub     { display: none; }
  .hero-stats   { margin-top: 1rem; padding-top: 1rem; gap: 1rem; }
  .hero-stat-num{ font-size: 18px; }

  /* Today card compact */
  .today-card   { padding: var(--space-3); margin-bottom: var(--space-3); }
  .t-title      { font-size: 15px; }

  /* Lesson flow : layout adapté */
  .lf-visual    { min-height: 100px; }
  .lf-title     { font-size: 17px; }
  .lf-screen    { gap: var(--space-2); padding: var(--space-3); }

  /* Song viewer */
  .sv-top       { padding: var(--space-2) var(--space-4); }

  /* Métronome */
  .m-bpm        { font-size: 40px; }

  /* Coach messages */
  .msgs         { max-height: 200px; }

  /* Mob header plus compact */
  .mob-hdr      { height: 42px; }
  :root         { --mob-hdr-h: 42px; }
}

/* ══════════════════════════════════════════════════
   DARK MODE SYSTEM (prefers-color-scheme)
   Activé si aucun data-theme explicite n'est posé.
   data-theme="light" sur <html> override ceci.
══════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    /* On reste en dark par défaut pour GuitarMaster,
       mais on adoucit légèrement pour les utilisateurs
       qui préfèrent le light sans avoir choisi de thème. */
    --bg:    #0f0f1a;
    --bg2:   #161625;
    --bg3:   #1e1e32;
    --card:  #191930;
  }
}

/* ══════════════════════════════════════════════════
   TOUCH DEVICES — suppression des hover desktop
   qui peuvent rester actifs sur mobile
══════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* Pas de transform au hover sur touch */
  .c-card:hover,
  .s-card:hover,
  .lv-card:hover,
  .ch-card:hover,
  .today-card:hover,
  .chord-box:hover,
  .btn-p:hover,
  .btn-ok:hover,
  .btn-d:hover,
  .hero-cta:hover,
  .cta-btn:hover {
    transform:  none;
    box-shadow: none;
  }

  /* Feedback uniquement sur :active */
  .s-card:active   { transform: scale(.97); }
  .c-card:active   { transform: scale(.97); }
  .ch-card:active  { opacity: .85; }
  .btn:active      { transform: scale(.96); }
  .cta-btn:active  { transform: scale(.97); }
  .hero-cta:active { transform: scale(.98); }

  /* Tap target minimum 44px (WCAG 2.5.5) */
  .btn, .tab, .bn, .sb-it, .tnav, .str-btn, .ref-btn, .m-btn {
    min-height: 44px;
  }
  .bn { min-height: 52px; }

  /* Scrollbars masquées sur touch */
  .sidebar, .msgs, .c-scroll, .scroll-x, .tabs {
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar,
  .msgs::-webkit-scrollbar,
  .c-scroll::-webkit-scrollbar,
  .scroll-x::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
}

/* ══════════════════════════════════════════════════
   HIGH-DPI / RETINA
══════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Bordures plus fines sur Retina */
  .topbar, .sidebar, .mob-hdr, .botnav,
  .card, .stat-card, .chord-box, .c-card,
  .s-card, .tab-box, .lf-top, .sv-top {
    border-width: 0.5px;
  }

  /* Ligne de séparation plus fine */
  .admin-user-row   { border-bottom-width: 0.5px; }
  .lv-card          { border-width: 0.5px; }
  .today-card       { border-width: 0.5px; }
  .ch-card          { border-width: 0.5px; }
}

/* ══════════════════════════════════════════════════
   SIDEBAR RESPONSIVE DÉTAILLÉ
══════════════════════════════════════════════════ */

/* Sidebar réduite entre 640px et 768px */
@media (min-width: 640px) and (max-width: 767px) {
  :root            { --sidebar-w: 52px; }
  .sb-hd           { display: none; }
  .sb-it span:not(.ic) { display: none; }
  .sb-it           { justify-content: center; padding: var(--space-3) 0; border-left: none; border-right: 3px solid transparent; }
  .sb-it.on        { border-left: none; border-right-color: var(--accent); }
  .sb-it .ic       { width: auto; font-size: 18px; }
  .sbb             { display: none; }
}

/* Sidebar normale 768px+ */
@media (min-width: 768px) {
  :root { --sidebar-w: 200px; }
  .sb-hd           { display: block; }
  .sb-it span:not(.ic) { display: inline; }
  .sb-it           { border-left: 3px solid transparent; border-right: none; }
  .sbb             { display: inline-flex; }
}

/* ══════════════════════════════════════════════════
   TOPBAR RESPONSIVE DÉTAILLÉ
══════════════════════════════════════════════════ */

/* Topbar compacte entre 640px et 900px */
@media (min-width: 640px) and (max-width: 899px) {

  /* Masquer certains items nav pour éviter overflow */
  .tnav[data-panel="metro"],
  .tnav[data-panel="chords"] {
    display: none;
  }

  /* Pills plus compactes */
  .pill { padding: 3px 8px; font-size: 10px; }

  /* Logo plus petit */
  .logo  { font-size: 15px; }

  /* Tnav plus compact */
  .tnav  { font-size: 10px; padding: 5px var(--space-2); }
}

/* Topbar complète 900px+ */
@media (min-width: 900px) {
  .tnav[data-panel="metro"],
  .tnav[data-panel="chords"] {
    display: inline-flex;
  }
  .logo  { font-size: 17px; }
  .tnav  { font-size: var(--text-sm); padding: 5px var(--space-3); }
  .pill  { padding: 4px 10px; font-size: var(--text-sm); }
}

/* ══════════════════════════════════════════════════
   GRILLES RESPONSIVES SPÉCIFIQUES
══════════════════════════════════════════════════ */

/* Tuner : 2 col sur mobile, 3 col sur sm+ */
.tstr-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 400px) {
  .tstr-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
  .tstr-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Ref grid accordeur */
.ref-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 640px) {
  .ref-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Admin content grid */
#admin-content-grid,
.admin-content-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-3);
}
@media (min-width: 768px) {
  #admin-content-grid,
  .admin-content-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Metro dots : wrap sur mobile */
#metro-dots {
  display:    flex;
  gap:        var(--space-2);
  justify-content: center;
  flex-wrap:  wrap;
}

/* Metro styles grid */
#metro-styles {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-1);
}
@media (min-width: 640px) {
  #metro-styles { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  #metro-styles { grid-template-columns: repeat(5, 1fr); }
}

/* Badge grid profile */
#p-badges {
  display:    flex;
  gap:        var(--space-2);
  flex-wrap:  wrap;
}

/* Pima legend wrap */
.pima-legend {
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════
   PRINT (override responsive)
══════════════════════════════════════════════════ */
@media print {
  .botnav, .mob-hdr, .topbar, .sidebar { display: none !important; }
  .main   { overflow: visible !important; }
  .shell  { display: block !important; }

  /* Force toutes les grilles à 1 colonne pour impression */
  .song-grid,
  .chord-grid,
  .stat-row,
  .tstr-grid,
  .ref-grid,
  #admin-content-grid { grid-template-columns: 1fr !important; }
}