/* ==========================================================
   AUDIOUS — THEME STEEL
   ========================================================== */
/* ==========================================================
     CSS Variables — Centralized theming
     ========================================================== */
  :root {
    /* Background layers */
    --bg0: #07090c;
    --bg1: #0c1016;
    --panel: rgba(16, 20, 28, 0.72);
    --panel2: rgba(20, 26, 36, 0.90);
    --panel-solid: #0f1520;

    /* Border & line colors */
    --line: rgba(148, 180, 212, 0.13);
    --line2: rgba(148, 180, 212, 0.22);
    --line3: rgba(148, 180, 212, 0.32);

    /* Text colors */
    --text: #dce4ee;
    --muted: rgba(220, 228, 238, 0.68);
    --muted2: rgba(220, 228, 238, 0.46);

    /* Accent colors */
    --blue: #6fa8d0;
    --cyan: #a8c6e0;
    --good: #72bfa0;
    --warn: #c0ae72;
    --bad: #c87272;

    /* Effects */
    --glow: 0 0 18px rgba(100, 160, 210, 0.20), 0 0 42px rgba(160, 198, 228, 0.10);
    --glow-intense: 0 0 24px rgba(100, 160, 210, 0.26), 0 0 64px rgba(160, 198, 228, 0.15);
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.66);
    --shadow2: 0 10px 32px rgba(0, 0, 0, 0.56);

    /* Spacing & sizing */
    --radius: 18px;
    --radius2: 14px;
    --radius-sm: 12px;
    --topbar-h: 64px;
    --footer-h: 92px;
    --maxw: 1350px;

    /* Typography */
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Menlo, Monaco, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-med: 0.25s ease;
  }

  /* ==========================================================
     Accessibility: Reduced motion support
     ========================================================== */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ==========================================================
     Reset & Base
     ========================================================== */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  body {
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
   background:
    radial-gradient(1400px 700px at 15% 5%,  rgba(80, 120, 170, 0.09), transparent 55%),
    radial-gradient(900px 600px at 85% 25%,  rgba(120, 160, 200, 0.07), transparent 55%),
    radial-gradient(700px 500px at 50% 95%,  rgba(60, 100, 150, 0.08), transparent 60%),
    linear-gradient(165deg, #0a0c11 0%, #08090c 40%, #0b0e14 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
  }
  
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;                              /* ← était 0 */
  background-image: url('/assets/images/bg-waves.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;                               /* ← était 0.45 */
}

  /* Disable tap highlight on interactive elements */
  a, button, input, select, textarea, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Active state for buttons - subtle feedback */
  .btn:active {
    transform: scale(0.95);
    opacity: 0.9;
  }

  /* Focus visible for accessibility */
  :focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }

  /* Skip link for keyboard navigation */
  .skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-solid);
    color: var(--text);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line2);
    font-family: var(--mono);
    font-size: 13px;
    text-decoration: none;
    z-index: 1000;
    transition: top var(--transition-fast);
  }

  .skip-link:focus {
    top: 10px;
  }

  /* ==========================================================
     FX Layer — Ambient background effects
     ========================================================== */
  .fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    contain: strict;
  }

  .fx::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(200, 220, 240, 0.025) 0px,
        rgba(200, 220, 240, 0.025) 1px,
        transparent 2px,
        transparent 4px
      ),
      repeating-linear-gradient(
        to right,
        rgba(200, 220, 240, 0.010) 0px,
        rgba(200, 220, 240, 0.010) 1px,
        transparent 2px,
        transparent 40px
      );
    opacity: 0.55;
    mix-blend-mode: overlay;
  }

  .fx::after {
    content: "";
    position: absolute;
    inset: -50px;
    background:
      radial-gradient(ellipse at 30% 40%, rgba(100, 150, 200, 0.08), transparent 50%),
      radial-gradient(ellipse at 70% 70%, rgba(80, 120, 170, 0.06), transparent 50%),
      radial-gradient(ellipse at 50% 10%, rgba(160, 190, 220, 0.05), transparent 45%);
    filter: blur(16px);
    opacity: 0.55;
    transform: translate3d(0, 0, 0);
    animation: drift 12s ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes drift {
    from { transform: translate(-10px, -8px) scale(1.02); }
    to { transform: translate(10px, 8px) scale(1.05); }
  }

  /* ==========================================================
     App Container
     ========================================================== */
  .app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding-bottom: calc(var(--footer-h) + 22px);
  }

  /* ==========================================================
     Topbar
     ========================================================== */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--topbar-h);
    height: auto;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(7, 9, 14, 0.88), rgba(7, 9, 14, 0.55));
    border-bottom: 1px solid var(--line);
  }

  .topbar-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 7px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
  }

  /* Brand */
  .brand {
    order: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
  }

  /* ============================================
   Brand Variant — Equalizer logo mark
   Replace the current .logo + .logo::after
   ============================================ */

.logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  box-shadow: var(--glow);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;

  /* 3 barres EQ ancrées en bas, fond sombre */
  background:
    linear-gradient(to top, var(--cyan), rgba(160, 198, 228, 0.15))
      calc(50% - 7px) calc(100% - 6px) / 4px 11px no-repeat,
    linear-gradient(to top, var(--blue), rgba(100, 160, 210, 0.15))
      50% calc(100% - 6px) / 4px 20px no-repeat,
    linear-gradient(to top, #b8d0e8, rgba(184, 208, 232, 0.16))
      calc(50% + 7px) calc(100% - 6px) / 4px 7px no-repeat,
    linear-gradient(145deg, #0b1018 55%, rgba(100, 160, 210, 0.08));

  animation: eq-logo 2s ease-in-out infinite;
}

/* Supprime l'ancien sheen */
.logo::after { display: none; }

@keyframes eq-logo {
  0%   { background-size: 4px 11px, 4px 20px, 4px  7px, auto; }
  25%  { background-size: 4px 18px, 4px  9px, 4px 16px, auto; }
  50%  { background-size: 4px  7px, 4px 22px, 4px 12px, auto; }
  75%  { background-size: 4px 20px, 4px 13px, 4px 19px, auto; }
  100% { background-size: 4px 11px, 4px 20px, 4px  7px, auto; }
}

/* Optionnel : titre avec gradient cyan → blanc */
.brand .title .highlight {
  color: #edf3f8;
  text-shadow: 0 0 14px rgba(168, 200, 228, 0.22);
}

  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .brand .title {
    margin: 0;
    font-family: var(--mono);
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 15px;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .brand .title .highlight {
    color: #edf3f8;
    text-shadow: 0 0 14px rgba(168, 200, 228, 0.22);
  }

  .brand .sub {
    margin: 0;
    font-family: var(--mono);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Navigation wrapper */
  .nav-wrap {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
  }

  /* Burger button */
  .burger {
    display: none;
    align-items: center;
    gap: 6px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    padding: 0 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  .burger:hover,
  .burger:focus-visible {
    background: rgba(100, 160, 210, 0.08);
  }

  .burger-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 14px;
  }

  .burger-icon span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .burger[aria-expanded="true"] .burger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(3px, 4px);
  }

  .burger[aria-expanded="true"] .burger-icon span:nth-child(2) {
    opacity: 0;
  }

  .burger[aria-expanded="true"] .burger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -4px);
  }

  /* Navigation - alignée à droite */
  nav.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .nav a {
    text-decoration: none;
    color: rgba(220, 228, 238, 0.75);
    border: 1px solid transparent;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
  }

  .nav a:hover,
  .nav a:focus-visible {
    color: var(--text);
    background: transparent;
    border-color: transparent;
    border-bottom-color: rgba(111, 168, 208, 0.7);
    border-radius: 0;
  }

  .nav a.active,
  .nav a[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
    background: transparent;
    border-color: transparent;
    border-bottom-color: rgba(111, 168, 208, 0.7);
    border-radius: 0;
  }

  /* Logout button in nav */
  .nav-logout {
    text-decoration: none;
    color: var(--muted);
    border: 1px solid transparent;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
  }

  .nav-logout:hover,
  .nav-logout:focus-visible {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.3);
  }

  .nav-logout[hidden] {
    display: none;
  }

  /* Language switcher */
  .lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
  }

  .lang-btn {
    text-decoration: none;
    color: var(--muted);
    border: 1px solid transparent;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  .lang-btn:hover,
  .lang-btn:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, .06);
    border-color: var(--line2);
  }

  .lang-btn.active {
    color: var(--cyan);
    border-color: var(--line2);
    background: rgba(255, 255, 255, .04);
  }

  /* Search - compact inline */
  form.search {
    order: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 100%;
    min-width: 120px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(16, 20, 28, 0.50);
    border: 1px solid var(--line);
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  form.search:focus-within {
    border-color: var(--line2);
    background: rgba(16, 20, 28, 0.70);
  }

  .search-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--muted2);
  }

  form.search input {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text);
    font-family: var(--mono);
    letter-spacing: 0.03em;
    font-size: 12px;
  }

  form.search input::placeholder {
    color: var(--muted2);
  }

  /* ==========================================================
     Main Layout
     ========================================================== */
  main {
    max-width: var(--maxw);
    margin: 10px auto 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  @media (max-width: 560px) {
    main {
      margin: 6px auto 0;
      padding: 0 8px;
      gap: 10px;
    }
  }

  /* ==========================================================
     Panels
     ========================================================== */
  .panel {
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.64), rgba(16, 20, 28, 0.42));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
  }

  .panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(180, 210, 240, 0.04) 0%, transparent 60%),
      radial-gradient(600px 180px at 50% 0%,  rgba(130, 175, 220, 0.08), transparent 70%);
    pointer-events: none;
  }

  /* ==========================================================
     Tags - Inline in Header (line 2)
     ========================================================== */
  .tags-inline {
    order: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tags-inline[hidden] {
    display: none;
  }

  .tags-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tags-scroll::-webkit-scrollbar {
    display: none;
  }

  .tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(10, 12, 18, 0.55);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    user-select: none;
  }

  .tag-pill:hover,
  .tag-pill:focus-visible {
    background: rgba(100, 160, 210, 0.13);
    border-color: var(--line2);
  }

  .tag-pill.active {
    border-color: rgba(148, 180, 212, 0.30);
    background: rgba(160, 198, 228, 0.10);
  }

  .tag-pill .count {
    color: var(--cyan);
    font-size: 9px;
    opacity: 0.8;
  }

  .tag-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

  .tag-controls .btn.tiny {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(148, 180, 212, 0.14);
    border-color: rgba(148, 180, 212, 0.22);
    color: var(--muted);
  }

  .tag-controls .btn.tiny:hover,
  .tag-controls .btn.tiny:focus-visible {
    background: rgba(148, 180, 212, 0.22);
    border-color: rgba(148, 180, 212, 0.36);
    color: var(--text);
    box-shadow: none;
    transform: none;
  }

  /* Active tags - under header */
  .active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 10px;
    max-width: var(--maxw);
    margin: 0 auto;
  }

  .active-tags:empty {
    display: none;
  }

  .active-tags .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 180, 212, 0.22);
    background: rgba(160, 198, 228, 0.07);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .active-tags .chip::after {
    content: "×";
    opacity: 0.7;
    font-size: 13px;
  }

  .active-tags .chip:hover,
  .active-tags .chip:focus-visible {
    background: rgba(160, 198, 228, 0.13);
    border-color: rgba(148, 180, 212, 0.38);
  }

  /* ==========================================================
     Results List
     ========================================================== */
  .list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ==========================================================
     Song Card
     ========================================================== */
  .song {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(10, 12, 18, 0.42);
    border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .song:hover {
    border-color: var(--line2);
  }

  .song::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(100, 160, 210, 0.09), transparent 30%, transparent 70%, rgba(160, 198, 228, 0.06));
    opacity: 0.55;
    pointer-events: none;
  }

  .art {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: rgba(16, 20, 28, 0.55);
    border: 1px solid var(--line);
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: var(--glow);
  }

  .art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .meta .title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .meta .line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    min-width: 0;
  }

  .meta .artist,
  .meta .album,
  .meta .dur {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* User links in cards */
  .meta .line a.user-link {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
  }

  .meta .line a.user-link:hover,
  .meta .line a.user-link:focus-visible {
    color: var(--text);
    text-shadow: 0 0 12px rgba(160, 198, 228, 0.45);
  }

  .song-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }

  .song-tag {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(16, 20, 28, 0.45);
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(220, 228, 238, 0.92);
    letter-spacing: 0.04em;
  }

  .song-tag--more {
    color: var(--cyan);
    border-color: rgba(160, 198, 228, 0.15);
    background: rgba(160, 198, 228, 0.07);
  }

  /* ── Morceau épinglé (lien de partage /track/:id) ─────────── */
  .song--pinned {
    position: relative;
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .25);
    margin-bottom: 1.5rem;
  }

  .song-pinned-label {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: .18em .55em;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .4);
    border-radius: 0 0 5px 0;
    pointer-events: none;
    user-select: none;
  }

  /* ==========================================================
     Profile Card
     ========================================================== */
  .profile-card {
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.64), rgba(16, 20, 28, 0.42));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
  }

  .profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(650px 220px at 20% 0%, rgba(100, 160, 210, 0.10), transparent 60%),
      radial-gradient(650px 220px at 80% 0%, rgba(160, 198, 228, 0.07), transparent 60%);
    pointer-events: none;
  }

  .profile-banner {
    height: 52px;
    background: 
      linear-gradient(135deg, rgba(130, 175, 220, 0.12), rgba(180, 210, 240, 0.06)),
      linear-gradient(to right, rgba(220, 235, 250, 0.03) 0%, transparent 50%, rgba(220, 235, 250, 0.02) 100%),
      linear-gradient(to bottom, rgba(16, 20, 28, 0.3), rgba(16, 20, 28, 0.8));
    position: relative;
    overflow: hidden;
  }

  .profile-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(148, 180, 212, 0.03) 2px,
        rgba(148, 180, 212, 0.03) 4px
      );
    opacity: 0.5;
  }

  .profile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-content {
    padding: 0 16px 10px;
    position: relative;
    z-index: 1;
  }

  .profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid var(--bg0);
    background: 
      radial-gradient(circle at 30% 30%, rgba(148, 180, 212, 0.22), transparent 50%),
      radial-gradient(circle at 70% 70%, rgba(100, 160, 210, 0.17), transparent 55%),
      linear-gradient(135deg, rgba(100, 160, 210, 0.15), var(--panel-solid));
    box-shadow: var(--glow), 0 4px 20px rgba(0, 0, 0, 0.4);
    margin-top: -28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 24px;
    font-weight: 800;
    color: var(--cyan);
    text-shadow: 0 0 20px rgba(160, 198, 228, 0.45);
    overflow: hidden;
  }

  .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-info {
    margin-top: 8px;
  }

  .profile-username {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.02em;
  }

  .profile-handle {
    margin: 4px 0 0;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--cyan);
    letter-spacing: 0.04em;
  }

  .profile-bio {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
  }

  .profile-meta {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted2);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .profile-meta svg {
    width: 12px;
    height: 12px;
  }

  .profile-stats {
    display: flex;
    gap: 18px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .profile-stat {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    min-width: unset;
    flex: none;
    transition: none;
  }

  .profile-stat:hover {
    border-color: transparent;
    background: none;
  }

  .profile-stat + .profile-stat::before {
    content: "·";
    margin-right: 0;
    padding-right: 18px;
    color: var(--line3);
    font-size: 14px;
    align-self: center;
  }

  .profile-stat-value {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }

  .profile-stat-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted2);
    text-transform: none;
    letter-spacing: 0.04em;
    margin-top: 0;
  }

  .profile-stat--highlight .profile-stat-value {
    color: var(--cyan);
    text-shadow: 0 0 15px rgba(148, 180, 212, 0.36);
  }

  /* Follow button */
  .profile-follow {
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }

  .profile-follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 28px;
    min-width: 140px;
    border: 1px solid var(--cyan);
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(160, 198, 228, 0.13), rgba(100, 160, 210, 0.09));
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .profile-follow-btn:hover:not(:disabled),
  .profile-follow-btn:focus-visible:not(:disabled) {
    background: linear-gradient(135deg, rgba(148, 180, 212, 0.22), rgba(100, 160, 210, 0.17));
    box-shadow: 0 0 20px rgba(148, 180, 212, 0.26), var(--glow);
    transform: translateY(-1px);
  }

  .profile-follow-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
  }

  .profile-follow-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .profile-follow-btn.is-following {
    background: rgba(16, 20, 28, 0.6);
    border-color: var(--line2);
    color: var(--muted);
  }

  .profile-follow-btn.is-following:hover:not(:disabled) {
    border-color: var(--bad);
    color: var(--bad);
    background: rgba(70, 120, 200, 0.10);
  }

  .profile-edit {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
  }

  .profile-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    min-width: unset;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--muted2);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color var(--transition-fast);
  }

  .profile-edit-btn svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
    flex-shrink: 0;
  }

  .profile-edit-btn:hover,
  .profile-edit-btn:focus-visible {
    color: var(--cyan);
    background: none;
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  .profile-edit-btn:active {
    transform: none;
  }

  /* ==========================================================
     Profile body — sections intégrées dans la card
     ========================================================== */
  .profile-body {
    padding: 0 16px 20px;
    position: relative;
    z-index: 1;
  }

  .profile-section:empty {
    display: none;
  }

  /* ==========================================================
     User Content Sections (Playlists & Likes)
     ========================================================== */
  .user-section {
    margin-top: 28px;
  }

  .user-section-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }

  .user-section-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .user-section .empty {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
  }

  @media (max-width: 560px) {
    .profile-banner {
      height: 65px;
    }

    .profile-avatar {
      width: 70px;
      height: 70px;
      margin-top: -28px;
      font-size: 24px;
    }

    .profile-content {
      padding: 0 16px 12px;
    }

    .profile-username {
      font-size: 18px;
    }

    .profile-follow-btn {
      padding: 10px 24px;
      min-width: 140px;
      font-size: 12px;
    }
  }

  /* ==========================================================
     User Card (Search Results)
     ========================================================== */
  .user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius);
    background: rgba(10, 12, 18, 0.42);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .user-card:hover,
  .user-card:focus-visible {
    border-color: var(--line2);
    background: rgba(100, 160, 210, 0.08);
    outline: none;
  }

  .user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(100, 160, 210, 0.15), var(--panel-solid));
    border: 2px solid var(--line2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .user-initials {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 800;
    color: var(--cyan);
    text-shadow: 0 0 15px rgba(148, 180, 212, 0.36);
  }

  .user-info {
    flex: 1;
    min-width: 0;
  }

  .user-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-handle {
    margin: 2px 0 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    opacity: 0.8;
  }

  .user-bio {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .user-action {
    flex-shrink: 0;
  }

  .user-action .btn {
    width: auto;
    height: 36px;
    padding: 0 16px;
    font-size: 12px;
    border-color: rgba(148, 180, 212, 0.22);
    background: rgba(160, 198, 228, 0.07);
    color: var(--cyan);
  }

  .user-action .btn:hover {
    background: rgba(160, 198, 228, 0.13);
    border-color: rgba(148, 180, 212, 0.38);
  }

  @media (max-width: 560px) {
    .user-card {
      padding: 12px;
      gap: 12px;
    }

    .user-avatar {
      width: 44px;
      height: 44px;
    }

    .user-initials {
      font-size: 14px;
    }

    .user-name {
      font-size: 14px;
    }

    .user-bio {
      display: none;
    }

    .user-action .btn {
      height: 32px;
      padding: 0 12px;
      font-size: 11px;
    }
  }

  /* ==========================================================
     Buttons
     ========================================================== */
  .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius2);
    border: 1px solid var(--line);
    background: rgba(16, 20, 28, 0.52);
    color: var(--text);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    user-select: none;
    font-family: var(--mono);
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
  }

  .btn span {
    color: inherit;
  }

  .btn:hover,
  .btn:focus-visible {
    transform: translateY(-1px);
    background: rgba(100, 160, 210, 0.10);
    border-color: var(--line2);
    box-shadow: var(--glow);
    color: var(--text);
  }

  .btn:active {
    color: var(--text);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .btn.primary {
    background: rgba(160, 198, 228, 0.09);
    border-color: rgba(148, 180, 212, 0.18);
    color: var(--cyan);
  }

  .btn.primary span {
    color: var(--cyan);
  }

  .btn.primary:hover,
  .btn.primary:focus-visible,
  .btn.primary:active {
    background: rgba(148, 180, 212, 0.12);
    border-color: rgba(148, 180, 212, 0.26);
    color: var(--cyan);
  }

  .btn.is-on {
    border-color: var(--line3);
    background: rgba(148, 180, 212, 0.12);
    box-shadow: var(--glow);
  }

  .btn.tiny {
    width: auto;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
  }

  /* Back navigation button — compact inline link style */
  .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
  }

  .btn-back:hover,
  .btn-back:focus-visible {
    color: var(--text);
    border-color: var(--line2);
    background: rgba(255, 255, 255, 0.04);
  }

  /* Loading spinner for buttons */
  .btn.loading {
    position: relative;
    color: transparent;
  }

  .btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* Likes badge */
  .likes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 10px;
    min-width: 0;
    width: auto;
    border-radius: var(--radius2);
    border: 1px solid var(--line);
    background: rgba(10, 14, 20, 0.38);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
    user-select: none;
  }

  .likes strong {
    color: var(--text);
    font-weight: 800;
  }

  /* ==========================================================
     Empty State & Loader
     ========================================================== */
  .empty {
    padding: 20px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: rgba(10, 12, 18, 0.35);
    text-align: center;
  }

  .loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
  }

  .loader[hidden] {
    display: none;
  }

  .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: var(--glow);
    animation: pulse 1s ease-in-out infinite;
  }

  .dot:nth-child(2) { animation-delay: 0.12s; opacity: 0.9; }
  .dot:nth-child(3) { animation-delay: 0.24s; opacity: 0.8; }

  @keyframes pulse {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-4px); opacity: 1; }
  }

  /* ==========================================================
     Footer Player
     ========================================================== */
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h);
    z-index: 60;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(8, 11, 18, 0.15), rgba(8, 11, 18, 0.78));
    border-top: 1px solid var(--line);
  }

  .footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    height: 100%;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .footer-art {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line2);
    background: rgba(16, 20, 28, 0.55);
    box-shadow: var(--glow);
    flex: 0 0 auto;
  }

  .footer-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .footer-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .footer-title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .footer-sub {
    margin: 0;
    font-family: var(--mono);
    color: var(--muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.04em;
  }

  .timeline {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .timeline span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted2);
    width: 54px;
    text-align: center;
    flex: 0 0 auto;
  }

  .timeline input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--line);
    border-radius: 2px;
    cursor: pointer;
  }

  .timeline input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: var(--glow);
    cursor: pointer;
    transition: transform var(--transition-fast);
  }

  .timeline input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
  }

  .timeline input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: var(--glow);
    cursor: pointer;
  }

  /* testttt */
  .timeline input[type="range"]{
  --p: 0%;
  background: linear-gradient(
  to right,
  var(--blue) 0%,
  var(--blue) var(--p),
  var(--line) var(--p),
  var(--line) 100%
  );
  }

  .timeline input[type="range"]::-moz-range-progress{
  height: 4px;
  background: var(--blue);
  border-radius: 2px;
  }
  
  .footer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .footer-controls .btn {
    width: 40px;
    height: 40px;
    border-radius: 15px;
  }

  /* Hide mobile timeline on desktop */
  .footer-timeline-mobile {
    display: none;
  }

  /* Mobile footer - compact vertical layout */
  @media (max-width: 680px) {
    :root {
      --footer-h: 110px;
    }

    .footer-inner {
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      padding: 8px 16px;
      gap: 6px;
    }

    /* Hide artwork on mobile */
    .footer-art {
      display: none;
    }

    /* Track info - centered */
    .footer-info {
      order: 1;
      text-align: center;
      gap: 2px;
    }

    .footer-title {
      font-size: 13px;
      font-weight: 700;
    }

    .footer-sub {
      font-size: 10px;
    }

    /* Hide timeline in info on mobile - use mobile timeline */
    .footer-info .timeline {
      display: none;
    }

    /* Timeline - row 2 */
    .footer-timeline-mobile {
      display: flex;
      order: 2;
      width: 100%;
      gap: 8px;
      align-items: center;
      margin-bottom: 4px;
    }

    .footer-timeline-mobile span {
      width: 36px;
      font-size: 10px;
      text-align: center;
    }

    .footer-timeline-mobile input[type="range"] {
      flex: 1;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: var(--line);
      border-radius: 2px;
      cursor: pointer;
      --p: 0%;
      background: linear-gradient(
        to right,
        var(--cyan) 0%,
        var(--cyan) var(--p),
        var(--line) var(--p),
        var(--line) 100%
      );
    }

    .footer-timeline-mobile input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: var(--glow);
      cursor: pointer;
    }

    .footer-timeline-mobile input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border: none;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: var(--glow);
      cursor: pointer;
    }

    .footer-timeline-mobile input[type="range"]::-moz-range-progress {
      height: 4px;
      background: var(--cyan);
      border-radius: 2px;
    }

    /* Controls - row 3, centered */
    .footer-controls {
      order: 3;
      justify-content: center;
      gap: 6px;
    }

    .footer-controls .btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 13px;
    }

    /* Play button bigger */
    .footer-controls #footer-play-button {
      width: 44px;
      height: 44px;
      font-size: 16px;
    }

    /* Hide secondary controls on mobile, but keep fullscreen */
    .footer-controls #footer-like-button,
    .footer-controls #footer-shuffle-button,
    .footer-controls #footer-repeat-button {
      display: none;
    }

    /* Keep fullscreen button visible */
    .footer-controls #fullscreen-toggle {
      display: inline-flex;
    }
  }

  /* Very small screens */
  @media (max-width: 400px) {
    :root {
      --footer-h: 100px;
    }

    .footer-inner {
      padding: 6px 12px;
      gap: 4px;
    }

    .footer-title {
      font-size: 12px;
    }

    .footer-controls .btn {
      width: 32px;
      height: 32px;
      font-size: 11px;
    }

    .footer-controls #footer-play-button {
      width: 40px;
      height: 40px;
      font-size: 14px;
    }
  }

  /* ==========================================================
     Toast Notifications
     ========================================================== */
  .toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--footer-h) + 14px);
    transform: translateX(-50%) translateY(10px);
    z-index: 70;
    background: var(--panel-solid);
    border: 1px solid var(--line);
    border-radius: var(--radius2);
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-med), transform var(--transition-med);
  }

  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* ==========================================================
     Responsive Breakpoints
     ========================================================== */

  @media (max-width: 1280px) {
    .burger { display: inline-flex; }
    .topbar-inner { 
      position: relative; 
      flex-wrap: wrap;
      padding: 6px 12px; /* Réduit de 10px 16px */
    }
    .brand { 
      order: 1;
      flex: 1 1 auto; 
      min-width: 0;
    }

    .nav-wrap {
      order: 2;
      position: relative;
      width: auto;
      flex: 0 0 auto;
      z-index: 200;
    }

    form.search {
      order: 3;
      flex: 1 0 100%;
      z-index: 10;
      position: relative;
      height: 36px;
      margin-top: 0;
    }

    .tags-inline {
      order: 4;
      flex: 1 0 100%;
      margin-top: 0;
    }

    nav.nav {
      display: none;
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      left: auto;
      min-width: 260px;
      z-index: 300;
      padding: 12px;
      border-radius: var(--radius);
      background: rgba(8, 11, 18, 0.98);
      border: 1px solid var(--line2);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      flex-direction: column;
      gap: 4px;
    }

    nav.nav.open { display: flex; }

    nav.nav .lang-switcher {
      border-left: none;
      margin-left: 0;
      padding-left: 0;
    }

    nav.nav a,
    nav.nav .nav-logout {
      width: 100%;
      padding: 10px 12px;
    }

    nav.nav .nav-logout {
      border-radius: 8px;
      justify-content: center;
      text-align: center;
      color: var(--muted);
      border-color: var(--line2);
      margin-top: 4px;
    }

    nav.nav a.active,
    nav.nav a[aria-current="page"] {
    border-color: transparent;
    border-radius: 8px;
    border-left: 2px solid rgba(111, 168, 208, 0.7);
    background: rgba(111, 168, 208, 0.06);
    padding-left: 10px; /* compense les 2px du border-left pour garder l'alignement */
    }

    nav.nav a:hover,
    nav.nav a:focus-visible {
    border-color: transparent;
    border-radius: 8px;
    }
  }

  @media (max-width: 560px) {
    .topbar {
      min-height: 52px; /* Réduit de 64px */
    }
    
    .brand .sub { display: none; }
    
    .brand {
      gap: 5px;
    }

    .logo {
      width: 28px;
      height: 28px;
    }

    .brand .title {
      position: relative;
      top: 2px;
      font-size: 13px;
    }
    
    .burger {
      height: 28px; /* Réduit de 32px */
      padding: 0 8px; /* Réduit de 0 10px */
      font-size: 10px; /* Réduit de 11px */
    }
    
    .burger-icon {
      width: 12px; /* Réduit de 14px */
      gap: 2.5px; /* Réduit de 3px */
    }
    
    form.search {
      height: 32px; /* Réduit de 36px */
      margin-top: 0;
    }
    
    form.search input {
      font-size: 12px; /* Réduit de 13px */
    }
    
    nav.nav {
      min-width: 220px; /* Réduit de 260px */
      padding: 8px; /* Réduit de 12px */
    }
    
    nav.nav a {
      padding: 8px 10px; /* Réduit de 10px 12px */
      font-size: 10px; /* Réduit de 11px */
      height: 28px; /* Réduit de 32px */
    }
    
    /* Hide artist/album in footer on small mobile */
    .footer-sub {
      display: none;
    }
    
    /* Hide album in fullscreen on small mobile */
    .fullscreen-album {
      display: none;
    }

    /* Header plus compact */
    .topbar-inner {
      padding: 8px 12px;
      gap: 6px 10px;
    }

    form.search {
      height: 34px;
      margin-top: 0;
    }

    .tags-inline {
      margin-top: 0;
      gap: 6px;
    }

    .tag-pill {
      height: 28px;
      padding: 0 9px;
      font-size: 10px;
    }

    .tag-controls .btn.tiny {
      width: 26px;
      height: 26px;
      font-size: 11px;
    }

    /* Liste plus compacte */
    .list {
      gap: 8px;
    }
    
    /* Song cards compactes sur mobile */
    .song {
      padding: 10px;
      gap: 10px;
      border-radius: 12px;
    }

    .song::before {
      display: none;
    }

    .art {
      width: 50px;
      height: 50px;
      border-radius: 8px;
    }

    .meta {
      gap: 2px;
    }

    .meta .title {
      font-size: 13px;
    }

    .meta .line {
      gap: 4px;
      font-size: 10px;
    }

    .meta .artist,
    .meta .album,
    .meta .dur {
      font-size: 10px;
    }

    /* Masquer album sur mobile */
    .meta .album {
      display: none;
    }

    /* Tags plus petits */
    .song-tags {
      display: none;
    }

    /* Actions compactes */
    .actions {
      gap: 4px;
    }

    .actions .btn {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      font-size: 12px;
    }

    /* Masquer certains boutons sur mobile */
    .actions .song-share,
    .actions .likes {
      display: none;
    }
    
    nav.nav a.active,
    nav.nav a[aria-current="page"] {
    border-left: 2px solid rgba(111, 168, 208, 0.7);
    border-radius: 8px;
    background: rgba(111, 168, 208, 0.06);
    padding-left: 8px; /* ajusté au padding réduit du 560px */
    }
  }

  /* Très petits écrans */
  @media (max-width: 400px) {
    /* Header encore plus compact */
    .topbar-inner {
      padding: 6px 10px;
      gap: 4px 8px;
    }

    /* Logo et titre : taille définie à ≤560px, inchangée ici */

    form.search {
      height: 32px;
      padding: 0 8px;
      margin-top: 0;
    }

    .tags-inline {
      margin-top: 0;
      gap: 4px;
    }

    .tag-pill {
      height: 26px;
      padding: 0 7px;
      font-size: 9px;
    }

    .tag-controls .btn.tiny {
      width: 24px;
      height: 24px;
      font-size: 10px;
    }

    /* Liste encore plus compacte */
    .list {
      gap: 6px;
    }

    .song {
      padding: 8px;
      gap: 8px;
    }

    .art {
      width: 44px;
      height: 44px;
    }

    .meta .title {
      font-size: 12px;
    }

    .meta .line {
      font-size: 9px;
    }

    .actions .btn {
      width: 30px;
      height: 30px;
      font-size: 11px;
    }
  }

  /* ==========================================================
     Visually Hidden (Screen reader only)
     ========================================================== */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ==========================================================
     Fullscreen Overlay
     ========================================================== */
  .fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  .fullscreen-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .fullscreen-overlay.active[aria-hidden="true"] {
    aria-hidden: false;
  }

  /* Background with blurred artwork */
  .fullscreen-bg {
    position: absolute;
    inset: -50px;
    background-size: cover;
    background-position: center;
    filter: blur(60px) brightness(0.4) saturate(1.2);
    transform: scale(1.1);
    z-index: -2;
  }

  .fullscreen-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: 
      radial-gradient(ellipse at 50% 30%, rgba(160, 198, 228, 0.13), transparent 60%),
      radial-gradient(ellipse at 20% 80%, rgba(100, 160, 210, 0.10), transparent 50%),
      linear-gradient(180deg, rgba(5, 7, 12, 0.6), rgba(5, 7, 12, 0.9));
  }

  /* Scanlines effect */
  .fullscreen-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 10;
    opacity: 0.3;
  }

  /* Close button */
  .fullscreen-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line2);
    background: rgba(16, 20, 28, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    z-index: 20;
  }

  .fullscreen-close:hover,
  .fullscreen-close:focus-visible {
    transform: scale(1.1);
    background: rgba(100, 160, 210, 0.17);
    border-color: var(--cyan);
    box-shadow: var(--glow);
  }

  /* Content container */
  .fullscreen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    z-index: 5;
  }

  /* Artwork */
  .fullscreen-artwork {
    width: min(70vw, 380px);
    height: min(70vw, 380px);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line2);
    box-shadow: 
      0 30px 80px rgba(0, 0, 0, 0.6),
      var(--glow-intense);
    position: relative;
    animation: artwork-float 6s ease-in-out infinite;
  }

  @keyframes artwork-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .fullscreen-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .fullscreen-artwork::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    );
    pointer-events: none;
  }

  /* Track info */
  .fullscreen-info {
    text-align: center;
    max-width: 100%;
  }

  .fullscreen-title {
    margin: 0 0 8px;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--text);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fullscreen-artist {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: clamp(14px, 3vw, 16px);
    color: var(--cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(148, 180, 212, 0.36);
  }

  .fullscreen-album {
    margin: 0;
    font-family: var(--mono);
    font-size: clamp(12px, 2.5vw, 14px);
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* Progress bar */
  .fullscreen-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 400px;
  }

  .fullscreen-progress > span {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    min-width: 45px;
    text-align: center;
  }

  .fullscreen-progress-bar {
    flex: 1;
    height: 30px;
    background: transparent;
    cursor: pointer;
    position: relative;
  }

  /* Fond visible de la barre */
  .fullscreen-progress-bar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: rgba(120, 190, 255, 0.15);
    border-radius: 3px;
    transition: height 0.15s ease;
  }

  .fullscreen-progress-bar:hover::before {
    height: 8px;
  }

  .fullscreen-progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    width: 0%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    border-radius: 3px;
    transition: width 0.1s linear, height 0.15s ease;
  }

  .fullscreen-progress-bar:hover .fullscreen-progress-fill {
    height: 8px;
  }

  .fullscreen-progress-fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--cyan);
    border-radius: 50%;
    box-shadow: var(--glow);
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  .fullscreen-progress-bar:hover .fullscreen-progress-fill::after {
    opacity: 1;
  }

  /* Controls */
  .fullscreen-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .fs-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    background: rgba(16, 20, 28, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .fs-btn:hover,
  .fs-btn:focus-visible {
    transform: scale(1.08);
    background: rgba(100, 160, 210, 0.13);
    border-color: var(--line3);
    box-shadow: var(--glow);
  }

  .fs-btn.is-on {
    border-color: var(--cyan);
    background: rgba(160, 198, 228, 0.13);
    box-shadow: var(--glow);
  }

  .fs-btn--play {
    width: 72px;
    height: 72px;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(148, 180, 212, 0.18), rgba(100, 160, 210, 0.13));
    border-color: var(--cyan);
    box-shadow: var(--glow);
  }

  .fs-btn--play:hover,
  .fs-btn--play:focus-visible {
    transform: scale(1.1);
    box-shadow: var(--glow-intense);
  }

  /* Responsive adjustments */
  @media (max-width: 560px) {
    .fullscreen-content {
      gap: 20px;
      padding: 16px;
    }

    .fullscreen-artwork {
      width: min(85vw, 300px);
      height: min(85vw, 300px);
    }

    .fullscreen-close {
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
    }

    .fs-btn {
      width: 44px;
      height: 44px;
      font-size: 14px;
    }

    .fs-btn--play {
      width: 60px;
      height: 60px;
      font-size: 20px;
    }

    .fullscreen-controls {
      gap: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fullscreen-artwork {
      animation: none;
    }
  }

  /* ==========================================================
     Upload Modal
     ========================================================== */
  .up-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .up-modal[hidden] {
    display: none;
  }

  .up-dialog {
    position: relative;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(7, 10, 16, 0.97);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    padding: 18px;
  }

  .up-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(16, 20, 28, 0.6);
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  .up-close:hover,
  .up-close:focus-visible {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
  }

  .up-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .up-header h2 {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .up-sub {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.03em;
  }

  .up-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .up-drop {
    position: relative;
    border: 2px dashed var(--line2);
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .up-drop:hover,
  .up-drop:focus-visible,
  .up-drop.dragging {
    border-color: var(--cyan);
    background: rgba(148, 180, 212, 0.05);
  }

  .up-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .up-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
  }

  .up-icon {
    width: 40px;
    height: 40px;
    color: var(--cyan);
    opacity: 0.8;
  }

  .up-cta strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
  }

  .up-link {
    color: var(--cyan);
    text-decoration: underline;
  }

  .up-hint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
  }

  .up-filechip {
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .up-filechip.hidden {
    display: none;
  }

  .up-filechip.ok {
    background: rgba(148, 180, 212, 0.09);
    border: 1px solid rgba(148, 180, 212, 0.26);
    color: var(--cyan);
  }

  .up-filechip.bad {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
  }

  .up-filechip .size {
    opacity: 0.7;
    font-size: 11px;
  }

  .up-progress {
    position: relative;
    height: 6px;
    background: rgba(16, 20, 28, 0.6);
    border-radius: 3px;
    overflow: hidden;
  }

  .up-progress.hidden {
    display: none;
  }

  .up-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cyan), var(--accent));
    border-radius: 3px;
    transition: width 0.2s ease;
  }

  .up-pct {
    position: absolute;
    right: 0;
    top: -18px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--cyan);
  }

  .up-actions {
    display: flex;
    gap: 10px;
  }

  .up-btn {
    flex: 1;
    height: 40px;
    border: 1px solid var(--line2);
    border-radius: 8px;
    background: rgba(160, 198, 228, 0.10);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  }

  .up-btn:hover:not(:disabled),
  .up-btn:focus-visible:not(:disabled) {
    background: rgba(148, 180, 212, 0.18);
    border-color: var(--cyan);
  }

  .up-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .up-btn.ghost {
    background: transparent;
    color: var(--muted);
    border-color: var(--line);
  }

  .up-btn.ghost:hover,
  .up-btn.ghost:focus-visible {
    background: rgba(100, 160, 210, 0.09);
    border-color: var(--line2);
    color: var(--text);
  }

  .up-msg {
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    min-height: 20px;
  }

  .up-msg .ok {
    color: var(--cyan);
  }

  .up-msg .err {
    color: #ff6b6b;
  }

  /* ==========================================================
     Edit Profile Modal
     ========================================================== */
  .ep-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 7, 12, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .ep-modal[hidden] {
    display: none;
  }

  .ep-dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.95), rgba(10, 14, 20, 0.98));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), var(--glow);
    padding: 28px;
  }

  .ep-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .ep-close:hover,
  .ep-close:focus-visible {
    background: rgba(70, 120, 200, 0.14);
    border-color: var(--bad);
    color: var(--bad);
  }

  .ep-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .ep-header h2 {
    margin: 0;
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .ep-header .ep-sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted);
  }

  .ep-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .ep-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ep-field label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .ep-field input[type="text"],
  .ep-field input[type="email"],
  .ep-field input[type="password"],
  .ep-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 14, 20, 0.6);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .ep-field input[type="text"]:focus,
  .ep-field input[type="email"]:focus,
  .ep-field input[type="password"]:focus,
  .ep-field textarea:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(148, 180, 212, 0.09);
  }

  .ep-field textarea {
    min-height: 80px;
    resize: vertical;
  }

  .ep-field .ep-hint {
    font-size: 11px;
    color: var(--muted2);
  }

  .ep-field .ep-counter {
    text-align: right;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted2);
  }

  .ep-field .ep-counter.warn {
    color: #c0ae72;
  }

  .ep-field .ep-counter.limit {
    color: var(--bad);
  }

  /* Image upload areas */
  .ep-image-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ep-image-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(10, 14, 20, 0.6);
    border: 1px dashed var(--line2);
    cursor: pointer;
    transition: border-color var(--transition-fast);
  }

  .ep-image-preview:hover {
    border-color: var(--cyan);
  }

  .ep-image-preview.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
  }

  .ep-image-preview.banner {
    width: 100%;
    height: 100px;
  }

  .ep-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ep-image-preview .ep-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
  }

  .ep-image-preview .ep-image-placeholder svg {
    opacity: 0.5;
  }

  .ep-image-preview input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .ep-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }

  .ep-btn {
    flex: 1;
    height: 44px;
    border: 1px solid var(--line2);
    border-radius: 8px;
    background: rgba(160, 198, 228, 0.10);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  }

  .ep-btn:hover:not(:disabled),
  .ep-btn:focus-visible:not(:disabled) {
    background: rgba(148, 180, 212, 0.18);
    border-color: var(--cyan);
  }

  .ep-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .ep-btn.ghost {
    background: transparent;
    color: var(--muted);
    border-color: var(--line);
  }

  .ep-btn.ghost:hover,
  .ep-btn.ghost:focus-visible {
    background: rgba(100, 160, 210, 0.09);
    border-color: var(--line2);
    color: var(--text);
  }

  .ep-msg {
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    min-height: 20px;
  }

  .ep-msg .ok {
    color: var(--cyan);
  }

  .ep-msg .err {
    color: #ff6b6b;
  }

  .ep-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
  }

  .ep-separator::before,
  .ep-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  .ep-separator span {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* ==========================================================
     Create Playlist Button (floating)
     ========================================================== */
  .create-playlist-btn {
    position: fixed;
    bottom: calc(var(--footer-h) + 24px);
    right: 24px;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(148, 180, 212, 0.06);
    border: 1px solid var(--line2);
    border-radius: 8px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  .create-playlist-btn:hover,
  .create-playlist-btn:focus-visible {
    background: rgba(160, 198, 228, 0.10);
    border-color: var(--line2);
    color: var(--text);
  }

  .create-playlist-btn:active {
    opacity: 0.8;
  }

  .create-playlist-btn.visible {
    display: flex;
  }

  .create-playlist-btn svg {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 600px) {
    .create-playlist-btn {
      right: 14px;
      bottom: calc(var(--footer-h) + 14px);
      padding: 6px 10px;
      font-size: 11px;
    }

    .create-playlist-btn span {
      display: none;
    }

    .create-playlist-btn svg {
      width: 14px;
      height: 14px;
    }
  }

  /* ==========================================================
     Create Playlist Modal
     ========================================================== */
  .cp-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .cp-modal[hidden] {
    display: none;
  }

  .cp-dialog {
    position: relative;
    width: 90%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.95), rgba(10, 14, 20, 0.98));
    border: 1px solid var(--line2);
    border-radius: var(--radius);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), var(--glow);
    padding: 24px;
  }

  .cp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(16, 20, 28, 0.6);
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  .cp-close:hover,
  .cp-close:focus-visible {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
  }

  .cp-header {
    text-align: left;
    margin-bottom: 16px;
  }

  .cp-header h2 {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
  }

  .cp-sub {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.03em;
  }

  .cp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cp-field label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .cp-field input[type="text"],
  .cp-field textarea {
    width: 100%;
    padding: 8px 10px;
    background: rgba(16, 20, 28, 0.6);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .cp-field input[type="text"]:focus,
  .cp-field textarea:focus {
    outline: none;
    border-color: var(--cyan);
    background: rgba(16, 20, 28, 0.8);
  }

  .cp-field input[type="text"]::placeholder,
  .cp-field textarea::placeholder {
    color: var(--muted2);
  }

  .cp-field textarea {
    resize: vertical;
    min-height: 80px;
  }

  .cp-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
  }

  .cp-toggle input[type="checkbox"] {
    width: 44px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(16, 20, 28, 0.6);
    border: 1px solid var(--line2);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .cp-toggle input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--muted);
    border-radius: 50%;
    transition: transform var(--transition-fast), background var(--transition-fast);
  }

  .cp-toggle input[type="checkbox"]:checked {
    background: rgba(148, 180, 212, 0.18);
    border-color: var(--cyan);
  }

  .cp-toggle input[type="checkbox"]:checked::before {
    transform: translateX(20px);
    background: var(--cyan);
  }

  .cp-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cp-toggle-label strong {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
  }

  .cp-toggle-label span {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
  }

  /* Visibility segmented toggle (Publique / Privée) */
  .cp-visibility-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cp-visibility-wrap .cp-field-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .cp-visibility-toggle {
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line2);
    background: rgba(16, 20, 28, 0.6);
    width: 100%;
  }

  .cp-vis-btn {
    flex: 1;
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .cp-vis-btn:first-child {
    border-right: 1px solid var(--line2);
  }

  .cp-vis-btn:hover:not(.active) {
    background: rgba(100, 160, 210, 0.08);
    color: var(--text);
  }

  /* Publique : accent cyan */
  .cp-vis-btn.active[data-value="1"] {
    background: rgba(160, 198, 228, 0.13);
    color: var(--cyan);
    border-color: var(--cyan);
  }

  /* Privée : neutre */
  .cp-vis-btn.active[data-value="0"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }

  .cp-visibility-hint {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    min-height: 14px;
  }

  .cp-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
  }

  .cp-btn {
    flex: 1;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(160, 198, 228, 0.07);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  }

  .cp-btn:hover:not(:disabled),
  .cp-btn:focus-visible:not(:disabled) {
    background: rgba(148, 180, 212, 0.18);
    border-color: var(--cyan);
  }

  .cp-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .cp-btn.ghost {
    background: transparent;
    color: var(--muted);
    border-color: var(--line);
  }

  .cp-btn.ghost:hover,
  .cp-btn.ghost:focus-visible {
    background: rgba(100, 160, 210, 0.09);
    border-color: var(--line2);
    color: var(--text);
  }

  .cp-msg {
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    min-height: 20px;
  }

  .cp-msg .ok {
    color: var(--cyan);
  }

  .cp-msg .err {
    color: #ff6b6b;
  }

  /* ==========================================================
     Add to Playlist Modal
     ========================================================== */
  .atp-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .atp-modal[hidden] {
    display: none;
  }

  .atp-dialog {
    position: relative;
    width: 90%;
    max-width: 440px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(7, 10, 16, 0.97);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }

  .atp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(16, 20, 28, 0.6);
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  .atp-close:hover,
  .atp-close:focus-visible {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
  }

  .atp-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
  }

  .atp-header h2 {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
  }

  .atp-song-info {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .atp-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
  }

  /* Create new playlist inline */
  .atp-create-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }

  .atp-create-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: rgba(16, 20, 28, 0.6);
    border: 1px solid var(--line2);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    transition: border-color var(--transition-fast);
  }

  .atp-create-row input:focus {
    outline: none;
    border-color: var(--cyan);
  }

  .atp-create-row input::placeholder {
    color: var(--muted2);
  }

  .atp-create-row button {
    padding: 10px 16px;
    background: rgba(160, 198, 228, 0.10);
    border: 1px solid var(--line2);
    border-radius: 8px;
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .atp-create-row button:hover:not(:disabled) {
    background: rgba(148, 180, 212, 0.18);
    border-color: var(--cyan);
  }

  .atp-create-row button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Visibility toggle (ATP inline create) */
  .atp-visibility-row {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line2);
    margin-top: 6px;
  }

  .atp-vis-btn {
    flex: 1;
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .atp-vis-btn:first-child {
    border-right: 1px solid var(--line2);
  }

  .atp-vis-btn.active[data-value="1"] {
    background: rgba(160, 198, 228, 0.13);
    color: var(--cyan);
  }

  .atp-vis-btn.active[data-value="0"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }

  .atp-vis-btn:hover:not(.active) {
    background: rgba(100, 160, 210, 0.08);
    color: var(--text);
  }

  /* Playlist list */
  .atp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .atp-list-empty {
    text-align: center;
    padding: 24px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
  }

  .atp-list-loading {
    text-align: center;
    padding: 24px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
  }

  .atp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(16, 20, 28, 0.4);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .atp-item:hover {
    border-color: var(--line2);
    background: rgba(16, 20, 28, 0.6);
  }

  .atp-item-info {
    flex: 1;
    min-width: 0;
  }

  .atp-item-name {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .atp-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
  }

  .atp-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .atp-item-badge--public {
    background: rgba(160, 198, 228, 0.13);
    color: var(--cyan);
  }

  .atp-item-badge--private {
    background: rgba(192, 174, 114, 0.15);
    color: var(--warn);
  }

  .atp-item-btn {
    padding: 8px 14px;
    background: rgba(148, 180, 212, 0.09);
    border: 1px solid var(--line2);
    border-radius: 6px;
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .atp-item-btn:hover:not(:disabled) {
    background: rgba(148, 180, 212, 0.18);
    border-color: var(--cyan);
  }

  .atp-item-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .atp-item-btn.added {
    background: rgba(114, 191, 160, 0.15);
    border-color: var(--good);
    color: var(--good);
  }

  .atp-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
  }

  .atp-msg {
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    min-height: 18px;
  }

  .atp-msg .ok {
    color: var(--good);
  }

  .atp-msg .err {
    color: #ff6b6b;
  }

  /* ==========================================================
     Albums View
     ========================================================== */
  .albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 4px 0 24px;
  }

  @media (max-width: 560px) {
    .albums-grid {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 12px;
    }
  }

  .album-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    border-radius: var(--radius2);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.55), rgba(16, 20, 28, 0.35));
    border: 1px solid var(--line);
    padding: 12px;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  }

  .album-card:hover,
  .album-card:focus-visible {
    border-color: var(--line2);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.80), rgba(16, 20, 28, 0.60));
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), var(--glow);
  }

  .album-card:active {
    transform: translateY(0);
  }

  .album-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(10, 14, 20, 0.8);
    border: 1px solid var(--line);
    flex-shrink: 0;
  }

  .album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-med);
  }

  .album-card:hover .album-cover img {
    transform: scale(1.05);
  }

  .album-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 30% 30%, rgba(160, 198, 228, 0.15), transparent 60%),
      rgba(10, 14, 20, 0.90);
  }

  .album-cover-placeholder svg {
    width: 40%;
    height: 40%;
    color: var(--muted2);
    opacity: 0.6;
  }

  /* Play overlay on hover */
  .album-cover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 7, 12, 0.50);
    opacity: 0;
    transition: opacity var(--transition-fast);
    border-radius: 10px;
  }

  .album-card:hover .album-cover-overlay,
  .album-card:focus-visible .album-cover-overlay {
    opacity: 1;
  }

  .album-cover-overlay-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(148, 180, 212, 0.18);
    border: 2px solid var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    font-size: 14px;
    box-shadow: 0 0 20px rgba(148, 180, 212, 0.28);
  }

  .album-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .album-name {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
  }

  .album-artist {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
  }

  .album-track-count {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted2);
    letter-spacing: 0.03em;
  }


  /* ==========================================================
     Playlists Grid (mirrors Albums Grid)
     ========================================================== */
  .playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 4px 0 24px;
  }

  @media (max-width: 560px) {
    .playlists-grid {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 12px;
    }
  }

  .playlist-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    border-radius: var(--radius2);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.55), rgba(16, 20, 28, 0.35));
    border: 1px solid var(--line);
    padding: 12px;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  }

  .playlist-card:hover,
  .playlist-card:focus-visible {
    border-color: var(--line2);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.80), rgba(16, 20, 28, 0.60));
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), var(--glow);
    outline: none;
  }

  .playlist-card:active {
    transform: translateY(0);
  }

  .playlist-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius2);
    overflow: hidden;
    background: rgba(16, 20, 28, 0.55);
    border: 1px solid var(--line);
    position: relative;
  }

  .playlist-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .playlist-cover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity var(--transition-fast);
    border-radius: var(--radius2);
  }

  .playlist-card:hover .playlist-cover-overlay,
  .playlist-card:focus-visible .playlist-cover-overlay {
    opacity: 1;
  }

  .playlist-cover-overlay-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(148, 180, 212, 0.18);
    border: 2px solid var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    font-size: 14px;
    box-shadow: 0 0 20px rgba(148, 180, 212, 0.28);
  }

  .playlist-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .playlist-name {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
  }

  .playlist-track-count {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted2);
    letter-spacing: 0.03em;
  }

  .playlist-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .playlist-badge--public {
    background: rgba(148, 180, 212, 0.09);
    color: var(--cyan);
    border: 1px solid rgba(148, 180, 212, 0.18);
  }

  .playlist-badge--private {
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    border: 1px solid var(--line);
  }

  .playlist-owner {
    color: var(--muted);
    font-size: 10px;
    text-decoration: none;
  }

  .playlist-owner:hover {
    color: var(--text);
    text-decoration: underline;
  }

  /* Empty / loading states */
  .albums-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 13px;
    text-align: center;
  }

  .albums-empty svg {
    width: 48px;
    height: 48px;
    color: var(--muted2);
    opacity: 0.5;
  }

  /* Albums section header — supprimé (pas de titre/compteur dans la grille) */

  /* ==========================================================
     Auth Pages — Login & Register
     ========================================================== */

  /* Centrage full-page sur les pages auth */
  body.auth-page {
    min-height: 100vh;
    min-height: 100dvh; /* mobile : exclut la barre navigateur */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  /* Carte auth */
  .auth-card {
    width: 100%;
    max-width: 400px;
    padding: 28px 28px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.80), rgba(16, 20, 28, 0.60));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
  }

  .auth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(400px 200px at 20% 0%, rgba(100, 160, 210, 0.10), transparent 60%),
      radial-gradient(400px 200px at 80% 0%, rgba(160, 198, 228, 0.07), transparent 60%);
    pointer-events: none;
  }

  /* En-tête (logo + titre) */
  .auth-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
  }

  .auth-logo-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(100, 160, 210, 0.17), rgba(160, 198, 228, 0.09));
    border: 1px solid var(--line3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow);
  }

  .auth-logo-icon span {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 900;
    color: var(--cyan);
    text-shadow: 0 0 20px rgba(160, 198, 228, 0.45);
  }

  .auth-header h1 {
    margin: 0;
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
  }

  .auth-header .sub {
    margin: 6px 0 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: none;
  }

  /* Formulaire */
  .auth-card form {
    position: relative;
    z-index: 1;
  }

  .auth-card .field {
    margin-bottom: 14px;
  }

  .auth-card label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: none;
  }

  .auth-card label.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .auth-card .toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--muted2);
    text-transform: none;
    cursor: pointer;
  }

  .auth-card .toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--cyan);
    cursor: pointer;
  }

  .auth-card input[type="text"],
  .auth-card input[type="password"],
  .auth-card input[type="email"] {
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: rgba(10, 14, 20, 0.60);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
  }

  /* Override autofill Chrome/Safari — sans ça le fond devient blanc/jaune */
  .auth-card input:-webkit-autofill,
  .auth-card input:-webkit-autofill:hover,
  .auth-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(10, 14, 20, 0.90) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
  }

  .auth-card input[type="text"]:focus,
  .auth-card input[type="password"]:focus,
  .auth-card input[type="email"]:focus {
    border-color: var(--cyan);
    box-shadow: var(--glow);
  }

  .auth-card input::placeholder {
    color: var(--muted2);
  }

  .auth-card .hint {
    display: block;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted2);
  }

  /* Bouton auth */
  .auth-card .btn {
    width: 100%;
    height: 42px;
    margin-top: 6px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(148, 180, 212, 0.28);
    background: linear-gradient(135deg, rgba(160, 198, 228, 0.13), rgba(100, 160, 210, 0.09));
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
  }

  .auth-card .btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(148, 180, 212, 0.22), rgba(100, 160, 210, 0.13));
    border-color: rgba(148, 180, 212, 0.46);
    box-shadow: var(--glow);
  }

  .auth-card .btn:active:not(:disabled) {
    transform: scale(0.98);
  }

  .auth-card .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Spinner */
  .auth-card .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* Messages feedback */
  .auth-card .msg {
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 12px;
    text-align: center;
    min-height: 20px;
    line-height: 1.5;
    transition: all var(--transition-fast);
  }

  .auth-card .msg:empty {
    display: none;
  }

  .auth-card .msg.error {
    color: var(--bad);
  }

  .auth-card .msg.ok {
    color: var(--good);
  }

  .auth-card .msg .verify {
    margin-top: 12px;
  }

  .auth-card .msg .verify .btn {
    height: 40px;
    font-size: 11px;
  }

  /* Pied de carte */
  .auth-card .foot {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    position: relative;
    z-index: 1;
  }

  .auth-card .foot a {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 600;
    transition: opacity var(--transition-fast);
  }

  .auth-card .foot a:hover {
    opacity: 0.8;
  }

  /* Panels (playlists, albums) — padding réduit sur mobile */
  @media (max-width: 560px) {
    #playlists-panel,
    #albums-panel {
      padding: 8px 8px !important;
    }
  }

  /* Auth — Responsive */
  @media (max-width: 480px) {
    body.auth-page {
      padding: 16px;
      align-items: center;
    }

    .auth-card {
      padding: 20px 16px;
    }

    .auth-logo-icon {
      width: 36px;
      height: 36px;
      margin-bottom: 8px;
    }

    .auth-logo-icon span {
      font-size: 16px;
    }

    .auth-header {
      margin-bottom: 16px;
    }

    .auth-header h1 {
      font-size: 15px;
    }

    .auth-header .sub {
      font-size: 10px;
      margin-top: 3px;
    }

    .auth-card .field {
      margin-bottom: 10px;
    }

    .auth-card input[type="text"],
    .auth-card input[type="password"],
    .auth-card input[type="email"] {
      height: 40px;
      padding: 0 12px;
      font-size: 14px;
    }

    .auth-card .btn {
      height: 38px;
      font-size: 12px;
      margin-top: 4px;
    }

    .auth-card .foot {
      margin-top: 14px;
      padding-top: 12px;
      font-size: 11px;
    }
  }

  /* ==========================================================
     Verify Page — /api/auth/verify (rendu HTML serveur)
     ========================================================== */

  body.verify-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .verify-shell {
    width: 100%;
    max-width: 420px;
  }

  .verify-card {
    width: 100%;
    padding: 40px 32px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(16, 20, 28, 0.80), rgba(16, 20, 28, 0.60));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
  }

  .verify-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(400px 200px at 20% 0%, rgba(100, 160, 210, 0.10), transparent 60%),
      radial-gradient(400px 200px at 80% 0%, rgba(160, 198, 228, 0.07), transparent 60%);
    pointer-events: none;
  }

  .verify-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(10, 12, 18, 0.35);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .verify-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bad);
    box-shadow: 0 0 14px rgba(70, 120, 200, 0.30);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
  }

  body.verify-page.is-success .verify-badge-dot {
    background: var(--good);
    box-shadow: 0 0 14px rgba(114, 191, 160, 0.32);
  }

  .verify-card h1 {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
  }

  .verify-message {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: 14px;
  }

  .verify-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    margin-top: 22px;
  }

  .verify-actions .btn {
    flex: 1;
    height: 44px;
    margin-top: 0;
    font-size: 12px;
  }

  .btn-ghost {
    border-color: var(--line);
    background: rgba(10, 12, 18, 0.25);
    color: var(--text);
  }

  .btn-ghost:hover:not(:disabled) {
    border-color: var(--line2);
    box-shadow: var(--glow);
  }

  .verify-card .foot {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted2);
  }

  @media (max-width: 480px) {
    .verify-card {
      padding: 32px 24px;
    }

    .verify-actions {
      flex-direction: column;
    }

    .verify-actions .btn {
      width: 100%;
    }
  }

/* ── Profile playlists carousel ──────────────────────────── */
.playlists-carousel {
  display: flex;
   flex-direction: row;   /* ← ajouter cette ligne */
  gap: var(--space-4, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-bottom: var(--space-3, 0.75rem); /* room for scrollbar */

  /* hide scrollbar mais garde le scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.playlists-carousel::-webkit-scrollbar {
  display: none;
}
.playlists-carousel:active {
  cursor: grabbing;
}

/* cartes : taille fixe calée sur la grid existante */
.playlists-carousel .playlist-card {
  flex: 0 0 160px;   /* ← 200px → 160px pour matcher la grid */
  scroll-snap-align: start;
}
  /* Les modals cachés ne doivent jamais intercepter l’UI */
.cp-modal[hidden],
.atp-modal[hidden]{
  display: none !important;
  pointer-events: none !important;
}

[hidden] { display: none !important; }