/* Lecteur audio réutilisable (js/audioplayer.js). Mobile-first, sans débordement horizontal dès 320 px. Chargé avant mobile.css. */
.pl { --pl-h: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; color: var(--tx); font-variant-numeric: tabular-nums; }
.pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
.pl-ico { flex: none; display: block; }
.pl button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pl button:focus-visible { outline: 2px solid var(--focus, var(--acc)); outline-offset: 2px; }

/* timeline : rail dessiné à part, input range transparent par-dessus (cible tactile de 44 px) */
.pl-track { position: relative; height: var(--pl-h); min-width: 0; flex: 1 1 auto; }
.pl-rail { position: absolute; left: 9px; right: 9px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--line); overflow: hidden; pointer-events: none; }
.pl-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; }
.pl-buf { background: rgba(var(--acc-rgb, 200, 162, 74), .30); }
.pl-fill { background: var(--acc); }
.pl-range { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; min-height: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.pl-range:disabled { cursor: default; opacity: .6; }
.pl-range:focus { outline: none; }
.pl-range::-webkit-slider-runnable-track { height: var(--pl-h); background: transparent; border: 0; }
.pl-range::-moz-range-track { height: var(--pl-h); background: transparent; border: 0; }
.pl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: calc((var(--pl-h) - 18px) / 2); border-radius: 50%; background: var(--acc2, var(--acc)); border: 2px solid var(--card, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pl-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--acc2, var(--acc)); border: 2px solid var(--card, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(var(--acc-rgb, 200, 162, 74), .5); }
.pl-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(var(--acc-rgb, 200, 162, 74), .5); }
.pl-range:active::-webkit-slider-thumb { transform: scale(1.15); }

.pl-t { font-size: .8rem; color: var(--tx2); white-space: nowrap; }

/* boutons */
.pl-play { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--acc) !important; color: var(--accTx) !important; }
.pl-play:active { transform: scale(.96); }
.pl-skip { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--tx); }
.pl-speed { flex: none; min-width: 52px; height: 44px; padding: 0 10px !important; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line) !important; font-weight: 800; font-size: .85rem; color: var(--tx); }
.pl-skip:hover, .pl-speed:hover { background: var(--card); }
.pl-spin { animation: pl-rot 0.9s linear infinite; }
@keyframes pl-rot { to { transform: rotate(360deg); } }

/* mode complet */
.pl-full { display: flex; flex-direction: column; gap: 0; }
.pl-full .pl-times { display: flex; justify-content: space-between; margin-top: -6px; padding: 0 2px; }
.pl-ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; }
.pl-mid { display: flex; align-items: center; gap: 8px; }
.pl-left { display: flex; justify-content: flex-start; min-width: 0; }

/* mode compact : une ligne */
.pl-compact { --pl-h: 40px; display: flex; align-items: center; gap: 6px; }
.pl-compact .pl-play { width: 44px; height: 44px; }
.pl-compact .pl-t { flex: none; min-width: 2.4em; font-size: .74rem; }
.pl-compact .pl-cur { text-align: right; }
.pl-compact .pl-speed { min-width: 46px; height: 36px; padding: 0 6px !important; font-size: .78rem; }
.pl-compact .pl-track { min-width: 40px; }
.pl-compact .pl-msg { flex: 0 0 100%; }
.pl-compact { flex-wrap: wrap; }

/* messages et états */
.pl-msg { margin: 6px 0 0; font-size: .85rem; color: var(--tx2); overflow-wrap: anywhere; text-align: center; }
.pl.is-error .pl-msg { color: var(--danger); }
.pl.is-error .pl-play { background: var(--card) !important; color: var(--danger) !important; border: 1px solid var(--danger) !important; }
.pl.is-loading .pl-fill { opacity: .7; }

@media (max-width: 340px) {
  .pl-skip { width: 42px; height: 42px; }
  .pl-mid { gap: 4px; }
  .pl-speed { min-width: 46px; padding: 0 6px !important; }
}
@media (prefers-reduced-motion: reduce) { .pl-spin { animation: none; } .pl-play:active { transform: none; } }

/* bloc de la fiche de lieu : le lecteur remplace la rangée écouter/arrêter/vitesse */
.ag-player { margin-top: 2px; }
.ag-player:empty { display: none; }
.ag-row[hidden], .ag-player[hidden] { display: none; }