/* Atelier Vinyles — thèmes et styles de base */

:root {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Thème 1 : Scandinave (défaut) --- */
:root,
[data-theme="scandi"] {
  --bg: #FBF3E7;
  --card: #FFFFFF;
  --card-alt: #F3E7D6;
  --text: #4A3B2E;
  --text-secondary: #8A7863;
  --text-muted: #B3A18A;
  --border: #F1E8D9;
  --border-strong: #E7DCC9;
  --accent: #C6714B;
  --accent-contrast: #FFF8F0;
  --accent-soft-bg: #F3E4DA;
  --accent-soft-text: #C6714B;
  --accent2-soft-bg: #EAEEE0;
  --accent2-soft-text: #7C8F65;
  --warning-bg: #EFE0D0;
  --warning-text: #A9764C;
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème 3 : Club de jazz (nocturne) --- */
[data-theme="jazz"] {
  --bg: #1E1A16;
  --card: #2A2420;
  --card-alt: #22201B;
  --text: #F2E8D8;
  --text-secondary: #B8A98C;
  --text-muted: #8C7F63;
  --border: #3D352C;
  --border-strong: #3D352C;
  --accent: #D9A441;
  --accent-contrast: #1E1A16;
  --accent-soft-bg: #3A3226;
  --accent-soft-text: #D9A441;
  --accent2-soft-bg: #332C22;
  --accent2-soft-text: #C9B98F;
  --warning-bg: #3A3226;
  --warning-text: #D9A441;
  --font-display: Georgia, "Times New Roman", serif;
  --radius-card: 14px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --border-width: 1px;
}

/* --- Thème 4 : Groovy 70 --- */
[data-theme="groovy"] {
  --bg: #FBEAD2;
  --card: #FFF6E0;
  --card-alt: #F2DDAE;
  --text: #3A2B18;
  --text-secondary: #7A5C2E;
  --text-muted: #A9853F;
  --border: #E9D9AE;
  --border-strong: #3A2B18;
  --accent: #C1502E;
  --accent-contrast: #FBEAD2;
  --accent-soft-bg: #EFD9B0;
  --accent-soft-text: #C1502E;
  --accent2-soft-bg: #DCE2C4;
  --accent2-soft-text: #6B7B3A;
  --warning-bg: #F2DDAE;
  --warning-text: #C1502E;
  --font-display: system-ui, sans-serif;
  --radius-card: 24px;
  --radius-control: 99px;
  --radius-pill: 99px;
  --border-width: 2px;
}

/* --- Thème 6 : Été indien --- */
[data-theme="ete-indien"] {
  --bg: #FBEFE0;
  --card: #FFFFFF;
  --card-alt: #F6E1C8;
  --text: #4A2F1E;
  --text-secondary: #8C6A4A;
  --text-muted: #BFA286;
  --border: #F0DDBF;
  --border-strong: #E3C79E;
  --accent: #D97D3D;
  --accent-contrast: #FFF8EF;
  --accent-soft-bg: #F3DFC9;
  --accent-soft-text: #D97D3D;
  --accent2-soft-bg: #DCEAF0;
  --accent2-soft-text: #5B93A8;
  --warning-bg: #F3DFC9;
  --warning-text: #B5602A;
  --radius-card: 18px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème 7 : Noir & vinyle --- */
[data-theme="noir-vinyle"] {
  --bg: #121212;
  --card: #1B1B1B;
  --card-alt: #202020;
  --text: #F2F2F2;
  --text-secondary: #A8A8A8;
  --text-muted: #6E6E6E;
  --border: #2C2C2C;
  --border-strong: #333333;
  --accent: #E4292F;
  --accent-contrast: #FFFFFF;
  --accent-soft-bg: #2A1315;
  --accent-soft-text: #E4292F;
  --accent2-soft-bg: #1F1F1F;
  --accent2-soft-text: #CFCFCF;
  --warning-bg: #2A1313;
  --warning-text: #E4292F;
  --radius-card: 10px;
  --radius-control: 6px;
  --radius-pill: 999px;
  --border-width: 1px;
}

/* --- Thème 9 : Bibliothèque anglaise --- */
[data-theme="bibliotheque"] {
  --bg: #F3EFE6;
  --card: #FBF8F1;
  --card-alt: #E8E0CC;
  --text: #2B2320;
  --text-secondary: #6B5C4A;
  --text-muted: #9C8B72;
  --border: #DED2B8;
  --border-strong: #C9B98F;
  --accent: #2F4B3C;
  --accent-contrast: #F3EFE6;
  --accent-soft-bg: #DDE5D8;
  --accent-soft-text: #2F4B3C;
  --accent2-soft-bg: #EFE0BE;
  --accent2-soft-text: #8A6A2D;
  --warning-bg: #EFE0BE;
  --warning-text: #7A3B2A;
  --font-display: Georgia, "Times New Roman", serif;
  --radius-card: 8px;
  --radius-control: 4px;
  --radius-pill: 4px;
  --border-width: 1px;
}

/* --- Thème 12 : Terrazzo --- */
[data-theme="terrazzo"] {
  --bg: #F7F5F2;
  --card: #FFFFFF;
  --card-alt: #EDEAE3;
  --text: #2A2A2A;
  --text-secondary: #6D6D6D;
  --text-muted: #A3A3A3;
  --border: #E4E0D8;
  --border-strong: #D3CDC0;
  --accent: #E0574C;
  --accent-contrast: #FFFFFF;
  --accent-soft-bg: #FBE1DE;
  --accent-soft-text: #E0574C;
  --accent2-soft-bg: #DDEFE3;
  --accent2-soft-text: #3E9268;
  --warning-bg: #FFF3CE;
  --warning-text: #B5892A;
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --border-width: 1px;
}

/* --- Thème 15 : Mono --- */
[data-theme="mono"] {
  --bg: #F4F4F4;
  --card: #FFFFFF;
  --card-alt: #E7E7E7;
  --text: #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-muted: #8F8F8F;
  --border: #DEDEDE;
  --border-strong: #C7C7C7;
  --accent: #2D6CDF;
  --accent-contrast: #FFFFFF;
  --accent-soft-bg: #DCE6FA;
  --accent-soft-text: #2D6CDF;
  --accent2-soft-bg: #E7E7E7;
  --accent2-soft-text: #5C5C5C;
  --warning-bg: #E7E7E7;
  --warning-text: #2D6CDF;
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --border-width: 1px;
}

/* --- Thème : Tropique (coloré, coins très arrondis) --- */
[data-theme="tropique"] {
  --bg: #0B5D5B;
  --card: #12716D;
  --card-alt: #0E6663;
  --text: #F2FFFC;
  --text-secondary: #A9DCD6;
  --text-muted: #7FC2BB;
  --border: #16807B;
  --border-strong: #1D8580;
  --accent: #FFB703;
  --accent-contrast: #2A1A00;
  --accent-soft-bg: #1A5F50;
  --accent-soft-text: #FFC93C;
  --accent2-soft-bg: #1B6962;
  --accent2-soft-text: #FF8A78;
  --warning-bg: #5A4A12;
  --warning-text: #FFC93C;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème : Coucher de soleil (coloré, coins très arrondis) --- */
[data-theme="sunset"] {
  --bg: #2B1B3D;
  --card: #3C2754;
  --card-alt: #33214A;
  --text: #FFF1E6;
  --text-secondary: #CDB6D9;
  --text-muted: #A08AB0;
  --border: #46305F;
  --border-strong: #4E3569;
  --accent: #FF7A45;
  --accent-contrast: #2B1B3D;
  --accent-soft-bg: #5A2E48;
  --accent-soft-text: #FF9B70;
  --accent2-soft-bg: #4A3A3F;
  --accent2-soft-text: #FFC857;
  --warning-bg: #5A3A35;
  --warning-text: #FFC857;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème : Pop Art (coloré, coins très arrondis) --- */
[data-theme="pop-art"] {
  --bg: #FFD23F;
  --card: #FFFFFF;
  --card-alt: #FFE68A;
  --text: #1B1B3A;
  --text-secondary: #4A4460;
  --text-muted: #6E6884;
  --border: #F2C22E;
  --border-strong: #1B1B3A;
  --accent: #EE4266;
  --accent-contrast: #FFFFFF;
  --accent-soft-bg: #FDE0E7;
  --accent-soft-text: #D12A50;
  --accent2-soft-bg: #D6F5EE;
  --accent2-soft-text: #1E8C73;
  --warning-bg: #FFE3EA;
  --warning-text: #C9254B;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème : Bleu Klein (coloré, coins très arrondis) --- */
[data-theme="klein"] {
  --bg: #EEF1FF;
  --card: #FFFFFF;
  --card-alt: #DDE3FF;
  --text: #0E1540;
  --text-secondary: #4B5585;
  --text-muted: #7A83AE;
  --border: #DCE1FB;
  --border-strong: #C7CFFA;
  --accent: #1D34D8;
  --accent-contrast: #FFFFFF;
  --accent-soft-bg: #DDE3FF;
  --accent-soft-text: #1D34D8;
  --accent2-soft-bg: #FFE1E2;
  --accent2-soft-text: #D63A40;
  --warning-bg: #FFE1E2;
  --warning-text: #D63A40;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème : Cerise (coloré, coins très arrondis) --- */
[data-theme="cerise"] {
  --bg: #6E0D2E;
  --card: #871A3E;
  --card-alt: #7A1335;
  --text: #FFF0F3;
  --text-secondary: #F3B8C6;
  --text-muted: #D48A9E;
  --border: #952548;
  --border-strong: #A02A52;
  --accent: #FFB347;
  --accent-contrast: #4A0A20;
  --accent-soft-bg: #7C3A2E;
  --accent-soft-text: #FFC06A;
  --accent2-soft-bg: #8E2E4E;
  --accent2-soft-text: #FFA3B5;
  --warning-bg: #7C3A2E;
  --warning-text: #FFC06A;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème : Jungle (coloré, coins très arrondis) --- */
[data-theme="jungle"] {
  --bg: #1E3D2F;
  --card: #28503D;
  --card-alt: #234636;
  --text: #F1F7ED;
  --text-secondary: #B5CDB9;
  --text-muted: #8DAE95;
  --border: #2F5B46;
  --border-strong: #35634D;
  --accent: #F4A259;
  --accent-contrast: #1E3D2F;
  --accent-soft-bg: #4A4A30;
  --accent-soft-text: #F6B070;
  --accent2-soft-bg: #3D5A3A;
  --accent2-soft-text: #E9C46A;
  --warning-bg: #4A4A30;
  --warning-text: #E9C46A;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème : Agrumes (coloré, coins très arrondis) --- */
[data-theme="agrumes"] {
  --bg: #FF8C42;
  --card: #FFF3E6;
  --card-alt: #FFE1C7;
  --text: #2E294E;
  --text-secondary: #3F2F55;
  --text-muted: #6E5A7E;
  --border: #F5A36A;
  --border-strong: #E07A30;
  --accent: #2E294E;
  --accent-contrast: #FFF3E6;
  --accent-soft-bg: #E9E3F3;
  --accent-soft-text: #2E294E;
  --accent2-soft-bg: #FBDDE0;
  --accent2-soft-text: #B81F33;
  --warning-bg: #FBDDE0;
  --warning-text: #B81F33;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

/* --- Thème : Lagon (coloré, coins très arrondis) --- */
[data-theme="lagon"] {
  --bg: #00A6C0;
  --card: #FFFFFF;
  --card-alt: #E0F7FA;
  --text: #08323A;
  --text-secondary: #0B3F48;
  --text-muted: #3F6E77;
  --border: #0096AE;
  --border-strong: #0090A8;
  --accent: #FF5E5B;
  --accent-contrast: #FFFFFF;
  --accent-soft-bg: #FFE3E2;
  --accent-soft-text: #E0403D;
  --accent2-soft-bg: #FFF3CF;
  --accent2-soft-text: #9A6B00;
  --warning-bg: #FFE3E2;
  --warning-text: #E0403D;
  --radius-card: 26px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --border-width: 1.5px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
button, input, select, textarea { font-family: inherit; }

/* Taille par défaut de toutes les icônes SVG inline : sans cette règle, un <svg>
   sans width/height explicite se dessine à sa taille intrinsèque (~300x150px),
   d'où la "loupe géante" et les icônes qui débordaient des boutons (ex: Prêter).
   Les règles plus spécifiques ci-dessous (.stars svg, .bottomnav svg…) priment. */
svg { width: 18px; height: 18px; flex-shrink: 0; }


/* Disposition en "app shell" : #app occupe exactement la hauteur de l'écran et ne
   scrolle jamais lui-même ; seule .view scrolle. La barre du bas fait partie du flux
   flex (elle n'est plus en position fixed par-dessus le contenu) : elle ne peut donc
   plus jamais être recouverte par du contenu qui déborde, quelle que soit la hauteur
   réelle du viewport sur Android en plein écran (la précédente approche avec un
   padding-bottom calculé "à la main" s'est révélée peu fiable selon les téléphones). */
#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  /* --app-height (posée en JS depuis window.visualViewport) prend le pas dès qu'elle
     est disponible : contrairement à 100dvh, elle réagit de façon fiable aux moments où
     la barre d'adresse ou le clavier virtuel apparaît/disparaît en cours d'usage (source
     du "la barre du haut/bas monte ou descend" par endroits sous Android). */
  height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px 12px;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: var(--border-width) solid var(--border);
}
.topbar .app-name { font-size: 21px; font-weight: 700; font-family: var(--font-display); line-height: 1; }
.topbar .app-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary); margin-top: 6px;
  text-transform: uppercase; letter-spacing: .03em;
}
.app-logo-mark { color: var(--accent); display: inline-flex; }
.app-logo-mark svg { width: 13px; height: 13px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); border: var(--border-width) solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); cursor: pointer;
  flex-shrink: 0;
}


.view {
  padding: 12px 18px 84px; /* 84px : la loupe flottante ne masque jamais le bas de page */
  flex: 1;
  min-height: 0; /* indispensable pour qu'un enfant flex avec overflow puisse réellement scroller */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.view-listen { padding: 0; display: flex; }
.view-listen .listen-screen { flex: 1; overflow-y: auto; }

.card {
  background: var(--card);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 16px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; border-radius: var(--radius-control);
  border: var(--border-width) solid var(--accent);
  background: transparent; color: var(--accent);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.btn.solid { background: var(--accent); color: var(--accent-contrast); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

.input, select.input {
  width: 100%; height: 40px; border-radius: var(--radius-control);
  border: var(--border-width) solid var(--border-strong);
  background: var(--card); color: var(--text);
  padding: 0 12px; font-size: 13.5px;
}
label.field-label {
  font-size: 11px; color: var(--text-secondary); display: block; margin-bottom: 5px;
}

.badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft-bg); color: var(--accent-soft-text);
  border: var(--border-width) solid transparent;
}
.badge.alt { background: var(--accent2-soft-bg); color: var(--accent2-soft-text); }
.badge.warn { background: var(--warning-bg); color: var(--warning-text); }

.stars { display: flex; gap: 3px; cursor: pointer; }
.stars svg { width: 22px; height: 22px; }

/* Bottom nav : plus en position fixed (voir #app) — élément normal du flux flex,
   toujours visible en bas puisque c'est le dernier enfant et que #app ne scrolle pas. */
.bottomnav {
  flex-shrink: 0;
  display: flex; height: 68px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card); border-top: var(--border-width) solid var(--border-strong);
}
.bottomnav .nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-muted); cursor: pointer; background: none; border: none;
}
.bottomnav .nav-item.active { color: var(--accent); font-weight: 600; }
.bottomnav .nav-item svg { width: 19px; height: 19px; }
.bottomnav .nav-item span { font-size: 9.5px; white-space: nowrap; }

/* Liste collection */
.album-row {
  background: var(--card); border-radius: var(--radius-control);
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; cursor: pointer; border: var(--border-width) solid transparent;
}
.album-thumb {
  position: relative;
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--card-alt); display: flex; align-items: center; justify-content: center;
  color: var(--accent); overflow: hidden;
}
.album-thumb svg { width: 44%; height: 44%; color: var(--text-muted); }
.album-thumb img { width: 100%; height: 100%; object-fit: cover; }
.album-row .meta { min-width: 0; flex: 1; }
.album-row .meta .title {
  font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.album-row .meta .artist { font-size: 12px; color: var(--text-secondary); }
.value-tag { font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill);
  white-space: nowrap; cursor: pointer; background: var(--card); color: var(--text-secondary);
  border: var(--border-width) solid var(--border-strong);
}
.chip.active { background: var(--accent-soft-bg); color: var(--accent-soft-text); border-color: transparent; }

.stat-tile {
  background: var(--card-alt); border-radius: var(--radius-control); padding: 10px;
}
.stat-tile .label { font-size: 12px; color: var(--text-secondary); }
.stat-tile .value { font-size: 20px; font-weight: 700; margin-top: 2px; }
.stat-tile.clickable { cursor: pointer; }

/* Contrôles de tri / affichage (Collection) : boutons "roulement" plutôt que des listes
   déroulantes — un clic passe simplement au mode suivant. */
.controls-row { display: flex; gap: 8px; margin-bottom: 10px; }

/* Pastille indiquant qu'un filtre avancé est actif sur le bouton "filtre" */
.filter-dot {
  position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); border: 1px solid var(--card);
}

/* Recherche : barre en superposition en bas de l'écran (au-dessus du menu) + bouton flottant */
.search-overlay {
  position: fixed; z-index: 30;
  left: max(12px, calc((100vw - 480px) / 2 + 12px));
  right: max(12px, calc((100vw - 480px) / 2 + 12px));
  bottom: calc(68px + env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 8px 0 14px;
  background: var(--card); border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.search-overlay.open { opacity: 1; transform: none; pointer-events: auto; }
.search-bar-icon { color: var(--text-muted); display: flex; flex-shrink: 0; }
.search-bar-input {
  border: none; background: transparent; padding: 0; height: 100%; flex: 1; min-width: 0;
  font-size: 15px; color: var(--text);
}
.search-bar-input:focus { outline: none; }
.search-fab {
  position: fixed; right: max(20px, calc((100vw - 480px) / 2 + 20px)); bottom: calc(86px + env(safe-area-inset-bottom));
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast);
  border: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer; z-index: 15;
}
.search-fab.hidden { display: none; }
.search-fab svg { width: 21px; height: 21px; }

/* Affichage "pochettes" (grille) */
.covers-grid { display: grid; gap: 10px; }
.grid-covers-l { grid-template-columns: repeat(2, 1fr); }
.grid-covers-m { grid-template-columns: repeat(3, 1fr); }
.grid-covers-s { grid-template-columns: repeat(4, 1fr); }
.cover-tile { position: relative; cursor: pointer; }
.cover-tile-img {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  background: var(--card-alt); overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.cover-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.cover-tile-img svg { width: 40%; height: 40%; }
.corner-dot {
  position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--card);
}
.corner-dot.new { background: var(--accent); }
.corner-dot.warn { background: var(--warning-text); }
/* Griffe blanche (autographe) sur la pochette des vinyles dédicacés */
.griffe {
  position: absolute; right: 6%; bottom: 7%; width: 58%;
  pointer-events: none; line-height: 0;
  filter: drop-shadow(0 1px 1.2px rgba(0,0,0,.75)) drop-shadow(0 0 3px rgba(0,0,0,.35));
  transform: rotate(-8deg);
}
.griffe svg { width: 100%; height: auto; }
.signed-mark { display: inline-flex; color: var(--accent); margin-right: 4px; vertical-align: -2px; }
.signed-mark svg { width: 13px; height: 13px; }

/* Pochette cliquable -> vue en grand (lightbox) */
.thumb-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; }
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lightbox-figure { position: relative; display: inline-flex; max-width: 100%; max-height: 100%; }
.lightbox-overlay img { max-width: 100%; max-height: calc(100vh - 48px); border-radius: 6px; object-fit: contain; }
.lightbox-figure .griffe { width: 34%; }
.lightbox-close {
  position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,.15); border-color: transparent; color: #fff;
}

.album-card { position: relative; overflow: hidden; }
/* Fond de fiche : la pochette elle-même, agrandie, floutée et semi-transparente, qui
   s'estompe vers le bas. Pur CSS (aucune lecture de pixels) → pas de CORS ni de proxy. */
.cover-backdrop {
  position: absolute; left: -40px; right: -40px; top: -40px; height: 420px;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.35);
  transform: scale(1.15);
  opacity: var(--backdrop-opacity, .5);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  z-index: 0; pointer-events: none;
}
.album-card > *:not(.cover-backdrop) { position: relative; z-index: 1; }

/* Sélecteur de thème (Paramètres) : liste déroulante avec un mini-aperçu de l'interface */
.theme-select {
  background: var(--card); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-control); overflow: hidden;
}
.theme-select-current, .theme-option {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: none; border: none; cursor: pointer; color: var(--text); text-align: left;
}
.theme-select-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.theme-select-chevron { color: var(--text-muted); display: flex; transform: rotate(90deg); transition: transform .15s ease; }
.theme-select.open .theme-select-chevron { transform: rotate(-90deg); }
.theme-select-list { display: none; border-top: var(--border-width) solid var(--border); max-height: 420px; overflow-y: auto; }
.theme-select.open .theme-select-list { display: block; }
.theme-option .theme-select-name { font-weight: 500; }
.theme-option.active { background: var(--accent-soft-bg); }
.theme-option.active .theme-select-name { font-weight: 700; }
.theme-option-check {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
}
.theme-option-check svg { width: 12px; height: 12px; }
/* Mini-aperçu : 72×50, dessiné en CSS */
.theme-mini {
  position: relative; flex-shrink: 0; width: 72px; height: 50px; border-radius: 8px;
  border: 1px solid; overflow: hidden; display: block;
}
.theme-mini > span { position: absolute; display: block; }
.tm-title { left: 6px; top: 5px; width: 28px; height: 4px; border-radius: 2px; }
.tm-card {
  left: 5px; right: 5px; top: 13px; height: 20px; border: 1px solid; border-radius: 4px;
}
.tm-card > span { position: absolute; display: block; }
.tm-thumb { left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 2px; }
.tm-lines { left: 19px; top: 4px; right: 18px; }
.tm-line { display: block; height: 3px; border-radius: 2px; margin-bottom: 3px; }
.tm-line.short { width: 60%; }
.tm-pill { right: 3px; top: 6px; width: 12px; height: 6px; border-radius: 3px; }
.tm-nav {
  left: 0; right: 0; bottom: 0; height: 10px; border-top: 1px solid;
  display: flex !important; align-items: center; justify-content: space-around;
}
.tm-nav > span { width: 5px; height: 5px; border-radius: 50%; display: block; }

/* Paramètres : titres de section, lignes, interrupteur, cases à cocher */
.settings-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.settings-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: var(--radius-control); padding: 8px 10px 8px 12px; margin-bottom: 6px;
}
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border-radius: var(--radius-control); padding: 10px 12px; font-size: 13px; cursor: pointer;
}
.switch {
  appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 12px;
  background: var(--border-strong); position: relative; cursor: pointer; flex-shrink: 0; margin: 0;
  transition: background .15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.check-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex-shrink: 0; }

/* Liste des titres (fiche album) */
.track-row { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; }
.track-pos { width: 26px; flex-shrink: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.track-title { flex: 1; min-width: 0; }
.track-dur { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.track-heading {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary); margin: 8px 0 2px;
}

/* Écran immersif "J'écoute ça" */
.listen-screen {
  min-height: 100vh; padding: 18px 24px 32px;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
}
.listen-top { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.listen-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.vinyl-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.vinyl-disc {
  width: min(66vw, 270px); height: min(66vw, 270px); border-radius: 50%;
  background: repeating-radial-gradient(circle, #0F0D0B 0px, #0F0D0B 2px, #1E1B17 3px, #1E1B17 4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  animation: vinyl-spin 3.2s linear infinite;
}
@keyframes vinyl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vinyl-label {
  width: 42%; height: 42%; border-radius: 50%;
  background: var(--accent) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--accent-contrast);
}
.vinyl-label svg { width: 40%; height: 40%; }
.listen-meta { text-align: center; flex-shrink: 0; margin-bottom: 8px; }
.listen-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.listen-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.listen-meta .stars { justify-content: center; }
.listen-actions { flex-shrink: 0; margin-top: 6px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
}
.modal-sheet {
  background: var(--bg); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 18px; max-height: 88vh; overflow-y: auto;
}

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-secondary); }


/* ===== v1.7 ===== */

/* Titres d'écran : même taille, même alignement (à gauche) partout */
.view-title { font-size: 17px; margin: 0 0 14px; text-align: left; }

/* Tri : boutons pilule (flèche + repère AZ / 20xx / +) */
.sort-btn {
  height: 34px; padding: 0 10px 0 7px; border-radius: var(--radius-pill);
  background: var(--card); border: var(--border-width) solid var(--border-strong);
  color: var(--text-secondary); display: inline-flex; align-items: center; gap: 2px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; letter-spacing: -.01em;
}
.sort-btn svg { width: 14px; height: 14px; }
.sort-btn.active { background: var(--accent-soft-bg); color: var(--accent-soft-text); border-color: transparent; }

/* Recherche globale : panneau de résultats au-dessus de la barre */
.search-results {
  position: fixed; z-index: 29;
  left: max(12px, calc((100vw - 480px) / 2 + 12px));
  right: max(12px, calc((100vw - 480px) / 2 + 12px));
  bottom: calc(68px + env(safe-area-inset-bottom) + 70px);
  max-height: min(52vh, 420px); overflow-y: auto;
  background: var(--card); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card); padding: 8px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.search-results.hidden { display: none; }
.sr-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 8px 4px 4px; }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--radius-control); cursor: pointer; }
.sr-row:active { background: var(--card-alt); }
.sr-row .meta { min-width: 0; flex: 1; }
.sr-row .title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-row .artist { font-size: 12px; color: var(--text-secondary); }
.sr-empty { font-size: 13px; color: var(--text-secondary); padding: 12px 6px; text-align: center; }

/* Stats : sections et camemberts */
.stats-section { font-size: 12px; color: var(--text-secondary); margin: 18px 0 8px; }
.pie-block { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: var(--radius-card); padding: 14px; }
.pie { width: 118px; height: 118px; flex-shrink: 0; }
.pie path, .pie circle { cursor: pointer; stroke: var(--card); stroke-width: 1.5; }
.pie-legend { flex: 1; min-width: 0; }
.pie-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; cursor: pointer; }
.pie-swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.pie-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-value { color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Aléatoire : carrousel précédent / tirage / suivant.
   Les trois pochettes font la même taille (190px) et sont placées par transformation : les
   côtés sont réduits et décalés. Passer d'un tirage à l'autre revient donc à animer les
   transformations (fluide, sans saut), puis à redessiner avec les positions finales. */
.carousel {
  position: relative; height: 226px; margin: 4px -18px 0; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.car-track { position: absolute; inset: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.car-cover {
  position: absolute; left: 50%; top: 7px; width: 190px; height: 190px; margin-left: -95px;
  background: none; border: none; padding: 0; cursor: pointer;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease, filter .42s ease;
  will-change: transform, opacity;
}
.car-cover .album-thumb { width: 100%; height: 100%; border-radius: var(--radius-control); box-shadow: 0 8px 18px rgba(0,0,0,.24); }
.car-cover.center { transform: none; opacity: 1; z-index: 2; }
.car-cover.left { transform: translateX(-150px) scale(.5); opacity: .55; z-index: 1; }
.car-cover.right { transform: translateX(150px) scale(.5); opacity: .55; z-index: 1; }
.car-cover.empty { box-shadow: none; }
/* Transition vers le tirage suivant : tout glisse d'un cran vers la gauche */
.go-next .car-cover.left { transform: translateX(-250px) scale(.3); opacity: 0; }
.go-next .car-cover.center { transform: translateX(-150px) scale(.5); opacity: .55; z-index: 1; }
.go-next .car-cover.right { transform: none; opacity: 1; z-index: 3; }
/* Retour au précédent : tout glisse d'un cran vers la droite */
.go-prev .car-cover.right { transform: translateX(250px) scale(.3); opacity: 0; }
.go-prev .car-cover.center { transform: translateX(150px) scale(.5); opacity: .55; z-index: 1; }
.go-prev .car-cover.left { transform: none; opacity: 1; z-index: 3; }
/* La nouvelle pochette qui arrive sur le côté apparaît en douceur */
.carousel.anim-next .car-cover.right { animation: car-enter-right .42s cubic-bezier(.2,.8,.2,1); }
.carousel.anim-prev .car-cover.left { animation: car-enter-left .42s cubic-bezier(.2,.8,.2,1); }
@keyframes car-enter-right { from { transform: translateX(250px) scale(.3); opacity: 0; } to { transform: translateX(150px) scale(.5); opacity: .55; } }
@keyframes car-enter-left { from { transform: translateX(-250px) scale(.3); opacity: 0; } to { transform: translateX(-150px) scale(.5); opacity: .55; } }
/* Titre / artiste : fondu entre deux tirages */
.car-info { transition: opacity .2s ease; }
.car-info.fade-out { opacity: 0; }
.car-info.anim-in { animation: car-info-in .35s ease; }
@keyframes car-info-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.car-info { text-align: center; cursor: pointer; margin-bottom: 14px; }
.car-title { font-weight: 700; font-size: 15.5px; }
.car-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.car-stars { color: var(--accent); font-size: 14px; margin-top: 3px; letter-spacing: 1px; }
.car-bin { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.random-chips { justify-content: flex-start; }

/* Paramètres : catégories repliables */
.settings-cat {
  background: var(--card); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card); margin-bottom: 10px; overflow: hidden;
}
.settings-cat.danger { border-color: var(--warning-text); }
.settings-cat-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: none; border: none; cursor: pointer; text-align: left; color: var(--text);
}
.settings-cat-title { font-size: 14.5px; font-weight: 700; flex-shrink: 0; }
.settings-cat.danger .settings-cat-title { color: var(--warning-text); }
.settings-cat-summary { flex: 1; min-width: 0; font-size: 12px; color: var(--text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-cat-chevron { display: flex; color: var(--text-muted); transform: rotate(90deg); transition: transform .15s ease; }
.settings-cat.open .settings-cat-chevron { transform: rotate(-90deg); }
.settings-cat-body { display: none; padding: 2px 16px 16px; }
.settings-cat.open .settings-cat-body { display: block; }
.settings-cat .settings-row, .settings-cat .switch-row { background: var(--card-alt); }
.settings-cat .theme-select { background: var(--card-alt); }
.settings-cat .switch-row { margin-bottom: 8px; }
.switch-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.settings-empty { font-size: 12.5px; color: var(--text-muted); padding: 6px 2px; }
.range { width: 100%; accent-color: var(--accent); height: 28px; }
.range-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); padding: 0 4px; }

/* Fiche : titres */
.track-empty { font-size: 13px; color: var(--text-muted); }
.track-source { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Partage : aperçu de l'image */
.share-preview { border-radius: var(--radius-control); overflow: hidden; background: var(--card-alt); text-align: center; }
.share-preview img { display: block; width: 100%; height: auto; }

/* ===== Écran de démarrage ===== */
#splash {
  position: fixed; inset: 0; z-index: 100; background: #E3A93C; color: #2A2520;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .4s ease; cursor: pointer; overflow: hidden;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
#splash.hide { opacity: 0; } /* reste au-dessus pendant le fondu : absorbe le tap */
.no-splash #splash:not(.forced) { display: none; }
.topbar .app-name { cursor: default; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.splash-title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: .95; font-weight: 800; letter-spacing: .02em; background: #E3A93C; padding: 0 12px; border-radius: 12px; }
.splash-title .l1 { font-size: 40px; }
.splash-title .l2 { font-size: 58px; }
.splash-disc-wrap { position: relative; width: 210px; height: 210px; }
.splash-disc { width: 100%; height: 100%; animation: splash-spin 1.8s linear infinite; filter: drop-shadow(0 14px 24px rgba(0,0,0,.28)); }
@keyframes splash-spin { to { transform: rotate(360deg); } }
.splash-notes { position: absolute; left: 0; right: 0; top: 10%; height: 0; }
.splash-note {
  position: absolute; bottom: 0; color: #2A2520; opacity: 0; font-weight: 700;
  animation: splash-note-up 2.4s ease-out forwards;
}
@keyframes splash-note-up {
  0% { transform: translate(0, 0) rotate(0deg) scale(.7); opacity: 0; }
  15% { opacity: .95; }
  75% { opacity: .5; }
  100% { transform: translate(var(--dx), -120px) rotate(var(--rot)) scale(1.1); opacity: 0; }
}
.splash-hint { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); font-size: 12px; opacity: .6; }

/* Fiche : origine du vinyle (Discogs + date/heure de synchro, ou hors Discogs) */
/* Pastille à fond plein : reste lisible quelle que soit la pochette floutée derrière. */
.album-origin {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; max-width: 100%;
  padding: 5px 10px; border-radius: 999px;
  background: var(--card); border: var(--border-width) solid var(--border);
  font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text);
}
.album-origin svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--accent); }

/* Fiche : images Discogs (bandeau de vignettes + visionneuse) */
.album-images { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.album-image {
  flex: 0 0 auto; width: 76px; height: 76px; padding: 0; border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control); overflow: hidden; background: var(--bg); cursor: zoom-in; scroll-snap-align: start;
}
.album-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .gallery-img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 6px; object-fit: contain; }
.gallery-count { position: absolute; top: 26px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; opacity: .8; pointer-events: none; }
.gallery-nav { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.15); border-color: transparent; color: #fff; }
.gallery-nav.prev { left: calc(50% - 60px); }
.gallery-nav.next { right: calc(50% - 60px); }

/* Réglages : dernier échec de synchro Discogs */
.sync-error {
  display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 12px; padding: 8px 10px;
  border-radius: var(--radius-control); background: var(--card-alt); font-size: 12px; line-height: 1.4; color: var(--warning-text);
}
.sync-error svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* Fiche : en-tête de section avec bouton (Wikipédia) */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; color: var(--text-secondary); }
.section-head .icon-btn { width: 28px; height: 28px; }
.section-head .icon-btn svg { width: 14px; height: 14px; }

/* Visionneuse : suppression */
.gallery-delete { position: absolute; top: 18px; left: 18px; background: rgba(255,255,255,.15); border-color: transparent; color: #fff; }

/* Fenêtres de recherche (MusicBrainz, Wikipédia) */
.search-line { display: flex; gap: 8px; margin-bottom: 10px; }
.search-line .input { flex: 1; min-width: 0; }
.search-line .btn { flex-shrink: 0; padding: 0 14px; }
.search-line .btn svg { width: 16px; height: 16px; margin: 0; }
.lang-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.lang-toggle .btn { flex: 1; }
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-control); border: var(--border-width) solid var(--border);
  background: var(--card); color: var(--text); font-size: 13px; line-height: 1.35;
}
.pick-item > span, .pick-item.with-thumb > span > span { font-size: 12px; color: var(--text-secondary); }
.pick-item.with-thumb { flex-direction: row; align-items: center; gap: 10px; }
.pick-item.with-thumb > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--text); font-size: 13px; }
.pick-item.with-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--card-alt); }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.pick-photo { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); cursor: pointer; text-align: center; }
.pick-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid transparent; background: var(--card-alt); }
.pick-photo input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--accent); }
.pick-photo:has(input:checked) img { border-color: var(--accent); }
.pick-photo.owned { opacity: .5; }

/* Fiche : biographies (plusieurs artistes, compilations) */
.wiki-block + .wiki-block { margin-top: 14px; }
.wiki-body { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.section-actions { display: inline-flex; gap: 6px; }
.wiki-add { margin-top: 14px; }
/* Fiche : note libre */
.notes-input { width: 100%; resize: vertical; min-height: 72px; font: inherit; font-size: 14px; line-height: 1.45; padding: 10px 12px; }
.notes-status { font-size: 11px; color: var(--text-muted); }
.notes-input.empty { min-height: 40px; height: 40px; resize: none; padding-top: 9px; padding-bottom: 9px; }