:root{--bg:#0b1016;--panel:#121a24;--panel2:#17222e;--card:#1b2836;--border:#2d3d4f;--text:#eef5fb;--muted:#96a9bb;--accent:#77bcff;--accentSoft:rgba(119,188,255,.13);--tonic:#6fb1ff;--pre:#71c6a0;--dom:#f0ad63;--resolve:#a98be5;--color:#df7fa3}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(circle at 50% -15%,rgba(119,188,255,.08),transparent 36rem),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}button,select,input{font:inherit}.app{width:min(1400px,calc(100% - 28px));margin:auto;padding:30px 0 56px}.hero{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:18px}.hero h1{margin:3px 0 8px;font-size:clamp(1.9rem,4vw,3rem);line-height:1}.lead{margin:0;max-width:820px;color:var(--muted);line-height:1.55}.eyebrow{margin:0 0 5px;color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.controls,.audio-controls,.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:end}label{display:grid;gap:5px;color:var(--muted);font-size:.79rem;font-weight:750}select{min-height:43px;padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);color:var(--text)}input[type=range]{width:145px;accent-color:var(--accent)}.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px}.tab{min-height:42px;padding:8px 14px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--muted);white-space:nowrap;cursor:pointer}.tab.active{border-color:var(--accent);background:var(--accentSoft);color:var(--text)}#count{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;margin-left:5px;border-radius:999px;background:var(--card);font-size:.7rem}.panel{margin-bottom:16px;padding:18px;border:1px solid var(--border);border-radius:16px;background:rgba(18,26,36,.95)}.audio{display:flex;justify-content:space-between;align-items:end;gap:18px;padding-top:12px;padding-bottom:12px}.audio>div:first-child{display:grid;gap:3px}.audio span{color:var(--muted);font-size:.78rem}.btn{min-height:40px;padding:7px 12px;border:1px solid var(--border);border-radius:10px;color:var(--text);cursor:pointer}.btn.primary{border-color:var(--accent);background:var(--accentSoft);font-weight:800}.btn.secondary{background:var(--card)}.btn.wide{width:100%;margin-top:8px}.hidden{display:none!important}.muted{color:var(--muted);line-height:1.5}.summary,.section-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.summary h2,.section-head h2,.panel h2{margin:0;font-size:1.13rem}.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.chip{padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:.76rem}.functional{display:grid;grid-template-columns:minmax(180px,1fr) 38px minmax(180px,1fr) 38px minmax(180px,1fr) 38px minmax(180px,1fr);gap:7px;min-width:900px}.panel:has(.functional){overflow-x:auto}.zone{padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--panel2)}.zone h3{margin:0}.zone>span{color:var(--muted);font-size:.72rem}.tonic{border-top:3px solid var(--tonic)}.pre{border-top:3px solid var(--pre)}.dom{border-top:3px solid var(--dom)}.res{border-top:3px solid var(--resolve)}.arrow{display:grid;place-items:center;color:var(--muted);font-size:1.6rem}.stack{display:grid;gap:8px;margin-top:10px}.chord-card{position:relative;min-height:78px;padding:10px 42px 10px 11px;border:1px solid var(--border);border-radius:10px;background:#0f1720;cursor:pointer}.chord-card:hover,.mini:hover,.palette-btn:hover{border-color:#536a80;background:#172433}.chord-card.playing{border-color:var(--accent);background:var(--accentSoft)}.chord-card strong{display:block;font-size:1.04rem}.chord-card small{display:block;margin-top:3px;color:var(--muted);font-size:.7rem;line-height:1.35}.add{position:absolute;top:8px;right:7px;width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);cursor:pointer;font-weight:900}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.grid.single{grid-template-columns:1fr}.mini{padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--card)}.mini h3{margin:0;font-size:.9rem}.mini p{margin:5px 0 8px;color:var(--muted);font-size:.73rem;line-height:1.4}.seqtext{font-family:"Cascadia Code",Consolas,monospace;font-size:.76rem;overflow-wrap:anywhere}.mini-actions{display:flex;gap:6px;margin-top:8px}.mini-actions button{min-height:31px;padding:4px 8px;border:1px solid var(--border);border-radius:8px;background:#111922;color:var(--text);cursor:pointer;font-size:.7rem}.suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.suggestion{display:flex;gap:8px}.suggestion-main{flex:1;min-width:0;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--card)}.suggestion-title{color:var(--muted);font-size:.7rem;font-weight:800}.play-square{width:42px;flex:0 0 42px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer}.fifths-layout,.tonnetz-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:16px}.map-panel{overflow-x:auto}#fifthsSvg{display:block;width:100%;min-width:620px}.ring{fill:none;stroke:rgba(150,169,187,.16);stroke-width:1}.sector{stroke:rgba(150,169,187,.15)}.node{cursor:pointer}.svg-label{fill:var(--text);text-anchor:middle;dominant-baseline:central;font-weight:850}.svg-sub{fill:rgba(238,245,251,.68);font-size:9px;text-anchor:middle}.detail-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.79rem}.detail-row span{color:var(--muted)}.tonnetz-stage{display:grid;place-items:center;min-height:430px}.current{display:grid;place-items:center;width:150px;height:150px;border:2px solid var(--accent);border-radius:50%;background:var(--accentSoft);text-align:center}.current strong{font-size:2rem}.current span{color:var(--muted);font-size:.75rem}.transforms{display:flex;gap:14px;margin:24px 0}.transforms button{width:110px;min-height:70px;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);cursor:pointer}.transforms b,.transforms span{display:block}.transforms span{color:var(--muted);font-size:.7rem}.neighbors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(620px,100%)}.neighbor{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);text-align:center}.neighbor span{display:block;color:var(--muted);font-size:.68rem}.history{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.history span{padding:6px 8px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:.74rem}.sequence{display:flex;gap:8px;min-height:110px;padding:11px;overflow-x:auto;border:1px dashed var(--border);border-radius:12px;background:#0e151d}.empty{display:grid;place-items:center;width:100%;color:var(--muted);font-size:.8rem}.seq-item{position:relative;flex:0 0 112px;padding:10px 9px 37px;border:1px solid var(--border);border-radius:10px;background:var(--card)}.seq-item span{display:block;color:var(--muted);font-size:.68rem}.seq-controls{position:absolute;left:6px;right:6px;bottom:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.seq-controls button{min-height:25px;border:1px solid var(--border);border-radius:6px;background:#101821;color:var(--muted);cursor:pointer}.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.palette-btn{min-height:61px;padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);text-align:left;cursor:pointer}.palette-btn span{display:block;color:var(--muted);font-size:.67rem}.voice{display:grid;gap:8px;margin-top:10px}.voice-step{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--card)}.voice-head{display:flex;justify-content:space-between;gap:8px;font-size:.78rem}.voice-head span{color:var(--muted)}.moves{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.move{padding:4px 6px;border-radius:7px;background:#0f1720;font-family:"Cascadia Code",Consolas,monospace;font-size:.7rem}footer{padding:5px 8px;color:var(--muted);font-size:.7rem;text-align:center;line-height:1.5}
@media(max-width:1050px){.two,.fifths-layout,.tonnetz-layout{grid-template-columns:1fr}}@media(max-width:780px){.hero,.audio,.summary,.section-head{flex-direction:column;align-items:stretch}.chips{justify-content:flex-start}.grid,.suggestions{grid-template-columns:1fr}.neighbors{grid-template-columns:1fr}.palette{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.app{width:min(100% - 18px,1400px);padding-top:18px}.panel{padding:13px}.controls,.audio-controls{flex-direction:column;align-items:stretch}.controls label,.audio-controls label{width:100%}input[type=range]{width:100%}.transforms{gap:7px}.transforms button{width:90px}.palette{grid-template-columns:1fr}}


/* ===== v5 — assistant harmonique ===== */
.smart-panel{overflow:hidden}
.preset-label{min-width:180px}
.smart-layout{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:18px;margin:16px 0}
.smart-source{padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--panel2)}
.smart-caption{display:block;margin-bottom:8px;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.smart-current{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:11px 13px;border:1px solid var(--accent);border-radius:11px;background:var(--accentSoft)}
.smart-current strong{font-size:1.35rem}
.smart-current span{color:var(--muted);font-size:.75rem;text-align:right}
.smart-help{margin:8px 0 0;color:var(--muted);font-size:.7rem;line-height:1.4}
.smart-weights{display:grid;grid-template-columns:repeat(5,minmax(105px,1fr));gap:9px}
.smart-weights label{min-width:0;padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--card)}
.smart-weights output{float:right;color:var(--text);font-weight:900}
.smart-weights input{width:100%;margin-top:7px}
.smart-result-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:8px 0 9px}
.smart-result-head span{color:var(--muted);font-size:.7rem}
.smart-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.smart-card{position:relative;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--card);min-width:0}
.smart-card.rank-1{border-color:var(--accent);background:var(--accentSoft)}
.smart-card.rank-2,.smart-card.rank-3{border-color:#526c83}
.smart-card-top{display:flex;justify-content:space-between;gap:8px;align-items:start}
.smart-card h3{margin:0;font-size:1rem}
.smart-score{flex:0 0 auto;font-size:.8rem;font-weight:900;color:var(--accent)}
.score-track{height:5px;margin:8px 0;border-radius:999px;background:#0d141c;overflow:hidden}
.score-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#8fe0bc)}
.smart-tags{display:flex;gap:4px;flex-wrap:wrap;min-height:22px}
.smart-tag{padding:3px 5px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.62rem}
.smart-explain{margin:7px 0;color:var(--muted);font-size:.69rem;line-height:1.35}
.smart-actions{display:flex;gap:5px}
.smart-actions button{min-height:30px;padding:4px 7px;border:1px solid var(--border);border-radius:7px;background:#101821;color:var(--text);cursor:pointer;font-size:.68rem}
.chord-card.recommended{box-shadow:inset 0 0 0 1px rgba(119,188,255,.75)}
.chord-card.recommended::after{content:"suggestion";position:absolute;left:8px;bottom:5px;color:var(--accent);font-size:.56rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* ===== v5 — cercle des quintes ===== */
.map-legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px;color:var(--muted);font-size:.7rem}
.map-legend span{display:inline-flex;gap:6px;align-items:center}
.legend-dot{width:9px;height:9px;border-radius:999px;display:inline-block}
.major-dot{background:#df6c8e}.minor-dot{background:#6bc7cd}.active-dot{background:var(--accent);box-shadow:0 0 0 2px rgba(119,188,255,.18)}
.center-disc{fill:#101924;stroke:var(--accent);stroke-width:3}
.center-ring{fill:none;stroke:rgba(119,188,255,.25);stroke-width:1.5}
.center-title{fill:var(--text);font-weight:900;text-anchor:middle;dominant-baseline:central}
.center-mode{fill:var(--accent);font-weight:800;text-anchor:middle}
.center-scale{fill:rgba(238,245,251,.72);font-size:10px;text-anchor:middle}
.active-link{fill:none;stroke:rgba(119,188,255,.8);stroke-width:3}
.neighbor-link{fill:none;stroke:rgba(119,188,255,.38);stroke-width:2;stroke-dasharray:5 5}
.degree-badge{fill:#0b1118;stroke:rgba(255,255,255,.45);stroke-width:1}
.degree-text{fill:#fff;font-size:9px;font-weight:900;text-anchor:middle;dominant-baseline:central}

@media(max-width:1100px){
  .smart-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smart-weights{grid-template-columns:repeat(3,minmax(120px,1fr))}
}
@media(max-width:780px){
  .smart-layout{grid-template-columns:1fr}
  .smart-result-head{align-items:start;flex-direction:column}
}
@media(max-width:560px){
  .smart-results,.smart-weights{grid-template-columns:1fr}
}


/* ===== v6 — graphe principal dynamique ===== */
.graph-panel{overflow:hidden}
.graph-head-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.graph-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,.4fr);gap:14px;margin-top:14px}
.graph-canvas-wrap{min-width:0;padding:8px;border:1px solid var(--border);border-radius:14px;background:#0c131b;overflow-x:auto}
#mainGraphSvg{display:block;width:100%;min-width:720px;height:auto}
.graph-inspector{padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--panel2)}
.graph-current{display:grid;gap:4px;padding:13px;border:1px solid var(--accent);border-radius:11px;background:var(--accentSoft)}
.graph-current strong{font-size:1.6rem}
.graph-current span{color:var(--muted);font-size:.75rem}
.graph-notes{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.graph-note{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border:1px solid var(--border);border-radius:999px;background:#0e1720;font-family:"Cascadia Code",Consolas,monospace;font-size:.7rem}
.graph-metrics{display:grid;gap:7px;margin-top:12px}
.graph-metric{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.75rem}
.graph-metric:last-child{border-bottom:0}
.graph-metric span{color:var(--muted)}
.graph-tip{margin-top:13px;padding:11px;border-left:3px solid var(--accent);background:rgba(119,188,255,.06);font-size:.72rem}
.graph-tip p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.graph-legend{display:flex;gap:10px 14px;flex-wrap:wrap;justify-content:center;margin:7px 5px 1px;color:var(--muted);font-size:.67rem}
.graph-legend span{display:inline-flex;gap:5px;align-items:center}
.gdot{width:9px;height:9px;border-radius:999px;display:inline-block}
.tonic-dot{background:var(--tonic)}.pre-dot{background:var(--pre)}.dom-dot{background:var(--dom)}.color-dot{background:var(--color)}
.gline{display:inline-block;width:23px;height:0;border-top:2px solid rgba(238,245,251,.7)}
.thick-line{border-top-width:5px}.dashed-line{border-top-style:dashed}

/* SVG principal */
.graph-guide{fill:none;stroke:rgba(150,169,187,.11);stroke-width:1}
.graph-sector-label{fill:rgba(150,169,187,.52);font-size:10px;font-weight:800;letter-spacing:.07em;text-anchor:middle}
.graph-edge{fill:none;stroke-linecap:round;transition:opacity .15s}
.graph-edge-label{fill:rgba(238,245,251,.58);font-size:9px;font-weight:800;text-anchor:middle}
.graph-node{cursor:pointer}
.graph-node circle.node-body{transition:r .14s,stroke-width .14s,fill-opacity .14s}
.graph-node:hover circle.node-body{stroke-width:4}
.graph-node .node-title{fill:#fff;text-anchor:middle;dominant-baseline:central;font-weight:900;pointer-events:none}
.graph-node .node-sub{fill:rgba(238,245,251,.72);text-anchor:middle;font-size:9px;pointer-events:none}
.graph-node .node-score{fill:#0b1016;text-anchor:middle;dominant-baseline:central;font-size:9px;font-weight:900;pointer-events:none}
.graph-node .score-badge{stroke:rgba(255,255,255,.55);stroke-width:1}
.graph-node.modulation-node circle.node-body{stroke:#b79cf0}
.graph-node.top-node circle.node-body{stroke:#fff;stroke-width:3}
.graph-center-halo{fill:none;stroke:rgba(119,188,255,.17);stroke-width:2}
.graph-center-body{fill:#142536;stroke:var(--accent);stroke-width:4}
.graph-center-title{fill:#fff;text-anchor:middle;dominant-baseline:central;font-size:28px;font-weight:950}
.graph-center-sub{fill:var(--accent);text-anchor:middle;font-size:10px;font-weight:850}
.graph-center-notes{fill:rgba(238,245,251,.72);text-anchor:middle;font-size:9px}
.graph-node-add{cursor:pointer}
.graph-node-add circle{fill:#0d1720;stroke:rgba(255,255,255,.45);stroke-width:1}
.graph-node-add text{fill:#fff;text-anchor:middle;dominant-baseline:central;font-size:13px;font-weight:900;pointer-events:none}

@media(max-width:1050px){
  .graph-layout{grid-template-columns:1fr}
  .graph-inspector{display:grid;grid-template-columns:minmax(210px,.45fr) minmax(0,.55fr);gap:14px}
  .graph-inspector>.eyebrow{grid-column:1/-1}
  .graph-tip{margin-top:0}
}
@media(max-width:700px){
  .graph-inspector{display:block}
  .graph-tip{margin-top:13px}
  .graph-head-actions{justify-content:flex-start}
}


/* ===== v7 — réseau relationnel entre nœuds périphériques ===== */
.graph-links-control{min-width:145px}
.graph-links-control select{min-height:40px}
.peer-line{border-top-color:#b79cf0;border-top-width:2px}
.graph-peer-edge{fill:none;stroke:#b79cf0;stroke-linecap:round;transition:opacity .13s,stroke-width .13s}
.graph-peer-edge.functional{stroke:#8fd9bb}
.graph-peer-edge.voice{stroke:#9dbfff}
.graph-peer-edge.modulation{stroke:#b79cf0}
.graph-peer-edge.color{stroke:#e49ab7}
.graph-peer-edge.is-muted,.graph-edge.is-muted{opacity:.07!important}
.graph-peer-edge.is-highlighted{opacity:.92!important;stroke-width:4.5!important}
.graph-edge.is-highlighted{opacity:1!important}
.graph-peer-label{fill:rgba(238,245,251,.7);font-size:8px;font-weight:850;text-anchor:middle;paint-order:stroke;stroke:#0c131b;stroke-width:3px;stroke-linejoin:round}
.graph-peer-badge{fill:#111b25;stroke:#b79cf0;stroke-width:1}
.graph-peer-score{fill:#fff;font-size:8px;font-weight:900;text-anchor:middle;dominant-baseline:central}
.graph-node.clustered circle.node-body{stroke:#b79cf0;stroke-width:2}
.graph-inspector-relations{display:grid;gap:6px;margin-top:10px}
.graph-relation-row{display:grid;grid-template-columns:1fr auto;gap:7px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.7rem}
.graph-relation-row:last-child{border-bottom:0}
.graph-relation-row span{color:var(--muted)}
.graph-relation-row b{color:#c8b8f4}