@charset "UTF-8";

/* ==========================================================
   KIT PLAYER AUDIO · audio-player.css
   IPM Tools-Design · dossiers.lalibre.be/tools-design/
   Compatible avec le balisage .ll-audio des dossiers existants
   (ukraine-mines…). Deux variantes : barre simple ou onde (canvas).
   ========================================================== */

.ll-audio {
  --au-accent: var(--ipm-accent-dark, #ac115d);               /* bouton lecture, partie lue */
  --au-bg: var(--ipm-surface-dark, #1c1c1e);                   /* fond de la carte */
  --au-ink: #f3f1ec;                  /* titre */
  --au-muted: rgba(243, 241, 236, .6);/* durée, temps */
  --au-track: rgba(243, 241, 236, .18);/* partie non lue */
  --au-font: var(--ipm-font-base, "Libre Franklin", "Helvetica Neue", Arial, sans-serif);
  --au-radius: var(--bs-border-radius-lg, 6px);
  --au-ease: cubic-bezier(.4, 0, .2, 1);

  display: flex; align-items: center; gap: 18px;
  max-width: 720px; margin: 24px auto; padding: 18px 20px;
  background: var(--au-bg); color: var(--au-ink); font-family: var(--au-font);
  border-radius: var(--au-radius); box-sizing: border-box;
}
.ll-audio[data-brand="dh"] { --au-accent: #e1001a; --au-bg: #051f3a; --au-font: "Open Sans", Helvetica, Arial, sans-serif; --au-radius: .35rem; }
.ll-audio--light { --au-accent: var(--bs-primary, #ac115d); --au-bg: #ffffff; --au-ink: #262729; --au-muted: #686868; --au-track: #e0e0e0; border: 1px solid #e0e0e0; }

/* ---------- Bouton ---------- */
.ll-audio__play {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--au-accent); color: #fff;
  transition: transform .2s var(--au-ease), box-shadow .2s var(--au-ease);
}
.ll-audio__play:hover { transform: scale(1.06); }
.ll-audio__play:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--au-bg), 0 0 0 6px var(--au-accent); }
.ll-audio__play svg { width: 20px; height: 20px; fill: currentColor; }
.ll-audio__play .ll-audio__i-pause { display: none; }
.ll-audio.is-playing .ll-audio__play .ll-audio__i-play { display: none; }
.ll-audio.is-playing .ll-audio__play .ll-audio__i-pause { display: block; }
.ll-audio.is-loading .ll-audio__play { animation: ll-audio-pulse 1s var(--au-ease) infinite; }
@keyframes ll-audio-pulse { 50% { opacity: .6; } }

/* ---------- Texte ---------- */
.ll-audio__content { flex: 1; min-width: 0; }
.ll-audio__title { font-weight: 700; font-size: 15px; line-height: 1.35; margin: 0 0 10px; }
.ll-audio__bottom { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--au-muted); font-variant-numeric: tabular-nums; }
.ll-audio__subtitle, .ll-audio__time { flex: none; }

/* ---------- Barre de progression ---------- */
.ll-audio__progress-wrap { flex: 1; padding: 8px 0; cursor: pointer; touch-action: none; }
.ll-audio__progress-wrap:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 2px; border-radius: 2px; }
.ll-audio__progress { position: relative; height: 4px; border-radius: 2px; background: var(--au-track); }
.ll-audio__bar { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--au-accent); }
.ll-audio__bar::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--au-accent); transform: scale(0); transition: transform .15s var(--au-ease); }
.ll-audio__progress-wrap:hover .ll-audio__bar::after, .ll-audio.is-playing .ll-audio__bar::after { transform: scale(1); }

/* ---------- Variante onde (canvas) ---------- */
.ll-audio__wave { display: none; }
.ll-audio--wave .ll-audio__wave { display: block; height: 56px; margin: 0 0 8px; cursor: pointer; touch-action: none; }
.ll-audio--wave .ll-audio__wave:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 3px; border-radius: 2px; }
.ll-audio--wave .ll-audio__wave canvas { display: block; width: 100%; height: 100%; }
.ll-audio--wave .ll-audio__progress-wrap { display: none; }
.ll-audio--wave .ll-audio__bottom { justify-content: space-between; }

/* ---------- Vitesse ---------- */
.ll-audio__rate { flex: none; font: 600 11px/1 var(--au-font); color: var(--au-ink); background: transparent; border: 1px solid var(--au-track); border-radius: 9999px; padding: 4px 8px; cursor: pointer; }
.ll-audio__rate:hover, .ll-audio__rate:focus-visible { border-color: var(--au-accent); outline: 0; }

/* ---------- Titres longs ---------- */
.ll-audio--longtitle .ll-audio__title { font-size: 14px; font-weight: 600; }

/* ---------- Mini-lecteur flottant (data-sticky) ---------- */
.ll-audio-dock {
  --au-accent: var(--ipm-accent-dark, #ac115d); --au-bg: var(--ipm-surface-dark, #1c1c1e); --au-ink: #f3f1ec; --au-muted: rgba(243,241,236,.6); --au-track: rgba(243,241,236,.18);
  position: fixed; right: 20px; bottom: 20px; z-index: 9990; width: min(360px, calc(100vw - 32px));
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 12px 16px;
  background: var(--au-bg); color: var(--au-ink); font-family: var(--ipm-font-base, "Libre Franklin", "Helvetica Neue", Arial, sans-serif);
  border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2); overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
}
.ll-audio-dock.is-on { opacity: 1; transform: none; }
.ll-audio-dock[hidden] { display: none; }
.ll-audio-dock.is-dh { --au-accent: #e1001a; --au-bg: #051f3a; font-family: "Open Sans", Helvetica, Arial, sans-serif; }
.ll-audio-dock__play { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--au-accent); color: #fff; cursor: pointer; }
.ll-audio-dock__play svg { width: 16px; height: 16px; fill: currentColor; }
.ll-audio-dock .ll-audio__i-pause { display: none; }
.ll-audio-dock.is-playing .ll-audio__i-play { display: none; }
.ll-audio-dock.is-playing .ll-audio__i-pause { display: block; }
.ll-audio-dock__info { min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.ll-audio-dock__title { display: block; font-weight: 700; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-audio-dock__time { display: block; font-size: 11px; color: var(--au-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ll-audio-dock__info:hover .ll-audio-dock__title { text-decoration: underline; text-underline-offset: 3px; }
.ll-audio-dock__close { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: transparent; color: var(--au-muted); cursor: pointer; }
.ll-audio-dock__close:hover { background: var(--au-track); color: var(--au-ink); }
.ll-audio-dock__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ll-audio-dock button:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 2px; }
.ll-audio-dock__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--au-track); cursor: pointer; }
.ll-audio-dock__bar { height: 100%; width: 0; background: var(--au-accent); }

@media (max-width: 520px) {
  .ll-audio-dock { right: 16px; left: 16px; bottom: 16px; width: auto; }
  .ll-audio { gap: 12px; padding: 14px; }
  .ll-audio__play { width: 44px; height: 44px; }
  .ll-audio__subtitle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ll-audio__play, .ll-audio__bar::after, .ll-audio-dock { transition: none; }
  .ll-audio.is-loading .ll-audio__play { animation: none; }
}