/* =============================================================================
   LA FOLIE — Prototype Web
   Direction artistique : « ENCRE & ARGENT ». Charte écrite : docs/DA.md
   Un catalogue privé imprimé en DEUX TIRAGES du même dessin :
   la NUIT (tirage natif, `body.night`) et le JOUR (argent).

   Discipline de cette feuille — rien « à l'œil » :
   · huit tailles de texte (--t-*), et les titres de page en clamp() ;
   · l'espacement est un multiple de 4 (--s-*) ; six rayons (--rd-*) ;
   · trois graisses : 400 / 600 / 700 ;
   · un seul accent, et seulement pour un signal (lecture, favori, filtre actif) ;
   · les chiffres qui s'empilent sont en chasse fixe ;
   · un état de focus visible partout (on navigue au clavier) ;
   · chaque couleur ci-dessous est MESURÉE — le rapport est en commentaire.
   ============================================================================= */

:root {
  /* ---- Échelle typographique — huit tailles, pas une de plus ---- */
  --t-2xs: 10px;   --t-xs: 11px;    --t-s: 12.5px;  --t-m: 13.5px;
  --t-l: 15px;     --t-xl: 17px;    --t-2xl: 21px;  --t-3xl: 27px;
  /* ---- Espacement — multiples de 4 ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  /* ---- Rayons ---- */
  --rd-1: 4px; --rd-2: 10px; --rd-3: 14px; --rd-4: 20px; --rd-5: 28px; --rd-pill: 999px;
  /* Alias hérités — mêmes valeurs, conservés pour ne pas réécrire 60 déclarations */
  --radius: var(--rd-5);
  --radius-md: var(--rd-4);
  --radius-sm: var(--rd-3);
  /* ---- Les trois épaisseurs de verre (cf. DA.md §5) ---- */
  --flou-fin: blur(24px);
  --flou-moyen: blur(30px) saturate(150%);
  --flou-epais: blur(40px) saturate(150%);

  /* =========== TIRAGE JOUR — argent =========== */
  --bg: #e7e7eb;
  --ink: #101014;                    /* 15,4:1 — AAA */
  --ink-dim: rgba(16,16,20,.72);     /*  6,9:1 — AA  (était .56 → 4,06 : échec) */
  --ink-mute: rgba(16,16,20,.60);    /*  4,6:1 — AA  (était .36 → 2,27 : échec) */
  --line: rgba(16,16,20,.08);
  --line-strong: rgba(16,16,20,.16);

  /* Compat (anciens tokens référencés dans app.js) */
  --paper: var(--ink);
  --paper-dim: var(--ink-dim);
  --paper-mute: var(--ink-mute);

  /* Verre & surfaces */
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.78);
  --glass-bd: rgba(255,255,255,.6);
  --glass-bd-strong: rgba(255,255,255,.7);
  --glass-edge: inset 0 0 0 1px rgba(255,255,255,.55);
  --cell: rgba(255,255,255,.5);
  --cell-strong: rgba(255,255,255,.6);
  --soft-wash: rgba(255,255,255,.35);
  --hover-wash: rgba(255,255,255,.7);
  --hover-strong: rgba(255,255,255,.85);
  --row-active: #ffffff;
  --field-focus: #ffffff;
  --veil: rgba(255,255,255,.5);
  --shadow-soft: 0 24px 60px -28px rgba(20,20,26,.30), 0 2px 8px rgba(20,20,26,.05);
  --shadow-deep: 0 40px 90px -30px rgba(20,20,26,.38), 0 3px 10px rgba(20,20,26,.06);

  /* Contrôles pleins (boutons encre) */
  --prim-bg: #101014;
  --prim-ink: #ffffff;
  --prim-hover: #26262e;

  /* Signal — UN seul accent, dans sa taille profonde sur l'argent.
     Le rose de nuit #FF2E88 tombe à 2,84:1 ici : illisible. Cf. DA.md §3.3. */
  --accent: #AD1457;                 /*  5,7:1 — AA  */
  --accent-ink: #ffffff;             /*  7,0:1 — AAA sur l'accent */
  --ok: #1B6E3E;                     /*  5,1:1 — AA  */
  --warn: #7E560B;                   /*  5,3:1 — AA  */
  --danger: #A8231D;                 /*  5,8:1 — AA  */

  /* Champ de couleur des folders : la teinte de la piste, diluée dans le tirage */
  --fc-mix: #e9e9ec;  --fc-mix-a: 52%;

  /* Immersion couleur (pilotée par la piste en lecture) */
  --tint: #b7bdca;

  /* Atténuation du fond animé — 60 % : blanc le jour, noir la nuit */
  --bg-veil: rgba(255,255,255,.6);

  --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101014' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --player-h: 84px;

  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ===================== TIRAGE NUIT — le tirage natif ===================== */
body.night {
  --bg: #0e0e12;
  --ink: #ECEDF1;                       /* 16,5:1 — AAA */
  --ink-dim: rgba(236,237,241,.64);     /*  7,1:1 — AAA (était .60) */
  --ink-mute: rgba(236,237,241,.52);    /*  5,0:1 — AA  (était .38 → 3,21 : échec) */
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);

  --glass: rgba(24,24,30,.55);
  --glass-strong: rgba(21,21,27,.82);
  --glass-bd: rgba(255,255,255,.08);
  --glass-bd-strong: rgba(255,255,255,.12);
  --glass-edge: inset 0 0 0 1px rgba(255,255,255,.06);
  --cell: rgba(255,255,255,.045);
  --cell-strong: rgba(255,255,255,.07);
  --soft-wash: rgba(255,255,255,.05);
  --hover-wash: rgba(255,255,255,.07);
  --hover-strong: rgba(255,255,255,.11);
  --row-active: rgba(255,255,255,.12);
  --field-focus: rgba(255,255,255,.1);
  --veil: rgba(14,14,18,.55);
  --shadow-soft: 0 24px 60px -28px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.3);
  --shadow-deep: 0 40px 90px -30px rgba(0,0,0,.8), 0 3px 10px rgba(0,0,0,.35);

  --prim-bg: #ECEDF1;
  --prim-ink: #101014;
  --prim-hover: #ffffff;

  /* Le rose vif tient sur la nuit — mais c'est l'ENCRE qu'on pose dessus :
     du blanc sur ce rose ne fait que 3,5:1. */
  --accent: #FF2E88;                    /*  5,5:1 — AA  */
  --accent-ink: #101014;                /*  5,4:1 — AA sur l'accent */
  --ok: #6fd39a;                        /* 10,5:1 — AAA */
  --warn: #e0b45e;                      /* 10,0:1 — AAA */
  --danger: #FF7A75;                    /*  7,6:1 — AAA (était #d23c3c → 4,08 : échec) */

  /* Sur la nuit, le champ d'un folder s'encre au lieu de pâlir : sans ça la
     carte-palette devient un bonbon pastel posé sur du noir.
     --fc-ink ne change PAS : c'est l'encre écrite DANS la mini-carte claire,
     pas sur le champ. */
  --fc-mix: #17171d;  --fc-mix-a: 34%;

  --bg-veil: rgba(0,0,0,.6);

  --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ECEDF1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
::selection { background: var(--prim-bg); color: var(--prim-ink); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }
.hidden { display: none !important; }

/* Libellés techniques monospace */
.mono, .eyebrow, .gate-index, kbd, .avail, .t-num, .why, .gate-hint {
  font-family: var(--mono);
}

/* Accent éditorial serif italique */
em, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* -----------------------------------------------------------------------------
   DISCIPLINE — les trois règles qui s'appliquent à tout le document.
   ----------------------------------------------------------------------------- */

/* 1. Les chiffres qui s'empilent sont en chasse fixe. Sans ça, une colonne de
      BPM ou de durées danse d'une ligne à l'autre : le « 1 » est plus étroit. */
.mono, .t-meta, .ptime, .num, .pl-bpm, .at-num, .inv-uses, .fav-stat b,
.spec .v, .acc-when, .act-when, .sugg-meta, .invite-code, .lic-price,
input[type=number], .t-num { font-variant-numeric: tabular-nums; }

/* 2. On navigue au clavier. Un focus invisible est un bug d'accessibilité,
      pas un choix esthétique. L'accent sert ici parce que c'est un signal. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rd-1);
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* 3. Mouvement réduit — DEUX sources, le même effet : le réglage système
      (`prefers-reduced-motion`) et celui du Compte (`body.reduced`).
      Le second existe parce qu'on ne peut pas demander à quelqu'un d'aller
      changer les préférences de son téléphone pour calmer notre fond animé. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
body.reduced *, body.reduced *::before, body.reduced *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
/* Le shader de fond n'est pas une animation CSS : on le masque, et sa boucle
   est arrêtée côté JS (initAppFx). Les nappes statiques reprennent la main. */
body.reduced #appfx { display: none; }
body.reduced .bloom { animation: none !important; }
/* `body.fx` efface les nappes statiques parce que le shader les remplace :
   si on coupe le shader, il faut les rallumer, sinon le fond devient un aplat. */
body.reduced.fx .b-a, body.reduced.fx .b-b { display: block; }

/* =============================================================================
   FOND — chrome argenté : nappes floutées qui dérivent + poche sombre + grain
   ============================================================================= */
#bgfx { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% -8%, #ffffff 0%, transparent 52%),
    radial-gradient(150% 110% at 88% 112%, #c3c3cc 0%, transparent 58%),
    linear-gradient(168deg, #f3f3f5 0%, #e6e6ea 46%, #d8d8de 100%);
}
body.night #bgfx {
  background:
    radial-gradient(120% 90% at 12% -8%, #1c1c24 0%, transparent 52%),
    radial-gradient(150% 110% at 88% 112%, #05050a 0%, transparent 58%),
    linear-gradient(168deg, #15151b 0%, #101015 46%, #0a0a0e 100%);
}
#appfx { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Calque d'atténuation du fond animé (demande fondateur : « trop présent »).
   Noir en mode nuit, blanc en mode jour — un noir à 60 % sur la DA claire
   assombrissait tout le contenu et cassait la lisibilité. */
.bg-veil { position: absolute; inset: 0; pointer-events: none; background: var(--bg-veil); }
/* Quand le shader tourne, les nappes statiques s'effacent (la teinte piste reste) */
body.fx .b-a, body.fx .b-b { display: none; }
.bloom { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.b-a { width: 58vw; height: 58vw; left: -14vw; top: -18vw; opacity: .85;
  background: radial-gradient(circle, #ffffff, transparent 62%); animation: bloomA 34s var(--ease) infinite alternate; }
.b-b { width: 52vw; height: 52vw; right: -12vw; top: 20vh; opacity: .38;
  background: radial-gradient(circle, #63636e, transparent 62%); animation: bloomB 44s var(--ease) infinite alternate; }
.b-c { width: 50vw; height: 50vw; left: 24vw; bottom: -22vw; opacity: .34;
  background: radial-gradient(circle, var(--tint), transparent 62%);
  animation: bloomC 38s var(--ease) infinite alternate; transition: background 1.2s; }
body.night .b-a { opacity: .07; }
body.night .b-b { opacity: .5; background: radial-gradient(circle, #000, transparent 62%); }
body.night .b-c { opacity: .16; }
@keyframes bloomA { to { transform: translate(30vw, 20vh) scale(1.25); } }
@keyframes bloomB { to { transform: translate(-24vw, -14vh) scale(1.18); } }
@keyframes bloomC { to { transform: translate(-18vw, -22vh) scale(1.3); } }
#bgfx::after { /* grain fin, signature premium */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .bloom { animation: none !important; } }

/* =============================================================================
   BOUTONS — pastilles encre / hairline, casse naturelle
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--rd-pill); font-size: var(--t-l); font-weight: 600;
  letter-spacing: .01em; transition: all .18s var(--ease);
  border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--prim-bg); color: var(--prim-ink); box-shadow: 0 10px 26px -12px rgba(16,16,20,.5); }
.btn-primary:hover { background: var(--prim-hover); }
.btn-ghost { background: var(--soft-wash); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--hover-strong); border-color: var(--ink); }
.btn-sm { padding: 10px 16px; font-size: var(--t-m); }
.btn-icon {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-dim); border: 1px solid transparent; transition: all .15s var(--ease);
}
.btn-icon:hover { color: var(--ink); background: var(--hover-strong); }

/* =============================================================================
   LOGO — encre sur argent (inversé de nuit)
   ============================================================================= */
.logo-white { filter: none; }              /* les logos fournis sont noirs : bruts le jour */
body.night .logo-white { filter: brightness(0) invert(1); }
.gate-logo { position: relative; z-index: 2; height: 92px; width: auto; margin-bottom: 30px; }
.brand-logo { height: 60px; width: auto; display: block; }
.wordmark-fallback { font-weight: 700; color: var(--ink); letter-spacing: .02em; }

/* =============================================================================
   GATE — animation abstraite plein écran, carte de verre centrée
   ============================================================================= */
#gate { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden; }
#gate.leaving { animation: gateOut .6s var(--ease) forwards; pointer-events: none; }
@keyframes gateOut { to { opacity: 0; transform: translateY(-14px); } }
.gate-card { position: relative; z-index: 2; width: min(440px, 92vw); text-align: center;
  background: var(--glass); backdrop-filter: var(--flou-epais); -webkit-backdrop-filter: var(--flou-epais);
  border: 1px solid var(--glass-bd); border-radius: var(--radius);
  box-shadow: var(--shadow-deep), var(--glass-edge);
  padding: 40px 36px 30px; animation: riseIn .7s var(--ease) both; }
.gate-index { font-size: var(--t-2xs); letter-spacing: .3em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 16px; }
.gate-title { font-size: clamp(34px, 4.6vw, 44px); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; margin-bottom: 14px; }
.gate-title em { font-size: 1.06em; }
.gate-sub { color: var(--ink-dim); font-size: var(--t-l); line-height: 1.6; margin: 0 auto 28px; max-width: 330px; }
.gate-actions { display: flex; flex-direction: column; gap: 10px; }
.code-row input {
  width: 100%; background: var(--cell-strong); border: 1px solid var(--line-strong); color: var(--ink);
  padding: 15px 20px; border-radius: var(--rd-pill); font-family: var(--mono); font-size: var(--t-m);
  letter-spacing: .06em; text-align: center; transition: border-color .2s, background .2s;
}
.code-row input::placeholder { color: var(--ink-mute); letter-spacing: .12em; }
.code-row input:focus { outline: none; border-color: var(--ink); background: var(--field-focus); }
.gate-error { color: var(--danger); font-size: var(--t-s); min-height: 15px; font-family: var(--mono); }
.gate-hint { color: var(--ink-mute); font-size: var(--t-2xs); letter-spacing: .08em; margin-top: 22px; line-height: 1.8; }
.gate-hint code { color: var(--ink); }

/* =============================================================================
   LAYOUT APP — dock de verre en haut (replié : logo seul, déployé au survol)
   ============================================================================= */
#app { display: none; position: relative; z-index: 1; height: 100%; flex-direction: column; }
#app.ready { display: flex; }
#app.ready .appbar { animation: fadeIn .5s var(--ease) both; }
#app.ready .main { animation: fadeIn .6s .06s var(--ease) both; }
#app.ready .player { animation: slideU .6s .14s var(--ease) both; }

.appbar { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 55;
  width: max-content; max-width: 94vw; height: 58px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-bd); border-radius: var(--rd-pill); background: var(--glass);
  backdrop-filter: var(--flou-moyen); -webkit-backdrop-filter: var(--flou-moyen);
  box-shadow: var(--shadow-soft), var(--glass-edge); }
.appdock { display: flex; align-items: center; gap: 2px; }
.appdock .brand-logo { height: 30px; width: auto; flex-shrink: 0; }
/* Repos : seul le logo est visible ; les icônes se déploient au survol */
.nav-dock { display: flex; align-items: center; gap: 2px; max-width: 0; opacity: 0; margin: 0; overflow: hidden;
  transition: max-width .55s var(--ease), opacity .35s, margin .55s var(--ease); }
.appbar:hover .nav-dock, .appbar:focus-within .nav-dock { max-width: 320px; opacity: 1; margin: 0 12px; }
.nav-item { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-dim); transition: color .15s, background .15s; }
.nav-item:hover { color: var(--ink); background: var(--hover-wash); }
.nav-item.active, .nav-item.on { color: var(--ink); }
.nav-item.active::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.nav-item svg { width: 21px; height: 21px; }

/* Bouton + (dépôt compositeur) — flottant, aligné au dock */
.add-btn { position: fixed; top: 18px; right: 22px; z-index: 56; width: 58px; height: 58px; border-radius: 50%;
  background: var(--prim-bg); color: var(--prim-ink);
  font-size: var(--t-3xl); font-weight: 400; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 16px 40px -14px rgba(16,16,20,.55);
  transition: background .15s, transform .15s var(--ease); }
.add-btn:hover { background: var(--prim-hover); }
.add-btn:active { transform: scale(.94); }
.add-menu { position: fixed; top: 86px; right: 22px; z-index: 56; width: 210px; background: var(--glass-strong);
  backdrop-filter: var(--flou-moyen); -webkit-backdrop-filter: var(--flou-moyen);
  border: 1px solid var(--glass-bd-strong); border-radius: var(--radius-md); padding: 8px;
  box-shadow: var(--shadow-deep); animation: slideDown .2s var(--ease); }
.add-menu-label { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); padding: 8px 12px 6px; }
.add-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border-radius: var(--rd-3);
  font-size: var(--t-l); font-weight: 600; letter-spacing: .01em; text-align: left; transition: background .12s; }
.add-opt:hover { background: var(--hover-wash); }
.add-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--ink); }
.add-dot.loops { background: #c98db2; }
.add-dot.beats { background: #8da4c9; }

/* Logo central : devient la loupe au survol, ouvre la recherche */
.logo-btn { width: auto; padding: 0 12px; border-radius: var(--rd-pill); }
.logo-btn .logo-home-ic { display: none; }
.logo-btn:hover .brand-logo { display: none; }
.logo-btn:hover .logo-home-ic { display: grid; place-items: center; color: var(--ink); }
.logo-btn:hover { background: var(--hover-wash); }

/* Lignes des listes Téléchargements / Notifications */
.acc-item .acc-label b { display: block; font-size: var(--t-l); font-weight: 600; }
.acc-sub { display: block; font-size: var(--t-s); color: var(--ink-mute); margin-top: 2px; }
.acc-when { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); white-space: nowrap; }

/* =============================================================================
   RECHERCHE — panneau de verre sous le dock + suggestions en direct
   ============================================================================= */
.searchbar { position: fixed; top: 88px; left: 0; right: 0; z-index: 54; display: flex; justify-content: center;
  pointer-events: none; animation: slideDown .25s var(--ease); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } }
.search-panel { width: min(760px, 94%); pointer-events: auto; background: var(--glass-strong);
  backdrop-filter: var(--flou-epais); -webkit-backdrop-filter: var(--flou-epais);
  border: 1px solid var(--glass-bd-strong); border-radius: var(--radius); padding: 14px;
  box-shadow: var(--shadow-deep), var(--glass-edge); animation: slideDown .3s var(--ease); }
.searchbar .search { width: 100%; background: var(--cell-strong); border-color: var(--line); }
.search { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-radius: var(--rd-pill); padding: 14px 22px; transition: border-color .25s, background .25s; color: var(--ink-dim); }
.search:focus-within { border-color: var(--ink); background: var(--field-focus); }
.search input { flex: 1; min-width: 0; background: none; border: none; color: var(--ink); font-size: var(--t-l); }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-mute); }
.search kbd { font-size: var(--t-2xs); color: var(--ink-mute); border: 1px solid var(--line-strong); padding: 3px 8px; border-radius: var(--rd-pill); }

/* Suggestions en direct (pistes / compositeurs / styles) */
.sugg { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.sugg-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--rd-3); transition: background .12s; }
.sugg-item:hover { background: var(--hover-wash); }
.sugg-item .cover { width: 38px; height: 38px; border-radius: var(--rd-2); }
.sugg-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sugg-title { font-size: var(--t-l); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg-sub { font-size: var(--t-s); color: var(--ink-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg-meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); white-space: nowrap; }
.sugg-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 4px 2px; }

.search-tools { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.st-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
.st-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-group > label { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); }
.st-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 92px; overflow-y: auto; }
.st-bpm { display: flex; align-items: center; gap: 8px; }
.st-bpm .cf-input { width: 82px; padding: 9px 12px; font-size: var(--t-m); }
.st-bpm span { color: var(--ink-mute); }
.st-group select.cf-input { padding: 9px 12px; font-size: var(--t-m); }
.st-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 14px; border-top: 1px solid var(--line); }

/* Main */
.main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.content { flex: 1; overflow-y: auto; padding: 108px 40px 132px; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: clamp(32px, 3.6vw, 46px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
.page-head h1 em { font-size: 1.05em; }
.page-head p { color: var(--ink-dim); font-size: var(--t-l); margin-top: 10px; max-width: 560px; line-height: 1.6; }
.eyebrow { color: var(--ink-mute); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 12px; }

/* Chips — pastilles hairline éditoriales */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-s); font-weight: 600;
  letter-spacing: .01em; background: var(--soft-wash); border: 1px solid var(--line-strong);
  color: var(--ink-dim); padding: 8px 15px; border-radius: var(--rd-pill); transition: all .15s var(--ease); white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); background: var(--hover-strong); }
.chip.on { background: var(--prim-bg); border-color: var(--prim-bg); color: var(--prim-ink); }
.chip .x { font-size: var(--t-l); line-height: 1; }
.chip-clear { color: var(--ink-mute); font-size: var(--t-s); text-decoration: underline; text-underline-offset: 3px; }
.chip-clear:hover { color: var(--ink); }

/* =============================================================================
   EXPLORER (héritage — vue non atteignable, conservée fonctionnelle)
   ============================================================================= */
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }
.index-col { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); padding: 18px 20px;
  backdrop-filter: var(--flou-fin); -webkit-backdrop-filter: var(--flou-fin); box-shadow: var(--shadow-soft); }
.index-col h3 { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-mute); text-transform: uppercase;
  letter-spacing: .2em; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.index-list { list-style: none; }
.index-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 4px; cursor: pointer; border-bottom: 1px solid var(--line);
  transition: color .15s, padding-left .18s var(--ease); position: relative; }
.index-item:hover { padding-left: 10px; }
.index-item .ix-label { font-size: var(--t-xl); font-weight: 600; color: var(--ink-dim); transition: color .15s; }
.index-item:hover .ix-label { color: var(--ink); }
.index-item .ix-count { font-family: var(--mono); font-size: var(--t-s); color: var(--ink-mute); }
.index-item.on .ix-label, .index-item.on .ix-count { color: var(--ink); font-weight: 700; }
.index-item.muted { opacity: .32; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cat-card { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  text-align: left; display: block; box-shadow: var(--shadow-soft); transition: transform .3s var(--ease); }
.cat-card:hover { transform: translateY(-5px); }
.cat-card .cat-fx { position: absolute; inset: 0; z-index: 0; transition: transform .5s var(--ease); }
.cat-card:hover .cat-fx { transform: scale(1.06); }
.cat-loops .cat-fx { background: linear-gradient(150deg, #e9c8da, #cdb4d6); }
.cat-beats .cat-fx { background: linear-gradient(150deg, #bcd0e5, #b6ddd6); }
.cat-inner { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; display: flex; flex-direction: column; }
.cat-count { font-family: var(--mono); font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase; color: rgba(16,16,20,.55); }
.cat-name { font-size: clamp(36px, 4.6vw, 56px); font-weight: 600; letter-spacing: -.03em; line-height: 1; margin: 8px 0 6px; color: #101014; }
.cat-desc { font-size: var(--t-m); color: rgba(16,16,20,.55); }
.crumb { color: var(--ink-dim); font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: var(--t-xs); }
.crumb:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   RÉSULTATS — tracklist en carte de verre
   ============================================================================= */
.results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.results-meta .count { color: var(--ink-mute); font-size: var(--t-xs); font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.sort { display: flex; gap: 6px; }
.track-list { display: flex; flex-direction: column; gap: 2px; counter-reset: trk;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius); padding: 8px;
  backdrop-filter: var(--flou-moyen); -webkit-backdrop-filter: var(--flou-moyen);
  box-shadow: var(--shadow-soft), var(--glass-edge); }
.track-row {
  display: grid; grid-template-columns: 34px 54px minmax(0, 1fr) auto 84px; gap: 16px; align-items: center;
  padding: 12px; border-radius: var(--rd-4); cursor: pointer; transition: background .15s; position: relative;
}
.track-row::before { counter-increment: trk; content: counter(trk, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); text-align: center; }
/* En-tête de colonnes — transforme la pile de lignes en catalogue imprimé */
.track-head { display: grid; grid-template-columns: 34px 54px minmax(0, 1fr) auto 84px; gap: 16px;
  align-items: end; padding: 4px 12px 10px; border-bottom: 1px solid var(--line); }
.track-head > span { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .2em; color: var(--ink-mute); }
.track-head .th-meta { display: grid; grid-template-columns: 58px 52px 44px 52px 96px; gap: 10px; justify-self: end; }
.track-head .th-meta i { font-style: normal; }
.track-head .th-meta i:last-child { justify-self: end; }
.track-row:hover { background: var(--hover-wash); }
.track-row.playing { background: var(--row-active); box-shadow: 0 10px 30px -18px rgba(16,16,20,.35); }
.track-row.playing::before { color: var(--accent); }
.cover { width: 54px; height: 54px; border-radius: var(--rd-3); position: relative; overflow: hidden; display: grid; place-items: center; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 16px -8px rgba(16,16,20,.35); }
.cover .play-ov { position: absolute; inset: 0; background: rgba(16,16,20,.4); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.track-row:hover .cover .play-ov, .track-row.playing .cover .play-ov { opacity: 1; }
.t-main { min-width: 0; }
.t-title { font-weight: 600; font-size: var(--t-l); display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.t-title .ver { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-mute); border: 1px solid var(--line-strong); padding: 1px 6px; border-radius: var(--rd-pill); }
.t-prod { color: var(--ink-dim); font-size: var(--t-s); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); border: 1px solid var(--line); padding: 3px 9px; border-radius: var(--rd-pill); background: var(--soft-wash); }
.t-meta { display: grid; grid-template-columns: 58px 52px 44px 52px 96px; gap: 10px; align-items: center;
  color: var(--ink-dim); font-size: var(--t-s); font-family: var(--mono); justify-self: end; }
.t-meta .stat { white-space: nowrap; }
.t-meta .stat b { color: var(--ink); font-weight: 700; }
.t-meta .avail { justify-self: end; }
.t-actions { display: flex; align-items: center; gap: 4px; }
.avail { font-size: var(--t-2xs); font-weight: 700; padding: 4px 10px; border-radius: var(--rd-pill); white-space: nowrap; text-transform: uppercase; letter-spacing: .07em; display: inline-flex; align-items: center; gap: 6px; }
.avail::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.avail.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.avail.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.avail.muted { color: var(--ink-mute); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.match { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.match .why { font-size: var(--t-2xs); color: var(--ink); border: 1px solid var(--line-strong); background: var(--cell); padding: 3px 8px; border-radius: var(--rd-pill); text-transform: uppercase; }
.icon-fav.on { color: var(--accent); }
.icon-fav.on svg { fill: var(--accent); stroke: var(--accent); }

/* =============================================================================
   FOLDERS — cartes-palette : champ de couleur + mini-carte de verre centrée
   ============================================================================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px; }
.folder-card { cursor: pointer; }
.fc-cover { position: relative; aspect-ratio: 1 / 1; border-radius: var(--rd-4); overflow: hidden; margin-bottom: 14px;
  background: var(--fc, #d9d9df); box-shadow: var(--shadow-soft); transition: transform .3s var(--ease);
  display: grid; place-items: center; }
.folder-card:hover .fc-cover { transform: translateY(-4px); }
.fc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mini-carte de verre au centre (référence : cartes palette) */
.fc-chip { position: relative; z-index: 2; width: 62%; border-radius: var(--rd-3); overflow: hidden;
  background: rgba(255,255,255,.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 14px 34px -16px rgba(16,16,20,.4); padding: 7px; }
/* Sur la nuit, le champ derrière est encré : une lame à 40 % deviendrait un
   gris moyen et l'encre sombre du nom passerait sous les 4,5:1. La mini-carte
   redevient franchement claire — c'est un objet imprimé posé sur la pochette,
   au même titre que les auras de pistes. */
body.night .fc-chip { background: rgba(255,255,255,.74); border-color: rgba(255,255,255,.8); }
.fc-chip .fcc-art { aspect-ratio: 1 / 1; border-radius: var(--rd-2); margin-bottom: var(--s-2); }
.fc-chip .fcc-name { font-size: var(--t-m); font-weight: 600; color: var(--fc-ink, #101014); padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-chip .fcc-meta { font-family: var(--mono); font-size: var(--t-2xs); color: var(--fc-ink, #101014); opacity: .6; padding: 1px 4px 4px; }
.folder-cover { position: absolute; inset: 0; display: flex; gap: 0; opacity: 0; }
.folder-cover > div { flex: 1; }
.fc-play { position: absolute; bottom: 12px; right: 12px; z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.75); color: #101014; display: grid; place-items: center;
  backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), background .15s;
  box-shadow: 0 10px 24px -10px rgba(16,16,20,.4); }
.folder-card:hover .fc-play { opacity: 1; transform: translateY(0); }
.fc-play:hover { background: #101014; color: #fff; }
.fc-edit { position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px; border-radius: var(--rd-2);
  background: rgba(255,255,255,.7); color: #101014; display: grid; place-items: center; opacity: 0;
  transition: opacity .15s, background .15s; backdrop-filter: blur(6px); }
.folder-card:hover .fc-edit, .pl-cover:hover .fc-edit { opacity: 1; }
.fc-edit:hover { background: #101014; color: #fff; }
.fc-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fc-text { min-width: 0; }
.folder-card h4 { font-size: var(--t-l); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-sub { color: var(--ink-mute); font-size: var(--t-m); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-more { color: var(--ink-mute); flex-shrink: 0; padding: 2px; transition: color .15s; }
.fc-more:hover { color: var(--ink); }

/* Carte « nouveau folder » */
.nf-cover { display: grid; place-items: center; font-size: 44px; font-weight: 400; color: var(--ink-mute);
  border: 1.5px dashed var(--line-strong); background: var(--soft-wash); transition: color .15s, border-color .15s; box-shadow: none; }
.folder-card:hover .nf-cover { color: var(--ink); border-color: var(--ink); }

/* =============================================================================
   VUE DOSSIER — grande cover-palette + tracklist verre
   ============================================================================= */
.back-btn { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-mute); margin-bottom: 22px; transition: color .15s; }
.back-btn:hover { color: var(--ink); }
.pl-head { display: flex; gap: 34px; align-items: flex-end; margin-bottom: 34px; }
.pl-cover { position: relative; width: 250px; height: 250px; flex-shrink: 0; border-radius: var(--rd-4); overflow: hidden;
  box-shadow: var(--shadow-deep); background: var(--fc, #d9d9df); display: grid; place-items: center; }
.pl-cover .fc-img { position: absolute; inset: 0; }
.pl-info { min-width: 0; padding-bottom: 4px; }
.pl-info h1 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; margin: 8px 0 12px; }
.pl-meta { color: var(--ink-dim); font-family: var(--mono); font-size: var(--t-s); letter-spacing: .03em; }
.pl-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.pl-list { list-style: none; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius); padding: 8px;
  backdrop-filter: var(--flou-moyen); -webkit-backdrop-filter: var(--flou-moyen); box-shadow: var(--shadow-soft), var(--glass-edge); }
.pl-row { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 14px; align-items: center;
  padding: 13px 12px; border-radius: var(--rd-3); cursor: pointer; transition: background .15s; }
.pl-row:hover { background: var(--hover-wash); }
.pl-row.playing { background: var(--row-active); box-shadow: 0 10px 30px -18px rgba(16,16,20,.35); }
.pl-num { font-family: var(--mono); font-size: var(--t-s); color: var(--ink-mute); text-align: center; display: grid; place-items: center; }
.pl-row.playing .pl-num { color: var(--accent); }
.pl-track { min-width: 0; }
.pl-title { font-size: var(--t-l); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bpm { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); font-weight: 400; }
.pl-cred { color: var(--ink-dim); font-weight: 400; font-size: var(--t-m); }
.pl-sub { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.pl-row .btn-icon { opacity: 0; }
.pl-row:hover .btn-icon, .pl-row .icon-fav.on { opacity: 1; }

/* Dropzone du folder */
.pl-dropzone { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-mute); font-size: var(--t-m);
  margin-bottom: 14px; transition: border-color .2s, color .2s, background .2s; background: var(--soft-wash); }
.pl-dropzone.over { border-color: var(--ink); color: var(--ink); background: var(--hover-wash); }

/* =============================================================================
   MODALES (partage / édition)
   ============================================================================= */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(20,20,26,.28); display: grid; place-items: center; padding: 20px; animation: fadeIn .2s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.night .modal-backdrop { background: rgba(0,0,0,.5); }
.modal-backdrop.hidden { display: none; }
.modal { width: min(460px, 96vw); background: var(--glass-strong); backdrop-filter: var(--flou-epais); -webkit-backdrop-filter: var(--flou-epais);
  border: 1px solid var(--glass-bd-strong); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-deep); max-height: 90vh; overflow-y: auto; animation: riseIn .3s var(--ease); }
.share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.share-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.share-thumb { width: 40px; height: 40px; border-radius: var(--rd-3); overflow: hidden; display: block; flex-shrink: 0; background: var(--fc, #d9d9df); }
.share-thumb .fc-img { width: 100%; height: 100%; }
.share-name { font-size: var(--t-xl); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-select { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: var(--t-l); font-weight: 600; margin-bottom: 12px; background: var(--soft-wash); }
.share-select .chev { margin-left: auto; color: var(--ink-mute); }
.share-access { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: var(--t-l); font-weight: 600; margin-bottom: 6px; }
.share-avatars { display: flex; }
.ava { width: 28px; height: 28px; border-radius: 50%; background: var(--prim-bg); color: var(--prim-ink); display: grid; place-items: center; font-size: var(--t-2xs); font-weight: 700; font-family: var(--mono); border: 2px solid var(--glass-bd-strong); }
.ava.alt { background: var(--line-strong); color: var(--ink); margin-left: -8px; }
.share-settings, .share-danger { border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 2px 16px; margin: 6px 0 14px; }
.share-row { border-bottom: 1px solid var(--line); }
.share-settings .share-row:last-child { border-bottom: none; }
.pt-text { display: flex; flex-direction: column; text-align: left; }
.pt-text b { font-size: var(--t-l); font-weight: 600; }
.pt-text span { font-size: var(--t-s); color: var(--ink-mute); margin-top: 2px; }
.share-line { display: block; width: 100%; text-align: left; padding: 15px 0; font-size: var(--t-l); font-weight: 600; border-bottom: 1px solid var(--line); }
.share-danger .share-line:last-child { border-bottom: none; }
.share-line.danger { color: var(--danger); }
.share-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.edit-modal { width: min(560px, 96vw); }

.empty { text-align: center; padding: 80px 20px; color: var(--ink-mute); }
.empty svg { opacity: .3; margin-bottom: 18px; }
.empty h3 { color: var(--ink-dim); font-weight: 600; margin-bottom: 6px; font-size: var(--t-xl); }
.empty p { font-size: var(--t-m); }

/* =============================================================================
   HERO UNIVERS — champ de couleur pastel, typo encre
   ============================================================================= */
.mood-hero { position: relative; height: 250px; border-radius: var(--radius); overflow: hidden; margin-bottom: 26px;
  isolation: isolate; box-shadow: var(--shadow-soft); animation: riseIn .5s var(--ease) both; }
.mood-hero .fx { position: absolute; inset: 0; z-index: -2; }
.mood-hero .veil2 { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(255,255,255,.25), transparent 55%); }
.mood-hero .mh-content { position: absolute; left: 32px; right: 32px; bottom: 28px; }
.mood-hero .mh-content h1 { font-size: clamp(44px, 7vw, 76px); font-weight: 600; letter-spacing: -.04em; line-height: .92; color: #101014; }
.mood-hero .mh-content p { color: rgba(16,16,20,.6); margin: 10px 0 18px; font-size: var(--t-xs); font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.mood-hero .eyebrow { color: rgba(16,16,20,.45); }
.mood-hero .btn-primary { background: #101014; color: #fff; }

/* =============================================================================
   PLAYER — pastille de verre épurée, fine ligne de lecture sur le dessus
   ============================================================================= */
.player { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: max-content; max-width: 94vw; border: 1px solid var(--glass-bd-strong); border-radius: var(--rd-4);
  background: var(--glass-strong); backdrop-filter: var(--flou-epais); -webkit-backdrop-filter: var(--flou-epais);
  box-shadow: var(--shadow-deep), var(--glass-edge);
  padding: 19px 22px 12px 12px; }
.player.idle { display: none; }

/* Ligne de lecture draggable — hitbox de 14px, rail arrondi clippé, poignée jamais rognée */
.seek { position: absolute; top: 3px; left: 20px; right: 20px; height: 14px; cursor: pointer; touch-action: none;
  z-index: 2; display: flex; align-items: center; }
.seek-track { position: relative; width: 100%; height: 4px; border-radius: var(--rd-pill); background: var(--line);
  overflow: hidden; transition: height .15s; }
.seek:hover .seek-track, .seek.dragging .seek-track { height: 6px; }
.seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent); border-radius: var(--rd-pill); pointer-events: none; }
.seek-handle { position: absolute; top: 50%; left: 0%; width: 11px; height: 11px; border-radius: 50%; background: #fff;
  border: 2.5px solid var(--accent); translate: -50% -50%; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none;
  box-shadow: 0 1px 6px rgba(16,16,20,.3); }
.seek:hover .seek-handle, .seek.dragging .seek-handle { opacity: 1; }

.player-row { display: flex; align-items: center; gap: 20px; }
.np { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 280px; }
.np .cover { width: 46px; height: 46px; border-radius: var(--rd-3); }
.np-info { min-width: 0; }
.np-title { font-size: var(--t-l); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.np-prod { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np .icon-fav { margin-left: 2px; flex-shrink: 0; }

.player-center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.p-ctrl { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-dim); border-radius: 50%; transition: color .15s, background .15s, transform .12s var(--ease); }
.p-ctrl:hover { color: var(--ink); background: var(--hover-wash); }
.p-ctrl:active { transform: scale(.9); }
.play-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--prim-bg); color: var(--prim-ink);
  display: grid; place-items: center; transition: all .15s var(--ease); box-shadow: 0 10px 24px -10px rgba(16,16,20,.5); }
.play-btn:hover { background: var(--prim-hover); }
.play-btn:active { transform: scale(.93); }

.player-right { display: flex; align-items: center; gap: 12px; }
.ptime { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vol { width: 72px; display: flex; align-items: center; }
.vol input { width: 100%; accent-color: var(--ink); height: 3px; }
#volBtn { color: var(--ink-mute); }
#volBtn:hover { color: var(--ink); background: transparent; }

/* =============================================================================
   DRAWER — fiche piste : carte de verre, hero aura pleine couleur
   ============================================================================= */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(20,20,26,.22); z-index: 40; opacity: 0; pointer-events: none;
  transition: opacity .3s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body.night .drawer-backdrop { background: rgba(0,0,0,.45); }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 16px; right: 16px; bottom: 16px; width: min(460px, calc(100vw - 32px)); z-index: 50;
  background: var(--glass-strong); backdrop-filter: var(--flou-epais); -webkit-backdrop-filter: var(--flou-epais);
  border: 1px solid var(--glass-bd-strong); border-radius: var(--radius); overflow: hidden auto;
  box-shadow: var(--shadow-deep);
  transform: translateX(112%); transition: transform .45s var(--ease); }
.drawer.open { transform: translateX(0); }
.drawer-hero { position: relative; height: 230px; }
.drawer-hero .grad { position: absolute; inset: 0; }
.drawer-hero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--veil)); }
.drawer-close { position: absolute; top: 14px; right: 14px; z-index: 2; border-radius: 50%;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.7); color: #101014;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.drawer-body { padding: 24px 26px 44px; }
.drawer-body h2 { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.drawer-body .sub { color: var(--ink-dim); font-size: var(--t-s); margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawer-actions { display: flex; gap: 8px; margin: 22px 0; flex-wrap: wrap; }
.dl-group { display: flex; gap: 8px; flex-wrap: wrap; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); overflow: hidden; margin: 20px 0; box-shadow: var(--glass-edge); }
.spec { background: var(--cell); padding: 15px 17px; }
.spec .k { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .12em; }
.spec .v { font-size: var(--t-xl); font-weight: 600; margin-top: 5px; }
.section-label { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .16em; margin: 24px 0 11px; }

/* =============================================================================
   ANIMATIONS
   ============================================================================= */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes slideL { from { opacity: 0; transform: translateX(-14px); } }
@keyframes slideU { from { opacity: 0; transform: translateY(20px); } }

/* =============================================================================
   COMPTE — carte profil + listes de réglages
   ============================================================================= */
.profile-grid { display: grid; grid-template-columns: 1fr 320px; gap: 44px; align-items: start; max-width: 980px; }
.profile-side { border-left: 1px solid var(--line); padding-left: 34px; }
.perm-list, .activity-list { list-style: none; }
.perm { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: var(--t-l); }
.perm span:last-child { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.perm.ok span:last-child { color: var(--ok); }
.perm.no span:last-child, .perm.no span:first-child { color: var(--ink-mute); }
.act { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.act-type { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.act-what { font-size: var(--t-l); color: var(--ink); }
.act-when { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); white-space: nowrap; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv span { color: var(--ink-mute); font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
.kv b { font-weight: 600; font-size: var(--t-m); }
.pref-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-m); color: var(--ink-dim); text-align: left; }
.pref-toggle.on { color: var(--ink); }
.pref-toggle .sw { width: 38px; height: 22px; border-radius: var(--rd-pill); background: var(--line-strong); position: relative; transition: background .2s; flex-shrink: 0; }
.pref-toggle .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(16,16,20,.3); }
.pref-toggle.on .sw { background: var(--prim-bg); }
.pref-toggle.on .sw::after { transform: translateX(16px); }
body.night .pref-toggle.on .sw::after, body.night .acc-toggle.on .sw::after { background: #101014; }

.account { display: grid; grid-template-columns: 340px 1fr; gap: 42px; align-items: start; max-width: 1000px; margin: 0 auto; }
.acc-side { position: sticky; top: 96px; }
.acc-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; display: flex; align-items: flex-end;
  padding: 24px; box-shadow: var(--shadow-deep); }
.acc-visual { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 80% at 24% 18%, #ffffff, transparent 55%),
    radial-gradient(110% 90% at 82% 32%, #cfd3dd, transparent 58%),
    radial-gradient(120% 110% at 50% 112%, #b9a6c4, transparent 62%),
    linear-gradient(160deg, #ececef, #cfcfd6); }
.acc-visual::after { content: ''; position: absolute; inset: 0; opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.acc-card-body { position: relative; z-index: 1; }
.acc-name { font-size: var(--t-2xl); font-weight: 600; color: #101014; letter-spacing: -.02em; }
.acc-joined { font-size: var(--t-xs); color: rgba(16,16,20,.6); margin-top: 5px; font-family: var(--mono); letter-spacing: .04em; }
.acc-edit { display: block; width: 100%; text-align: center; margin-top: 16px; font-weight: 600; font-size: var(--t-l); color: var(--ink-dim); padding: 12px; transition: color .15s; }
.acc-edit:hover { color: var(--ink); }
.acc-list { display: flex; flex-direction: column; gap: 14px; }
.acc-group { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); overflow: hidden;
  backdrop-filter: var(--flou-fin); -webkit-backdrop-filter: var(--flou-fin); box-shadow: var(--shadow-soft); }
.acc-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); transition: background .15s; }
.acc-group .acc-item:last-child { border-bottom: none; }
.acc-item:hover { background: var(--hover-wash); }
.acc-ic { display: grid; place-items: center; color: var(--ink-dim); width: 22px; flex-shrink: 0; }
.acc-label { flex: 1; font-size: var(--t-l); font-weight: 600; }
.acc-right { color: var(--ink-mute); display: grid; place-items: center; }
.acc-badge { padding: 16px 18px; }

/* =============================================================================
   TEXTES LÉGAUX — confidentialité, CGU (source : legal.js)
   Une colonne de lecture : ~62 caractères par ligne, rien d'autre à l'écran.
   ============================================================================= */
.legal { max-width: 640px; }
.legal-chapo { font-size: var(--t-xl); line-height: 1.55; color: var(--ink-dim);
  padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.legal-sec { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.legal-sec:last-of-type { border-bottom: none; }
.legal-sec h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s-3); }
.legal-sec p { font-size: var(--t-l); line-height: 1.7; color: var(--ink-dim); margin-bottom: var(--s-3); }
.legal-sec p:last-child { margin-bottom: 0; }
.legal-sec strong { color: var(--ink); font-weight: 600; }
.legal-sec code { font-family: var(--mono); font-size: .88em; color: var(--ink); }
.legal-sec a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-maj { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .1em; padding-top: var(--s-6); }
/* =============================================================================
   GATE — aide contextuelle (première connexion, retour)
   ============================================================================= */
.gate-help { font-size: var(--t-s); color: var(--ink-dim); line-height: 1.5;
  margin: 0 auto var(--s-1); max-width: 330px; }
.gate-help[hidden] { display: none; }
/* `display` l'emporte sur l'attribut `hidden` : sans cette règle, la rangée du
   mot de passe s'afficherait en permanence (4ᵉ fois que ce piège se présente). */
.code-row[hidden] { display: none; }

/* =============================================================================
   POCHETTE — vignette + envoi, dans la modale d'édition
   ============================================================================= */
.cover-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.cover-vig { width: 56px; height: 56px; border-radius: var(--rd-3); flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--line-strong); background-size: cover; background-position: center; }
.cover-etat { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-mute); }
.cf-aide { font-size: var(--t-s); color: var(--ink-mute); line-height: 1.45; }

/* =============================================================================
   BANDEAU DE MODE — visible seulement quand l'API ne répond pas.
   Ambre (couleur fonctionnelle d'avertissement, cf. DA.md §3.4), jamais l'accent :
   ce n'est pas un signal produit, c'est une mise en garde.
   ============================================================================= */
.mode-local { display: none; }
body.hors-ligne.in-app .mode-local {
  display: block; position: fixed; z-index: 57;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--player-h) + var(--s-5));
  max-width: min(560px, 92vw); text-align: center;
  padding: var(--s-2) var(--s-4); border-radius: var(--rd-pill);
  font-size: var(--t-s); line-height: 1.45;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  box-shadow: var(--shadow-soft);
}
body.hors-ligne.in-app .mode-local b { font-weight: 700; }
@media (max-width: 920px) {
  body.hors-ligne.in-app .mode-local { bottom: calc(var(--player-h) + var(--s-8)); font-size: var(--t-xs); }
}

/* Page publique legal.html — pas de dock, pas de player : juste le document. */
.legal-page { max-width: 720px; margin: 0 auto; padding: var(--s-10) var(--s-5) var(--s-10);
  min-height: 100%; overflow-y: auto; }
.legal-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-8); }
.legal-logo { height: 44px; width: auto; }
.legal-nav { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.legal-title { font-size: clamp(32px, 4vw, 44px); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.04; margin-bottom: var(--s-6); }
body:has(.legal-page) { overflow: auto; }

/* Deux niveaux de signalement, et ils ne doivent pas se ressembler :
   · .todo  — information manquante. Bloquant, donc criard.
   · .check — valeur proposée par défaut, à valider. Lisible en continu, juste
              soulignée : le document se lit normalement avec. */
.legal mark.todo { background: var(--warn); color: #101014; font-family: var(--mono);
  font-size: var(--t-s); font-weight: 700; padding: 2px 8px; border-radius: var(--rd-1);
  text-transform: uppercase; letter-spacing: .04em; }
.legal .check { color: var(--ink); text-decoration: underline dotted var(--warn);
  text-underline-offset: 4px; text-decoration-thickness: 2px; cursor: help; }
.acc-badge b { font-size: var(--t-l); font-weight: 600; }
.acc-badge span { display: block; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); margin-top: 4px; letter-spacing: .03em; }
.acc-toggle .sw { width: 42px; height: 25px; border-radius: var(--rd-pill); background: var(--line-strong); position: relative; transition: background .2s; flex-shrink: 0; }
.acc-toggle .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(16,16,20,.3); }
.acc-toggle.on .sw { background: var(--prim-bg); }
.acc-toggle.on .sw::after { transform: translateX(17px); }
.acc-danger { border: 1px solid var(--glass-bd); background: var(--glass); border-radius: var(--radius-md); }
.acc-danger .acc-label, .acc-danger .acc-ic { color: var(--danger); }
.role-switch { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 18px; border-top: 1px solid var(--line); }

/* =============================================================================
   ESPACE COMPOSITEUR — formulaire de dépôt
   ============================================================================= */
.composer-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; max-width: 1000px; }
.composer-side { border-left: 1px solid var(--line); padding-left: 32px; }
.cf { display: flex; flex-direction: column; gap: 20px; background: var(--glass); border: 1px solid var(--glass-bd);
  border-radius: var(--radius); padding: 24px; backdrop-filter: var(--flou-moyen); -webkit-backdrop-filter: var(--flou-moyen); box-shadow: var(--shadow-soft), var(--glass-edge); }
.cf-group { display: flex; flex-direction: column; gap: 9px; }
.cf-group > label { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); }
.cf-input { background: var(--cell-strong); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--rd-3); padding: 12px 14px; font-size: var(--t-l); font-family: var(--sans); transition: border-color .2s, background .2s; }
.cf-input:focus { outline: none; border-color: var(--ink); background: var(--field-focus); }
select.cf-input { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: var(--chev-img);
  background-repeat: no-repeat; background-position: right 14px center; }
select.cf-input option { color: #101014; }
textarea.cf-input { resize: vertical; }
.cf-row2 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.cf-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 34px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-mute); font-size: var(--t-m); text-align: center; transition: border-color .2s, color .2s; cursor: pointer; background: var(--soft-wash); }
.cf-drop:hover { border-color: var(--ink); color: var(--ink-dim); }
.cf-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ctype { padding: 15px; border: 1px solid var(--line-strong); border-radius: var(--rd-pill); font-weight: 600; font-size: var(--t-l); letter-spacing: .01em; color: var(--ink-dim); transition: all .15s; background: var(--soft-wash); }
.ctype:hover { border-color: var(--ink); color: var(--ink); }
.ctype.on { background: var(--prim-bg); border-color: var(--prim-bg); color: var(--prim-ink); }
.cf-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-tag { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--rd-pill); font-size: var(--t-m); color: var(--ink-dim); transition: all .15s; background: var(--soft-wash); }
.cf-tag:hover { border-color: var(--ink); color: var(--ink); }
.cf-tag.on { background: var(--prim-bg); border-color: var(--prim-bg); color: var(--prim-ink); font-weight: 600; }
.sub-list { list-style: none; }
.sub-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.sub-text b { font-size: var(--t-l); font-weight: 600; display: block; }
.sub-text span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); }
.sub-status { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--warn); white-space: nowrap; }
.sub-status.ok { color: var(--ok); }
.sub-status.priv { color: var(--ink-dim); }

/* Barre de filtres intégrée */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--rd-pill); padding: 8px 12px;
  backdrop-filter: var(--flou-fin); -webkit-backdrop-filter: var(--flou-fin); width: fit-content; max-width: 100%;
  box-shadow: var(--shadow-soft), var(--glass-edge); }
.fb-group { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-sep { width: 1px; height: 22px; background: var(--line-strong); flex-shrink: 0; }
.fb-label { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); padding-right: 4px; }

/* Panneau de filtres STYLE */
.chev-s { opacity: .55; font-size: var(--t-xs); margin-left: 2px; }
.style-panel { position: fixed; z-index: 75; background: var(--glass-strong);
  backdrop-filter: var(--flou-epais); -webkit-backdrop-filter: var(--flou-epais);
  border: 1px solid var(--glass-bd-strong);
  border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-deep);
  animation: slideDown .22s var(--ease); }
.style-panel.hidden { display: none; }
.sp-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 22px; }
.sp-col h4 { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-mute); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sp-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-height: 320px; overflow-y: auto; }
.sp-col:not(:first-child) .sp-items { grid-template-columns: 1fr; }
.sm-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--rd-2);
  font-size: var(--t-m); font-weight: 600; color: var(--ink-dim); text-align: left; transition: background .12s, color .12s; }
.sm-item:hover { background: var(--hover-wash); color: var(--ink); }
.sm-item.on { color: var(--ink); font-weight: 700; background: var(--cell); }
.smi-check { width: 11px; flex-shrink: 0; font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-count { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.sp-actions { display: flex; align-items: center; gap: 14px; }

/* =============================================================================
   MENU CONTEXTUEL
   ============================================================================= */
.ctx-menu { position: fixed; z-index: 95; width: 250px; background: var(--glass-strong);
  backdrop-filter: var(--flou-epais); -webkit-backdrop-filter: var(--flou-epais);
  border: 1px solid var(--glass-bd-strong); border-radius: var(--radius-md); padding: 7px;
  box-shadow: var(--shadow-deep); animation: riseIn .14s var(--ease); }
.ctx-menu.hidden { display: none; }
.ctx-head { padding: 9px 11px 11px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
  font-size: var(--t-m); font-weight: 600; }
.ctx-head span { display: block; font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-mute); margin-top: 3px; font-weight: 400; }
.ctx-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: var(--rd-2);
  font-size: var(--t-m); font-weight: 600; color: var(--ink-dim); text-align: left; transition: background .12s, color .12s; }
.ctx-item:hover { background: var(--hover-wash); color: var(--ink); }
.ctx-ic { display: grid; place-items: center; width: 17px; flex-shrink: 0; opacity: .8; }
.ctx-item.danger { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 8px; }

/* =============================================================================
   TOOLTIPS du dock
   ============================================================================= */
.nav-item[data-tip] { position: relative; }
.nav-item[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-4px);
  background: var(--prim-bg); color: var(--prim-ink);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px; border-radius: var(--rd-pill); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .18s, transform .18s var(--ease); z-index: 60;
}
.nav-item[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============================================================================
   FAVORIS — stats
   ============================================================================= */
.fav-stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line);
  border: 1px solid var(--glass-bd); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow-soft), var(--glass-edge); }
.fav-stat { flex: 1; min-width: 110px; background: var(--cell); padding: 15px 18px; }
.fav-stat b { display: block; font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.02em; }
.fav-stat span { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); }
.fav-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.t-meta .added { color: var(--ink-mute); font-size: var(--t-xs); }

/* =============================================================================
   PANEL ADMIN
   ============================================================================= */
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.admin-cols.three { grid-template-columns: repeat(3, 1fr); }
.admin-card { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); padding: 20px;
  backdrop-filter: var(--flou-fin); -webkit-backdrop-filter: var(--flou-fin); box-shadow: var(--shadow-soft); }
.admin-card .section-label { margin-top: 0; }
.admin-hint { font-size: var(--t-m); color: var(--ink-mute); line-height: 1.55; margin-bottom: 16px; }
.admin-card .cf-row2 { margin-bottom: 14px; }
.admin-card .cf-group { margin-bottom: 14px; }

.invite-out { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--line-strong); background: var(--cell-strong); border-radius: var(--radius-md); }
.invite-code { font-family: var(--mono); font-size: var(--t-xl); font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.invite-meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); flex: 1; }

.inv-list { list-style: none; }
.inv-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.inv-list .inv-item:last-child { border-bottom: none; }
.inv-item.dead { opacity: .45; }
.inv-item b { font-family: var(--mono); font-size: var(--t-m); letter-spacing: .05em; }
.inv-item span { display: block; font-size: var(--t-xs); color: var(--ink-mute); margin-top: 3px; }
.inv-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.inv-uses { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); }

.admin-table { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--radius-md); overflow: hidden;
  backdrop-filter: var(--flou-fin); -webkit-backdrop-filter: var(--flou-fin); box-shadow: var(--shadow-soft); }
.at-head, .at-row { display: grid; grid-template-columns: 1.5fr .9fr 2fr .5fr .7fr .6fr; gap: 14px; align-items: center; padding: 13px 18px; }
.cat-table .at-head, .cat-table .at-row { grid-template-columns: 1.6fr .5fr .4fr .6fr .8fr .7fr .6fr; }
.at-head { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); border-bottom: 1px solid var(--line); }
.at-row { border-bottom: 1px solid var(--line); transition: background .12s; }
.admin-table .at-row:last-child { border-bottom: none; }
.at-row:hover { background: var(--hover-wash); }
.at-user b { font-size: var(--t-l); font-weight: 600; display: block; }
.at-user span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); }
.at-role { padding: 8px 10px; font-size: var(--t-s); }
.at-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.cap-dot { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 8px; border-radius: var(--rd-pill); border: 1px solid var(--line-strong); color: var(--ink-mute); transition: all .12s; }
.cap-dot:hover { border-color: var(--ink-dim); color: var(--ink-dim); }
.cap-dot.on { background: var(--prim-bg); border-color: var(--prim-bg); color: var(--prim-ink); font-weight: 700; }
.at-num { font-family: var(--mono); font-size: var(--t-s); color: var(--ink-dim); }
.at-act { display: flex; gap: 2px; justify-content: flex-end; }
.at-act .btn-icon { width: 32px; height: 32px; }

.tax-tag { display: inline-flex; align-items: center; gap: 7px; }
.tax-tag button { color: var(--ink-mute); font-size: var(--t-xs); }
.tax-tag button:hover { color: var(--danger); }
.tax-add { display: flex; gap: 8px; margin-top: 14px; }
.tax-add .cf-input { flex: 1; padding: 9px 12px; font-size: var(--t-m); }

/* =============================================================================
   RESPONSIVE — le header reste en haut (déployé en permanence au tactile)
   ============================================================================= */
@media (max-width: 920px) {
  .content { padding: 96px 16px calc(140px + env(safe-area-inset-bottom)); }

  /* iOS zoome de force sur tout champ de moins de 16px et ne dézoome jamais :
     on plancher tous les champs à 16px plutôt que d'interdire le zoom (a11y). */
  input, select, textarea,
  .code-row input, .search input, .cf-input, .lic-label, .lic-desc,
  /* 16px en dur, hors échelle : c'est un seuil imposé par iOS, pas un choix
     typographique — le descendre à --t-l (15px) rallumerait le zoom forcé. */
  .lic-price-input, .up-title, .up-bpm, .up-sel { font-size: 16px; }

  /* Dock en haut, toujours déployé (pas de survol au tactile).
     La safe area évite de passer sous l'encoche / la Dynamic Island. */
  .appbar { top: calc(10px + env(safe-area-inset-top)); height: 54px; padding: 0 8px; }
  .content { padding-top: calc(80px + env(safe-area-inset-top)); }

  /* Voile du haut — corrige un vrai défaut vu sur iPhone : le dock est une
     pastille flottante, donc en défilant le contenu remonte À CÔTÉ et AU-DESSUS
     de lui, jusque dans la barre d'état, et se lit par-dessus l'heure et la
     Dynamic Island. Le voile fait fondre le contenu dans le fond avant qu'il
     n'y arrive.
     ⚠️ Il ne peut PAS être un ::before de .appbar : `backdrop-filter` crée un
     contexte d'empilement, l'enfant resterait piégé dedans (cf. DA.md §12.1).
     On le pose sur #app, entre le contenu et le dock (z-index 54 < 55). */
  #app::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 54;
    height: calc(env(safe-area-inset-top) + 76px); pointer-events: none;
    background: linear-gradient(180deg, var(--bg) 0 46%, transparent);
  }
  .searchbar { top: calc(74px + env(safe-area-inset-top)); }
  .nav-dock { max-width: none; opacity: 1; margin: 0 8px; overflow: visible; }
  .nav-item { width: 42px; height: 42px; }
  .appdock .brand-logo { height: 26px; }
  .nav-item[data-tip]::after { display: none; }

  /* Player en bas, compact : cover + titre pleine largeur, lecture + suivant */
  .player { bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); max-width: none;
    border-radius: var(--rd-4); padding: 18px 14px 12px 10px; }
  .seek { left: 16px; right: 16px; }
  .player-right { display: none; }
  #prevBtn { display: none; }
  .player-row { gap: 12px; }
  .np { flex: 1; max-width: none; }
  .np .icon-fav { display: none; }
  .play-btn { width: 42px; height: 42px; }

  /* Le + devient un bouton flottant en bas à droite, au-dessus du player */
  .add-btn { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); right: 16px; width: 54px; height: 54px; }
  .add-menu { top: auto; bottom: calc(154px + env(safe-area-inset-bottom)); }

  .searchbar { top: 76px; }
  .search-panel { width: calc(100vw - 20px); max-height: 74vh; overflow-y: auto; }
  .st-row { grid-template-columns: 1fr; }

  /* Rangées compactes : n° masqué, méta réduite, tags limités */
  .track-row { grid-template-columns: 48px 1fr auto; gap: 12px; }
  .track-row::before { display: none; }
  .cover { width: 48px; height: 48px; }
  .t-meta { display: none; }
  .track-head { display: none; }
  .t-tags .tag:nth-child(n+3) { display: none; }
  .t-actions [data-open] { display: none; }

  .filter-bar { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; border-radius: var(--rd-4); -webkit-overflow-scrolling: touch; }
  .fb-group { flex-wrap: nowrap; }
  .filter-bar::-webkit-scrollbar { display: none; }

  /* Tactile : pas de survol — les actions des cartes folders restent visibles */
  .fc-edit, .fc-play { opacity: 1; transform: none; }

  .page-head h1 { font-size: var(--t-3xl); }
  .index-grid { grid-template-columns: 1fr; gap: 24px; }
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .profile-grid { grid-template-columns: 1fr; gap: 28px; }
  .profile-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
  .act { grid-template-columns: 1fr auto; }
  .act-type { grid-column: 1 / -1; }
  .composer-grid { grid-template-columns: 1fr; gap: 28px; }
  .composer-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
  .cf-row2 { grid-template-columns: 1fr; }
  .admin-cols, .admin-cols.three { grid-template-columns: 1fr; }
  .at-head { display: none; }
  .at-row, .cat-table .at-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fav-stat { min-width: 88px; padding: 12px 14px; }
  .fav-stat b { font-size: var(--t-2xl); }
  .pl-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pl-cover { width: 170px; height: 170px; }
  .account { grid-template-columns: 1fr; gap: 24px; }
  .acc-side { position: static; }
  .acc-card { aspect-ratio: 16 / 10; max-width: 340px; }
  .drawer { top: auto; right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 86vh;
    transform: translateY(110%); }
  .drawer.open { transform: translateY(0); }
  .sp-cols { grid-template-columns: 1fr; }
  .sp-items { max-height: 180px; }
  .style-panel { max-height: 70vh; overflow-y: auto; }
}

/* =============================================================================
   COMPOSANTS PORTÉS depuis la branche produit (partage par lien, vente,
   pages publiques, achat, Mes prods, dépôt en masse, profil) — re-skinnés
   aux tokens « argent / verre ». Source : claude/kind-sanderson-2e29a0.
   ============================================================================= */
/* LE SEUIL DU SÉRIF — ~30 px.
   Premier réglage : 22 px. Trop bas. Sur un nom de folder (« À faire écouter — A&R »,
   « Club / DJ set ») les esperluettes, les barres obliques et les accents se brouillaient,
   et le sérif ne ressemblait plus à un parti pris mais à une erreur de police.
   Il est donc réservé aux TITRES DE PAGE et aux grands nombres. Tout ce qui est un
   libellé — même un titre de carte — reste en Inter Tight. */
.display, .page-head h1, .gate-title, .pl-info h1, .drawer-body h2,
.mood-hero .mh-content h1, .pub-info h1, .pub-error h1, .cat-name, .acc-name {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.01em;
}
/* Édition de la cover : l'ancien bouton de 30 px, invisible hors survol, était
   introuvable. Overlay explicite au survol, et toujours visible au doigt. */
.cover-edit { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 12px;
  background: rgba(8,8,10,.72); opacity: 0; transition: opacity .18s var(--ease); }
.pl-cover:hover .cover-edit, .pl-cover:focus-within .cover-edit { opacity: 1; }
.cover-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: var(--rd-pill); background: rgba(255,255,255,.92); color: #101014;
  font-size: var(--t-s); font-weight: 700; transition: all .15s; }
.cover-btn:hover { background: var(--accent); color: var(--accent-ink); }
.cover-btn.ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--line-strong); }
.cover-btn.ghost:hover { color: var(--danger); border-color: var(--danger); background: transparent; }
@media (hover: none) { .cover-edit { opacity: 1; background: linear-gradient(transparent 45%, rgba(8,8,10,.85)); justify-content: flex-end; } }
/* Repère honnête : cette prod n'a pas de fichier, sa lecture est simulée */
.np-sim { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .1em; padding: 2px 5px;
  border-radius: var(--rd-1); background: rgba(16,16,20,.085); color: var(--ink-mute); flex-shrink: 0; }
/* Menus déroulants — le rendu natif (flèches système, fond clair) cassait la DA.
   On retire l'habillage du navigateur et on dessine notre propre chevron.
   La liste ouverte reste rendue par l'OS : seule sa palette est ajustable. */
select.cf-input, .up-sel, select.at-role {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ECEAE3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 36px; cursor: pointer; text-overflow: ellipsis;
}
.up-sel { background-position: right 8px center; padding-right: 26px; }
.at-todo { font-style: normal; color: var(--warn); }
/* =============================================================================
   RECHERCHE — bascule simple ↔ détaillée
   ============================================================================= */
.search-adv { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-dim); border: 1px solid var(--line-strong); border-radius: var(--rd-pill);
  padding: 7px 12px; transition: all .16s var(--ease); }
.search-adv:hover { color: var(--ink); border-color: var(--ink-dim); }
.search-adv.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.sa-badge { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--rd-pill); background: var(--accent); color: var(--accent-ink);
  font-size: var(--t-2xs); font-weight: 700; font-style: normal; }
/* =============================================================================
   AVATARS & PHOTO DE PROFIL
   ============================================================================= */
.ava-img { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; background: rgba(16,16,20,.055); }
.ava-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pm-photo { display: flex; align-items: center; gap: 20px; padding: 18px 0 22px; }
.pm-photo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pm-hint { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.5; }
.pm-remove { padding: 4px 0 !important; border-bottom: none !important; font-size: var(--t-s) !important; }
.at-user-txt { min-width: 0; }
.at-ava { position: relative; flex-shrink: 0; border-radius: 50%; line-height: 0; }
.at-ava-ic { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,0,0,.62); color: var(--ink); opacity: 0; transition: opacity .15s; }
.at-ava:hover .at-ava-ic { opacity: 1; }
/* =============================================================================
   PARTAGE PAR LIEN
   ============================================================================= */
.share-id-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-kind { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute); }
.share-link { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--rd-3); }
.sl-ic { color: var(--ink-mute); display: grid; place-items: center; flex-shrink: 0; }
.sl-input { flex: 1; min-width: 0; background: none; border: none; color: var(--ink-dim);
  font-family: var(--mono); font-size: var(--t-xs); padding: 4px 0; }
.sl-input:focus { outline: none; color: var(--ink); }
.share-note { font-size: var(--t-s); color: var(--ink-mute); line-height: 1.6; margin: 12px 2px 0; }
.share-note b { color: var(--ink-dim); }
.share-off { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 30px 20px; border: 1px dashed var(--line-strong); border-radius: var(--rd-3); }
.so-ic { color: var(--ink-mute); }
.share-off b { font-size: var(--t-l); }
.share-off span { font-size: var(--t-s); color: var(--ink-mute); line-height: 1.6; max-width: 300px; }
.share-foot.one { grid-template-columns: 1fr; margin-top: 16px; }
.btn.is-done { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
/* =============================================================================
   FILE DE DÉPÔT — glisser plusieurs fichiers, corriger, publier
   ============================================================================= */
.up-drop { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 58px 26px; border: 1px dashed var(--line-strong);
  border-radius: var(--rd-4); background: rgba(16,16,20,.02); color: var(--ink-mute);
  transition: border-color .18s, background .18s; }
.up-drop.compact { padding: 20px; flex-direction: row; gap: 14px; font-size: var(--t-m); }
.up-drop.over { border-color: var(--accent); background: rgba(255,46,136,.07); color: var(--ink); }
.up-drop b { color: var(--ink); }
.link-btn { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.up-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 24px 0 14px;
  padding: 12px 0; border-block: 1px solid var(--line); }
.up-check-all { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-s);
  font-weight: 700; cursor: pointer; white-space: nowrap; }
.up-bulk { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.up-bulk-label, .up-hint { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute); }
.up-count { margin-left: auto; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-dim); white-space: nowrap; }
.up-list { display: flex; flex-direction: column; gap: 8px; }
.up-row { display: grid; grid-template-columns: 28px minmax(160px, 1.6fr) auto minmax(120px, auto) minmax(130px, auto) auto auto 32px;
  gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--rd-3); background: rgba(16,16,20,.022); }
.up-row.analyzing { border-color: rgba(255,46,136,.3); }
.up-row.error { border-color: rgba(255,90,95,.4); }
.up-check input, .up-check-all input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.up-file { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-title { background: none; border: none; color: var(--ink); font-size: var(--t-l); font-weight: 700;
  padding: 3px 0; width: 100%; border-bottom: 1px solid transparent; }
.up-title:focus { outline: none; border-bottom-color: var(--accent); }
.up-name { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-kind { display: flex; gap: 4px; }
.up-bpm, .up-key { display: flex; align-items: center; gap: 6px; }
.up-num { width: 58px; background: rgba(0,0,0,.25); border: 1px solid var(--line-strong);
  border-radius: var(--rd-2); color: var(--ink); padding: 6px 8px; font-family: var(--mono);
  font-size: var(--t-m); font-weight: 700; text-align: center; }
.up-num:focus, .up-sel:focus { outline: none; border-color: var(--accent); }
.up-num::-webkit-outer-spin-button, .up-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.up-oct { display: flex; flex-direction: column; gap: 2px; }
.up-oct button { font-family: var(--mono); font-size: var(--t-2xs); line-height: 1; padding: 3px 4px;
  border: 1px solid var(--line); border-radius: var(--rd-1); color: var(--ink-mute); }
.up-oct button:hover { border-color: var(--accent); color: var(--accent); }
.up-sel { background: rgba(0,0,0,.25); border: 1px solid var(--line-strong); border-radius: var(--rd-2);
  color: var(--ink); padding: 6px 8px; font-family: var(--mono); font-size: var(--t-s); }
.up-alt { font-family: var(--mono); font-size: var(--t-2xs); padding: 3px 6px; border-radius: var(--rd-1);
  border: 1px dashed var(--line-strong); color: var(--ink-mute); white-space: nowrap; }
.up-alt:hover { border-color: var(--accent); color: var(--accent); }
.src { font-family: var(--mono); font-size: var(--t-2xs); font-style: normal; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 5px; border-radius: var(--rd-1); white-space: nowrap; }
.src-name { background: rgba(155,232,112,.16); color: var(--ok); }
.src-auto { background: rgba(16,16,20,.075); color: var(--ink-mute); }
.src-low { background: rgba(255,194,75,.16); color: var(--warn); }
.up-tags-btn { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .08em;
  padding: 7px 10px; border: 1px dashed var(--line-strong); border-radius: var(--rd-2); color: var(--ink-mute);
  white-space: nowrap; }
.up-tags-btn:hover { border-color: var(--ink-dim); color: var(--ink); }
.up-tags-btn.on { border-style: solid; border-color: var(--accent); color: var(--accent); }
.up-status { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-mute); white-space: nowrap; }
.up-status.ready { color: var(--ok); }
.up-status.analyzing { color: var(--accent); }
.up-status.error { color: var(--danger); }
.up-del { width: 30px; height: 30px; }
.up-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.up-foot .btn[disabled] { opacity: .4; pointer-events: none; }
/* Mes prods — gestion par le compositeur */
.mp-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.mp-row { display: grid; grid-template-columns: 52px 1.4fr auto auto; gap: 16px; align-items: center;
  padding: 14px 14px; border-bottom: 1px solid var(--line); transition: background .15s; }
.mp-row:hover { background: rgba(16,16,20,.03); }
.mp-row .cover { width: 52px; height: 52px; }
.mp-main { min-width: 0; }
.mp-title { font-size: var(--t-l); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mp-sub { font-family: var(--mono); font-weight: 400; font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 5px; }
.mp-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mp-state { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 9px; border-radius: var(--rd-pill); border: 1px solid var(--line-strong); color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mp-state.on { color: var(--ok); border-color: rgba(155,232,112,.4); }
.mp-state.sale { color: var(--accent); border-color: rgba(255,46,136,.45); }
.mp-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.danger-btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.danger-btn:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); }
/* Catalogue vide (jour du lancement) */
.start-card { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; max-width: 520px; margin: 40px auto 0; padding: 48px 32px;
  border: 1px dashed var(--line-strong); border-radius: var(--rd-4); background: rgba(16,16,20,.02); }
.start-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,46,136,.12); color: var(--accent); }
.start-card h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; letter-spacing: -.01em; }
.start-card p { font-size: var(--t-m); color: var(--ink-dim); line-height: 1.65; }
.start-card .btn { margin-top: 6px; }
/* =============================================================================
   VENTE — offres du compositeur, page de vente publique
   ============================================================================= */
.share-tabs { display: flex; gap: 6px; padding: 4px; border-radius: var(--rd-3);
  background: rgba(16,16,20,.038); margin-bottom: 16px; }
.stab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--rd-2); font-size: var(--t-s); font-weight: 700;
  color: var(--ink-mute); transition: all .16s var(--ease); }
.stab:hover { color: var(--ink); }
.stab.on { background: rgba(16,16,20,.09); color: var(--ink); }
.share-row.solo { border-bottom: none; border: 1px solid var(--line-strong); border-radius: var(--rd-3); padding: 14px 16px; }
.sale-dim { opacity: .45; pointer-events: none; transition: opacity .2s; }
.lic-list { display: flex; flex-direction: column; border: 1px solid var(--line-strong);
  border-radius: var(--rd-3); overflow: hidden; }
.lic-row { display: grid; grid-template-columns: 1fr auto 26px; gap: 10px; align-items: center;
  padding: 11px 12px; border-bottom: 1px solid var(--line); }
.lic-row:last-child { border-bottom: none; }
.lic-row:focus-within { background: rgba(255,46,136,.06); }
.lic-del { width: 24px; height: 24px; border-radius: var(--rd-2); color: var(--ink-mute);
  font-size: var(--t-m); display: grid; place-items: center; transition: all .15s; }
.lic-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.lic-empty { font-size: var(--t-s); color: var(--ink-mute); line-height: 1.6;
  padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--rd-3); }
.lic-add-row { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lic-sugg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute); }
.chip-xs { padding: 5px 9px; font-size: var(--t-2xs); border: 1px solid var(--line-strong);
  border-radius: var(--rd-pill); color: var(--ink-dim); transition: all .14s; }
.chip-xs:hover { border-color: var(--accent); color: var(--accent); }
.lic-warn { font-size: var(--t-s); color: var(--warn); line-height: 1.6; margin-top: 14px; }
.lic-fields { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lic-label::placeholder, .lic-desc::placeholder { color: var(--ink-mute); font-weight: 400; }
.lic-label, .lic-desc, .lic-price-input { background: none; border: none; color: var(--ink); width: 100%; padding: 2px 0; }
.lic-label { font-size: var(--t-m); font-weight: 700; }
.lic-desc { font-size: var(--t-xs); color: var(--ink-mute); }
.lic-label:focus, .lic-desc:focus, .lic-price-input:focus { outline: none; color: var(--accent); }
.lic-price { display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--rd-2); }
.lic-price-input { width: 56px; text-align: right; font-family: var(--mono); font-size: var(--t-m); font-weight: 700; }
.lic-price i { font-style: normal; color: var(--ink-mute); font-size: var(--t-s); }
.lic-price-input::-webkit-outer-spin-button, .lic-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sale-block { margin-top: 52px; padding: 30px; border-radius: var(--rd-4);
  border: 1px solid var(--line); background: rgba(16,16,20,.02); }
.sale-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sale-head p { font-size: var(--t-m); color: var(--ink-dim); line-height: 1.6; margin-bottom: 22px; max-width: 520px; }
/* auto-fill + max borné : une offre seule ne s'étire pas sur toute la largeur. */
.lic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 320px)); gap: 12px; }
.lic-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--rd-3); background: rgba(0,0,0,.28);
  transition: border-color .18s, transform .18s var(--ease); }
.lic-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lic-card-top b { display: block; font-size: var(--t-l); font-weight: 700; }
.lic-card-top span { display: block; font-size: var(--t-s); color: var(--ink-mute); line-height: 1.5; margin-top: 5px; }
.lic-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lic-amount { font-family: var(--mono); font-size: var(--t-xl); font-weight: 700; }
.sale-legal { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.6; margin-top: 18px; }
.buy-recap { display: flex; align-items: center; gap: 13px; padding: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--rd-3); }
.buy-recap .cover { width: 46px; height: 46px; border-radius: var(--rd-2); flex-shrink: 0; display: block; }
.buy-recap-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.buy-recap-txt b { font-size: var(--t-l); }
.buy-recap-txt span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); }
.buy-lic { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 16px; border: 1px solid var(--line-strong); border-radius: var(--rd-3); margin-bottom: 16px; }
.buy-lic-txt { display: flex; flex-direction: column; gap: 3px; }
.buy-lic-txt b { font-size: var(--t-l); }
.buy-lic-txt span { font-size: var(--t-xs); color: var(--ink-mute); }
.buy-modal .cf-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.buy-modal .cf-group label { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-mute); }
.buy-err { color: var(--danger); font-size: var(--t-s); min-height: 16px; }
.buy-sim { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.6; margin: 6px 0 16px; }
.buy-done { text-align: center; padding: 26px 12px 8px; }
.buy-done h3 { font-size: var(--t-2xl); font-weight: 700; margin-bottom: 10px; }
.buy-done p { font-size: var(--t-m); color: var(--ink-dim); line-height: 1.65; }
.buy-done .buy-sim { margin-top: 16px; }
/* =============================================================================
   PAGES PUBLIQUES — ouvertes par un lien, sans compte
   ============================================================================= */
body.public-view .appbar { display: none; }
body.public-view .content { padding-top: 52px; }
.pub-wrap { max-width: 900px; margin: 0 auto; }
.pub-top { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.pub-logo { width: 30px; height: 30px; opacity: .9; }
.pub-top-txt, .pub-badge { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .18em; color: var(--ink-mute); }
.pub-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; }
.pub-track { display: flex; gap: 40px; align-items: flex-start; }
.pub-cover { width: 300px; height: 300px; flex-shrink: 0; border-radius: var(--rd-3);
  box-shadow: 0 34px 74px -24px rgba(0,0,0,.92), inset 0 0 0 1px rgba(16,16,20,.07); }
.pub-info { min-width: 0; flex: 1; padding-top: 6px; }
.pub-info h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 62px);
  letter-spacing: -.02em; line-height: .98; }
.pub-prod { font-family: var(--mono); font-weight: 400; font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: .18em; color: var(--ink-mute); margin-top: 14px; }
.pub-specs { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.pub-specs span { display: flex; flex-direction: column; gap: 4px; padding: 11px 18px 11px 0;
  border-right: 1px solid var(--line); font-size: var(--t-l); font-weight: 600; }
.pub-specs span:last-child { border-right: none; }
.pub-specs span + span { padding-left: 18px; }
.pub-specs i { font-family: var(--mono); font-size: var(--t-2xs); font-style: normal; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-mute); }
.pub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pub-nodl { font-size: var(--t-s); color: var(--ink-mute); margin-bottom: 16px; }
.pub-tags { margin-top: 8px; }
.pub-error { padding: 40px 0 20px; }
.pub-error h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 50px); letter-spacing: -.02em; }
.pub-error p { color: var(--ink-dim); font-size: var(--t-l); margin-top: 12px; line-height: 1.6; }
.pub-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 56px; padding: 26px 28px; border-radius: var(--rd-4); border: 1px solid var(--line);
  background: rgba(16,16,20,.02); }
.pub-cta-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pub-cta-txt b { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
.pub-cta-txt span { font-size: var(--t-m); color: var(--ink-mute); line-height: 1.55; }
/* Compléments de portage : sélecteur de la file de dépôt + vignette folder du partage */
.up-sel { appearance: none; -webkit-appearance: none; background: var(--cell-strong); border: 1px solid var(--line-strong);
  color: var(--ink); border-radius: var(--rd-2); padding: 7px 26px 7px 10px; font-size: var(--t-s);
  background-image: var(--chev-img); background-repeat: no-repeat; background-position: right 8px center; cursor: pointer; }
.up-sel option, select.cf-input option, select.at-role option { background: #fff; color: #101014; }
body.night .up-sel option, body.night select.cf-input option, body.night select.at-role option { background: #1a1a20; color: #ECEDF1; }
.share-thumb-field { width: 40px; height: 40px; border-radius: var(--rd-3); overflow: hidden; display: block; flex-shrink: 0; background: var(--fc, #d9d9df); }
.share-thumb-field .fc-img { width: 100%; height: 100%; object-fit: cover; }