/* Pages liste : répertoire (artistes) et artiste (chansons). */
.wrap{max-width:860px;padding-top:14px}

.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0 20px}
.bar .home-link{font-size:18px;color:var(--muted)}
.bar .home-link:hover{color:var(--amber);text-decoration:none}
.bar h1{font-size:24px;margin:0}
.bar .sub{color:var(--muted);font-size:14px;margin:0}
.bar .actions{margin-left:auto;display:flex;gap:8px}

.crumb{color:var(--faint);font-size:13px;margin:0 0 10px}
.crumb a{color:var(--muted)}

/* liste d'items cliquables */
.list{display:flex;flex-direction:column;gap:10px}
.item{
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;text-decoration:none;color:var(--text);
  transition:border-color .15s, transform .15s;
}
.item:hover{border-color:var(--amber);transform:translateX(2px);text-decoration:none}
.item .it-main{flex:1;min-width:0}
.item .it-title{font-family:'Fraunces',serif;font-weight:500;font-size:18px}
.item .it-meta{color:var(--muted);font-size:13px;margin-top:2px}
.item .keytag{
  font-size:12.5px;font-weight:500;color:var(--amber);
  background:rgba(240,163,43,.12);border:1px solid rgba(240,163,43,.4);
  border-radius:8px;padding:2px 9px;white-space:nowrap;
}
.item .it-actions{display:flex;gap:6px}
/* boutons d'action dans un item : empêchent la navigation du lien parent */
.item .icon-btn{
  background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  color:var(--muted);font-size:13px;padding:4px 9px;cursor:pointer;
}
.item .icon-btn:hover{opacity:.85}
.item .icon-btn.danger{border-color:rgba(232,100,60,.5);color:var(--coral)}

.empty{color:var(--muted);font-size:14px;padding:20px 0}

/* éditeur de chanson : grand textarea + aperçu */
.modal.wide{max-width:720px}
.modal textarea.lyrics-input{min-height:200px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.5}
.editor-hint{font-size:12px;color:var(--faint);margin:-6px 0 10px}
.prog-rows .step-row .s-roman{width:130px}
.prog-rows .step-row .s-resolved{min-width:60px;font-size:13.5px;font-weight:600;color:var(--faint)}

/* éditeur de progression groupé par section */
.prog-group-ed{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--panel2)}
.prog-group-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.prog-group-head .pg-name{flex:1;background:var(--panel);border:1px solid var(--border);color:var(--text);font-family:'Outfit',sans-serif;font-size:13.5px;border-radius:8px;padding:5px 9px}
.prog-group-ed .add-deg{margin-top:4px;padding:2px 9px;font-size:12px}

/* éditeur d'accords WYSIWYG : clic sur une lettre pour poser un accord */
.chordpane{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-height:70px}
.chordpane .hint{color:var(--faint);font-size:12.5px}
.chordpane .ed-sec{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:12px 0 4px}
.chordpane .ed-sec:first-child{margin-top:0}
.ed-line{position:relative;padding-top:1.55em;line-height:1.15;white-space:pre;font-size:16px;margin:0 0 2px}
.ed-line .ch{cursor:pointer;border-radius:2px}
.ed-line .ch:hover{background:rgba(240,163,43,.18)}
.ed-line .ch.end{color:var(--faint)}
.ed-line .crd-chip{position:absolute;top:0;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;font-family:'Outfit',sans-serif}
.ed-line .crd-chip:hover{text-decoration:underline}
.ed-line .chord-input{position:absolute;top:-2px;width:66px;font-size:12.5px;padding:1px 4px;background:var(--panel);border:1px solid var(--amber);border-radius:5px;color:var(--text);font-family:'Outfit',sans-serif}

/* champ vidéo + bouton de recherche */
.yt-row{display:flex;gap:8px}
.yt-row input{flex:1}
.yt-row .btn{white-space:nowrap}