/* ═══════════════════════════════════════════════════════════════
   audio-cache.css — Le Tidiane v3.1
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1. BARRE DE PROGRESSION — 3 zones VISUELLEMENT DISTINCTES
      Blanc  │ Vert semi-transparent │ Gris sombre
       lu           bufferisé           vide
══════════════════════════════════════════════════════════════ */

/*
 * On utilise un sélecteur très spécifique + !important
 * pour écraser audio_player_page.css qui définit aussi
 * le background de .ap-progress-input
 */

/* Page player */
.ap-page .ap-progress-wrap .ap-progress-input,
.ap-page .ap-progress-input,
.ap-split .ap-progress-wrap .ap-progress-input,
.ap-progress-input {
  --ap-buffer: 0%;

  /* TRACK — rendu via pseudo-element webkit */
  background: transparent !important;

  /* On remplace le track avec un background multi-stop */
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: height 0.15s;

  /* Barre composite :
     0% ──── [BLANC] ──── fill ──── [VERT 35%] ──── buffer ──── [GRIS 8%] ──── 100% */
  background: linear-gradient(
    to right,
    #e8eaed  0%,
    #e8eaed  var(--ap-fill, 0%),
    rgba(142, 182, 155, 0.40)  var(--ap-fill, 0%),
    rgba(142, 182, 155, 0.40)  var(--ap-buffer, 0%),
    rgba(255, 255, 255, 0.09)  var(--ap-buffer, 0%),
    rgba(255, 255, 255, 0.09)  100%
  ) !important;
}

/* Webkit slider track — transparent pour laisser le background du range */
.ap-progress-input::-webkit-slider-runnable-track {
  background: transparent !important;
  height: 4px;
  border-radius: 4px;
}

/* Firefox */
.ap-progress-input::-moz-range-track {
  background: transparent !important;
  height: 4px;
  border-radius: 4px;
}
.ap-progress-input::-moz-range-progress {
  background: transparent !important;
}

/* Thumb — reste vert mint */
.ap-progress-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ap-mint, #8EB69B) !important;
  border: 2px solid var(--ap-bg, #0b1a12);
  cursor: pointer;
  transition: transform 0.15s;
  margin-top: -5px;
}
.ap-progress-input:hover::-webkit-slider-thumb {
  transform: scale(1.3);
}
.ap-progress-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ap-mint, #8EB69B) !important;
  border: 2px solid var(--ap-bg, #0b1a12);
  cursor: pointer;
}

/* Overlay (#apo-progress) */
  #apo-progress {
    --ap-fill: 0%;
    --ap-buffer: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
      to right,
      #8EB69B 0%,
      #8EB69B var(--ap-fill, 0%),
      rgba(142,182,155,.35) var(--ap-fill, 0%),
      rgba(142,182,155,.35) var(--ap-buffer, 0%),
      rgba(255,255,255,.09) var(--ap-buffer, 0%),
      rgba(255,255,255,.09) 100%
    ) !important;
  }
#apo-progress::-webkit-slider-runnable-track { background: transparent !important; }
#apo-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ap-mint, #8EB69B) !important;
  border: 2px solid var(--apo-bg, #0b1a12);
  cursor: pointer; margin-top: -5px;
}

/* Light mode */
body.light-mode .ap-progress-input,
html.light-mode .ap-progress-input {
  background: linear-gradient(
    to right,
    #235347 0%,
    #235347 var(--ap-fill, 0%),
    rgba(35, 83, 71, 0.28) var(--ap-fill, 0%),
    rgba(35, 83, 71, 0.28) var(--ap-buffer, 0%),
    #d0e8d8 var(--ap-buffer, 0%),
    #d0e8d8 100%
  ) !important;
}
body.light-mode #apo-progress,
html.light-mode #apo-progress {
  background: linear-gradient(
    to right,
    #235347 0%,
    #235347 var(--apo-prog, 0%),
    rgba(35, 83, 71, 0.28) var(--apo-prog, 0%),
    rgba(35, 83, 71, 0.28) var(--apo-buffer, 0%),
    #d0e8d8 var(--apo-buffer, 0%),
    #d0e8d8 100%
  ) !important;
}

/* ══════════════════════════════════════════════════════════════
   2. BOUTON DOWNLOAD PAR ITEM
      Icône fournie par l'utilisateur (cloud + flèche bas)
══════════════════════════════════════════════════════════════ */

.ap-item-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.28);
  transition: color 0.2s, background 0.2s, transform 0.15s;
  position: relative;
  padding: 0;
  vertical-align: middle;
}
.ap-item-dl-btn:hover {
  color: var(--ap-mint, #8EB69B);
  background: rgba(142, 182, 155, 0.09);
  transform: scale(1.08);
}
.ap-item-dl-btn:active { transform: scale(0.92); }

.ap-item-dl-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

/* ── Icons par état ─────────────────────────────────────────── */

/* Default : seul icon-download visible */
.ap-item-dl-btn .i-dl     { display: block; }
.ap-item-dl-btn .i-ok     { display: none; }
.ap-item-dl-btn .i-del    { display: none; }
.ap-item-dl-btn .i-spin   { display: none; }

/* DOWNLOADING */
.ap-item[data-cache="downloading"] .ap-item-dl-btn {
  color: #e05c5c !important;
  cursor: pointer !important;
  pointer-events: all !important;
}

/* Cacher toutes les icônes pendant downloading */
.ap-item[data-cache="downloading"] .ap-item-dl-btn .icon-download { display: none !important; }
.ap-item[data-cache="downloading"] .ap-item-dl-btn .icon-spinner  { display: none !important; }
.ap-item[data-cache="downloading"] .ap-item-dl-btn .icon-cached   { display: none !important; }
.ap-item[data-cache="downloading"] .ap-item-dl-btn .icon-delete   { display: block !important; color: #e05c5c !important; }

/* Montrer uniquement le X rouge */
.ap-item[data-cache="downloading"] .ap-item-dl-btn .i-del  { 
  display: block !important; 
  color: #e05c5c !important;
}

/* Anneau de progression — garder */
.ap-item[data-cache="downloading"] .ap-item-dl-btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid rgba(229, 92, 92, 0.2);
  border-top-color: #e05c5c;
  animation: ap-ring-spin 0.85s linear infinite;
  pointer-events: none;
}
@keyframes ap-ring-spin { to { transform: rotate(360deg); } }

/* CACHED */
.ap-item[data-cache="cached"] .ap-item-dl-btn {
  color: var(--ap-mint, #8EB69B);
  background: rgba(142, 182, 155, 0.12);
}
.ap-item[data-cache="cached"] .ap-item-dl-btn .i-dl { display: none; }
.ap-item[data-cache="cached"] .ap-item-dl-btn .i-ok { display: block; }

/* Survol cached → supprimer */
.ap-item[data-cache="cached"] .ap-item-dl-btn:hover {
  color: #d96060;
  background: rgba(217, 96, 96, 0.10);
}
.ap-item[data-cache="cached"] .ap-item-dl-btn:hover .i-ok  { display: none; }
.ap-item[data-cache="cached"] .ap-item-dl-btn:hover .i-del { display: block; }

/* Barre de progression fine en bas de l'item */
.ap-item[data-cache="downloading"] {
  overflow: hidden; /* requis pour le ::after */
}
.ap-item[data-cache="downloading"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: var(--ap-item-dl, 0%);
  background: linear-gradient(to right, var(--ap-mint, #8EB69B), rgba(142,182,155,0.35));
  border-radius: 0 2px 2px 0;
  transition: width 0.5s ease;
  pointer-events: none;
}

/* OFFLINE (non mis en cache ET hors ligne) */
.ap-item[data-cache="offline"] .ap-item-dl-btn {
  color: rgba(217, 96, 96, 0.45);
  cursor: not-allowed;
}
.ap-item[data-cache="offline"] {
  opacity: 0.5;
}

/* ── Tooltip ────────────────────────────────────────────────── */
.ap-item-dl-btn[data-tip]::before {
  content: attr(data-tip);
  position: fixed;
  background: #0d1f15;
  color: var(--ap-text, #e8eaed);
  font-size: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 999999;
  /* Positionnement via JS */
  top: var(--tip-y, auto);
  left: var(--tip-x, auto);
}

.ap-item-dl-btn:hover[data-tip]::before {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   3. TOAST NOTIFICATION
══════════════════════════════════════════════════════════════ */

#ap-cache-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #0c2d1c;
  border: 1px solid rgba(142, 182, 155, 0.28);
  color: var(--ap-mint, #8EB69B);
  font-size: 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  padding: 8px 16px 8px 12px;
  border-radius: 22px;
  z-index: 9999;
  white-space: nowrap;
  max-width: min(90vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  transition: opacity 0.28s, transform 0.28s;
}
#ap-cache-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#ap-cache-toast svg {
  width: 14px; height: 14px; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   4. LIGHT MODE
══════════════════════════════════════════════════════════════ */
body.light-mode .ap-item-dl-btn { color: rgba(0,0,0,0.22); }
body.light-mode .ap-item[data-cache="cached"] .ap-item-dl-btn { color: #235347; background: rgba(35,83,71,0.10); }
body.light-mode #ap-cache-toast { background: #eef6f1; color: #235347; border-color: rgba(35,83,71,0.25); }

/* ══════════════════════════════════════════════════════════════
   5. REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ap-item[data-cache="downloading"] .ap-item-dl-btn::before { animation: none; }
  .ap-item[data-cache="downloading"]::after { transition: none; }
}

.ap-item-dl-btn[data-tip]::after {
  content: attr(data-tip);
  position: fixed !important;  /* ← fixed au lieu de absolute */
  bottom: auto !important;
  right: auto !important;
  background: #0d1f15;
  color: var(--ap-text, #e8eaed);
  font-size: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 999999;
}

.ap-item-dl-btn:hover[data-tip]::after {
  opacity: 1;
  transform: translateY(0);
}