:root {
  color-scheme:dark;
  --bg:#0d0d0d; --surface:#181818; --border:#757575;
  --accent:#e8ff47; --accent-hover:#d4eb30; --accent-ink:#20211d;
  --accent-text:#e8ff47; --focus:#e8ff47; --text:#efefef; --muted:#b0b0b0;
  --surface-hover:#242424; --selected:#2a2e00; --hint:#222410;
  --known-hover:#1d361d; --unknown-hover:#1d1d36;
  --warning-bg:#2a2415; --warning-hover:#3a3020; --warning-border:#a68d57; --warning-text:#ffcc66;
  --error-bg:#2a1515; --error-border:#bd7777; --error-text:#ffb3b3;
  --disabled-bg:#2a2a2a; --disabled-text:#b0b0b0;
  --overlay:rgba(0,0,0,.8); --status-on:#7ddd7d; --preview-ink:#101010;
  --known:#172617; --known-b:#2a4f2a; --known-text:#90ee90;
  --unknown:#171726; --unknown-b:#2a2a50; --unknown-text:#9999ee;
  --skip-b:#4f2a2a; --skip-text:#ee9090;
  --radius:12px;

  /* échelle typographique — base 16px (v36) */
  --fs-xs:.875rem;     /* 14px minimum pour les petits textes. */
  --fs-sm:.875rem;     /* 14px — texte secondaire, paragraphes d'aide */
  --fs-base:1rem;      /* 16px — corps, noms d'artistes, inputs */
  --fs-md:1.0625rem;   /* 17px — labels de checklist (liste tactile) */
  --fs-lg:1.375rem;    /* 22px — titres de colonne */
  --fs-xl:1.75rem;     /* 28px — titres d'écran */
  --lh-tight:1.25; --lh-body:1.5; --lh-loose:1.6;
}

/* V49 : palette claire neutre, sans dominante ivoire. Les accents de texte
   et de fond sont distincts : le citron reste réservé aux fonds en clair. */
html[data-theme="light"] {
  color-scheme:light;
  --bg:#f7f8fa; --surface:#ffffff; --surface-hover:#eef0f4; --border:#737982;
  --text:#20211d; --muted:#555b64; --accent-text:#454f00; --focus:#535d00;
  --selected:#f0f5d2; --hint:#f4f6e8;
  --known:#edf7ef; --known-b:#cde8d2; --known-text:#225d33; --known-hover:#e1f0e5;
  --unknown:#f3f0fc; --unknown-b:#e3dcf5; --unknown-text:#553396; --unknown-hover:#eae3f8;
  --skip-b:#f8dddd; --skip-text:#9f2929;
  --warning-bg:#fff5e1; --warning-hover:#ffedcc; --warning-border:#8a6624; --warning-text:#775000;
  --error-bg:#fff0f0; --error-border:#ad4242; --error-text:#9b2323;
  --disabled-bg:#e9ebee; --disabled-text:#60656c;
  --overlay:rgba(15,18,24,.65); --status-on:#226b35; --preview-ink:#ffffff;
}

/* Desktop : viewport plus large + distance de lecture plus grande.
   On monte la racine plutôt que de dupliquer les tokens — toute l'échelle
   suit proportionnellement, les dimensions en px (cibles tactiles) non. */
@media (min-width:768px){ html{font-size:106.25%} } /* 17px */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;-webkit-text-size-adjust:100%;}

/* ── Header ── */
header{
  padding:.55rem 1rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;position:sticky;top:0;
  background:var(--bg);z-index:100;min-height:0;
}
header h1{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;min-width:0;font-family:'Bebas Neue',sans-serif;font-size:clamp(1.35rem,4.5vw,2rem);letter-spacing:.05em;color:var(--accent-text);line-height:1;white-space:nowrap;}
.version{background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:var(--fs-xs);padding:.12rem .4rem;border-radius:20px;font-family:monospace;margin-left:auto;}
header h1 .version{margin-left:0;font-size:var(--fs-xs);letter-spacing:0;white-space:nowrap;}
.deezer-status{
  display:flex;align-items:center;gap:.4rem;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:.25rem .6rem;
  font-family:inherit;color:inherit;text-align:left;font-size:var(--fs-sm);cursor:pointer;transition:border-color .15s;white-space:nowrap;
}
.deezer-status:hover{border-color:var(--focus);}
.deezer-status:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.deezer-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);}
.deezer-dot.on{background:var(--status-on);}

/* v37 : deux lignes sur mobile, sans masquer les commandes ni la version. */
header .deezer-status{min-width:0;max-width:100%;}
#deezer-label{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.deezer-dot{flex-shrink:0;}
@media(max-width:640px){
  header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem .5rem;position:static;}
  header h1{grid-column:1;grid-row:1;white-space:normal;overflow-wrap:anywhere;}
  header .version{margin-left:0;}
  header .deezer-status{grid-column:1;grid-row:2;min-height:44px;}
  header .lib-status{grid-column:2;grid-row:2;min-width:44px;justify-content:center;}
}

.container{max-width:820px;margin:0 auto;padding:1.25rem;}

/* ── Setup Deezer ── */
#step-setup{display:none;}
.setup-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem;max-width:480px;margin:3rem auto;text-align:center;
}
.setup-card .icon{font-size:3rem;margin-bottom:1rem;}
.setup-card h2{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-xl);letter-spacing:.05em;margin-bottom:.5rem;}
.setup-card p{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-loose);margin-bottom:1.5rem;}
.setup-hint{
  background:var(--hint);border:1px solid var(--border);border-radius:6px;
  padding:.75rem 1rem;font-size:var(--fs-sm);color:var(--muted);
  margin-bottom:1.5rem;text-align:left;line-height:1.7;
}
.setup-hint code{color:var(--accent-text);background:var(--selected);padding:.1rem .3rem;border-radius:3px;font-size:var(--fs-sm);}
.input-row{display:flex;gap:.5rem;margin-bottom:.75rem;}
.input-row input{
  flex:1;min-width:0;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:.7rem 1rem;font-size:var(--fs-base);font-family:'DM Sans',sans-serif;
  outline:none;transition:border-color .15s;
}
.input-row input:focus{border-color:var(--focus);}
.btn-skip{background:none;border:none;color:var(--muted);font-size:var(--fs-sm);cursor:pointer;text-decoration:underline;margin-top:.25rem;}
.btn-skip:hover{color:var(--text);}

/* ── Upload ── */
#step-upload{display:none;}
.upload-zone{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:2.5rem 1.5rem;text-align:center;
  transition:border-color .2s;background:var(--surface);
}
.upload-zone:hover{border-color:var(--focus);}
.upload-zone .icon{font-size:2.5rem;display:block;margin-bottom:.75rem;}
.upload-zone h2{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-xl);letter-spacing:.05em;margin-bottom:.3rem;}
.upload-zone p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:1.25rem;}
.upload-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.upload-btn{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.1rem 2rem;border-radius:var(--radius);cursor:pointer;
  border:1px solid var(--border);background:var(--surface-hover);
  font-size:var(--fs-base);color:var(--text);transition:all .15s;
}
.upload-btn span:first-child{font-size:2.2rem;}
.upload-btn:hover{border-color:var(--focus);color:var(--accent-text);background:var(--hint);}
.upload-btn input{display:none;}

/* ── Loader ── */
#loader{display:none;text-align:center;padding:4rem 2rem;}
.loader-bar{width:140px;height:3px;background:var(--border);margin:.75rem auto;border-radius:2px;overflow:hidden;}
.loader-bar::after{content:'';display:block;height:100%;width:35%;background:var(--accent);animation:slide 1.1s ease-in-out infinite;}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(380%)}}
#loader-text{color:var(--muted);font-size:var(--fs-sm);margin-top:.4rem;}

/* ── Review ── */
#step-review{display:none;}

/* Layout 2 col desktop, 1 col mobile */
.review-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  grid-template-rows:auto;
  gap:1.25rem;
  align-items:start;
}
@media(max-width:640px){
  .review-layout{grid-template-columns:minmax(0,1fr);}
  .setup-card{padding:1.25rem;margin:1.5rem auto;}
}

/* Affiche */
.col-affiche .section-title{margin-bottom:.5rem;}
.affiche-preview{
  width:100%;border-radius:6px;border:1px solid var(--border);
  display:block;object-fit:contain;
  max-height:320px;
}
@media(max-width:640px){
  .affiche-preview{max-height:200px;object-fit:cover;object-position:top;}
}

/* Colonne checklist */
.col-checklist{
  display:flex;flex-direction:column;
  /* Sur mobile : hauteur limitée pour que le bouton reste visible */
}

/* Header sticky de la liste */
.checklist-header{
  position:sticky;top:57px;/* sous le header app */
  background:var(--bg);z-index:10;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.5rem;
}
.checklist-meta{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.4rem 0;
}
/* Le panneau possède déjà sa propre liste défilante ; pas d'offset fixe
   sous un en-tête mobile dont la hauteur dépend du texte et du zoom. */
@media(max-width:640px){.checklist-header{position:static;}}
.checklist-count{
  font-family:'Bebas Neue',sans-serif;font-size:var(--fs-base);letter-spacing:.05em;
  color:var(--muted);flex:1;
}
.checklist-count span{color:var(--accent-text);}
.btn-micro{
  background:none;border:1px solid var(--border);color:var(--muted);
  font-size:var(--fs-xs);padding:.2rem .55rem;border-radius:20px;cursor:pointer;
  transition:all .12s;white-space:nowrap;
}
.btn-micro:hover{border-color:var(--focus);color:var(--accent-text);}

/* A3 — avertissement détection automatique (validation + résultats) */
.detect-note{
  font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--muted);
  margin:.35rem 0 .6rem;
}

/* Liste scrollable */
.checklist-scroll{
  overflow-y:auto;
  max-height:50vh;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-text) var(--surface);
  padding-right:2px;/* évite que scrollbar coupe le contenu */
}
.checklist-scroll::-webkit-scrollbar{width:5px;}
.checklist-scroll::-webkit-scrollbar-track{background:var(--border);border-radius:3px;}
.checklist-scroll::-webkit-scrollbar-thumb{background:var(--accent-text);border-radius:3px;}

/* Items */
.artist-check{
  display:flex;align-items:center;gap:.75rem;
  padding:.8rem 1rem;border-radius:6px;
  border:1px solid transparent;
  cursor:pointer;transition:all .12s;
  user-select:none;min-height:52px;
  margin-bottom:.3rem;
  background:var(--surface);
}
.artist-check:hover{border-color:var(--border);background:var(--surface-hover);}
.artist-check.checked{background:var(--selected);border-color:var(--focus);}
.check-box{
  width:22px;height:22px;border-radius:5px;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:var(--fs-sm);transition:all .12s;
}
.artist-check.checked .check-box{background:var(--accent);border-color:var(--focus);color:var(--accent-ink);}
.check-label{min-width:0;overflow-wrap:anywhere;font-size:var(--fs-md);font-weight:500;line-height:1.3;}
.artist-check.checked .check-label{color:var(--accent-text);}

/* Footer action */
.review-action{
  margin-top:1rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
}

/* Sur mobile : footer sticky en bas */
@media(max-width:640px){
  .review-action{
    position:sticky;bottom:0;
    background:var(--bg);
    border-top:1px solid var(--border);
    padding:.75rem 0;
    z-index:10;
    margin-top:.75rem;
  }
}

/* ── Boutons ── */
.btn{padding:.7rem 1.4rem;border:none;border-radius:4px;font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.08em;cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-primary:disabled{background:var(--disabled-bg);color:var(--disabled-text);cursor:not-allowed;border:1px solid var(--border);}
.btn-ghost{background:transparent;border:1px solid var(--disabled-text);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:var(--fs-sm);padding:.55rem .9rem;border-radius:4px;cursor:pointer;transition:all .15s;}
.btn-ghost:hover{border-color:var(--focus);color:var(--accent-text);}

/* Service d'écoute préféré (modal) */
.listen-service-toggle{display:flex;gap:.5rem;}
.listen-service-btn{
  flex:1;padding:.6rem;border:1px solid var(--disabled-text);border-radius:4px;
  background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;
  font-size:var(--fs-sm);cursor:pointer;transition:all .15s;
}
.listen-service-btn:hover{border-color:var(--focus);color:var(--accent-text);}
.listen-service-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--focus);font-weight:500;}

/* Source de bibliothèque (Deezer / Last.fm — setup + modal) */
.source-toggle{display:flex;gap:.5rem;}
.source-toggle-btn{
  flex:1;padding:.6rem;border:1px solid var(--disabled-text);border-radius:4px;
  background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;
  font-size:var(--fs-sm);cursor:pointer;transition:all .15s;
}
.source-toggle-btn:hover{border-color:var(--focus);color:var(--accent-text);}
.source-toggle-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--focus);font-weight:500;}

/* Hint "aucune sélection" */
.hint-select{
  color:var(--muted);font-size:var(--fs-sm);text-align:center;
  padding:1rem;border:1px dashed var(--border);border-radius:6px;
  margin-top:.5rem;
}

/* ── Titres section ── */
.section-title{
  font-family:'Bebas Neue',sans-serif;font-size:var(--fs-base);letter-spacing:.12em;
  color:var(--muted);margin-bottom:.6rem;
  display:flex;align-items:center;gap:.4rem;
  text-transform:uppercase;
}
.section-title::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;display:inline-block;}

/* ── Résultats ── */
#step-results{display:none;}
.results-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.results-header h2{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-xl);letter-spacing:.05em;}
.badge{padding:.2rem .5rem;border-radius:2px;font-size:var(--fs-xs);font-weight:500;}
.badge-known{background:var(--known-b);color:var(--known-text);}
.badge-unknown{background:var(--unknown-b);color:var(--unknown-text);}
.results-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;}
@media(max-width:560px){.results-grid{grid-template-columns:minmax(0,1fr);}}
.col-title{font-family:'DM Sans',sans-serif;font-size:var(--fs-lg);font-weight:700;line-height:var(--lh-tight);margin-bottom:.8rem;color:var(--text);}
.results-header .badge{font-size:var(--fs-base);font-weight:600;}
.results-actions{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap;}
.results-actions .btn-ghost,.feedback-link{min-height:44px;}
.results-actions .btn-ghost:focus-visible,.feedback-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.artist-card{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding:.65rem;border-radius:4px;margin-bottom:.35rem;text-decoration:none;color:var(--text);transition:all .12s;border:1px solid transparent;}
.known-card{background:var(--known);border-color:var(--known-b);}
.known-card:hover{background:var(--known-hover);}
.unknown-card{background:var(--unknown);border-color:var(--unknown-b);}
.unknown-card:hover{background:var(--unknown-hover);}
.artist-pic{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--border);}
.artist-pic-ph{width:44px;height:44px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.artist-info{flex:1;min-width:0;}
.artist-name{font-weight:500;font-size:var(--fs-base);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.artist-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:.1rem;}
.arrow{color:var(--muted);font-size:var(--fs-sm);flex-shrink:0;}
.known-card .arrow{color:var(--known-text);}
.unknown-card .arrow{color:var(--unknown-text);}
.empty-state{color:var(--muted);font-size:var(--fs-sm);padding:.75rem;text-align:center;border:1px dashed var(--border);border-radius:4px;}

.error-msg{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text);padding:.7rem .9rem;border-radius:4px;margin-top:.75rem;display:none;font-size:var(--fs-sm);}

/* ── T2 : match incertain ── */
.uncertain-badge{
  font-size:var(--fs-xs);padding:.1rem .4rem;border-radius:20px;
  background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning-text);
  white-space:nowrap;cursor:pointer;transition:all .15s;
  flex-shrink:0;
}
.uncertain-badge:hover{background:var(--warning-hover);border-color:var(--focus);color:var(--accent-text);}

/* ── Lecteur preview 30s ── */
.play-btn{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--unknown-text);background:transparent;
  color:var(--unknown-text);cursor:pointer;font-size:var(--fs-sm);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.play-btn:hover{background:var(--unknown-text);color:var(--preview-ink);}
.play-btn.playing{background:var(--accent);border-color:var(--focus);color:var(--accent-ink);animation:pulse 1.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* T4 — extrait indisponible (lien Deezer expiré) : échec explicite plutôt que silencieux */
.play-btn.failed{background:var(--skip-b);border-color:var(--skip-text);color:var(--skip-text);animation:none;}

/* ── Historique des scans ── */
.history-section{margin-top:1.5rem;}
.history-item{
  display:flex;align-items:center;gap:.7rem;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:.55rem .7rem;margin-bottom:.4rem;cursor:pointer;
  transition:border-color .15s;
}
.history-item:hover{border-color:var(--focus);}
.history-thumb{
  width:46px;height:46px;border-radius:5px;object-fit:cover;
  flex-shrink:0;border:1px solid var(--border);
}
.history-thumb-ph{display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--surface-hover);}
.history-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;}
.history-date{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;}
.history-info{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-badges{display:flex;gap:.3rem;flex-shrink:0;}
.history-badges .badge{font-size:var(--fs-xs);}
.share-btn{
  background:none;border:1px solid var(--border);border-radius:50%;
  width:34px;height:34px;cursor:pointer;font-size:var(--fs-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.share-btn:hover{border-color:var(--focus);}
.history-clear{margin-top:.5rem;}

/* ── Modal changement Deezer ── */
#modal-deezer{
  display:none;position:fixed;inset:0;background:var(--overlay);
  z-index:200;align-items:center;justify-content:center;padding:1rem;
}
#modal-deezer.open{display:flex;}
.modal-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem;max-width:420px;width:100%;max-height:calc(100dvh - 2rem);overflow-y:auto;
}
.modal-card h3{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-lg);letter-spacing:.05em;margin-bottom:.4rem;}
.modal-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.6;margin-bottom:1rem;}

/* ── C4 : favoris (v34 — un seul statut, voir BACKLOG.md) ── */

/* Bouton header "Mes artistes" */
.lib-status{position:relative;}
.lib-status .lib-badge{
  position:absolute;top:-6px;right:-6px;background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-xs);font-weight:700;min-width:15px;height:15px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 .2rem;line-height:1;
}

/* Bouton favori sur chaque carte résultat — 44×44px de cible tactile
   (recommandation d'accessibilité mobile). Un seul bouton reste : il tient
   en ligne avec le reste de la carte, pas besoin d'une rangée dédiée. */
.fav-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;
  transition:all .12s;line-height:1;opacity:1;flex-shrink:0;
}
.fav-btn:hover{border-color:var(--focus);opacity:1;}
.fav-btn.active{opacity:1;background:var(--selected);border-color:var(--focus);}
/* V50 : la forme pleine indique la sélection, indépendamment de la couleur. */
.fav-icon{display:block;width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;}
.fav-btn .fav-icon,.lib-status .fav-icon{color:var(--muted);}
.fav-btn.active .fav-icon{fill:var(--accent);stroke:var(--accent-ink);}

/* Bandeau invitation à connecter une bibliothèque (visiteur sans source) */
.invite-banner{
  display:none;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:6px;padding:.75rem 1rem;margin-bottom:1.25rem;
}
.invite-banner p{font-size:var(--fs-sm);color:var(--text);line-height:1.5;flex:1;min-width:200px;margin:0;}
.invite-banner strong{color:var(--text);}
.btn-connect{
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:6px;
  padding:.5rem .9rem;font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;
  font-family:'DM Sans',sans-serif;
}
.btn-connect:hover{filter:brightness(1.08);}

/* ── Écran "Mes artistes" (v34 : simple liste de favoris) ── */
#step-library{display:none;}
.lib-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.lib-header h2{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-xl);letter-spacing:.05em;}
.lib-count{font-size:var(--fs-sm);color:var(--muted);}
.lib-list .artist-card{background:var(--surface);border-color:var(--border);}

/* Contact accessible depuis tous les écrans, même si un scan échoue. */
.app-footer{max-width:820px;margin:1.5rem auto 0;padding:1.25rem;text-align:center;border-top:1px solid var(--border);}
.feedback-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.app-footer p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--muted);margin-top:.6rem;}
.feedback-address{overflow-wrap:anywhere;user-select:text;}


/* v39 : sources de comparaison et import Bandcamp */
.source-toggle { flex-wrap: wrap; }
.source-toggle-btn { min-width: 0; min-height: 44px; }
.comparison-panel { min-width: 0; margin: 1rem 0; padding: .85rem; border: 1px solid var(--border); border-radius: 12px; }
.comparison-panel legend { padding: 0 .35rem; font-weight: 700; }
.comparison-source { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.comparison-source label { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; min-height: 44px; cursor: pointer; }
.comparison-source label > span { min-width: 0; overflow-wrap: anywhere; }
.comparison-source input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent-text); }
.comparison-source button { flex-shrink: 0; min-height: 44px; padding: .4rem .5rem; }
.source-detail { display: block; font-size:var(--fs-sm); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.enrichment-label { display: block; margin: 1rem 0 .4rem; font-size:var(--fs-sm); }
.comparison-panel select { width: 100%; min-width: 0; min-height: 44px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .4rem; font: inherit; font-size:var(--fs-sm); }
.bandcamp-form label { display: block; margin: .6rem 0 .3rem; font-size:var(--fs-sm); }
.bandcamp-form input { display: block; width: 100%; min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); font: inherit; }
.bandcamp-form .btn { margin-top: .75rem; width: 100%; white-space: normal; }
.source-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.source-badge { font-size:var(--fs-sm); line-height: 1.5; border: 1px solid var(--border); border-radius: 5px; padding: .1rem .35rem; color: var(--text); }
.source-uncertain { color: var(--warning-text); border-color: var(--warning-border); }
#unresolved-section { margin-top: 1.2rem; }
#unresolved-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .5rem; }
#btn-search { white-space: normal; line-height: 1.35; }
.comparison-panel :focus-visible, .bandcamp-form :focus-visible, .artist-check:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 360px) { .comparison-source { flex-wrap: wrap; } .comparison-source label { flex-basis: 100%; } }


/* v40 : fermeture persistante, confirmations et partage de scans */
.modal-topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .75rem; background: var(--surface); padding: .4rem 0; margin-bottom: .65rem; }
.modal-topbar h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; margin: 0; }
.modal-close { flex-shrink: 0; min-width: 44px; min-height: 44px; font-size: 1.7rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.action-dialog { width: min(520px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; margin: auto; overflow-y: auto; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.action-dialog::backdrop { background: var(--overlay); }
.action-dialog p { font-size: .9rem; line-height: 1.5; margin: .75rem 0; }
.action-dialog h3 { margin-top: .5rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0; }
.action-dialog button { min-height: 44px; white-space: normal; }
.action-dialog input { width: 100%; min-width: 0; padding: .65rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); font-size: 1rem; }
.danger-action { color: var(--error-text); border: 1px solid var(--error-border); }
.shared-link-row { border-top: 1px solid var(--border); padding: .75rem 0; overflow-wrap: anywhere; }
.share-preview-names { max-height: 9rem; overflow-y: auto; overflow-wrap: anywhere; }
.shared-names { padding-left: 1.3rem; margin: 1rem 0; line-height: 1.8; overflow-wrap: anywhere; }
#step-shared h2, #step-shared h3 { margin: 1rem 0; }
#step-shared .btn { white-space: normal; margin-bottom: 1rem; }
#shared-image { width: auto; max-width: 100%; max-height: 70vh; object-fit: contain; }
#share-status, #shared-status { overflow-wrap: anywhere; }
.action-dialog :focus-visible, .modal-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.shared-links-settings { margin-bottom: 1.5rem; }


/* v41 : une destination accessible par correspondance, sans lien global */
.source-match-link { display: flex; flex-direction: column; justify-content: center; min-height: 44px; max-width: 100%; padding: .45rem .6rem; text-decoration: none; overflow-wrap: anywhere; }
.source-match-link:hover { background: var(--surface); border-color:var(--focus); }
.source-match-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.matched-source-name { font-size:var(--fs-sm); line-height: 1.45; margin-top: .15rem; }
.matched-card { align-items: flex-start; }

.coverage-panel { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.coverage-panel summary { min-height: 44px; cursor: pointer; padding: .5rem 0; font-size:var(--fs-sm); }
.coverage-panel textarea { width: 100%; min-width: 0; padding: .5rem; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size:var(--fs-sm); }
.coverage-report { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow-y: auto; font: inherit; font-size:var(--fs-sm); line-height: 1.5; padding: .6rem; background: var(--bg); margin: .75rem 0; }
.coverage-panel :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* v42 : réglages identifiables, navigation partagée et écoute publique */
header .sources-settings { border-radius:8px; min-height:44px; padding:.4rem .65rem; justify-self:start; white-space:normal; font-size:var(--fs-sm); }
.sources-count { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:1.6rem; min-height:1.6rem; padding:.1rem .3rem; border-radius:4px; background:var(--border); font-weight:700; }
.shared-navigation { flex-basis:100%; grid-column:1 / -1; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:.5rem; }
.shared-navigation[hidden], .shared-navigation [hidden] { display:none; }
.shared-navigation a { margin-left:auto; }
.shared-navigation .btn-ghost { min-height:44px; display:inline-flex; align-items:center; white-space:normal; text-decoration:none; padding:.4rem .6rem; }
#shared-nav-label { font-size:var(--fs-sm); }
#shared-title { scroll-margin-top:12rem; }
.shared-intro { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin:1rem 0; line-height:1.5; }
.shared-intro p { flex:1 1 260px; }
.shared-intro button { white-space:normal; min-height:44px; }
.shared-poster summary { cursor:pointer; min-height:44px; padding:.65rem 0; }
.shared-listening-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:.75rem; margin:1rem 0; }
.shared-artist-card { min-width:0; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow-wrap:anywhere; }
.shared-artist-card h4 { font-size:var(--fs-md); margin-bottom:.4rem; }
.shared-artist-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.shared-artist-actions a { display:inline-flex; align-items:center; min-height:44px; white-space:normal; text-decoration:none; }
.shared-listen-button { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; border:1px solid var(--focus); border-radius:8px; padding:.25rem .65rem; font:inherit; font-size:var(--fs-sm); background:var(--bg); color:var(--text); cursor:pointer; }
.shared-listen-button .play-btn { display:inline-flex; align-items:center; justify-content:center; margin:0; pointer-events:none; }
.shared-navigation :focus-visible, .shared-artist-card :focus-visible, .shared-poster :focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
#share-dialog[open] { display:flex; flex-direction:column; overflow:hidden; padding:0; }
#share-dialog .modal-topbar { position:static; flex-shrink:0; margin:0; padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.share-dialog-body { overflow-y:auto; min-height:0; padding:0 1rem 1rem; overscroll-behavior:contain; }
.share-dialog-footer { flex-shrink:0; padding:.6rem 1rem; border-top:1px solid var(--border); }

/* La navigation du partage augmente la hauteur du header, sans offset fixe. */
.shared-review .checklist-header { position:static; }
.shared-navigation .btn-ghost[hidden] { display:none; }

/* v43: separate archive, personal comparison and navigable screens. */
.app-navigation { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.app-navigation[hidden], .app-navigation button[hidden] { display:none; }
.app-navigation button, .resume-shared { min-height:44px; }
.resume-shared { display:inline-flex; align-items:center; margin-bottom:1rem; text-decoration:none; white-space:normal; }
.resume-shared[hidden] { display:none; }
#comparison-help, #results-record-note { margin:.6rem 0 1rem; line-height:1.5; }
.comparison-source > label { cursor:default; }
.comparison-source > label:has(input) { cursor:pointer; }
.comparison-source > button { white-space:normal; min-height:44px; }
.app-navigation :focus-visible, .resume-shared:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }


/* v44: a single navigation region, and a compact optional listening report. */
#library-return[hidden] { display:none; }
.preview-diagnostic { margin:.75rem 0 1rem; border:1px solid var(--border); border-radius:var(--radius); padding:.5rem .75rem; }
.preview-diagnostic[hidden] { display:none; }
.preview-diagnostic summary { cursor:pointer; min-height:44px; display:list-item; padding:.65rem 0; font-size:var(--fs-sm); }
.preview-diagnostic pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:20rem; overflow-y:auto; font:inherit; font-size:var(--fs-sm); line-height:1.5; margin:.5rem 0; }
.preview-diagnostic button { min-height:44px; }
.preview-diagnostic :focus-visible { outline:2px solid var(--focus); outline-offset:3px; }

/* v45: visible availability independent from the optional technical report. */
.preview-overview { padding:.75rem; margin:.75rem 0; border-left:3px solid var(--accent); background:var(--surface); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.preview-state { display:flex; flex-direction:column; gap:.25rem; margin:.6rem 0; font-size:var(--fs-sm); overflow-wrap:anywhere; }
.preview-state strong { color:var(--text); }
.preview-state span { color:var(--muted); }
.preview-state.unavailable strong, .proposal-warning { color:var(--warning-text); }
.preview-state.available strong { color:var(--accent-text); }
.shared-artist-actions { margin-top:.6rem; }

/* v47 : même affordance pour chaque destination, statut séparé de l’action. */
.source-match-link, .source-match-link.source-uncertain { color: var(--text); border: 1px solid var(--border); background: var(--surface); }
.source-match-action { color:var(--accent-text); font-weight: 600; }
.source-match-status { font-size:var(--fs-sm); color: var(--muted); }
.source-match-status.source-uncertain { color: var(--warning-text); }
.discovery-group { min-width:0; margin-bottom:.65rem; background:var(--unknown); border:1px solid var(--unknown-b); border-radius:var(--radius); }
.discovery-group > .artist-card { border:0; margin-bottom:0; background:transparent; }
.deezer-candidates { margin:.1rem .65rem 0; padding:.25rem 0 .65rem; border:0; border-top:1px solid var(--border); border-radius:0; background:transparent; color:var(--text); min-width:0; }
.shared-artist-card > .deezer-candidates { margin:.75rem 0 0; padding-bottom:0; }
.deezer-candidates summary { cursor: pointer; min-height: 44px; padding: .6rem 0; font-size:var(--fs-sm); color:var(--accent-text); overflow-wrap: anywhere; }
.deezer-candidates :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.deezer-candidate { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--border); }
.candidate-picture { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.candidate-info { flex: 1 1 100px; min-width: 0; overflow-wrap: anywhere; font-size:var(--fs-sm); }
.candidate-link { display: block; color: var(--text); min-height: 44px; padding: .65rem 0; font-size:var(--fs-sm); }
.candidate-choose { min-height: 44px; white-space: normal; }
.candidate-choose:disabled { opacity: .6; cursor: wait; }
.candidate-feedback { font-size:var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.candidate-feedback:empty { display: none; }

#matching-review-section { margin-top: 1.2rem; }
#matching-review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .5rem; }
.review-card { background: var(--warning-bg); border: 1px solid var(--warning-border); }

/* V49 : identité commune et commandes lisibles dans les deux thèmes. */
h1, h2, h3, h4, h5, h6, legend, label, .artist-name { color:var(--text); }
header h1 { color:var(--accent-text); letter-spacing:.035em; }
.brand-tagline { max-width:42rem; margin:0 0 1.25rem; color:var(--text); font-size:clamp(1rem,2.8vw,1.2rem); line-height:1.5; font-weight:500; overflow-wrap:anywhere; }
button, input, select, textarea { font-family:inherit; }
button { color:var(--text); }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:1; }
button, .btn, .btn-micro, .btn-skip, .share-btn, .play-btn { min-height:44px; }
.share-btn, .play-btn { width:44px; height:44px; }
.share-btn { color:var(--text); }
.btn-connect { border:1px solid var(--focus); }
.btn-primary { border:1px solid var(--focus); }
.btn-primary, .btn-connect, .source-toggle-btn.active, .listen-service-btn.active, .play-btn.playing { color:var(--accent-ink); }
.btn-primary:disabled { color:var(--disabled-text); }
.btn, .btn-ghost, .listen-service-btn { white-space:normal; overflow-wrap:anywhere; }
.listen-service-toggle, .input-row { flex-wrap:wrap; }
.input-row input { flex-basis:180px; }
.listen-service-btn { min-width:100px; }
.artist-card, .shared-artist-card { border-radius:var(--radius); }
.history-item { flex-wrap:wrap; }
.history-body { flex-basis:140px; }
.history-info { white-space:normal; overflow-wrap:anywhere; }
.history-date { white-space:normal; }
.history-badges { flex-wrap:wrap; }
.invite-banner p { min-width:0; flex-basis:200px; }
.checklist-header { position:static; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline:3px solid var(--focus); outline-offset:3px;
}
/* Un focus interne permet de conserver la visibilité dans une liste scrollable. */
.artist-check:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.upload-btn:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
/* Le champ natif reste utilisable au clavier et par les technologies d'assistance. */
.upload-btn { position:relative; }
.upload-btn input { display:block; position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Interrupteur binaire : checked = sombre, unchecked = clair. */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem; margin-left:auto;
  min-height:44px; padding:.3rem .4rem; border:1px solid var(--border);
  border-radius:24px; background:var(--surface); color:var(--text);
  font:inherit; font-size:var(--fs-sm); cursor:pointer; max-width:100%;
}
.theme-track { position:relative; display:inline-flex; flex-shrink:0; align-items:center; justify-content:space-between; width:56px; height:28px; padding:0 5px; border:1px solid var(--border); border-radius:20px; background:var(--surface-hover); }
.theme-thumb { position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:var(--text); transition:transform .18s ease; }
.theme-toggle[aria-checked="true"] .theme-thumb { transform:translateX(28px); background:var(--accent); }
.theme-sun, .theme-moon { display:inline-flex; justify-content:center; align-items:center; width:17px; height:17px; color:var(--text); font-size:.85rem; line-height:1; }
.theme-toggle:hover { border-color:var(--focus); }
.theme-toggle[hidden] { display:none; }
/* V50 : fonctionnalités conservées dans les sources, désactivées par configuration. */
body[data-lastfm-enabled="false"] #setup-source-btn-lastfm,
body[data-lastfm-enabled="false"] #modal-source-btn-lastfm,
body[data-lastfm-enabled="false"] #setup-subform-lastfm,
body[data-lastfm-enabled="false"] #modal-subform-lastfm,
body[data-lastfm-enabled="false"] .feature-lastfm,
body[data-youtube-enabled="false"] #modal-listen-service,
body[data-youtube-enabled="false"] .feature-youtube { display:none !important; }
@media(max-width:640px) {
  header .theme-toggle { grid-column:2; grid-row:1; justify-self:end; }
  .container { padding:1rem; }
  .upload-zone { padding:1.5rem 1rem; }
  .upload-btn { padding:1rem 1.25rem; }
  .shared-navigation { grid-row:auto; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media(forced-colors:active) {
  .theme-track, .theme-thumb, .check-box, .play-btn { border:1px solid ButtonText; }
  .theme-thumb, .theme-toggle[aria-checked="true"] .theme-thumb { background:ButtonText; }
  .fav-btn.active .fav-icon { fill:ButtonText; stroke:ButtonText; }
  :focus-visible { outline-color:Highlight; }
}

/* V50.2 - la consigne Deezer est le champ de saisie lui-même. */
.deezer-paste-label { display:block; margin-bottom:.5rem; color:var(--text); font-weight:600; text-align:left; }
.deezer-paste-field { display:flex; flex-direction:column; gap:.65rem; margin-bottom:.75rem; }
.deezer-paste-field textarea { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:10rem; padding:.85rem 1rem; border:2px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:1rem; line-height:1.6; resize:vertical; }
.deezer-paste-field textarea:focus { border-color:var(--focus); }
.deezer-paste-field .btn { align-self:flex-end; min-width:88px; min-height:44px; }

/* V50.4 : masquer la consigne dès le focus, sans changer la valeur. */
.deezer-paste-field textarea:focus::placeholder { opacity:0; }