/* 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 : lecteur Spotify */
.playlist { display: flex; flex-direction: column; }
.spotify {
  display: block;
  width: 100%;
  height: max(380px, calc(100vh - 360px));
  max-height: 640px;
  border: 0;
  border-radius: 14px;
  background: var(--panel);
}
.phone .spotify { height: calc(min(868px, 100dvh - 40px) - 322px); min-height: 352px; max-height: none; }
@media (max-width: 520px) { .phone .spotify { height: calc(100dvh - 292px); } }

/* Bouton « Écouter sur Spotify » */
.spotify-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #1ed760;
  color: #0b0b0c;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(30, 215, 96, 0.25);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}
.spotify-open:hover { background: #3be477; }
.spotify-open:active { transform: scale(0.97); }

/* Playlists : pochettes au-dessus du lecteur */
.pl-covers { display: flex; gap: 12px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.pl-covers::-webkit-scrollbar { display: none; }
.pl-cover { flex: none; display: flex; flex-direction: column; gap: 6px; width: 84px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pl-cover__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 20% 10%, hsl(calc(var(--h) + 40) 80% 60% / 0.9), transparent 60%),
    linear-gradient(150deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 60) 70% 22%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 18px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--head);
  font-weight: 700;
  font-size: 2.25rem;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.pl-cover:hover .pl-cover__art { opacity: 0.85; }
.pl-cover[aria-selected="true"] .pl-cover__art { opacity: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 2px #1ed760, 0 10px 22px rgba(0, 0, 0, 0.45); }
.pl-cover:active .pl-cover__art { transform: scale(0.96); }
.pl-cover__name { font-size: 0.8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cover[aria-selected="true"] .pl-cover__name { color: var(--text); }
.pl-cover:focus-visible { outline: none; }
.pl-cover:focus-visible .pl-cover__art { outline: 2px solid #1ed760; outline-offset: 2px; }
/* égaliseur */
.pl-eq { position: absolute; right: 7px; bottom: 7px; display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.pl-eq i { width: 3px; border-radius: 1px; background: #1ed760; animation: pl-eq 0.9s ease-in-out infinite alternate; }
.pl-eq i:nth-child(1) { height: 60%; }
.pl-eq i:nth-child(2) { height: 100%; animation-delay: -0.3s; }
.pl-eq i:nth-child(3) { height: 40%; animation-delay: -0.6s; }
@keyframes pl-eq { to { transform: scaleY(0.35); } }
@media (prefers-reduced-motion: reduce) { .pl-eq i { animation: none; } }
.phone .playlist--multi .spotify { height: calc(min(868px, 100dvh - 40px) - 322px - var(--pl-tabs-h, 50px)); min-height: 232px; }
@media (max-width: 520px) { .phone .playlist--multi .spotify { height: calc(100dvh - 292px - var(--pl-tabs-h, 50px)); } }

/* Admin : liste des playlists */
.pl-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.pl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--panel); }
.pl-row__name { font-weight: 600; }
.pl-row__name em { color: var(--muted); font-weight: 400; }
.spotify-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.spotify-open svg { width: 22px; height: 22px; fill: #0b0b0c; stroke: #1ed760; stroke-width: 1.8; stroke-linecap: round; }

/* 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;
}