/* Spot the Beatles — feuille de style
   Direction : archive/encyclopédie. Fond encre, accent or de label vintage,
   serif éditorial (Fraunces), mono catalogue (IBM Plex Mono), corps Inter. */

:root {
  /* signale un thème sombre au système → barres de statut/navigation (PWA Android) adaptées en sombre,
     contrôles natifs (select/inputs) en rendu sombre cohérent */
  color-scheme: dark;
  --ink: #14110d;
  --ink-2: #1c1813;
  --ink-3: #262019;
  --paper: #efe9dd;
  --paper-dim: #b9b1a1;
  --gold: #c79a3e;
  --gold-soft: #e0c074;
  --line: #38302600;
  --border: rgba(199, 154, 62, 0.18);
  --border-strong: rgba(199, 154, 62, 0.4);
  /* dérivés themables (fonds translucides des barres, wash d'accent, badge, croix de modale) */
  --topbar-bg: rgba(20, 17, 13, 0.92);
  --topbar-bg-solid: rgba(20, 17, 13, 0.98);
  --accent-tint: rgba(199, 154, 62, 0.1);
  --badge-bg: rgba(199, 154, 62, 0.94);
  --close-bg: rgba(20, 17, 13, 0.85);
  --player-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45);   /* ombre du lecteur (fixé en bas) — thémable */
  --radius: 10px;
  --display: "Fraunces", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- THÈME CLAIR : fond blanc, texte noir, accent oxblood #800000 ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #ffffff;            /* fond de page (et « couleur sur accent » = blanc sur oxblood) */
  --ink-2: #f5f1ea;          /* surfaces élevées (lecteur, inputs) */
  --ink-3: #ece7dd;          /* cartes */
  --paper: #1a1510;          /* texte principal (quasi noir chaud) */
  --paper-dim: #6b6253;      /* texte secondaire */
  --gold: #800000;           /* accent (oxblood, palette Yellow Submarine) */
  --gold-soft: #9e2f2f;      /* accent secondaire (nav active, contours) */
  --border: rgba(128, 0, 0, 0.16);
  --border-strong: rgba(128, 0, 0, 0.36);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --topbar-bg-solid: rgba(255, 255, 255, 0.98);
  --accent-tint: rgba(128, 0, 0, 0.07);
  --badge-bg: rgba(128, 0, 0, 0.92);
  --close-bg: rgba(26, 21, 16, 0.85);
  --player-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1);   /* ombre douce sur fond clair */
}

/* ---------- THÈME YELLOW SUBMARINE : fond mer + bulles, couleurs du sous-marin ---------- */
:root[data-theme="submarine"] {
  color-scheme: dark;
  --ink: #06283f;            /* fond marin profond (et « couleur sur accent » = navy sur jaune) */
  --ink-2: rgba(8, 44, 68, 0.88);   /* panneaux semi-opaques (laissent transparaître la mer) */
  --ink-3: rgba(12, 58, 88, 0.82);
  --paper: #f3f7fb;          /* texte principal (blanc froid, lisible sur bleu) */
  --paper-dim: #b6c9d8;      /* texte secondaire */
  --gold: #FED403;           /* accent (jaune du sous-marin) */
  --gold-soft: #FEF301;
  --border: rgba(254, 212, 3, 0.22);
  --border-strong: rgba(254, 212, 3, 0.45);
  --topbar-bg: rgba(5, 33, 52, 0.86);
  --topbar-bg-solid: rgba(5, 33, 52, 0.96);
  --accent-tint: rgba(254, 212, 3, 0.12);
  --badge-bg: rgba(254, 212, 3, 0.92);
  --close-bg: rgba(5, 33, 52, 0.9);
  --player-shadow: 0 -6px 22px rgba(0, 0, 0, 0.4);   /* fond marin foncé : ombre soutenue OK */
}
/* Yellow Submarine : fond mer (sur :root/html) + bulles qui remontent (body::before).
   ⚠️ La mer est posée sur :root, PAS sur body, et `body` est rendu transparent : un body opaque
   masquerait les bulles placées en z-index:-1 (piège classique). */
:root[data-theme="submarine"] {
  background: radial-gradient(130% 95% at 50% -15%, #2f8fc0 0%, #0e5480 42%, #06283f 100%) fixed;
}
:root[data-theme="submarine"] body { background: transparent; }
:root[data-theme="submarine"] body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 200vh; z-index: -1;
  pointer-events: none; will-change: transform;
  background-repeat: repeat; background-size: 100% 42vh;
  background-image:
    radial-gradient(circle 7px at 18% 20%, rgba(255,255,255,.55), rgba(255,255,255,.12) 55%, transparent 72%),
    radial-gradient(circle 10px at 62% 48%, rgba(255,255,255,.42), rgba(255,255,255,.08) 55%, transparent 72%),
    radial-gradient(circle 5px at 38% 80%, rgba(255,255,255,.50), transparent 70%),
    radial-gradient(circle 8px at 85% 33%, rgba(255,255,255,.40), transparent 70%),
    radial-gradient(circle 6px at 8% 60%, rgba(255,255,255,.46), transparent 70%),
    radial-gradient(circle 4px at 74% 88%, rgba(255,255,255,.50), transparent 70%),
    radial-gradient(circle 5px at 30% 38%, rgba(255,255,255,.40), transparent 70%),
    radial-gradient(circle 9px at 50% 72%, rgba(255,255,255,.30), transparent 70%);
  animation: subBubbles 14s linear infinite;
}
@keyframes subBubbles { from { transform: translateY(0); } to { transform: translateY(-42vh); } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="submarine"] body::before { animation: none; } }

/* sous-marin décoratif « aquarium » (thème submarine seul) : position pilotée par JS (rAF startAquaSub) en
   `transform: translate(x,y) scaleX(dir)` → rebondit sur les 4 bords, DEVANT le contenu, fixe (insensible au scroll). */
.theme-sub { display: none; }
:root[data-theme="submarine"] .theme-sub {
  display: block; position: fixed; top: 0; left: 0; z-index: 45; pointer-events: none; will-change: transform;
}
.theme-sub-img {
  display: block; width: 88px; height: auto; will-change: transform;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,.45)); animation: snakeSubBob 2.8s ease-in-out infinite;
}
/* en submarine, la frise n'affiche plus SON sous-marin (le global le remplace) */
:root[data-theme="submarine"] .snake-sub { display: none; }
@media (prefers-reduced-motion: reduce) { .theme-sub-img { animation: none; } }

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 28px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { color: var(--gold); font-size: 18px; }
.brand-name { font-family: var(--display); font-size: 18px; letter-spacing: 0.2px; }
.nav { display: flex; gap: 22px; margin-left: 8px; }
.nav a {
  font-size: 14px; color: var(--paper-dim); padding: 4px 0;
  border-bottom: 1.5px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--paper); }
.nav a.active { color: var(--gold-soft); border-color: var(--gold); }
.spotify-btn {
  margin-left: auto; background: transparent; color: var(--gold-soft);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; transition: background .15s;
}
.spotify-btn:hover { background: var(--accent-tint); }
.spotify-btn:disabled { opacity: .4; cursor: default; }
/* aide « Légende acoustique » : visible uniquement dans le menu burger (mobile) — desktop a le roll-over */
.topbar-help { display: none; }
/* desktop : le wrapper s'efface (display:contents) → nav/lang/spotify gardent leur layout flex d'origine */
.topbar-menu { display: contents; }
.burger { display: none; }

/* ---------- layout ---------- */
.main { max-width: 1100px; margin: 0 auto; padding: 40px 28px 80px; }
.notice { padding: 40px 0; color: var(--paper-dim); }
.notice-error { color: #e0907a; }
/* écran de chargement : sous-marin qui flotte */
.loading-sub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 64px 20px; }
.sub-img { width: 220px; max-width: 62%; height: auto; will-change: transform; animation: subBob 2.6s ease-in-out infinite; }
.loading-sub .notice { padding: 0; animation: subFade 1.8s ease-in-out infinite; }
@keyframes subBob { 0%,100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-16px) rotate(2.5deg); } }
@keyframes subFade { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sub-img, .loading-sub .notice { animation: none; } .snake-sub { display: none; } }
.page-title { font-family: var(--display); font-size: 34px; font-weight: 600; margin: 0 0 18px; }
.count { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); }
.back { display: inline-block; margin-bottom: 16px; color: var(--paper-dim); font-size: 14px; }
.back:hover { color: var(--gold-soft); }
.hint { color: var(--paper-dim); margin: 0 0 18px; }

/* ---------- hero ---------- */
.hero { padding: 30px 0 10px; }
.hero-logo { display: block; width: 340px; max-width: 72%; height: auto; margin: 4px 0 26px; }
/* logo wordmark blanc → inversé en noir sur le thème clair (gate + home). Dark/submarine : laissé blanc. */
:root[data-theme="light"] .hero-logo,
:root[data-theme="light"] .gate-logo { filter: invert(1); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.hero-title { font-family: var(--display); font-size: 48px; line-height: 1.12; font-weight: 600; margin: 0 0 18px; max-width: 760px; }
.hero-lead { max-width: 620px; color: var(--paper-dim); font-size: 17px; margin: 0 0 30px; }
.hero-prompt { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--paper-dim); margin: 0 0 14px; }
.hero-foot { color: var(--paper-dim); font-size: 13px; margin: 26px 0 0; }

/* repères moteur/contenu : structure + layout + numéros = moteur ; copie/destinations/thème = contenu (par artiste) */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.door {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--ink-2); transition: border-color .15s, transform .15s;
}
.door:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.door-no { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; color: var(--gold); }
.door-icon { display: block; width: 28px; height: 2px; background: var(--gold); }
.door-name { font-family: var(--display); font-size: 20px; }
.door-desc { color: var(--paper-dim); font-size: 14px; }
.door-foot {
  font-family: var(--mono); font-size: 12px; color: var(--gold-soft);
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
}

/* ---------- albums ---------- */
/* ---------- albums (grille groupée par type) ---------- */
.album-group { margin-bottom: 40px; }
.group-head { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.group-label { font-family: var(--display); font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.wave { flex: 1; height: 8px; color: var(--gold); opacity: .5; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 18px; }
/* isolation : chaque carte = contexte d'empilement → le z-index du badge « Coming soon » ne fuit plus
   au niveau de la grille, et la carte survolée (z-index 5) passe au-dessus avec sa bulle trivia */
.album-card { position: relative; isolation: isolate; display: flex; flex-direction: column; transition: transform .15s; }
/* survol réel (desktop) seulement : le transform créerait sinon un bloc conteneur cassant le popover
   fixe de la bulle sur tactile (hover « collant ») ; le z-index:5 fait passer la carte+bulle au-dessus du badge */
@media (hover: hover) { .album-card:hover { transform: translateY(-3px); z-index: 5; } }
/* bulle trivia — DESKTOP UNIQUEMENT (survol/focus). Sur mobile : bouton ℹ + modale (cf. plus bas). */
.album-bubble { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 230px; max-width: 80vw; z-index: 6; display: none; pointer-events: none; text-align: left; background: var(--ink-2); border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: 9px 12px; box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.album-bubble::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--ink-2); border-left: 1px solid var(--gold-soft); border-top: 1px solid var(--gold-soft); }
@media (hover: hover) { .album-card:hover .album-bubble, .album-card:focus-visible .album-bubble { display: block; } }
.album-bubble-t { display: block; font-family: var(--display); font-size: 14px; color: var(--paper); margin-bottom: 3px; }
.album-bubble-tr { display: block; font-size: 12.5px; color: var(--paper-dim); line-height: 1.45; }
/* pied de carte : méta (année + titre) à gauche, bouton ℹ trivia à droite (affiché en mobile, cf. media query) */
.album-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 9px; }
.album-meta { display: flex; flex-direction: column; min-width: 0; }
.trivia-btn { display: none; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-soft); background: transparent; color: var(--gold-soft); font-size: 14px; font-style: normal; line-height: 1; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.trivia-btn:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
/* album « à venir » (teaser) : bandeau sur la pochette + carte non cliquable */
.coming-soon { cursor: default; }
.coming-soon:hover { transform: none; }
.coming-soon .album-cover, .coming-soon .snake-cov img { opacity: .82; }
.soon-badge { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--badge-bg); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; text-align: center; padding: 4px 2px; }
.snake-cov { position: relative; }
.soon-badge-sm { font-size: 8px; letter-spacing: 0; padding: 2px 1px; }
.cover-frame { position: relative; display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--ink-3); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.album-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card:hover .cover-frame { border-color: var(--border-strong); }
.album-year { font-family: var(--mono); font-size: 12px; color: var(--gold); }
.album-title { font-size: 12.5px; color: var(--paper-dim); line-height: 1.3; }
.album-card:hover .album-title { color: var(--paper); }

/* ---------- detail (album/song) ---------- */
.detail-head { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 26px; }
.detail-cover { width: 200px; height: 200px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.detail-sub { color: var(--paper-dim); margin: 6px 0 18px; }
.album-sub { color: var(--gold); font-size: 18px; }
.detail-rec { color: var(--paper-dim); font-size: 13px; margin: -12px 0 18px; }
.play-album, .play-song { background: var(--gold); color: var(--ink); border: none; border-radius: 999px; padding: 8px 22px; font-weight: 500; font-size: 14px; cursor: pointer; margin-bottom: 18px; transition: filter .15s; }
.play-album:hover, .play-song:hover { filter: brightness(1.08); }
.tabs, .subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs button, .subnav a {
  background: transparent; color: var(--paper-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 16px; font-size: 13px;
}
.tabs button.on, .subnav a.on { color: var(--ink); background: var(--gold); border-color: var(--gold); font-weight: 500; }
/* Management : détaché des 3 onglets de création (poussé à droite + séparateur + accent doré) */
.subnav a.subnav-manage { margin-left: auto; color: var(--gold); border-color: var(--gold-soft); font-weight: 500; position: relative; }
.subnav a.subnav-manage.on { color: var(--ink); }
.subnav a.subnav-manage::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background: var(--border-strong); }
.subnav a.subnav-manage.on::before { display: none; }

/* ---------- tracklist ---------- */
.tracklist { display: flex; flex-direction: column; }
.track-row {
  display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 14px;
  padding: 11px 4px; border-bottom: 1px solid var(--border);
}
.track-no { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); }
.track-main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.track-embed { grid-column: 1 / -1; }
.track-name { font-size: 15px; }
.track-name:hover { color: var(--gold-soft); }
.track-main .ver-tag { font-size: 11px; color: var(--paper-dim); padding: 1px 6px; }
.track-dur { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); }
.mini {
  background: transparent; color: var(--paper-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; white-space: nowrap;
}
.mini:hover { color: var(--paper); border-color: var(--border-strong); }
.mini.on { color: var(--gold); border-color: var(--gold); }

/* ---------- info grids ---------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 28px; }
.info-grid > div { display: flex; flex-direction: column; gap: 3px; }
.info-grid .wide { grid-column: 1 / -1; }
.k { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.info-grid a:hover { color: var(--gold-soft); }
/* sous-section « Original Version » */
.orig-version { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.orig-title { font-family: var(--display); font-size: 16px; color: var(--gold); margin: 0 0 16px; }
.orig-album { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); }
.orig-album img { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); background: var(--ink-3); }
.orig-album:hover span { color: var(--gold-soft); }

/* ---------- search / songs ---------- */
.search-input, .pl-name {
  width: 100%; max-width: 480px; background: var(--ink-2); color: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
  font-size: 15px; margin-bottom: 14px;
}
.search-input:focus, .pl-name:focus { outline: none; border-color: var(--gold); }
.song-list { display: flex; flex-direction: column; }
.song-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 13px 4px; border-bottom: 1px solid var(--border);
}
.song-row:hover .song-title { color: var(--gold-soft); }
.song-title { font-size: 16px; }
.song-tags, .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12px; color: var(--paper-dim); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.tag-link:hover { color: var(--gold); border-color: var(--gold); }
.song-bpm { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); }

/* ---------- line-up ---------- */
.lineup { display: flex; flex-direction: column; gap: 16px; }
.performer { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.performer-name { font-family: var(--display); font-size: 17px; }
.addperf { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; max-width: 660px; }
.addperf-text { margin: 0; color: var(--paper-dim); line-height: 1.6; white-space: pre-line; font-size: 14px; }
/* faces SVG : taille identique garantie quelle que soit la fonte (les glyphes ☺/☹ diffèrent) */
.mood-ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }

/* ---------- sound (barres) ---------- */
.sound-block { margin-bottom: 26px; }
.sound-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sound-ver { font-family: var(--display); font-size: 16px; color: var(--gold); }
.bar-row { display: grid; grid-template-columns: 130px 1fr 40px; gap: 14px; align-items: center; margin-bottom: 8px; }
.bar-label { font-size: 13px; color: var(--paper-dim); }
.bar { height: 8px; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--gold); }
.bar-val { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); text-align: right; }

/* ---------- embeds ---------- */
.embed-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); max-width: 660px; }
.embed-sm { margin-top: 12px; }

/* ---------- lyrics ---------- */
.lyrics { max-width: 620px; white-space: pre-wrap; color: var(--paper-dim); }


/* frise « serpent » (Advanced) : pochettes en boustrophédon + ligne sinueuse */
.snake { position: relative; margin: 4px 0 18px; }
.snake-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.snake-path { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.snake-grid { position: relative; z-index: 1; display: grid; gap: 28px 20px; }
/* sous-marin qui parcourt le fil doré : devant les pochettes (z-index 2) mais n'intercepte aucun clic */
.snake-sub { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; transform: translate(-50%, -50%); will-change: left, top; }
.snake-sub-img { display: block; width: 46px; height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); animation: snakeSubBob 2.6s ease-in-out infinite; }
@keyframes snakeSubBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.snake-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.snake-cov { position: relative; width: 100%; aspect-ratio: 1; }
.snake-cov img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--ink-3); display: block; transition: border-color .15s, transform .15s; }
.snake-tile:hover .snake-cov img, .snake-tile:focus-visible .snake-cov img { border-color: var(--gold); transform: translateY(-3px); }
.snake-year { position: absolute; bottom: 5px; left: 5px; font-family: var(--mono); font-size: 11px; color: var(--paper); background: rgba(0,0,0,.6); padding: 1px 6px; border-radius: 999px; }
/* thème clair : la pastille d'année (sur pochette) garde un fond noir + texte blanc (sinon texte sombre illisible) */
:root[data-theme="light"] .snake-year { background: rgba(0,0,0,.8); color: #fff; }
.snake-bubble { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 210px; max-width: 72vw; z-index: 6; display: none; pointer-events: none; text-align: left; background: var(--ink-2); border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: 9px 12px; box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.snake-bubble::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--ink-2); border-left: 1px solid var(--gold-soft); border-top: 1px solid var(--gold-soft); }
/* bulle frise = DESKTOP UNIQUEMENT (sur tactile, le « hover collant » d'un appui l'affichait en fantôme) */
@media (hover: hover) { .snake-tile:hover .snake-bubble, .snake-tile:focus-visible .snake-bubble { display: block; } }
.snake-bubble-t { display: block; font-family: var(--display); font-size: 14px; color: var(--paper); margin-bottom: 3px; }
.snake-bubble-tr { display: block; font-size: 12.5px; color: var(--paper-dim); line-height: 1.45; }
.snake-hint { color: var(--paper-dim); font-size: 14px; margin: 0 0 14px; }

.sliders { margin-bottom: 26px; }
.dual-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
/* Acoustic « VU-mètres » (thème Yellow Submarine) : grille de cadrans cerclés d'or + slider simple 0–5 */
.vu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 22px 14px; margin-bottom: 18px; }
.vu-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.vu-img { width: 112px; height: 112px; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--gold);
  background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .4); transition: filter .2s, border-color .2s; }
.vu-cell input[type=range] { width: 100%; accent-color: var(--gold); }
.vu-label { font-size: 13px; color: var(--paper); }
.vu-val { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); }
.vu-cell.vu-off .vu-img { filter: grayscale(1) opacity(.5); border-color: var(--border); }
.vu-cell.vu-off .vu-val { opacity: .6; }
.aco-more { display: flex; justify-content: center; margin: 18px 0 26px; }
.slider-row { display: grid; grid-template-columns: 110px 1fr 1fr 70px; gap: 12px; align-items: center; }
.slider-row label { font-size: 13px; color: var(--paper-dim); }
.slider-row input[type=range] { accent-color: var(--gold); }
.range-val { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); text-align: right; }
.ghost { background: transparent; color: var(--paper-dim); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; font-size: 13px; align-self: flex-start; }
.ghost:hover { color: var(--paper); }

/* ---------- instruments ---------- */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.cat-tabs button { background: transparent; color: var(--paper-dim); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.cat-tabs button.on { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.cat-btn-img { display: none; }   /* icône de catégorie : rendue en Yellow Submarine uniquement */

/* Yellow Submarine : chaque bouton de catégorie devient une carte icône (sticker blanc) + libellé (vitrine pop-art) */
:root[data-theme="submarine"] .cat-tabs { gap: 10px; }
:root[data-theme="submarine"] .cat-tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  width: 100px; padding: 10px 6px; border-radius: 16px;
  background: var(--ink-2); font-size: 12px; line-height: 1.2; text-align: center;
}
/* Mobile : centrer l'ensemble des cartes à l'écran (au lieu d'un alignement à gauche) */
@media (max-width: 720px) { :root[data-theme="submarine"] .cat-tabs { justify-content: center; } }
:root[data-theme="submarine"] .cat-tabs button .cat-btn-img {
  display: block; width: 58px; height: 58px; object-fit: contain;
  background: #fff; border-radius: 12px; padding: 5px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
:root[data-theme="submarine"] .cat-tabs button.on { background: var(--gold); }
:root[data-theme="submarine"] .cat-tabs button.on .cat-btn-img {
  animation: catHeroPop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes catHeroPop {
  0%   { transform: scale(.72) rotate(-7deg); }
  60%  { transform: scale(1.08) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .cat-btn-img { animation: none !important; } }
.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.inst-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; background: var(--ink-2); color: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.inst-card.on { border-color: var(--gold); }
.inst-img { width: 48px; height: 48px; object-fit: contain; opacity: .8; }
.inst-name { font-size: 14px; }
.inst-nomodel { font-size: 11px; font-style: italic; color: var(--paper-dim); opacity: .75; margin-top: -2px; }
.inst-players { font-size: 12px; color: var(--paper-dim); }
/* Instruments : panneau de sélection collé en haut (tous écrans), au-dessus de la grille via flex+order.
   Reste visible pendant qu'on fait défiler une longue catégorie ; bordure épaisse pour bien le distinguer. */
.inst-search { display: flex; flex-direction: column; }
.inst-search > .cat-tabs      { order: 0; }
.inst-search > .inst-selected { order: 1; }
.inst-search > .inst-grid     { order: 2; }
.inst-search > .song-list     { order: 3; }
/* sélection d'instruments : liste (chaque entrée avec « retirer ») + bascule de mode + résultats */
.inst-selected {
  background: var(--ink-2); border: 2px solid var(--border-strong); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px;
  position: sticky; top: 64px; z-index: 10; box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}
.inst-sel-list { max-height: 38vh; overflow-y: auto; }
.inst-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.inst-result-count { font-size: 14px; color: var(--paper); margin-right: auto; }   /* compteur à gauche, actions à droite (cohérent avec .search-sum) */
.inst-sel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.inst-sel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inst-sel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.inst-sel-row:last-child { border-bottom: none; }
.inst-sel-name { font-size: 14px; }
.inst-match { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.inst-match-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.seg button { background: transparent; color: var(--paper-dim); border: none; padding: 6px 14px; font-size: 12.5px; cursor: pointer; transition: background .15s, color .15s; }
.seg button:not(.on):hover { color: var(--paper); }
.seg button.on { background: var(--gold); color: var(--ink); font-weight: 500; }
/* Advanced : bascule ET/OU multi-mots (réutilise .seg / .inst-match-label, sans le liseré du panneau) */
.adv-match { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }

/* ---------- formulaire Advanced (champs structurés) ---------- */
.adv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 8px 0 18px; }
.adv-field { display: flex; flex-direction: column; gap: 5px; }
.adv-field-wide { grid-column: 1 / -1; }
.adv-flabel { font-size: 12.5px; color: var(--paper-dim); }
.adv-control { display: flex; align-items: center; gap: 6px; }
.adv-control select, .adv-control input { flex: 1; min-width: 0; }
.adv-clear { background: transparent; border: none; color: var(--paper-dim); font-size: 14px; cursor: pointer; padding: 4px 6px; line-height: 1; }
.adv-clear:hover { color: var(--gold); }
/* contrôles natifs sombres (cohérents avec les tris .sort-ctrl/.pl-controls) */
.adv-control select, .adv-control input {
  background: var(--ink-2); color: var(--paper); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.adv-control select:focus, .adv-control input:focus { outline: none; border-color: var(--gold); }
.adv-constraints { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 4px 0 16px; }
.adv-con-label { font-size: 12.5px; color: var(--paper-dim); }
.adv-con-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.adv-con-list label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--paper); cursor: pointer; }
.adv-con-list input { accent-color: var(--gold); }
.adv-con-list label.con-off { opacity: .38; cursor: not-allowed; }
.adv-con-list label.con-off input { cursor: not-allowed; }
.adv-actions { margin: 0 0 16px; }

/* ---------- playlist ---------- */
.pl-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.pl-controls select { background: var(--ink-2); color: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.primary { background: var(--gold); color: var(--ink); border: none; border-radius: 999px; padding: 8px 20px; font-weight: 500; }
.primary:disabled { opacity: .4; cursor: default; }
/* bouton d'action en contour (actions secondaires : Ajouter, Enregistrer…) — Play reste en .primary plein */
.outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 20px; font-weight: 500; }
.outline:hover { background: var(--accent-tint); }
.outline:disabled { opacity: .4; cursor: default; }
.empty { color: var(--paper-dim); padding: 20px 0; }
.sub-title { font-family: var(--display); font-size: 22px; margin: 40px 0 14px; }
.saved-list { display: flex; flex-direction: column; }
.saved-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border); }

/* ---------- Playlists : Selector (périscopes Low/Mid/High) ---------- */
.peri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 4px; margin: 4px 0 22px; }
.peri { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; }
.peri-control { display: flex; align-items: flex-end; gap: 8px; }
/* les 3 périscopes côte à côte, BIEN DROITS, pieds adjacents au bas (se touchent sans se superposer).
   Échelle uniforme ×0,6 (Low 73×100→44×60, Mid 77×150→46×90, High 67×200→40×120). Pied : Low/Mid à droite
   de leur image (tête à gauche), High à gauche (tête à droite) → les left ci-dessous accolent les pieds.
   Le coloris seul change à la sélection → aucun saut de proportions. */
.peri-bouquet { position: relative; width: 94px; height: 122px; flex: none; }
/* cliquables : un clic sur un périscope = clic sur le libellé Low/Mid/High correspondant */
.peri-img { position: absolute; bottom: 0; width: auto; cursor: pointer; user-select: none; -webkit-user-drag: none; }
.peri-low  { height: 60px;  left: 2px;  z-index: 3; }
.peri-mid  { height: 90px;  left: 13px; z-index: 2; }
.peri-high { height: 120px; left: 46px; z-index: 1; }
.peri-img.on { z-index: 4; }   /* le niveau sélectionné (coloris jaune) passe au premier plan */
/* libellés Low/Mid/High en colonne à droite (High en haut), cibles de clic */
.peri-levels { display: flex; flex-direction: column; justify-content: space-between; height: 116px; gap: 2px; }
.peri-lv { background: transparent; border: none; cursor: pointer; font-family: var(--mono); font-size: 11px;
  letter-spacing: .5px; color: var(--paper-dim); padding: 3px 6px; border-radius: 6px; text-align: left;
  transition: color .15s, background .15s; }
.peri-lv:hover { color: var(--paper); }
.peri-lv.on { color: var(--ink); background: var(--gold); font-weight: 600; }
.peri-name { font-family: var(--display); font-size: 14px; color: var(--gold); text-align: center; }
/* barre de sélection (compteur + actions) */
/* résumé de sélection / résultats : barre simple en DESKTOP, panneau FLOTTANT collé en MOBILE (cf. @media ≤720px).
   Classe partagée par le Selector (.sel-bar), Search Advanced & Acoustic (.search-sum). */
.sel-bar, .search-sum { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.sel-bar .count, .search-sum .count { margin-right: auto; }   /* compteur à gauche, actions à droite */
.sel-bar .count strong, .search-sum .count strong { color: var(--gold); font-size: 15px; }
.sel-jump { display: none; }   /* bouton « voir les résultats » : mobile uniquement (cf. @media 720px) */
/* rangée du bouton « Vider la liste », entre la grille de périscopes et la liste de résultats */
.sel-clear-row { display: flex; justify-content: center; margin: 4px 0 14px; }
/* Management : ligne total + bouton « Vider la playlist » (retire tous les titres) */
.pl-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 6px; }
.pl-total-row .count { margin: 0; }

/* ---------- Playlists : Moods (cartes d'ambiance) ---------- */
/* grille de cartes ; .lg = grandes (mises en avant), .sm = petites. Single-select : .on = active (doré). */
/* 10 cartes (5 grandes + 5 petites) → 5 colonnes en desktop : 1 rangée de grandes, 1 rangée de petites
   (mobile : 2 colonnes, cf. @media ≤720px). */
/* 10 cartes Moods UNIFORMES (taille + texte) : grille 5×2, lignes de hauteur égale */
.mood-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 12px; margin: 4px 0 22px; align-items: stretch; }
.mood-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 124px; padding: 18px 12px; background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); color: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.mood-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.mood-card.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 22px rgba(0,0,0,.45); }
/* icône PNG monochrome de la carte, TEINTÉE via masque (s'adapte à l'accent du thème).
   mask-image posé en inline (par carte) ; couleur = background-color (paper-dim au repos, accent si actif). */
.mood-img {
  width: 56px; height: 56px; background-color: var(--paper-dim);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color .15s;
}
.mood-card:hover .mood-img { background-color: var(--paper); }
.mood-card.on .mood-img { background-color: var(--gold); }
.mood-name { font-family: var(--display); font-size: 15px; line-height: 1.15; }
/* Thème submarine : artwork couleur dédié (icons/yellowsubmarine/) plutôt que le masque monochrome —
   agrandi au maximum dans la carte (plus de teinte au survol/actif : c'est déjà en couleur). */
:root[data-theme="submarine"] .mood-card { min-height: 168px; padding: 14px 10px; gap: 6px; }
:root[data-theme="submarine"] .mood-img.mood-img-sub {
  width: 100px; height: 100px; -webkit-mask-image: none; mask-image: none;
  background-color: transparent !important;
}
/* .mood-ico ne sert PLUS qu'aux faces ☺/☹ d'humeur de Song Details (cartes Moods = .mood-img) */
.mood-ico { width: 26px; height: 26px; color: var(--paper-dim); transition: color .15s; }

/* ---------- Playlists : Curated (recettes éditoriales) ---------- */
.cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 4px 0 22px; }
.cur-card { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 16px 18px;
  background: var(--ink-2); color: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.cur-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cur-card.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 22px rgba(0,0,0,.45); }
.cur-name { font-family: var(--display); font-size: 18px; color: var(--gold); }
.cur-desc { font-size: 13px; color: var(--paper); }
.cur-count { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); margin-top: 2px; }
.cur-count strong { color: var(--paper); }

/* ---------- Playlists : Play / Modify (tri & filtres de la playlist courante) ---------- */
.pm-title { font-family: var(--display); font-size: 18px; color: var(--gold); margin: 6px 0 14px; }
.sort-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sort-special { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sort-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); color: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; cursor: pointer;
  font-size: 14px; text-align: left; transition: border-color .15s, background .15s; }
.sort-btn:hover { border-color: var(--border-strong); }
.sort-btn.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.sort-btn.big { padding: 20px 18px; font-family: var(--display); font-size: 16px; }
.sort-arr { font-family: var(--mono); color: var(--gold); min-width: 12px; text-align: right; }
.pm-filters { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 20px; }
.pm-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--paper); cursor: pointer; }
.pm-toggle input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
/* bibliothèque « Saved playlists » repliable, en haut de Management */
.saved-head { margin: 4px 0 12px; }
.saved-toggle { display: inline-flex; align-items: baseline; gap: 8px; background: transparent; border: none; cursor: pointer;
  font-family: var(--display); font-size: 18px; color: var(--gold); padding: 0; }
.saved-toggle .caret { font-size: 17px; color: var(--gold); line-height: 1; transform: translateY(1px); }
.saved-toggle .count { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); }
.saved-list { margin-bottom: 26px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 22px 28px; color: var(--paper-dim); font-family: var(--mono); font-size: 12px; text-align: center; }
/* barre lecteur unique (fixe en bas, persiste à la navigation) */
.player-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; background: var(--ink-2); border-top: 1px solid var(--border); box-shadow: var(--player-shadow); }
.player-embed { flex: 1; min-width: 0; max-width: 680px; }
/* l'API Spotify remplace .player-embed par un <iframe> nu → on plafonne l'iframe directement (desktop
   centré à 680px). Sans effet sur mobile (iframe empilé ~351px < 680px).
   Fond sombre + coins arrondis : depuis `color-scheme:dark` sur :root (barres système), l'embed Spotify
   affichait un canevas blanc (flash au chargement + coins blancs). On masque ça visuellement : `background`
   sombre couvre le flash, `border-radius` clippe les coins (≈ rayon de la carte Spotify, ajustable). */
.player-bar > iframe { max-width: 680px; background-color: var(--ink-2); border-radius: 12px; }
.player-close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--paper-dim); font-size: 16px; cursor: pointer; }
.player-close:hover { color: var(--gold); border-color: var(--gold); }
.player-nav { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--paper); font-size: 24px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.player-nav:hover { color: var(--gold); border-color: var(--gold); background: var(--ink-3); }
/* « Ouvrir dans Spotify » (écoute intégrale) — réutilise .spotify-btn mais sans son margin-left:auto */
.player-spotify { flex: none; margin-left: 0; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
body.playing { padding-bottom: 104px; }

/* ---------- additions UI (songs meta, nav, timeline, audio) ---------- */
.list-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
/* The Songs : boutons Play/Add groupés à droite de la toolbar (wrap dessous en mobile) */
.toolbar-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sort-ctrl { font-size: 13px; color: var(--paper-dim); display: flex; align-items: center; gap: 8px; }
.sort-ctrl select { background: var(--ink-2); color: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 13px; }
/* Essential : coche « inclure discours & interviews » (The Songs) */
.songs-speech { font-size: 13px; color: var(--paper-dim); display: flex; align-items: center; gap: 7px; cursor: pointer; }
.song-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* playlist Management : numéro d'ordre + titre sur UNE ligne (« 1. I'll Get You ») */
.ord-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* Play/Modify : méta tonale sous le titre (BPM · Key · Mode) */
.song-sub { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: .3px; }
.song-meta { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.song-meta .sep { opacity: .45; }
.song-meta .meta-track { color: var(--gold); }

.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.detail-top .back { margin-bottom: 0; }
.song-nav { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); }
.nav-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 999px; color: var(--paper-dim); font-size: 18px; line-height: 1; }
.nav-arrow:hover { color: var(--gold); border-color: var(--gold); }
.nav-arrow.disabled { opacity: .3; pointer-events: none; }
.nav-pos { font-size: 13px; color: var(--paper-dim); min-width: 64px; text-align: center; }

.adv-songs { margin-top: 34px; }

/* chips d'en-tête + blocs narratifs (fiche chanson) */
.head-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.prose-blocks { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; max-width: 660px; }
.prose-blocks > div { display: flex; flex-direction: column; gap: 5px; }
.prose-blocks p { margin: 0; color: var(--paper-dim); line-height: 1.6; white-space: pre-wrap; }

.track-row-audio { grid-template-columns: 1fr auto auto; align-items: center; }   /* titre · durée · actions */
.ta-title { display: flex; align-items: baseline; gap: 8px; }
.ord { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); min-width: 22px; text-align: right; }
.row-actions { display: flex; align-items: center; gap: 8px; }
/* iOS/Safari : forcer la présentation TEXTE des glyphes d'icônes (renfort du VS15 posé dans le markup) →
   sinon rendu en emoji couleur du système (▶ ⏸ ⏮ ⏭ ℹ ♪). Sans effet sur les autres navigateurs. */
.play-btn, .player-nav, .trivia-btn, .snd-toggle, .play-album, .topbar-help, .mini { font-variant-emoji: text; }
.play-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--paper-dim); font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.play-btn:hover { color: var(--gold); border-color: var(--gold); }
.play-btn.on { color: var(--ink); background: var(--gold); border-color: var(--gold); }
/* boutons de réordonnancement ↑/↓ (Management) */
.move-btn { font-size: 14px; line-height: 1; }
.move-btn:disabled { opacity: .28; cursor: default; }
.move-btn:disabled:hover { color: var(--paper-dim); border-color: var(--border); }
.achip-link { cursor: pointer; text-decoration: none; transition: border-color .15s; }
.achip-link:hover { border-color: var(--gold); }
.achip-link:hover .achip-v { color: var(--gold); }
.chip-filter { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; font-size: 13px; color: var(--paper-dim); }
.chip-filter-tag { font-family: var(--mono); color: var(--gold); border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; }
.chip-clear { background: transparent; border: none; color: var(--paper-dim); font-size: 14px; cursor: pointer; }
.chip-clear:hover { color: var(--paper); }
.ta-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Sound Info : lignes à valeur brute (bpm, loudness, popularity) */
.bar-row-raw { grid-template-columns: 130px 1fr; }
.bar-row-raw .bar-val { text-align: left; color: var(--paper); }
/* All versions : ligne d'infos de sortie */
.track-row-ver { grid-template-columns: 1fr auto auto; align-items: start; }
.ver-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--paper-dim); }
.ver-meta .vk { color: var(--gold); font-weight: 400; }
.ver-lead { color: var(--gold); font-size: 14px; }
/* version : actions empilées (play+playlist en haut, ♪ Sound Info dessous, alignés à droite) */
.ver-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
.ver-actions .ra-top { display: flex; align-items: center; gap: 8px; }
.snd-toggle.on { color: var(--gold); border-color: var(--gold); }
/* durée alignée verticalement sur le centre des boutons (ligne d'actions = 30px), malgré align-items:start */
.track-row-ver .track-dur { display: flex; align-items: center; min-height: 30px; }
/* panneau Sound Info dépliable, pleine largeur sous la ligne de version */
.ver-sound { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); max-width: 560px; }
.ver-tag { color: var(--paper); border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; }
.audio-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.achip { position: relative; display: inline-flex; gap: 5px; align-items: baseline; font-family: var(--mono); font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }
.achip-k { color: var(--gold); letter-spacing: .5px; }
.achip-v { color: var(--paper); }
/* roll-over desktop : nom complet du champ au survol d'une pastille (NRG → Energy…). Mobile : aide à venir. */
@media (hover: hover) {
  .achip[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; background: var(--ink-2); color: var(--paper); border: 1px solid var(--gold-soft);
    border-radius: 6px; padding: 3px 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .3px;
    z-index: 30; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  }
  /* tooltip explicatif (phrase) — bouton « Energy Boost » du tri Management */
  .sort-btn[data-tip] { position: relative; }
  .sort-btn[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 240px; white-space: normal; text-align: left; line-height: 1.35;
    background: var(--ink-2); color: var(--paper); border: 1px solid var(--gold-soft); border-radius: 6px;
    padding: 6px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .2px;
    z-index: 30; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  }
}

/* ---------- album awards (Charts) ---------- */
.award-imgs { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.award-img { height: 64px; width: auto; border-radius: 6px; background: var(--paper); padding: 4px; }

/* ---------- language toggle ---------- */
/* préférences topbar (mode de navigation + langue) : cluster poussé à droite, Spotify juste après */
.topbar-prefs { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.topbar-prefs ~ .spotify-btn { margin-left: 16px; }
/* choix de thème : pastilles bicolores (fond + accent de chaque thème) */
.theme-pick { display: inline-flex; align-items: center; gap: 7px; }
.theme-pick button {
  width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--border-strong); transition: transform .15s, box-shadow .15s;
}
.theme-pick button:hover { transform: scale(1.1); }
.theme-pick button.on { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); transform: scale(1.08); }
.theme-pick .sw-dark { background: linear-gradient(135deg, #14110d 50%, #c79a3e 50%); }
.theme-pick .sw-light { background: linear-gradient(135deg, #ffffff 50%, #800000 50%); }
.theme-pick .sw-sub { background: linear-gradient(135deg, #0a4f7a 50%, #FED403 50%); }
.lang-toggle { display: inline-flex; gap: 2px; }
.lang-toggle button { background: transparent; color: var(--paper-dim); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; font-size: 12px; font-family: var(--mono); transition: color .15s, background .15s; }
.lang-toggle button:hover { color: var(--paper); }
.lang-toggle button.on { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.lang-toggle + .spotify-btn { margin-left: 10px; }

/* ---------- modale (partition) ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 8, 6, .82); backdrop-filter: blur(4px); }
.modal-box { position: relative; max-width: min(900px, 94vw); max-height: 92vh; background: var(--paper); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); overflow: hidden; }
.modal-img { display: block; max-width: 100%; max-height: 92vh; object-fit: contain; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--close-bg); color: var(--paper); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--ink); }
/* modale trivia album (sombre, occupe la majorité de l'écran ; déclenchée par le bouton ℹ) */
.trivia-modal { position: relative; width: min(560px, 92vw); max-height: 82vh; overflow-y: auto; background: var(--ink-2); border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: 30px 24px 26px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
.trivia-modal .modal-close { border: 1px solid var(--border-strong); }
.trivia-modal-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.trivia-modal-t { font-family: var(--display); font-size: 24px; color: var(--gold-soft); margin: 0 0 14px; padding-right: 34px; line-height: 1.15; }
.trivia-modal-tr { font-size: 15px; color: var(--paper); line-height: 1.6; margin: 0; white-space: pre-line; }
/* modale « Légende acoustique » : liste code → nom + explication */
.legend-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.legend-row { display: flex; gap: 12px; align-items: baseline; }
.legend-code { flex: none; width: 42px; font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: .5px; }
.legend-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.legend-text b { font-size: 14px; font-weight: 500; color: var(--paper); }
.legend-desc { font-size: 12.5px; color: var(--paper-dim); line-height: 1.4; }

/* ---------- Easter egg : (Easter) Egg Timer ---------- */
.egg-modal { max-width: 520px; }
.egg-hint { font-size: 13px; color: var(--paper-dim); margin: 4px 0 16px; line-height: 1.5; }
.egg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.egg-card { background: var(--ink-3); border: 2px solid transparent; border-radius: 14px; padding: 14px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .15s, border-color .15s, background .15s; }
.egg-card:hover { border-color: var(--gold-soft); transform: translateY(-3px); }
.egg-card.active { border-color: var(--gold); background: var(--accent-tint); }
.egg-shape { width: 46px; height: 60px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset -7px -7px 13px rgba(0,0,0,.22), 0 4px 8px rgba(0,0,0,.3); }
.egg-time { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--paper); }
.egg-disp { font-family: var(--mono); font-size: 12px; color: var(--gold); height: 1.2em; }
.egg-reveal-btn { display: block; margin: 18px auto 2px; min-width: 56px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--gold-soft); background: transparent; color: var(--gold); font-family: var(--mono); font-size: 18px; letter-spacing: 3px; cursor: pointer; transition: background .15s, color .15s; }
.egg-reveal-btn:hover { background: var(--accent-tint); color: var(--paper); }
.egg-reveal-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.egg-reveal-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.egg-reveal-title { font-family: var(--display); font-size: 16px; color: var(--paper); }
.egg-reveal-empty { color: var(--paper-dim); font-size: 14px; }

/* ---------- écran d'accueil / gate (code d'accès + Spotify/extraits) ---------- */
.gate { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.gate-inner { width: 100%; max-width: 440px; text-align: center; }
.gate-title { font-family: var(--display); font-size: 32px; font-weight: 600; color: var(--gold-soft); margin: 0 0 6px; }
.gate-tagline { color: var(--paper-dim); font-size: 15px; margin: 0 0 22px; }
.gate-logo { display: block; width: 240px; max-width: 78%; height: auto; margin: 0 auto 26px; }
.gate-card { background: var(--ink-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; }
.gate-label { color: var(--paper-dim); font-size: 14px; margin: 0; line-height: 1.5; }
.gate-input { background: var(--ink-3); color: var(--paper); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; font-size: 16px; text-align: center; }
.gate-input:focus { outline: none; border-color: var(--gold); }
.gate-btn { background: var(--gold); color: var(--ink); border: none; border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 15px; cursor: pointer; transition: filter .15s; }
.gate-btn:hover { filter: brightness(1.08); }
.gate-spotify { background: #1db954; color: #fff; }
.gate-extracts { background: transparent; color: var(--paper-dim); border: none; font-size: 13.5px; cursor: pointer; padding: 4px; text-decoration: underline; }
.gate-extracts:hover { color: var(--paper); }
.gate-error { color: #e0907a; font-size: 13px; margin: 0; }
.gate-note { color: var(--paper-dim); font-size: 12.5px; margin: 24px 0 6px; }
.gate-copy { color: var(--paper-dim); opacity: .7; font-size: 12px; margin: 0; }

/* Landing : page d'accueil informative (overlay, après le code d'accès) */
.landing { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--ink); display: flex; align-items: flex-start; justify-content: center; padding: 32px 18px; }
.landing-card { width: 100%; max-width: 470px; background: var(--ink-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; position: relative; color: var(--paper); }
.landing-close { position: absolute; top: 10px; right: 14px; background: transparent; border: none; color: var(--paper-dim); font-size: 24px; line-height: 1; cursor: pointer; }
.landing-close:hover { color: var(--paper); }
/* switch EN/FR sur la Landing : aligné à gauche, dégagé du × (haut-droite) */
.landing-lang { margin-bottom: 14px; }
.landing-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--paper); margin-bottom: 16px; }
.landing-brand .brand-mark { color: var(--gold); font-size: 17px; }
.landing-title { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--gold-soft); margin: 0 0 8px; line-height: 1.2; }
.landing-lead { color: var(--paper-dim); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.landing-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lstat { background: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.lstat-n { font-family: var(--mono); font-size: 22px; color: var(--gold); line-height: 1.1; }
.lstat-l { font-size: 11.5px; color: var(--paper-dim); }
.landing-caption { color: var(--paper-dim); font-size: 12.5px; margin: 10px 0 0; text-align: center; }
.landing-sec { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 18px; }
.landing-h { font-size: 15px; font-weight: 600; color: var(--paper); margin: 0 0 8px; }
.landing-note { color: var(--paper-dim); font-size: 13px; line-height: 1.55; margin: 0 0 12px; }
.landing-path { display: flex; gap: 11px; align-items: flex-start; background: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; }
.landing-path-mark { color: var(--gold); font-size: 16px; flex: none; min-width: 18px; text-align: center; }
.landing-path-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.landing-path-txt b { font-weight: 600; color: var(--paper); }
.landing-path-txt span { color: var(--paper-dim); line-height: 1.5; }
.landing-connect, .landing-install { width: 100%; margin-top: 4px; }
.landing-tips { display: flex; flex-direction: column; gap: 11px; }
.landing-tip { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.landing-tip b { color: var(--paper); font-weight: 600; }
.landing-tip span { color: var(--paper-dim); line-height: 1.5; }
.landing-cta { width: 100%; margin-top: 22px; font-size: 15px; }
.landing-hide { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12.5px; color: var(--paper-dim); cursor: pointer; }
.landing-hide input { width: 15px; height: 15px; accent-color: var(--gold); }
.landing-logout { display: block; margin: 14px auto 0; background: transparent; border: none; color: var(--paper-dim); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.landing-logout:hover { color: var(--paper); }
.landing .gate-copy { margin-top: 16px; text-align: center; }
@media (max-width: 430px) { .landing-stats { grid-template-columns: repeat(2, 1fr); } }
/* bouton ℹ (topbar) : rouvre la Landing — pastille dorée avec un « i » (texte, pas d'emoji iOS, cf. piège #9) */
.topbar-info { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; font-variant-emoji: text; }
.topbar-info::before { content: "i"; font-family: Georgia, serif; font-style: italic; font-size: 14px; font-weight: 600; }
.topbar-info:hover { background: var(--gold); color: var(--ink); }

/* ---------- responsive (smartphone, ultérieur) ---------- */
/* ---------- topbar : collapse en menu burger dès ≤1000px ----------
   (la barre pleine — marque + nav + mode + thème + langue + Spotify — déborde en dessous ; on bascule
   tôt en burger, indépendamment des règles de contenu qui restent à ≤720px) */
@media (max-width: 1000px) {
  .topbar { gap: 14px; padding: 12px 16px; }
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 42px; height: 38px; padding: 9px 8px;
    background: transparent; border: 1px solid var(--border-strong); border-radius: 10px;
  }
  .burger span { display: block; height: 2px; background: var(--paper); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .topbar.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.menu-open .burger span:nth-child(2) { opacity: 0; }
  .topbar.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .topbar-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 16px; border-bottom: 1px solid var(--border);
    background: var(--topbar-bg-solid); backdrop-filter: blur(8px);
  }
  .topbar.menu-open .topbar-menu { display: flex; }
  .topbar-menu .nav { flex-direction: column; gap: 0; width: 100%; margin: 0; }
  /* items du menu : petite icône sous-marin (::before) + séparateurs plus épais */
  .topbar-menu .nav a {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; padding: 12px 0; border-bottom: 2px solid var(--border-strong);
  }
  .topbar-menu .nav a::before {
    content: ""; flex: none; width: 30px; height: 20px;
    background: url(../icons/submarine.png) center/contain no-repeat;
  }
  .topbar-menu .nav a.active { border-color: var(--gold); }
  .topbar-help { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: transparent; border: none; color: var(--gold-soft); font-size: 14px; padding: 4px 0; cursor: pointer; }
  /* pastille « i » dorée (lettre simple → pas d'emoji iOS ; fond = accent du thème, "i" en couleur de fond) */
  .topbar-help::before {
    content: "i"; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--gold); color: var(--ink);
    font-family: var(--display); font-style: italic; font-weight: 600; font-size: 12px; line-height: 1;
  }
  /* prefs : mode seul sur sa ligne, puis thème + langue sur la ligne suivante */
  .topbar-menu .topbar-prefs { width: 100%; margin: 0; flex-wrap: wrap; justify-content: space-between; gap: 14px 12px; }
  .topbar-menu .mode-seg { flex: 1 1 100%; }
  .topbar-menu .theme-pick { order: 2; }
  .topbar-menu .lang-toggle { order: 3; margin: 0; }
  .topbar-menu .spotify-btn { margin: 0; align-self: flex-start; }
}

@media (max-width: 720px) {
  /* pied de page : renvoi à la ligne après « Official Catalogue » */
  .footer .foot-sep { display: none; }
  .footer .foot-b { display: block; }
  /* Selector + Search Advanced/Acoustic : le formulaire pousse la liste hors écran → panneau flottant collé
     (mobile uniquement) avec compteur + bouton « voir les résultats ». Même offset que .inst-selected. */
  .sel-jump { display: inline-block; }
  .sel-bar, .search-sum {
    background: var(--ink-2); border: 2px solid var(--border-strong); border-radius: var(--radius);
    padding: 12px 16px; position: sticky; top: 62px; z-index: 10; box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
  }
  /* Moods : 2 colonnes en mobile (desktop = 5) */
  .mood-grid { grid-template-columns: repeat(2, 1fr); }
  /* Tri Management : Alphabetic + BPM sur une ligne ; Key/Mode/Release (.sort-sm) plus petits sur UNE ligne ;
     Energy Boost + Random sur une ligne. */
  .sort-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .sort-grid .sort-btn { flex: 1 1 46%; padding: 9px 11px; font-size: 13px; }
  .sort-grid .sort-sm { flex: 1 1 30%; padding: 8px 7px; font-size: 11px; gap: 4px; }
  .sort-special { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sort-special .sort-btn.big { padding: 13px 10px; font-size: 13px; }
  /* formulaire Advanced : une seule colonne ; les 3 Genre & Styles regroupés (via order) */
  .adv-form { grid-template-columns: 1fr; }
  .adv-form .adv-field { order: 1; }
  .adv-form .adv-field-title { order: 0; }
  .adv-form .adv-field-style { order: 2; }
  .adv-form .adv-field-lyrics { order: 3; }
  /* sous-marin de la frise : plus petit (pochettes plus serrées) */
  .snake-sub-img { width: 36px; }
  /* (topbar : collapse en burger déplacé dans @media ≤1000px ci-dessus — la barre a besoin de ~1050px
     une fois mode + thème + langue + Spotify présents, sinon elle débordait sur tablette portrait) */
  .main { padding: 24px 16px 60px; }
  /* trivia album : le survol n'existe pas au tactile → bouton ℹ visible sous la pochette, ouvre la modale */
  .trivia-btn { display: flex; }
  /* home : rythme vertical resserré (les marges desktop poussaient les piliers trop bas) */
  .hero { padding: 12px 0 8px; }
  .hero-logo { margin-bottom: 18px; }
  .eyebrow { margin-bottom: 12px; }
  .hero-title { font-size: 32px; margin-bottom: 14px; }
  .hero-lead { font-size: 16px; margin-bottom: 22px; }
  .doors { grid-template-columns: 1fr; }
  .door { padding: 18px; }
  /* song-row : titre/méta en pleine largeur, contrôles (durée + ▶ + playlist) sur une 2e ligne
     (en une seule ligne la méta était écrasée sur 5-6 lignes) */
  .song-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "main main" "dur actions";
    gap: 8px 12px;
  }
  .song-row .song-main { grid-area: main; }
  .song-row .track-dur { grid-area: dur; align-self: center; }
  .song-row .row-actions { grid-area: actions; justify-content: flex-end; }
  .detail-head { flex-direction: column; }
  .detail-cover { width: 140px; height: 140px; }
  .performer { grid-template-columns: 1fr; }
  /* Acoustic : label + valeur en haut, les deux curseurs (min/max) côte à côte en dessous
     (le simple 1fr empilait label/min/max/valeur sur 4 lignes = 116px par filtre) */
  .slider-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "label val" "min max";
    gap: 4px 12px;
  }
  .slider-row label { grid-area: label; }
  .slider-row .range-val { grid-area: val; }
  .slider-row input[type=range]:nth-of-type(1) { grid-area: min; }
  .slider-row input[type=range]:nth-of-type(2) { grid-area: max; }
  /* résultats Acoustic : titre + chips en pleine largeur, durée + ▶ + playlist en 2e ligne (chips écrasées sinon) */
  .track-row-audio {
    grid-template-columns: auto 1fr;
    grid-template-areas: "main main" "dur actions";
    gap: 8px;
  }
  .track-row-audio .ta-main { grid-area: main; }
  .track-row-audio .track-dur { grid-area: dur; align-self: center; }
  .track-row-audio .row-actions { grid-area: actions; justify-content: flex-end; }
  /* tracklist album : n° + titre en haut, durée + ▶ + playlist en 2e ligne (titre n'avait que ~117px) */
  .track-row:not(.track-row-ver):not(.track-row-audio) {
    grid-template-columns: auto 1fr;
    grid-template-areas: "no main" "dur actions";
    gap: 6px 12px;
  }
  .track-row:not(.track-row-ver):not(.track-row-audio) .track-no { grid-area: no; align-self: center; }
  .track-row:not(.track-row-ver):not(.track-row-audio) .track-main { grid-area: main; }
  .track-row:not(.track-row-ver):not(.track-row-audio) .track-dur { grid-area: dur; align-self: center; }
  .track-row:not(.track-row-ver):not(.track-row-audio) .row-actions { grid-area: actions; justify-content: flex-end; }
  /* lignes de versions : bloc infos pleine largeur (la méta était écrasée sur ~7 lignes → ligne de 327px),
     puis durée + actions, puis le panneau Sound Info déplié */
  .track-row-ver {
    grid-template-columns: auto 1fr;
    grid-template-areas: "main main" "dur actions" "sound sound";
    gap: 10px 12px; align-items: center;
  }
  .track-row-ver .ta-main { grid-area: main; }
  .track-row-ver .track-dur { grid-area: dur; }
  .track-row-ver .ver-actions { grid-area: actions; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
  .track-row-ver .ver-sound { grid-area: sound; margin-top: 0; }
  /* lecteur footer : l'API Spotify remplace .player-embed par un <iframe> dont le contenu a une largeur
     de rendu ~fixe (~280px) — le réduire clippe le bouton play à droite. Sur mobile on EMPILE : iframe en
     pleine largeur (play visible), puis ⏮ ⏭ × centrés en dessous (via flex-wrap + order). */
  /* padding bas = base 12px (évite que les nav frôlent le bord sur vieux modèles sans encoche)
     + safe-area-inset (barre/indicateur système sur modèles à encoche ; nécessite viewport-fit=cover) */
  .player-bar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
  .player-bar > iframe, .player-embed { order: 0; flex: 1 1 100%; min-width: 0; }
  .player-nav { order: 1; }
  .player-spotify { order: 1; }
  .player-close { order: 2; }
  body.playing { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
  /* Playlists enregistrées : nom pleine largeur, compte + actions (▶/load/delete) en 2e ligne
     (en une ligne le nom n'avait que ~83px et débordait sur plusieurs lignes) */
  .saved-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name name" "count actions";
    gap: 6px 12px;
  }
  .saved-row .saved-name { grid-area: name; }
  .saved-row .count { grid-area: count; align-self: center; }
  .saved-row .row-actions { grid-area: actions; justify-content: flex-end; }
  /* Instruments : le panneau sticky est en base (tous écrans) ; ici on aligne juste l'offset sur
     l'en-tête mobile (63px) — 1px de chevauchement plutôt qu'un écart. */
  .inst-selected { top: 62px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }