:root{--fond:#f4f1ea;--surface:#fffdf8;--texte:#2a2622;--doux:#6d655c;--trait:#ddd5c8;--accent:#8a2f2f;--accent-doux:#f3e3df;--papier:#fffdf7;--encre:#1d1a17;--serif:"Cormorant Garamond", Georgia, serif;--sans:Inter, system-ui, sans-serif}@media (prefers-color-scheme:dark){:root{--fond:#1b1917;--surface:#24211e;--texte:#ece6dc;--doux:#a89f93;--trait:#3a3530;--accent:#e08a7a;--accent-doux:#3a2724}}*{box-sizing:border-box}body{background:var(--fond);color:var(--texte);font:16px/1.55 var(--sans);margin:0}a{color:inherit}.bandeau{border-bottom:1px solid var(--trait);flex-wrap:wrap;align-items:baseline;gap:1rem;padding:1rem clamp(1rem,4vw,3rem);display:flex}.marque{font:600 1.6rem var(--serif);text-decoration:none}.marque em{color:var(--accent)}.sous-titre{color:var(--doux);font-size:.9rem}main{max-width:1100px;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem) 4rem}h1,h2{font-family:var(--serif);font-weight:600;line-height:1.15}h1{margin:0 0 .5rem;font-size:clamp(2rem,5vw,3rem)}.h1-suite{color:var(--doux);font-size:.45em;font-weight:500;display:block}.intro{color:var(--doux);margin-top:0}.cartes{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;padding:0;list-style:none;display:grid}.carte{background:var(--surface);border:1px solid var(--trait);border-radius:10px;flex-direction:column;gap:.25rem;height:100%;padding:1.25rem;text-decoration:none;transition:border-color .15s;display:flex}a.carte:hover{border-color:var(--accent)}.carte-compositeur,.carte-meta{color:var(--doux);font-size:.85rem}.carte-titre{font:600 1.6rem var(--serif)}.carte-vide{color:var(--doux);background:0 0;border-style:dashed;justify-content:center;font-style:italic}.morceau-entete{margin:1rem 0 1.5rem}.morceau-compositeur{color:var(--accent);margin:0;font-weight:500}.niveaux{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem;display:grid}.niveau{border:1px solid var(--trait);background:var(--surface);border-radius:8px;flex-direction:column;padding:.75rem 1rem;text-decoration:none;display:flex}.niveau span{color:var(--doux);font-size:.85rem}.niveau.actif{border-color:var(--accent);background:var(--accent-doux)}.lecteur{z-index:2;background:var(--surface);border:1px solid var(--trait);border-radius:8px;margin-bottom:1rem;padding:.75rem 1rem;position:sticky;top:0}.lecteur-options{flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-bottom:.5rem;font-size:.9rem;display:flex}.lecteur-options select{max-width:100%;font:inherit;margin-left:.4rem;padding:.2rem .4rem}.case{align-items:center;gap:.4rem;display:flex}.astuce{color:var(--doux);margin:.4rem 0 0;font-size:.8rem}.partition{background:var(--papier);color:var(--encre);border:1px solid var(--trait);border-radius:8px;padding:1rem}.partition svg .abcjs-note,.partition svg .abcjs-rest{cursor:pointer}.partition svg .note-jouee{fill:#c0392b;stroke:#c0392b}.notes{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem;display:grid}.notes h2{margin:0 0 .5rem;font-size:1.5rem}.notes ul{padding-left:1.2rem}.source{color:var(--doux);font-size:.8rem}@media (width<=600px){.niveaux{grid-template-columns:1fr}.lecteur{position:static}.lecteur-options label:first-child,.lecteur-options select{width:100%;margin-left:0}}.accord{border:1px solid var(--accent);color:var(--accent);border-radius:999px;margin:.25rem 0 0;padding:.2rem .6rem;font-size:.9rem;display:inline-block}.filtres{color:var(--doux);flex-wrap:wrap;gap:.5rem 1.25rem;margin:1rem 0;font-size:.875rem;display:flex}.filtres label{align-items:center;gap:.4rem;display:flex}.filtres select,.recherche input{font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:.35rem .5rem}.filtres[hidden],.filtres label[hidden]{display:none}.filtres input[type=search]{width:100%;max-width:420px;font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--trait);border-radius:8px;padding:.6rem .8rem}.groupe{flex-wrap:wrap;gap:.4rem;display:flex}.puce{font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--trait);cursor:pointer;border-radius:999px;padding:.35rem .8rem;font-size:.875rem}.puce span{color:var(--doux)}.puce.active{border-color:var(--accent);background:var(--accent-doux)}.tri{color:var(--doux);font-size:.875rem}.tri select{font:inherit;margin-left:.4rem;padding:.2rem .4rem}.compte{color:var(--doux);margin:0;font-size:.875rem}.badge{background:var(--accent-doux);color:var(--texte);border-radius:999px;padding:.05rem .5rem;font-size:.75rem;display:inline-block}.etoiles{color:var(--accent);letter-spacing:1px}.carte-meta{justify-content:space-between;align-items:center;margin-top:auto;padding-top:.5rem;display:flex}.morceau-meta{color:var(--doux);flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;font-size:.9rem;display:flex}.menu{flex-wrap:wrap;gap:.25rem 1.1rem;margin-left:auto;font-size:.9rem;display:flex}.menu a{color:var(--doux);text-decoration:none}.menu a:hover,.menu a[aria-current=page]{color:var(--accent)}.pied{border-top:1px solid var(--trait);max-width:1100px;color:var(--doux);margin:0 auto;padding:2rem clamp(1rem,4vw,3rem) 3rem;font-size:.85rem}.pied p{margin:.25rem 0}.ariane ol{color:var(--doux);flex-wrap:wrap;gap:.3rem;margin:0 0 1rem;padding:0;font-size:.85rem;list-style:none;display:flex}.ariane li+li:before{content:"›";margin-right:.3rem}.ariane a{color:var(--doux)}.rubriques{border-top:1px solid var(--trait);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem 2rem;margin-top:3rem;padding-top:2rem;display:grid}.rubriques h2,.voisins h2,.faq h2{margin:0 0 .5rem;font-size:1.5rem}.liens{margin:0;padding:0;list-style:none}.liens li{padding:.2rem 0}.liens span{color:var(--doux);font-size:.85rem}.liens.colonnes{columns:3 220px}.voisins,.faq{margin-top:2.5rem}.faq details{border-bottom:1px solid var(--trait);padding:.6rem 0}.faq summary{cursor:pointer;font-weight:500}.faq details p{color:var(--doux);margin:.5rem 0 0}.conseils-niveau h3{margin:.75rem 0 .25rem;font-size:1rem}.conseils-niveau:not(.courant){opacity:.6}.conseils-niveau.courant h3:after{content:" · votre niveau";color:var(--accent);font-size:.85rem;font-weight:400}.nouveautes{padding:0;list-style:none}.nouveautes time{color:var(--doux);font-size:.85rem}.nouveautes .cartes{margin:.25rem 0 1rem}.carte.favori .carte-titre:after{content:" ♥";color:var(--accent);font-size:1rem}.carte[data-statut=en-cours]{border-left:4px solid #d4a017}.carte[data-statut=appris]{border-left:4px solid #3c8d5a}.guide,.outil{max-width:760px}.guide h2,.outil h2{margin:2rem 0 .5rem;font-size:1.7rem}.guide-date{color:var(--doux);font-size:.85rem}.guides{gap:1rem;padding:0;list-style:none;display:grid}.guides a{background:var(--surface);border:1px solid var(--trait);border-radius:10px;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;text-decoration:none;display:flex}.guides strong{font:600 1.4rem var(--serif)}.guides span{color:var(--doux);font-size:.9rem}.tableau{border-collapse:collapse;width:100%;margin:.5rem 0 1rem;font-size:.9rem}.tableau th,.tableau td{border-bottom:1px solid var(--trait);text-align:left;padding:.4rem .6rem}.tableau th{color:var(--doux);font-weight:500}.bouton{font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--trait);cursor:pointer;border-radius:6px;padding:.35rem .8rem;font-size:.875rem}.bouton:hover,.bouton[aria-pressed=true]{border-color:var(--accent)}.bouton[aria-pressed=true]{background:var(--accent-doux)}.bouton.principal{background:var(--accent);border-color:var(--accent);color:#fff}.bascules{gap:.4rem 1.1rem}.lecteur-actions{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.875rem;display:flex}.lecteur-actions .espace{flex:1}.lecteur-actions select{font:inherit;margin-left:.3rem}.etat{color:var(--accent);font-variant-numeric:tabular-nums}.manche{background:var(--surface);border:1px solid var(--trait);border-radius:8px;margin:0 0 1rem;padding:.5rem}.manche svg{width:100%;height:auto;display:block}.manche-bois{fill:#6b4a2b}.manche-sillet{stroke:#efe6d2;stroke-width:6px}.manche-frette{stroke:#c9c2b3;stroke-width:2px}.manche-corde{stroke:#e9e2d0}.manche-repere{fill:#efe6d2;opacity:.7}.manche-num,.manche-case{fill:var(--doux);font:12px var(--sans);text-anchor:middle}.manche-num{text-anchor:start;font-size:14px}.manche-note circle{fill:#c0392b;stroke:#fff;stroke-width:2px}.manche-note text{fill:#fff;font:600 11px var(--sans);text-anchor:middle}.outil-zone{background:var(--surface);border:1px solid var(--trait);border-radius:12px;margin:1.5rem 0 2rem;padding:1.5rem}.metronome,.accordeur{text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}.metro-tempo output{font:600 4rem/1 var(--serif);display:block}.metro-tempo span{color:var(--doux);font-size:.85rem}.metronome input[type=range]{width:min(100%,420px)}.metro-boutons,.metro-reglages,.acc-cordes{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.metro-temps{gap:.6rem;display:flex}.metro-temps span{border:2px solid var(--trait);border-radius:50%;width:18px;height:18px}.metro-temps span.actif{background:var(--accent);border-color:var(--accent)}.acc-note{font:600 4rem/1 var(--serif);color:var(--doux)}.acc-note.juste{color:#3c8d5a}.acc-jauge{border-top:2px solid var(--trait);width:min(100%,360px);color:var(--doux);justify-content:space-between;padding-top:1.2rem;font-size:.8rem;display:flex;position:relative}.acc-aiguille{background:var(--accent);width:3px;height:18px;transition:left .1s;position:absolute;top:-10px;left:50%}.acc-detail,.acc-titre{color:var(--doux);font-size:.85rem}@media (width<=700px){.menu{margin-left:0}}@media print{.bandeau,.pied,.ariane,.niveaux,.lecteur,.manche,.notes,.faq,.voisins,.accord[hidden]{display:none!important}body,.partition{color:#000;background:#fff;border:0}main{padding:0}.partition svg .note-jouee{fill:currentColor;stroke:currentColor}}.accord[hidden],.manche[hidden]{display:none}.recherche{gap:.5rem;max-width:560px;margin:1rem 0;display:flex}.recherche input{flex:1;min-width:0;padding:.65rem .8rem;font-size:1rem}.accueil-tete{padding:1rem 0 .5rem}.accueil-tete .intro{max-width:640px;font-size:1.05rem}.bloc{margin-top:2.75rem}.bloc h2{margin:0 0 .75rem;font-size:1.8rem}.bloc h3{margin:1.5rem 0 .25rem;font-size:1rem}.profils,.tuiles{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.profils{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.profils a{background:var(--surface);border:1px solid var(--trait);border-radius:10px;flex-direction:column;gap:.3rem;height:100%;padding:1.1rem 1.2rem;text-decoration:none;display:flex}.profils a:hover,.tuiles a:hover,.vedette:hover{border-color:var(--accent)}.profils strong{font:600 1.45rem var(--serif)}.profils span:not(.etoiles){color:var(--doux);font-size:.9rem}.profils em{color:var(--accent);margin-top:auto;padding-top:.4rem;font-size:.875rem;font-style:normal}.vedette{background:var(--accent-doux);border:1px solid var(--trait);border-radius:12px;flex-direction:column;gap:.35rem;padding:1.5rem;text-decoration:none;display:flex}.vedette-titre{font:600 clamp(1.8rem, 4vw, 2.4rem) / 1.1 var(--serif)}.vedette-texte{max-width:680px;color:var(--doux)}.vedette-action{color:var(--accent);font-weight:500}.tuiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.tuiles a{background:var(--surface);border:1px solid var(--trait);border-radius:8px;justify-content:space-between;align-items:center;padding:.8rem 1rem;text-decoration:none;display:flex}.tuiles span{color:var(--doux);font-size:.85rem}.apprendre .guides{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}@media (width<=700px){.bandeau{gap:.5rem}.menu{white-space:nowrap;scrollbar-width:none;flex-wrap:nowrap;width:100%;padding-bottom:.25rem;overflow-x:auto}.bloc{margin-top:2rem}.recherche .bouton{display:none}}.apercu{color:#f4e9b8;background:#3b3415;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.5rem clamp(1rem,4vw,3rem);font-size:.85rem;display:flex}.apercu button,.apercu input{font:inherit;color:inherit;cursor:pointer;background:0 0;border:1px solid #8a7a35;border-radius:4px;padding:.15rem .5rem}.apercu button[aria-pressed=true]{background:#8a7a35}.apercu-compte{margin-left:auto;font-weight:600}.apercu details{width:100%}.apercu ol{max-height:40vh;margin:.5rem 0;padding-left:1.2rem;overflow:auto}.apercu li{opacity:.6}.apercu li.paru{opacity:1}.apercu time{min-width:11rem;font-weight:600;display:inline-block}.carte-date,.morceau-date{color:var(--accent);font-size:.8rem;font-weight:500}.morceau-date{margin:.4rem 0 0}.suite{margin-top:1.5rem;font-weight:500}.annonce{border-left:3px solid var(--accent);background:var(--accent-doux);border-radius:0 8px 8px 0;max-width:640px;padding:.75rem 1rem}
