/* Pages artistes (/artiste/<slug>) : polices proposées aux artistes et
 * repères du mode édition (assets/artist-page.js, `html.is-editing`, dans
 * l'iframe de /editeur). Le reste du style est celui du gabarit Cecil. */

@font-face {
  font-family: "Archivo Sillon";
  src: url("/fonts/Archivo-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Sillon";
  src: url("/fonts/JetBrainsMono-Medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

.slot-text { white-space: pre-line; }

/* ---- Mode édition ---- */
.is-editing [data-slot] {
  cursor: pointer;
  outline: 1px dashed transparent;
  outline-offset: 4px;
  transition: outline-color 0.15s;
}
.is-editing [data-slot]:hover { outline-color: rgba(10, 132, 255, 0.85); }
.is-editing [data-slot][data-slot-selected] {
  outline: 2px solid #0a84ff;
  outline-offset: 4px;
}
/* Les photos sous un masque ou un calque : le repère passe devant. */
.is-editing img[data-slot][data-slot-selected] { filter: drop-shadow(0 0 0 #0a84ff); }
.is-editing [data-slot-locked] { cursor: not-allowed; }

/* ---- Couronne de disques (section « Découvrir », emplacement discover.discs) ----
 * Places numérotées data-pos 1…14 ; état posé par artist-page.js :
 * mine (choisi par l'artiste), default (catalogue), empty (masqué). */
[data-pos][data-state="empty"] img { visibility: hidden; }

/* En édition, quand la couronne est sélectionnée : on montre le système. */
.is-editing [data-slot="discover.discs"][data-slot-selected] [data-pos] { position: relative; }
.is-editing [data-slot="discover.discs"][data-slot-selected] [data-pos][data-state="default"] img { opacity: 0.28; filter: grayscale(0.8); transition: opacity 0.3s; }
.is-editing [data-slot="discover.discs"][data-slot-selected] [data-pos][data-state="empty"] img { visibility: visible; opacity: 0.08; filter: grayscale(1); }
/* Numéro du disque (ordre de la liste de l'éditeur) sur ses disques. */
.is-editing [data-slot="discover.discs"][data-slot-selected] [data-pos][data-state="mine"]::after {
  content: attr(data-n);
  position: absolute;
  left: 8%;
  top: 8%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  background: #0a84ff;
  color: #fff;
  font: 600 14px/1 "Archivo Sillon", Arial, sans-serif;
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.25);
}
/* Prochaine place : cercle en pointillés et « + ». */
.is-editing [data-slot="discover.discs"][data-slot-selected] [data-pos][data-next]::before {
  content: "+";
  position: absolute;
  inset: 6%;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 3px dashed #0a84ff;
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.08);
  color: #0a84ff;
  font: 300 64px/1 "Archivo Sillon", Arial, sans-serif;
  animation: slot-breathe 2.4s ease-in-out infinite;
}
@keyframes slot-breathe { 50% { background: rgba(10, 132, 255, 0.16); } }
/* Disque qui vient d'être ajouté : il se pose. */
[data-pos][data-pop] { animation: slot-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes slot-pop { 0% { scale: 0.4; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-pos][data-pop], .is-editing [data-pos][data-next]::before { animation: none; }
}