/* ==== RACINE — jetons de couleur, thème clair ==== */
:root {
  --paper:#f2efe6;
  --paper-2:#e9e5d9;
  --ink:#171812;
  --ink-2:#272820;
  --olive:#667b3f;
  --olive-2:#5a6d35;
  --acid:#dbea99;
  --rust:#b66e4a;
  --line:rgba(23,24,18,.16);
  --muted:#61625b;
  --white:#fffdf6;
  --danger:#b1493d;
  --shadow:0 24px 70px rgba(30,30,20,.18);

  /* La bibliothèque (.library) est une bande volontairement inversée par
     rapport à la page : sombre sur fond clair, claire sur fond sombre.
     Ces jetons portent ses propres couleurs, dans un sens comme dans l'autre. */
  --lib-bg:#171812;
  --lib-ink:#f1eee4;
  --lib-eyebrow:#a7bb78;
  --lib-muted:#aaa99f;
  --lib-chip-bg:#22231e;
  --lib-chip-ink:#e9e6dc;
  --lib-border:#45463d;
  --lib-active-bg:#f1eee4;
  --lib-active-ink:#171812;

  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-body:Inter,"Helvetica Neue",Arial,sans-serif;
}


/* ==== RACINE — thème sombre (mêmes jetons, valeurs différentes) ==== */
:root[data-theme="dark"] {
  --paper:#151611;
  --paper-2:#1c1d17;
  --ink:#f3f0e5;
  --ink-2:#dcd9ce;
  --line:rgba(243,240,229,.15);
  --olive-2:#879b5b;
  --muted:#aaa99f;
  --white:#22231c;
  --shadow:0 24px 70px rgba(0,0,0,.45);

  /* La bande reste sombre, comme tout le reste du site en thème sombre —
     mais dans un ton nettement différent du fond de page, pour que la
     section reste visible plutôt que de s'y fondre. */
  --lib-bg:#282a1e;
  --lib-ink:#f1eee4;
  --lib-eyebrow:#879b5b;
  --lib-muted:#aaa99f;
  --lib-chip-bg:#323428;
  --lib-chip-ink:#e9e6dc;
  --lib-border:#4a4c3d;
  --lib-active-bg:#f1eee4;
  --lib-active-ink:#171812;
}


/* ==== BASE ==== */
* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px var(--font-body);
  overflow-x:hidden;
}

button,input,select,textarea {
  font:inherit;
}

button,a {
  touch-action:manipulation;
}


/* ==== ACCESSIBILITÉ ET TYPOGRAPHIE PARTAGÉE ==== */
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.17em;
  font-weight:800;
  font-size:.69rem;
  color:var(--olive-2);
}


/* ==== EN-TÊTE ==== */
.topbar {
  height:82px;
  padding:0 clamp(20px,4.8vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(18px);
  z-index:30;
}

.brand {
  border:0;
  background:none;
  color:inherit;
  font-weight:850;
  letter-spacing:-.035em;
  font-size:1.16rem;
  display:flex;
  align-items:center;
  gap:11px;
  cursor:pointer;
  white-space:nowrap;
}

.brand-record {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  background:var(--ink);
  border-radius:50%;
  box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--ink),var(--paper) 18%);
}

.brand-record i {
  width:5px;
  height:5px;
  background:var(--acid);
  border-radius:50%;
}

.global-search {
  width:min(430px,40vw);
  height:43px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--muted);
}

.global-search input {
  border:0;
  outline:0;
  background:0;
  color:var(--ink);
  width:100%;
  font-size:.9rem;
}

.top-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.round-button,.add-button {
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
}

.round-button {
  width:42px;
  height:42px;
  border-radius:50%;
  font-weight:800;
}

.add-button {
  height:44px;
  border-radius:999px;
  padding:0 17px;
  font-weight:750;
}

.add-button span {
  font-size:1.1rem;
  margin-right:4px;
}

.stats-trigger {
  height:42px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--olive);
  color:#fff;
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
}

.stats-trigger span {
  font-size:.78rem;
}


/* ==== ACCUEIL — bandeau d'ouverture ==== */
.hero {
  min-height:680px;
  padding:clamp(62px,8vw,112px) clamp(22px,5vw,76px) 78px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:7vw;
  align-items:center;
}

.hero h1,.section-heading h1,.discover h2,.dialog h2 {
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.065em;
}

.hero h1 {
  font-size:clamp(4rem,7.8vw,8.2rem);
  line-height:.82;
  margin:27px 0;
}

.hero h1 em {
  color:var(--olive);
  font-weight:400;
}

.hero-copy>p {
  font-family:var(--font-display);
  max-width:600px;
  font-size:1.1rem;
  line-height:1.7;
  color:var(--muted);
}

.hero-actions {
  display:flex;
  gap:12px;
  margin-top:31px;
}

.primary,.secondary {
  border:0;
  border-radius:999px;
  padding:15px 20px;
  font-weight:800;
  cursor:pointer;
}

.primary {
  background:var(--ink);
  color:var(--paper);
}

.secondary {
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}

.mini-stats {
  display:flex;
  gap:24px;
  margin-top:52px;
  color:var(--muted);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mini-stats span {
  display:flex;
  align-items:baseline;
  gap:5px;
}

.mini-stats b {
  font-family:var(--font-display);
  color:var(--ink);
  font-size:1.35rem;
  letter-spacing:0;
}


/* ==== ACCUEIL — tirage aléatoire mis en avant ==== */
.record-stage {
  position:relative;
  min-height:500px;
  display:grid;
  place-items:center;
}

.record-disc {
  position:absolute;
  width:min(74%,400px);
  aspect-ratio:1;
  border-radius:50%;
  background:repeating-radial-gradient(circle,#0d0e0b 0 3px,#1a1b17 4px 7px);
  box-shadow:0 30px 60px #0005;
  transform:translate(28%,0);
}

.record-disc:after {
  content:"";
  position:absolute;
  inset:38%;
  border-radius:50%;
  background:var(--olive);
  border:3px solid #0d0e0b;
  box-shadow:inset 0 0 0 18px #829657;
}

.featured-cover {
  position:relative;
  z-index:2;
  width:min(77%,420px);
  aspect-ratio:1;
  border:0;
  padding:0;
  background:var(--ink-2);
  box-shadow:var(--shadow);
  transform:rotate(-2.5deg);
  cursor:pointer;
  overflow:hidden;
}

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

.featured-note {
  position:absolute;
  z-index:4;
  right:0;
  bottom:4%;
  min-width:240px;
  background:var(--acid);
  color:#1a1b16;
  padding:18px 21px;
  box-shadow:0 15px 35px #0002;
  display:flex;
  flex-direction:column;
}

.featured-note>span {
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.featured-note strong {
  font-family:var(--font-display);
  font-size:1.45rem;
  margin:7px 0 2px;
}

.featured-note small {
  color:#565b45;
}

.featured-note button {
  margin-top:13px;
  border:0;
  border-top:1px solid #6b733b66;
  background:0;
  text-align:left;
  padding:10px 0 0;
  font-weight:800;
  cursor:pointer;
  color:#273018;
}

/* ==== ACCUEIL — micro-interaction au tirage aléatoire ==== */
@keyframes discPop {
  from { opacity:0; transform:translate(28%,0) scale(.85) rotate(-8deg); }
  to { opacity:1; transform:translate(28%,0) scale(1) rotate(0deg); }
}

@keyframes coverPop {
  from { opacity:0; transform:rotate(-2.5deg) scale(.9); }
  to { opacity:1; transform:rotate(-2.5deg) scale(1); }
}

@keyframes notePop {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}

.record-disc.pop-in {
  animation:discPop .5s cubic-bezier(.2,.8,.3,1);
}

.featured-cover.pop-in {
  animation:coverPop .38s cubic-bezier(.2,.8,.3,1);
}

.featured-note.pop-in {
  animation:notePop .4s .1s both ease-out;
}


/* ==== ACTUS DE VOS ARTISTES (par fiche disque) ==== */
.news-badge {
  display:inline-block;
  font-size:.64rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:2px 8px;
  border-radius:999px;
  margin-left:8px;
  vertical-align:middle;
}

.news-badge-sortie {
  background:var(--acid);
  color:#1a1b16;
}

.news-badge-concert {
  background:var(--rust);
  color:#171812;
}


/* ==== ACCUEIL — tableau de bord (derniers arrivés) ==== */
.dashboard-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.dashboard-strip>article {
  padding:32px clamp(20px,3vw,45px);
}

.recent-row {
  display:flex;
  margin-top:24px;
}

.recent-row button {
  width:20%;
  border:0;
  background:0;
  padding:0;
  margin-right:-2%;
  cursor:pointer;
  transition:.25s;
}

.recent-row button:hover {
  transform:translateY(-8px) rotate(-2deg);
  z-index:2;
}

.cover {
  position:relative;
  display:block;
  aspect-ratio:1;
  background:var(--ink-2);
  overflow:hidden;
}

.cover>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.cover-placeholder {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--olive-2);
  font-size:3rem;
  background:repeating-radial-gradient(circle,#26271f 0 5px,#1d1e18 6px 9px);
}

/* ==== BIBLIOTHÈQUE ==== */
.library {
  background:var(--lib-bg);
  color:var(--lib-ink);
  padding:90px clamp(22px,5vw,76px) 120px;
  min-height:700px;
  border-top:1px solid var(--lib-border);
  border-bottom:1px solid var(--lib-border);
}

.library .eyebrow {
  color:var(--lib-eyebrow);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
}

.section-heading h1 {
  font-size:clamp(3rem,5vw,5.2rem);
  margin:9px 0 0;
}

.status-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.status-tabs {
  display:flex;
  align-items:center;
  border:1px solid var(--lib-border);
  padding:4px;
  border-radius:999px;
}

.filters-toggle {
  display:none;
}

.status-tabs button {
  border:0;
  background:0;
  color:var(--lib-muted);
  padding:11px 15px;
  border-radius:999px;
  cursor:pointer;
}

.status-tabs button.active {
  background:var(--lib-active-bg);
  color:var(--lib-active-ink);
}

.status-tabs b {
  font-size:.68rem;
  background:#6c7f48;
  color:#fff;
  border-radius:999px;
  padding:2px 6px;
  margin-left:4px;
}

.library-tools {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:40px 0 30px;
  padding:12px 0;
  border-top:1px solid var(--lib-border);
  border-bottom:1px solid var(--lib-border);
}

.filters,.view-tools,.column-picker {
  display:flex;
  align-items:center;
  gap:7px;
}

.filters select {
  appearance:none;
  background:var(--lib-chip-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e9e6dc' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color:var(--lib-chip-ink);
  border:1px solid var(--lib-border);
  border-radius:999px;
  padding:10px 30px 10px 13px;
  max-width:100%;
}

.view-tools>button,.column-picker button {
  border:1px solid var(--lib-border);
  background:var(--lib-chip-bg);
  color:var(--lib-muted);
  border-radius:9px;
  height:39px;
  padding:0 12px;
  cursor:pointer;
}

.view-tools button.active,.column-picker button.active {
  background:var(--lib-active-bg);
  color:var(--lib-active-ink);
}

.column-picker {
  border-left:1px solid var(--lib-border);
  border-right:1px solid var(--lib-border);
  padding:0 8px;
}

.column-picker button {
  width:30px;
  padding:0;
  border-color:transparent;
}

/* ==== BIBLIOTHÈQUE — grille des disques ==== */
.vinyl-grid {
  --columns:4;
  display:grid;
  grid-template-columns:repeat(var(--columns),minmax(0,1fr));
  gap:clamp(16px,2vw,30px);
}

.vinyl-card {
  position:relative;
  border:0;
  background:0;
  color:inherit;
  padding:0;
  text-align:left;
  cursor:pointer;
  min-width:0;
}

.vinyl-card .cover {
  box-shadow:0 12px 30px #0006;
  transition:transform .25s,box-shadow .25s;
}

.vinyl-card:hover .cover {
  transform:translateY(-6px) rotate(-.6deg);
  box-shadow:0 20px 40px #0008;
}

.card-copy {
  display:flex;
  flex-direction:column;
  margin-top:14px;
  min-width:0;
}

.card-copy strong,.card-copy small {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card-copy strong {
  font-size:.95rem;
}

.card-copy small {
  color:var(--lib-muted);
  margin-top:5px;
}

.list-view {
  display:block;
}

.list-view .vinyl-card {
  display:grid;
  grid-template-columns:72px 1fr;
  gap:16px;
  align-items:center;
  border-bottom:1px solid var(--lib-border);
  padding:11px 0;
  width:100%;
}

.list-view .cover {
  width:72px;
}

.list-view .card-copy {
  margin:0;
}

/* ==== BIBLIOTHÈQUE — mur de vinyles (feuilleter comme un bac) ==== */
.wall-view {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0;
  padding-bottom:22px;
  border-bottom:3px solid var(--lib-border);
}

.wall-view .vinyl-card {
  width:130px;
  flex:none;
  margin-left:-22px;
  z-index:1;
  transition:transform .2s ease,z-index 0s;
}

.wall-view .vinyl-card:first-child {
  margin-left:0;
}

.wall-view .vinyl-card:nth-child(odd) {
  transform:rotate(-3deg);
}

.wall-view .vinyl-card:nth-child(even) {
  transform:rotate(2deg);
}

.wall-view .vinyl-card:hover {
  transform:translateY(-16px) rotate(0deg) scale(1.12);
  z-index:5;
}

.wall-view .card-copy {
  display:none;
}

.empty-state {
  text-align:center;
  padding:100px 20px;
  color:var(--lib-muted);
}

.empty-state>span {
  font-size:3rem;
}

.empty-state h3 {
  color:var(--lib-ink);
  font-family:var(--font-display);
  font-size:2rem;
  margin:14px;
}

.empty-state button {
  border:1px solid var(--lib-border);
  background:0;
  color:var(--lib-ink);
  border-radius:999px;
  padding:12px 17px;
  cursor:pointer;
}


/* ==== DÉCOUVERTE — nuage de genres ==== */
.discover {
  padding:110px clamp(22px,5vw,76px);
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:7vw;
  align-items:center;
}

.discover h2 {
  font-family:var(--font-display);
  font-size:clamp(3rem,5.5vw,6rem);
  line-height:.93;
  letter-spacing:-.06em;
  margin:20px 0;
}

.discover p {
  max-width:520px;
  color:var(--muted);
  font-family:var(--font-display);
  font-size:1.08rem;
  line-height:1.7;
}

.primary.inverse {
  background:var(--acid);
  color:#171812;
  margin-top:20px;
}

.discover-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.discover-actions .primary.inverse {
  margin-top:0;
}

.secondary.inverse {
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:999px;
  padding:15px 20px;
  font-weight:800;
  cursor:pointer;
}

.genre-cloud {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  transform:rotate(1deg);
}

.genre-cloud button {
  border:0;
  min-height:125px;
  padding:20px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  color:#171812;
  transition:.2s;
}

.genre-cloud button:hover {
  transform:scale(1.02) rotate(-1deg);
}

.genre-cloud b {
  font-family:var(--font-display);
  font-size:1.7rem;
}

.genre-cloud span {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.cloud-0 {
  background:var(--acid);
}

.cloud-1 {
  background:#bd7652;
}

.cloud-2 {
  background:#86a8b7;
}

.cloud-3 {
  background:#c2b1d2;
}


/* ==== PIED DE PAGE ==== */
footer {
  background:#11120e;
  color:#f1eee4;
  padding:58px clamp(22px,5vw,76px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}

.footer-mark {
  width:48px;
  height:auto;
  color:#879b5b;
  flex:none;
}

footer p {
  color:#879b5b;
  font-weight:700;
  margin:0;
}

footer button {
  background:0;
  border:0;
  color:#f1eee4;
  font-size:1.3rem;
  line-height:1;
  padding:4px;
  cursor:pointer;
}


/* ==== NAVIGATION MOBILE ==== */
.mobile-nav {
  display:none;
}


/* ==== BOÎTES DE DIALOGUE — base commune ==== */
/* Tout est scopé à [open] à dessein : une règle d'auteur sur .dialog seul (sans [open])
   l'emporte sur la feuille de style du navigateur (dialog:not([open]){display:none}) quelle
   que soit sa spécificité — les styles d'auteur gagnent toujours face à ceux du navigateur à
   priorité égale. Ça a fait tourner cet élément en display:flex en permanence, même fermé :
   plus de vrai <dialog> modal (page de fond qui reste interactive, geste retour qui agit sur
   elle plutôt que sur la fiche), et son ombre portée 100vmax assombrissait tout en continu. */
.dialog[open] {
  position:fixed;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:min(980px,calc(100% - 32px));
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 0 0 100vmax #0009,var(--shadow);
  z-index:80;
  display:flex;
  flex-direction:column;
}

.dialog::backdrop {
  background:#0009;
}

/* Seul ce bloc défile : le bouton fermer, lui, reste toujours au même endroit,
   même sur une fiche longue (actus + discographie manquante) qu'on doit faire défiler. */
.dialog-body {
  overflow:auto;
  flex:1;
  min-height:0;
  padding:clamp(24px,4vw,52px);
  -webkit-overflow-scrolling:touch;
}

.dialog-close {
  position:absolute;
  right:18px;
  top:18px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  font-size:1.35rem;
  cursor:pointer;
  z-index:30;
}

.dialog h2 {
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:.9;
  margin:16px 45px 16px 0;
}


/* ==== BOÎTE DE DIALOGUE — fiche disque ==== */
.detail-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px,6vw,70px);
  align-items:center;
}

.detail-art .cover {
  box-shadow:var(--shadow);
}

.detail-copy h3 {
  font-family:var(--font-display);
  color:var(--olive);
  font-size:1.55rem;
  margin:0 0 20px;
  font-weight:400;
}

.detail-tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.detail-tags span {
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  font-size:.78rem;
}

.meta,.notes {
  color:var(--muted);
  font-size:.88rem;
  line-height:1.6;
}

.listen-links {
  display:flex;
  gap:9px;
  margin:24px 0;
}

.listen-links a,.detail-actions a {
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding:6px 0;
  font-weight:750;
}

.played-button {
  width:100%;
  border:0;
  background:var(--acid);
  color:#171812;
  padding:13px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}

.detail-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:18px;
}

.detail-actions button,.detail-actions a {
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  border-radius:999px;
  padding:12px 15px;
  font-weight:750;
  cursor:pointer;
  text-decoration:none;
}

.detail-actions .primary {
  background:var(--ink);
  color:var(--paper);
}

.detail-actions .danger {
  color:var(--danger);
}

.artist-news {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.artist-news>span {
  display:block;
  margin-bottom:10px;
}

.artist-news ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.artist-news li a {
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  font-size:.92rem;
  line-height:1.4;
}

.artist-news li a:hover {
  text-decoration:underline;
}

.artist-news li small {
  display:block;
  color:var(--muted);
  font-size:.74rem;
  margin-top:2px;
}

.artist-news p {
  color:var(--muted);
  font-size:.88rem;
  margin:0;
}

.missing-releases {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.missing-releases>span {
  display:block;
  margin-bottom:10px;
}

.missing-releases p {
  color:var(--muted);
  font-size:.88rem;
  margin:0;
}

.missing-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:14px;
}

.missing-list li {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.missing-list img,.missing-thumb {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:6px;
  background:var(--paper-2);
  display:block;
}

.missing-list strong {
  font-size:.82rem;
  line-height:1.3;
}

.missing-list small {
  display:block;
  color:var(--muted);
  font-size:.72rem;
  margin-top:2px;
}


/* ==== BOÎTE DE DIALOGUE — tirage aléatoire ==== */
.dialog[open].random-dialog {
  background:#11120e;
  color:#f1eee4;
  border-color:#3d3e35;
}

.random-dialog .dialog-body {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  align-items:center;
}

.random-dialog .dialog-close {
  background:#292a24;
  color:#fff;
  border-color:#4a4b42;
}

.random-copy h2 {
  font-size:clamp(3.5rem,6vw,6rem);
  margin-right:0;
}

.random-copy p {
  font-family:var(--font-display);
  color:#a7bb78;
  font-size:1.35rem;
}

.random-copy>div {
  display:flex;
  gap:10px;
}

.random-copy>div button:not(.primary) {
  border:1px solid #4a4b42;
  background:0;
  color:#fff;
  border-radius:999px;
  padding:14px 18px;
  cursor:pointer;
}

.random-art {
  position:relative;
  padding:8%;
}

.random-art .record-disc {
  width:85%;
  transform:translate(30%,0);
}

.random-art .cover {
  z-index:2;
  position:relative;
  box-shadow:0 25px 60px #000;
}


/* ==== BOÎTE DE DIALOGUE — séance sur mesure ==== */
.session-dialog p {
  color:var(--muted);
}

.mood-picker {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0;
}

.mood-picker button {
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  border-radius:999px;
  padding:10px 15px;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
}

.mood-picker button.active {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.session-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
  margin:20px 0;
}

.session-list button {
  border:0;
  background:0;
  padding:0;
  text-align:left;
  cursor:pointer;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.session-list .cover {
  box-shadow:0 12px 24px #0004;
}

.session-list strong {
  font-size:.9rem;
  display:block;
}

.session-list small {
  color:var(--muted);
  font-size:.76rem;
}

.session-empty {
  color:var(--muted);
  margin:20px 0;
}


/* ==== BOÎTE DE DIALOGUE — statistiques ==== */
.stats-dialog .dialog-body>p {
  color:var(--muted);
}

.year-recap {
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 24px;
  margin:24px 0 8px;
  background:var(--white);
}

.year-recap.empty {
  color:var(--muted);
}

.year-recap h3 {
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.5rem;
  margin:8px 0 16px;
}

.year-recap-grid {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.year-recap-grid strong {
  font-family:var(--font-display);
  font-size:1.3rem;
  display:block;
}

.year-recap-grid span {
  color:var(--muted);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.stats-overview {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:28px 0 22px;
}

.stats-overview>* {
  min-height:112px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:left;
}

.stats-overview button {
  cursor:pointer;
  transition:transform .2s,border-color .2s;
}

.stats-overview button:hover {
  transform:translateY(-3px);
  border-color:var(--olive);
}

.stats-overview strong {
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.5rem);
  font-weight:400;
  letter-spacing:-.05em;
}

.stats-overview span,.stats-highlights span {
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:800;
  color:var(--muted);
}

.stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:30px;
}

.stats-grid section {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
}

.stats-grid h3 {
  font-family:var(--font-display);
  font-size:1.25rem;
  margin:0 0 20px;
}

.bar-row {
  display:grid;
  grid-template-columns:110px 1fr 24px;
  gap:9px;
  align-items:center;
  width:100%;
  border:0;
  background:0;
  color:var(--ink);
  padding:6px 0;
  text-align:left;
  cursor:pointer;
}

.bar-row span {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.78rem;
}

.bar-row i {
  display:block;
  height:9px;
  border-radius:9px;
  background:var(--olive);
}

.genre-donut {
  width:170px;
  aspect-ratio:1;
  border-radius:50%;
  margin:10px auto 18px;
  background:var(--genre-gradient);
  display:grid;
  place-items:center;
}

.genre-donut:before {
  content:"";
  grid-area:1/1;
  width:57%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--white);
}

.genre-donut span {
  grid-area:1/1;
  z-index:1;
  font-family:var(--font-display);
  font-size:2rem;
  text-align:center;
}

.genre-donut small {
  display:block;
  font:700 .62rem Arial;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}

.legend {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.legend button {
  border:0;
  background:0;
  color:var(--ink);
  font-size:.73rem;
  text-align:left;
  cursor:pointer;
}

.legend i {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--olive);
  margin-right:4px;
}

.legend b {
  float:right;
}

.color-1 {
  background:var(--acid)!important;
}

.color-2 {
  background:var(--rust)!important;
}

.color-3 {
  background:#688fa0!important;
}

.color-4 {
  background:#b4a2c8!important;
}

.color-5 {
  background:#dfbd62!important;
}

.decades-chart {
  grid-column:1/-1;
}

.decades-chart>div {
  height:190px;
  display:flex;
  align-items:end;
  gap:10px;
}

.decades-chart button {
  flex:1;
  height:100%;
  border:0;
  background:0;
  color:var(--ink);
  display:grid;
  grid-template-rows:1fr auto auto;
  align-items:end;
  cursor:pointer;
}

.decades-chart i {
  display:block;
  width:70%;
  margin:auto;
  background:var(--olive);
  border-radius:5px 5px 0 0;
}

.decades-chart b,.decades-chart span {
  font-size:.72rem;
  margin-top:4px;
}

.stats-highlights {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:14px;
  align-items:stretch;
}

.stats-highlights>div {
  border-left:1px solid var(--line);
  padding-left:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.stats-highlights>div:first-child {
  border-left:0;
  padding-left:0;
}

.stats-highlights strong {
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:400;
  line-height:.9;
}

.stats-highlights small {
  color:var(--muted);
  font-size:.76rem;
  line-height:1.4;
}

.listening-highlight {
  align-self:end;
  border:0;
  background:var(--ink);
  color:var(--paper);
  border-radius:12px;
  padding:13px 15px;
  font-weight:800;
  cursor:pointer;
  text-align:left;
}

.listening-highlight span {
  display:block;
  color:var(--acid);
  margin-top:6px;
}


/* ==== BOÎTE DE DIALOGUE — outils et réglages ==== */
.manage-dialog {
  max-width:760px;
}

.manage-sections {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.manage-sections>section:last-child:nth-child(odd) {
  grid-column:1/-1;
}

.manage-sections section {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.manage-sections section>span {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  font-weight:800;
}

.manage-sections strong {
  font-family:var(--font-display);
  font-size:2.4rem;
}

.manage-sections p {
  font-size:.8rem;
  color:var(--muted);
}

.manage-sections button {
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  border-radius:10px;
  padding:11px;
  text-align:left;
  cursor:pointer;
}

.danger {
  color:var(--danger)!important;
}


/* ==== BOÎTE DE DIALOGUE — formulaire d'ajout / modification ==== */
.edit-dialog {
  max-width:850px;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-grid label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
}

.form-grid .wide {
  grid-column:1/-1;
}

.form-grid input,.form-grid select,.form-grid textarea {
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  color:var(--ink);
  padding:13px;
  outline:none;
  text-transform:none;
  letter-spacing:0;
}

.form-grid input:focus,.form-grid textarea:focus {
  border-color:var(--olive);
}

.inline-input {
  display:flex;
}

.inline-input input {
  border-radius:10px 0 0 10px;
  flex:1;
}

.inline-input button {
  border:0;
  background:var(--ink);
  color:var(--paper);
  padding:0 13px;
  border-radius:0 10px 10px 0;
  cursor:pointer;
}

.discogs-search {
  margin:18px 0;
}

.discogs-search button {
  width:100%;
  border:1px dashed var(--olive);
  background:color-mix(in srgb,var(--olive) 8%,transparent);
  color:var(--ink);
  border-radius:12px;
  padding:14px;
  font-weight:800;
  cursor:pointer;
}

.discogs-results {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-bottom:18px;
}

.discogs-results button {
  border:1px solid var(--line);
  padding:7px;
  background:var(--white);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.discogs-results img,.discogs-results>button>span {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:var(--ink-2);
  display:block;
}

.discogs-results strong,.discogs-results small {
  display:block;
  font-size:.66rem;
  margin-top:5px;
}

.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:18px;
}

.form-actions button {
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  border-radius:999px;
  padding:13px 18px;
  cursor:pointer;
}

.form-actions .primary {
  background:var(--ink);
  color:var(--paper);
}


/* ==== NOTIFICATION FLOTTANTE ==== */
.toast {
  position:fixed;
  z-index:120;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--paper);
  padding:13px 18px;
  border-radius:999px;
  box-shadow:var(--shadow);
  font-weight:700;
  font-size:.85rem;
}

.toast[hidden] {
  display:none;
}

@keyframes toastIn {
  from { transform:translateX(-50%) translateY(16px); opacity:0; }
  to { transform:translateX(-50%) translateY(0); opacity:1; }
}

.toast.toast-in {
  animation:toastIn .28s ease-out;
}


/* ==== GESTES QUI RÉPONDENT — retour tactile léger sur les boutons ==== */
.primary,.secondary,.add-button,.round-button,.stats-trigger,.view-tools>button,.column-picker button,.status-tabs button,.mood-picker button,.secondary.inverse {
  transition:transform .12s ease;
}

.primary:active,.secondary:active,.add-button:active,.round-button:active,.stats-trigger:active,.view-tools>button:active,.column-picker button:active,.status-tabs button:active,.mood-picker button:active,.secondary.inverse:active {
  transform:scale(.96);
}


/* ==== RESPONSIVE — tablette (≤ 1000px) ==== */
@media(max-width:1000px) {

/* ==== ACCUEIL — bandeau d'ouverture ==== */
  .hero {
    grid-template-columns:1fr 1fr;
    gap:30px;
  }

/* ==== BIBLIOTHÈQUE — grille des disques ==== */
  .library-tools {
    display:block;
  }
  .view-tools {
    margin-top:12px;
  }

/* ==== DÉCOUVERTE — nuage de genres ==== */
  .discover {
    grid-template-columns:1fr;
  }
  .stats-grid {
    grid-template-columns:1fr;
  }
  .decades-chart {
    grid-column:auto;
  }
  .stats-overview {
    grid-template-columns:repeat(2,1fr);
  }
  .stats-highlights {
    grid-template-columns:1fr 1fr;
  }
  .listening-highlight {
    grid-column:1/-1;
    align-self:auto;
  }
}


/* ==== RESPONSIVE — mobile (≤ 720px) ==== */
@media(max-width:720px) {
  body {
    padding-bottom:76px;
  }

/* ==== EN-TÊTE ==== */
  .topbar {
    height:68px;
    padding:0 18px;
  }
  .brand span:last-child {
    font-size:1rem;
  }
  .global-search {
    position:absolute;
    top:78px;
    left:18px;
    right:18px;
    width:auto;
    box-shadow:0 10px 30px #0001;
  }
  .stats-trigger {
    display:none;
  }
  .add-button {
    width:42px;
    padding:0;
    font-size:0;
  }
  .add-button span {
    font-size:1.3rem;
    margin:0;
  }

/* ==== ACCUEIL — bandeau d'ouverture ==== */
  .hero {
    display:block;
    min-height:auto;
    padding:68px 20px 40px;
  }
  .hero h1 {
    font-size:3.9rem;
  }
  .hero-copy>p {
    font-size:1rem;
  }
  .mini-stats {
    margin-top:24px;
    gap:13px;
    flex-wrap:wrap;
  }
  .mini-stats span:first-child {
    flex-basis:100%;
  }

/* ==== ACCUEIL — tirage aléatoire mis en avant ==== */
  .record-stage {
    min-height:390px;
    margin-top:25px;
  }
  .featured-cover {
    width:70%;
  }
  .record-disc {
    width:69%;
  }
  .featured-note {
    right:0;
    bottom:0;
    min-width:205px;
    padding:14px;
  }

/* ==== ACCUEIL — tableau de bord (derniers arrivés) ==== */
  .dashboard-strip>article {
    padding:27px 20px;
  }
  .recent-row button {
    width:23%;
  }

/* ==== BIBLIOTHÈQUE ==== */
  .library {
    padding:65px 18px 100px;
  }
  .section-heading {
    display:block;
  }
  .section-heading h1 {
    font-size:3rem;
  }
  .status-row {
    margin-top:22px;
  }
  .status-tabs {
    width:max-content;
  }
  .filters-toggle {
    display:inline-flex;
    align-items:center;
    border:1px solid var(--lib-border, var(--line));
    background:transparent;
    color:inherit;
    border-radius:999px;
    padding:8px 14px;
    font-size:.8rem;
    font-weight:700;
    cursor:pointer;
  }
  .filters-toggle.active {
    background:var(--ink);
    color:var(--paper);
  }
  .filters {
    display:none;
    grid-template-columns:1fr;
    gap:8px;
  }
  .filters.open {
    display:grid;
  }
  .filters select {
    width:100%;
  }
  .view-tools {
    overflow:auto;
    padding-bottom:4px;
  }
  .column-picker [data-columns="5"] {
    display:none;
  }
  #toggle-wall {
    display:none;
  }
  .view-tools>button {
    white-space:nowrap;
  }

/* ==== BIBLIOTHÈQUE — grille des disques ==== */
  .vinyl-grid {
    gap:13px;
  }
  .vinyl-grid.list-view {
    display:block;
  }
  .card-copy strong {
    font-size:.78rem;
  }
  .card-copy small {
    font-size:.7rem;
  }

/* ==== DÉCOUVERTE — nuage de genres ==== */
  .discover {
    padding:75px 20px;
  }
  .discover h2 {
    font-size:3.7rem;
  }
  .genre-cloud {
    gap:8px;
  }
  .genre-cloud button {
    min-height:105px;
    padding:14px;
  }
  .genre-cloud b {
    font-size:1.25rem;
  }

/* ==== PIED DE PAGE ==== */
  footer {
    padding:42px 20px;
  }

/* ==== NAVIGATION MOBILE ==== */
  .mobile-nav {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    position:fixed;
    z-index:50;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:calc(100% - 28px);
    background:color-mix(in srgb,var(--olive) 82%,transparent);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid color-mix(in srgb,var(--olive-2) 70%,transparent);
    border-radius:16px;
    padding:5px;
    box-shadow:0 12px 34px #0005;
  }
  .mobile-nav button {
    border:0;
    background:0;
    color:#fff;
    font-size:.85rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:6px 15px;
  }
  .mobile-nav button svg {
    width:16px;
    height:auto;
  }
  .mobile-nav span {
    font-size:.55rem;
    font-weight:700;
  }

/* ==== BOÎTES DE DIALOGUE — base commune ==== */
  .dialog {
    inset:auto 8px 8px;
    transform:none;
    width:calc(100% - 16px);
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    border-radius:22px;
  }
  .dialog-body {
    padding:26px 20px;
  }
  .dialog h2 {
    font-size:3rem;
  }

/* ==== BOÎTE DE DIALOGUE — fiche disque ==== */
  .detail-layout {
    display:block;
  }
  .detail-art {
    width:62%;
    margin:0 auto 25px;
  }

/* ==== BOÎTE DE DIALOGUE — tirage aléatoire ==== */
  .random-dialog .dialog-body {
    display:flex;
    flex-direction:column-reverse;
  }
  .random-art {
    width:75%;
    padding:0;
  }
  .random-copy {
    width:100%;
  }
  .random-copy h2 {
    font-size:3.2rem;
  }
  .stats-grid {
    grid-template-columns:1fr;
  }
  .stats-overview {
    grid-template-columns:1fr 1fr;
  }
  .stats-overview>* {
    min-height:92px;
    padding:14px;
  }
  .stats-highlights {
    grid-template-columns:1fr;
  }
  .stats-highlights>div,.stats-highlights>div:first-child {
    border-left:0;
    border-top:1px solid var(--line);
    padding:14px 0 0;
  }
  .stats-highlights>div:first-child {
    border-top:0;
    padding-top:0;
  }
  .legend {
    grid-template-columns:1fr;
  }
  .decades-chart>div {
    height:150px;
    gap:5px;
    overflow-x:auto;
  }
  .decades-chart b,.decades-chart span {
    font-size:.64rem;
  }
  .manage-sections {
    grid-template-columns:1fr;
  }
  .form-grid {
    grid-template-columns:1fr;
  }
  .form-grid .wide {
    grid-column:auto;
  }
  .discogs-results {
    grid-template-columns:repeat(3,1fr);
  }
  .listen-links {
    overflow:auto;
  }
  .detail-actions {
    display:grid;
  }
  .detail-actions>* {
    text-align:center;
  }

/* ==== NOTIFICATION FLOTTANTE ==== */
  .toast {
    bottom:90px;
    max-width:calc(100% - 24px);
    white-space:nowrap;
  }
}


/* ==== RESPONSIVE — petit mobile (≤ 420px) ==== */
@media(max-width:420px) {
  .hero h1 {
    font-size:3.35rem;
  }

/* ==== BIBLIOTHÈQUE — grille des disques ==== */
  .genre-cloud {
    grid-template-columns:1fr 1fr;
  }
  .mini-stats {
    font-size:.65rem;
  }
}


/* ==== ACCESSIBILITÉ — mouvement réduit ==== */
@media(prefers-reduced-motion:reduce) {

/* ==== BASE ==== */
  * {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}