/* Museek — thème « cinéma + or ». Chargé APRÈS app.css : il redéfinit les couleurs, la typographie, l'espace et les composants.
   Principes : l'essentiel d'abord (les chansons, pas un énorme bloc de dépôt), une seule couleur d'accent (l'or), du verre dépoli et des ombres douces,
   des cibles tactiles de 44 px, rien qui dépasse (zones de sécurité des téléphones), et des mises en page distinctes téléphone / tablette / ordinateur / paysage. */

:root {
  --ink: #09060f; --ink-2: #120d1b; --ink-3: #1a1425; --ink-4: #261d34;
  --line: rgba(255, 236, 200, .08); --line-2: rgba(255, 236, 200, .17);
  --text: #f7f1e7; --dim: #bdb4a9; --faint: #877e75;
  --gold: #e9bd52; --gold-hi: #f9e19a; --gold-lo: #b9821b;
  --sing: linear-gradient(135deg, #f9e19a 0%, #e8b64a 48%, #c48a1f 100%);
  --glow: 0 10px 34px -12px rgba(233, 189, 82, .55);
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "SF Pro Text", -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --radius: 18px; --radius-s: 12px; --shadow: 0 22px 60px -22px rgba(0, 0, 0, .75);
  --gutter: clamp(16px, 4.2vw, 44px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
html { background: var(--ink); }
body { font: 16px/1.55 var(--sans); letter-spacing: .005em; }
body::before { background: radial-gradient(1100px 620px at 50% -14%, rgba(233, 189, 82, .13), transparent 62%), radial-gradient(800px 560px at 108% 100%, rgba(120, 60, 130, .16), transparent 62%), var(--ink); }
h1, h2, h3 { font-family: var(--serif); letter-spacing: .005em; }
h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 600; }
::selection { background: rgba(233, 189, 82, .35); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- boutons ---------- */
.btn { min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 244, 220, .05); font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.btn:hover { background: rgba(255, 244, 220, .1); border-color: rgba(233, 189, 82, .45); }
.btn.primary { border: 0; color: #261703; background: var(--sing); box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 14px 38px -12px rgba(233, 189, 82, .7), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn.round { width: 46px; padding: 0; }
.chip { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border: 1px solid currentColor; background: transparent; }
.chip.ready { color: var(--gold); } .chip.working, .chip.queued, .chip.downloading { color: #f3b66a; } .chip.needs_lyrics, .chip.needs_models { color: #f0a074; } .chip.error { color: #ff8a9b; }

/* ---------- barre du haut : verre dépoli, fixe ---------- */
.app-header { position: sticky; top: 0; z-index: 30; padding: calc(12px + var(--safe-t)) var(--gutter) 12px; gap: 14px;
  background: linear-gradient(to bottom, rgba(9, 6, 15, .88), rgba(9, 6, 15, .62)); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--line); }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: var(--glow); }
.brand .word { font: italic 600 26px/1 var(--serif); }
.brand .word b { color: var(--gold); }
main#view { max-width: 1240px; padding: 0 var(--gutter) calc(80px + var(--safe-b)); }
.user-area { margin-left: 0; gap: 10px; }
.user-menu { position: relative; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(233, 189, 82, .55); background: linear-gradient(160deg, #2b2036, #170f22); color: var(--gold-hi); font: 600 16px var(--serif); display: grid; place-items: center; padding: 0; }
.avatar:hover { box-shadow: var(--glow); }
.menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; padding: 8px; border-radius: 16px; background: rgba(26, 20, 37, .97); backdrop-filter: blur(16px); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: grid; gap: 2px; z-index: 40; }
.menu .who { padding: 10px 12px 8px; color: var(--dim); font-size: 13px; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-decoration: none; text-align: left; font-size: 15px; width: 100%; }
.menu a:hover, .menu button:hover { background: rgba(233, 189, 82, .1); }

/* ---------- bibliothèque ---------- */
.lib-top { gap: 22px; padding-top: 22px; }
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lib-head h1 { margin: 0; }
.lib-sub { margin: 6px 0 0; color: var(--dim); font-size: 15px; }
.lib-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 14px; color: var(--faint); pointer-events: none; }
.search input { width: min(280px, 100%); min-height: 44px; padding: 0 16px 0 42px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 244, 220, .05); outline: 0; transition: border-color .15s, background .15s, width .2s; }
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: rgba(233, 189, 82, .6); background: rgba(255, 244, 220, .08); }
.drop-strip { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 20px; border: 1px dashed rgba(233, 189, 82, .38); background: linear-gradient(120deg, rgba(233, 189, 82, .08), rgba(233, 189, 82, .02)); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; overflow: hidden; }
.drop-strip:hover, .drop-strip.over { border-color: var(--gold); background: linear-gradient(120deg, rgba(233, 189, 82, .16), rgba(233, 189, 82, .05)); }
.drop-strip.over { transform: scale(1.005); }
.drop-strip .glyph { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sing); color: #261703; flex: none; box-shadow: var(--glow); }
.drop-strip .txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.drop-strip .txt strong { font: 600 18px/1.2 var(--serif); }
.drop-strip .txt span { color: var(--dim); font-size: 14px; overflow-wrap: anywhere; }
.drop-strip .upload-bar { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3px; border-radius: 0; background: rgba(255, 255, 255, .06); }
.drop-strip .status { color: var(--gold-hi); font-size: 14px; }
.section-title { margin: 14px 0 14px; align-items: center; }
.section-title h2 { font-size: 22px; } .section-title .count { color: var(--faint); font-family: var(--sans); font-size: 14px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 9px; line-height: 22px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 188px), 1fr)); gap: 20px; }
.card { border-radius: 18px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); transition: transform .2s, border-color .2s, box-shadow .2s; }
.card:hover { transform: translateY(-5px); border-color: rgba(233, 189, 82, .5); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(233, 189, 82, .15), 0 18px 46px -24px rgba(233, 189, 82, .55); }
.card .art { aspect-ratio: 1; }
.card .art .play { width: 50px; height: 50px; background: var(--sing); color: #261703; box-shadow: var(--glow); right: 12px; bottom: 12px; }
.card .info { padding: 13px 15px 15px; gap: 4px; }
.card .name { font: 600 18px/1.25 var(--serif); }
.card .artist { font-size: 14px; } .card .meta { font-size: 13px; margin-top: 2px; }
.card .info .chip { width: fit-content; margin-bottom: 4px; }
.card .art .chip { display: none; }
.empty { padding: 36px 0 0; }
.empty h2 { margin-bottom: 8px; }
.page-drop { background: rgba(9, 6, 15, .9); border-color: var(--gold); color: var(--gold-hi); }

/* téléphone : liste compacte (plus de chansons à l'écran, pochette réduite) */
@media (max-width: 640px) {
  .lib-top { padding-top: 14px; gap: 16px; }
  .lib-head h1 { font-size: 30px; }
  .lib-tools { width: 100%; } .search { flex: 1; } .search input { width: 100%; }
  .drop-strip { padding: 12px 14px; gap: 12px; } .drop-strip .glyph { width: 42px; height: 42px; }
  .drop-strip .btn { display: none; }
  .drop-strip .txt strong { font-size: 16px; } .drop-strip .txt span { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .card { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px; border-radius: 16px; }
  .card:hover { transform: none; }
  .card .art { width: 76px; height: 76px; aspect-ratio: auto; border-radius: 12px; margin: 0; }
  .card .art .play { display: none; }
  .card .info { padding: 0; min-width: 0; }
  .card .name { font-size: 17px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .section-title { margin: 8px 0 10px; } .section-title h2 { font-size: 19px; }
}

/* ---------- connexion ---------- */
.login { background: radial-gradient(800px 480px at 50% 0%, rgba(233, 189, 82, .12), transparent 70%); }
.login-card { border-radius: 28px; background: linear-gradient(180deg, rgba(26, 20, 37, .92), rgba(18, 13, 27, .92)); border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 0 1px rgba(233, 189, 82, .06); padding: 34px 28px; }
.login-mark { background: none; width: 78px; height: 78px; border-radius: 20px; overflow: hidden; box-shadow: var(--glow); }
.login-mark img { width: 100%; height: 100%; display: block; }
.login-card h1 { font: 600 30px/1.15 var(--serif); }
.login-form input { border-radius: 14px; background: rgba(255, 244, 220, .05); border-color: var(--line-2); }
.login-form input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(233, 189, 82, .15); }
.login-code { color: var(--gold-hi); }

/* ---------- préparation ---------- */
.prep { padding-top: clamp(14px, 6vh, 56px); }
.prep-card { border-radius: 28px; background: linear-gradient(180deg, rgba(26, 20, 37, .92), rgba(18, 13, 27, .92)); border-color: var(--line-2); gap: 22px; }
.prep-head .cover { box-shadow: var(--glow); }
.prep-progress { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.prep-progress > i { display: block; height: 100%; width: 0; background: var(--sing); border-radius: 6px; transition: width .6s ease; box-shadow: 0 0 18px rgba(233, 189, 82, .6); }
.step { padding: 10px 6px; }
.step.running { background: rgba(233, 189, 82, .08); }
.step.running .dot { border-color: var(--gold); color: var(--gold); }
.step.done .dot { background: var(--gold); border-color: var(--gold); color: #261703; }
.models-box { background: rgba(233, 189, 82, .07); border-color: rgba(233, 189, 82, .3); }

/* ---------- curseurs de défilement et de volume ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 28px; cursor: pointer; --fill: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(to right, var(--gold) var(--fill), rgba(255, 244, 220, .16) var(--fill)); }
input[type=range]::-moz-range-track { height: 5px; border-radius: 5px; background: rgba(255, 244, 220, .16); }
input[type=range]::-moz-range-progress { height: 5px; border-radius: 5px; background: var(--gold); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: var(--gold-hi); border: 2px solid #2a1b05; box-shadow: 0 0 0 3px rgba(233, 189, 82, .25), 0 2px 8px rgba(0, 0, 0, .5); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold-hi); border: 2px solid #2a1b05; }
input[type=range]:focus-visible { outline: none; } input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(233, 189, 82, .4); }

/* ---------- lecteur ---------- */
.stage { background: radial-gradient(1100px 640px at 50% -12%, rgba(233, 189, 82, .16), transparent 62%), radial-gradient(900px 600px at 50% 125%, rgba(120, 60, 130, .22), transparent 62%), #08050e; }
.stage-top { padding: calc(10px + var(--safe-t)) var(--gutter) 6px; gap: 10px; }
.stage-top .titles .t { font: 600 clamp(17px, 2.2vw, 22px)/1.2 var(--serif); }
.stage-top .btn { min-height: 42px; }
.stage-top .btn.round { width: 42px; background: rgba(255, 244, 220, .06); }
.lyrics { padding: var(--slot, 110px) clamp(16px, 7vw, 130px) 70vh; }
.line { font: 500 clamp(24px, min(4.3vw, 6.4vh), 54px)/1.22 var(--serif); margin: clamp(10px, 2vh, 20px) 0; color: #6f6779; opacity: .9; }
.line.current { color: #efe7d6; transform: scale(1.03); text-shadow: 0 0 46px rgba(233, 189, 82, .22); }
.word.past { color: #8c8497; }
.line.current .word.past { color: var(--gold); }
.word.active { background-image: linear-gradient(90deg, var(--gold) calc(var(--p, 0) * 100%), #f4ecdc calc(var(--p, 0) * 100%)); }
.stage-bottom { padding: 8px var(--gutter) calc(14px + var(--safe-b)); gap: 8px; background: linear-gradient(to top, rgba(8, 5, 14, .96) 55%, transparent); }
.transport { padding: 12px 16px; border-radius: 24px; background: rgba(26, 20, 37, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-2); box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8); gap: 14px; }
.transport .bigplay { width: 58px; height: 58px; background: var(--sing); color: #261703; box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .5); }
.times { font-size: 13px; }
.voice { gap: 8px; } .voice input { width: clamp(80px, 12vw, 140px); }
.notice { background: rgba(233, 189, 82, .09); color: #f6dfaa; border-color: rgba(233, 189, 82, .3); }
.todo-btn { color: var(--gold-hi); border-color: rgba(233, 189, 82, .5); }
.drawer, .zones { background: rgba(22, 16, 32, .96); border-color: var(--line-2); }
.drawer .check input, .choice input { accent-color: var(--gold); }

/* téléphone : le tiroir d'options devient une feuille qui monte du bas ; commandes resserrées */
@media (max-width: 700px) {
  .drawer { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 82dvh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 20px 20px calc(24px + var(--safe-b)); z-index: 60; box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 100vmax rgba(6, 4, 10, .55); }
  .drawer::before { content: ""; justify-self: center; width: 44px; height: 4px; border-radius: 4px; background: var(--line-2); margin: -8px 0 2px; }
  .zones { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 70dvh; }
  .transport { padding: 10px 12px; gap: 10px; border-radius: 22px; }
  .transport .bigplay { width: 52px; height: 52px; }
  .stage-top .titles .t { font-size: 17px; }
  .tools { gap: 10px; }
}
/* paysage : on rend la hauteur aux paroles */
@media (max-height: 520px) and (orientation: landscape) {
  .stage-top { padding-top: 6px; padding-bottom: 2px; } .stage-top .titles .a { display: none; }
  .lyrics { padding-top: var(--slot, 70px); padding-bottom: 50vh; }
  .line { font-size: clamp(20px, 5.4vh, 38px); margin: 8px 0; }
  .stage-bottom { padding-bottom: calc(8px + var(--safe-b)); } .transport { padding: 6px 12px; border-radius: 18px; }
  .transport .bigplay { width: 44px; height: 44px; } .times { display: none; }
  .notices { display: none; }
}
/* grand écran (télé, ordinateur en plein écran) : paroles plus grandes */
@media (min-width: 1500px) { .line { font-size: clamp(40px, min(3.4vw, 6.6vh), 78px); } }

/* ---------- écriture ---------- */
.write { gap: 20px 28px; padding-top: 18px; }
.paper { border-radius: 22px; background: #f5edde; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.paper-bar, .paper-foot { background: #eee3cc; }
.aid { border-radius: 22px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border-color: var(--line-2); }
.aid-head .tag { background: rgba(233, 189, 82, .12); color: var(--gold-hi); border-color: rgba(233, 189, 82, .5); }
.draft-line.on { background: rgba(233, 189, 82, .13); }
.write-tabs { display: none; }
@media (max-width: 960px) {
  .write { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 8px; }
  .write > * { min-width: 0; } .paper, .aid { max-width: 100%; }
  .paper textarea { font-size: 19px; --lh: 33px; padding-left: 18px; padding-right: 18px; }
  .write-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 244, 220, .06); border: 1px solid var(--line); position: sticky; top: calc(58px + var(--safe-t)); z-index: 5; backdrop-filter: blur(12px); }
  .write-tabs button { min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--dim); font-weight: 700; letter-spacing: .02em; }
  .write-tabs button.on { background: var(--sing); color: #261703; box-shadow: var(--glow); }
  .write[data-tab="paper"] .aid, .write[data-tab="aid"] .paper { display: none; }
  .paper textarea { min-height: calc(100dvh - 330px); }
  .paper-foot { position: sticky; bottom: 0; z-index: 4; padding-bottom: calc(12px + var(--safe-b)); }
  .write-head h1 { font-size: 30px; }
  .aid .draft { max-height: none; }
}

/* ---------- À compléter, fenêtres ---------- */
.gap-card { border-radius: 22px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border-color: var(--line-2); }
.gap-card blockquote { border-left-color: var(--gold); background: rgba(233, 189, 82, .08); }
.why-choice:hover { border-color: var(--gold); }
.modal-card { background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); }
.seg button.on { background: var(--sing); color: #261703; }
.toast { background: rgba(38, 29, 52, .96); }
@media (max-width: 640px) {
  .complete { gap: 14px; } .gap-card { padding: 16px; border-radius: 18px; }
  .gap-card .actions .btn { flex: 1 1 100%; }
  .complete-foot { position: sticky; bottom: 0; padding: 12px 0 calc(12px + var(--safe-b)); background: linear-gradient(to top, var(--ink) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
.app-footer { padding: 18px var(--gutter) calc(18px + var(--safe-b)); color: var(--faint); font-size: 12px; text-align: center; }
.paper, .aid, .gap-card, .prep-card, .login-card { grid-template-columns: minmax(0, 1fr); }
.paper textarea { min-width: 0; box-sizing: border-box; }
/* logo : image fixe (aucune animation permanente, pour ne pas consommer d'énergie pour rien) */
.brand img.mark { width: 34px; height: 34px; border-radius: 10px; display: block; box-shadow: var(--glow); background: none; }
.browse-btn { margin-top: 10px; }