/* Le lecteur du site et la barre de progression de la navigation.

   Une feuille à part (et non plus dans chaque page) : elle est servie avec son empreinte et gardée un an par le
   navigateur et le CDN. Elle ne s'appuie que sur les couleurs de la page (`--panneau`, `--accent`, …), donc les
   thèmes clair et sombre s'appliquent seuls. Les animations ne bougent que `transform` et `opacity`.

   Trois dispositions, sans bouton pour en changer : le matériel décide.
   * bureau et tablette : une barre pleine largeur en bas, en trois parties (le titre, les commandes, le volume) ;
   * téléphone : une barre compacte au-dessus des onglets ; la toucher l'ouvre en plein écran ;
   * la file d'attente : un panneau à droite (bureau) ou une feuille (téléphone).
*/
:root{--h-lecteur:84px}

#navigation-barre{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--accent);transform-origin:left;
transform:scaleX(0);opacity:0;z-index:90;pointer-events:none}

body.lecture{padding-bottom:calc(var(--h-lecteur) + 12px)}
body.lecture .toast{bottom:calc(var(--h-lecteur) + 20px)}
/* Le live prime : tant qu'on le suit, la barre de lecture s'efface ; elle revient telle quelle quand on le quitte. */
html[data-live-en-cours] .lecteur{display:none}
html[data-live-en-cours] body.lecture .toast{bottom:28px}

.lecteur{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;
grid-template-columns:minmax(180px,1fr) minmax(300px,640px) minmax(180px,1fr);align-items:center;gap:16px;
height:var(--h-lecteur);padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--panneau);
border-top:1px solid var(--bord);animation:lecteur-monte .3s var(--douce)}
@keyframes lecteur-monte{from{transform:translateY(100%);opacity:0}}
.lecteur-fil{display:none}
.lecteur-replier{display:none}

.lecteur-piste{display:flex;align-items:center;gap:12px;min-width:0}
.lecteur-pochette{position:relative;width:56px;height:56px;border:0;padding:0;border-radius:6px;overflow:hidden;
background:var(--haute);flex:none;cursor:pointer}
.lecteur-pochette img{width:100%;height:100%;object-fit:cover;display:block}
.lecteur-infos{min-width:0;display:flex;flex-direction:column;gap:1px}
.lecteur-infos a{font-weight:600;font-size:15px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lecteur-infos a:hover{text-decoration:underline}
#lecteur-artiste{font-size:13px;color:var(--pale);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lecteur-badge{align-self:flex-start;margin-top:2px;padding:1px 8px;border:1px solid var(--bord-fort);border-radius:999px;
font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--pale);white-space:nowrap}
.lecteur[data-mode=entier] .lecteur-badge{border-color:var(--accent);color:var(--accent-texte)}
.lecteur .eq{flex:none;opacity:0;transition:opacity .2s ease}
.lecteur.joue .eq{opacity:1}

.lecteur-centre{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lecteur-commandes{display:flex;align-items:center;gap:8px}
.cmd{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--pale);cursor:pointer;
display:inline-grid;place-items:center;flex:none;transition:color .15s ease,background .15s ease,transform .15s ease}
.cmd:hover{color:var(--encre)}
.cmd:disabled{opacity:.35;cursor:not-allowed}
.cmd[aria-pressed=true]{color:var(--accent)}
.cmd svg{width:20px;height:20px;fill:currentColor;display:block}
.cmd svg.trait{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmd-jouer{width:44px;height:44px;background:var(--encre);color:var(--nuit)}
.cmd-jouer:hover{color:var(--nuit);transform:scale(1.06)}
.cmd-jouer svg{width:22px;height:22px}
.cmd-jouer .i-pause,.cmd-jouer .i-attente{display:none}
.lecteur.joue .cmd-jouer .i-jouer{display:none}
.lecteur.joue .cmd-jouer .i-pause{display:block}
.lecteur.charge .cmd-jouer .i-jouer,.lecteur.charge .cmd-jouer .i-pause{display:none}
.lecteur.charge .cmd-jouer .i-attente{display:block;animation:lecteur-tourne 1s linear infinite}
@keyframes lecteur-tourne{to{transform:rotate(360deg)}}
.cmd .i-repeter-un{display:none}
.cmd[data-mode=un] .i-repeter{display:none}
.cmd[data-mode=un] .i-repeter-un{display:block}
.cmd .i-muet{display:none}
.cmd[aria-pressed=true] .i-son{display:none}
.cmd[aria-pressed=true] .i-muet{display:block}

.lecteur-temps{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;
font-size:12px;color:var(--pale);font-variant-numeric:tabular-nums}
.lecteur-temps span{min-width:34px}
#lecteur-duree{text-align:left}
#lecteur-ecoule{text-align:right}
.lecteur input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;margin:0;background:transparent;
cursor:pointer;--part:0%;--rempli:var(--encre)}
.lecteur input[type=range]:focus-visible{outline-offset:2px}
.lecteur-temps:hover input[type=range],.lecteur-volume:hover input[type=range]{--rempli:var(--accent)}
.lecteur input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
background:linear-gradient(90deg,var(--rempli) var(--part),var(--bord-fort) var(--part))}
.lecteur input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--bord-fort)}
.lecteur input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--rempli)}
.lecteur input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
background:var(--encre);margin-top:-4px;opacity:0;transition:opacity .15s ease}
.lecteur input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--encre);opacity:0}
.lecteur input[type=range]:hover::-webkit-slider-thumb,.lecteur input[type=range]:focus-visible::-webkit-slider-thumb{opacity:1}
.lecteur input[type=range]:hover::-moz-range-thumb,.lecteur input[type=range]:focus-visible::-moz-range-thumb{opacity:1}
.lecteur input[type=range]:disabled{opacity:.5;cursor:default}

.lecteur-droite{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.lecteur-entier{font-size:13px;font-weight:700;text-decoration:none;color:var(--sur-accent);background:var(--accent);
padding:7px 14px;border-radius:999px;white-space:nowrap;margin-right:6px}
.lecteur-entier:hover{background:#ffb43f}
.lecteur-volume{display:flex;align-items:center;gap:2px;width:132px}

.lecteur-panneau{position:fixed;right:0;top:68px;bottom:var(--h-lecteur);width:min(380px,100%);z-index:44;
background:var(--panneau);border-left:1px solid var(--bord);overflow-y:auto;padding:14px 12px 20px;
animation:lecteur-entre .25s var(--douce)}
@keyframes lecteur-entre{from{transform:translateX(24px);opacity:0}}
.panneau-tete{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.panneau-tete h2{flex:1;margin:0;font-size:19px}
.panneau-tete .lien-discret{margin:0;padding:6px 8px}
.lecteur-panneau h3{margin:14px 6px 6px;font-size:13px;color:var(--pale);text-transform:uppercase;letter-spacing:.08em}
.lecteur-panneau ol{list-style:none;margin:0;padding:0}
.piste{display:flex;align-items:center;gap:2px;border-radius:8px}
.piste:hover{background:var(--survol)}
.piste.courante strong{color:var(--accent-texte)}
.piste-aller{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;color:inherit;
text-align:left;padding:6px;cursor:pointer;border-radius:8px}
.piste-image{width:40px;height:40px;border-radius:5px;background:var(--haute);overflow:hidden;flex:none}
.piste-image img{width:100%;height:100%;object-fit:cover;display:block}
.piste-textes{min-width:0;display:flex;flex-direction:column}
.piste-textes strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piste-textes small{font-size:12px;color:var(--pale);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piste-retirer{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--pale);cursor:pointer;
font-size:20px;line-height:1;flex:none}
.piste-retirer:hover{color:var(--encre);background:var(--haute)}

@media (max-width:1000px){
.lecteur{grid-template-columns:minmax(140px,1fr) minmax(260px,480px) auto}
.lecteur-volume{width:auto}
.lecteur-volume input{display:none}
.lecteur-entier{display:none}
}

/* Téléphone : une barre compacte au-dessus des onglets ; la toucher l'ouvre en plein écran. */
@media (max-width:760px){
:root{--h-lecteur:68px}
.lecteur{--bas:calc(68px + env(safe-area-inset-bottom));left:8px;right:8px;bottom:var(--bas);height:64px;
grid-template-columns:minmax(0,1fr) auto auto;gap:2px;padding:6px 8px;border:1px solid var(--bord);border-radius:12px;
box-shadow:0 10px 30px var(--ombre)}
.lecteur-fil{display:block;position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
background:var(--filet);overflow:hidden;pointer-events:none}
.lecteur-fil span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.lecteur-centre,.lecteur-commandes{display:contents}
.lecteur-temps,.lecteur-droite,#lecteur-aleatoire,#lecteur-precedent,#lecteur-repeter{display:none}
.lecteur-pochette{width:46px;height:46px}
.lecteur .eq{display:none}
.lecteur-badge{display:none}
body.lecture{padding-bottom:calc(68px + 76px + env(safe-area-inset-bottom))}
body.lecture .toast{bottom:calc(160px + env(safe-area-inset-bottom))}
.lecteur-panneau{top:0;bottom:0;width:100%;z-index:65;border-left:0;padding:calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
animation:lecteur-monte .25s var(--douce)}

.lecteur:not(.agrandi){cursor:pointer;-webkit-tap-highlight-color:transparent}
.lecteur.agrandi{position:fixed;inset:0;height:auto;z-index:60;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:20px;padding:calc(56px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
border:0;border-radius:0;box-shadow:none;background:var(--nuit);overflow-y:auto;animation:none}
.lecteur.agrandi .lecteur-fil{display:none}
.lecteur.agrandi .lecteur-replier{display:grid;position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px}
.lecteur.agrandi .lecteur-piste{flex-direction:column;align-items:center;width:100%;gap:18px}
.lecteur.agrandi .lecteur-pochette{width:min(72vw,340px);height:min(72vw,340px);border-radius:12px;box-shadow:var(--ombre-carte)}
.lecteur.agrandi .lecteur-infos{align-items:center;text-align:center;width:100%}
.lecteur.agrandi .lecteur-infos a{font-size:22px;white-space:normal}
.lecteur.agrandi .lecteur-badge{display:block;align-self:center}
.lecteur.agrandi .lecteur-centre{display:flex;flex-direction:column-reverse;width:100%;max-width:480px;gap:14px}
.lecteur.agrandi .lecteur-commandes{display:flex;justify-content:center;gap:14px}
.lecteur.agrandi #lecteur-aleatoire,.lecteur.agrandi #lecteur-precedent,.lecteur.agrandi #lecteur-repeter{display:inline-grid}
.lecteur.agrandi .lecteur-temps{display:grid}
.lecteur.agrandi .lecteur-droite{display:flex;justify-content:center;gap:10px}
.lecteur.agrandi .lecteur-entier{display:inline-block}
.lecteur.agrandi .lecteur-volume{display:none}
.lecteur.agrandi .cmd-jouer{width:60px;height:60px}
.lecteur.agrandi .cmd-jouer svg{width:28px;height:28px}
html.lecteur-ouvert{overflow:hidden}
}

/* Les appareils sans souris n'ont pas de curseur de volume : le téléphone a ses boutons. */
@media (hover:none) and (pointer:coarse){
.lecteur-volume{display:none}
}

@media (prefers-reduced-motion:reduce){
.lecteur,.lecteur-panneau{animation:none}
.lecteur.charge .cmd-jouer .i-attente{animation:none}
#navigation-barre{transition:none!important}
}