/* Musique — v1.27 (12 novembre 2026) : habillage « Tracklist », charte « affiche brute » du site.
   Noir, papier et or. Anton pour les noms, Space Mono pour les repères, DM Sans pour le reste.
   Polices et textures servies par le Player lui-même. Plus de Font Awesome : les icônes sont dessinées ici. */

@font-face{ font-family:'Anton'; font-weight:400; font-display:swap; src:url('fonts/anton-400.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-weight:400; font-display:swap; src:url('fonts/space-mono-400.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-weight:700; font-display:swap; src:url('fonts/space-mono-700.woff2') format('woff2'); }
@font-face{ font-family:'DM Sans'; font-weight:400; font-display:swap; src:url('fonts/dm-sans-400.woff2') format('woff2'); }
@font-face{ font-family:'DM Sans'; font-weight:500; font-display:swap; src:url('fonts/dm-sans-500.woff2') format('woff2'); }

:root{
  /* Les noms d'avant sont gardés (le script s'en sert), les valeurs viennent de la charte du site. */
  --bg:#0a0c10; --bg2:#12151c; --surface:#12151c; --surface2:#191d26;
  --line:rgba(231,224,208,.12); --line2:rgba(231,224,208,.26);
  --text:#e7e0d0; --text2:#cfd3da; --muted:#8c93a1; --faint:#8c93a1;
  --amber:#e8a020; --amber-2:#f0b445;
  --papier:#e7e0d0; --encre:#0b0d12; --encre-douce:#3b3f48; --ocre:#5b4300;
  --affiche:'Anton', Impact, 'Arial Narrow', sans-serif;
  --mono:'Space Mono', ui-monospace, Menlo, monospace;
  --sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans);
  display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; }
button:focus-visible, input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* ---------- Barre du haut ---------- */
#topBar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(env(safe-area-inset-top) + 16px) 16px 12px;
  border-bottom:1px solid var(--line);
}
#breadcrumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--muted); min-width:0; }
#breadcrumbs .crumb{ color:var(--muted); cursor:pointer; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#breadcrumbs .crumb.current{ color:var(--amber); font-weight:500; cursor:default; }
#breadcrumbs .sep{ color:var(--faint); font-size:10px; }
.top-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
#btnDiag{ font-size:11px; color:var(--muted); border:1px solid var(--line2); border-radius:9px; padding:5px 8px; width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; transition:color .15s; }
#btnDiag:hover{ color:var(--amber); }
#btnDiag i{ font-size:11px; }
#btnLogin{ font-size:11px; color:var(--text2); border:1px solid var(--line2); border-radius:9px; padding:5px 10px; white-space:nowrap; transition:color .15s; }
#btnLogin.connected{ color:var(--muted); }
#btnLogin.connected:hover{ color:#e87a7a; }

/* ---------- Bibliothèque ---------- */
#library{ flex:1; min-height:0; overflow-y:auto; padding:12px 16px 16px; -webkit-overflow-scrolling:touch; }
.tool-row{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:10px; }
.pill{ font-size:11px; color:var(--amber); border:1px solid #2a2417; border-radius:9px; padding:5px 10px; display:inline-flex; align-items:center; gap:6px; }
.pill.muted{ color:var(--muted); border-color:var(--line2); }
.empty{ color:var(--muted); text-align:center; margin-top:40px; font-size:13px; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; }
.row:last-child{ border-bottom:none; }
.row-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.row-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text2); }
.row-fi{ color:var(--amber); font-size:14px; width:14px; text-align:center; }
.row-folder-cover{
  width:36px; height:36px; border-radius:6px; flex-shrink:0;
  background:var(--surface2);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
}
.row-folder-cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:none; }
.row-folder-cover.loaded img{ display:block; }
.row-folder-fallback{ color:var(--amber); font-size:14px; opacity:.55; }
.row-folder-cover.loaded .row-folder-fallback{ display:none; }
.row-chev{ color:var(--faint); font-size:12px; }
.row-track-cover{
  width:36px; height:36px; border-radius:6px; flex-shrink:0;
  background:var(--surface2);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
}
.row-track-cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:none; }
.row-track-cover.loaded img{ display:block; }
.row-track-fallback{ color:var(--faint); font-size:14px; opacity:.7; }
.row-track-cover.loaded .row-track-fallback{ display:none; }
.row-track-eq{ display:none; position:relative; z-index:2; }
.row.is-active .row-track-fallback{ color:var(--amber); opacity:1; }
.row.is-playing .row-track-cover .row-track-eq{ display:inline-flex; }
.row.is-playing .row-track-cover img,
.row.is-playing .row-track-cover .row-track-fallback{ visibility:hidden; }
.row.is-playing .row-track-cover::before{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0;
  background:rgba(0,0,0,.55); z-index:1;
}
.row-end{ display:flex; align-items:center; gap:10px; color:var(--faint); }
.row-end .dur{ color:var(--muted); font-size:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
.row-end .play-ico{ opacity:0; color:var(--amber); transition:opacity .15s; font-size:12px; }
.row:hover .play-ico{ opacity:1; }
.row.is-active .row-name{ color:var(--amber); font-weight:500; }

/* Égaliseur animé */
.eq{ display:inline-flex; align-items:flex-end; gap:2px; width:13px; height:13px; }
.eq span{ width:2.5px; height:3px; background:var(--amber); border-radius:2px; animation:eq .6s ease-in-out infinite; }
.eq span:nth-child(2){ animation-delay:.15s; }
.eq span:nth-child(3){ animation-delay:.3s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:11px; } }

/* ---------- Barre de progression (partagée) ---------- */
.prog-row{ display:flex; align-items:center; gap:8px; }
.prog-row .t{ font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; min-width:30px; }
.prog-row .t.right{ text-align:right; }
/* v1.24 : zone de prise de 24 px de haut (WCAG 2.5.8), le trait reste fin à l'œil */
input[type=range].prog{ -webkit-appearance:none; appearance:none; flex:1; height:24px; margin:0; background:transparent; cursor:pointer; }
input[type=range].prog::-webkit-slider-runnable-track{ height:3px; border-radius:3px; background:var(--line2); }
input[type=range].prog::-moz-range-track{ height:3px; border-radius:3px; background:var(--line2); }
input[type=range].prog::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; margin-top:-5px; border-radius:50%; background:var(--amber); cursor:pointer; }
input[type=range].prog::-moz-range-thumb{ width:13px; height:13px; border:none; border-radius:50%; background:var(--amber); cursor:pointer; }

/* ---------- Contrôles (partagés) ---------- */
.controls{ display:flex; align-items:center; justify-content:space-between; color:var(--amber); }
.ctrl{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:var(--amber); transition:color .15s; }
.repeat{ gap:4px; font-size:14px; font-weight:500; }
.rep-label{ font-size:10px; letter-spacing:.02em; }
.play-btn{ width:42px; height:42px; border-radius:50%; background:var(--amber); color:#000; display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:transform .2s,background .2s; }
.play-btn:hover{ transform:scale(1.05); background:var(--amber-2); }

/* ---------- Barre de lecture persistante ---------- */
#transport{ flex-shrink:0; background:var(--bg2); border-top:1px solid var(--line); padding:12px 16px calc(env(safe-area-inset-bottom) + 18px); }
#miniBar{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:0 0 9px; }
.mini-cover{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; display:none; }
.mini-cover-ph{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--amber); color:#3d2a0a; font-size:15px; }
.mini-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.mini-title{ font-size:12px; color:var(--amber); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-sub{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#transport .prog-row{ margin-bottom:0; }

/* ---------- Loader / écran de démarrage ---------- */
#appLoader{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .4s ease;
}
#appLoader.hidden{ opacity:0; pointer-events:none; }
.loader-logo{ width:64px; height:64px; border-radius:18px; background:var(--amber); display:flex; align-items:center; justify-content:center; color:#3d2a0a; font-size:28px; }
.loader-spin{ width:24px; height:24px; border:3px solid var(--line2); border-top-color:var(--amber); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader-text{ font-size:13px; color:var(--muted); }
.loader-ver{ font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ---------- v1.1 : navigation, metadonnees, favoris, playlists, sheet ---------- */

.row-texts{ display:flex; flex-direction:column; min-width:0; }
.row-artist{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.row.is-active .row-artist{ color:var(--amber-2); }

.view-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.view-title{ margin:0; font-size:15px; color:var(--text); font-weight:500; flex:1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.back-chip{ font-size:12px; color:var(--amber); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }

.pl-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.pl-row:last-child{ border-bottom:none; }
.pl-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.pl-ico{ width:40px; height:40px; border-radius:10px; background:var(--surface2); display:flex; align-items:center; justify-content:center; color:var(--amber); font-size:16px; flex-shrink:0; }
.pl-name{ font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-count{ font-size:11px; color:var(--muted); margin-top:1px; }


#sheet{ position:fixed; inset:0; z-index:60; display:none; }
#sheet.open{ display:block; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
#sheetPanel{ position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-top-left-radius:18px; border-top-right-radius:18px; padding:10px 16px calc(env(safe-area-inset-bottom) + 16px); max-height:78%; overflow-y:auto; }
.sheet-grip{ width:38px; height:4px; border-radius:3px; background:var(--line2); margin:6px auto 12px; }
.sheet-title{ margin:0 0 8px; font-weight:400; font-size:13px; color:var(--muted); text-align:center; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet-item{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 6px; border-bottom:1px solid var(--line); font-size:14px; color:var(--text); }
.sheet-item:last-of-type{ border-bottom:none; }
.sheet-item i{ width:18px; text-align:center; color:var(--amber); font-size:15px; }
.sheet-item.muted i{ color:var(--faint); }
.sheet-cancel{ width:100%; text-align:center; padding:15px; margin-top:4px; color:var(--muted); font-size:14px; }
.sheet-input{ width:100%; background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:12px; color:var(--text); font-size:14px; margin:4px 0 10px; }
.sheet-create{ width:100%; background:var(--amber); color:#000; border-radius:10px; padding:13px; font-size:14px; font-weight:500; margin-bottom:6px; }

/* ---------- Historique ---------- */
.period-row{ display:flex; gap:8px; margin-bottom:14px; }
.period-btn{ font-size:12px; color:var(--muted); background:var(--surface); border-radius:999px; padding:6px 13px; transition:all .15s; }
.period-btn.active{ color:#000; background:var(--amber); font-weight:600; }
.play-count{ font-size:11px; color:var(--amber); font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; min-width:24px; text-align:right; }

/* ---------- Responsive : colonne centrée sur grands écrans (iPad, ordinateur) ---------- */
#topBar, #library, #transport { width:100%; max-width:680px; margin-left:auto; margin-right:auto; }
.controls { max-width:440px; margin-left:auto; margin-right:auto; width:100%; }
#sheetPanel { max-width:680px; margin-left:auto; margin-right:auto; }

@media (min-width:720px){
  #topBar, #library, #transport { border-left:1px solid var(--line); border-right:1px solid var(--line); }
}

/* ---------- Historique : classements artistes / albums ---------- */
.stat-row{ cursor:default; }
.stat-rank{ font-size:12px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; min-width:18px; text-align:center; flex-shrink:0; }

/* ===========================================================================
   Compat Safari ancien (iOS 12 — ex. iPad Air 1)
   Replis purement additifs : ignorés par les navigateurs récents.
   =========================================================================== */

/* `inset` (raccourci) non géré avant Safari 14.5 -> on repasse en longhand,
   sinon les éléments en position:fixed/absolute « flottent » au mauvais endroit. */
#appLoader, #sheet, .sheet-backdrop { top:0; right:0; bottom:0; left:0; }

/* `gap` (flex) non géré avant Safari 14.1 -> espacements de secours via marges.
   Ciblé uniquement sur les conteneurs où le collage gêne vraiment. */
@supports not (gap: 1px) {
  #topBar > * + *                              { margin-left:12px; }
  #breadcrumbs > *                             { margin-right:6px; }
  .controls > * + *                            { margin-left:6px; }
  .prog-row > * + *                            { margin-left:8px; }
  .row-main > * + *, .row-end > * + *          { margin-left:10px; }
  .row-end .play-ico                           { margin-left:0; }
  .pl-main > * + *                             { margin-left:12px; }
  .sheet-item > * + *                          { margin-left:14px; }
  .eq span + span                              { margin-left:2px; }
  .period-row > * + *                          { margin-left:8px; }
  .tool-row > * + *                            { margin-left:8px; }
  .scan-actions > * + *                        { margin-left:8px; }
}

/* ---------- Vue d'indexation (scan général) ---------- */
.scan-box{
  margin:20px auto; padding:20px 18px; max-width:480px;
  background:var(--surface); border:1px solid var(--line2); border-radius:14px;
  text-align:center;
}
.scan-line{ font-size:14px; color:var(--text); margin-bottom:10px; font-weight:500; }
.scan-sub{ font-size:12px; color:var(--muted); margin-top:6px; word-break:break-word; }
.scan-sub.muted{ color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; margin-top:10px; }
.scan-bar{ height:6px; background:var(--bg2); border-radius:4px; overflow:hidden; margin:14px auto 6px; max-width:340px; }
.scan-bar > span{ display:block; height:100%; background:var(--amber); border-radius:4px; transition:width .25s ease; }
.scan-actions{ display:flex; justify-content:center; gap:8px; margin-top:14px; }

/* Bouton "Retour au contexte de lecture" (v1.18.1) : integre au topBar a cote de #btnDiag.
   Cache par defaut, apparait uniquement quand un contexte de lecture existe et que la vue
   courante en differe. Discret mais anime (mini egaliseur 3 barres) pour attirer l'oeil sans
   flotter au-dessus du contenu. Meme footprint que #btnDiag pour un alignement propre. */
#btnReturn{
  display:none; align-items:center; justify-content:center;
  width:28px; height:26px; padding:5px 8px;
  border:1px solid var(--amber); border-radius:9px;
  background:transparent; color:var(--amber);
  transition:background .15s, transform .1s;
  flex-shrink:0;
}
#btnReturn.visible{ display:inline-flex; }
#btnReturn:hover{ background:rgba(255,176,60,.12); }
#btnReturn:active{ transform:scale(.94); }
#btnReturn .rp-eq{
  display:inline-flex; align-items:flex-end; gap:2px;
  height:12px; width:14px;
}
#btnReturn .rp-eq span{
  flex:1; height:100%; min-width:2px;
  background:currentColor; border-radius:1px;
  transform-origin:bottom center;
  animation:rpBar 1.05s ease-in-out infinite;
}
#btnReturn .rp-eq span:nth-child(1){ animation-delay:0s; }
#btnReturn .rp-eq span:nth-child(2){ animation-delay:.14s; }
#btnReturn .rp-eq span:nth-child(3){ animation-delay:.28s; }
@keyframes rpBar {
  0%, 100% { transform:scaleY(.35); }
  50%      { transform:scaleY(1); }
}
/* Pilule flottante de progression pour le scan incremental */
.inc-pill{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 60px); left:50%; transform:translateX(-50%);
  z-index:60; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line2);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  font-size:12px; color:var(--text2); max-width:calc(100% - 24px);
  animation:incPillIn .25s ease;
}
.inc-pill i{ color:var(--amber); font-size:12px; }
.inc-pill .inc-bar{
  display:inline-block; width:60px; height:4px; border-radius:3px;
  background:var(--bg2); overflow:hidden; margin-left:4px;
}
.inc-pill .inc-bar > span{ display:block; height:100%; background:var(--amber); transition:width .25s ease; }
@keyframes incPillIn { from { opacity:0; transform:translate(-50%, -6px); } to { opacity:1; transform:translateX(-50%); } }

/* ===========================================================================
   v1.24 (11 novembre 2026) : accessibilité, recherche
   =========================================================================== */

/* Texte réservé aux lecteurs d'écran */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

#appLoader[hidden]{ display:none; }

/* Les lignes sont des boutons : mêmes rendus qu'avant, mais atteignables au clavier */
button.row-main{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0; text-align:left; font:inherit; color:inherit; }
button.row-dossier .row-chev{ margin-left:auto; flex-shrink:0; }
button.pl-main{ flex:1; min-width:0; padding:0; text-align:left; font:inherit; color:inherit; }
#breadcrumbs button.crumb{ font:inherit; padding:0; }
#breadcrumbs button.crumb:hover{ color:var(--text2); }
.row:has(> .row-main:focus-visible){ background:rgba(245,158,11,.06); }
button:focus-visible, input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }

/* Aléatoire / répétition : l'état se lit aussi par aria-pressed et le libellé */
.ctrl.js-shuffle, .ctrl.js-repeat{ color:var(--faint); }
.ctrl.js-shuffle.on, .ctrl.js-repeat.on{ color:var(--amber); }
.ctrl.js-repeat.un{ color:var(--amber-2); }

/* Mouvement réduit : plus d'égaliseurs ni de rotations en boucle */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .eq span{ height:7px; }
}

/* ===========================================================================
   v1.25 : panneau « État » (remplace le Diagnostic)
   =========================================================================== */
.etat{ padding:4px 14px 10px; font-size:13px; line-height:1.5; color:var(--text2); }
.etat-ligne{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--line); }
.etat-ligne span:first-child{ color:var(--muted); }
.etat-ligne span:last-child{ text-align:right; overflow-wrap:anywhere; }
.etat-titre{ margin:14px 0 6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.etat-vide{ margin:4px 0; color:var(--muted); }
.etat-incidents{ list-style:none; margin:0; padding:0; }
.etat-incidents li{ padding:6px 0; border-bottom:1px solid var(--line); }
.etat-quand{ display:block; font-size:11px; color:var(--amber); font-variant-numeric:tabular-nums; }
.etat-detail{ color:var(--muted); }

/* v1.26 : pochettes a la main */
.poch-liste{ list-style:none; margin:0; padding:0; }
.poch-album .poch-al{ font-weight:600; }
.poch-album .poch-a{ display:block; color:var(--text2); font-size:13px; }
.poch-qui{ margin:-4px 0 10px; color:var(--text2); font-size:14px; text-align:center; }
.poch-form label{ display:block; font-weight:600; font-size:14px; margin:10px 0 6px; }
.poch-aide{ margin:0 0 4px; font-size:13px; color:var(--text2); }
.poch-aide-liste{ margin:8px 4px; }
.poch-etat{ font-size:14px; }
.poch-ligne{ display:flex; gap:8px; }
.poch-ligne input{ flex:1; min-width:0; min-height:44px; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:inherit; font:inherit; }
.poch-ligne input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.poch-ligne .pill, .poch-fichier{ min-height:44px; }
.poch-ou{ margin:12px 0 4px; text-align:center; color:var(--text2); }
.poch-fichier-input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip-path:inset(50%); }
.poch-form label.poch-fichier{ display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; font-weight:500; }
.poch-fichier-input:focus-visible + label.poch-fichier{ outline:2px solid var(--amber); outline-offset:2px; }
.poch-fichier-input:disabled + label.poch-fichier{ opacity:.5; cursor:default; }
.poch-etat{ min-height:1.4em; margin:10px 0 0; }
.poch-etat.poch-erreur{ color:#ffb4a8; }
.poch-lien{ margin:10px 0 0; }
.poch-lien a{ color:inherit; text-decoration:underline; display:inline-block; min-height:24px; line-height:24px; }


/* ===========================================================================
   v1.27 (12 novembre 2026) : habillage « Tracklist »
   =========================================================================== */

/* Les icônes : un dessin par nom, peint dans la couleur du texte. Remplace Font Awesome (environ 230 Ko). */
.fas{ display:inline-block; width:1em; height:1em; flex-shrink:0; vertical-align:-.125em; background-color:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat; }
.fa-spin{ animation:spin 1.4s linear infinite; }
.fa-compact-disc{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.fa-sliders-h{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.fa-random{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3c4 0 6 10 10 10h4M17 14l3 3-3 3M3 17h3c1.6 0 2.8-1.6 3.8-3.5M14 7h6M17 4l3 3-3 3'/%3E%3C/svg%3E"); }
.fa-step-backward{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6 5h2v14H6zM20 5v14L9 12z'/%3E%3C/svg%3E"); }
.fa-step-forward{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16 5h2v14h-2zM4 5v14l11-7z'/%3E%3C/svg%3E"); }
.fa-play{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E"); }
.fa-pause{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z'/%3E%3C/svg%3E"); }
.fa-redo{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3M20 5v4h-4M20 12a8 8 0 0 1-14 5.3M4 19v-4h4'/%3E%3C/svg%3E"); }
.fa-rotate{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5'/%3E%3C/svg%3E"); }
.fa-folder{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.fa-chevron-right{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.fa-music{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/svg%3E"); }
.fa-search, .fa-magnifying-glass{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E"); }
.fa-times{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.fa-check{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.fa-plug{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4'/%3E%3C/svg%3E"); }
.fa-image{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E"); }
.fa-paper-plane{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E"); }
.fa-chart-simple{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20V11M12 20V5M18 20v-6'/%3E%3C/svg%3E"); }
.fa-triangle-exclamation, .fa-exclamation-triangle{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L2 20h20zM12 10v4M12 17v.5'/%3E%3C/svg%3E"); }

/* La poussière du site, peinte une fois sur le fond (v1.27.1 : plus de calque fixe par-dessus l'écran,
   l'image est déjà mélangée au noir). */
body{ background:var(--bg) url('img/fond.webp') 0 0 / 300px; }
::selection{ background:var(--amber); color:var(--encre); }
button:focus-visible, input:focus-visible, a:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }

/* ---------- Le haut : « Bibliothèque », le chemin, deux boutons ---------- */
#topBar{ align-items:flex-end; padding:calc(env(safe-area-inset-top) + 14px) 16px 10px; border-bottom:0; }
.top-gauche{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.top-label{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
#breadcrumbs{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); gap:4px 8px; }
#breadcrumbs .crumb{ color:var(--muted); max-width:150px; min-height:24px; display:inline-flex; align-items:center; }
#breadcrumbs .crumb.current{ color:var(--papier); font-weight:400; }
#breadcrumbs .sep{ color:var(--muted); font-size:11px; }
.top-actions{ gap:8px; }
#btnDiag, #btnReturn{ width:44px; height:44px; padding:0; border-radius:6px; font-size:19px; }
#btnDiag{ border:1px solid var(--line2); color:var(--papier); }
#btnDiag i{ font-size:19px; }
#btnDiag:hover{ color:var(--amber); border-color:var(--amber); }
#btnReturn .rp-eq{ height:15px; width:17px; }
#btnLogin{ min-height:44px; padding:0 12px; border:1px solid var(--line2); border-radius:6px; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--papier); }
#btnLogin.connected{ color:var(--papier); }
#btnLogin.connected:hover{ color:#ffb4a8; border-color:#ffb4a8; }

/* ---------- Tout lire, Indexer : deux grands boutons, un filet d'or dessous ---------- */
#library{ padding:0 16px 16px; }
.tool-row{ position:sticky; top:0; z-index:2; gap:8px; margin:0 -16px 4px; padding:6px 16px 12px; background:var(--bg); border-bottom:2px solid var(--amber); }
.tool-row .pill{ flex:1; justify-content:center; min-height:44px; border-radius:6px; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; gap:8px; }
.tool-row .pill:not(.muted){ background:var(--amber); color:var(--encre); border:0; }
.tool-row .pill.muted{ border:1px solid var(--line2); color:var(--papier); }
.pill{ border-radius:6px; font-family:var(--mono); letter-spacing:.06em; }
.pill:not(.muted){ border-color:rgba(232,160,32,.5); }

/* ---------- La liste, numérotée comme une affiche ---------- */
#fileExplorer{ counter-reset:rang; }
.row{ counter-increment:rang; padding:8px 0; border-bottom:1px solid var(--line); min-height:64px; }
.row-main{ gap:12px; }
button.row-main::before{ content:counter(rang, decimal-leading-zero); flex-shrink:0; width:26px; font-family:var(--mono); font-weight:700; font-size:12px; color:var(--amber); }
.row-name{ color:var(--papier); }
button.row-dossier .row-name{ flex:1; min-width:0; font-family:var(--affiche); font-weight:400; font-size:25px; line-height:1.15; letter-spacing:.01em; text-transform:uppercase; }
.row-folder-cover, .row-track-cover{ order:2; width:46px; height:46px; border-radius:4px; background:var(--surface2); }
button.row-dossier .row-chev{ display:none; }
.row-folder-fallback{ color:var(--amber); font-size:16px; opacity:.6; }
.row-texts{ flex:1; min-width:0; }
.row-texts .row-name{ font-family:var(--affiche); font-weight:400; font-size:20px; line-height:1.15; letter-spacing:.01em; text-transform:uppercase; }
.row-artist{ font-size:13px; color:var(--muted); margin-top:2px; }
.row.is-active .row-name{ color:var(--amber); font-weight:400; }
.row.is-active .row-artist{ color:var(--amber-2); }
.row-end{ margin-left:10px; }
.row-end .dur{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.row-track-fallback{ color:var(--muted); font-size:16px; }
.empty{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--muted); }

/* Compteur du dossier (« 12 titres · 54 min ») */
.queue-stats, .row-stats{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---------- Le lecteur : un ticket de papier ---------- */
/* v1.27.1 : le papier grainé est une seule image déjà mélangée, plus un calque par-dessus */
#transport{ position:relative; margin:0 auto calc(env(safe-area-inset-bottom) + 10px); width:calc(100% - 20px); max-width:660px; padding:14px 14px 10px; border:0; border-radius:16px; background:var(--papier) url('img/papier.webp') 0 0 / 340px; color:var(--encre); display:flex; flex-direction:column; gap:8px; }
.ticket-tete{ font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ocre); }
#miniBar{ padding:0; gap:12px; }
.mini-cover, .mini-cover-ph{ width:46px; height:46px; border-radius:4px; }
.mini-cover-ph{ background:var(--encre); color:var(--amber); font-size:20px; }
.mini-title{ font-family:var(--affiche); font-weight:400; font-size:24px; line-height:1.1; text-transform:uppercase; color:var(--encre); }
/* L'encre usée, gardée pour le seul titre en cours */
.mini-title{ padding-top:.12em; margin-top:-.12em; -webkit-mask-image:url('img/usure.webp'); mask-image:url('img/usure.webp'); -webkit-mask-size:420px; mask-size:420px; }
.mini-sub{ font-size:14px; color:var(--encre-douce); }
.prog-row .t{ font-family:var(--mono); font-size:12px; color:var(--encre-douce); }
input[type=range].prog::-webkit-slider-runnable-track{ height:4px; background:rgba(11,13,18,.2); }
input[type=range].prog::-moz-range-track{ height:4px; background:rgba(11,13,18,.2); }
input[type=range].prog::-webkit-slider-thumb{ width:15px; height:15px; margin-top:-5.5px; background:var(--encre); }
input[type=range].prog::-moz-range-thumb{ width:15px; height:15px; background:var(--encre); }
#transport .controls{ color:var(--encre); }
#transport .ctrl{ min-width:48px; min-height:48px; font-size:22px; color:var(--encre); }
#transport .ctrl.js-shuffle, #transport .ctrl.js-repeat{ color:#5b6070; position:relative; }
#transport .ctrl.js-shuffle.on, #transport .ctrl.js-repeat.on, #transport .ctrl.js-repeat.un{ color:var(--encre); }
/* Allumé : un point d'encre dessous, en plus de la couleur (la couleur seule ne suffit pas) */
#transport .ctrl.on::after, #transport .ctrl.un::after{ content:''; position:absolute; bottom:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--encre); }
#transport .rep-label{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em; }
#transport .play-btn{ width:64px; height:64px; font-size:24px; background:var(--encre); color:var(--amber); }
#transport .play-btn:hover{ background:#1d2129; transform:scale(1.04); }
#transport button:focus-visible, #transport input:focus-visible{ outline-color:var(--encre); }

/* ---------- Les feuilles (État, pochettes) ---------- */
#sheetPanel{ background:var(--bg2); border-top:2px solid var(--amber); border-top-left-radius:16px; border-top-right-radius:16px; }
.sheet-title{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.sheet-item{ min-height:52px; font-size:15px; color:var(--papier); }
.sheet-item i{ width:20px; font-size:18px; }
.sheet-cancel{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.etat-titre{ font-family:var(--mono); color:var(--amber); }
.etat-ligne span:first-child{ color:var(--muted); }
.etat-quand{ font-family:var(--mono); }
.poch-album .poch-al{ font-family:var(--affiche); font-weight:400; font-size:18px; text-transform:uppercase; letter-spacing:.01em; }

/* ---------- Démarrage, pastilles, analyse ---------- */
.loader-logo{ width:72px; height:72px; border-radius:16px; background:var(--papier) url('img/papier.webp') 0 0 / 340px; color:var(--encre); font-size:34px; }
.loader-text, .loader-ver{ font-family:var(--mono); letter-spacing:.08em; }
.loader-spin{ border-color:var(--line2); border-top-color:var(--amber); }
.inc-pill{ font-family:var(--mono); font-size:12px; border-radius:6px; background:var(--bg2); border-color:var(--amber); color:var(--papier); }
.scan-box{ background:var(--bg2); border-color:var(--line2); border-radius:10px; }
.scan-line{ font-family:var(--affiche); font-weight:400; font-size:22px; text-transform:uppercase; color:var(--papier); }
.scan-sub.muted{ font-family:var(--mono); }
#toast{ font-family:var(--mono); letter-spacing:.04em; border-radius:6px !important; }

/* Grand écran : la colonne garde ses filets, le ticket reste dans la colonne */
@media (min-width:720px){
  #topBar, #library{ border-left:1px solid var(--line); border-right:1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce){ .fa-spin{ animation:none; } }
#breadcrumbs button.crumb{ font:inherit; letter-spacing:inherit; text-transform:inherit; }
.poch-form .pill{ font-family:var(--sans); letter-spacing:0; font-size:14px; }
#breadcrumbs .crumb{ max-width:200px; }
#breadcrumbs .crumb.current{ max-width:100%; }

/* v1.29 : raccourcis du ticket (liste en cours, artiste, album) */
.ticket-haut{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; }
.ticket-nav{ display:flex; gap:6px; flex-wrap:nowrap; }
.ticket-aller{ font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--encre); background:transparent; border:1.5px solid var(--encre); border-radius:3px; min-height:28px; min-width:44px; padding:0 9px; cursor:pointer; line-height:1; }
.ticket-aller:hover{ background:var(--encre); color:var(--papier); }
.ticket-aller:disabled{ opacity:.35; cursor:default; background:transparent; color:var(--encre); }
#transport .ticket-aller:focus-visible{ outline:2px solid var(--encre); outline-offset:2px; }
@media (max-width:340px){ .ticket-aller{ padding:0 6px; letter-spacing:.06em; } }

/* v1.30 : fiche de l'album (nom, année) et « Retirer » dans Pochettes manquantes */
.fiche-form input[type="text"]{ display:block; width:100%; min-height:44px; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:inherit; font:inherit; box-sizing:border-box; }
.fiche-form input[type="text"]:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.fiche-form #ficheY{ max-width:8em; }
.fiche-boutons{ margin-top:14px; flex-wrap:wrap; }
.fiche-sous-titre{ margin:22px 0 0; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.poch-li{ display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
.poch-li .poch-album{ flex:1; min-width:0; border-bottom:none; }
.poch-retirer{ flex:none; min-height:36px; font-size:12px; }
.poch-retirer.poch-confirmer{ border-color:#ffb4a8; color:#ffb4a8; }

/* v1.31 : la pochette du lecteur est un bouton : la toucher change la pochette de l'album */
.mini-poch{ padding:0; margin:0; border:0; background:none; flex-shrink:0; display:inline-flex; border-radius:4px; cursor:pointer; color:inherit; }
.mini-poch:disabled{ cursor:default; }
#transport .mini-poch:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* ---------- v1.31 : le lecteur « Liseré » (choix d'Olivier, 12 novembre 2026) ----------
   Plus de ticket papier : fond noir, filet en haut, titre en or, lecture cerclée. 165 px au lieu de 210. */
#transport{ background:#12151c; color:var(--papier); }
#transport .mini-title{ color:var(--papier); -webkit-mask-image:none; mask-image:none; }
#transport .mini-sub{ color:var(--muted); }
#transport .prog-row .t{ color:var(--muted); }
#transport input[type=range].prog::-webkit-slider-runnable-track{ background:rgba(231,224,208,.18); }
#transport input[type=range].prog::-webkit-slider-thumb{ background:var(--amber); }
#transport .ctrl{ color:var(--papier); }
#transport .ctrl.js-shuffle, #transport .ctrl.js-repeat{ color:var(--muted); }
#transport .ctrl.js-shuffle.on, #transport .ctrl.js-repeat.on, #transport .ctrl.js-repeat.un{ color:var(--amber); }
#transport .ctrl.on::after, #transport .ctrl.un::after{ background:var(--amber); }
#transport .play-btn{ background:var(--amber); color:var(--encre); }
#transport .ticket-tete{ color:var(--amber); }
#transport .ticket-aller{ color:var(--papier); border-color:rgba(231,224,208,.35); }
#transport .ticket-aller:hover{ background:var(--papier); color:var(--encre); }
#transport button:focus-visible, #transport input:focus-visible{ outline-color:var(--amber); }
.mini-cover-ph{ background:#1d212a; }
#transport{ margin:0 auto; width:100%; border-radius:0; background:var(--bg); border-top:1px solid var(--line2); padding:8px 14px calc(env(safe-area-inset-bottom) + 6px); gap:4px; }
#transport .ticket-haut{ min-height:24px; }
#transport .ticket-aller{ border:0; min-height:28px; padding:0 0 0 10px; color:var(--amber); }
.mini-cover, .mini-cover-ph{ width:40px; height:40px; }
#transport .mini-title{ font-size:19px; color:var(--amber); }
#transport .play-btn{ width:46px; height:46px; font-size:18px; background:transparent; color:var(--amber); border:2px solid var(--amber); }
#transport .ctrl{ min-height:44px; font-size:18px; }
#transport .controls{ justify-content:space-between; }