/* Progressions harmoniques. */

/* barre fine collante : titre + sélecteur de tonique + actions + légende */
.bar{
  position:sticky;top:0;z-index:5;
  background:rgba(19,17,13,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:10px 16px;margin:0 -16px 18px;
}
.bar h1{font-size:18px;margin:0;white-space:nowrap}
.home-link{font-size:18px;color:var(--muted)}
.home-link:hover{color:var(--amber);text-decoration:none}
.keys{display:flex;flex-wrap:wrap;gap:5px}
.keys .btn{padding:3px 9px}
.actions{display:flex;gap:8px}
.bar .legend{margin-left:auto}

/* sections et cartes de progression */
section{margin:6px 0 26px}
section h2{
  font-size:20px;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 14px 10px;position:relative}
.card h3{font-family:'Fraunces',serif;font-weight:500;font-size:16px;margin:0 0 10px;display:flex;align-items:baseline;gap:8px}
.card h3 small{font-family:'Outfit',sans-serif;font-weight:300;font-size:12px;color:var(--faint)}
.spark{width:100%;height:34px;display:block;margin:2px 0 6px}
.note{font-size:13px;color:var(--muted);margin:0;line-height:1.45}

footer{color:var(--faint);font-size:13px;text-align:center;margin-top:34px}

/* lignes d'étapes dans le formulaire d'ajout */
.steps-head{font-size:12.5px;color:var(--faint);margin:4px 0 6px}
.step-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.step-row input,.step-row select{padding:5px 7px;font-size:13px}
.step-row .s-label{width:64px}
.step-row .s-semi{width:120px}
.step-row .s-qual{width:64px}
.step-row .rm{background:none;border:none;color:var(--coral);cursor:pointer;font-size:16px;padding:0 4px}