/* Solfito : pages « Apprendre » (guides publics pour le référencement) */
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo-2-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--bg:#F3F1FF;--card:#fff;--soft:#E9E6FF;--ink:#231D5A;--muted:#5E5A94;--line:#D9D5F5;--night:#231D5A;--gold:#F2C12E;--link:#4B47C4;
--do:#E8423F;--re:#F28C28;--mi:#F2C12E;--fa:#4CB963;--sol:#2E9CDB;--la:#5B5BD6;--si:#B04FC9;
--do-t:#D53C39;--re-t:#AB631C;--mi-t:#8E711B;--fa-t:#358346;--sol-t:#247BAD;--la-t:#5B5BD6;--si-t:#9B3FB3;--tip:#FFF6D6;--tipink:#5A4A10}
@media (prefers-color-scheme:dark){:root{--bg:#16122F;--card:#211B45;--soft:#2C2560;--ink:#F1EFFF;--muted:#B9B4E8;--line:#3A3275;--link:#A9A6FF;
--do-t:#FF7C79;--re-t:#F28C28;--mi-t:#F2C12E;--fa-t:#6CD483;--sol-t:#5DB8EE;--la-t:#9C9CFF;--si-t:#D98AEF;--tip:#3A3220;--tipink:#FFE7A6}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--link)}
h1,h2,h3{font-family:"Baloo 2","Nunito",sans-serif;line-height:1.2;margin:1.4em 0 .5em}
h1{font-size:clamp(28px,6vw,40px);margin-top:.3em}
h2{font-size:clamp(22px,4.5vw,28px)}
h3{font-size:20px}
.ap-top{background:var(--night);color:#fff;position:sticky;top:0;z-index:5}
.ap-top .in{max-width:880px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.ap-logo{font:800 28px/1 "Baloo 2",sans-serif;text-decoration:none;letter-spacing:.5px;margin-right:auto}
.ap-logo span:nth-child(1){color:var(--do)}.ap-logo span:nth-child(2){color:var(--re)}.ap-logo span:nth-child(3){color:var(--mi)}.ap-logo span:nth-child(4){color:var(--fa)}.ap-logo span:nth-child(5){color:var(--sol)}.ap-logo span:nth-child(6){color:#8C8CFF}.ap-logo span:nth-child(7){color:#D27BEA}
.ap-top a.lnk{color:#E3E0FF;text-decoration:none;font-weight:700;font-size:15px}
.ap-btn{display:inline-block;background:var(--gold);color:#231D5A;font-weight:800;text-decoration:none;border-radius:14px;padding:10px 16px;box-shadow:0 4px 0 #C99A12;border:0;font-size:16px;cursor:pointer;font-family:inherit}
.ap-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #C99A12}
.ap-top .ap-btn{padding:8px 12px;font-size:14px}
.ap-wrap{max-width:880px;margin:0 auto;padding:12px 16px 40px}
.ap-bc{font-size:14px;color:var(--muted);margin:6px 0 0}.ap-bc a{color:var(--muted)}
.ap-lead{font-size:19px;color:var(--muted);margin:.2em 0 1.2em}
.ap-meta{font-size:14px;color:var(--muted)}
article p,article li{max-width:72ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin:18px 0}
.tip{background:var(--tip);color:var(--tipink);border-radius:16px;padding:14px 16px;margin:18px 0}
.tip b:first-child{display:block;margin-bottom:2px}
.ap-solfito{background:var(--night);color:#F1EFFF;border-radius:24px;padding:22px 22px 24px;margin:30px 0}
.ap-solfito h2{margin:0 0 8px;color:#fff}
.ap-solfito ul{margin:8px 0 18px;padding-left:22px}.ap-solfito li{margin:4px 0}
.ap-solfito small{display:block;margin-top:12px;color:#C9C5F2}
table{border-collapse:collapse;width:100%;margin:14px 0;background:var(--card);border-radius:14px;overflow:hidden;font-size:16px}
th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:var(--soft)}
.tbl{overflow-x:auto}
figure{margin:18px 0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;text-align:center}
figure svg{max-width:100%;height:auto}
figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.staff line{stroke:var(--ink)}.staff .clef{fill:var(--ink)}.staff .lbl{font:700 13px "Nunito",sans-serif}
.kb .w{fill:#fff;stroke:#231D5A}.kb .b{fill:#231D5A}.kb .on{fill:var(--gold)}.kb .bon{fill:#C99A12}.kb text{font:700 12px "Nunito",sans-serif;fill:#231D5A}
.kb [data-midi]{cursor:pointer}
.notes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.nt{display:inline-flex;flex-direction:column;align-items:center;min-width:44px;padding:5px 6px;border-radius:12px;background:var(--card);border:2px solid currentColor;font-weight:800;line-height:1.1;font-size:16px}
.nt small{font-size:11px;font-weight:700;opacity:.8}
.nt.long{padding-inline:14px}
.nt.on{background:var(--gold);color:#231D5A!important}
.phrase{margin:12px 0}.phrase>b{font-size:14px;color:var(--muted)}
.c-do{color:var(--do-t)}.c-re{color:var(--re-t)}.c-mi{color:var(--mi-t)}.c-fa{color:var(--fa-t)}.c-sol{color:var(--sol-t)}.c-la{color:var(--la-t)}.c-si{color:var(--si-t)}
.player{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.player .ap-btn.alt{background:var(--soft);color:var(--ink);box-shadow:0 4px 0 var(--line)}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:8px 0}
summary{font-weight:800;cursor:pointer}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0}
.rel a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:700}
.rel a small{display:block;color:var(--muted);font-weight:600;font-size:13px;margin-top:2px}
.rel a:hover{border-color:var(--la)}
.hub h2{margin-top:1.6em}
.ap-foot{background:var(--night);color:#C9C5F2;font-size:14px}
.ap-foot .in{max-width:880px;margin:0 auto;padding:22px 16px 30px}
.ap-foot a{color:#fff}
.ap-foot ul{list-style:none;padding:0;margin:8px 0 14px;display:flex;flex-wrap:wrap;gap:6px 16px}
kbd{font:inherit;font-weight:800;background:var(--soft);border-radius:6px;padding:0 6px}
@media (max-width:520px){body{font-size:16px}.ap-top a.lnk{display:none}.ap-solfito{padding:18px}}
figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
figure svg.staff{max-width:none}