﻿/* ================================================================
 * style.css — ScalaBass / ScalaGuitare — Styles communs
 *
 * MIGRATION : ajouter dans chaque <head> (avant <style> page) :
 *   <link rel="stylesheet" href="style.css">
 * Puis supprimer les blocs CSS couverts ici du <style> de la page.
 * Les styles page-spécifiques (cards, manche, etc.) restent inline.
 * ================================================================ */

/* ===== VARIABLES RACINE (base commune) ===== */
:root{
  --bg:#15100c; --bg-2:#1d160f; --panel:#241a12; --panel-2:#2c2016;
  --line:#3a2c1e; --wood-a:#4a3320; --wood-b:#2c1d12;
  --brass:#d9a849; --brass-dim:#9c7a3a;
  --bone:#efe6d3; --cream:#ece1cd; --muted:#9d8a72; --muted-2:#6f5f4c;
  --radius:14px;
}

/* ===== RESET DE BASE ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 550px at 80% -10%, rgba(217,168,73,.09), transparent 58%),
    radial-gradient(800px 480px at -8% 105%, rgba(217,168,73,.06), transparent 52%),
    var(--bg);
  color:var(--cream); font-family:"Hanken Grotesk",system-ui,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding:clamp(20px,4vw,52px) clamp(16px,4vw,40px) 80px}

/* ===== HEADER & NAVIGATION ===== */
header{margin-bottom:30px}
.eyebrow{
  font-family:"Space Mono",monospace;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:12px;
  height:44px; flex-wrap:nowrap;
}
.site-name{
  font-weight:700; letter-spacing:.18em; color:var(--brass);
  font-size:22px; white-space:nowrap; flex-shrink:0;
}
.site-logo{height:36px;max-height:50px;display:block;flex-shrink:0;}
.site-nav{
  display:flex; gap:2px; background:#0e0a07;
  border:1px solid var(--line); border-radius:8px; padding:3px; flex-shrink:0;
}
.nav-link{
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:5px 10px; border-radius:5px;
  transition:color .12s,background .12s; white-space:nowrap; font-weight:700;
  display:inline-block;
}
.nav-link:hover{color:var(--cream)}
.nav-link.active{background:var(--brass); color:#160f08}

/* ===== LOGO + SÉLECTEUR INSTRUMENT ===== */
.logo-bar{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:8px}
.logo-bar .inst-bar{margin-bottom:0}

/* ===== SÉLECTEUR INSTRUMENT (Basse / Guitare) ===== */
.inst-bar{display:flex;gap:3px;margin-bottom:10px;background:#0e0a07;border:1px solid var(--line);border-radius:8px;padding:3px;width:fit-content}
.inst-btn{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:5px 14px;border-radius:5px;transition:.12s;white-space:nowrap}
.inst-btn:hover{color:var(--cream)}
.inst-btn.bass-btn.active{background:var(--brass);color:#160f08;font-weight:700}
.inst-btn.guit-btn.active{background:#bf1828;color:#fff;font-weight:700}

/* ===== TOGGLES NOTATION / LANGUE ===== */
.header-tools{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;flex-shrink:0}
.htool-seg{display:inline-flex;background:#0e0a07;border:1px solid var(--line);border-radius:7px;padding:2px;gap:1px;flex-shrink:0}
.htool-seg button{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  padding:5px 10px;border-radius:5px;transition:color .1s,background .1s;
  white-space:nowrap;font-weight:700;
}
.htool-seg button:hover{color:var(--cream)}
.htool-seg button.on{background:var(--brass);color:#160f08}
.htool-seg button[disabled]{opacity:.35;cursor:default;pointer-events:none}
.htool-divider{width:1px;height:16px;background:var(--line);margin:0 2px;flex-shrink:0;align-self:center}

/* ===== TYPOGRAPHIE ===== */
h1{font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(42px,7.5vw,82px); line-height:.95; margin:.12em 0 .1em;}
h1 em{font-style:italic; color:var(--brass)}
.lede{color:var(--muted); max-width:64ch; font-size:clamp(14px,1.4vw,16px)}

/* ===== BANDEAU DE CONTRÔLES ===== */
.controls{
  margin-top:26px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px clamp(14px,2.4vw,24px);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03);
}
.ctl-label{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin-bottom:9px;}
.ctl-row{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start}

/* ===== PIANO ===== */
.piano-wrap{display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap}
.piano{position:relative; display:flex; align-items:flex-end; height:170px; user-select:none; background:#0c0906; padding:8px 8px 0; border-radius:10px; border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.04);}
.wkey{position:relative; width:56px; height:136px; background:linear-gradient(180deg,#f8f2e8,#e8dfc8 70%,#d4c9ad); border:1px solid #2a1e12; border-radius:0 0 7px 7px; margin:0 1.5px; cursor:pointer; color:#3a2c1e; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:10px; gap:3px; font-weight:700; font-size:13px; transition:background .1s,transform .05s; box-shadow:inset 0 -3px 6px rgba(0,0,0,.15),2px 0 0 rgba(0,0,0,.1);}
.wkey:hover{background:linear-gradient(180deg,#fff9ee,#ede1c4)}
.wkey:active{transform:translateY(2px)}
.wkey.sel{background:linear-gradient(180deg,var(--brass),#c9952d 70%,#a07820); color:#160f08; box-shadow:inset 0 -2px 5px rgba(0,0,0,.3),0 0 12px rgba(217,168,73,.4);}
.wkey .wlabel{font-size:12px; font-weight:700; line-height:1}
.bkey{position:absolute; top:8px; width:38px; height:100px; z-index:3; background:linear-gradient(180deg,#1e1508,#0a0704 60%,#1a1208); border:1px solid #000; border-top:none; border-radius:0 0 6px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:8px; gap:2px; line-height:1; box-shadow:2px 4px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07); transition:background .1s,transform .05s;}
.bkey:hover{background:linear-gradient(180deg,#2e2010,#100b06)}
.bkey:active{transform:translateY(2px)}
.bkey.sel{background:linear-gradient(180deg,var(--brass),#9c7520 60%,#7a5d18); box-shadow:2px 4px 8px rgba(0,0,0,.6),0 0 10px rgba(217,168,73,.35);}
.bkey .bname{font-family:"Space Mono",monospace; font-weight:700; font-size:13px; color:#fff}
.bkey.sel .bname{color:#160f08}
.bkey .balt{font-size:10px; color:rgba(255,255,255,.55)}
.bkey.sel .balt{color:rgba(22,15,8,.6)}

/* ===== BOUTONS SEGMENT ===== */
.seg{display:inline-flex; background:#0e0a07; border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px}
.seg button{font-family:"Space Mono",monospace; font-size:13px; background:transparent; border:0; color:var(--muted); cursor:pointer; padding:7px 13px; border-radius:7px; transition:.12s;}
.seg button:hover{color:var(--cream)}
.seg button.on{background:var(--brass); color:#160f08; font-weight:700}

/* ===== BOUTON PLAY ===== */
.play-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:rgba(217,168,73,.12); border:1px solid var(--brass-dim);
  color:var(--brass); cursor:pointer; font-size:12px;
  transition:.12s; flex-shrink:0; vertical-align:middle;
  font-family:"Space Mono",monospace; font-weight:700;
}
.play-btn:hover{background:rgba(217,168,73,.25); transform:scale(1.08)}
.play-btn.playing{background:var(--brass); color:#160f08}

/* ===== ACCESSIBILITÉ ===== */
:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-radius:4px}

/* ===== FOOTER ===== */
.site-footer{border-top:1px solid var(--line);padding:22px clamp(16px,4vw,40px) 28px;max-width:1180px;margin:0 auto;font-family:"Space Mono",monospace;font-size:11px;color:var(--muted-2)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-copy{letter-spacing:.04em}
.footer-links{display:flex;gap:14px;align-items:center}
.footer-links a{color:var(--muted);text-decoration:none;transition:color .12s}
.footer-links a:hover{color:var(--cream)}
.footer-sep{opacity:.35}
.footer-ml-btn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:var(--muted);letter-spacing:.04em;padding:0;transition:color .12s}
.footer-ml-btn:hover{color:var(--cream)}
.footer-ml{display:none;margin-top:14px;padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:11px;color:var(--muted);line-height:1.8}
.footer-ml.open{display:block}

/* ===== SCROLL-TO-TOP ===== */
#scroll-to-top{
  position:fixed;bottom:24px;right:24px;width:40px;height:40px;
  border-radius:50%;background:var(--brass);color:#1a1008;
  border:none;font-size:18px;font-weight:700;line-height:40px;text-align:center;
  cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .2s,background .12s;
  z-index:9999;
}
#scroll-to-top:hover{background:#e8b855;}

/* ===== RESPONSIVE NAVIGATION ===== */
@media(max-width:760px){
  .eyebrow{flex-wrap:wrap;height:auto;gap:6px;padding-bottom:4px}
  .site-name{font-size:17px}
  .header-tools{width:100%}
  .site-nav{order:9;width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .piano-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
