/* Apps Galerie et Playlist */

.app__icon--galerie { --icon: linear-gradient(160deg, #3fd2d6, #137a80); }
.app__icon--musique { --icon: linear-gradient(160deg, #ff5c8a, #a3184a); }
.void--galerie .void__icon { background: rgba(63, 210, 214, 0.14); box-shadow: inset 0 0 0 1px rgba(63, 210, 214, 0.3); }
.void--galerie .void__icon svg { stroke: #5fdde0; }
.void--musique .void__icon { background: rgba(255, 92, 138, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 92, 138, 0.3); }
.void--musique .void__icon svg { stroke: #ff7aa0; }

/* Galerie : grille de vignettes carrées */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.shot { position: relative; display: flex; flex-direction: column; gap: 6px; }
.shot__open {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-2);
  cursor: zoom-in;
}
.shot__open img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.shot__open:hover img { transform: scale(1.05); }
.shot .row-actions { font-size: 0.8125rem; }
@container screen (max-width: 680px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .shot__open { border-radius: 3px; }
}

/* en-têtes de mois et total */
.gallery__month { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 2px 6px; }
.gallery__month:first-child { padding-top: 0; }
.gallery__month h3 { margin: 0; font-family: var(--head); font-weight: 700; font-size: 1.125rem; }
.gallery__month span, .gallery__total { color: var(--muted); font-size: 0.8125rem; }
.gallery__total { grid-column: 1 / -1; padding: 16px 0 4px; text-align: center; font-weight: 600; }
.shot__open:focus-visible { outline: 2px solid var(--red, #e3242b); outline-offset: 2px; }

/* Visionneuse */
.member:has(.photo-view) {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 24px));
  height: min(820px, calc(100vh - 24px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: rgb(0 0 0 / var(--pv-fade, 1));
  color: #fff;
  animation: pv-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.member:has(.photo-view):not([open]) { display: none; }
.member:has(.photo-view)::backdrop { background: rgb(0 0 0 / calc(0.7 * var(--pv-fade, 1))); }
/* page publique : écran du téléphone */
body[data-mode="public"] .member:has(.photo-view) {
  position: fixed;
  inset: auto;
  top: var(--pv-top, 20px);
  left: var(--pv-left, 50%);
  width: var(--pv-w, 386px);
  height: var(--pv-h, calc(100vh - 62px));
  margin: 0;
  border-radius: 47px;
}
@media (max-width: 520px) { body[data-mode="public"] .member:has(.photo-view) { border-radius: 0; } }
@keyframes pv-in { from { opacity: 0; transform: scale(0.94); } }

.member:has(.photo-view) #member-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.photo-view { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.photo-view__bar { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 14px 60px 10px; text-align: center; transition: opacity 0.25s; }
body[data-mode="public"] .photo-view__bar { padding-top: 54px; }
.photo-view__bar strong { font-size: 0.9375rem; font-weight: 700; }
.photo-view__bar small { color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; }
.member:has(.photo-view) .member__close {
  z-index: 2;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.25s, background-color 0.2s;
}
body[data-mode="public"] .member:has(.photo-view) .member__close { top: 52px; right: 16px; }
.member:has(.photo-view) .member__close:hover { background: rgba(255, 255, 255, 0.26); }

.photo-view__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; cursor: grab; }
.photo-view__stage:active { cursor: grabbing; }
.photo-view__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; will-change: transform; }
.photo-view__img.is-from-next { animation: pv-from-next 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
.photo-view__img.is-from-prev { animation: pv-from-prev 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pv-from-next { from { opacity: 0.4; transform: translateX(28%); } }
@keyframes pv-from-prev { from { opacity: 0.4; transform: translateX(-28%); } }

.photo-view__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.25s;
}
.photo-view__nav--prev { left: 10px; }
.photo-view__nav--next { right: 10px; }
.photo-view__nav:hover { background: rgba(227, 36, 43, 0.85); }
.photo-view__nav:disabled { opacity: 0; pointer-events: none; }
.photo-view__nav svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* écran tactile : pas de flèches */
@media (hover: none) { body[data-mode="public"] .photo-view__nav { display: none; } }

.photo-view__foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 16px; transition: opacity 0.25s; }
body[data-mode="public"] .photo-view__foot { padding-bottom: 30px; }
.photo-view__foot > span { padding: 0 20px; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.photo-view__strip { position: relative; display: flex; gap: 2px; padding: 0 50%; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.photo-view__strip::-webkit-scrollbar { display: none; }
.photo-view__thumb { flex: none; width: 32px; height: 44px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: #1b1c1f; opacity: 0.55; cursor: pointer; transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s, margin 0.25s; }
.photo-view__thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-view__thumb:hover { opacity: 0.85; }
.photo-view__thumb[aria-current="true"] { width: 52px; margin: 0 6px; opacity: 1; }

/* interface masquée */
.photo-view.is-bare .photo-view__bar,
.photo-view.is-bare .photo-view__foot,
.photo-view.is-bare .photo-view__nav,
.member:has(.photo-view.is-bare) .member__close { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .member:has(.photo-view), .photo-view__img { animation: none !important; }
  .photo-view__strip { scroll-behavior: auto; }
}

/* Playlist */
.playlist { display: flex; flex-direction: column; }

/* Sons ajoutés dans l'admin, façon Spotify */
.pl-sons:not(:empty) { margin-bottom: 20px; }
.sp-head {
  display: flex; flex-direction: column; align-items: center; margin: 0 -16px; padding: 14px 16px 16px; text-align: center;
  background: linear-gradient(180deg, hsl(var(--h) 45% 30%), hsl(var(--h) 35% 16%) 65%, transparent);
  border-radius: 14px 14px 0 0;
}
.sp-head__art {
  display: grid; place-items: center; width: min(220px, 62%); aspect-ratio: 1; margin-bottom: 18px; overflow: hidden; border-radius: 6px;
  background: linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 50) 60% 28%));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.sp-head__art.is-grid { grid-template-columns: 1fr 1fr; place-items: stretch; }
.sp-head__art img { width: 100%; height: 100%; object-fit: cover; }
.sp-head__art svg { width: 38%; height: 38%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.sp-head__kind { align-self: flex-start; margin: 0; font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.sp-head__name { align-self: flex-start; margin: 2px 0 6px; font-family: var(--head); font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.sp-head__sub { align-self: flex-start; margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 0.8125rem; }
.sp-head__sub b { color: #fff; }
.sp-bar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 4px 0 10px; }
.sp-shuffle, .sp-repeat { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.sp-shuffle svg, .sp-repeat svg { width: 26px; height: 26px; fill: none; stroke: #b3b3b3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-shuffle[aria-pressed="true"] svg, .sp-repeat[aria-pressed="true"] svg { stroke: #1ed760; }
.sp-shuffle[aria-pressed="true"]::after, .sp-repeat[aria-pressed="true"]::after { content: ""; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #1ed760; }
.sp-play { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sp-play svg { width: 26px; height: 26px; fill: #fff; }
.sp-play--big { width: 56px; height: 56px; background: #1ed760; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: transform 0.15s, background-color 0.15s; }
.sp-play--big:hover { background: #3be477; transform: scale(1.04); }
.sp-play--big:active { transform: scale(0.95); }
.sp-play--big svg { width: 26px; height: 26px; fill: #0b0b0c; }
.sp-play:focus-visible, .sp-next:focus-visible, .sp-shuffle:focus-visible, .sp-repeat:focus-visible, .sp-row__main:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-row__main {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 6px 0;
  border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sp-row__main:hover { background: rgba(255, 255, 255, 0.05); }
.sp-row__main:disabled { opacity: 0.45; cursor: default; }
.sp-row__art, .sp-mini__art {
  display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 4px;
  background: linear-gradient(135deg, hsl(var(--h) 60% 45%), hsl(calc(var(--h) + 50) 55% 25%));
}
.sp-row__art img, .sp-mini__art img { width: 100%; height: 100%; object-fit: cover; }
.sp-row__art svg, .sp-mini__art svg { width: 45%; height: 45%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-row__txt { display: flex; flex-direction: column; min-width: 0; }
.sp-row__t { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sp-row__a { overflow: hidden; color: #b3b3b3; font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.sp-row__len { color: #b3b3b3; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.sp-row.is-current .sp-row__t { color: #1ed760; }
/* égaliseur animé sur la pochette du son en cours */
.sp-row__main { position: relative; }
.sp-row__eq { display: none; position: absolute; left: 0; top: 6px; width: 48px; height: 48px; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 15px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); }
.sp-row.is-current .sp-row__eq { display: flex; }
.sp-row__eq i { width: 3px; height: 6px; border-radius: 1px; background: #1ed760; }
.sp-row.is-playing .sp-row__eq i { animation: sp-eq 0.9s ease-in-out infinite alternate; }
.sp-row.is-playing .sp-row__eq i:nth-child(2) { animation-delay: -0.4s; }
.sp-row.is-playing .sp-row__eq i:nth-child(3) { animation-delay: -0.7s; }
@keyframes sp-eq { from { height: 4px; } to { height: 18px; } }
.sp-row .row-actions { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
/* mini-lecteur collé en bas */
.sp-mini {
  position: sticky; bottom: 8px; z-index: 5; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 10px;
  margin-top: 14px; padding: 8px 8px 10px; border-radius: 8px; overflow: hidden;
  background: #3a2d33; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.sp-mini[hidden] { display: none; }
.sp-mini .sp-mini__art { width: 40px; height: 40px; }
.sp-mini .sp-repeat svg { width: 20px; height: 20px; }
.sp-mini__txt { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; }
.sp-mini__t { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sp-mini__a { overflow: hidden; color: #b3b3b3; text-overflow: ellipsis; white-space: nowrap; }
.sp-mini__pos { color: #b3b3b3; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.sp-next { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.sp-next svg { width: 22px; height: 22px; fill: #fff; }
.sp-mini__bar { position: absolute; left: 8px; right: 8px; bottom: 0; height: 10px; cursor: pointer; }
.sp-mini__bar::before, .sp-mini__bar span { content: ""; position: absolute; left: 0; bottom: 3px; height: 2px; border-radius: 1px; }
.sp-mini__bar::before { right: 0; background: rgba(255, 255, 255, 0.25); }
.sp-mini__bar span { width: 0; background: #fff; }
/* téléphone : mini-lecteur posé en bas de l'écran, à la hauteur du dock de l'accueil */
.phone .sp-mini {
  position: absolute; left: 14px; right: 14px; bottom: 30px; margin: 0; border-radius: 24px; padding: 10px 12px 12px;
  background: rgba(58, 45, 51, 0.82); border: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
.phone .sp-mini .sp-mini__art { border-radius: 10px; }
.phone .sp-mini__bar { left: 22px; right: 22px; }
.phone .pl-sons:has(.sp-mini:not([hidden])) { padding-bottom: 60px; }
@media (prefers-reduced-motion: reduce) { .sp-row.is-playing .sp-row__eq i { animation: none; height: 12px; } }

/* Fiche plein écran du son en cours */
.sp-mini { cursor: pointer; }
.sp-full {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: flex; flex-direction: column; padding: 18px max(20px, calc((100% - 460px) / 2)) 40px;
  background: linear-gradient(180deg, hsl(var(--h, 200) 40% 30%), hsl(var(--h, 200) 30% 14%) 55%, #121212 85%);
  color: #fff;
  animation: sp-full-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-full[hidden] { display: none; }
.sp-full > * { flex-shrink: 0; } /* paroles longues : rien n'est écrasé, la fiche défile */
.phone .sp-full { position: absolute; border-radius: inherit; padding: 54px 22px 44px; }
@keyframes sp-full-in { from { transform: translateY(40px); opacity: 0; } }
.sp-full__top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin-bottom: 22px; }
.sp-full__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sp-full__close svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-full__from { display: flex; flex-direction: column; margin: 0; text-align: center; font-size: 0.6875rem; line-height: 1.3; }
.sp-full__from span { color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.sp-full__from b { font-size: 0.8125rem; }
.sp-full__art {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; flex: none; overflow: hidden; border-radius: 8px;
  background: linear-gradient(135deg, hsl(var(--h) 60% 45%), hsl(calc(var(--h) + 50) 55% 25%));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.sp-full__art img { width: 100%; height: 100%; object-fit: cover; }
.sp-full__art svg { width: 34%; height: 34%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-full__id { margin: 26px 0 16px; min-width: 0; }
.sp-full__t { margin: 0; font-family: var(--head); font-size: 1.5rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.sp-full__a { margin: 4px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; }
.sp-full__bar { position: relative; height: 16px; cursor: pointer; }
.sp-full__bar::before, .sp-full__bar span { content: ""; position: absolute; left: 0; top: 6px; height: 4px; border-radius: 2px; }
.sp-full__bar::before { right: 0; background: rgba(255, 255, 255, 0.25); }
.sp-full__bar span { width: 0; background: #fff; }
.sp-full__bar span::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.sp-full__times { display: flex; justify-content: space-between; margin: 2px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.sp-full__ctrl { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 28px; }
.sp-full__ctrl .sp-shuffle svg, .sp-full__ctrl .sp-repeat svg { width: 26px; height: 26px; stroke: rgba(255, 255, 255, 0.85); }
.sp-full__ctrl .sp-shuffle[aria-pressed="true"] svg, .sp-full__ctrl .sp-repeat[aria-pressed="true"] svg { stroke: #1ed760; }
.sp-prev { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.sp-prev svg, .sp-full__ctrl .sp-next svg { width: 32px; height: 32px; fill: #fff; }
.sp-full__ctrl .sp-next { width: 44px; height: 44px; }
.sp-play--full { width: 66px; height: 66px; background: #fff; transition: transform 0.15s; }
.sp-play--full:active { transform: scale(0.94); }
.sp-play--full svg { width: 30px; height: 30px; fill: #0b0b0c; }
.sp-prev:focus-visible, .sp-full__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp-full__lyrics { flex: none; padding: 18px 18px 22px; border-radius: 12px; background: hsl(var(--h) 45% 32%); }
.sp-full__lyrics h4 { margin: 0 0 12px; font-family: var(--head); font-size: 1rem; font-weight: 800; }
.sp-full__lyrics p { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sp-full { animation: none; } }


/* Paroles synchronisées */
.sp-lyrics { position: relative; max-height: 340px; overflow-y: auto; scrollbar-width: none; mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); padding: 40px 0; }
.sp-full__lyrics.is-synced { padding-bottom: 12px; }
.sp-full__lyrics.is-synced h4 { margin-bottom: 0; }
.sp-lyrics p { margin: 0 0 10px; font-size: 1.25rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sp-lyrics__line { color: rgba(0, 0, 0, 0.55); cursor: pointer; transition: color 0.25s; }
.sp-lyrics__line.is-past { color: rgba(255, 255, 255, 0.5); }
.sp-lyrics__line.is-on { color: #fff; }
.sp-lyrics__plain { color: rgba(255, 255, 255, 0.7); }

/* Pastille « en lecture » sur l'accueil et dans les autres apps */
.np {
  position: absolute; left: 14px; right: 14px; bottom: 30px; z-index: 25;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px;
  padding: 7px 8px 9px; border-radius: 18px; overflow: hidden;
  background: rgba(40, 32, 37, 0.78); border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  animation: np-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.np[hidden] { display: none; }
/* accueil : version fine posée à la place des points de page, juste au-dessus du dock */
.phone__screen[data-np="home"] .np {
  bottom: var(--np-bottom, 100px); left: 50%; right: auto; width: min(260px, calc(100% - 56px)); transform: translateX(-50%);
  grid-template-columns: minmax(0, 1fr) auto auto; gap: 0; padding: 3px 4px 3px 4px; border-radius: 999px; animation: none;
}
.phone__screen[data-np="home"] .home__dots { visibility: hidden; }
.phone__screen[data-np="home"] .np__art { width: 24px; height: 24px; border-radius: 50%; }
.phone__screen[data-np="home"] .np__open { gap: 8px; }
.phone__screen[data-np="home"] .np__txt { flex-direction: row; gap: 5px; font-size: 0.75rem; }
.phone__screen[data-np="home"] .np__t, .phone__screen[data-np="home"] .np__a { flex: 0 1 auto; min-width: 0; }
.phone__screen[data-np="home"] .np__a::before { content: "· "; }
.phone__screen[data-np="home"] .np .sp-play, .phone__screen[data-np="home"] .np .sp-next { width: 28px; height: 26px; }
.phone__screen[data-np="home"] .np .sp-play svg, .phone__screen[data-np="home"] .np .sp-next svg { width: 16px; height: 16px; }
.phone__screen[data-np="home"] .np__bar { display: none; }
.phone__screen[data-np="app"] .screen { padding-bottom: 104px; }
@keyframes np-in { from { transform: translateY(16px); opacity: 0; } }
.np__open { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.np__art { display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, hsl(var(--h) 60% 45%), hsl(calc(var(--h) + 50) 55% 25%)); }
.np__art img { width: 100%; height: 100%; object-fit: cover; }
.np__art svg { width: 45%; height: 45%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.np__txt { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; line-height: 1.3; }
.np__t { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.np__a { overflow: hidden; color: #b3b3b3; text-overflow: ellipsis; white-space: nowrap; }
.np .sp-next svg { width: 22px; height: 22px; fill: #fff; }
.np__open:focus-visible, .np .sp-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
.np__bar { position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.2); }
.np__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
@media (prefers-reduced-motion: reduce) { .np { animation: none; } .sp-lyrics__line { transition: none; } }

/* Fond d'écran personnalisé, assombri */
.phone__screen[style*="--wallpaper"]::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.55) 100%),
    var(--wallpaper) center / cover no-repeat;
}

/* visionneuse : télécharger (en haut à gauche, face au bouton fermer) */
.photo-view__save {
  position: absolute;
  z-index: 2;
  top: 12px; left: 12px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: opacity 0.25s, background-color 0.2s;
}
body[data-mode="public"] .photo-view__save { top: 52px; left: 16px; }
.photo-view__save:hover { background: rgba(255, 255, 255, 0.26); }
.photo-view__save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.photo-view__save.is-busy { opacity: 0.5; pointer-events: none; }
.photo-view.is-bare .photo-view__save { opacity: 0; pointer-events: none; }

/* Galerie : bouton taille des vignettes */
.gallery__size { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.gallery__size:hover { color: var(--text); }
.gallery__size[aria-pressed="true"] { background: color-mix(in srgb, #3fd2d6 18%, var(--panel-2)); color: #5fdde0; }
.gallery__size svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.gallery--dense { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; }
@container screen (max-width: 680px) {
  .gallery--dense { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .gallery--dense .shot__open { border-radius: 2px; }
}

/* visionneuse : photo zoomée */
.photo-view.is-zoomed .photo-view__stage { cursor: move; }
.photo-view.is-zoomed .photo-view__img { will-change: auto; }
.photo-view.is-zoomed .photo-view__nav { opacity: 0; pointer-events: none; }