/* Musique : même charte que l'app Média (police du système, violet en accent, mode clair). */
:root{--violet:#5E4B8B;--violet-fonce:#4d3d73;--moyen:#998AB5;--clair:#FBF8FF;--pale:#efeaf6;--sombre:#514B4B;--filet:#E9E5F0;--juste:#2F7D54;--juste-fond:#E6F4EC;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#fff;color:#000;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden;padding-top:env(safe-area-inset-top)}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--moyen);outline-offset:2px}

/* Barre et onglets (repris de Média) */
.m-bar{flex:none;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-bottom:1px solid var(--filet)}
.m-logo{width:26px;height:26px;border-radius:7px}
.m-nom{font-weight:700;color:var(--violet)}
.m-beta{font-size:11px;line-height:1;padding:3px 7px;border-radius:99px;background:var(--pale);color:var(--violet);margin-right:8px}
.m-onglets{display:flex;gap:4px;height:100%;overflow-x:auto}
.m-onglets button{padding:0 12px;height:100%;color:var(--sombre);border-bottom:2px solid transparent;font-weight:500;white-space:nowrap}
.m-onglets button.on{color:#000;font-weight:600;border-bottom-color:var(--violet)}
#modules{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.module{min-height:100%;display:flex;flex-direction:column}

/* Composants communs */
.pilules{display:flex;gap:6px;justify-content:center}
.pilules button{padding:8px 18px;border-radius:99px;background:var(--pale);color:var(--violet);font-weight:500}
.pilules button.on{background:var(--violet);color:#fff}
.bouton{display:block;width:100%;padding:15px;border-radius:14px;background:var(--violet);color:#fff;font-weight:600;font-size:17px}
.bouton:active{background:var(--violet-fonce)}
.bouton.secondaire{background:var(--pale);color:var(--violet)}
.rond{width:40px;height:40px;border-radius:50%;background:var(--pale);color:var(--violet);font-size:20px;line-height:1}

/* Accordeur */
.acc{flex:1;display:flex;flex-direction:column;gap:14px;width:100%;max-width:520px;margin:0 auto;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
.acc-ecran{flex:1;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:20px;background:var(--clair);border:1px solid var(--filet);padding:12px;transition:background .2s,border-color .2s}
.acc-note{text-align:center;line-height:1}
.acc-note span{display:block;font-size:min(30vw,128px);font-weight:700;letter-spacing:-.02em;color:var(--violet)}
.acc-note small{display:block;margin-top:6px;font-size:15px;color:var(--sombre);font-variant-numeric:tabular-nums}
.acc-jauge{width:100%;max-width:380px;display:block;overflow:visible}
.j-arc{fill:none;stroke:var(--filet);stroke-width:6;stroke-linecap:round}
.j-zone{fill:none;stroke:var(--juste);stroke-width:10;stroke-linecap:round}
#accTraits line{stroke:var(--moyen);stroke-width:2;stroke-linecap:round}
.j-aiguille{transform-origin:150px 150px;transition:transform .12s linear}
.j-aiguille line{stroke:var(--violet);stroke-width:5;stroke-linecap:round}
.j-aiguille circle{fill:var(--violet)}
.acc-etat{font-size:26px;font-weight:700;text-align:center;color:var(--sombre);margin-top:6px}
.acc-cents{font-size:16px;color:var(--sombre);font-variant-numeric:tabular-nums}
.acc-ecran.bas .acc-etat,.acc-ecran.haut .acc-etat{color:var(--violet)}
.acc-ecran.juste{background:var(--juste-fond);border-color:var(--juste)}
.acc-ecran.juste .acc-note span,.acc-ecran.juste .acc-etat{color:var(--juste)}
.acc-ecran.juste .j-aiguille line{stroke:var(--juste)}
.acc-ecran.juste .j-aiguille circle{fill:var(--juste)}
.acc-cordes{display:flex;gap:6px;justify-content:center}
.acc-cordes button{flex:1;max-width:58px;height:54px;border-radius:14px;background:var(--pale);color:var(--violet);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;border:2px solid transparent}
.acc-cordes button b{font-size:17px}
.acc-cordes button small{font-size:11px;opacity:.7}
.acc-cordes button.auto{font-weight:600;font-size:14px}
.acc-cordes button.vue{border-color:var(--violet)}
.acc-cordes button.on{background:var(--violet);color:#fff}
.acc-aide{margin:0;text-align:center;font-size:13px;color:var(--sombre)}
.acc-la{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--sombre);font-size:14px}
.acc-la b{min-width:64px;text-align:center;color:#000;font-variant-numeric:tabular-nums}
@media(max-height:640px){.acc{gap:10px}.acc-ecran{min-height:240px}.acc-note span{font-size:min(24vw,96px)}.acc-aide{display:none}}