@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:'DM Sans',sans-serif;background:#f4f3f9;color:#111827;min-height:100%}
:root{--a:#534AB7;--al:#7F77DD;--abg:#f5f3ff;--ab:#eae8f4;--t:#1e1e2e;--t2:#6b7280;--t3:#9ca3af;--bd:#f0f0f4;--fr:#2563eb;--fbg:#eff6ff;--fbd:#bfdbfe;--to:#dc2626;--tbg:#fef2f2;--tbd:#fecaca;--pv:#eab308;--pvbg:#fefce8;--pvbd:#fde68a;--pri:#534AB7;--pri2:#7F77DD;--pri3:#EEEDFE;--acc:#111827;--dim:#9ca3af;--bg:#f4f3f9;--card:#fff;--border:#f0f0f4;--border2:#e5e7eb;--hover:#f5f3ff;--green:#059669;--orange:#d97706;--red:#ef4444;--ring-bg:#e0dfe8;--ring-dot:#d1cfe6;--ring-dot-acc:#b0aec4;--accent:#534AB7;--accent-l:#7F77DD;--accent-bg:#EEEDFE;--accent-bg2:#f5f3ff;--txt:#111827;--txt2:#6b7280;--txt3:#9ca3af;--radius:14px;--radius-sm:10px;--shadow:0 1px 3px rgba(0,0,0,.03);--shadow2:0 2px 8px rgba(83,74,183,.1)}
.shell{display:flex;flex-direction:column;min-height:100vh;max-width:1260px;margin:0 auto}
.topbar{display:flex;align-items:center;gap:14px;padding:8px 18px 0;flex-shrink:0}
.logo{
  font-family:'DM Serif Display',serif;
  font-size:30px;
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  user-select:none;
  padding-top:2px;
  /* Shimmer smooth : violet foncé → violet clair → or → retour */
  background:linear-gradient(90deg,
    #2D1F8C 0%,#3d30a8 15%,#534AB7 28%,#7F77DD 44%,
    #C8A444 50%,#7F77DD 56%,#534AB7 72%,#3d30a8 85%,#2D1F8C 100%
  );
  background-size:400% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:logoShimmer 9s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes logoShimmer{
  0%  {background-position:100% 0}
  45% {background-position: 20% 0}
  55% {background-position: 20% 0}
  100%{background-position:100% 0}
}
@media(max-width:600px){
  .logo{font-size:24px}
}
/* ═══ TABS — Direction B+ « Pills aérées » avec séparateur subtil gratuit/Composer Mode ═══ */
.tabs{
  display:flex;
  gap:1px;
  margin-left:auto;
  background:transparent;
  border-radius:0;
  padding:0;
  overflow-x:auto;
  flex-shrink:0;
  align-items:center;
  scrollbar-width:thin;
  scrollbar-color:rgba(83,74,183,.2) transparent;
}
.tabs::-webkit-scrollbar{height:4px}
.tabs::-webkit-scrollbar-track{background:transparent}
.tabs::-webkit-scrollbar-thumb{background:rgba(83,74,183,.18);border-radius:2px}

.tab{
  position:relative;
  padding:8px 14px;
  border:1px solid transparent;
  background:transparent;
  border-radius:9px;
  font-family:'Inter','DM Sans',sans-serif;
  font-size:12px;
  font-weight:500;
  color:#6b6884;
  cursor:pointer;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .15s ease;
  white-space:nowrap;
  letter-spacing:-.01em;
  font-feature-settings:"cv11","ss01","ss03";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.tab:hover{
  color:#534AB7;
  background:rgba(83,74,183,.05);
}
.tab:focus-visible{
  outline:2px solid rgba(83,74,183,.4);
  outline-offset:1px;
}
.tab.on{
  background:#fff;
  color:#534AB7;
  border-color:rgba(83,74,183,.16);
  box-shadow:0 1px 2px rgba(83,74,183,.06),0 2px 6px rgba(83,74,183,.04);
  font-weight:600;
}

/* Séparateur subtil entre les outils gratuits (index 1-9) et Mode compositeur (index 10-13) */
/* Le 10ᵉ enfant = "Formes" = 1er onglet Composer Mode */
.tab:nth-child(10){
  margin-left:9px;
  position:relative;
}
.tab:nth-child(10)::before{
  content:'';
  position:absolute;
  left:-5px;
  top:18%;
  bottom:18%;
  width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(83,74,183,.18) 30%,
    rgba(83,74,183,.18) 70%,
    transparent 100%
  );
  pointer-events:none;
}

/* Séparateur entre Mode compositeur (index 10-12) et FAQ (index 13) */
.tab-separator{
  width:1px;
  height:20px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(83,74,183,.18) 30%,
    rgba(83,74,183,.18) 70%,
    transparent 100%
  );
  margin:0 2px;
  pointer-events:none;
}

@media(max-width:800px){
  .tabs{gap:0;flex-wrap:nowrap}
  .tab{padding:7px 10px;font-size:11px}
  .tab:nth-child(10){margin-left:7px}
}
@media(max-width:800px){
  .tabs{flex-wrap:nowrap}
}
.pc-panel{overflow-x:hidden;padding:10px 18px 18px;display:none}
.pc-panel.active{display:block}
#panMetro .metro-main{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 14px}
@media(max-width:800px){.topbar{flex-wrap:wrap}
#panModulation .tabs{margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ═══ TRANSPOSEUR ═══ */


/* ── Shell ── */

/* ── Top bar ── */

/* ── Content ── */

/* ═══════════════════════════════
   Transposeur
   ═══════════════════════════════ */
.t1-grid{display:grid;grid-template-columns:260px 1fr;gap:12px;align-items:start}
@media(max-width:700px){.t1-grid{grid-template-columns:1fr}}

.pnl{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.lbl{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}

.iscroll{max-height:320px;overflow-y:auto;border:1px solid #f0f0f4;border-radius:10px}
.iscroll::-webkit-scrollbar{width:4px}
.iscroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
#cleflist{max-height:none}
.cath{padding:5px 10px;font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;background:#fafafa;border-bottom:1px solid #f0f0f4;position:sticky;top:0;z-index:1}
.irow{padding:8px 10px;cursor:pointer;border-bottom:1px solid #f8f8fb;color:#111827;transition:background .12s}
.irow:last-child{border-bottom:none}
.irow:hover{background:#f5f3ff}
.irow.sel{background:#EEEDFE;color:#3C3489}
.iiv{font-size:11px;color:#9ca3af;margin-top:1px}
.irow.sel .iiv{color:#7F77DD}

.seg{display:flex;background:#f3f2f8;border-radius:8px;padding:2px;gap:2px;margin-bottom:12px}
.sbtn{flex:1;padding:7px 6px;border:none;background:transparent;border-radius:6px;font-size:12px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .15s;font-family:inherit}
.sbtn.on{background:#fff;color:#111827;box-shadow:0 1px 3px rgba(0,0,0,.06)}

.apill{padding:4px 12px;border:1.5px solid #e5e7eb;border-radius:20px;background:#fff;font-size:12px;cursor:pointer;color:#6b7280;transition:all .15s;font-family:inherit}
.apill.on{border-color:#7F77DD;background:#f5f3ff;color:#534AB7}

.piano-outer{background:#e0dfe8;border-radius:10px;padding:10px 10px 12px;margin-bottom:10px}
.pwrap{position:relative;height:160px;user-select:none;-webkit-user-select:none}
.wkeys{display:flex;height:100%;gap:3px}
.wk{
  flex:1;border-radius:0 0 8px 8px;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:10px;font-size:13px;font-weight:500;color:#aaa;
  transition:all .12s;border:1px solid #c9ced6;border-top:3px solid #e2e6ec;
  box-shadow:0 4px 0 #b0b5bd;
}
.wk:hover{background:#f5f3ff;color:#534AB7;border-color:#c4b5fd;box-shadow:0 4px 0 #c4b5fd}
.wk.on{background:#534AB7;border-color:#4338ca;color:#fff;box-shadow:0 3px 0 #3730a3}

.bk{
  position:absolute;top:0;width:9.2%;height:58%;
  background:#1f2937;border-radius:0 0 7px 7px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:6px;font-size:9px;font-weight:500;color:#777;
  border:1px solid #111827;border-top:none;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.4),2px 3px 5px rgba(0,0,0,.3);
  transition:all .12s;z-index:2;
}
.bk:hover{background:#374151;color:#eee}
.bk.on{background:#534AB7;border-color:#4338ca;color:#fff;box-shadow:inset 0 -2px 0 #3730a3}

.piano-hint{text-align:center;font-size:10px;color:#7c7a9a;margin-top:6px}
.octrow{display:flex;align-items:center;gap:6px;margin-top:8px}
.obtn{width:28px;height:28px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .12s;font-family:inherit}
.obtn:hover{border-color:#534AB7;color:#534AB7}

.sbar{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:10px 18px;margin-top:10px;border:1px solid #f0f0f4;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.rcard{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:12px;text-align:center;margin-top:10px;box-shadow:0 1px 3px rgba(0,0,0,.03)}

input[type=text]{width:100%;padding:7px 10px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;color:#111827;font-size:13px;outline:none;margin-bottom:8px;font-family:inherit;transition:border .15s}
input[type=text]:focus{border-color:#7F77DD}

/* ── Clef reference staff ── */
.clef-staff-box{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:16px 12px;margin-top:10px;box-shadow:0 1px 3px rgba(0,0,0,.03);text-align:center;overflow-x:auto}
.clef-staff-box svg{max-width:100%;height:auto}
.clef-staff-title{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.clef-note-hl{cursor:pointer}
.clef-note-hl:hover ellipse{fill:#7F77DD}
.clef-note-hl:hover text.nlbl{fill:#7F77DD}

/* ── Inter-instrument transposition ── */
.xi-box{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:16px 18px;margin-top:10px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.xi-title{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.xi-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.xi-from{font-size:13px;font-weight:600;color:#534AB7;background:#f5f3ff;padding:5px 12px;border-radius:8px;white-space:nowrap}
.xi-arrow{font-size:18px;color:#d1d5db}
.xi-sel{appearance:none;background:#f4f3f9;color:#1e1e2e;border:1.5px solid #e5e7eb;border-radius:8px;padding:7px 30px 7px 12px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;outline:none;transition:border .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;flex:1;min-width:140px}
.xi-sel:focus{border-color:#534AB7}
.xi-res{background:#f5f3ff;border-radius:10px;padding:8px 14px;text-align:center}
.xi-res-main{font-size:12px;color:#374151;line-height:1.5}
.xi-res-main strong{color:#111827}
.xi-res-note{font-size:28px;font-weight:700;color:#534AB7;line-height:1.1;margin:4px 0}
.xi-res-sub{font-size:10px;color:#9ca3af}
.xi-empty{font-size:12px;color:#c4c2d6;font-style:italic;text-align:center;padding:8px}
/* ═══ INTERVALLES ═══ */
.bkey2.sel2{background:#7F77DD;color:#fff;box-shadow:2px 3px 6px rgba(127,119,221,.4)}
.bkey2.sel{background:#534AB7;color:#fff;box-shadow:2px 3px 6px rgba(83,74,183,.4)}
.bkey2:hover{background:#374151}
.bkey2{position:absolute;top:0;height:58%;background:#1f2937;border-radius:0 0 4px 4px;cursor:pointer;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:8px;font-weight:500;color:#666;transition:all .12s;box-shadow:2px 3px 5px rgba(0,0,0,.25)}
.bottom-row2{display:flex;gap:8px;flex:1;min-height:0}
.dir-btn2.on{border-color:#534AB7;background:#f5f3ff;color:#534AB7}
.dir-btn2:hover:not(.on){border-color:#c4b5fd}
.dir-btn2{flex:1;border:1.5px solid #e5e7eb;border-radius:10px;background:#fff;font-family:inherit;font-size:16px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .15s;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px;overflow:hidden}
.dir-sub2{font-size:10px;font-weight:500;margin-top:2px;white-space:nowrap}
.dir-card2{display:flex;flex-direction:column;flex-shrink:0;width:100px}
.dir-inner2{display:flex;flex-direction:column;gap:5px;flex:1}
.iv-btn2 .sub2{font-size:9px;font-weight:400;color:#9ca3af;display:block;margin-top:1px}
.iv-btn2.on .sub2{color:#7F77DD}
.iv-btn2.on{border-color:#534AB7;background:#f5f3ff;color:#534AB7}
.iv-btn2:hover:not(.on){border-color:#c4b5fd}
.iv-btn2{padding:7px 4px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .15s;text-align:center;line-height:1.2}
.iv-card2{flex:1;min-height:0;display:flex;flex-direction:column}
.iv-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:4px}
.iv-scroll2{flex:1;overflow-y:auto;min-height:0}
.piano-bottom2{display:flex;align-items:center;justify-content:flex-end;margin-top:6px;gap:4px}
.piano-card2{flex-shrink:0}
.piano-wrap2{background:#e0dfe8;border-radius:10px;padding:8px 5px 5px;overflow-x:auto}
.piano2{position:relative;height:140px;width:100%;min-width:720px}
.pref-btn2.on{border-color:#534AB7;background:#f5f3ff;color:#534AB7}
.pref-btn2{padding:4px 12px;border:1.5px solid #e5e7eb;border-radius:7px;background:#fff;font-family:inherit;font-size:11px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s}
.res-iv .iv-detail{font-size:10px;color:#7F77DD;margin-top:2px}
.res-iv .iv-name{font-size:18px;font-weight:700;color:#534AB7;line-height:1}
.res-iv{text-align:center;background:#f5f3ff;border-radius:10px;padding:7px 14px}
.res-note .n{font-size:30px;font-weight:700;color:#111827;line-height:1}
.res-note .o{font-size:10px;color:#9ca3af;margin-top:1px}
.res-note.second .n{color:#534AB7}
.res-note{text-align:center;min-width:44px}
.result-bar{background:#fff;border-radius:14px;padding:12px 18px;border:1px solid #f0f0f4;box-shadow:0 2px 8px rgba(83,74,183,.06);flex-shrink:0;min-height:64px}
.result-bar .sbar{margin-top:0}
.t2-app{display:flex;flex-direction:column;gap:8px}
.wkey2.sel2{background:#7F77DD;color:#fff;border-color:#7F77DD;box-shadow:0 3px 6px rgba(127,119,221,.3)}
.wkey2.inv{background:#e67e22;color:#fff;border-color:#e67e22;box-shadow:0 3px 6px rgba(230,126,34,.3)}
.bkey2.inv{background:#e67e22;color:#fff;border:2px solid #fff;box-shadow:0 0 8px rgba(230,126,34,.6),2px 3px 6px rgba(230,126,34,.4)}
.inv-box{background:#fef5ec;border:1.5px solid #fde8d0;border-radius:10px;padding:10px 14px;margin-top:8px}
.inv-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:11px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .15s;margin-top:8px}
.inv-toggle:hover{border-color:#e67e22;color:#e67e22}
.inv-toggle.on{border-color:#e67e22;background:#fef5ec;color:#e67e22}
.inv-toggle svg{width:14px;height:14px;fill:currentColor}
.inv-res{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.inv-res .inv-arrow{font-size:16px;color:#e67e22}
.inv-res .inv-name{font-size:16px;font-weight:700;color:#e67e22;line-height:1}
.inv-res .inv-detail{font-size:10px;color:#c0854a;margin-top:1px}
.inv-res .inv-note{text-align:center;min-width:40px}
.inv-res .inv-note .n{font-size:24px;font-weight:700;color:#e67e22;line-height:1}
.inv-res .inv-note .o{font-size:9px;color:#c0854a;margin-top:1px}
.inv-legend{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:6px;font-size:10px;color:#9ca3af}
.inv-legend span{display:inline-flex;align-items:center;gap:4px}
.inv-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.inv-legend .dot.c1{background:#534AB7}
.inv-legend .dot.c2{background:#7F77DD}
.inv-legend .dot.c3{background:#e67e22}
.wkey2.sel{background:#534AB7;color:#fff;border-color:#534AB7;box-shadow:0 3px 6px rgba(83,74,183,.3)}
.wkey2:hover{background:#f5f3ff}
.wkey2{position:absolute;top:0;height:100%;background:#fff;border:1px solid #d1d5db;border-radius:0 0 5px 5px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:11px;font-weight:500;color:#aaa;transition:all .12s;z-index:1;box-shadow:0 3px 4px rgba(0,0,0,.07)}
/* ═══ HARMONIE ═══ */


/* ── Shell ── */

/* ── Top bar ── */

/* ── Content ── */

/* ═══════════════════════════════
   Harmonie
   ═══════════════════════════════ */
.t3-wrap{max-width:560px;margin:0 auto}
.t3-card{background:#fff;border-radius:14px;padding:16px 18px;margin-bottom:10px;box-shadow:0 1px 4px rgba(83,74,183,.06)}
.t3-title{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.t3-pills{display:inline-flex;background:#eae8f4;border-radius:8px;padding:3px}
.t3-pill{padding:6px 14px;border:none;background:transparent;border-radius:6px;font-family:inherit;font-size:12px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .18s;white-space:nowrap}
.t3-pill.on{background:#fff;color:#534AB7;box-shadow:0 1px 3px rgba(83,74,183,.12)}
.t3-pill:hover:not(.on){color:#534AB7}
.t3-key-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.t3-key-row label{font-size:12px;font-weight:600;color:#6b7280}
.t3-kdd{position:relative;display:inline-block}
.t3-kdd-btn{display:flex;align-items:center;gap:8px;background:#f4f3f9;color:#1e1e2e;border:1.5px solid #e5e7eb;border-radius:8px;padding:5px 32px 5px 8px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;outline:none;transition:border .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;white-space:nowrap;min-height:38px}
.t3-kdd-btn:focus,.t3-kdd-btn:hover{border-color:#534AB7}
.t3-kdd-btn svg{flex-shrink:0}
.t3-kdd-list{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:220px;max-height:340px;overflow-y:auto;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(83,74,183,.13);z-index:50;padding:4px}
.t3-kdd-list::-webkit-scrollbar{width:5px}
.t3-kdd-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
.t3-kdd.open .t3-kdd-list{display:block}
.t3-kdd-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:7px;cursor:pointer;transition:background .12s;font-size:13px;font-weight:500;color:#374151}
.t3-kdd-item:hover{background:#f5f3ff}
.t3-kdd-item.sel{background:#EEEDFE;color:#534AB7;font-weight:600}
.t3-kdd-item svg{flex-shrink:0}
.t3-kdd-item .kdd-label{white-space:nowrap}
.t3-ks-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:#f4f3f9;border-radius:20px;font-size:12px;font-weight:600;color:#534AB7;border:1.5px solid #eae8f4;margin-top:8px}
.t3-ks-badge .ks-icon{font-size:14px}
.t3-staff-box{background:#fff;border-radius:12px;padding:18px 14px 14px;margin-bottom:10px;text-align:center;box-shadow:0 1px 4px rgba(83,74,183,.06);min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.t3-staff-box svg{max-width:100%}
.t3-chord-lbl{margin-top:6px;font-size:18px;font-weight:700;color:#1e1e2e;letter-spacing:-.02em}
.t3-chord-lbl .rn{color:#534AB7}
.t3-chord-lbl .ar{color:#c4c2d6;margin:0 6px;font-size:15px}
.t3-empty{font-size:13px;color:#c4c2d6;font-style:italic}
.t3-sg{margin-bottom:10px}
.t3-sg-t{font-size:10px;font-weight:600;color:#b0aec4;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.t3-sg-r{display:flex;flex-wrap:wrap;gap:5px}
.t3-sb{padding:6px 10px;background:#f4f3f9;border:1.5px solid #e5e7eb;border-radius:7px;font-family:inherit;font-size:13px;font-weight:500;color:#4b5563;cursor:pointer;transition:all .15s;min-width:38px;text-align:center}
.t3-sb:hover{border-color:#534AB7;color:#534AB7;background:#eeecfa}
.t3-sb.on{border-color:#534AB7;background:#534AB7;color:#fff}
.t3-pw{background:#e8e6f0;border-radius:8px;padding:6px 8px 4px;margin-top:10px;width:100%;align-self:stretch}
.t3-wk{height:80px;background:#fff;border:1px solid #d1d5db;border-radius:0 0 4px 4px;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-size:8px;color:#b0aec4;cursor:default;transition:background .12s}
.t3-wk.hl{background:#534AB7;color:#fff;border-color:#534AB7}
.t3-wk.hl2{background:#7F77DD;color:#fff;border-color:#7F77DD}
.t3-bk{height:50px;background:#374151;border:none;border-radius:0 0 3px 3px;position:absolute;z-index:2;cursor:default;transition:background .12s}
.t3-bk.hl{background:#534AB7}
.t3-bk.hl2{background:#7F77DD}
.t3-ct{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:8px;font-size:13px;font-weight:600;color:#1e1e2e}
.t3-ct span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 5px;background:#f4f3f9;border-radius:8px;font-size:12px}
.t3-ct span.rt{background:#534AB7;color:#fff}
.t3-ct .sp{background:none;min-width:auto;color:#c4c2d6;font-size:10px;padding:0}
.t3-play-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.t3-btn-play{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:#534AB7;color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
.t3-btn-play:hover{background:#4338a0}
.t3-btn-play:active{transform:scale(.96)}
.t3-btn-play svg{width:14px;height:14px;fill:#fff}
.t3-btn-play.playing{background:#7F77DD}
.t3-pm{display:inline-flex;background:#eae8f4;border-radius:6px;padding:2px}
.t3-pm-btn{padding:4px 10px;border:none;background:transparent;border-radius:5px;font-family:inherit;font-size:11px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .15s}
.t3-pm-btn.on{background:#fff;color:#534AB7;box-shadow:0 1px 2px rgba(83,74,183,.1)}
/* ── Cercle des Quintes ── */
.t3-circle-toggle-btn{padding:5px 12px;border:1.5px solid #e5e7eb;border-radius:20px;background:#fff;font-family:inherit;font-size:12px;font-weight:500;color:#534AB7;cursor:pointer;transition:all .15s}
.t3-circle-toggle-btn:hover{border-color:#534AB7;background:#f5f3ff}
.harmonie-circle-container{margin:0 0 10px 0}
#circleOfFifths{display:block;margin:0 auto}
#selectedTonalityInfo{color:#374151}
#selectedTonalityInfo p{margin:4px 0}
@media(max-width:480px){#circleOfFifths{width:300px;height:300px}}
/* ═══ ACCORDS ═══ */




/* ═══════════════════════════════
   Accords Tab — reuses T3 style
   ═══════════════════════════════ */
.ta-wrap{max-width:560px;margin:0 auto}
.ta-card{background:#fff;border-radius:14px;padding:16px 18px;margin-bottom:10px;box-shadow:0 1px 4px rgba(83,74,183,.06)}
.ta-title{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.ta-key-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ta-key-row label{font-size:12px;font-weight:600;color:#6b7280}

/* Custom dropdown */
.ta-kdd{position:relative;display:inline-block}
.ta-kdd-btn{display:flex;align-items:center;gap:8px;background:#f4f3f9;color:#1e1e2e;border:1.5px solid #e5e7eb;border-radius:8px;padding:5px 32px 5px 12px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;outline:none;transition:border .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;white-space:nowrap;min-height:38px}
.ta-kdd-btn:focus,.ta-kdd-btn:hover{border-color:#534AB7}
.ta-kdd-list{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:200px;max-height:340px;overflow-y:auto;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(83,74,183,.13);z-index:50;padding:4px}
.ta-kdd-list::-webkit-scrollbar{width:5px}
.ta-kdd-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
.ta-kdd.open .ta-kdd-list{display:block}
.ta-kdd-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;cursor:pointer;transition:background .12s;font-size:13px;font-weight:500;color:#374151}
.ta-kdd-item:hover{background:#f5f3ff}
.ta-kdd-item.sel{background:#EEEDFE;color:#534AB7;font-weight:600}
.ta-kdd-enhar{gap:0;cursor:default}
.ta-enh-opt{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;cursor:pointer;transition:background .12s,color .12s;font-weight:500}
.ta-enh-opt:hover{background:#EEEDFE;color:#534AB7}
.ta-enh-opt.sel{background:#534AB7;color:#fff;font-weight:600}
.ta-enh-opt.sel svg line{stroke:rgba(255,255,255,.4)}
.ta-enh-opt.sel svg text{fill:#fff}
.ta-enh-sep{color:#bbb;font-size:12px;margin:0 1px}

/* Staff box */
.ta-staff-box{background:#fff;border-radius:12px;padding:18px 14px 14px;margin-bottom:10px;text-align:center;box-shadow:0 1px 4px rgba(83,74,183,.06);min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ta-staff-box svg{max-width:100%}
.ta-chord-lbl{margin-top:6px;font-size:18px;font-weight:700;color:#1e1e2e;letter-spacing:-.02em}
.ta-chord-lbl .rn{color:#534AB7}
.ta-chord-lbl .ar{color:#c4c2d6;margin:0 6px;font-size:15px}
.ta-empty{font-size:13px;color:#c4c2d6;font-style:italic}

/* Chord groups */
.ta-sg{margin-bottom:10px}
.ta-sg-t{font-size:10px;font-weight:600;color:#b0aec4;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ta-sg-r{display:flex;flex-wrap:wrap;gap:5px}
.ta-sb{padding:6px 10px;background:#f4f3f9;border:1.5px solid #e5e7eb;border-radius:7px;font-family:inherit;font-size:13px;font-weight:500;color:#4b5563;cursor:pointer;transition:all .15s;min-width:38px;text-align:center}
.ta-sb:hover{border-color:#534AB7;color:#534AB7;background:#eeecfa}
.ta-sb.on{border-color:#534AB7;background:#534AB7;color:#fff}

/* Piano mini */
.ta-pw{background:#e8e6f0;border-radius:8px;padding:6px 8px 4px;margin-top:10px;width:100%;align-self:stretch}
.ta-wk{height:80px;background:#fff;border:1px solid #d1d5db;border-radius:0 0 4px 4px;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-size:8px;color:#b0aec4;cursor:default;transition:background .12s}
.ta-wk.hl{background:#534AB7;color:#fff;border-color:#534AB7}
.ta-wk.hl2{background:#7F77DD;color:#fff;border-color:#7F77DD}
.ta-bk{height:50px;background:#374151;border:none;border-radius:0 0 3px 3px;position:absolute;z-index:2;cursor:default;transition:background .12s}
.ta-bk.hl{background:#534AB7}
.ta-bk.hl2{background:#7F77DD}

/* Notes row */
.ta-ct{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:8px;font-size:13px;font-weight:600;color:#1e1e2e}
.ta-ct span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 5px;background:#f4f3f9;border-radius:8px;font-size:12px}
.ta-dblsharp{font-size:1.4em;vertical-align:middle;line-height:1}
.ta-ct span.rt{background:#534AB7;color:#fff}
.ta-ct .sp{background:none;min-width:auto;color:#c4c2d6;font-size:10px;padding:0}

/* Play row */
.ta-play-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.ta-btn-play{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:#534AB7;color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
.ta-btn-play:hover{background:#4338a0}
.ta-btn-play:active{transform:scale(.96)}
.ta-btn-play svg{width:14px;height:14px;fill:#fff}
.ta-btn-play.playing{background:#7F77DD}
.ta-pm{display:inline-flex;background:#eae8f4;border-radius:6px;padding:2px}
.ta-pm-btn{padding:4px 10px;border:none;background:transparent;border-radius:5px;font-family:inherit;font-size:11px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .15s}
.ta-pm-btn.on{background:#fff;color:#534AB7;box-shadow:0 1px 2px rgba(83,74,183,.1)}

/* Root badge */
.ta-root-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:#f4f3f9;border-radius:20px;font-size:12px;font-weight:600;color:#534AB7;border:1.5px solid #eae8f4;margin-top:8px}
/* ═══ MODES ═══ */


.tm-wrap{display:flex;flex-direction:column;gap:10px;max-width:940px;margin:0 auto}
.tm-top-row{display:flex;gap:8px;flex-wrap:wrap}
.tm-card{background:#fff;border-radius:14px;padding:14px;border:1px solid #f0f0f4;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.tm-key-card{flex:0 0 200px}
.tm-scale-pick-card{flex:1;min-width:280px;position:relative}
.tm-title{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.tm-ksel{
  appearance:none;width:100%;background:#f4f3f9;color:#1e1e2e;
  border:1.5px solid #e5e7eb;border-radius:8px;padding:8px 32px 8px 12px;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;outline:none;
  transition:border .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.tm-ksel:focus{border-color:#534AB7}

/* ── Searchable dropdown ── */
.tm-search-wrap{position:relative}
.tm-search-input{
  width:100%;padding:9px 12px 9px 42px !important;
  border:1.5px solid #e5e7eb;border-radius:8px;
  background:#f4f3f9;color:#1e1e2e;
  font-family:inherit;font-size:13px;font-weight:500;
  outline:none;transition:border .2s;margin-bottom:0;
}
.tm-search-input:focus{border-color:#534AB7}
.tm-search-input::placeholder{color:#b0aec4}
.tm-search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:#b0aec4;pointer-events:none;
}
.tm-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  max-height:360px;overflow-y:auto;
  background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;
  box-shadow:0 8px 24px rgba(83,74,183,.12);
  z-index:50;display:none;
}
.tm-dropdown.open{display:block}
.tm-dropdown::-webkit-scrollbar{width:5px}
.tm-dropdown::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
.tm-dd-cat{
  padding:6px 12px;font-size:9px;font-weight:700;color:#9ca3af;
  text-transform:uppercase;letter-spacing:.08em;
  background:#fafafa;border-bottom:1px solid #f0f0f4;
  position:sticky;top:0;z-index:1;
}
.tm-dd-item{
  padding:8px 14px;font-size:13px;font-weight:500;color:#4b5563;
  cursor:pointer;border-bottom:1px solid #f8f8fb;
  transition:background .1s;
}
.tm-dd-item:last-child{border-bottom:none}
.tm-dd-item:hover{background:#f5f3ff;color:#534AB7}
.tm-dd-item.sel{background:#EEEDFE;color:#3C3489;font-weight:600}
.tm-dd-empty{padding:16px;text-align:center;font-size:12px;color:#b0aec4;font-style:italic}
.tm-sel-badge{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;padding:5px 12px;
  background:#f5f3ff;border:1.5px solid #eae8f4;border-radius:20px;
  font-size:12px;font-weight:600;color:#534AB7;
}
.tm-sel-badge .cat{font-weight:400;color:#9ca3af;font-size:11px}

/* ── Detail ── */
.tm-detail{min-height:140px}
.tm-empty{text-align:center;padding:40px 20px;font-size:13px;color:#b0aec4;font-style:italic}
.tm-det-card{background:#fff;border-radius:14px;padding:20px;border:1px solid #f0f0f4;box-shadow:0 2px 8px rgba(83,74,183,.06)}
.tm-det-name{font-size:24px;font-weight:700;color:#1e1e2e;margin-bottom:2px;letter-spacing:-.02em}
.tm-det-sub{font-size:12px;color:#9ca3af;margin-bottom:16px}
.tm-det-sub strong{color:#534AB7}
.tm-section-lbl{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.tm-notes-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:16px}
.tm-note-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:36px;padding:0 10px;background:#f4f3f9;border-radius:9px;
  font-size:15px;font-weight:600;color:#1e1e2e;
}
.tm-note-chip.root{background:#534AB7;color:#fff}
.tm-note-chip .deg{font-size:9px;font-weight:500;color:#9ca3af;margin-left:5px}
.tm-note-chip.root .deg{color:rgba(255,255,255,.55)}
.tm-iv-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:16px}
.tm-iv-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;background:#eae8f4;border-radius:6px;
  font-size:11px;font-weight:600;color:#534AB7;
}
.tm-iv-arrow{font-size:10px;color:#d1cfe6;margin:0 1px}

.tm-staff-box{background:#fff;border-radius:12px;padding:14px 10px 10px;margin-bottom:14px;text-align:center;min-height:120px;box-shadow:0 1px 4px rgba(83,74,183,.06);overflow-x:auto}
.tm-staff-box svg{max-width:100%}

.tm-pw{background:#e0dfe8;border-radius:10px;padding:8px 6px 6px;overflow-x:auto;margin-bottom:14px}
.tm-piano-inner{position:relative;height:120px;min-width:500px}
.tm-wk{
  position:absolute;top:0;height:100%;background:#fff;border:1px solid #d1d5db;border-radius:0 0 5px 5px;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:6px;font-size:10px;font-weight:500;color:#bbb;
  transition:all .12s;z-index:1;box-shadow:0 3px 4px rgba(0,0,0,.07);
}
.tm-wk.hl{background:#534AB7;color:#fff;border-color:#534AB7;box-shadow:0 3px 6px rgba(83,74,183,.3)}
.tm-wk.hl2{background:#7F77DD;color:#fff;border-color:#7F77DD;box-shadow:0 3px 6px rgba(127,119,221,.3)}
.tm-bk{
  position:absolute;top:0;height:56%;background:#1f2937;border-radius:0 0 4px 4px;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:3px;font-size:7px;font-weight:500;color:#666;
  transition:all .12s;box-shadow:2px 3px 5px rgba(0,0,0,.25);
}
.tm-bk.hl{background:#6C63D0;color:#fff;border:2px solid #fff;box-shadow:0 0 8px rgba(83,74,183,.7),2px 3px 6px rgba(83,74,183,.4)}
.tm-bk.hl2{background:#9B8FEE;color:#fff;border:2px solid #fff;box-shadow:0 0 8px rgba(127,119,221,.6),2px 3px 6px rgba(127,119,221,.4)}

.tm-play-row{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.tm-btn-play{
  display:inline-flex;align-items:center;gap:6px;padding:9px 20px;
  background:#534AB7;color:#fff;border:none;border-radius:8px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;
}
.tm-btn-play:hover{background:#4338a0}
.tm-btn-play:active{transform:scale(.96)}
.tm-btn-play svg{width:14px;height:14px;fill:#fff}
.tm-btn-play.playing{background:#7F77DD}
.tm-pm{display:inline-flex;background:#eae8f4;border-radius:6px;padding:2px}
.tm-pm-btn{
  padding:5px 12px;border:none;background:transparent;border-radius:5px;
  font-family:inherit;font-size:11px;font-weight:500;color:#7c7a9a;
  cursor:pointer;transition:all .15s;
}
.tm-pm-btn.on{background:#fff;color:#534AB7;box-shadow:0 1px 2px rgba(83,74,183,.1)}
.fg-box{background:#f8f7ff;border:1.5px solid #eae8f4;border-radius:12px;padding:12px 16px;margin-top:12px;margin-bottom:14px;width:100%}
.fg-title{font-size:9px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.fg-hand{margin-bottom:8px}
.fg-hand:last-child{margin-bottom:0}
.fg-hand-lbl{font-size:10px;font-weight:600;color:#534AB7;margin-bottom:4px}
.fg-row{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end}
.fg-cell{display:flex;flex-direction:column;align-items:center;min-width:28px}
.fg-num{font-size:13px;font-weight:700;color:#1e1e2e;line-height:1.1}
.fg-num.fg4{color:#e74c3c;font-weight:800}
.fg-note{font-size:8px;color:#9ca3af;margin-top:1px}
.fg-sep{color:#d1cfe6;font-size:10px;margin:0 1px;align-self:center}
.fg-ref{font-size:8px;color:#b0aec4;margin-top:6px;display:flex;align-items:center;gap:4px}
.fg-ref-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e74c3c;flex-shrink:0}
.fg-badge{display:none}
@media(max-width:600px){.tm-top-row{flex-direction:column}
#panModulation .tm-key-card{flex:1}
#panModulation .tm-det-name{font-size:20px}}
/* ═══ MÉTRONOME ═══ */





.main{overflow-x:hidden;padding:8px 18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}

/* ── Top section: Ring + BPM ── */
.col-left{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:480px;flex-shrink:0}

.ring-box{position:relative;width:220px;height:220px;flex-shrink:0}
.ring-canvas{width:100%;height:100%;display:block}

.bpm-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.bpm-val{font-size:42px;font-weight:700;color:var(--acc);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bpm-lbl{font-size:10px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}

.bpm-ctrl{display:flex;align-items:center;gap:10px}
.pm-btn{
  width:34px;height:34px;border:1.5px solid var(--border2);border-radius:9px;
  background:var(--card);font-family:inherit;font-size:18px;font-weight:500;
  color:#6b7280;cursor:pointer;transition:all .12s;
  display:flex;align-items:center;justify-content:center;
}
.pm-btn:hover{border-color:var(--pri);color:var(--pri)}
.pm-btn:active{background:var(--hover)}

.tap-btn{
  padding:8px 20px;border:1.5px solid var(--border2);border-radius:10px;
  background:var(--card);font-family:inherit;font-size:12px;font-weight:600;
  color:#6b7280;cursor:pointer;transition:all .15s;
}
.tap-btn:hover{border-color:var(--pri);color:var(--pri)}
.tap-btn:active{background:var(--hover);transform:scale(.96)}

.slider-wrap{width:100%;padding:0 10px}
.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;
  background:linear-gradient(90deg,var(--ring-bg),var(--pri));
  border-radius:3px;outline:none;cursor:pointer;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;
  background:var(--pri);border:3px solid #fff;
  border-radius:50%;cursor:pointer;
  box-shadow:0 2px 8px rgba(83,74,183,.25);transition:transform .12s;
}
.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.slider::-moz-range-thumb{width:22px;height:22px;background:var(--pri);border:3px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(83,74,183,.25)}

.play-btn{
  width:50px;height:50px;border-radius:50%;border:none;
  background:var(--pri);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(83,74,183,.25);transition:all .18s;
}
.play-btn:hover{background:#4338a0;box-shadow:0 6px 20px rgba(83,74,183,.35);transform:scale(1.05)}
.play-btn:active{transform:scale(.95)}
.play-btn.on{background:var(--red);box-shadow:0 4px 16px rgba(239,68,68,.25)}
.play-btn.on:hover{background:#dc2626}
.play-btn svg{width:22px;height:22px;fill:#fff}

/* ── Right column ── */
.col-right{width:100%;max-width:900px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;padding-right:0}
.col-right::-webkit-scrollbar{width:4px}
.col-right::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}

#panMetro .card{background:var(--card);border-radius:12px;padding:10px 14px;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.03)}
#panMetro .card-t{font-size:9px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}

/* Collapsible cards */
#panMetro .card-collapse .card-header{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  padding:0;margin:0;user-select:none;
}
#panMetro .card-collapse .card-header #panMetro .card-t{margin-bottom:0}
#panMetro .card-collapse .card-arrow{
  font-size:10px;color:var(--dim);transition:transform .2s;
}
#panMetro .card-collapse.open .card-arrow{transform:rotate(180deg)}
#panMetro .card-collapse .card-body{
  display:none;padding-top:8px;
}
#panMetro .card-collapse.open .card-body{display:block}

/* Note value buttons */
.nv-grid{display:flex;gap:5px;flex-wrap:wrap}
.nv-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 10px;min-width:60px;
  border:1.5px solid var(--border2);border-radius:10px;background:var(--card);
  font-family:inherit;cursor:pointer;transition:all .18s;
}
.nv-btn:hover{border-color:#c4b5fd;background:var(--hover)}
.nv-btn.on{border-color:var(--pri);background:var(--pri3)}
.nv-btn .sym{font-size:22px;line-height:1;color:#6b7280}
.nv-btn.on .sym{color:var(--pri)}
.nv-btn .lbl{font-size:8px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.nv-btn.on .lbl{color:var(--pri2)}

/* Grouping chips */
.grp-chip{
  padding:5px 10px;border:1.5px solid var(--border2);border-radius:7px;
  background:var(--card);font-family:inherit;font-size:12px;font-weight:600;
  color:#6b7280;cursor:pointer;transition:all .15s;
}
.grp-chip:hover{border-color:#c4b5fd}
.grp-chip.on{border-color:var(--pri);background:var(--pri3);color:var(--pri)}

/* Time sig selector */
.ts-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ts-sel{
  appearance:none;background:var(--bg);color:var(--acc);
  border:1.5px solid var(--border2);border-radius:8px;
  padding:6px 28px 6px 10px;font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;outline:none;transition:border .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.ts-sel:focus{border-color:var(--pri)}
.ts-lbl{font-size:11px;font-weight:600;color:#6b7280}

/* Accent row */
.acc-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.acc-btn{
  width:30px;height:30px;border:1.5px solid var(--border2);border-radius:7px;
  background:var(--card);font-family:inherit;font-size:11px;font-weight:600;
  color:var(--dim);cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.acc-btn.on{border-color:var(--pri);background:var(--pri);color:#fff}
.acc-btn:hover:not(.on){border-color:#c4b5fd}

/* Subdivisions */
.sub-grid{display:flex;gap:4px;flex-wrap:wrap}
.sub-btn{
  padding:6px 12px;border:1.5px solid var(--border2);border-radius:8px;
  background:var(--card);font-family:inherit;font-size:12px;font-weight:600;
  color:#6b7280;cursor:pointer;transition:all .15s;
}
.sub-btn:hover{border-color:#c4b5fd}
.sub-btn.on{border-color:var(--green);background:#ecfdf5;color:var(--green)}

/* Polyrhythm */
.poly-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:8px}
.poly-toggle input{display:none}
.poly-sw{
  width:36px;height:20px;background:#d1d5db;border-radius:10px;
  position:relative;transition:background .2s;flex-shrink:0;
}
.poly-sw::after{
  content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;
  background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.poly-toggle input:checked~.poly-sw{background:var(--pri)}
.poly-toggle input:checked~.poly-sw::after{transform:translateX(16px)}
.poly-lbl{font-size:12px;font-weight:600;color:var(--acc)}

.poly-ctrl{display:none;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.poly-ctrl.show{display:flex}
.poly-num{
  width:40px;height:36px;border:1.5px solid var(--border2);border-radius:8px;
  background:var(--bg);color:var(--acc);font-family:inherit;font-size:16px;
  font-weight:700;text-align:center;outline:none;transition:border .2s;
}
.poly-num:focus{border-color:var(--pri)}
.poly-vs{font-size:12px;font-weight:700;color:var(--dim)}

/* Sound controls */
.snd-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.snd-row:last-child{margin-bottom:0}
.snd-label{font-size:11px;font-weight:600;color:#6b7280;min-width:55px}
.snd-sel{
  appearance:none;background:var(--bg);color:var(--acc);
  border:1px solid var(--border2);border-radius:6px;
  padding:4px 24px 4px 8px;font-family:inherit;font-size:11px;font-weight:500;
  cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;
}
.mini-slider{
  -webkit-appearance:none;appearance:none;width:80px;height:3px;
  background:#e5e7eb;border-radius:2px;outline:none;cursor:pointer;
}
.mini-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;
  background:var(--pri);border:1.5px solid #fff;border-radius:50%;cursor:pointer;
  box-shadow:0 1px 3px rgba(83,74,183,.2);
}
.mini-slider::-moz-range-thumb{width:12px;height:12px;background:var(--pri);border:1.5px solid #fff;border-radius:50%;cursor:pointer}
.snd-val{font-size:10px;color:var(--dim);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}

.swing-pct{font-size:13px;font-weight:700;color:var(--pri);min-width:36px;text-align:center;font-variant-numeric:tabular-nums}

/* Tempo preset combo */
.tempo-preset{width:100%;display:flex;flex-direction:column;gap:6px;align-items:center}
.tempo-combo{position:relative;width:100%}
.tempo-input{
  width:100%;background:var(--card);color:var(--acc);
  border:1.5px solid var(--border2);border-radius:10px;
  padding:9px 14px;font-family:inherit;font-size:12px;font-weight:500;
  outline:none;transition:border .2s;
}
.tempo-input::placeholder{color:var(--dim)}
.tempo-input:focus{border-color:var(--pri)}
.tempo-dropdown{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:var(--card);border:1.5px solid var(--border2);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:240px;overflow-y:auto;z-index:20;
}
.tempo-dropdown.open{display:block}
.tempo-dropdown::-webkit-scrollbar{width:4px}
.tempo-dropdown::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
.tempo-opt{
  padding:8px 14px;cursor:pointer;transition:background .1s;
  display:flex;align-items:baseline;gap:8px;
}
.tempo-opt:first-child{border-radius:8px 8px 0 0}
.tempo-opt:last-child{border-radius:0 0 8px 8px}
.tempo-opt:hover{background:var(--hover)}
.tempo-opt.active{background:var(--pri3)}
.tempo-opt-name{font-size:12px;font-weight:700;color:var(--acc)}
.tempo-opt-desc{font-size:10px;color:var(--dim)}
.tempo-opt-bpm{font-size:10px;font-weight:600;color:var(--pri);margin-left:auto;white-space:nowrap}
.tempo-range-row{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 12px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.tempo-range-row.hidden{display:none}
.tempo-range-lbl{font-size:10px;font-weight:600;color:var(--dim);white-space:nowrap;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.tempo-range-name{font-size:10px;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tempo-range-slider{
  -webkit-appearance:none;appearance:none;flex:1;height:4px;
  background:var(--pri3);border-radius:2px;outline:none;cursor:pointer;
}
.tempo-range-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--pri);border:2px solid #fff;border-radius:50%;cursor:pointer;
  box-shadow:0 1px 4px rgba(83,74,183,.25);
}
.tempo-range-slider::-moz-range-thumb{
  width:16px;height:16px;background:var(--pri);border:2px solid #fff;
  border-radius:50%;cursor:pointer;box-shadow:0 1px 4px rgba(83,74,183,.25);
}
/* ═══ RYTHME ═══ */


/* ── Section Nav ── */
#panRythme .sec-nav{display:flex;gap:4px;padding:10px 18px 0;flex-shrink:0}
#panRythme .sec-btn{padding:9px 18px;border:none;background:#fff;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;color:#7c7a9a;cursor:pointer;transition:all .18s;border:1.5px solid #e5e7eb;white-space:nowrap}
#panRythme .sec-btn:hover{border-color:#534AB7;color:#534AB7}
#panRythme .sec-btn.on{background:#534AB7;color:#fff;border-color:#534AB7;box-shadow:0 2px 8px rgba(83,74,183,.25)}

#panRythme .section{display:none}
#panRythme .section.active{display:block}

/* ── Cards ── */
#panRythme .card{background:#fff;border-radius:14px;padding:16px 18px;margin-bottom:10px;box-shadow:0 1px 4px rgba(83,74,183,.06)}
#panRythme .card-t{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;pointer-events:none}
#panRythme .pills{display:inline-flex;background:#eae8f4;border-radius:8px;padding:3px}
#panRythme .pill{padding:6px 14px;border:none;background:transparent;border-radius:6px;font-family:inherit;font-size:12px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .18s;white-space:nowrap}
#panRythme .pill.on{background:#fff;color:#534AB7;box-shadow:0 1px 3px rgba(83,74,183,.12)}
#panRythme .pill:hover:not(.on){color:#534AB7}

/* ── Meter dropdown ── */
.meter-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meter-sel{appearance:none;background:#f4f3f9;color:#1e1e2e;border:1.5px solid #e5e7eb;border-radius:8px;padding:8px 32px 8px 12px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;outline:none;transition:border .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.meter-sel:focus{border-color:#534AB7}
.info-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#f4f3f9;border-radius:20px;font-size:12px;font-weight:600;color:#534AB7;border:1.5px solid #eae8f4;margin-top:10px}

/* ── Hierarchy ── */
.hier-box{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(83,74,183,.06);margin-bottom:10px}
.hier-title{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}
.layer{display:flex;align-items:center;gap:0;padding:6px 0;border-bottom:1px solid #f0f0f4;cursor:pointer;transition:all .15s;border-radius:8px}
.layer:last-child{border-bottom:none}
.layer:hover{background:#faf9ff}
.layer.hl{background:#f5f3ff}
.layer.dim{opacity:.25;pointer-events:auto}
.layer-lbl{width:110px;flex-shrink:0;padding:0 10px;font-size:11px;font-weight:600;color:#7c7a9a;text-transform:uppercase;letter-spacing:.04em;display:flex;flex-direction:column;gap:1px}
.layer-lbl .ll-v{font-size:10px;font-weight:400;color:#b0aec4;text-transform:none;letter-spacing:0}
.layer-beats{flex:1;display:flex;align-items:center;overflow-x:auto;padding:4px 0}
.beat{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0}
.note-sym{font-size:22px;line-height:1;color:#534AB7;transition:all .15s}
.layer.dim .note-sym{color:#d1d5db}
.acc{font-size:9px;font-weight:700;margin-top:2px;letter-spacing:.02em}
.acc.s{color:#534AB7}
#panModulation .acc.w{color:#c4c2d6}
#panModulation .acc.ss{color:#7F77DD}
.layer.dim .acc{color:#e5e7eb}
.legend{display:flex;gap:14px;margin-top:12px;padding-top:10px;border-top:1px solid #f0f0f4}
.leg-i{display:flex;align-items:center;gap:5px;font-size:10px;color:#7c7a9a}
.leg-d{width:8px;height:8px;border-radius:50%;display:block;flex:none;border:none;padding:0;margin:0;box-shadow:none;transition:none;cursor:default;pointer-events:none}
.leg-d.st{background:#534AB7}
.leg-d.sm{background:#7F77DD}
.leg-d.wk{background:#fff;border:1.5px solid #d1d5db}
.hint{text-align:center;font-size:11px;color:#b0aec4;font-style:italic;margin-top:6px}

/* ── Pulse ── */
.pulse-box{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(83,74,183,.06);margin-bottom:10px}
.pulse-t{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.pulse-desc{font-size:11px;color:#7c7a9a;margin-bottom:12px;line-height:1.5}
.pulse-row{display:flex;align-items:center;gap:0;padding:5px 0}
.pulse-lbl{width:90px;flex-shrink:0;font-size:10px;font-weight:600;color:#7c7a9a;text-transform:uppercase;letter-spacing:.04em;padding:0 8px}
.pulse-dots{flex:1;display:flex;align-items:center}
.pdot{flex:1;display:flex;align-items:center;justify-content:center}
.pdot-i{width:10px;height:10px;border-radius:50%;background:#d1d5db;transition:all .2s}
.pdot-i.big{width:14px;height:14px;background:#534AB7}
.pdot-i.med{width:12px;height:12px;background:#7F77DD}
.barline{width:2px;height:28px;background:#534AB7;border-radius:1px;margin:0 -1px;flex-shrink:0}

/* ═══════════════════════════════
   Section 2 — Division du temps
   ═══════════════════════════════ */
/* Note selector */
.note-sel-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.note-sel-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;background:#f4f3f9;border:1.5px solid #e5e7eb;border-radius:10px;font-family:inherit;cursor:pointer;transition:all .15s;min-width:60px}
.note-sel-btn:hover{border-color:#534AB7;background:#eeecfa}
.note-sel-btn.on{border-color:#534AB7;background:#534AB7;color:#fff;box-shadow:0 2px 8px rgba(83,74,183,.25)}
.note-sel-btn .ns-sym{font-size:26px;line-height:1}
.note-sel-btn .ns-name{font-size:9px;font-weight:600;color:#7c7a9a}
.note-sel-btn .ns-rest-sym{font-size:18px;margin-left:6px;opacity:.5}
.note-sel-btn .ns-rest{font-size:8px;font-weight:500;color:#b0aec4}
.note-sel-btn.on .ns-rest-sym{opacity:.7}
.note-sel-btn.on .ns-name{color:rgba(255,255,255,.8)}
.note-sel-btn.on .ns-rest{color:rgba(255,255,255,.55)}

/* Equivalence table */
.eq-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:8px}
.eq-table th{padding:6px 8px;font-size:9px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;text-align:center;border-bottom:1.5px solid #eae8f4;background:#faf9ff}
.eq-table th:first-child{text-align:left;padding-left:12px;width:120px}
.eq-table td{padding:10px 8px;text-align:center;border-bottom:1px solid #f0f0f4;vertical-align:middle}
.eq-table td:first-child{text-align:left;padding-left:12px;font-size:11px;font-weight:600;color:#6b7280}
.eq-table tr:last-child td{border-bottom:none}
.eq-sym{font-size:24px;line-height:1;color:#111827}
.eq-sym.accent{color:#534AB7}
.eq-lbl{font-size:9px;color:#9ca3af;margin-top:2px}
.eq-rest{font-size:20px;color:#6b7280}

/* Tuplet section */
.tup-card{background:#fff;border-radius:14px;padding:16px 18px;margin-bottom:10px;box-shadow:0 1px 4px rgba(83,74,183,.06)}
.tup-title{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.tup-tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.tup-tab{padding:6px 14px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .15s}
.tup-tab:hover{border-color:#534AB7;color:#534AB7}
.tup-tab.on{border-color:#534AB7;background:#534AB7;color:#fff;box-shadow:0 2px 6px rgba(83,74,183,.2)}

.tup-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
@media(max-width:600px){.tup-grid{grid-template-columns:1fr}}
.tup-cell{background:#f4f3f9;border-radius:10px;padding:12px;text-align:center;border:1.5px solid #eae8f4}
.tup-cell-t{font-size:9px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
/* Tuplet bracket (SVG arc + number) */
.tup-bracket{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;max-width:100%;text-align:center;vertical-align:middle}
.tup-bracket svg{display:block;width:100%;height:10px;margin:0}
.tup-bracket .tup-num{font-size:11px;font-weight:700;color:#534AB7;margin-top:-1px;margin-bottom:1px}
.tup-bracket .tup-syms{font-size:18px;line-height:1.2;color:#111827;letter-spacing:2px;white-space:nowrap}
.tup-bracket .tup-syms .rest{color:#6b7280}
.tup-bracket .tup-syms .dot{color:#534AB7}
.tup-bracket .tup-syms .long{color:#534AB7;font-weight:600}

.tup-eq{font-size:10px;color:#7c7a9a;margin-top:3px}

.tup-var-title{font-size:10px;font-weight:600;color:#7c7a9a;margin:14px 0 8px}
.tup-var-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.tup-var{background:#f4f3f9;border:1px solid #eae8f4;border-radius:8px;padding:8px 10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center}
.tup-var-desc{font-size:8px;color:#9ca3af;margin-top:3px;letter-spacing:0;line-height:1.3}
.rythme-content{padding:12px 18px 24px}




/* ═══ TAB 8: MODULATION — CSS ═══ */
#panModulation .shell{max-width:940px;margin:0 auto;padding:16px 18px 60px}
#panModulation .topbar{display:flex;align-items:baseline;gap:10px;margin-bottom:20px;flex-wrap:wrap}
#panModulation .logo{font-size:22px;font-weight:700;color:var(--a);letter-spacing:-.03em}
#panModulation .logo span{font-size:11px;font-weight:500;color:var(--t3);letter-spacing:.04em;text-transform:uppercase;margin-left:4px}
#panModulation .badge{font-size:10px;font-weight:600;color:var(--al);background:var(--abg);border:1.5px solid var(--ab);border-radius:20px;padding:3px 10px}
#panModulation .card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(83,74,183,.06);margin-bottom:12px}
#panModulation .card-title{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
/* Key sel */
#panModulation .key-grid{display:grid;grid-template-columns:1fr 40px 1fr;gap:12px;align-items:end}
@media(max-width:600px){.key-grid{grid-template-columns:1fr}}
#panModulation .key-box{display:flex;flex-direction:column;gap:8px}
#panModulation .key-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
#panModulation .key-label.from{color:var(--fr)}.key-label.to{color:var(--to)}
#panModulation .key-arrow{display:flex;align-items:center;justify-content:center;padding-bottom:6px}
@media(max-width:600px){.key-arrow{display:none}}
#panModulation .key-sel-row{display:flex;gap:6px;align-items:center}
#panModulation select.ksel{flex:1;appearance:none;background:#f9f8fd;border:1.5px solid #e5e7eb;border-radius:8px;padding:8px 32px 8px 12px;font-family:inherit;font-size:15px;font-weight:600;color:var(--t);cursor:pointer;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
#panModulation select.ksel:focus{border-color:var(--a)}
#panModulation .pills{display:inline-flex;background:#eae8f4;border-radius:8px;padding:3px}
#panModulation .pill{padding:6px 12px;border:none;background:transparent;border-radius:6px;font-family:inherit;font-size:12px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .18s;white-space:nowrap}
#panModulation .pill.on{background:#fff;color:var(--a);box-shadow:0 1px 3px rgba(83,74,183,.12)}
#panModulation .swap-btn{width:36px;height:36px;border:1.5px solid #e5e7eb;border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--t3);transition:all .2s}
#panModulation .swap-btn:hover{border-color:var(--a);color:var(--a);background:var(--abg)}
#panModulation .dist-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
#panModulation .dist-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;background:var(--abg);border:1.5px solid var(--ab);border-radius:20px;font-size:12px;font-weight:600;color:var(--a)}
#panModulation .ks-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;font-size:11px;font-weight:600}
#panModulation .ks-badge.fb{background:var(--fbg);color:var(--fr);border:1px solid var(--fbd)}
#panModulation .ks-badge.tb{background:var(--tbg);color:var(--to);border:1px solid var(--tbd)}
/* Chord lists */
#panModulation .clr{display:flex;gap:16px;flex-wrap:wrap}
#panModulation .clc{flex:1;min-width:200px}
#panModulation .clt{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;padding-bottom:4px;border-bottom:2px solid var(--bd)}
#panModulation .clt.ft{color:var(--fr)}.clt.tt{color:var(--to)}
#panModulation .clg{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin:8px 0 4px}
#panModulation .cli{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;margin:2px;border-radius:6px;font-size:12px;font-weight:600;border:1px solid var(--bd);background:#faf9fd}
#panModulation .cli.ip{border-color:var(--pvbd);background:var(--pvbg);color:var(--pv);box-shadow:0 0 0 1px var(--pvbd)}
#panModulation .cli .rs{font-weight:700}.cli .ns{font-weight:400;color:var(--t2);font-size:11px}
#panModulation .cli.ip .ns{color:var(--pv)}
/* Pivot table */
#panModulation table.pt{width:100%;border-collapse:collapse;font-size:13px}
#panModulation table.pt th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);padding:8px 10px;text-align:left;border-bottom:2px solid var(--bd)}
#panModulation table.pt td{padding:10px;border-bottom:1px solid var(--bd);vertical-align:middle}
#panModulation table.pt tr:last-child td{border-bottom:none}table.pt tr:hover td{background:#faf9ff}
#panModulation .rc{font-weight:700;font-size:14px}.rc.rf{color:var(--fr)}.rc.rt{color:var(--to)}
#panModulation .cn{font-weight:600;color:var(--t);font-size:14px}
#panModulation .pty{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#panModulation .pty.tri{background:var(--pvbg);color:var(--pv);border:1px solid var(--pvbd)}
#panModulation .pty.sev{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
#panModulation .pty.mix{background:#fdf2f8;color:#9d174d;border:1px solid #fbcfe8}
#panModulation .fr{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
#panModulation .fg{padding:5px 12px;border:1.5px solid #e5e7eb;border-radius:20px;background:#fff;font-family:inherit;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s}
#panModulation .fg.on{border-color:var(--a);background:var(--abg);color:var(--a)}
#panModulation .cb{font-size:12px;color:var(--t3);margin-left:auto}.cb strong{color:var(--a)}
#panModulation .sh{display:flex;align-items:center;gap:8px;margin-bottom:8px}.sh h3{font-size:13px;font-weight:700}
#panModulation .es{text-align:center;padding:30px 20px;color:var(--t3);font-size:13px;font-style:italic}
#panModulation .lg{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;margin-bottom:12px}
#panModulation .li{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t2)}
#panModulation .ld{width:8px;height:8px;border-radius:50%}.ld.df{background:var(--fr)}.ld.dt{background:var(--to)}.ld.dp{background:var(--pv)}
/* Tech blocks */
#panModulation .mtg{display:flex;flex-direction:column;gap:10px}
/* ── Chain of modulations ── */
#mod_chainUI{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 0}
.chn-node{background:var(--abg);border:1.5px solid var(--a);border-radius:10px;padding:8px 10px;min-width:110px;position:relative;flex-shrink:0}
.chn-node.chn-active{border-color:#c8a444;background:#fdf8ec}
.chn-key-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.chn-key-row select{font-size:12px;padding:2px 4px;border-radius:6px;border:1px solid var(--bd);background:#fff;cursor:pointer}
.chn-pills{display:flex;gap:3px}
.chn-pills button{font-size:10px;padding:1px 6px;border-radius:5px;border:1px solid var(--bd);background:#fff;cursor:pointer}
.chn-pills button.on{background:var(--a);color:#fff;border-color:var(--a)}
.chn-tech-row{margin-top:4px}
.chn-tech-row select{font-size:11px;width:100%;padding:2px 4px;border-radius:6px;border:1px solid var(--bd);background:#fff;cursor:pointer}
.chn-del{position:absolute;top:4px;right:6px;font-size:13px;color:#b0adc4;cursor:pointer;line-height:1}
.chn-del:hover{color:#e55}
.chn-arrow{font-size:18px;color:var(--a);font-weight:700;flex-shrink:0}
.chn-add{font-size:20px;width:34px;height:34px;border-radius:50%;border:2px dashed var(--a);background:none;color:var(--a);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.chn-add:hover{background:var(--abg)}
.chn-play-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
#panModulation .chn-play-row .play-btn{padding:12px 20px;font-size:13px;font-weight:600;min-height:48px;min-width:170px;max-width:240px;white-space:normal;line-height:1.25;text-align:center;border-radius:10px;box-shadow:0 2px 6px rgba(83,74,183,0.15);transition:transform .15s,box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;word-break:normal;overflow-wrap:break-word}
#panModulation .chn-play-row .play-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(83,74,183,0.25)}
.chn-lbl{font-size:11px;color:#888;margin-bottom:2px}
/* ── Repertoire Library ── */
#mod_libUI .lib-search{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
#mod_libUI .lib-search input{flex:1;min-width:180px;padding:6px 10px;border-radius:8px;border:1px solid var(--bd);font-size:13px;font-family:inherit}
#mod_libUI .lib-search select{padding:6px 8px;border-radius:8px;border:1px solid var(--bd);background:#fff;font-size:12px;cursor:pointer;font-family:inherit}
.lib-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;padding-right:4px}
.lib-item{padding:8px 12px;border:1px solid var(--bd);border-radius:8px;background:#faf9fd;cursor:pointer;transition:all .15s;display:flex;justify-content:space-between;align-items:center;gap:10px}
.lib-item:hover{border-color:var(--a);background:var(--abg);transform:translateX(2px)}
.lib-info{flex:1;min-width:0}
.lib-comp{font-size:13px;font-weight:600;color:#1e1e2e}
.lib-work{font-size:12px;color:#6b7280;font-style:italic}
.lib-mod{font-size:11px;color:var(--a);margin-top:2px;font-family:'DM Sans',sans-serif}
.lib-tags{display:flex;gap:4px;flex-wrap:wrap;flex-shrink:0}
.lib-tag{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase}
.lib-tag.era{background:#e0e7ff;color:#3730a3}
.lib-tag.tech{background:#fef3c7;color:#92400e}
.lib-empty{font-size:12px;color:#9ca3af;text-align:center;padding:20px;font-style:italic}
#panModulation .mt{padding:12px 16px;border-radius:10px;border:1px solid var(--bd);background:#faf9fd;transition:all .2s}
#panModulation .mt.sel{border-color:var(--a);background:var(--abg)}
#panModulation .mth{display:flex;align-items:center;gap:8px;margin-bottom:4px;cursor:pointer}
#panModulation .mtn{font-size:13px;font-weight:700;color:var(--t)}
#panModulation .mtb{font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.04em}
#panModulation .mtb.dia{background:#ecfdf5;color:#059669}.mtb.chr{background:#fefce8;color:#a16207}
#panModulation .mtb.enh{background:#fdf2f8;color:#9d174d}.mtb.dir{background:#f1f5f9;color:#475569}
#panModulation .mtd{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:6px}
/* Prog builder */
#panModulation .pb{margin-top:8px;padding:10px 12px;background:#fff;border:1px solid var(--bd);border-radius:8px}
#panModulation .pbt{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:6px}
#panModulation .psl{display:flex;gap:4px;align-items:flex-start;flex-wrap:wrap}
#panModulation .ps{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:80px}
#panModulation .ps label{font-size:9px;font-weight:600;text-transform:uppercase}.ps label.lf{color:var(--fr)}.ps label.lt{color:var(--to)}.ps label.lp{color:var(--pv)}
#panModulation .ps select{appearance:none;background:#f9f8fd;border:1.5px solid #e5e7eb;border-radius:6px;padding:4px 20px 4px 6px;font-family:inherit;font-size:12px;font-weight:700;color:var(--t);cursor:pointer;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center;min-width:68px;max-width:100px}
#panModulation .ps select:focus{border-color:var(--a)}
#panModulation .ps select.inv-sel{font-size:10px;font-weight:500;color:var(--t2);min-width:50px;padding:2px 16px 2px 4px}
#panModulation .pa{font-size:14px;color:var(--t3);margin-top:14px}
#panModulation .pgb{margin-top:8px;padding:7px 16px;border:none;border-radius:8px;background:var(--a);color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
#panModulation .pgb:hover{background:#4338ca}
/* Pedal voice selector */
#panModulation .ped-row{display:flex;align-items:center;gap:8px;margin-top:6px}
#panModulation .ped-row label{font-size:10px;font-weight:600;color:var(--t2)}
#panModulation .ped-pills{display:flex;gap:3px}
#panModulation .ped-pill{padding:3px 10px;border:1.5px solid #e5e7eb;border-radius:14px;background:#fff;font-family:inherit;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer}
#panModulation .ped-pill.on{border-color:var(--a);background:var(--abg);color:var(--a)}
/* Score area */
#panModulation .score-wrap{background:#fff;border-radius:10px;padding:12px 8px;border:1px solid var(--bd);margin-top:10px;overflow-x:auto}
#panModulation .score-wrap svg{display:block;margin:0 auto}
/* Play row */
#panModulation .play-row{display:flex;align-items:center;gap:10px;margin-top:10px}
#panModulation .play-btn{padding:7px 16px;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;background:var(--a);color:#fff}
#panModulation .play-btn:hover{background:#4338ca}.play-btn.playing{background:#059669}
#panModulation .pm{display:flex;background:#eae8f4;border-radius:6px;padding:2px}
#panModulation .pm button{padding:4px 10px;border:none;background:transparent;border-radius:5px;font-family:inherit;font-size:11px;font-weight:500;color:#7c7a9a;cursor:pointer}
#panModulation .pm button.on{background:#fff;color:var(--a)}
/* RN labels under staff */
#panModulation .rn-row{position:relative;height:18px;margin-top:4px}
#panModulation .rn-lbl{position:absolute;transform:translateX(-50%);text-align:center;font-size:12px;font-weight:700;white-space:nowrap;line-height:1}
#panModulation .rn-lbl.zf{color:var(--fr)}.rn-lbl.zt{color:var(--to)}.rn-lbl.zp{color:var(--pv)}
#panModulation .name-row{position:relative;height:14px;margin-top:1px}
#panModulation .name-lbl{position:absolute;transform:translateX(-50%);text-align:center;font-size:10px;color:var(--t2);white-space:nowrap;line-height:1}
/* VL panel */
#panModulation .vl-panel{margin-top:10px;border-radius:8px;padding:10px 14px;font-size:12px}
#panModulation .vl-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
#panModulation .vl-issues{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
#panModulation .vl-hdr{font-weight:700;margin-bottom:6px}
#panModulation .vl-icon{margin-right:4px}
#panModulation .vl-item{padding:3px 0;display:flex;align-items:center;gap:6px;font-size:11px}
#panModulation .vl-item.error{color:#991b1b}.vl-item.warn{color:#92400e}
#panModulation .vl-badge{font-weight:700;font-size:13px;width:16px;text-align:center;flex-shrink:0}
#panModulation .vl-rule{font-weight:600;background:#fef2f2;padding:1px 6px;border-radius:4px;font-size:10px;white-space:nowrap}
#panModulation .vl-item.warn .vl-rule{background:#fefce8;color:#92400e}
@media(max-width:600px){.shell{padding:12px 12px 40px}.card{padding:12px 14px}.clr{flex-direction:column}}
/* ═══ TAB 9: SÉQUENCES — CSS ═══ */
#panSequences .shell{display:flex;flex-direction:column;max-width:1280px;margin:0 auto}
#panSequences .topbar{display:flex;align-items:center;gap:14px;padding:12px 18px 0;flex-shrink:0}
#panSequences .logo{font-size:22px;font-weight:700;letter-spacing:-.04em;color:#534AB7;display:flex;align-items:baseline;gap:2px}
#panSequences .logo span{font-size:11px;font-weight:500;color:#9ca3af;letter-spacing:.04em;text-transform:uppercase;margin-left:4px}
#panSequences .main{padding:12px 18px 18px;display:flex;flex-direction:column;gap:10px}
/* Cards */
#panSequences .card{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
#panSequences .card-title{font-size:9px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
/* Controls row */
#panSequences .ctrl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
#panSequences .ctrl-col{display:flex;flex-direction:column;gap:4px}
#panSequences .ctrl-col label{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em}
#panSequences .ctrl-col select{padding:6px 10px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:13px;color:#111827;cursor:pointer;outline:none;min-width:120px}
#panSequences .ctrl-col select:focus{border-color:#7F77DD}
/* Pill toggles */
#panSequences .pills{display:flex;gap:3px;background:#eae8f4;border-radius:8px;padding:2px}
#panSequences .pill{padding:5px 14px;border:none;background:transparent;border-radius:6px;font-family:inherit;font-size:12px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .15s;white-space:nowrap}
#panSequences .pill.on{background:#fff;color:#534AB7;box-shadow:0 1px 3px rgba(83,74,183,.12)}
/* Sequence list */
#panSequences .seq-list{display:flex;gap:4px;flex-wrap:wrap}
#panSequences .seq-btn{padding:6px 12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:12px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;white-space:nowrap}
#panSequences .seq-btn:hover{border-color:#c4b5fd}
#panSequences .seq-btn.on{border-color:#534AB7;background:#f5f3ff;color:#534AB7}
/* Staff area */
#panSequences .staff-wrap{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.03);overflow-x:auto;min-height:200px;position:relative;-webkit-user-select:none;user-select:none}
#panSequences .staff-wrap svg{cursor:default}
#panSequences .staff-wrap svg:active{cursor:ns-resize}
#panSequences .staff-empty{text-align:center;padding:40px;font-size:13px;color:#9ca3af}
/* Play row */
#panSequences .play-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#panSequences .play-btn{padding:8px 20px;border:none;border-radius:10px;background:#534AB7;color:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
#panSequences .play-btn:hover{background:#4339a0}
#panSequences .play-btn.playing{background:#7F77DD;animation:pulse .5s ease infinite alternate}
@keyframes pulse{from{box-shadow:0 0 0 0 rgba(83,74,183,.3)}to{box-shadow:0 0 0 8px rgba(83,74,183,0)}}
#panSequences .pm{display:flex;gap:2px;background:#eae8f4;border-radius:7px;padding:2px}
#panSequences .pm button{padding:4px 12px;border:none;background:transparent;border-radius:5px;font-family:inherit;font-size:11px;font-weight:500;color:#7c7a9a;cursor:pointer}
#panSequences .pm button.on{background:#fff;color:#534AB7}
#panSequences .exp-btn{padding:6px 14px;border:1.5px solid #1f2937;border-radius:8px;background:#1f2937;color:#fff;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
#panSequences .exp-btn:hover{background:#374151}
/* Info badge */
#panSequences .info-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#f5f3ff;border:1px solid #e8e5f7;border-radius:10px;font-size:12px;color:#534AB7;font-weight:500}
#panSequences .info-badge .ib-label{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}
/* Degree labels under staff */
#panSequences .deg-row{display:flex;gap:0;margin-top:4px}
#panSequences .deg-cell{text-align:center;font-size:11px;font-weight:600;color:#534AB7;font-family:'DM Sans',serif}
#panSequences .deg-name{font-size:9px;color:#9ca3af;font-weight:500;margin-top:1px}
/* Legend */
#panSequences .legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
#panSequences .legend-item{display:flex;align-items:center;gap:4px;font-size:10px;color:#9ca3af}
#panSequences .legend-dot{width:8px;height:8px;border-radius:50%}
/* Category headers */
#panSequences .cat-label{font-size:10px;font-weight:700;color:#534AB7;text-transform:uppercase;letter-spacing:.06em;margin:6px 0 3px;width:100%;cursor:pointer;display:flex;align-items:center;gap:5px;user-select:none}
#panSequences .cat-label:hover{color:#3d2f99}
#panSequences .cat-label .arrow{display:inline-block;font-size:8px;transition:transform .2s;color:#9b8ed8}
#panSequences .cat-label .arrow.open{transform:rotate(90deg)}
#panSequences .cat-theory{font-size:11px;line-height:1.6;color:#4b5563;margin:2px 0 10px;width:100%;padding:10px 12px;background:#f8f7fd;border-radius:8px;border-left:3px solid #534AB7;display:none}
#panSequences .cat-theory.open{display:block}
#panSequences .cat-theory p{margin:0 0 7px}
#panSequences .cat-theory p:last-child{margin-bottom:0}
#panSequences .cat-theory b{color:#374151}
#panSequences .cat-theory .sub-title{font-weight:600;color:#534AB7;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;margin:10px 0 3px;display:block}
#panSequences .cat-theory .sub-title:first-child{margin-top:0}
/* ═══ TAB 10: ANALYSEUR HARMONIQUE — CSS ═══ */
#panAnalyseur .shell{max-width:940px;margin:0 auto;padding:16px 18px 60px}
#panAnalyseur .topbar{display:flex;align-items:baseline;gap:10px;margin-bottom:20px;flex-wrap:wrap}
#panAnalyseur .logo{font-size:22px;font-weight:700;color:var(--a);letter-spacing:-.03em}
#panAnalyseur .logo span{font-size:11px;font-weight:500;color:var(--t3);letter-spacing:.04em;text-transform:uppercase;margin-left:4px}
#panAnalyseur .badge{font-size:10px;font-weight:600;color:var(--al);background:var(--abg);border:1.5px solid var(--ab);border-radius:20px;padding:3px 10px}
#panAnalyseur .subtitle{font-size:13px;color:var(--t2);margin-left:auto}
#panAnalyseur .card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(83,74,183,.06);margin-bottom:12px}
#panAnalyseur .card-title{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
#panAnalyseur .score-area{min-height:200px;position:relative}
#panAnalyseur .score-wrap{background:#fff;border-radius:10px;padding:12px 8px;border:1px solid var(--bd);margin-top:10px;overflow-x:auto}
#panAnalyseur .score-wrap svg{display:block;margin:0 auto}
#panAnalyseur .score-canvas{width:100%;background:#fff;border-radius:8px;cursor:default}
#panAnalyseur .input-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:600px){#panAnalyseur .input-grid{grid-template-columns:1fr}}
#panAnalyseur .voice-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#panAnalyseur .voice-label{width:54px;font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.05em}
#panAnalyseur .voice-color{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#panAnalyseur .note-sel{padding:5px 8px;border:1.5px solid #e5e7eb;border-radius:6px;font-family:inherit;font-size:13px;font-weight:500;background:#f9f8fd;color:var(--t);cursor:pointer;outline:none;transition:border .15s;min-width:60px}
#panAnalyseur .note-sel:focus{border-color:var(--a)}
#panAnalyseur .btn{padding:7px 14px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s}
#panAnalyseur .btn:hover{border-color:var(--a);color:var(--a)}
#panAnalyseur .btn.primary{background:var(--a);border-color:var(--a);color:#fff}
#panAnalyseur .btn.primary:hover{background:#4338ca}
#panAnalyseur .btn.danger{color:#ef4444;border-color:#fca5a5}
#panAnalyseur .btn.danger:hover{background:#fef2f2}
#panAnalyseur .btn.audio{background:#059669;border-color:#059669;color:#fff}
#panAnalyseur .btn.audio:hover{background:#047857}
#panAnalyseur .btn.audio.playing{animation:pulse .6s ease-in-out infinite alternate}
#panAnalyseur .btn-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
#panAnalyseur .key-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
#panAnalyseur .key-label{font-size:11px;font-weight:600;color:var(--t2)}
#panAnalyseur .chord-sel-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
#panAnalyseur .chord-sel-row label{font-size:11px;font-weight:600;color:var(--t2)}
#panAnalyseur .err-list{max-height:300px;overflow-y:auto}
#panAnalyseur .err-item{padding:7px 9px;border-radius:8px;margin-bottom:5px;font-size:11px;line-height:1.45;display:flex;gap:6px;align-items:flex-start}
#panAnalyseur .err-item.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
#panAnalyseur .err-item.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
#panAnalyseur .err-item.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
#panAnalyseur .err-icon{font-size:13px;flex-shrink:0;margin-top:1px}
#panAnalyseur .err-text{flex:1}
#panAnalyseur .err-rule{font-weight:600;display:block;margin-bottom:1px}
#panAnalyseur .no-errors{text-align:center;padding:20px 10px;color:var(--t3);font-size:12px}
#panAnalyseur .chord-labels{display:flex;gap:0;padding:0 40px;margin-top:2px}
#panAnalyseur .chord-lbl{flex:1;text-align:center;font-size:9px;font-weight:600;color:var(--t3);cursor:pointer;padding:3px;border-radius:4px;transition:background .1s}
#panAnalyseur .chord-lbl:hover{background:var(--abg)}
#panAnalyseur .chord-lbl.sel{color:var(--a);background:var(--abg)}
#panAnalyseur .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}
#panAnalyseur .legend-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--t2)}
#panAnalyseur .legend-dot{width:8px;height:8px;border-radius:50%}
#panAnalyseur .drag-hint{font-size:10px;color:var(--t3);text-align:center;margin-top:4px;font-style:italic}
#panAnalyseur .limit-badge{font-size:10px;color:var(--t3);margin-left:8px}
/* Collapsible sections */
#panAnalyseur .section-toggle{cursor:pointer;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;user-select:none}
#panAnalyseur .section-toggle::after{content:'▾';font-size:8px;transition:transform .2s}
#panAnalyseur .section-toggle.collapsed::after{transform:rotate(-90deg)}
#panAnalyseur .section-body{overflow:hidden;transition:max-height .3s ease}
#panAnalyseur .section-body.collapsed{max-height:0!important;padding:0!important;margin:0!important}
/* Theory section */
#panAnalyseur .theory-card{font-size:11px;color:var(--t2);line-height:1.65}
#panAnalyseur .theory-card h4{font-size:11px;font-weight:700;color:var(--a);margin:8px 0 3px;text-transform:uppercase;letter-spacing:.04em}
#panAnalyseur .theory-card h4:first-child{margin-top:0}
#panAnalyseur .theory-card p{margin-bottom:6px}
#panAnalyseur .theory-card .rule{background:var(--abg);border-left:3px solid var(--a);padding:4px 8px;margin:4px 0;border-radius:0 4px 4px 0;font-size:10px}
#panAnalyseur .th-section{border-bottom:1px solid var(--bd);margin-bottom:2px}
#panAnalyseur .th-section:last-child{border-bottom:none}
#panAnalyseur .th-head{font-size:11px;font-weight:700;color:var(--a);padding:7px 0;cursor:pointer;display:flex;align-items:center;gap:4px;user-select:none}
#panAnalyseur .th-head::before{content:'▸';font-size:9px;color:var(--t3);transition:transform .2s;flex-shrink:0}
#panAnalyseur .th-section.open .th-head::before{transform:rotate(90deg)}
#panAnalyseur .th-content{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:10.5px;line-height:1.6;color:var(--t2)}
#panAnalyseur .th-section.open .th-content{max-height:600px;padding-bottom:8px}
#panAnalyseur .th-content p{margin-bottom:5px}
#panAnalyseur .th-content .rule{background:var(--abg);border-left:3px solid var(--a);padding:4px 8px;margin:4px 0;border-radius:0 4px 4px 0;font-size:10px}
/* Audio + play controls */
#panAnalyseur .audio-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
#panAnalyseur .play-btn{padding:7px 16px;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;background:var(--a);color:#fff}
#panAnalyseur .play-btn:hover{background:#4338ca}
#panAnalyseur .play-btn.playing{background:#059669}
#panAnalyseur .tempo-input{width:50px;padding:4px 6px;border:1.5px solid #e5e7eb;border-radius:6px;font-family:inherit;font-size:12px;text-align:center}
/* VL error panel — same as Modulation */
#panAnalyseur .vl-panel{margin-top:10px;border-radius:8px;padding:10px 14px;font-size:12px}
#panAnalyseur .vl-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
#panAnalyseur .vl-issues{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
#panAnalyseur .vl-hdr{font-weight:700;margin-bottom:6px}
#panAnalyseur .vl-icon{margin-right:4px}
#panAnalyseur .vl-item{padding:3px 0;display:flex;align-items:center;gap:6px;font-size:11px}
#panAnalyseur .vl-item.error{color:#991b1b}
#panAnalyseur .vl-item.warn{color:#92400e}
#panAnalyseur .vl-badge{font-weight:700;font-size:13px;width:16px;text-align:center;flex-shrink:0}
#panAnalyseur .vl-rule{font-weight:600;background:#fef2f2;padding:1px 6px;border-radius:4px;font-size:10px;white-space:nowrap}
#panAnalyseur .vl-item.warn .vl-rule{background:#fefce8;color:#92400e}

/* ═══ TAB 7: FORMES ═══ */

#panFormes .topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;flex-shrink:0;border-bottom:1px solid var(--border2)}
#panFormes .logo{font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--accent);display:flex;align-items:baseline;gap:2px;flex-shrink:0}
#panFormes .logo span{font-size:10px;font-weight:500;color:var(--txt3);letter-spacing:.04em;text-transform:uppercase;margin-left:4px}
#panFormes .topbar-center{flex:1;display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
#panFormes .proj-name{font-size:14px;font-weight:600;border:none;background:transparent;text-align:center;color:var(--txt);padding:4px 8px;border-radius:6px;width:200px;font-family:inherit}
#panFormes .proj-name:focus{outline:none;background:var(--accent-bg);color:var(--accent)}
#panFormes .key-sel-wrap{display:flex;align-items:center;gap:4px}
#panFormes .key-sel-wrap label{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em}
#panFormes .key-sel-wrap select, #panFormes .form-sel{font-family:inherit;font-size:12px;font-weight:500;border:1.5px solid var(--border);border-radius:6px;padding:4px 8px;background:var(--card);color:var(--txt);cursor:pointer}
#panFormes .key-sel-wrap select:focus, #panFormes .form-sel:focus{outline:none;border-color:var(--accent)}
#panFormes .form-sel{font-size:13px;border-radius:8px;padding:6px 10px;max-width:300px}
#panFormes .topbar-actions{display:flex;gap:4px;flex-shrink:0}
#panFormes .tbtn{padding:6px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--card);font-size:11px;font-weight:500;color:var(--txt2);cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;gap:4px;white-space:nowrap}
#panFormes .tbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg2)}
#panFormes .tbtn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
#panFormes .tbtn.primary:hover{background:var(--accent-l)}
#panFormes .tbtn.sm{padding:4px 8px;font-size:10px;border-radius:6px}
#panFormes .tbtn.danger{color:#DC2626;border-color:#fca5a5}
#panFormes .tbtn.danger:hover{background:#fef2f2}
#panFormes .fm-main{flex:1;display:flex;flex-direction:column;min-height:0}
#panFormes .mvt-bar{flex-shrink:0;padding:10px 16px;border-bottom:1px solid var(--border2);display:none}
#panFormes .mvt-bar.visible{display:block}
#panFormes .mvt-bar-label{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
#panFormes .mvt-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;align-items:stretch}
#panFormes .mvt-row::-webkit-scrollbar{height:4px}
#panFormes .mvt-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
#panFormes .mvt-card{min-width:160px;max-width:220px;flex-shrink:0;background:var(--card);border:2px solid var(--border2);border-radius:var(--radius-sm);padding:8px 12px;cursor:pointer;position:relative;transition:all .15s}
#panFormes .mvt-card:hover{border-color:var(--accent-l);box-shadow:var(--shadow2)}
#panFormes .mvt-card.active{border-color:var(--accent);background:var(--accent-bg2);box-shadow:0 0 0 3px rgba(83,74,183,.12)}
#panFormes .mvt-card .mvt-num{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
#panFormes .mvt-card .mvt-name{font-size:13px;font-weight:600;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#panFormes .mvt-card .mvt-meta{font-size:10px;color:var(--txt3);display:flex;gap:6px;flex-wrap:wrap}
#panFormes .mvt-card .mvt-meta b{color:var(--txt2)}
#panFormes .mvt-card .mvt-del{position:absolute;top:3px;right:5px;border:none;background:transparent;color:var(--txt3);cursor:pointer;font-size:12px;display:none;border-radius:50%;width:16px;height:16px;align-items:center;justify-content:center}
#panFormes .mvt-card:hover .mvt-del{display:flex}
#panFormes .mvt-card .mvt-del:hover{background:#fee2e2;color:#DC2626}
#panFormes .mvt-add{min-width:44px;flex-shrink:0;border:2px dashed var(--border);border-radius:var(--radius-sm);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:18px;transition:all .15s;font-family:inherit;padding:8px}
#panFormes .mvt-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg2)}
#panFormes .timeline-area{flex-shrink:0;padding:12px 16px;border-bottom:1px solid var(--border2)}
#panFormes .form-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
#panFormes .form-desc{font-size:11px;color:var(--txt3);font-style:italic;flex:1;min-width:200px}
#panFormes .measures-total{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-bg);padding:4px 10px;border-radius:20px}
#panFormes .mvt-form-sel{font-size:11px;padding:3px 6px;border-radius:6px}
#panFormes .timeline-scroll{overflow-x:auto;overflow-y:visible;padding-bottom:8px}
#panFormes .timeline-scroll::-webkit-scrollbar{height:5px}
#panFormes .timeline-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
#panFormes .timeline{display:flex;gap:4px;align-items:stretch;min-height:100px;padding:4px 0}
#panFormes .tl-block{min-width:90px;max-width:160px;flex-shrink:0;background:var(--card);border:2px solid var(--border2);border-radius:var(--radius-sm);padding:8px 10px;cursor:grab;position:relative;transition:border-color .15s,box-shadow .15s,transform .15s;display:flex;flex-direction:column;gap:3px}
#panFormes .tl-block:hover{border-color:var(--accent-l);box-shadow:var(--shadow2)}
#panFormes .tl-block.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(83,74,183,.15)}
#panFormes .tl-block.dragging{opacity:.5;transform:scale(.95)}
#panFormes .tl-block.drag-over{border-color:var(--accent);border-style:dashed}
#panFormes .tl-block .type-bar{height:4px;border-radius:2px;margin-bottom:2px}
#panFormes .tl-block .blk-label{font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#panFormes .tl-block .blk-degree{font-size:11px;font-weight:500;color:var(--txt2);font-family:'JetBrains Mono',monospace}
#panFormes .tl-block .blk-info{font-size:9px;color:var(--txt3);display:flex;gap:6px;margin-top:auto}
#panFormes .tl-block .blk-del{position:absolute;top:2px;right:4px;width:18px;height:18px;border:none;background:transparent;color:var(--txt3);cursor:pointer;font-size:14px;line-height:1;border-radius:50%;display:none;align-items:center;justify-content:center}
#panFormes .tl-block:hover .blk-del{display:flex}
#panFormes .tl-block .blk-del:hover{background:#fee2e2;color:#DC2626}
#panFormes .tl-arrow{display:flex;align-items:center;color:var(--border);font-size:16px;flex-shrink:0;user-select:none}
/* Bouton Dictionnaire dans le form-header — un peu plus gros qu'un tbtn sm */
#panFormes .tbtn.fm-dict-trigger{padding:7px 14px;font-size:12px;font-weight:600;border-color:#d4d2e8;color:#534AB7;background:#f5f3ff;letter-spacing:-.005em}
#panFormes .tbtn.fm-dict-trigger:hover{border-color:#534AB7;background:#EEEDFE;box-shadow:0 1px 3px rgba(83,74,183,.1)}

/* Marqueur ponctuel (Medial Caesura, Standing on Dominant, Caesura-fill) */
/* Bande verticale fine, fond hachuré pour différentiation visuelle */
#panFormes .tl-block.tl-marker{min-width:34px!important;max-width:34px!important;width:34px;padding:0;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid currentColor;border-radius:6px;cursor:pointer;height:auto;align-self:stretch;position:relative;background:#fff}
#panFormes .tl-block.tl-marker:hover{transform:scaleX(1.15);filter:brightness(.96)}
#panFormes .tl-block.tl-marker.selected{box-shadow:0 0 0 3px rgba(83,74,183,.35);transform:scaleX(1.1)}
#panFormes .tl-block.tl-marker .tl-marker-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:700;letter-spacing:.04em;font-family:'JetBrains Mono','Inter',monospace;user-select:none;padding:8px 0;background:#fff;padding-left:2px;padding-right:2px;border-radius:3px;color:inherit}
#panFormes .tl-block.tl-marker .blk-del{top:-6px;right:-6px;background:#fff;border:1px solid #e5e7eb;color:#6b7280;width:16px;height:16px;font-size:11px}
#panFormes .tl-add{min-width:50px;flex-shrink:0;border:2px dashed var(--border);border-radius:var(--radius-sm);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:20px;transition:all .15s;font-family:inherit}
#panFormes .tl-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg2)}
#panFormes .bottom-area{flex:1;display:flex;min-height:0;overflow:hidden}
#panFormes .ref-panel{width:260px;flex-shrink:0;border-right:1px solid var(--border2);padding:12px;overflow-y:auto;display:none}
#panFormes .ref-panel.visible{display:block}
#panFormes .ref-panel .ref-title{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
#panFormes .ref-panel .ref-close{border:none;background:transparent;color:var(--txt3);cursor:pointer;font-size:14px}
#panFormes .ref-panel .ref-close:hover{color:var(--accent)}
#panFormes .ref-tl{display:flex;flex-wrap:wrap;gap:3px}
#panFormes .ref-blk{padding:4px 8px;border-radius:6px;font-size:10px;font-weight:600;color:#fff;white-space:nowrap}
#panFormes .ref-blk span{display:block;font-size:8px;font-weight:400;opacity:.8;margin-top:1px}
#panFormes .ref-info{margin-top:12px;font-size:11px;color:var(--txt2);line-height:1.5}
#panFormes .ref-info h4{font-size:11px;font-weight:600;color:var(--txt);margin-top:8px;margin-bottom:2px}
#panFormes .detail-panel{flex:1;overflow-y:auto;padding:16px}
#panFormes .detail-panel::-webkit-scrollbar{width:5px}
#panFormes .detail-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
#panFormes .dp-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--txt3);font-size:13px;text-align:center;padding:20px}
#panFormes .dp-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
#panFormes .dp-card h3{font-size:15px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
#panFormes .dp-card h3 .type-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#panFormes .dp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
#panFormes .dp-row.full{grid-template-columns:1fr}
#panFormes .dp-field{display:flex;flex-direction:column;gap:3px}
#panFormes .dp-field label{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em}
#panFormes .dp-field select, #panFormes .dp-field input[type=text], #panFormes .dp-field input[type=number], #panFormes .dp-field textarea{font-family:inherit;font-size:13px;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--card);color:var(--txt);transition:border-color .15s}
#panFormes .dp-field select:focus, #panFormes .dp-field input:focus, #panFormes .dp-field textarea:focus{outline:none;border-color:var(--accent)}
#panFormes .dp-field textarea{resize:vertical;min-height:60px;font-size:12px}
#panFormes .degree-picker{display:flex;flex-wrap:wrap;gap:3px}
#panFormes .deg-btn{padding:3px 8px;border:1.5px solid var(--border);border-radius:6px;background:var(--card);font-size:11px;font-weight:500;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .12s;color:var(--txt2)}
#panFormes .deg-btn:hover{border-color:var(--accent-l);color:var(--accent)}
#panFormes .deg-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#panFormes .deg-cat{font-size:9px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;width:100%;margin-top:4px}
#panFormes .deg-cat:first-child{margin-top:0}
#panFormes .var-fields{background:var(--accent-bg2);border-radius:var(--radius-sm);padding:12px;margin-top:8px}
#panFormes .var-fields h4{font-size:11px;font-weight:600;color:var(--accent);margin-bottom:8px}
#panFormes .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);display:none;align-items:center;justify-content:center;z-index:100}
#panFormes .modal-overlay.show{display:flex}
#panFormes .modal{background:var(--card);border-radius:var(--radius);padding:20px;width:420px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,.15);position:relative}
#panFormes .modal h3{font-size:16px;font-weight:600;margin-bottom:12px}
#panFormes .modal-close{position:absolute;top:12px;right:12px;border:none;background:transparent;font-size:18px;cursor:pointer;color:var(--txt3)}
#panFormes .modal-cat-title{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
#panFormes .modal-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;transition:all .12s;margin-top:3px}
#panFormes .modal-item:hover{border-color:var(--accent);background:var(--accent-bg2)}
#panFormes .modal-item .mi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
#panFormes .modal-item .mi-label{font-size:13px;font-weight:500}
#panFormes .saves-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
#panFormes .save-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;transition:all .12s}
#panFormes .save-item:hover{border-color:var(--accent);background:var(--accent-bg2)}
#panFormes .save-item .si-name{font-size:13px;font-weight:500;flex:1}
#panFormes .save-item .si-date{font-size:10px;color:var(--txt3)}
#panFormes .save-item .si-del{border:none;background:transparent;color:var(--txt3);cursor:pointer;font-size:14px;padding:2px}
#panFormes .save-item .si-del:hover{color:#DC2626}
@media print{#panFormes .topbar,#panFormes .topbar-actions,#panFormes .tl-add,#panFormes .blk-del,#panFormes .ref-panel,#panFormes .mvt-add,#panFormes .mvt-del,#panFormes .alerts-bar,.fm-dict-panel,.fm-dict-overlay{display:none!important}#panFormes .fm-main{overflow:visible}#panFormes .bottom-area{flex-direction:column;overflow:visible}#panFormes .detail-panel{overflow:visible}}

/* ═══ Dictionnaire orchestral — panneau slide-in droite ═══ */
.fm-dict-overlay{position:fixed;inset:0;background:rgba(15,12,30,.32);backdrop-filter:blur(2px);z-index:998;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.fm-dict-overlay.open{opacity:1;visibility:visible}
.fm-dict-panel{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:92vw;background:#fff;box-shadow:-12px 0 32px rgba(15,12,30,.18),-2px 0 8px rgba(15,12,30,.06);z-index:999;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;font-family:'Inter','DM Sans',sans-serif}
.fm-dict-panel.open{transform:translateX(0)}
.fm-dict-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid #f0f0f4;flex-shrink:0}
.fm-dict-title{font-family:'Fraunces','DM Serif Display',serif;font-size:20px;font-weight:600;color:#1e1e2e;letter-spacing:-.012em;font-variation-settings:"opsz" 144,"SOFT" 50;margin:0}
.fm-dict-close{width:32px;height:32px;border:1px solid #e5e7eb;background:#fff;border-radius:8px;color:#6b7280;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit}
.fm-dict-close:hover{background:#fef2f2;border-color:#fca5a5;color:#dc2626}
.fm-dict-search{position:relative;padding:12px 20px 8px;flex-shrink:0}
.fm-dict-search input{width:100%;padding:9px 36px 9px 12px;border:1.5px solid #e5e7eb;border-radius:9px;font-family:inherit;font-size:13px;color:#1e1e2e;outline:none;background:#fafaff;transition:border-color .15s,background .15s}
.fm-dict-search input:focus{border-color:#534AB7;background:#fff}
.fm-dict-search input::placeholder{color:#9ca3af}
.fm-dict-count{position:absolute;right:30px;top:50%;transform:translateY(-50%);font-size:10.5px;color:#9ca3af;font-weight:500;pointer-events:none;background:#fff;padding:0 4px}
.fm-dict-sources{padding:0 20px 10px;font-size:10px;color:#9ca3af;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;font-weight:500}
.fm-dict-list{flex:1;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:#d1cfe6 transparent}
.fm-dict-list::-webkit-scrollbar{width:6px}
.fm-dict-list::-webkit-scrollbar-track{background:transparent}
.fm-dict-list::-webkit-scrollbar-thumb{background:#d1cfe6;border-radius:3px}
.fm-dict-item{padding:10px 12px;border-radius:8px;margin:0 0 2px;transition:background .12s;cursor:default}
.fm-dict-item:hover{background:#f5f3ff}
.fm-dict-item-head{display:flex;align-items:baseline;gap:10px;margin-bottom:3px;flex-wrap:wrap}
.fm-dict-abr{font-family:'JetBrains Mono','SF Mono',monospace;font-size:13.5px;font-weight:700;color:#534AB7;flex-shrink:0;white-space:nowrap;background:#EEEDFE;padding:2px 7px;border-radius:5px;border:1px solid rgba(83,74,183,.12)}
.fm-dict-term{font-size:13px;font-weight:600;color:#1e1e2e;font-style:italic}
.fm-dict-cat{font-size:9.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;margin-left:auto;font-weight:600;flex-shrink:0}
.fm-dict-desc{font-size:12px;color:#4b5563;line-height:1.45;margin-top:2px}
.fm-dict-inst{font-size:10.5px;color:#7c7a9a;margin-top:4px;font-style:italic}
.fm-dict-empty{padding:40px 20px;text-align:center;color:#9ca3af;font-size:13px}
mark.fm-dict-hl{background:#fef08a;color:#1e1e2e;padding:0 1px;border-radius:2px;font-weight:600}
@media(max-width:520px){
  .fm-dict-panel{width:100vw;max-width:100vw}
}
@media(max-width:768px){#panFormes .fm-toolbar{flex-wrap:wrap;gap:6px}#panFormes .bottom-area{flex-direction:column}#panFormes .ref-panel{width:100%;border-right:none;border-bottom:1px solid var(--border2);max-height:200px}#panFormes .dp-row{grid-template-columns:1fr}}
/* Alerts */
#panFormes .alerts-bar{padding:4px 16px;flex-shrink:0;display:flex;gap:6px;flex-wrap:wrap}
#panFormes .alert-chip{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:10px;font-weight:500;cursor:default}
#panFormes .alert-chip.info{background:#DBEAFE;color:#1E40AF}
#panFormes .alert-chip.warn{background:#FEF3C7;color:#92400E}
#panFormes .alert-chip.tip{background:#D1FAE5;color:#065F46}
#panFormes .alert-chip .alert-icon{font-size:12px}
/* Proportions & Durée */
#panFormes .fm-proportions-bar{display:flex;height:22px;margin:12px 16px 0;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
#panFormes .fm-prop-segment{display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;transition:opacity .2s}
#panFormes .fm-prop-segment:hover{opacity:.8}
#panFormes .fm-prop-segment span{text-shadow:0 0 3px rgba(255,255,255,.8)}
#panFormes .fm-total-duration{padding:8px 16px;font-size:11px;color:var(--txt2);text-align:center}
#panFormes .fm-total-duration strong{color:var(--accent);font-weight:600}
#panFormes .fm-estimation-label{font-size:9px;color:var(--txt3);font-style:italic}
/* Plan tonal */
#panFormes .fm-tonal-plan{margin:16px;padding:12px 12px 26px;background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:visible}
#panFormes .tonal-plan-header{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;display:flex;align-items:center}
#panFormes .tonal-timeline-v2{position:relative;height:120px;padding:20px 0;overflow:visible}
#panFormes .tonal-curve-svg{position:absolute;width:100%;height:100%;left:0;top:0;pointer-events:none}
#panFormes .tonal-milestone{position:absolute;transform:translate(-50%,-50%);overflow:visible}
#panFormes .tonal-point-v2{width:16px;height:16px;border-radius:50%;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 6px rgba(0,0,0,.12);z-index:2}
#panFormes .tonal-point-v2:hover{transform:scale(1.3);box-shadow:0 4px 12px rgba(0,0,0,.2)}
#panFormes .tonal-label{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--txt2);white-space:nowrap;font-weight:500;max-width:90px;overflow:hidden;text-overflow:ellipsis;text-align:center;pointer-events:none}
#panFormes .tonal-milestone:hover .tonal-tooltip-v2{opacity:1;visibility:visible;transform:translate(-50%,-8px)}
#panFormes .tonal-tooltip-v2{position:absolute;bottom:calc(100% + 20px);left:50%;transform:translate(-50%,-4px);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:11px;color:var(--txt);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:all .2s;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:10}
#panFormes .tonal-tooltip-v2 strong{display:block;color:var(--accent);margin-bottom:2px}
#panFormes .tonal-key{font-size:10px;color:var(--txt2);font-weight:500}
/* Blocs avancés */
#panFormes .fm-advanced-fields{margin:12px 0}
#panFormes .fm-collapsible{border:1px solid var(--border);border-radius:6px;margin-bottom:6px;overflow:hidden}
#panFormes .fm-collapsible summary{padding:8px 12px;cursor:pointer;font-size:11px;font-weight:600;color:var(--txt);background:var(--card);user-select:none;list-style:none}
#panFormes .fm-collapsible summary::-webkit-details-marker{display:none}
#panFormes .fm-collapsible summary:hover{background:var(--accent-bg2)}
#panFormes .fm-collapsible[open] summary{border-bottom:1px solid var(--border);background:var(--accent-bg2)}
#panFormes .fm-grid-editor textarea,#panFormes .fm-theme-fields textarea{width:100%;min-height:60px;padding:8px;font-family:'JetBrains Mono',monospace;font-size:11px;border:none;resize:vertical;background:var(--bg)}
#panFormes .fm-theme-fields,#panFormes .fm-texture-fields{padding:12px}
#panFormes .fm-texture-fields input[type=range]{flex:1;margin-right:8px}
#panFormes .fm-texture-fields span{font-weight:600;color:var(--accent);min-width:20px}
/* Mode présentation */
#panFormes.fm-presentation{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:var(--bg);padding:20px}
#panFormes.fm-presentation .fm-toolbar,#panFormes.fm-presentation .bottom-area{display:none}
#panFormes.fm-presentation .timeline-area{flex:1}
#panFormes.fm-presentation .timeline-scroll{height:100%}
/* Orchestration */
#panFormes .orch-panel{background:var(--accent-bg2);border-radius:var(--radius-sm);padding:12px;margin-top:8px}
#panFormes .orch-panel h4{font-size:11px;font-weight:600;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
#panFormes .orch-family{margin-bottom:6px}
#panFormes .orch-family-label{font-size:9px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
#panFormes .orch-grid{display:flex;flex-wrap:wrap;gap:3px}
#panFormes .orch-btn{padding:3px 8px;border:1.5px solid var(--border);border-radius:6px;background:var(--card);font-size:10px;font-weight:500;cursor:pointer;transition:all .12s;color:var(--txt2);font-family:inherit}
#panFormes .orch-btn:hover{border-color:var(--accent-l);color:var(--accent)}
#panFormes .orch-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#panFormes .orch-btn .orch-key{font-size:8px;color:var(--txt3);margin-left:2px}
#panFormes .orch-btn.on .orch-key{color:rgba(255,255,255,.7)}
/* Repertoire */
#panFormes .rep-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;transition:all .12s;margin-top:3px}
#panFormes .rep-item:hover{border-color:var(--accent);background:var(--accent-bg2)}
#panFormes .rep-item .rep-comp{font-size:11px;font-weight:600}
#panFormes .rep-item .rep-work{font-size:11px;color:var(--txt2)}
#panFormes .rep-item .rep-key{font-size:10px;color:var(--txt3);margin-left:auto;font-style:italic}
#panFormes .modal.wide{width:560px}

#panFormes .fm-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;flex-wrap:wrap;border-bottom:1px solid #f0f0f4}
#panFormes .fm-toolbar .proj-name{font-size:14px;font-weight:600;border:none;background:transparent;text-align:center;color:#111827;padding:4px 8px;border-radius:6px;width:200px;font-family:inherit}
#panFormes .fm-toolbar .proj-name:focus{outline:none;background:#EEEDFE;color:#534AB7}
#panFormes .fm-actions{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}

.lang-sel{position:relative;margin-left:auto;margin-right:4px;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:11px;font-weight:600;color:#534AB7;cursor:pointer;transition:all .15s}
.lang-btn:hover{border-color:#534AB7;background:#f5f3ff}
.lang-btn .flag{font-size:14px;line-height:1}
.lang-dd{display:none;position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:999;overflow:hidden;min-width:130px}
.lang-dd.open{display:block}
.lang-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer;transition:background .12s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.lang-opt:hover{background:#f5f3ff;color:#534AB7}
.lang-opt.active{background:#EEEDFE;color:#534AB7;font-weight:600}
.lang-opt .flag{font-size:15px}
.theory-en{display:none}

/* ═══ HOME / ACCUEIL PAGE ═══ */
/* ═══ HERO — bordure-gradient violet premium (mai 2026) ═══ */
.home-hero{
  position:relative;
  padding:48px 32px 44px;
  /* Double background : intérieur (padding-box) + bordure-gradient (border-box) */
  background:
    linear-gradient(135deg,#2D1F8C 0%,#534AB7 55%,#3F2BA0 100%) padding-box,
    linear-gradient(135deg,
      rgba(124,122,184,.35) 0%,
      rgba(83,74,183,.55) 25%,
      rgba(127,119,221,.45) 50%,
      rgba(83,74,183,.55) 75%,
      rgba(124,122,184,.35) 100%
    ) border-box;
  border:1.5px solid transparent;
  border-radius:26px;
  margin-bottom:24px;
  overflow:hidden;
  /* Ombre élégante : très douce en bas, plus marquée à droite (effet "lifted") */
  box-shadow:
    0 1px 2px rgba(83,74,183,.04),
    0 4px 16px rgba(83,74,183,.06),
    0 12px 32px -8px rgba(83,74,183,.08);
}
.home-hero::before{
  content:'';position:absolute;top:-120px;right:-120px;
  width:380px;height:380px;
  background:radial-gradient(circle,rgba(124,122,184,.18) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.home-hero::after{
  content:'';position:absolute;bottom:-100px;left:-80px;
  width:260px;height:260px;
  background:radial-gradient(circle,rgba(245,193,108,.08) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
/* ── Hero music canvas (clé de sol + portée + ondes) ── */
.home-hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
/* ── Logo Contrepoint doré animé dans le hero ── */
.home-hero-logo{
  font-family:'DM Serif Display',Georgia,serif !important;
  font-size:52px;
  font-weight:400 !important;
  letter-spacing:-.01em;
  line-height:1;
  margin-bottom:18px;
  user-select:none;
  background:linear-gradient(90deg, #fff 0%, #C8A444 45%, #fff 90%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:heroTitleShimmer 5s ease-in-out infinite;
}
@keyframes heroTitleShimmer{
  0%  {background-position:100% 0}
  50% {background-position:  0% 0}
  100%{background-position:100% 0}
}
@media(max-width:600px){.home-hero-logo{font-size:36px}}
.home-hero-inner{position:relative;max-width:720px;margin:0 auto;text-align:center;z-index:2}
.home-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px 6px 12px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.home-badge::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#5DBE83;
  box-shadow:0 0 0 3px rgba(93,190,131,.18);
  animation:hbDot 2.4s ease-in-out infinite;
}
@keyframes hbDot{0%,100%{opacity:1}50%{opacity:.55}}
.home-title{
  font-family:'Fraunces','DM Serif Display',serif;
  font-size:42px;font-weight:600;color:#fff;
  line-height:1.15;margin-bottom:18px;letter-spacing:-.022em;
  max-width:720px;margin-left:auto;margin-right:auto;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  -webkit-font-smoothing:antialiased;
}
.home-title em{
  font-style:italic;
  font-weight:600;
  color:#C8A444;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}

/* ═══ Titres de section en Fraunces (cohérence éditoriale Hero) ═══ */
.home-section .home-section-title,
.home-section-video .home-section-title,
.home-section-premium .home-section-title,
.home-section-faq .home-faq-title,
.home-section-donate .home-donate-title{
  font-family:'Fraunces','DM Serif Display',serif;
  font-weight:600;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  -webkit-font-smoothing:antialiased;
}
/* Resserrer légèrement le letter-spacing pour Fraunces (vs DM Sans) */
.home-section .home-section-title{letter-spacing:-.012em}
.home-section-video .home-section-title{letter-spacing:-.012em}
.home-section-premium .home-section-title{letter-spacing:-.012em}
.home-section-faq .home-faq-title{letter-spacing:-.018em}
.home-section-donate .home-donate-title{letter-spacing:-.012em}
.home-sub{
  font-family:'Inter','DM Sans',sans-serif;
  font-size:16px;color:rgba(255,255,255,.72);
  line-height:1.6;margin-bottom:28px;letter-spacing:-.005em;
  max-width:600px;margin-left:auto;margin-right:auto;
  -webkit-font-smoothing:antialiased;
}
.home-cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.home-cta{
  padding:12px 22px;border:1.5px solid #d4d2e8;
  background:#fff;color:#534AB7;border-radius:11px;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:all .2s;
  box-shadow:0 1px 2px rgba(83,74,183,.04);
}
.home-cta:hover{background:#fafaff;border-color:#534AB7;transform:translateY(-1px);box-shadow:0 4px 10px rgba(83,74,183,.08)}
.home-cta-premium{background:rgba(255,255,255,0.08);color:#C8A444;border-color:rgba(255,255,255,0.55);box-shadow:0 2px 12px rgba(0,0,0,.15)}
.home-cta-premium:hover{background:rgba(255,255,255,0.16);border-color:#fff;color:#D4B44A;box-shadow:0 4px 18px rgba(0,0,0,.22)}
.home-cta-donate{background:#fff;color:#d97540;border-color:rgba(217,117,64,.3);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.home-cta-donate:hover{background:#fff7f0;border-color:#d97540;color:#b85a28;box-shadow:0 4px 10px rgba(217,117,64,.12)}
@media(max-width:600px){
  .home-hero{padding:36px 20px 32px;border-radius:18px}
  .home-title{font-size:30px;letter-spacing:-.018em}
  .home-sub{font-size:15px}
}
.home-section{margin-bottom:28px}

/* ═══ DÉCOUVRIR — Section vidéo refondue (mai 2026) ═══ */
.home-section-video{
  position:relative;
  background:#fff;
  border:1px solid #ECEAF7;
  border-radius:24px;
  padding:32px 28px 36px;
  margin-bottom:28px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(83,74,183,.04);
}
.home-section-video::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent 0%,rgba(83,74,183,.5) 30%,rgba(245,193,108,.45) 70%,transparent 100%);
}
.home-section-video-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:20px;flex-wrap:wrap;
}
.home-section-video-head-left{flex:1;min-width:240px;max-width:520px}
.home-section-video .home-section-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  color:#7C7AB8;text-transform:uppercase;
  margin-bottom:10px;
}
.home-section-video .home-section-label::before{
  content:'';display:inline-block;width:18px;height:1.5px;background:#7C7AB8;border-radius:1px;
}
.home-section-video .home-section-title{
  font-family:'Fraunces','DM Serif Display',serif;
  font-size:24px;font-weight:600;color:#1e1e2e;
  letter-spacing:-.012em;line-height:1.25;margin-bottom:8px;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  -webkit-font-smoothing:antialiased;
}
.home-section-video .home-section-sub{
  font-size:14px;color:#6b6884;line-height:1.6;margin:0;
}
.home-video-stats{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;
  background:linear-gradient(135deg,#FAFAFF 0%,#F5F3FF 100%);
  border:1px solid #ECEAF7;
  border-radius:14px;
  flex-shrink:0;
}
.home-video-stat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:50px}
.home-video-stat-num{font-size:18px;font-weight:700;color:#534AB7;letter-spacing:-.02em;line-height:1}
.home-video-stat-lbl{font-size:9.5px;color:#7c7a9a;font-weight:500;text-transform:uppercase;letter-spacing:.06em;line-height:1}
.home-video-stat-sep{width:1px;height:22px;background:#E0DCF2}
.home-video-frame{
  position:relative;
  max-width:760px;margin:0 auto;
  aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;
  box-shadow:0 12px 36px rgba(83,74,183,.15),0 2px 8px rgba(83,74,183,.06);
  background:#000;
  border:1px solid #ECEAF7;
}
.home-video-frame iframe{width:100%;height:100%;border:none;display:block}
@media(max-width:680px){
  .home-section-video{padding:24px 18px 26px;border-radius:18px}
  .home-section-video-head{flex-direction:column;align-items:stretch;gap:14px}
  .home-section-video .home-section-title{font-size:20px}
  .home-video-stats{justify-content:space-around;padding:10px 12px}
  .home-video-stat-num{font-size:16px}
  .home-video-frame{border-radius:12px}
}
@media(max-width:420px){
  .home-video-stat-sep{display:none}
}
.home-beta-band{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:11px 18px;margin:-8px 0 22px;background:#f5f3ff;border:1px solid #e0dcf2;border-radius:12px;font-size:13px;color:#4b4866;line-height:1.45}
.home-beta-band .hbb-icon{font-size:14px}
.home-beta-band .hbb-tag{display:inline-block;padding:2px 8px;background:#534AB7;color:#fff;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.home-beta-band .hbb-link{color:#534AB7;font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;font-size:inherit;padding:0}
.home-beta-band .hbb-link:hover{color:#4338ca}
@media(max-width:600px){.home-beta-band{font-size:12px;padding:10px 14px;flex-direction:column;text-align:center;gap:6px}}
.home-section-label{font-size:10px;font-weight:700;letter-spacing:.1em;color:#534AB7;text-transform:uppercase;margin-bottom:6px}
.home-section-title{font-size:20px;font-weight:700;color:#1e1e2e;margin-bottom:6px}
.home-section-sub{font-size:13px;color:#6b7280;margin-bottom:16px}
.home-premium-label{color:#fff}
.home-section-premium{background:linear-gradient(135deg,#2D1F8C 0%,#534AB7 50%,#3F2BA0 100%);border-radius:20px;padding:36px 28px;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;color:#fff}
.home-section-premium::before{content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.home-section-premium::after{content:'';position:absolute;bottom:-100px;left:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(212,175,55,.06) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.home-section-premium .home-section-label{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);padding:6px 14px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:.12em;border:1px solid rgba(255,255,255,.18);position:relative;z-index:2}
.home-section-premium .home-section-label::before{content:'✦';font-size:13px;color:#FFD700}
.home-section-premium .home-section-title{font-family:'Fraunces','DM Serif Display',serif;color:#fff;font-size:26px;font-weight:600;margin:14px 0 8px;letter-spacing:-.012em;position:relative;z-index:2;line-height:1.25;font-variation-settings:"opsz" 144,"SOFT" 50;-webkit-font-smoothing:antialiased}
.home-section-premium .home-section-sub{color:rgba(255,255,255,.78);font-size:14px;line-height:1.65;margin-bottom:24px;max-width:680px;position:relative;z-index:2}
.cm-stats{display:flex;flex-wrap:wrap;gap:18px 28px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12);position:relative;z-index:2}
.cm-stat{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-size:12.5px;font-weight:500}
.cm-stat-icon{color:#FFD700;font-size:14px;flex-shrink:0}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px;position:relative;z-index:2;max-width:920px;margin-left:auto;margin-right:auto}
.cm-card{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 20px;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;min-height:230px}
.cm-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,215,0,.35);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cm-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.cm-card-icon{font-size:26px;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border-radius:11px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.cm-card-titles{flex:1;min-width:0}
.cm-card-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px;line-height:1.3}
.cm-card-tag{font-size:10.5px;color:#FFD700;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.cm-card-desc{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.6;margin-bottom:14px;flex:1}
.cm-card-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.cm-card-bullets li{font-size:11.5px;color:rgba(255,255,255,.85);line-height:1.5;padding-left:18px;position:relative}
.cm-card-bullets li::before{content:'✓';position:absolute;left:0;top:0;color:#FFD700;font-weight:700;font-size:12px}
.cm-cta-box{text-align:center;padding:24px 20px;background:rgba(0,0,0,.18);backdrop-filter:blur(10px);border-radius:14px;border:1px solid rgba(255,255,255,.1);position:relative;z-index:2;max-width:560px;margin:0 auto}
.cm-cta-tagline{font-size:13.5px;color:rgba(255,255,255,.9);margin-bottom:14px;font-weight:500;letter-spacing:.02em}
.cm-cta-tagline strong{color:#FFD700;font-weight:700}
.cm-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:#fff;color:#2D1F8C;border:none;border-radius:11px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.2);letter-spacing:.01em}
.cm-cta-btn:hover{background:#FFD700;color:#1a1142;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,215,0,.4)}
.cm-cta-btn::after{content:'→';font-size:16px;font-weight:700;transition:transform .2s}
.cm-cta-btn:hover::after{transform:translateX(3px)}
.cm-cta-note{font-size:11px;color:rgba(255,255,255,.55);margin-top:10px}
@media(max-width:680px){
  .cm-grid{grid-template-columns:1fr;max-width:100%}
  .cm-card{min-height:auto}
  .home-section-premium{padding:28px 20px}
  .home-section-premium .home-section-title{font-size:22px}
  .cm-stats{gap:12px 20px}
  .cm-stat{font-size:11.5px}
}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.home-card{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:18px;cursor:pointer;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.home-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(83,74,183,.12);border-color:#c4b5fd}
.home-card-prem{background:rgba(255,255,255,.85);border-color:#fde68a}
.home-card-prem:hover{border-color:#d97706;box-shadow:0 6px 20px rgba(217,119,6,.12)}
.home-card-icon{font-size:28px;margin-bottom:8px}
.home-card-title{font-size:14px;font-weight:700;color:#1e1e2e;margin-bottom:4px}
.home-card-desc{font-size:12px;color:#6b7280;line-height:1.5}
/* Composer Mode cards with screenshots */
.home-card-wide{grid-column:span 2;display:flex;flex-direction:row;gap:16px;align-items:center;overflow:hidden}
.home-card-img{width:55%;max-width:320px;border-radius:10px;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.06);object-fit:cover;transition:transform .3s;cursor:zoom-in}
.home-card-wide:hover .home-card-img{transform:scale(1.02)}
.home-card-body{flex:1;min-width:0;cursor:pointer}
/* Lightbox for image zoom */
.lightbox-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:3000;align-items:center;justify-content:center;cursor:zoom-out;padding:20px}
.lightbox-bg.show{display:flex}
.lightbox-bg img{max-width:95%;max-height:90vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);object-fit:contain}
@media(max-width:700px){.home-card-wide{grid-column:span 2;flex-direction:column}.home-card-img{width:100%;max-width:none}}
@media(max-width:500px){.home-card-wide{grid-column:span 1}}
.home-price-box{text-align:center;padding:20px;background:rgba(255,255,255,.7);border-radius:14px;margin-top:8px}
.home-price-amount{font-size:42px;font-weight:800;color:#534AB7;letter-spacing:-.03em}
.home-price-text{font-size:13px;color:#6b7280;margin:4px 0 16px}
.home-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;margin-top:10px;border-top:1px solid #e5e7eb;font-size:11px;color:#6b7280;flex-wrap:wrap;gap:8px}
.home-footer-link{color:#534AB7;text-decoration:none;font-weight:500;font-size:11px}
.home-footer-link:hover{text-decoration:underline}
.home-footer-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.home-footer-sep{color:#d1d5db}
/* Donation section */
/* ═══ DONATE — bordure-gradient violet→doré→cuivre, palette chaleureuse (mai 2026) ═══ */
.home-section-donate{
  position:relative;
  text-align:center;
  /* Double background : intérieur (off-white violet) + bordure-gradient violet→doré→cuivre */
  background:
    linear-gradient(135deg,#FAFAFF 0%,#FDFBF6 50%,#FAFAFF 100%) padding-box,
    linear-gradient(135deg,
      rgba(83,74,183,.45) 0%,
      rgba(200,164,68,.55) 35%,
      rgba(217,117,64,.5) 65%,
      rgba(83,74,183,.45) 100%
    ) border-box;
  border:1.5px solid transparent;
  border-radius:24px;
  padding:32px 24px 30px;
  margin-bottom:20px;
  overflow:hidden;
  box-shadow:
    0 1px 2px rgba(83,74,183,.04),
    0 4px 16px rgba(200,164,68,.06),
    0 12px 32px -8px rgba(217,117,64,.06);
}
.home-section-donate::before{
  content:'';position:absolute;top:-80px;right:-80px;
  width:240px;height:240px;
  background:radial-gradient(circle,rgba(245,193,108,.12) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.home-section-donate::after{
  content:'';position:absolute;bottom:-60px;left:-60px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(124,122,184,.08) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.home-donate-inner{position:relative;max-width:520px;margin:0 auto;z-index:2}
.home-donate-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  font-size:30px;line-height:1;
  background:radial-gradient(circle at 30% 30%,#FBF1D9 0%,#F5E2B8 70%,#E8CC8C 100%);
  border-radius:50%;
  border:1.5px solid rgba(200,164,68,.3);
  margin-bottom:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 6px rgba(200,164,68,.18),
    0 6px 16px -4px rgba(200,164,68,.15);
}
.home-donate-title{
  font-size:20px;font-weight:700;color:#1e1e2e;
  margin-bottom:8px;letter-spacing:-.015em;line-height:1.3;
}
.home-donate-desc{
  font-size:13.5px;color:#5b5870;
  line-height:1.65;margin-bottom:20px;
  max-width:440px;margin-left:auto;margin-right:auto;
}
.home-donate-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 26px;
  background:#fff;
  color:#d97540;
  border:1.5px solid rgba(217,117,64,.3);
  border-radius:12px;
  font-family:inherit;font-size:14px;font-weight:600;
  text-decoration:none;
  transition:all .2s;
  box-shadow:
    0 1px 2px rgba(217,117,64,.06),
    0 2px 8px rgba(217,117,64,.08);
}
.home-donate-btn:hover{
  background:#fff7f0;
  border-color:#d97540;
  color:#b85a28;
  transform:translateY(-1px);
  box-shadow:
    0 2px 4px rgba(217,117,64,.1),
    0 6px 16px rgba(217,117,64,.18);
}
@media(max-width:600px){.home-title{font-size:22px}.home-grid{grid-template-columns:1fr 1fr}.home-price-amount{font-size:32px}}
@media(max-width:400px){.home-grid{grid-template-columns:1fr}}

/* ═══ CGV MODAL ═══ */
.cgv-modal-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:2000;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto}
.cgv-modal-bg.show{display:flex}
.cgv-modal{background:#fff;border-radius:18px;padding:32px;max-width:700px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);position:relative;margin:auto}
.cgv-modal .cgv-close{position:sticky;top:0;float:right;width:32px;height:32px;border:none;background:#f3f2f8;border-radius:50%;cursor:pointer;font-size:18px;color:#6b7280;display:flex;align-items:center;justify-content:center;z-index:1}
.cgv-modal .cgv-close:hover{background:#e5e7eb;color:#111827}
.cgv-modal h2{font-size:20px;font-weight:700;color:#1e1e2e;margin:0 0 16px}
.cgv-modal h3{font-size:14px;font-weight:700;color:#534AB7;margin:18px 0 6px}
.cgv-modal p{font-size:12px;color:#374151;line-height:1.7;margin-bottom:8px}
.cgv-modal ul{font-size:12px;color:#374151;line-height:1.7;margin:4px 0 8px 20px}
.cgv-modal .cgv-update{font-size:10px;color:#9ca3af;margin-top:16px;padding-top:12px;border-top:1px solid #f0f0f4}
/* ═══ CONTACT MODAL ═══ */
.ct-modal-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:2000;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto}
.ct-modal-bg.show{display:flex}
.ct-modal{background:#fff;border-radius:18px;padding:32px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.2);position:relative;margin:auto}
.ct-modal .ct-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:#f3f2f8;border-radius:50%;cursor:pointer;font-size:18px;color:#6b7280;display:flex;align-items:center;justify-content:center}
.ct-modal .ct-close:hover{background:#e5e7eb;color:#111827}
.ct-modal h2{font-size:20px;font-weight:700;color:#1e1e2e;margin:0 0 4px}
.ct-modal .ct-sub{font-size:12px;color:#6b7280;margin-bottom:18px}
.ct-field{margin-bottom:14px}
.ct-field label{display:block;font-size:11px;font-weight:600;color:#374151;margin-bottom:4px}
.ct-field input,.ct-field select,.ct-field textarea{width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:10px;font-family:inherit;font-size:13px;color:#111827;outline:none;transition:border .2s;background:#fff}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{border-color:#534AB7}
.ct-field textarea{resize:vertical;min-height:100px}
.ct-submit{width:100%;padding:12px;background:#534AB7;color:#fff;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(83,74,183,.25)}
.ct-submit:hover{background:#4338ca;transform:translateY(-1px)}
.ct-msg{text-align:center;font-size:12px;margin-top:10px;color:#059669;display:none}
.ct-msg.show{display:block}

/* Hero share button */
.home-cta-share{background:#fff;color:#534AB7;border:1px solid #d1cfe6;display:inline-flex;align-items:center;gap:8px}
.home-cta-share:hover{background:#f5f3ff;border-color:#534AB7;transform:translateY(-1px)}
.home-cta-share svg{width:14px;height:14px;fill:currentColor}

/* Footer share row */
.home-footer-share{display:inline-flex;align-items:center;gap:6px;margin-left:8px;flex-wrap:nowrap}
.home-footer-share-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;min-height:28px;max-width:28px;max-height:28px;border-radius:50%;background:#f3f4f6;color:#6b7280;border:none;cursor:pointer;transition:all .2s;text-decoration:none;flex-shrink:0;padding:0;line-height:0}
.home-footer-share-btn:hover{background:#e0dfe8;color:#534AB7;transform:translateY(-1px)}
.home-footer-share-btn svg{width:13px;height:13px;min-width:13px;min-height:13px;max-width:13px;max-height:13px;fill:currentColor;display:block;flex-shrink:0}
.home-footer-share-label{font-size:11px;color:#6b7280;margin-right:4px;flex-shrink:0}

/* ═══ SHARE MODAL & TOAST (CSS manquant — fix logos énormes) ═══ */
.share-modal-bg{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  z-index:2100;align-items:center;justify-content:center;
  padding:20px;animation:smFadeIn .2s
}
.share-modal-bg.show{display:flex}
@keyframes smFadeIn{from{opacity:0}to{opacity:1}}
.share-modal{
  background:#fff;border-radius:18px;
  max-width:480px;width:100%;
  padding:28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;
  animation:smSlideUp .3s cubic-bezier(.16,1,.3,1)
}
@keyframes smSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.share-modal-close{
  position:absolute;top:14px;right:14px;
  background:transparent;border:none;
  font-size:24px;color:#9ca3af;cursor:pointer;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  line-height:1;transition:all .15s;padding:0
}
.share-modal-close:hover{background:#f3f4f6;color:#1e1e2e}
.share-modal-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#534AB7 0%,#3F2BA0 100%);
  color:#fff;
  margin:0 auto 14px;
  flex-shrink:0
}
.share-modal-icon svg{
  width:22px;height:22px;
  min-width:22px;min-height:22px;max-width:22px;max-height:22px;
  fill:currentColor;display:block;flex-shrink:0
}
.share-modal-title{
  font-size:18px;font-weight:700;color:#1e1e2e;
  margin:0 0 6px;text-align:center;padding-right:30px
}
.share-modal-sub{
  font-size:13px;color:#6b7280;
  text-align:center;margin:0 0 22px;line-height:1.5
}
.share-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin-bottom:18px
}
.share-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px;
  background:#f9fafb;border:1px solid #e5e7eb;
  border-radius:12px;cursor:pointer;
  transition:all .2s;text-decoration:none;
  color:#1e1e2e;font-family:inherit;font-size:11px;font-weight:600
}
.share-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  border-color:#d1d5db
}
.share-btn-icon{
  width:32px;height:32px;
  min-width:32px;min-height:32px;max-width:32px;max-height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#fff;flex-shrink:0;padding:0;line-height:0
}
.share-btn-icon svg{
  width:18px;height:18px;
  min-width:18px;min-height:18px;max-width:18px;max-height:18px;
  fill:currentColor;display:block;flex-shrink:0
}
.share-btn[data-net="x"] .share-btn-icon{background:#000}
.share-btn[data-net="facebook"] .share-btn-icon{background:#1877F2}
.share-btn[data-net="reddit"] .share-btn-icon{background:#FF4500}
.share-btn[data-net="linkedin"] .share-btn-icon{background:#0A66C2}
.share-btn[data-net="whatsapp"] .share-btn-icon{background:#25D366}
.share-btn[data-net="pinterest"] .share-btn-icon{background:#BD081C}
.share-btn[data-net="email"] .share-btn-icon{background:#6b7280}
.share-btn[data-net="copy"] .share-btn-icon{background:#534AB7}
.share-url-row{
  display:flex;gap:8px;
  padding:12px;background:#f5f3ff;
  border:1px solid #e0dfe8;border-radius:10px;margin-top:8px;
  align-items:center
}
.share-url-text{
  flex:1;background:transparent;color:#1e1e2e;
  font-family:'JetBrains Mono',monospace,inherit;font-size:12px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.share-url-copy{
  background:#534AB7;color:#fff;border:none;
  padding:6px 14px;border-radius:8px;
  font-family:inherit;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0
}
.share-url-copy:hover{background:#4338ca}
.share-url-copy.copied{background:#059669}
@media(max-width:420px){
  .share-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .share-btn{padding:12px 4px;font-size:10px}
}

/* Toast feedback (Lien copié !) */
.share-toast{
  position:fixed;
  bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  display:flex;align-items:center;gap:8px;
  padding:11px 18px;
  background:#1e1e2e;color:#fff;
  border-radius:10px;
  font-size:13px;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:2200;
  opacity:0;visibility:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s,visibility .3s;
  pointer-events:none;
  max-width:90vw
}
.share-toast.show{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)
}
.share-toast svg{
  width:16px;height:16px;
  min-width:16px;min-height:16px;max-width:16px;max-height:16px;
  fill:#5DBE83;display:block;flex-shrink:0
}
/* ═══ FAQ SECTION (accordéon accessible) ═══ */
.home-section-faq{max-width:920px;margin:60px auto 50px;padding:0 24px}
.home-faq-label{display:inline-block;background:#EEEDFE;color:#534AB7;padding:5px 14px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1.2px;margin-bottom:16px}
.home-faq-title{font-size:32px;font-weight:700;color:#1e1e2e;margin-bottom:8px;letter-spacing:-0.5px;line-height:1.15}
.home-faq-sub{font-size:15px;color:#4b5563;margin-bottom:32px;line-height:1.6}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid #f0f0f4;border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item:hover{border-color:#d1cfe6}
.faq-item.open{border-color:#534AB7;box-shadow:0 2px 12px rgba(83,74,183,.08)}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 22px;background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:#1e1e2e;text-align:left;line-height:1.4;gap:16px;transition:color .15s}
.faq-q:hover{color:#534AB7}
.faq-q:focus-visible{outline:2px solid #534AB7;outline-offset:-2px;border-radius:12px}
.faq-q-text{flex:1;min-width:0}
.faq-q-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#534AB7;transition:transform .25s ease}
.faq-q-icon svg{width:14px;height:14px;fill:currentColor}
.faq-item.open .faq-q-icon{transform:rotate(180deg)}
.faq-a{padding:0 22px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;font-size:14px;color:#4b5563;line-height:1.65}
.faq-item.open .faq-a{max-height:600px;padding:0 22px 18px 22px;border-top:1px solid #f0f0f4;padding-top:14px}
.faq-a p{margin:0}
.faq-group-title{font-family:'Fraunces','DM Serif Display',serif;font-size:15px;font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 50;color:#534AB7;letter-spacing:-.01em;margin:28px 0 8px 0;padding-bottom:6px;border-bottom:1px solid rgba(83,74,183,.15);-webkit-font-smoothing:antialiased}
.faq-group-title:first-child{margin-top:0}
@media(max-width:640px){
  .home-section-faq{margin:40px auto 30px;padding:0 16px}
  .home-faq-title{font-size:26px}
  .home-faq-sub{font-size:14px}
  .faq-q{padding:16px 18px;font-size:14px;gap:12px}
  .faq-a{font-size:13px}
  .faq-item.open .faq-a{padding:14px 18px 16px 18px}
}

/* ═══ COMPOSER MODE LOCK SYSTEM ═══ */
.tab.premium-locked{position:relative;padding-right:22px;color:#5b54a8}
.tab.premium-locked:hover{color:#3730A3;background:rgba(83,74,183,.06)}
.tab.premium-locked.on{color:#3730A3}
.tab.premium-locked::after{
  content:'✦';
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  font-size:9.5px;
  font-weight:700;
  color:#C8A444;
  opacity:.75;
  line-height:1;
  transition:opacity .2s ease,transform .2s ease,color .2s ease
}
.tab.premium-locked:hover::after{opacity:1;color:#B8901F;transform:translateY(-50%) scale(1.18)}
.tab.premium-locked.on::after{opacity:1;color:#B8901F}
.tab.premium-unlocked{padding-right:14px;color:#6b6884}
.tab.premium-unlocked::after{content:none}

/* Composer Mode overlay on panels */
.premium-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(244,243,249,.92);backdrop-filter:blur(6px);z-index:50;overflow:hidden}
.po-content{position:sticky;top:calc(50vh - 120px);display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px}
.premium-overlay .po-icon{font-size:42px;opacity:.6}
.premium-overlay .po-title{font-size:18px;font-weight:700;color:#1e1e2e}
.premium-overlay .po-desc{font-size:13px;color:#6b7280;text-align:center;max-width:340px;line-height:1.5}
.premium-overlay .po-btn{padding:10px 28px;background:#534AB7;color:#fff;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(83,74,183,.25)}
.premium-overlay .po-btn:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 4px 12px rgba(83,74,183,.35)}
.premium-overlay .po-link{font-size:12px;color:#534AB7;cursor:pointer;text-decoration:underline;margin-top:4px}
.pc-panel{position:relative}

/* License modal */
.lic-modal-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);z-index:1000;align-items:center;justify-content:center}
.lic-modal-bg.show{display:flex}
.lic-modal{background:#fff;border-radius:18px;padding:32px;max-width:420px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2);position:relative}
.lic-modal .lm-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border:none;background:#f3f2f8;border-radius:50%;cursor:pointer;font-size:16px;color:#6b7280;display:flex;align-items:center;justify-content:center;transition:all .15s}
.lic-modal .lm-close:hover{background:#e5e7eb;color:#111827}
.lic-modal .lm-icon{text-align:center;font-size:36px;margin-bottom:10px}
.lic-modal .lm-title{font-size:20px;font-weight:700;color:#1e1e2e;text-align:center;margin-bottom:4px}
.lic-modal .lm-sub{font-size:13px;color:#6b7280;text-align:center;margin-bottom:20px;line-height:1.5}
.lic-modal .lm-input{width:100%;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;font-family:inherit;font-size:14px;letter-spacing:.5px;text-align:center;transition:border-color .2s;outline:none}
.lic-modal .lm-input:focus{border-color:#534AB7}
.lic-modal .lm-input.error{border-color:#ef4444;animation:shake .4s}
.lic-modal .lm-input.success{border-color:#059669}
.lic-modal .lm-activate{width:100%;padding:12px;background:#534AB7;color:#fff;border:none;border-radius:10px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;margin-top:12px;transition:all .2s}
.lic-modal .lm-activate:hover{background:#4338ca}
.lic-modal .lm-activate:disabled{background:#d1d5db;cursor:not-allowed}
.lic-modal .lm-msg{font-size:12px;text-align:center;margin-top:10px;min-height:18px}
.lic-modal .lm-msg.err{color:#ef4444}
.lic-modal .lm-msg.ok{color:#059669}
.lic-modal .lm-buy{display:block;text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid #f0f0f4}
.lic-modal .lm-buy a{color:#534AB7;font-size:13px;font-weight:600;text-decoration:none}
.lic-modal .lm-buy a:hover{text-decoration:underline}
.lic-modal .lm-buy .lm-price{font-size:11px;color:#6b7280;margin-top:2px}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ═══ CADENCES ═══ */
@keyframes cadPulse{from{opacity:1}to{opacity:.7}}
#panCadences .main{padding:12px 0 0;display:flex;flex-direction:column;gap:10px}
#panCadences .card{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
#panCadences .card-title{font-size:9px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
#panCadences .ctrl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
#panCadences .ctrl-col{display:flex;flex-direction:column;gap:4px}
#panCadences .ctrl-col label{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em}
#panCadences .ctrl-col select{padding:6px 10px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:13px;color:#111827;cursor:pointer;outline:none;min-width:120px}
#panCadences .ctrl-col select:focus{border-color:#7F77DD}
#panCadences .pills{display:flex;gap:3px;background:#eae8f4;border-radius:8px;padding:2px}
#panCadences .pill{padding:5px 14px;border:none;background:transparent;border-radius:6px;font-family:inherit;font-size:12px;font-weight:500;color:#7c7a9a;cursor:pointer;transition:all .15s;white-space:nowrap}
#panCadences .pill.on{background:#fff;color:#534AB7;box-shadow:0 1px 3px rgba(83,74,183,.12)}
#panCadences .cad-list{display:flex;gap:4px;flex-wrap:wrap}
#panCadences .cad-btn{padding:6px 12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-family:inherit;font-size:12px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;white-space:nowrap}
#panCadences .cad-btn:hover{border-color:#c4b5fd}
#panCadences .cad-btn.on{border-color:#534AB7;background:#f5f3ff;color:#534AB7}
#panCadences .staff-wrap{background:#fff;border:1px solid #f0f0f4;border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.03);overflow-x:auto;min-height:200px;position:relative}
#panCadences .staff-empty{text-align:center;padding:40px;font-size:13px;color:#9ca3af}
#panCadences .info-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#f5f3ff;border:1px solid #e8e5f7;border-radius:10px;font-size:12px;color:#534AB7;font-weight:500}
#panCadences .info-badge .ib-label{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}
#panCadences .play-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#panCadences .play-btn{padding:8px 20px;border:none;border-radius:10px;background:#534AB7;color:#fff;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
#panCadences .play-btn:hover{background:#4339a0}
#panCadences .play-btn.playing{background:#7F77DD;animation:cadPulse .5s ease infinite alternate}
#panCadences .pm{display:flex;gap:2px;background:#eae8f4;border-radius:7px;padding:2px}
#panCadences .pm button{padding:4px 12px;border:none;background:transparent;border-radius:5px;font-family:inherit;font-size:11px;font-weight:500;color:#7c7a9a;cursor:pointer}
#panCadences .pm button.on{background:#fff;color:#534AB7}
#panCadences .legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
#panCadences .legend-item{display:flex;align-items:center;gap:4px;font-size:10px;color:#9ca3af}
#panCadences .legend-dot{width:8px;height:8px;border-radius:50%}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
@page{size:letter portrait;margin:1.5cm 2cm}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;color:#1e1e2e;padding:40px}
.header{text-align:center;margin-bottom:24px}
.header h1{font-size:18px;font-weight:700;color:#534AB7;margin-bottom:4px}
.header h2{font-size:14px;font-weight:600;color:#6b7280;margin-bottom:2px}
.header .meta{font-size:11px;color:#9ca3af;margin-top:8px}
.score-wrap{background:#fff;padding:20px 10px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:20px}
.score-wrap svg{width:100%;height:auto;display:block;margin:0 auto}
.rn-row{display:flex;margin-top:8px}
.rn-lbl{text-align:center;font-size:13px;font-weight:700}
.rn-lbl.zf{color:#2563eb}.rn-lbl.zt{color:#dc2626}.rn-lbl.zp{color:#b45309}
.name-row{display:flex;margin-top:2px}
.name-lbl{text-align:center;font-size:10px;color:#6b7280}
.legend{display:flex;gap:16px;justify-content:center;margin-top:18px;font-size:11px;color:#6b7280}
.legend span{display:flex;align-items:center;gap:4px}
.legend .dot{width:8px;height:8px;border-radius:50%}
.footer{text-align:center;font-size:10px;color:#9ca3af;margin-top:40px;padding-top:12px;border-top:1px solid #e5e7eb}
.chain-steps{margin-bottom:18px;padding:12px 16px;background:#f5f3ff;border-radius:8px;border:1px solid #c4b5fd}
.cs-row{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:12px}
.cs-from{color:#2563eb;font-weight:600}.cs-to{color:#dc2626;font-weight:600}.cs-tech{color:#7c3aed;font-style:italic}.cs-arrow{color:#9ca3af}
/* ═══ FIX PLAN TONAL #3 — Badge % (petit bloc distinct) ═══ */
.fm-prop-pct-badge {
  display: inline-block;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
  line-height: 16px;
}

@media print{
  body{padding:20px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .score-wrap{border:none;box-shadow:none}
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Contrepoint.app
   Stratégie : mobile-first overlays, aucune structure modifiée
   Breakpoints : 480px | 640px | 768px | 1024px
   ═══════════════════════════════════════════════════════════ */

/* ── Viewport meta safety ── */
html { -webkit-text-size-adjust: 100%; }

/* ══════════════════════════════════
   TOPBAR & TABS — navigation mobile
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .shell { max-width: 100%; overflow-x: hidden; }

  .topbar {
    flex-wrap: wrap;
    padding: 8px 12px 0;
    gap: 8px;
    align-items: center;
  }

  /* Logo + lang-sel sur la même ligne */
  .logo { flex-shrink: 0; }
  .lang-sel { margin-left: auto; margin-right: 0; }

  /* Tabs passe en bas, pleine largeur, scroll horizontal */
  .tabs {
    order: 10;
    width: 100%;
    margin-left: 0;
    padding: 4px 0 6px;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .tab {
    padding: 7px 10px;
    font-size: 11px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .tab:nth-child(10) { margin-left: 6px; }

  .pc-panel { padding: 8px 12px 16px; }
}

@media (max-width: 480px) {
  .topbar { padding: 6px 10px 0; }
  .logo { font-size: 22px; }
  .tab { padding: 6px 8px; font-size: 10.5px; }
}

/* ══════════════════════════════════
   CONTENU GÉNÉRAL — panels & cards
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .pnl { padding: 12px; }
  .main { padding: 8px 12px 14px; }
  .rythme-content { padding: 8px 12px 20px; }
}

/* ══════════════════════════════════
   TRANSPOSEUR (t1-grid)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .t1-grid { grid-template-columns: 1fr; gap: 10px; }
  .iscroll { max-height: 220px; }
  .piano-outer { padding: 8px 6px 10px; }
  .pwrap { height: 130px; }
}

/* ══════════════════════════════════
   INTERVALLES (piano2 scroll)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .t2-app { gap: 6px; }
  .iv-grid2 { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 3px; }
  .piano-wrap2 { padding: 6px 4px 4px; }
  .dir-card2 { width: 80px; }
  .result-bar { padding: 10px 12px; }
}

/* ══════════════════════════════════
   HARMONIE & ACCORDS (t3 / ta wrap)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .t3-wrap, .ta-wrap { max-width: 100%; }
  .t3-card, .ta-card { padding: 12px 14px; }
  .t3-key-row, .ta-key-row { gap: 8px; }
  .t3-staff-box, .ta-staff-box { padding: 12px 10px 10px; min-height: 110px; }
}

/* ══════════════════════════════════
   MODES (tm-wrap)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .tm-wrap { max-width: 100%; }
  .tm-top-row { flex-direction: column; }
  .tm-key-card { flex: 1 1 auto; }
  .tm-staff-box { padding: 10px 8px 8px; min-height: 100px; }
  .tm-pw { padding: 6px 4px 4px; }
  .tm-piano-inner { min-width: 400px; }
  .tm-play-row { gap: 8px; }
}

/* ══════════════════════════════════
   MÉTRONOME (col-left / col-right)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  #panMetro .metro-main {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 0 12px;
  }
  .col-left { max-width: 100%; }
  .col-right {
    max-width: 100%;
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .ring-box { width: 190px; height: 190px; }
  .bpm-val { font-size: 36px; }
}

@media (max-width: 480px) {
  .ring-box { width: 170px; height: 170px; }
  .bpm-val { font-size: 32px; }
  .nv-btn { min-width: 50px; padding: 6px 8px; }
  .nv-btn .sym { font-size: 18px; }
}

/* ══════════════════════════════════
   RYTHME (tup-grid / eq-table)
   ══════════════════════════════════ */
@media (max-width: 640px) {
  .tup-grid { grid-template-columns: 1fr 1fr; }
  .eq-table th:first-child, .eq-table td:first-child { width: 90px; padding-left: 8px; }
  .note-sel-btn { padding: 8px 10px; min-width: 50px; }
  .note-sel-btn .ns-sym { font-size: 22px; }
}

@media (max-width: 420px) {
  .tup-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════
   MODULATION (key-grid / pivot table)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  #panModulation .shell { padding: 10px 12px 40px; }
  #panModulation .key-grid { grid-template-columns: 1fr; gap: 8px; }
  .key-arrow { display: none; }
  #panModulation .clr { flex-direction: column; gap: 10px; }
  #panModulation .clc { min-width: 100%; }
  #panModulation table.pt { font-size: 12px; }
  #panModulation table.pt th,
  #panModulation table.pt td { padding: 7px 8px; }
  .chn-node { min-width: 90px; }
  #panModulation .chn-play-row .play-btn { min-width: 140px; }
}

@media (max-width: 480px) {
  #panModulation table.pt th:nth-child(3),
  #panModulation table.pt td:nth-child(3) { display: none; }
}

/* ══════════════════════════════════
   FORMES (fm-toolbar / bottom-area)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  #panFormes .fm-toolbar { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  #panFormes .fm-toolbar .proj-name { width: 150px; font-size: 13px; }
  #panFormes .fm-actions { gap: 3px; }
  #panFormes .bottom-area { flex-direction: column; }
  #panFormes .ref-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border2);
    max-height: 180px;
  }
  #panFormes .dp-row { grid-template-columns: 1fr; }
  #panFormes .modal { width: calc(100vw - 32px); padding: 16px; }
  #panFormes .modal.wide { width: calc(100vw - 32px); }
  .fm-dict-panel { width: 100vw; max-width: 100vw; }
}

@media (max-width: 480px) {
  #panFormes .tonal-timeline-v2 { height: 90px; }
  #panFormes .fm-proportions-bar { margin: 8px 10px 0; }
}

/* ══════════════════════════════════
   SÉQUENCES (si présent)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  #panSequences .seq-grid,
  #panSequences .seq-controls { flex-direction: column; }
}

/* ══════════════════════════════════
   ANALYSEUR (SATB)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  #panAnalyseur .ah-grid,
  #panAnalyseur .ah-top { flex-direction: column; }
  #panAnalyseur .ah-voice-row { flex-wrap: wrap; gap: 6px; }
}

/* ══════════════════════════════════
   HOME PAGE
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .home-hero { padding: 36px 18px 30px; border-radius: 18px; }
  .home-section-video { padding: 22px 16px 24px; border-radius: 16px; }
  .home-section-video-head { flex-direction: column; gap: 12px; }
  .home-section-premium { padding: 26px 18px; border-radius: 18px; }
  .cm-grid { grid-template-columns: 1fr; max-width: 100%; }
  .cm-card { min-height: auto; padding: 18px 16px; }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .home-card-wide { flex-direction: column; grid-column: span 2; }
  .home-card-img { width: 100%; max-width: none; }
  .home-beta-band { flex-direction: column; text-align: center; gap: 6px; font-size: 12px; }
  .home-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .home-footer-links { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 480px) {
  .home-title { font-size: 26px; }
  .home-sub { font-size: 14px; }
  .home-hero { padding: 28px 14px 24px; }
  .home-cta { padding: 9px 16px; font-size: 13px; }
  .home-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-card { padding: 14px 12px; }
  .home-card-wide { grid-column: span 2; }
  .home-price-amount { font-size: 34px; }
  .home-section-premium .home-section-title { font-size: 20px; }
  .cm-stats { gap: 10px 16px; }
}

@media (max-width: 400px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-card-wide { grid-column: span 1; }
}

/* ══════════════════════════════════
   MODALS (license, CGV, contact, share)
   ══════════════════════════════════ */
@media (max-width: 480px) {
  .lic-modal { padding: 24px 18px; border-radius: 14px; }
  .lic-modal .lm-title { font-size: 18px; }
  .cgv-modal { padding: 22px 16px; border-radius: 14px; }
  .ct-modal { padding: 22px 16px; border-radius: 14px; }
  .share-modal { padding: 22px 16px; border-radius: 14px; }
  .share-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .share-btn { padding: 11px 4px; font-size: 10px; }
  .premium-overlay .po-content { padding: 20px; }
  .premium-overlay .po-title { font-size: 16px; }
}

/* ══════════════════════════════════
   FAQ
   ══════════════════════════════════ */
@media (max-width: 640px) {
  .home-section-faq { margin: 36px auto 24px; padding: 0 14px; }
  .home-faq-title { font-size: 24px; }
  .faq-q { padding: 14px 16px; font-size: 13px; }
  .faq-a { font-size: 13px; padding: 0 16px; }
  .faq-item.open .faq-a { padding: 12px 16px 14px; }
}

/* ══════════════════════════════════
   CADENCES
   ══════════════════════════════════ */
@media (max-width: 640px) {
  #panCadences .ctrl-row { flex-direction: column; align-items: stretch; }
  #panCadences .ctrl-col select { min-width: 100%; }
  #panCadences .play-row { flex-wrap: wrap; gap: 6px; }
  #panCadences .staff-wrap { padding: 12px 10px; }
}

/* ══════════════════════════════════
   PIANO TOUCHES — scroll horizontal
   sur petits écrans (tous modules)
   ══════════════════════════════════ */
@media (max-width: 640px) {
  .piano-outer { padding: 6px 4px 8px; }
  .pwrap { height: 120px; }
  .piano-wrap2 { overflow-x: auto; }
  .piano2 { min-width: 600px; }
  .tm-pw { overflow-x: auto; }
  .clef-staff-box { overflow-x: auto; }
  .clef-staff-box svg { min-width: 320px; }
}

/* ══════════════════════════════════
   TOUCH TARGETS — accessibilité mobile
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .tab, .sbtn, .apill, .grp-chip, .sub-btn,
  .ta-sb, .t3-sb, .cad-btn, .pill,
  .pref-btn2, .inv-toggle, .tup-tab,
  .nv-btn, .acc-btn, .obtn {
    min-height: 36px;
  }
  button, [role="button"] { touch-action: manipulation; }
}

/* ══════════════════════════════════
   OVERFLOW SAFETY — empêche scroll X global
   ══════════════════════════════════ */
@media (max-width: 768px) {
  .pc-panel { overflow-x: hidden; }
  .shell { overflow-x: hidden; }
}

/* ═══ Google Drive Button ═══ */
.gdrive-btn {
  background: #fff;
  color: #4285F4;
  border: 1.5px solid #4285F4;
  transition: background .2s, color .2s;
}
.gdrive-btn:hover {
  background: #4285F4;
  color: #fff;
}
.gdrive-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .gdrive-btn { font-size: 11px; padding: 4px 8px; }
}

/* ═══ POLYRHYTHMIE ═══ */
/* ── Click Track / Métronome visuel intégré ── */
/* ══════════════════════════════════════
   MÉTRONOME VISUEL — Click Track
   ══════════════════════════════════════ */

/* Outer box — always visible */
.click-box{background:#f7f6fd;border:1.5px solid #e0ddf5;border-radius:16px;padding:18px 20px 16px;margin-bottom:16px}

/* Top row: title + controls */
.click-box-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.click-box-title{font-size:11px;font-weight:500;color:#a09cc8;text-transform:uppercase;letter-spacing:.15em;white-space:nowrap;flex-shrink:0}

/* ── Play button — stylisé ── */
.click-play-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px 9px 16px;
  background:linear-gradient(135deg,#534AB7 0%,#6D28D9 100%);
  color:#fff;border:none;border-radius:50px;
  font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(83,74,183,.35),0 1px 3px rgba(83,74,183,.2);
  transition:all .18s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;letter-spacing:.01em;
  overflow:hidden;
}
.click-play-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);
  border-radius:inherit;pointer-events:none;
}
.click-play-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(83,74,183,.45),0 2px 6px rgba(83,74,183,.25);
}
.click-play-btn:active{transform:translateY(0px);box-shadow:0 2px 8px rgba(83,74,183,.3);}
.click-play-btn .cpb-icon{font-size:15px;line-height:1;flex-shrink:0}
.click-play-btn .cpb-label{line-height:1}
/* Stop state */
.click-play-btn.playing{
  background:linear-gradient(135deg,#DC2626 0%,#b91c1c 100%);
  box-shadow:0 4px 14px rgba(220,38,38,.35),0 1px 3px rgba(220,38,38,.2);
}
.click-play-btn.playing:hover{box-shadow:0 6px 20px rgba(220,38,38,.45),0 2px 6px rgba(220,38,38,.25);}

/* BPM row */
.click-bpm-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#5b5870}
.click-bpm-row label{font-weight:600;white-space:nowrap;font-size:11px;color:#8b87be}
.click-bpm-row input[type=range]{width:120px;accent-color:#534AB7;height:4px}
#clickBpmVal{font-weight:800;color:#534AB7;min-width:26px;font-size:14px}

/* ── Layer selector pills ── */
.click-layer-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px;min-height:0}.click-layer-row:empty{margin-bottom:0}
.click-layer-lbl{font-size:10px;font-weight:700;color:#8b87be;text-transform:uppercase;letter-spacing:.1em;margin-right:2px;white-space:nowrap}
.click-layer-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 11px;border:1.5px solid #d4d0ea;
  background:#fff;border-radius:20px;
  font-size:11px;font-weight:600;color:#7c7a9a;
  cursor:pointer;transition:all .14s;white-space:nowrap;
  line-height:1.4;
}
.click-layer-pill:hover{border-color:#534AB7;color:#534AB7}
.click-layer-pill.on{background:#534AB7;border-color:#534AB7;color:#fff;box-shadow:0 2px 8px rgba(83,74,183,.25)}
.click-layer-pill .clp-sym{font-size:13px;line-height:1}

/* ── Grid ── */
.click-track-grid{display:flex;align-items:flex-end;gap:0;overflow-x:auto;padding-bottom:4px;flex-wrap:nowrap;scrollbar-width:thin}
.click-group{display:flex;align-items:flex-end;gap:5px;flex-shrink:0}
.click-group+.click-group{border-left:2px solid #dbd8f0;padding-left:10px;margin-left:8px}
.click-group.click-sep-mid{border-left:3px solid #a09cc8!important}

/* Cell wrapper */
.click-cell-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}

/* Cell */
.click-cell{
  width:46px;height:50px;
  border-radius:11px;
  background:#25224a;
  display:flex;align-items:center;justify-content:center;
  opacity:0.36;
  transition:opacity .06s,transform .06s,background .06s,box-shadow .06s;
  cursor:default;position:relative;
  border:1.5px solid rgba(255,255,255,0.04);
}
.click-cell .click-note-sym{
  font-size:19px;color:#7a78b0;line-height:1;
  user-select:none;pointer-events:none;transition:color .06s;
  filter:drop-shadow(0 0 0px transparent);
}
/* Active */
.click-cell.now{opacity:1;transform:scaleY(1.09);border-color:rgba(255,255,255,.12);}
.click-cell.now .click-note-sym{color:#fff;}
.click-cell.now.click-accent-strong {background:#534AB7;box-shadow:0 4px 16px rgba(83,74,183,.55);}
.click-cell.now.click-accent-strong2{background:#7C3AED;box-shadow:0 4px 14px rgba(124,58,237,.5);}
.click-cell.now.click-accent-medium {background:#2563EB;box-shadow:0 3px 12px rgba(37,99,235,.45);}
.click-cell.now.click-accent-light  {background:#0891B2;box-shadow:0 3px 10px rgba(8,145,178,.4);}

/* Label */
.click-label{font-size:10px;color:#9590c8;text-align:center;white-space:nowrap;line-height:1;min-width:32px}
.click-label b{color:#534AB7;font-weight:800;font-size:11px}

@media(max-width:600px){
  .click-cell{width:32px;height:40px;border-radius:8px}
  .click-cell .click-note-sym{font-size:15px}
  .click-group+.click-group{padding-left:6px;margin-left:5px}
  .click-bpm-row input[type=range]{width:90px}
  .click-layer-pill{padding:3px 8px;font-size:10px}
}
.rythme-polyrhythm-container {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin: 16px 0 0;
}
.polyrhythm-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.polyrhythm-controls label {
  font-weight: 600;
  color: #374151;
  font-size: 12px;
}
.polyrhythm-controls select {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}
.polyrhythm-controls input[type="range"] {
  width: 90px;
  cursor: pointer;
  accent-color: #534AB7;
}
.polyrhythm-controls button {
  padding: 6px 12px;
  background: #534AB7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.polyrhythm-controls button:hover { background: #3730A3; }
.polyrhythm-controls button:disabled { background: #ccc; cursor: not-allowed; }
.polyrhythm-grid {
  position: relative;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: auto;
  padding: 10px;
  min-height: 180px;
}
.polyrhythm-cursor {
  position: absolute;
  width: 2px;
  background: #111;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  display: none;
  pointer-events: none;
}
.polyrhythm-info {
  margin-top: 12px;
  padding: 10px;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
}
.polyrhythm-info p { margin: 3px 0; }
.polyrhythm-legend {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}
.poly-toggle-btn.on {
  background: #534AB7;
  color: white;
}

/* ═══ POLYRYTHMIE ═══ */
.rythme-polyrhythm-container {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin: 16px 0 0;
}
.polyrhythm-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.polyrhythm-controls label {
  font-weight: 600;
  color: #374151;
  font-size: 12px;
}
.polyrhythm-controls select {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}
.polyrhythm-controls input[type="range"] {
  width: 90px;
  cursor: pointer;
  accent-color: #534AB7;
}
.polyrhythm-controls button {
  padding: 6px 12px;
  background: #534AB7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.polyrhythm-controls button:hover { background: #3730A3; }
.polyrhythm-controls button:disabled { background: #ccc; cursor: not-allowed; }
.polyrhythm-grid {
  position: relative;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: auto;
  padding: 10px;
  min-height: 180px;
}
.polyrhythm-cursor {
  position: absolute;
  width: 2px;
  background: #111;
  top: 0; left: 0;
  z-index: 10;
  height: 100%;
  display: none;
  pointer-events: none;
}
.polyrhythm-info {
  margin-top: 12px;
  padding: 10px;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
}
.polyrhythm-info p { margin: 3px 0; }
.polyrhythm-legend {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}
.poly-toggle-btn.on {
  background: #534AB7 !important;
  color: white !important;
}

/* ── Sous-sections (formes.js) ───────────────────────────────────────────── */
.fm-subsec-panel{margin-top:16px;border-top:1.5px solid var(--border,#e5e7eb);padding-top:14px}
.fm-subsec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fm-subsec-header h4{font-size:12px;font-weight:700;color:var(--accent,#534AB7);margin:0;letter-spacing:.03em;text-transform:uppercase}
.fm-subsec-header .fm-subsec-total{font-size:11px;color:var(--txt3,#9ca3af);margin-left:8px}
.fm-subsec-add-btn{font-size:11px;padding:4px 10px;border:1.5px dashed var(--accent,#534AB7);background:transparent;color:var(--accent,#534AB7);border-radius:6px;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.fm-subsec-add-btn:hover{background:rgba(83,74,183,.08)}
.fm-subsec-add-btn:disabled{opacity:.4;cursor:not-allowed}
.fm-subsec-list{display:flex;flex-direction:column;gap:8px}
.fm-subsec-item{background:linear-gradient(135deg,rgba(83,74,183,.05),rgba(83,74,183,.02));border:1px solid rgba(83,74,183,.18);border-radius:8px;padding:10px 12px;position:relative}
.fm-subsec-item-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.fm-subsec-num{width:20px;height:20px;border-radius:50%;background:var(--accent,#534AB7);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fm-subsec-name-input{flex:1;font-size:12px;font-weight:600;border:none;border-bottom:1.5px solid var(--border,#e5e7eb);background:transparent;padding:2px 4px;color:var(--txt1,#111827);font-family:inherit;outline:none}
.fm-subsec-name-input:focus{border-bottom-color:var(--accent,#534AB7)}
.fm-subsec-del{margin-left:auto;background:none;border:none;color:var(--txt3,#9ca3af);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;transition:color .15s}
.fm-subsec-del:hover{color:#ef4444}
.fm-subsec-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:start}
.fm-subsec-field label{display:block;font-size:10px;font-weight:600;color:var(--txt3,#9ca3af);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.fm-subsec-field input[type="number"]{width:60px;font-size:12px;padding:4px 6px;border:1.5px solid var(--border,#e5e7eb);border-radius:6px;font-family:inherit;background:var(--bg,#fff);color:var(--txt1,#111827);text-align:center}
.fm-subsec-field input[type="number"]:focus{border-color:var(--accent,#534AB7);outline:none}
.fm-subsec-field-wide{grid-column:span 2}
.fm-subsec-instr-wrap{position:relative}
.fm-subsec-instr-display{min-height:30px;padding:4px 8px;border:1.5px solid var(--border,#e5e7eb);border-radius:6px;font-size:11px;cursor:pointer;background:var(--bg,#fff);color:var(--txt1,#111827);display:flex;align-items:center;flex-wrap:wrap;gap:3px;transition:border-color .15s}
.fm-subsec-instr-display:hover,.fm-subsec-instr-display.open{border-color:var(--accent,#534AB7)}
.fm-subsec-instr-tag{background:rgba(83,74,183,.12);color:var(--accent,#534AB7);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:600;white-space:nowrap}
.fm-subsec-instr-ph{color:var(--txt3,#9ca3af);font-size:11px}
.fm-subsec-instr-dropdown{position:fixed;background:var(--bg,#fff);border:1.5px solid var(--accent,#534AB7);border-radius:8px;z-index:9999;max-height:260px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:220px}
.fm-subsec-instr-group{padding:6px 0}
.fm-subsec-instr-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--txt3,#9ca3af);padding:4px 10px 2px}
.fm-subsec-instr-opt{display:flex;align-items:center;gap:6px;padding:5px 10px;cursor:pointer;font-size:11px;color:var(--txt1,#111827);transition:background .1s}
.fm-subsec-instr-opt:hover{background:rgba(83,74,183,.06)}
.fm-subsec-instr-opt input[type="checkbox"]{accent-color:var(--accent,#534AB7);cursor:pointer;flex-shrink:0}
.fm-subsec-harm-row{display:flex;gap:4px;align-items:center}
.fm-subsec-harm-input{flex:1;font-size:12px;padding:4px 7px;border:1.5px solid var(--border,#e5e7eb);border-radius:6px;font-family:inherit;background:var(--bg,#fff);color:var(--txt1,#111827)}
.fm-subsec-harm-input:focus{border-color:var(--accent,#534AB7);outline:none}
.fm-subsec-harm-picker{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg,#fff);border:1.5px solid var(--accent,#534AB7);border-radius:8px;z-index:50;padding:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;flex-wrap:wrap;gap:3px}
.fm-subsec-harm-chip{padding:2px 7px;border:1px solid var(--border,#e5e7eb);border-radius:5px;font-size:10px;cursor:pointer;font-family:'JetBrains Mono',monospace;background:var(--bg,#fff);transition:all .12s}
.fm-subsec-harm-chip:hover{border-color:var(--accent,#534AB7);color:var(--accent,#534AB7);background:rgba(83,74,183,.06)}

/* ── Instrument dropdown — search + beautiful ───────────────────────────── */
.fm-subsec-instr-arrow{margin-left:auto;font-size:10px;color:var(--txt3,#9ca3af);flex-shrink:0;transition:transform .15s}
.fm-subsec-instr-display.open .fm-subsec-instr-arrow{transform:rotate(180deg)}
.fm-subsec-instr-search{display:flex;align-items:center;gap:6px;padding:8px 10px 6px;border-bottom:1px solid var(--border,#e5e7eb);position:sticky;top:0;background:var(--bg,#fff);z-index:2}
.fm-subsec-instr-search-icon{font-size:12px;flex-shrink:0;opacity:.5}
.fm-subsec-instr-search-input{flex:1;border:1.5px solid var(--border,#e5e7eb);border-radius:6px;padding:5px 8px;font-size:11px;font-family:inherit;background:var(--bg,#fff);color:var(--txt1,#111827);outline:none}
.fm-subsec-instr-search-input:focus{border-color:var(--accent,#534AB7)}
.fm-subsec-instr-sel-count{padding:4px 10px 2px;font-size:10px;font-weight:600;color:var(--accent,#534AB7);min-height:18px}
.fm-subsec-instr-opts{padding:0 0 6px}
.fm-subsec-instr-opt{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;transition:background .1s;border-radius:0}
.fm-subsec-instr-opt:hover{background:rgba(83,74,183,.07)}
.fm-subsec-instr-opt.is-checked{background:rgba(83,74,183,.06)}
.fm-subsec-instr-check{width:16px;height:16px;border:1.5px solid var(--border,#e5e7eb);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--accent,#534AB7);flex-shrink:0;transition:all .12s;background:var(--bg,#fff)}
.fm-subsec-instr-opt.is-checked .fm-subsec-instr-check{background:var(--accent,#534AB7);border-color:var(--accent,#534AB7);color:#fff}
.fm-subsec-instr-name{font-size:11.5px;color:var(--txt1,#111827);flex:1}
.fm-subsec-instr-key{font-size:10px;color:var(--txt3,#9ca3af);margin-left:auto;font-style:italic;white-space:nowrap}
.fm-subsec-instr-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3,#9ca3af);padding:8px 12px 3px;background:linear-gradient(0deg,transparent,rgba(83,74,183,.03));border-top:1px solid rgba(83,74,183,.06);margin-top:2px}
.fm-subsec-instr-group:first-child .fm-subsec-instr-group-label{border-top:none;margin-top:0}