/* ===== FretBlade — thème « Liquid Glass » (inspiré du design Apple présenté à la WWDC25 : iOS 26 / macOS Tahoe) =====
 * Chargé après style.css. Principes :
 *  - verre liquide : surfaces translucides floutées, reflet lumineux sur les bords, posées au-dessus du contenu ;
 *  - barre d'onglets flottante en capsule, « lentille » de verre sous l'onglet actif ;
 *  - formes très arrondies et concentriques ; feuilles flottantes décollées des bords ;
 *  - fond d'ambiance sombre avec halos miel / argent (le verre a quelque chose à réfracter) ;
 *  - police système Apple, grands titres, accent miel sobre. */
:root {
  --bg: #050507;
  --bg2: rgba(255, 255, 255, .06);
  --card: rgba(255, 255, 255, .055);
  --card2: rgba(255, 255, 255, .08);
  --glass: rgba(255, 255, 255, .07);
  --glass-strong: rgba(255, 255, 255, .12);
  --glass-edge: rgba(255, 255, 255, .16);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 1px 0 0 rgba(255, 255, 255, .05);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --fill: rgba(255, 255, 255, .09);
  --fill2: rgba(255, 255, 255, .14);
  --line: rgba(255, 255, 255, .09);
  --text: #ffffff;
  --muted: rgba(235, 235, 245, .62);
  --muted2: rgba(235, 235, 245, .32);
  --silver: #d1d1d6;
  --accent: #f2a93b;
  --accent2: #ffffff;
  --accent-ink: #1a1206;
  --honey: #ffc56b;
  --radius: 22px;
  --nav-h: 64px;
}

/* --- fond d'ambiance : halos miel et argent très flous (fixes) --- */
html { background: #050507 !important; }
body { background: transparent !important; }  /* sinon le fond opaque du body cache les halos colorés */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)) !important;
}
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(242, 169, 59, .28), transparent 70%),
    radial-gradient(30% 26% at 88% 30%, rgba(209, 209, 214, .14), transparent 70%),
    radial-gradient(42% 34% at 70% 92%, rgba(214, 138, 34, .20), transparent 70%),
    radial-gradient(30% 30% at 10% 75%, rgba(150, 150, 170, .10), transparent 70%),
    #050507;
  filter: blur(10px);
}

/* --- typographie --- */
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #fff; margin: 18px 0 8px; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.large-title { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin: 4px 6px 14px; color: #fff; }

/* --- matériau « verre liquide » commun --- */
.top .tuning-badge, .top .icon-btn, .card, .nav, .sheet-panel, .install-bar, .seg, .st-strip-wrap, .toast {
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}

/* --- en-tête : plus de barre pleine, des commandes en verre qui flottent --- */
.top { background: linear-gradient(rgba(5, 5, 7, .85), rgba(5, 5, 7, 0)) !important; border-bottom: 0; padding-bottom: 14px; }
.brand { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand-name { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; }
.brand .logo svg { filter: drop-shadow(0 0 8px rgba(242, 169, 59, .35)); }
.top .tuning-badge, .top .icon-btn {
  background: var(--glass) !important; border: .5px solid var(--glass-edge); box-shadow: var(--glass-shine), 0 4px 14px rgba(0, 0, 0, .3);
  color: #fff; font-weight: 500; font-size: 13px; border-radius: 999px;
}
.top .tuning-badge { padding: 7px 13px; }
.top .icon-btn { min-width: 36px; height: 36px; }

/* --- cartes : panneaux de verre très arrondis --- */
.card {
  background: var(--card) !important; border: .5px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: var(--glass-shine), var(--glass-shadow) !important; padding: 16px;
}
main { padding-top: 6px; }

/* --- boutons en verre ; principal = verre teinté miel --- */
.btn {
  background: var(--fill); border: .5px solid var(--glass-edge); border-radius: 999px; color: #fff; font-weight: 600;
  padding: 10px 17px; letter-spacing: -0.01em; box-shadow: var(--glass-shine);
}
.btn.sm { padding: 7px 13px; }
.btn.big { padding: 14px 20px; font-size: 17px; }
.btn.primary {
  background: linear-gradient(180deg, rgba(255, 196, 110, .95), rgba(242, 169, 59, .92)) !important; color: #1a1206 !important;
  border: .5px solid rgba(255, 220, 160, .7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(160, 90, 10, .35), 0 8px 22px rgba(242, 169, 59, .28) !important;
}
.btn.danger { color: #ff6961; }
.btn:active, .chip:active, .icon-btn:active { transform: scale(.96); }
.icon-btn { background: var(--fill); border: .5px solid var(--glass-edge); border-radius: 999px; min-width: 36px; height: 36px; color: #fff; box-shadow: var(--glass-shine); }

/* --- capsules --- */
.chip { background: var(--fill); border: .5px solid var(--glass-edge); color: #fff; font-weight: 500; padding: 7px 14px; box-shadow: var(--glass-shine); }
.chip.on, .mood-btn.on {
  background: linear-gradient(180deg, rgba(255, 196, 110, .95), rgba(242, 169, 59, .9)) !important; color: #1a1206 !important;
  border: .5px solid rgba(255, 220, 160, .7) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}
.roots .chip { padding: 9px 0; }
.pill { background: var(--fill); border: .5px solid var(--line); color: #fff; }
.pill b { color: var(--honey); }
.playbtn { background: var(--fill); border: .5px solid var(--glass-edge); color: var(--honey); box-shadow: var(--glass-shine); }

/* --- contrôle segmenté : piste de verre + curseur de verre --- */
.seg { background: var(--fill); border: .5px solid var(--glass-edge); border-radius: 999px; padding: 3px; box-shadow: var(--glass-shine); }
.seg button { color: rgba(255, 255, 255, .85); font-weight: 500; font-size: 13px; border-radius: 999px; padding: 8px 6px; }
.seg button.on { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .25); }

/* --- listes groupées à filets fins (dans les panneaux de verre) --- */
.degrees, .lessons, .songlist, .takes { gap: 0; }
.deg, .lesson-card, .song-row, .take, .tadv, .plan-sec {
  background: transparent; border: 0; border-radius: 0; border-bottom: .5px solid var(--line); box-shadow: none;
}
.deg { padding: 12px 2px; }
.deg:last-child, .lesson-card:last-child, .song-row:last-child, .take:last-child, .plan-sec:last-child { border-bottom: 0; }
.lessons {
  background: var(--card); border: .5px solid var(--glass-edge); border-radius: var(--radius); padding: 0 16px; margin-bottom: 14px;
  box-shadow: var(--glass-shine), var(--glass-shadow); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
.card .lessons { background: transparent; border: 0; padding: 0; box-shadow: none; }
.lesson-card { padding: 12px 22px 12px 0; position: relative; }
.lesson-card::after, .song-row::after { content: "›"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--muted2); font-size: 22px; }
.song-row { position: relative; padding: 12px 22px 12px 0; }
.l-icon {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: #1a1206; font-size: 16px;
  background: linear-gradient(180deg, #ffd08a, #f2a93b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.deg-roman { color: var(--honey); font-family: inherit; font-weight: 600; font-size: 18px; min-width: 46px; }
.deg-name { font-weight: 600; }
.prog { border-top: .5px solid var(--line); }
.mood-btn { background: var(--fill); border: .5px solid var(--glass-edge); border-radius: 16px; box-shadow: var(--glass-shine); }

/* --- accords --- */
.chord-title, .tadv-name { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; font-weight: 700; letter-spacing: -0.035em; }
.thumbs .thumb { background: var(--fill); border: .5px solid var(--glass-edge); border-radius: 16px; box-shadow: var(--glass-shine); }
.thumbs .thumb.on { background: rgba(242, 169, 59, .16); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cchip { background: var(--fill); border: .5px solid var(--glass-edge); border-radius: 16px; box-shadow: var(--glass-shine); }
.cchip.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cchip span { color: var(--honey); font-family: inherit; font-weight: 600; }
.editor, .gen-result, .rec-live { background: rgba(255, 255, 255, .04); border: .5px solid var(--line); border-radius: 18px; }
.tip { background: rgba(242, 169, 59, .12); border: .5px solid rgba(242, 169, 59, .3); border-radius: 16px; color: #fff; }
.field select, .field input:not([type=range]) { background: var(--fill); border: .5px solid var(--glass-edge); border-radius: 14px; color: #fff; }
.title-input { background: transparent; font-size: 28px; font-weight: 700; letter-spacing: -0.025em; border-bottom: 0; }

/* --- barre d'onglets FLOTTANTE en capsule de verre --- */
.nav {
  left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  height: var(--nav-h) !important; padding: 6px !important; border-radius: 999px;
  background: rgba(30, 30, 34, .55) !important; border: .5px solid var(--glass-edge);
  box-shadow: var(--glass-shine), 0 12px 40px rgba(0, 0, 0, .55);
  max-width: 560px; margin: 0 auto;
}
.nav button { color: rgba(235, 235, 245, .7); font-size: 10px; font-weight: 500; border-radius: 999px; transition: background .2s, color .2s; }
.nav button svg { width: 22px; height: 22px; }
.nav button.on { color: var(--honey); background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav button.on svg { filter: none; color: var(--honey); }

/* --- feuilles flottantes en verre --- */
.sheet-bg { background: rgba(0, 0, 0, .35); }
.sheet-panel {
  left: 8px !important; right: 8px !important; bottom: 8px !important; border-radius: 30px !important;
  background: rgba(28, 28, 32, .78) !important; border: .5px solid var(--glass-edge); box-shadow: var(--glass-shine), 0 -10px 40px rgba(0, 0, 0, .5);
}
.sheet-grip { width: 36px; height: 5px; background: rgba(255, 255, 255, .3); border-radius: 3px; }

/* --- bandeau d'installation, toast --- */
.install-bar { background: var(--card) !important; border: .5px solid var(--glass-edge); border-radius: var(--radius); box-shadow: var(--glass-shine), var(--glass-shadow); }
.ib-icon img { border-radius: 10px; }
.toast { background: rgba(40, 40, 44, .7) !important; color: #fff !important; border: .5px solid var(--glass-edge); border-radius: 999px; font-weight: 500; box-shadow: var(--glass-shine), 0 8px 24px rgba(0, 0, 0, .4); bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)) !important; }
.st-mini { bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)) !important; border-radius: 22px; background: rgba(40, 40, 44, .75); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* --- écran de jeu --- */
.stage { background: radial-gradient(60% 40% at 50% 0%, rgba(242, 169, 59, .18), transparent 70%), #050507 !important; }
.st-chord { filter: none; color: #fff; letter-spacing: -0.04em; }
.st-strip-wrap { background: var(--card); border: .5px solid var(--glass-edge); border-radius: 22px; }
.st-head { background: var(--accent); box-shadow: 0 0 10px rgba(242, 169, 59, .6); }
.mood-btn { font-size: 14px; font-weight: 600; color: #fff; }
.mood-btn > span:first-child { color: var(--honey); }
.mood-btn .mood-txt, .mood-btn .mood-txt small { color: #fff; }
.mood-btn.on > span:first-child, .mood-btn.on .mood-txt, .mood-btn.on .mood-txt small { color: #1a1206; }

/* ===== Plus de couleur (fonds façon WWDC25, icônes colorées façon Réglages iOS) ===== */
:root {
  --c-orange: #ff9f0a; --c-blue: #0a84ff; --c-green: #30d158; --c-purple: #bf5af2; --c-red: #ff453a;
  --c-teal: #64d2ff; --c-pink: #ff375f; --c-indigo: #5e5ce6; --c-yellow: #ffd60a; --c-mint: #66d4cf;
}
/* fond d'ambiance plus coloré : miel, indigo, bleu, turquoise, rose */
body::before {
  background:
    radial-gradient(36% 28% at 15% 8%, rgba(242, 169, 59, .42), transparent 70%),
    radial-gradient(34% 30% at 92% 18%, rgba(94, 92, 230, .38), transparent 70%),
    radial-gradient(30% 26% at 8% 52%, rgba(10, 132, 255, .26), transparent 70%),
    radial-gradient(34% 30% at 88% 64%, rgba(255, 55, 95, .24), transparent 70%),
    radial-gradient(40% 32% at 40% 96%, rgba(100, 210, 255, .22), transparent 70%),
    radial-gradient(30% 24% at 60% 40%, rgba(191, 90, 242, .14), transparent 70%),
    #050507 !important;
  filter: blur(14px) !important;
}
/* le verre prend un peu de la couleur du fond */
.card, .lessons { background: rgba(255, 255, 255, .065) !important; }

/* icônes des leçons : une couleur par leçon */
.lesson-card .l-icon { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.lesson-card:nth-child(9n+1) .l-icon { background: linear-gradient(180deg, #ffb340, var(--c-orange)); }
.lesson-card:nth-child(9n+2) .l-icon { background: linear-gradient(180deg, #4aa3ff, var(--c-blue)); }
.lesson-card:nth-child(9n+3) .l-icon { background: linear-gradient(180deg, #5be07f, var(--c-green)); }
.lesson-card:nth-child(9n+4) .l-icon { background: linear-gradient(180deg, #d58bff, var(--c-purple)); }
.lesson-card:nth-child(9n+5) .l-icon { background: linear-gradient(180deg, #ff7a70, var(--c-red)); }
.lesson-card:nth-child(9n+6) .l-icon { background: linear-gradient(180deg, #8fe0ff, #2fb5e8); }
.lesson-card:nth-child(9n+7) .l-icon { background: linear-gradient(180deg, #ff6f8e, var(--c-pink)); }
.lesson-card:nth-child(9n+8) .l-icon { background: linear-gradient(180deg, #8583ff, var(--c-indigo)); }
.lesson-card:nth-child(9n+9) .l-icon { background: linear-gradient(180deg, #ffe45c, #e6b800); color: #3a2a00; text-shadow: none; }

/* ambiances / guitaristes / styles : pastille de couleur */
.moods .mood-btn { font-size: 13px !important; line-height: 1.25; padding: 10px; gap: 9px; }
.moods .mood-btn > span:first-child {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.moods .mood-btn:nth-child(8n+1) > span:first-child { background: var(--c-orange); }
.moods .mood-btn:nth-child(8n+2) > span:first-child { background: var(--c-indigo); }
.moods .mood-btn:nth-child(8n+3) > span:first-child { background: var(--c-pink); }
.moods .mood-btn:nth-child(8n+4) > span:first-child { background: var(--c-blue); }
.moods .mood-btn:nth-child(8n+5) > span:first-child { background: var(--c-purple); }
.moods .mood-btn:nth-child(8n+6) > span:first-child { background: var(--c-green); }
.moods .mood-btn:nth-child(8n+7) > span:first-child { background: var(--c-red); }
.moods .mood-btn:nth-child(8n+8) > span:first-child { background: #2fb5e8; }
.moods .mood-btn.on > span:first-child { background: rgba(26, 18, 6, .85) !important; color: var(--honey) !important; }

/* degrés : couleur selon la fonction (vert = repos, bleu = élan, rouge = tension, violet = couleur modale) */
.deg:has(.fn-T) .deg-roman { color: var(--c-green); }
.deg:has(.fn-SD) .deg-roman { color: var(--c-blue); }
.deg:has(.fn-D) .deg-roman { color: var(--c-red); }
.deg:has(.fn-M) .deg-roman { color: var(--c-purple); }
.fn-T { background: var(--c-green); } .fn-SD { background: var(--c-blue); color: #fff; } .fn-D { background: var(--c-red); color: #fff; } .fn-M { background: var(--c-purple); color: #fff; }

/* barre d'onglets : reflet miel sous l'onglet actif */
.nav button.on { background: radial-gradient(80% 90% at 50% 100%, rgba(242, 169, 59, .28), rgba(255, 255, 255, .1)) !important; }

/* écran de jeu plus lumineux */
.stage {
  background:
    radial-gradient(50% 35% at 20% 0%, rgba(242, 169, 59, .28), transparent 70%),
    radial-gradient(45% 35% at 90% 10%, rgba(94, 92, 230, .26), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(255, 55, 95, .16), transparent 70%),
    #050507 !important;
}

/* ===== Palette « sunburst » (vernis de guitare : centre doré → ambre → cerise → bords tabac) ===== */
:root {
  --sb-gold: #ffd36b; --sb-honey: #f2a93b; --sb-amber: #e07b1f; --sb-cherry: #b3301c; --sb-wine: #6e1a14; --sb-tobacco: #3a1c0c;
  --sb-cream: #f3e2bd;
  --sunburst: radial-gradient(ellipse 70% 75% at 50% 38%, var(--sb-gold) 0%, var(--sb-honey) 32%, var(--sb-amber) 55%, var(--sb-cherry) 80%, var(--sb-wine) 100%);
  --sunburst-soft: radial-gradient(ellipse 80% 80% at 50% 35%, #ffdb85 0%, #f5b14a 45%, #e08a2a 80%, #c4621c 100%);
}
/* fond : grand sunburst, comme le corps d'une guitare vu de face, qui se fond dans le noir */
body::before {
  background:
    radial-gradient(ellipse 55% 38% at 50% 18%, rgba(255, 211, 107, .40) 0%, rgba(242, 169, 59, .30) 30%, rgba(224, 123, 31, .22) 50%, rgba(179, 48, 28, .20) 70%, rgba(110, 26, 20, .14) 85%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 92%, rgba(224, 123, 31, .20) 0%, rgba(179, 48, 28, .16) 45%, rgba(58, 28, 12, .10) 75%, transparent 100%),
    radial-gradient(40% 30% at 0% 55%, rgba(110, 26, 20, .22), transparent 70%),
    radial-gradient(40% 30% at 100% 50%, rgba(110, 26, 20, .20), transparent 70%),
    #070403 !important;
  filter: blur(12px) !important;
}
html { background: #070403 !important; }
.card, .lessons { background: rgba(255, 236, 210, .055) !important; }

/* boutons principaux et sélections : petit sunburst (centre doré, bords cerise) */
.btn.primary {
  background: var(--sunburst) !important; color: #1a0d04 !important; border: .5px solid rgba(255, 220, 160, .6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 8px rgba(110, 26, 20, .45), 0 8px 24px rgba(224, 123, 31, .32) !important;
  text-shadow: 0 1px 0 rgba(255, 230, 180, .4);
}
.chip.on, .mood-btn.on {
  background: var(--sunburst-soft) !important; color: #1a0d04 !important; border: .5px solid rgba(255, 220, 160, .6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 5px rgba(179, 48, 28, .35) !important;
}
.nav button.on { background: radial-gradient(80% 95% at 50% 100%, rgba(242, 169, 59, .38), rgba(179, 48, 28, .12) 70%, rgba(255, 255, 255, .06)) !important; color: var(--sb-gold) !important; }
.nav button.on svg { color: var(--sb-gold) !important; }
.diagram .d-dot.is-root { fill: var(--sb-honey); }
.st-head { background: var(--sb-gold); box-shadow: 0 0 12px rgba(242, 169, 59, .8); }

/* icônes : teintes de bois et de vernis au lieu de l'arc-en-ciel */
.lesson-card:nth-child(9n+1) .l-icon { background: radial-gradient(circle at 50% 35%, #ffe08a, #f2a93b 60%, #c4621c); color: #2a1406; }
.lesson-card:nth-child(9n+2) .l-icon { background: radial-gradient(circle at 50% 35%, #ffb066, #e07b1f 60%, #9c3a14); }
.lesson-card:nth-child(9n+3) .l-icon { background: radial-gradient(circle at 50% 35%, #ff8a6a, #c8401f 60%, #7a1d12); }
.lesson-card:nth-child(9n+4) .l-icon { background: radial-gradient(circle at 50% 35%, #d9675a, #9c2a22 60%, #55130e); }
.lesson-card:nth-child(9n+5) .l-icon { background: radial-gradient(circle at 50% 35%, #c08a5c, #7a4a26 60%, #3a1c0c); }
.lesson-card:nth-child(9n+6) .l-icon { background: radial-gradient(circle at 50% 35%, #fff3d6, #f3e2bd 60%, #c9a874); color: #3a2410; text-shadow: none; }
.lesson-card:nth-child(9n+7) .l-icon { background: radial-gradient(circle at 50% 35%, #ffd36b, #e5a63a 60%, #a8641c); color: #2a1406; }
.lesson-card:nth-child(9n+8) .l-icon { background: radial-gradient(circle at 50% 35%, #e85d3c, #b3301c 60%, #6e1a14); }
.lesson-card:nth-child(9n+9) .l-icon { background: radial-gradient(circle at 50% 35%, #a8774f, #6b3b1c 60%, #2e1408); }
.moods .mood-btn:nth-child(8n+1) > span:first-child { background: radial-gradient(circle at 50% 35%, #ffe08a, #f2a93b 70%); color: #2a1406 !important; }
.moods .mood-btn:nth-child(8n+2) > span:first-child { background: radial-gradient(circle at 50% 35%, #d9675a, #9c2a22 70%); }
.moods .mood-btn:nth-child(8n+3) > span:first-child { background: radial-gradient(circle at 50% 35%, #ffb066, #e07b1f 70%); }
.moods .mood-btn:nth-child(8n+4) > span:first-child { background: radial-gradient(circle at 50% 35%, #c08a5c, #7a4a26 70%); }
.moods .mood-btn:nth-child(8n+5) > span:first-child { background: radial-gradient(circle at 50% 35%, #ff8a6a, #c8401f 70%); }
.moods .mood-btn:nth-child(8n+6) > span:first-child { background: radial-gradient(circle at 50% 35%, #fff3d6, #e3c48a 70%); color: #3a2410 !important; }
.moods .mood-btn:nth-child(8n+7) > span:first-child { background: radial-gradient(circle at 50% 35%, #e85d3c, #8a2216 70%); }
.moods .mood-btn:nth-child(8n+8) > span:first-child { background: radial-gradient(circle at 50% 35%, #ffd36b, #c98a2c 70%); color: #2a1406 !important; }

/* couleurs pédagogiques des degrés, réchauffées pour s'accorder au sunburst */
.deg:has(.fn-T) .deg-roman { color: #7ed98a; }
.deg:has(.fn-SD) .deg-roman { color: #7fb6ff; }
.deg:has(.fn-D) .deg-roman { color: #ff7a5c; }
.deg:has(.fn-M) .deg-roman { color: #d9a2ff; }
.fn-T { background: #5cc96e; } .fn-SD { background: #4d8fe0; } .fn-D { background: #e2552f; } .fn-M { background: #b07ee0; }

/* écran de jeu : grand sunburst lumineux derrière l'accord */
.stage {
  background:
    radial-gradient(ellipse 75% 45% at 50% 30%, rgba(255, 211, 107, .32) 0%, rgba(242, 169, 59, .24) 30%, rgba(224, 123, 31, .18) 50%, rgba(179, 48, 28, .18) 72%, rgba(58, 28, 12, .2) 90%, transparent 100%),
    #070403 !important;
}

/* ===== Ordinateur / tablette large : barre latérale de verre flottante (façon macOS Tahoe / iPadOS 26) ===== */
@media (min-width: 1024px) {
  body { padding-bottom: 40px !important; }
  .nav {
    top: 84px !important; bottom: 20px !important; left: 20px !important; right: auto !important;
    width: 228px; height: auto !important; max-width: none; margin: 0 !important;
    flex-direction: column; justify-content: flex-start; gap: 4px; padding: 12px !important; border-radius: 28px;
  }
  .nav button { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; font-size: 15px; font-weight: 500; border-radius: 16px; }
  .nav button svg { width: 22px; height: 22px; }
  main, .install-bar { margin-left: 284px !important; margin-right: 32px !important; max-width: 900px; }
  @media (min-width: 1400px) { main, .install-bar { margin-left: calc(284px + (100vw - 284px - 900px - 32px) / 2) !important; } }
  .top { padding-left: 32px; padding-right: 32px; }
  .large-title { font-size: 40px; margin-top: 10px; }
  /* fenêtres centrées au lieu de monter du bas */
  .sheet-panel { left: 0 !important; right: 0 !important; margin: 0 auto !important; max-width: 640px; bottom: 24px !important; max-height: calc(100vh - 110px); }
  .toast, .st-mini { left: calc(50% + 142px) !important; }
}
/* une feuille fermée doit disparaître entièrement (elle est décollée du bord) */
.sheet:not(.open) .sheet-panel { transform: translateY(calc(100% + 80px)) !important; }
.mood-btn .mood-txt { flex: 1; min-width: 0; text-align: left; }
.btn.big { white-space: nowrap; }
/* listes déroulantes : options lisibles sur Windows (fond sombre explicite) */
:root { color-scheme: dark; }
select { color-scheme: dark; }
select option, select optgroup { background-color: #241a12; color: #ffffff; }

/* Batterie : réglages et bouton de coupure pendant la lecture */
.drum-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.drum-opts select { flex: 1 1 220px; min-width: 0; }
.st-drums.off { opacity: .45; text-decoration: line-through; filter: grayscale(1); }

/* Table de mixage de la lecture (M = muet, S = seule) */
.st-mix { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.mix-track { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: opacity .2s; }
.mix-track.off { opacity: .5; }
.mix-track.off .mix-name { text-decoration: line-through; }
.mix-name { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; padding: 4px 2px; cursor: pointer; white-space: nowrap; }
.mix-track input[type=range] { flex: 1; min-width: 60px; accent-color: #e3a23b; }
.mix-btn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; }
.mix-btn.on { background: linear-gradient(180deg, #f3c77a, #e3a23b); color: #1a1206; border-color: transparent; }

/* Tablature du riff dans l'écran de lecture */
.st-tab { margin: 10px 0; padding: 8px 6px; border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); }
.st-tab .tab-scroll { overflow-x: auto; scrollbar-width: thin; }
#stage.riffing #st-diag, #stage.riffing #st-nextdiag { display: none; }
/* la tablature ne doit jamais élargir l'écran de lecture (téléphone) */
.stage > *, .st-tab, .st-mix { min-width: 0; max-width: 100%; }
.st-tab { overflow: hidden; }
.mix-track { min-width: 0; }
.mix-track input[type=range] { width: 100%; }
@media (max-width: 480px) { .mix-track { flex-basis: 100%; } }

/* Avancer / reculer pendant la lecture */
.st-seek { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.st-cell { cursor: pointer; }

/* Tablature lisible : chiffres nets, tirets discrets ; le curseur est une bande verticale translucide,
   et la note jouée s'allume en doré (au lieu de colonnes de carrés orange) */
.tab .tc { color: rgba(201, 204, 214, .32); border-radius: 0; }
.tab .tc .tn { color: #f4f4f7; font-weight: 700; }
.tab .tc.on { background: rgba(243, 199, 122, .16); color: rgba(243, 199, 122, .45); }
.tab .tc.on .tn { color: #ffd88a; text-shadow: 0 0 8px rgba(255, 196, 92, .9); }
.tab .tab-pm .tc, .tab .tab-deg .tc { color: var(--honey); }
.tab .tab-pm .tc.on, .tab .tab-deg .tc.on { color: #ffd88a; }
.tab-row:first-child .tc.on { border-radius: 6px 6px 0 0; }
.tab-row:last-child .tc.on { border-radius: 0 0 6px 6px; }
/* pause */
#st-pause.on { background: linear-gradient(180deg, #f3c77a, #e3a23b); color: #1a1206; }
#stage.paused .st-main, #stage.paused .st-tab, #stage.paused .st-strip-wrap { opacity: .55; transition: opacity .2s; }
#stage.paused .st-count { font-size: 1rem; font-weight: 800; top: 44%; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap;
  padding: 10px 18px; border-radius: 999px; background: rgba(10, 8, 6, .82); border: 1px solid rgba(243, 199, 122, .45); color: #ffd88a; }
/* lignes PM et degrés : même taille de caractère que les cordes, sinon les colonnes se décalent */
.tab .tab-pm, .tab .tab-pm .tc, .tab .tab-deg .tc { font-size: 12px; }
.tab .tab-pm .tc, .tab .tab-deg .tc { opacity: .85; }

/* ===== Assistant (onglet principal) ===== */
.assist-seg { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.assist-seg button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px; }
@media (max-width: 560px) { .assist-seg { grid-template-columns: repeat(2, 1fr); } }
.assist-tun { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 2px 4px; padding: 8px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.assist h3 { margin-top: 18px; }
.nav button.nav-assist svg { color: var(--honey); }
.nav button.nav-assist span { font-weight: 800; }
@media (max-width: 480px) { .nav button span { font-size: 9.5px; letter-spacing: -.1px; } .nav svg { width: 22px; height: 22px; } }

/* ===== Quel est ce riff ? : manche de saisie ===== */
.find-card { padding-bottom: 6px; }
.find-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.find-ctl .seg { flex: 1 1 auto; }
.fneck-wrap { overflow-x: auto; margin: 8px -6px; padding: 4px 6px 8px; scrollbar-width: thin; }
.fneck { display: inline-block; min-width: 100%; }
.fn-row { display: flex; align-items: center; }
.fn-s { width: 26px; flex: 0 0 26px; font-size: 11px; color: var(--muted); text-align: center; font-weight: 700; }
.fn-n { width: 38px; flex: 0 0 38px; text-align: center; font-size: 10px; color: var(--muted); }
.fn-c { width: 38px; flex: 0 0 38px; height: 30px; position: relative; border: 0; padding: 0; cursor: pointer; background: transparent;
  border-right: 2px solid rgba(200, 200, 210, .35); }
.fn-c::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: rgba(220, 220, 230, .55); }
.fn-c.open { border-right: 4px solid rgba(240, 236, 228, .85); background: rgba(255, 255, 255, .03); }
.fn-c i { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border-radius: 11px;
  font-style: normal; font-size: 10px; font-weight: 700; color: transparent; transition: background .12s, color .12s; }
.fn-c:hover i { background: rgba(243, 199, 122, .25); color: #ffe2a8; }
.fn-c:active i { transform: scale(.9); }
.fn-c.hot i { background: linear-gradient(180deg, #f3c77a, #e3a23b); color: #1a1206; box-shadow: 0 0 10px rgba(243, 199, 122, .6); }
.find-key { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.find-score { text-align: right; }
.find-res h2 { margin-top: 0; }

.find-hint { margin: 6px 2px; padding: 8px 10px; border-radius: 12px; background: rgba(243, 199, 122, .1); border: 1px solid rgba(243, 199, 122, .3); }
.fn-c.arp i { background: linear-gradient(180deg, #9fd3ff, #5aa8f0); color: #06121f; box-shadow: 0 0 10px rgba(110, 180, 255, .6); }

/* Enregistrement d'un riff à la guitare */
.rec-box { margin: 2px 0 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.rec-box.live { display: flex; align-items: center; gap: 12px; border-color: rgba(255, 80, 80, .45); background: rgba(255, 60, 60, .08); }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 12px #ff4d4d; animation: recblink 1s infinite; flex: 0 0 14px; }
@keyframes recblink { 50% { opacity: .35; } }
.rec-info { flex: 1; min-width: 0; }
.rec-meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); margin: 6px 0; overflow: hidden; }
.rec-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7bd88f, #f3c77a, #ff6b6b); transition: width .1s; }

/* Édition du rythme dans « Quel est ce riff ? » */
#find-tab .tc { cursor: pointer; }
#find-tab .tc.sel { background: rgba(110, 180, 255, .2); }
#find-tab .tc.sel .tn { color: #9fd3ff; text-shadow: 0 0 8px rgba(110, 180, 255, .8); }
.find-edit { margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: rgba(110, 180, 255, .08); border: 1px solid rgba(110, 180, 255, .35); }
.find-edit .btn-row { margin-top: 8px; align-items: center; }
.find-hint2 { margin: 4px 2px 8px; }