/* ══════════════════════════════════════════════════════════════
   TÉLÉCHARGEMENT EN DEUX TEMPS — états partagés
   ══════════════════════════════════════════════════════════════
   Le composant sert sur all-plats (bouton flottant rond sur le visuel) et
   sur la page Programme (liens dans l'accordéon). La géométrie propre à
   chaque page reste dans sa page ; ce qui est ici décrit les ÉTATS, pour
   qu'ils soient identiques des deux côtés.
   Le pilotage est dans assets/js/gk-download.js.
   ══════════════════════════════════════════════════════════════ */

/* ── Préparation en cours ── */
[data-dl].is-busy {
  pointer-events: none;
  opacity: .75;
}
/* img sur la visionneuse, svg inline sur les cartes Carte+ : les deux tournent */
[data-dl].is-busy img,
[data-dl].is-busy svg {
  animation: gk-dl-spin .9s linear infinite;
}
@keyframes gk-dl-spin { to { transform: rotate(360deg); } }

/* Un lien texte n'a ni img ni svg : on le signale par le libellé du survol
   et par l'opacité ci-dessus, plus un curseur d'attente. */
[data-dl].is-busy { cursor: progress; }

/* ── Message d'état, accroché au bouton ── */
.viewer-dl-msg {
  max-width: 46vw;
  font-size: 12px;
  line-height: 1.25;
  color: #fff;
  background: rgba(16, 36, 45, .88);
  padding: 5px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewer-dl-msg:empty { display: none; }
.viewer-dl-msg.is-error { background: #b3261e; }
.viewer-dl-msg a { color: #fff; text-decoration: underline; }

/* ── Variante en ligne (accordéon « Télécharger » de la page Programme) ── */
.viewer-dlbox--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.viewer-dlbox--inline .viewer-dl-msg {
  max-width: 100%;
  white-space: normal;
}

/* iOS : supprime le délai de 300 ms et le voile gris au toucher. */
[data-dl] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  [data-dl].is-busy img { animation: none; opacity: .6; }
}