@font-face{font-family:"DM Sans";font-weight:400 600;font-display:swap;src:url(assets/fonts/dmsans-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"DM Sans";font-weight:400 600;font-display:swap;src:url(assets/fonts/dmsans-400-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20C0,U+2113}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url(assets/fonts/spacemono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Space Mono";font-weight:700;font-display:swap;src:url(assets/fonts/spacemono-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{--bg:#141414;--sf:#1b1b1b;--s2:#232323;--bd:#333333;--bd2:#4a4a4a;--tx:#f2f2f0;--muted:#a9a9a6;--orange:#ff6b00;--orange-hi:#ff8c38;--accent-ink:#141414;--green:#c9c9c6;--serif:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--mono:"Space Mono",ui-monospace,Consolas,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
p{color:var(--muted);margin:0 0 24px}
h1,h2,h3{line-height:1.12;letter-spacing:-.04em;margin:0}
h1{font-size:clamp(42px,5.8vw,78px);font-weight:600}
h2{font-size:clamp(30px,4vw,48px);font-weight:600}
h3{font-size:25px;letter-spacing:-.02em}
.wrap{max-width:1240px;margin:auto;padding:0 36px}
.eyebrow{font:13px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--orange);margin-bottom:22px;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--orange);color:#141414;padding:8px 14px;border-radius:6px;z-index:50}
.skip:focus{left:8px}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;border-radius:8px;padding:12px 20px;background:var(--orange);color:#141414;font-weight:600;border:1px solid var(--orange);line-height:1.25;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);background:#ffffff;box-shadow:0 8px 24px #ffffff1a}
.btn.secondary{background:transparent;border-color:var(--bd);color:var(--tx)}
.btn.secondary:hover{background:var(--s2);box-shadow:none}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* header */
header{position:sticky;top:0;z-index:20;background:#141414f5;backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:26px;letter-spacing:-.04em;font-weight:600;display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand .f{color:var(--orange)}
.mark{width:38px;height:38px;object-fit:contain}
.herobg{position:relative;isolation:isolate}
.herobg:before{content:"";position:absolute;inset:0 -50vw;z-index:-1;background:linear-gradient(180deg,#141414cc 0%,#141414f2 85%,var(--bg) 100%),url(assets/bg-ondulations.jpg) center/cover;opacity:.9}
.herobg:after{content:"";position:absolute;right:-8%;top:10%;width:520px;height:520px;z-index:-1;background:radial-gradient(circle,#ffffff14,transparent 65%)}
.vis{display:block;width:100%;height:80px;margin-bottom:6px}
.vis text{font:700 9px var(--mono);fill:#141414}
.hexline{filter:drop-shadow(0 0 22px #ffffff1a)}
.emblem{width:92px;height:92px;opacity:.95}
nav{display:flex;gap:24px;align-items:center;font-size:15px}
nav a{color:var(--muted);transition:color .2s}
nav a:hover,nav a.on{color:var(--orange)}
.menu{display:none;background:none;border:1px solid var(--bd);border-radius:6px;padding:8px 12px}

/* hero */
.hero{display:grid;grid-template-columns:.94fr 1.06fr;align-items:center;gap:60px;padding-block:80px 64px}
.hero h1 span{color:var(--orange)}
.hero p.lead{font-size:20px;max-width:480px;margin-top:26px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.fine{font-size:14px;color:var(--muted);margin-top:19px;display:flex;align-items:center;gap:8px}
.dot{display:inline-block;background:var(--green);width:6px;height:6px;border-radius:50%;animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}

/* démo */
.workbench{background:var(--sf);border:1px solid var(--bd);border-radius:14px;box-shadow:0 25px 70px #0006;overflow:hidden;transform:rotate(-1.2deg);transition:transform .4s}
.workbench:hover{transform:rotate(0)}
.benchbar{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;font:13px var(--mono)}
.status{color:var(--green);font-size:12px}
.tabs{display:flex;gap:5px;padding:15px 16px 0;flex-wrap:wrap}
.tab,.chord{border:1px solid var(--bd);background:var(--s2);padding:8px 13px;border-radius:6px;font-size:14px;transition:border-color .2s,color .2s}
.tab:hover,.chord:hover{border-color:var(--muted)}
.tab.active,.chord.active{color:var(--orange);border-color:var(--orange);background:#ffffff12}
.benchbody{padding:22px 20px}
.demo-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.demo-title strong{font-size:20px}
.chip{font:12px var(--mono);border:1px solid var(--bd);border-radius:5px;padding:4px 7px;color:var(--muted)}
.fretboard{display:block;width:100%;height:auto}
.fretboard .note{transition:opacity .25s}
.fretboard .dim{opacity:.35}
.legend{display:flex;gap:15px;flex-wrap:wrap;font:12px var(--mono);color:var(--muted);margin:16px 0 20px}
.legend i{width:8px;height:8px;display:inline-block;margin-right:6px;border-radius:50%}
.chords{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chord{font-family:var(--mono);font-size:20px;padding:12px 6px}
.chord small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.transport{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;font:12px var(--mono);color:var(--muted)}
.listen{border:0;background:var(--orange);color:#141414;padding:9px 12px;border-radius:6px;font:600 13px var(--mono)}
.listen:hover{background:#ffffff}
.benchfoot{border-top:1px solid var(--bd);padding:12px 20px;color:var(--muted);font:12px var(--mono);display:flex;justify-content:space-between;gap:10px}

/* bandeau + sections */
.strip{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;gap:20px;padding:22px 0;color:var(--muted);font:13px var(--mono)}
.strip b{color:var(--orange);font-weight:400}
section{padding-block:90px}
.section-head{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:35px}
.section-head p{max-width:380px;margin:0}
.modules{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.module{padding:32px;border-right:1px solid var(--bd);background:var(--sf);display:block;transition:background .2s}
.module:last-child{border:0}
a.module:hover{background:var(--s2)}
.num{font:13px var(--mono);color:var(--orange)}
.module h3{margin:26px 0 12px}
.module p{font-size:16px;min-height:66px;margin-bottom:22px}
.module .link{font-size:15px;color:var(--orange)}
.minivis{height:80px;display:flex;gap:8px;align-items:center;padding-top:15px}
.minivis i{font:15px var(--mono);font-style:normal;width:40px;height:40px;border:1px solid var(--bd);border-radius:50%;display:grid;place-items:center}
.minivis i:first-child{background:var(--orange);color:#141414;border-color:var(--orange)}
.wave{display:flex;align-items:center;gap:5px;height:65px}
.wave i{width:8px;background:var(--orange);border-radius:3px;opacity:.7;animation:wave 1.6s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes wave{50%{transform:scaleY(.55)}}

/* étapes */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{border-top:2px solid var(--bd);padding-top:22px;counter-increment:s}
.step:before{content:"0" counter(s);font:14px var(--mono);color:var(--orange);display:block;margin-bottom:12px}
.step h3{margin-bottom:10px}
.step p{font-size:16px;margin:0}

/* téléchargements */
.downloads{background:var(--sf);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.platform{border:1px solid var(--bd);border-radius:10px;padding:24px;display:flex;flex-direction:column;align-items:start;background:var(--bg)}
.osicon{font:28px var(--mono);color:var(--orange);height:56px}
.platform h3{font-size:23px}
.platform p{font-size:15px;margin:12px 0 25px;flex:1}
.platform .btn{width:100%;font-size:15px;padding:10px 8px;min-height:43px}
.badge{font:12px var(--mono);color:var(--muted);border:1px solid var(--bd);border-radius:20px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.note{font-size:14px;color:var(--muted);margin-top:20px}

/* télécommande / cta */
.cta{padding:45px;background:var(--s2);border:1px solid var(--bd);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{font-size:34px}
.cta p{margin:12px 0 0}
.cta .btn{white-space:nowrap}

/* tarifs */
.pricing-top{text-align:center}
.pricing-top p{margin:19px auto 0;max-width:520px}
.billing{display:inline-flex;border:1px solid var(--bd);padding:5px;border-radius:9px;margin:7px 0 38px;gap:3px}
.billing button{border:0;background:transparent;color:var(--muted);font-size:15px;padding:10px 17px;border-radius:5px}
.billing button.active{background:var(--s2);color:var(--tx)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{border:1px solid var(--bd);border-radius:12px;padding:30px;background:var(--sf);position:relative;display:flex;flex-direction:column}
.plan.featured{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 20px 50px #ffffff12}
.ribbon{position:absolute;top:-12px;right:24px;background:var(--orange);color:#141414;font:600 12px var(--mono);padding:4px 10px;border-radius:20px}
.plan-tag{font:12px var(--mono);color:var(--orange);display:block;margin-bottom:19px}
.price{font-size:45px;line-height:1.2;letter-spacing:-2px;margin-top:22px}
.price span{font-size:15px;letter-spacing:0;color:var(--muted)}
.price-note{font-size:14px;min-height:40px;margin:8px 0 18px}
.plan .btn{width:100%;font-size:16px}
.plan ul{list-style:none;padding:20px 0 0;margin:20px 0 0;border-top:1px solid var(--bd);font-size:15px;color:var(--muted)}
.plan li{margin:12px 0}
.plan li:before{content:"✓";color:var(--orange);margin-right:10px}
.plan li.no:before{content:"–";color:var(--bd)}
.pack-card{display:flex;align-items:center;justify-content:space-between;gap:40px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);padding:30px;margin-top:20px}
.pack-card p{max-width:640px;font-size:16px;margin:14px 0 0}
.pack-buy{min-width:210px}
.pack-buy .price{margin:0 0 15px;font-size:38px}
.pack-buy .btn{width:100%}

/* profs */
#professeurs .module p{min-height:120px}
#professeurs .module .link{display:block;line-height:1.7}

/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.faq-grid p{margin-top:23px}
.faqs details{border-bottom:1px solid var(--bd);padding:19px 0}
.faqs summary{list-style:none;cursor:pointer;padding-right:30px;position:relative}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:after{content:"+";position:absolute;right:0;color:var(--orange);font-size:26px;top:-5px}
.faqs details[open] summary:after{content:"−"}
.faqs p{font-size:16px;margin:16px 25px 0 0}

/* footer */
footer{border-top:1px solid var(--bd);padding:35px 0}
.footerline{display:flex;justify-content:space-between;align-items:center;gap:25px}
.footlinks{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.footlinks a:hover{color:var(--orange)}
.copyright{font:12px var(--mono);color:var(--muted);margin-top:28px}

/* modale */
dialog{background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-radius:14px;max-width:480px;width:calc(100% - 32px);padding:30px}
dialog::backdrop{background:#000b}
dialog h3{padding-right:20px}
dialog p{margin:20px 0}
.close{float:right;background:none;border:0;font-size:25px;line-height:1}
.dialog-result{font:14px var(--mono);color:var(--orange)}

/* apparition au scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

@media(max-width:1000px){
  .hero{gap:30px}.wrap{padding:0 24px}nav{gap:16px}.nav>.btn{display:none}
  .platforms{grid-template-columns:repeat(2,1fr)}.section-head{gap:30px}.faq-grid{gap:40px}
}
@media(max-width:760px){
  .wrap{padding:0 20px}.nav{height:66px}.menu{display:block}
  nav{display:none;position:absolute;top:66px;left:0;right:0;padding:22px;background:var(--sf);border-bottom:1px solid var(--bd);flex-direction:column;align-items:stretch;font-size:17px}
  nav.open{display:flex}
  .hero{grid-template-columns:1fr;padding-block:48px;gap:42px}.hero p.lead{font-size:18px}
  .workbench{transform:none}
  .strip{flex-wrap:wrap;justify-content:center;font-size:12px;gap:12px 22px}
  .modules,.plans,.faq-grid,.steps{grid-template-columns:1fr}
  .module{border-right:0;border-bottom:1px solid var(--bd)}.module p,#professeurs .module p{min-height:0}
  .section-head{display:block}.section-head p{margin-top:22px}.modules{margin-top:25px}
  section{padding-block:60px}.faq-grid{gap:12px}
  .billing button{padding:10px 12px;font-size:14px}
  .platforms{gap:10px}.platform{padding:18px}.platform p{font-size:14px}
  .cta,.footerline,.pack-card{flex-direction:column;align-items:stretch}.cta{padding:28px}
  .footlinks{flex-wrap:wrap;gap:18px}.benchbody{padding:20px 14px}.demo-title strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

@media(min-width:761px) and (max-width:1200px){.nav>.btn{display:none}nav{gap:18px}}

/* ajouts v2.1 */
.spacer{flex:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legend .sh{color:var(--muted)}.legend .sh b{color:var(--tx);font-weight:400;margin-right:4px}
.legend{align-items:center}
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px;padding:22px 0 6px;font:13px var(--mono);color:var(--muted)}
.facts b{color:var(--tx);font-weight:400}
.facts span:before{content:"✓";color:var(--orange);margin-right:9px}
nav .langsw{border:1px solid var(--bd);border-radius:20px;padding:3px 12px;font-size:13px}
.billing em{font-size:11px;color:var(--orange);font-style:normal;margin-left:6px}
.billing button.active em{color:var(--orange)}

/* galerie */
.gallery{max-width:1100px;margin:auto}
.gtabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.gtab{border:1px solid var(--bd);background:var(--s2);border-radius:8px;padding:10px 20px;font-size:15px;transition:border-color .2s,color .2s}
.gtab:hover{border-color:var(--muted)}
.gtab.active{color:var(--orange);border-color:var(--orange);background:#ffffff12}
.frame{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:var(--sf);box-shadow:0 25px 70px #0006}
.frame-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--bd);font:12px var(--mono);color:var(--muted)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:var(--bd)}
.frame-bar span{margin-left:10px}
.frame img{display:block;width:100%;height:auto}
.gcap{text-align:center;font-size:15px;max-width:720px;margin:20px auto 0}

/* liste d'attente */
.waitlist{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:22px;padding:30px;border:1px solid var(--bd);border-radius:12px;background:var(--bg);flex-wrap:wrap}
.waitlist h3{margin-bottom:6px}.waitlist p{margin:0;font-size:15px}
.wl-row{display:flex;gap:10px;flex:1;min-width:300px;max-width:520px}
.wl-row input{flex:1;min-width:0;background:var(--sf);border:1px solid var(--bd);color:var(--tx);border-radius:8px;padding:12px 14px;font-size:16px}
.wl-row input:focus{outline:2px solid var(--orange);outline-offset:2px}
.wl-err{width:100%;color:#ff8080;min-height:1.2em;font-size:14px!important}

/* conditions */
.conditions{margin-top:18px;border-top:1px solid var(--bd);padding-top:14px}
.conditions summary{cursor:pointer;font-size:14px;color:var(--muted)}
.conditions p{font-size:13px;margin:12px 0 0}

/* pages légales */
.legal{max-width:760px;padding:60px 0 90px}
.legal h1{font-size:42px;margin:24px 0 18px}.legal h2{font-size:22px;margin:30px 0 8px}
.legal .todo{border:1px solid var(--orange);border-radius:8px;padding:14px 18px;color:var(--tx);background:#ffffff0f;font-size:15px}

@media(max-width:760px){.waitlist{padding:22px;gap:20px}.wl-row{min-width:0;width:100%;flex-direction:column}.facts{gap:8px 20px;font-size:12px}}
.herobg{overflow:hidden}html,body{overflow-x:clip}

nav a,.nav>.btn,.brand{white-space:nowrap}
.wl-err:empty{display:none}
@media(min-width:761px) and (max-width:1320px){.nav>.btn{display:none}}
.billing em{white-space:nowrap}

/* page de compte */
.acct{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:50px 20px}
.acct-card{width:100%;max-width:460px;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:34px;box-shadow:0 25px 70px #0006;text-align:left}
.acct-card .emblem{display:block;margin:0 auto 18px;width:76px;height:76px}
.acct-card h1{font-size:34px;margin:6px 0 10px}
.acct-card .gtabs{justify-content:flex-start;margin-bottom:22px}
.acct-card label{display:block;font-size:15px;margin:16px 0 6px;color:var(--tx)}
.acct-card input{width:100%;background:var(--bg);border:1px solid var(--bd);color:var(--tx);border-radius:8px;padding:13px 14px;font-size:16px}
.acct-card input:focus{outline:2px solid var(--orange);outline-offset:2px}
.acct-card .btn{width:100%;margin-top:20px}
.acct-card .hint{font-size:13px;margin:8px 0 0}
.acct-card .hint a,.acct-links a{color:var(--orange)}
.acct-links{text-align:center;font-size:14px;margin:16px 0 0}
.acct-msg{margin:16px 0 0;padding:11px 14px;border-radius:8px;border:1px solid #ff808066;background:#ff808014;color:#ffb0b0;font-size:14px}
.acct-msg.ok{border-color:#88c59e66;background:#88c59e14;color:#b5e6c8}
.acct-warn{margin:0 0 20px;padding:11px 14px;border-radius:8px;border:1px solid var(--orange);background:#ffffff0f;color:var(--tx);font-size:14px}
.or{display:flex;align-items:center;gap:14px;margin:22px 0 0;color:var(--muted);font-size:13px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--bd)}
.acct-dl{margin:18px 0 24px;display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:15px}
.acct-dl dt{color:var(--muted)}.acct-dl dd{margin:0}
.acct-card [hidden]{display:none!important}
@media(max-width:760px){.acct-card{padding:24px}}
.acct-card section{padding:0}

/* Espace connecté : une longue adresse e-mail reste dans la carte (retour à la ligne, taille adaptée) */
#acUser{font-size:clamp(20px,5.2vw,28px);line-height:1.25;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.acct-card{overflow-wrap:anywhere}
.acct-dl dd{min-width:0;overflow-wrap:anywhere}

/* Achat : panneau de paiement simulé, mode test, actions d'abonnement */
.acct-price{font-size:28px;font-weight:700;margin:6px 0 4px;color:var(--tx)}
.acct-sim{font-size:13px;margin:10px 0 0;padding:9px 12px;border:1px dashed var(--orange);border-radius:8px;color:var(--tx);background:#ffffff0f}
.linklike{background:none;border:0;padding:0;color:var(--orange);text-decoration:underline;cursor:pointer;font:inherit}
.acct-buy{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.acct-buy .btn{width:auto;margin-top:0;flex:1 1 auto}

/* Espace utilisateur : tableau de bord à onglets */
.acct-card.wide{max-width:780px}
.dash-tabs{margin:14px 0 20px;flex-wrap:wrap}
.dash-panel[hidden]{display:none!important}
.feat-list{list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.feat-list li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--bd);border-radius:8px;font-size:14px}
.feat-list li.off{opacity:.6}.feat-list li em{font-style:normal;font-size:12px;color:var(--muted)}.feat-list li.on .dot{color:#6fb353;font-weight:700}
.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0}
.plan-card{border:1px solid var(--bd);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.plan-card h3{margin:0;font-size:19px}.plan-card .btn{margin-top:auto;width:100%}
.plan-card.own{opacity:.7}.plan-card.up{border-color:var(--orange)}
.pc-price{font-size:26px;font-weight:700}.pc-owned{margin-top:auto;font-size:13px;color:#6fb353}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.tile{border:1px solid var(--bd);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:4px}.tile b{font-size:26px}.tile span{font-size:13px;color:var(--muted)}
.spark{display:flex;align-items:flex-end;gap:3px;height:64px;margin:6px 0 18px;padding:4px 0;border-bottom:1px solid var(--bd)}
.spark i{flex:1;min-width:3px;background:var(--orange);border-radius:3px 3px 0 0;opacity:.85}
.usage-sec{margin:14px 0}.usage-sec h3{font-size:16px;margin:0 0 8px}
.bars{display:grid;gap:7px}.bar{display:grid;grid-template-columns:minmax(90px,170px) 1fr 62px;gap:10px;align-items:center;font-size:14px}
.bar .bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar .bt{height:10px;background:var(--bd);border-radius:6px;overflow:hidden}.bar .bf{display:block;height:100%;background:var(--orange);border-radius:6px}.bar .bv{text-align:right;color:var(--muted);font-size:13px}
.set-sec{padding:16px 0;border-top:1px solid var(--bd)}.set-sec:first-child{border-top:0}.set-sec h3{margin:0 0 8px;font-size:17px}.set-sec .btn{width:auto;margin-top:12px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px}.chk input{width:auto;margin-top:3px}
.danger h3{color:#ffb0b0}.danger-btn{border-color:#ff808099;color:#ffb0b0}
@media(max-width:560px){.bar{grid-template-columns:90px 1fr 54px}.tiles{grid-template-columns:1fr}}
.feat-list li::before{content:none!important;display:none}
.spark i{max-width:26px}
.dash-tabs .gtab{padding:9px 16px;font-size:14px}
.acct-sim + .gtabs{margin-top:14px}

/* sections ajoutées : premiers pas, pour qui, progrès, écoles */
.modules.four{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ═══ Refonte 2026-10-24 : palette monochrome de l'app, ton éditorial, moins de « template » ═══
   Principes : aucune couleur d'accent (les couleurs de notes ne vivent que dans les démos et captures, là où elles ont un sens),
   titres en serif, textes alignés à gauche, listes à filets au lieu de cartes, pas de lueurs ni d'animations d'apparition. */
body{font-size:17.5px;line-height:1.65}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em}
h1{font-size:clamp(36px,4.4vw,58px);line-height:1.1}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.15}
h3{font-size:23px;line-height:1.25}
.hero h1 span{color:inherit;font-style:italic}
.eyebrow{font:500 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:14px}
.num{display:block;font:500 14px var(--sans);color:var(--muted);letter-spacing:0;text-transform:none}
.skip{background:var(--tx);color:var(--accent-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--tx)}
a{text-underline-offset:3px}

/* boutons : pleins, sobres, sans effet de survol « SaaS » */
.btn{border-radius:5px;background:var(--tx);color:var(--accent-ink);border-color:var(--tx);font-weight:500;transition:background .15s}
.btn:hover{transform:none;box-shadow:none;background:#fff}
.btn.secondary{background:transparent;color:var(--tx);border-color:var(--bd2)}
.btn.secondary:hover{background:var(--s2)}
.btn[disabled]{opacity:.5}

/* en-tête et fond : plat */
header{backdrop-filter:none;background:var(--bg)}
.brand{font-family:var(--sans);font-size:23px;letter-spacing:-.02em}
.brand .f{color:inherit}
nav a:hover,nav a.on{color:var(--tx);text-decoration:underline}
nav .langsw{border-radius:4px}
.herobg:before{background:none}
.herobg:after{content:none}
.hexline{filter:none}
.hero{align-items:start;padding-block:72px 56px}
.hero p.lead{font-size:19px;max-width:500px}
.dot{animation:none;background:var(--tx)}

/* démo du manche : carte plate, sans inclinaison */
.workbench{border-radius:8px;box-shadow:none;transform:none;border-color:var(--bd2)}
.benchbar,.chip,.legend,.chord,.transport,.benchfoot{font-family:var(--sans)}
.benchbar{font-size:13px}.status{color:var(--muted)}
.tab.active,.chord.active{color:var(--tx);border-color:var(--tx);background:var(--s2)}
.tab,.chord,.chip{border-radius:4px}
.listen{border-radius:4px;background:var(--tx);color:var(--accent-ink);font-family:var(--sans)}
.vis text{font-family:var(--sans)}

/* bandeaux et sections */
.strip,.facts{font-family:var(--sans);font-size:14px}
.strip b{color:var(--tx)}
.facts span:before{content:"–";color:var(--muted)}
section{padding-block:84px}

/* cartes → listes à filets (aucune boîte, aucun fond) */
.modules{border:0;border-radius:0;gap:0 56px;overflow:visible}
.module{border:0;border-top:1px solid var(--bd2);background:none;padding:22px 0 10px}
a.module:hover{background:none}
.module h3{margin:12px 0 10px}
.module p{min-height:0}
.module .link{color:var(--tx);text-decoration:underline;text-underline-offset:4px}
.steps{gap:0 56px}
.step{border-top:1px solid var(--bd2);padding-top:20px}
.step:before{content:none}
.minivis i{border-radius:4px;font-family:var(--sans)}
.minivis i:first-child{background:var(--tx);color:var(--accent-ink);border-color:var(--tx)}
.wave i{background:var(--tx);animation:none;opacity:.5}

/* téléchargements, télécommande, listes d'attente */
.downloads{background:var(--sf)}
.platform{border-radius:6px;background:var(--bg)}
.osicon{font-family:var(--sans);color:var(--tx)}
.badge{border-radius:4px;font-family:var(--sans)}
.cta{border-radius:6px;background:var(--sf)}
.waitlist{border-radius:6px}
.wl-row input{border-radius:5px}
.wl-row input:focus{outline-color:var(--tx)}

/* formules */
.pricing-top{text-align:left}
.pricing-top p{margin-left:0}
.billing{border-radius:5px}.billing button{border-radius:3px}
.plan{border-radius:6px;background:var(--sf)}
.plan.featured{border-color:var(--tx);box-shadow:none;background:var(--s2)}
.ribbon{display:none}
.plan-tag{font:500 14px var(--sans);color:var(--muted)}
.price{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.plan li:before{content:"–";color:var(--muted)}
.plan li.no{opacity:.55}
.pack-card{border-radius:6px}
.billing em{color:var(--muted)}

/* FAQ, pied de page, modale */
.faqs summary:after{color:var(--muted);font-family:var(--sans)}
footer .footlinks a:hover{color:var(--tx);text-decoration:underline}
.copyright{font-family:var(--sans)}
dialog{border-radius:8px}
.dialog-result{font-family:var(--sans);color:var(--tx)}

/* galerie : captures sans effets */
.gtab{border-radius:4px}
.gtab.active{color:var(--tx);border-color:var(--tx);background:var(--s2)}
.frame{border-radius:6px;box-shadow:none}
.frame-bar{font-family:var(--sans)}
.gcap{text-align:left;margin-left:0}
.gtabs{justify-content:flex-start}

/* pas d'animation d'apparition : la page se lit comme un document */
.reveal{opacity:1;transform:none;transition:none}

/* pages légales, compte, administration */
.legal .todo{border-color:var(--bd2);background:var(--sf)}
.acct-card{border-radius:8px;box-shadow:none}
.acct-card h1{font-size:30px}
.acct-sim{border-color:var(--bd2);background:var(--sf)}
.acct-msg{border-radius:5px}
.dash-tabs .gtab{border-radius:4px}
.plan-card{border-radius:6px}.plan-card.up{border-color:var(--tx)}
.pc-owned{color:var(--muted)}
.feat-list li.on .dot{color:var(--tx)}
.spark i,.bar .bf{background:var(--tx);opacity:.8}
.danger h3{color:#e8b4b4}

/* nouvelles sections : mot de l'auteur et carnet de bord */
.author{max-width:720px}
.author p{font-family:var(--serif);font-size:23px;line-height:1.5;color:var(--tx)}
.author .sig{font:500 15px var(--sans);color:var(--muted);margin-top:6px}
.devlog{list-style:none;margin:0;padding:0;max-width:820px}
.devlog li{display:grid;grid-template-columns:120px 1fr;gap:6px 28px;padding:16px 0;border-top:1px solid var(--bd)}
.devlog time{font-size:14px;color:var(--muted);padding-top:3px}
.devlog b{font-weight:500;color:var(--tx);display:block;margin-bottom:2px}
.devlog span{color:var(--muted)}
@media(max-width:760px){.devlog li{grid-template-columns:1fr}.hero{padding-block:44px 40px}.author p{font-size:20px}}

/* ═══ Correctifs 2026-10-24 (soir) ═══ */
/* titres en DM Sans (pas de serif), accent orange sur fond gris : l'orange sert aux actions et aux états actifs, pas de décor */
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.03em}
.price{font-family:var(--sans);font-weight:600;letter-spacing:-.04em}
.author p{font-family:var(--sans);font-size:21px;line-height:1.55}
.hero h1 span{font-style:normal}
.btn{background:var(--orange);border-color:var(--orange);color:var(--accent-ink)}
.btn:hover{background:var(--orange-hi)}
.btn.secondary{background:transparent;border-color:var(--bd2);color:var(--tx)}
.btn.secondary:hover{background:var(--s2);border-color:var(--muted)}
.skip{background:var(--orange)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--orange)}
.brand .f{color:var(--orange)}
nav a:hover,nav a.on{color:var(--orange);text-decoration:none}
.module .link{color:var(--orange);text-decoration:none}
.module .link:hover{text-decoration:underline}
.tab.active,.chord.active,.gtab.active{color:var(--orange);border-color:var(--orange);background:#ff6b0014}
.listen{background:var(--orange)}
.minivis i:first-child{background:var(--orange);border-color:var(--orange)}
.plan.featured{border-color:var(--orange)}
.facts span:before,.plan li:before{color:var(--orange)}
.faqs summary:after{color:var(--orange)}
.spark i,.bar .bf{background:var(--orange);opacity:1}
.wl-row input:focus,.acct-card input:focus{outline-color:var(--orange)}
.footlinks a:hover{color:var(--orange)}
.feat-list li.on .dot{color:var(--orange)}
.plan-card.up{border-color:var(--orange)}
.acct-sim{border-color:var(--orange);background:#ff6b0010}
.dot{background:var(--green)}

/* page de compte : le haut du bloc ne bouge jamais d'un onglet à l'autre */
html{scrollbar-gutter:stable}
.acct{align-items:start;justify-items:center;place-items:start center;padding-top:44px}
.acct-card{margin:0 auto}
.dash-panel{min-height:460px}
.dash-tabs{position:sticky;top:76px;z-index:5;background:var(--sf);padding:10px 0;margin:6px 0 14px;border-bottom:1px solid var(--bd)}

/* réglages : sections aérées, champs et boutons espacés */
.acct-card .set-sec{padding:26px 0;border-top:1px solid var(--bd)}
.acct-card .set-sec:first-child{border-top:0;padding-top:6px}
.set-sec h3{margin:0 0 14px;font-size:18px}
.set-sec label{margin:14px 0 8px}
.set-sec .hint{margin:0 0 6px}
.set-sec .btn{margin-top:16px}
.set-sec .chk{margin:6px 0 10px}
.set-sec input[type=text],.set-sec input[type=email],.set-sec input[type=password]{max-width:420px}
.set-sec.danger input{margin-top:6px}
#setMsg{margin-top:22px}
.acct-card .set-sec label{display:flex;flex-direction:column;gap:8px;margin:14px 0 0}
.acct-card .set-sec label.chk{flex-direction:row;align-items:flex-start;gap:12px}
.acct-card .set-sec label.chk input{margin:4px 0 0;flex:none}
.set-sec.danger input{display:block;width:100%;max-width:420px;margin:12px 0 0}

/* note-colored buttons : accords et gammes de la démo aux couleurs de notes FretFace (--nc couleur, --nt texte lisible dessus) */
.chord,.tab[data-scale]{--nc:var(--bd2);--nt:#111;box-shadow:inset 0 3px 0 var(--nc)}
.chord small{color:var(--muted)}
.chord:hover,.tab[data-scale]:hover{border-color:var(--nc)}
.chord.active,.tab[data-scale].active{background:var(--nc);border-color:var(--nc);color:var(--nt);box-shadow:none}
.chord.active small{color:var(--nt);opacity:.75}

.plans-h{margin:26px 0 4px;font-size:19px}
#plansBox{margin-top:10px;padding-top:6px;border-top:1px solid var(--bd)}

/* fiches de modules : liste repliable, filets fins */
.mg{margin:34px 0 10px;font-size:20px}
.modlist{border-top:1px solid var(--bd2)}
.mod{border-bottom:1px solid var(--bd)}
.mod summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:200px 1fr auto;gap:18px;align-items:baseline;padding:16px 4px}
.mod summary::-webkit-details-marker{display:none}
.mod summary:hover .mn{color:var(--orange)}
.mn{font-weight:600;font-size:18px}
.mh{color:var(--muted);font-size:16px}
.mp{font-size:13px;border:1px solid var(--bd2);border-radius:4px;padding:2px 9px;white-space:nowrap}
.mp-free{border-color:var(--tx);color:var(--tx)}.mp-explorer{color:var(--muted)}.mp-complet{border-color:var(--orange);color:var(--orange)}
.mb{padding:2px 4px 22px 218px;max-width:980px}
.mb p{margin:0 0 12px}.mb ul{margin:0 0 14px;padding-left:20px;color:var(--muted)}.mb li{margin:5px 0}
.mb .link{color:var(--orange);font-size:15px}
@media(max-width:760px){.mod summary{grid-template-columns:1fr auto;gap:4px 12px}.mh{grid-column:1 / -1;order:3}.mb{padding-left:4px}}

.promo-row{display:flex;gap:10px;margin:0 0 14px}.promo-row input{flex:1;max-width:240px;text-transform:uppercase}.promo-row .btn{width:auto;margin:0}
.chk b{font-weight:600}.chk small{display:block;margin-top:2px}

/* logo provisoire FretFace (emblème + mot) : remplace emblème + texte dans .brand */
.brand .wordmark{height:34px;width:auto;display:block}
@media(max-width:640px){.brand .wordmark{height:28px}}