.thumbnail-section{border:1px solid rgba(214,174,92,.22);background:linear-gradient(145deg,rgba(17,16,13,.96),rgba(8,8,7,.9));box-shadow:0 18px 60px rgba(0,0,0,.28)}
.artwork-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:16px}
.artwork-version{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.04);padding:10px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.artwork-version:hover{transform:translateY(-2px);border-color:rgba(214,174,92,.42)}
.artwork-version.selected{border-color:#d8b15f;box-shadow:0 0 0 1px rgba(216,177,95,.55),0 20px 50px rgba(216,177,95,.16)}
.artwork-version.selected::after{content:"Selected for video";position:absolute;top:18px;left:18px;padding:6px 9px;border-radius:999px;background:rgba(216,177,95,.94);color:#171108;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.artwork-version img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#0d0d0d}
.artwork-version>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.artwork-version span{color:rgba(255,255,255,.72);font-size:12px;font-weight:700;letter-spacing:.02em}
.artwork-version button{white-space:nowrap}
.artwork-version .artwork-preview{top:18px;right:18px;left:auto;width:40px;min-width:40px;height:40px;min-height:40px}
.artwork-version .artwork-remove{top:18px;right:66px}
.artwork-version .artwork-use{min-height:34px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900}
.video video{background:#050505;object-fit:contain;width:100%;display:block;border-radius:18px}
.video.video-vertical video{aspect-ratio:9/16;max-height:732px;width:auto;max-width:min(100%,412px);margin-inline:auto;background:#050505}
/* Lecteur paysage : l'image doit rester entiere.
   object-fit:cover ne sait que rogner. max-height:260px (styles.css, regle .video video)
   cassait en plus le 16/9 de la boite : cover jetait ~62 px en haut et en bas en page,
   et ~67 px a gauche et a droite en plein ecran natif, ce qui coupait les pastilles. */
.video.video-landscape video{aspect-ratio:16/9;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center center;background:#050505}
.video.video-landscape video:fullscreen{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center center;border-radius:0;background:#000}
.video.video-landscape video:-webkit-full-screen{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center center;border-radius:0;background:#000}
/* Garde-fou : la surcouche plein ecran de l'app ne doit pas rogner non plus. */
.video-fullscreen-preview.is-landscape video{object-fit:contain;object-position:center center}
@media(max-width:860px){.artwork-gallery{grid-template-columns:1fr}.artwork-version img{aspect-ratio:16/10}.video.video-vertical video{max-width:min(100%,360px)}}


/* Bouton « Nouvelle miniature » : il reste affiche quand il ne peut pas agir,
   il doit donc se lire comme desactive — y compris au survol, ou une regle
   `!important` de styles.css rallumerait sinon sa bordure doree. */
.artwork-regenerate[disabled],
.artwork-regenerate[disabled]:hover{
  opacity:.5;
  cursor:not-allowed;
  filter:grayscale(.45);
  border-color:rgba(216,168,78,.18)!important;
  background:rgba(216,168,78,.05)!important;
  box-shadow:none!important;
  transform:none!important;
}
/* Le pave qui dit le quota, le cout et le motif. `data-artwork-quota` porte le
   motif : c'est le point d'accroche nomme pour une offre a venir. */
.artwork-quota-notice[data-artwork-quota="available"]{
  border-color:rgba(216,168,78,.2);
  background:linear-gradient(135deg,rgba(216,168,78,.07),rgba(7,8,11,.72));
}
.artwork-quota-notice[data-artwork-quota="quota_reached"] strong{color:#f6d58b;}

/* ------------------------------------------------------------------
   L'avancement d'une miniature : une barre, pas un pourcentage ecrit.

   Le HTML annoncait deja une barre (`.artwork-apply-progress-bar > i`)
   mais AUCUNE feuille de style ne la dessinait : ni ici, ni dans
   styles.css. Or `i` est un element inline, `style.width` n'y produit
   rien, et le conteneur n'avait ni hauteur ni fond. Resultat a l'ecran :
   rien du tout, et il ne restait que le pourcentage ecrit a cote.
   C'est exactement ce que Saray decrit.
   ------------------------------------------------------------------ */
.artwork-apply-progress{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(216,168,78,.24);
  background:linear-gradient(145deg,rgba(216,168,78,.09),rgba(7,8,11,.82));
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}
.artwork-apply-progress-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.artwork-apply-progress-top strong{
  font:900 13px Manrope,Inter,sans-serif;
  letter-spacing:.02em;
  color:#f8f1df;
}
/* Le chiffre reste a cote de la barre : c'est le temps ecoule, la seule
   donnee reellement connue. Le serveur ne renvoie aucun pourcentage. */
.artwork-apply-progress-top span{
  flex:none;
  font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:rgba(246,213,139,.92);
  font-variant-numeric:tabular-nums;
}
.artwork-apply-progress-bar{
  position:relative;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
}
.artwork-apply-progress-bar i{
  display:block;
  height:100%;
  width:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#d8a84e,#f6d58b);
}
/* Progression inconnue : une bande qui balaie dit « ca travaille » sans
   pretendre a un chiffre. Une barre figee a 30 % mentirait. */
.artwork-apply-progress[data-progress="unknown"] .artwork-apply-progress-bar i{
  width:38%;
  animation:artwork-progress-sweep 1.6s ease-in-out infinite;
}
@keyframes artwork-progress-sweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(275%)}
}
.artwork-apply-progress[data-progress="complete"] .artwork-apply-progress-bar i{
  width:100%;
  background:linear-gradient(90deg,#59bd83,#8fe0ae);
}
.artwork-apply-progress[data-progress="stopped"] .artwork-apply-progress-bar i{
  width:100%;
  background:linear-gradient(90deg,rgba(165,42,36,.9),rgba(216,120,110,.9));
}
.artwork-apply-progress.error{border-color:rgba(255,140,130,.4)}
.artwork-apply-progress.done{border-color:rgba(89,189,131,.38)}
.artwork-apply-progress p{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,.72);
}
/* Mouvement reduit : on garde une barre visible, elle respire au lieu de
   traverser. */
@media(prefers-reduced-motion:reduce){
  .artwork-apply-progress[data-progress="unknown"] .artwork-apply-progress-bar i{
    width:100%;
    animation:artwork-progress-pulse 2s ease-in-out infinite;
  }
  @keyframes artwork-progress-pulse{0%,100%{opacity:.35}50%{opacity:1}}
}
@media(max-width:860px){
  .artwork-apply-progress{padding:12px 13px}
  .artwork-apply-progress-top{flex-wrap:wrap;gap:4px}
  .artwork-apply-progress-top strong{font-size:12.5px}
}

/* ------------------------------------------------------------------
   Supprimer depuis la vignette.

   Le style de `.artwork-remove` vivait deja dans styles.css ; seul le
   bouton manquait. Ce qui suit ne fait qu'ajouter l'etat « pas
   supprimable » (la miniature actuelle) et la fenetre de confirmation.
   Les selecteurs sont doubles parce que styles.css porte des regles a
   trois classes (`.thumbnail-section .artwork-version .artwork-remove`)
   qui gagneraient autrement.
   ------------------------------------------------------------------ */
/* styles.css centrait la loupe (`display:grid;place-items:center`) mais pas
   la corbeille : sans ca l'icone se colle en haut a gauche du bouton. */
.artwork-remove,
.song-card-artwork .artwork-remove,
.thumbnail-section .artwork-version .artwork-remove{
  display:grid;
  place-items:center;
  border-radius:999px;
}
/* La pastille de la miniature retenue occupait le coin haut-gauche, deja pris
   par la loupe ; avec la corbeille a droite elle passait sous les deux boutons
   sur telephone. On la descend au-dessus du bandeau de legende, ou rien ne la
   recouvre. (Elle reste ecrite en anglais en dur — signale dans le rapport,
   pas corrige ici : ce n'est pas cette passe.) */
.artwork-version.selected::after{
  top:auto;
  bottom:48px;
  left:10px;
  right:auto;
  max-width:calc(100% - 20px);
}
.artwork-remove.is-blocked,
.song-card-artwork .artwork-remove.is-blocked,
.thumbnail-section .artwork-version .artwork-remove.is-blocked{
  background:rgba(20,21,25,.82);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.55);
  box-shadow:none;
  cursor:not-allowed;
}
.artwork-delete-dialog{
  width:min(520px,calc(100vw - 24px));
  padding:0;
  color:#f8f1df;
  border-radius:20px;
  border:1px solid rgba(255,140,130,.34);
  background:radial-gradient(circle at 50% 0,rgba(165,42,36,.22),transparent 46%),#07080b;
  box-shadow:0 28px 90px rgba(0,0,0,.72);
}
.artwork-delete-dialog::backdrop{background:rgba(3,4,6,.72)}
.artwork-delete-dialog form{margin:0;padding:20px}
.artwork-delete-head{display:flex;align-items:flex-start;gap:12px}
.artwork-delete-head svg{width:22px;height:22px;flex:none;color:#ff9a8f;margin-top:2px}
.artwork-delete-head strong{display:block;font:900 17px Manrope,Inter,sans-serif;line-height:1.25}
.artwork-delete-head span{display:block;margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.66)}
.artwork-delete-dialog figure{margin:16px 0 0}
.artwork-delete-dialog img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
  background:#050608;
  border:1px solid rgba(255,255,255,.1);
}
.artwork-delete-facts{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.artwork-delete-facts li{
  position:relative;
  padding-left:20px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}
.artwork-delete-facts li::before{
  content:"";
  position:absolute;
  left:4px;
  top:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(246,213,139,.85);
}
.artwork-delete-facts li.is-warning{color:#ffc9a6}
.artwork-delete-facts li.is-warning::before{background:#ff9a8f}
.artwork-delete-dialog footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
}
.artwork-delete-dialog footer button{min-height:42px;padding:10px 16px;border-radius:999px;font-weight:900;font-size:13px}
.artwork-delete-confirm{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  background:#a52a24;
  border:1px solid rgba(255,169,155,.82);
  cursor:pointer;
}
.artwork-delete-confirm:hover{background:#bd332c}
.artwork-delete-confirm svg{width:16px;height:16px}
@media(max-width:860px){
  .artwork-delete-dialog form{padding:16px}
  .artwork-delete-dialog footer{flex-direction:column-reverse}
  .artwork-delete-dialog footer button{width:100%;justify-content:center}
}