/* ===== Thème Spotify (3 variantes) =====
   Actif quand <html data-theme="spotify">. Variante : data-variant = violet (défaut) | rose | sarcelle, la couleur de
   l'en-tête de page. Adminer présenté comme le lecteur de Spotify (clin d'œil non officiel, sans son logo) :
   - deux panneaux sombres arrondis sur fond noir ; en haut, la recherche en pilule (le fil d'Ariane), le thème, un
     bouton blanc et l'avatar ;
   - à gauche, la bibliothèque : les actions du menu en puces, chaque table avec sa pochette (▶ au survol : ouvre les
     données), celle ouverte en vert avec un petit égaliseur, comme le morceau en cours ;
   - au centre, chaque page en playlist : en-tête dégradé de la couleur de la variante, pochette et grand titre gras ;
     les données en liste de morceaux (numéro de ligne qui devient ▶ au survol pour ouvrir la ligne, colonne principale
     en blanc, le reste en gris), le pied d'actions en barre de lecture noire, boutons en pilules (action principale verte) ;
   - la connexion en playlist, elle aussi : une piste par champ, et « Login » sur le bouton vert de lecture.
   Polices du système (Segoe UI, sa graisse Black pour les titres). */

/* ---------- Variables : violet (variante par défaut) ---------- */
:root[data-theme="spotify"] {
  --hero: #6d4bc4; --hero-pale: #c4b5f0;                   /* en-tête de page et pochettes */
  --black: #000000; --panel: #121212; --card: #181818; --raised: #1f1f1f; --hover: #2a2a2a; --press: #333333;
  --sub: #b3b3b3; --line: rgb(255 255 255 / .1); --field-line: #7c7c7c;
  --green: #1ed760; --green-hover: #3be477;
  --toast: #2e77d0; --danger: #c9142a; --danger-text: #f3727f;

  --bg: var(--black); --surface: var(--panel); --surface-2: var(--hover); --text: #ffffff; --muted: var(--sub); --border: var(--field-line);
  --accent: var(--green); --on-accent: #000000; --accent-text: var(--green);
  --ok: var(--green); --err: var(--danger-text); --on-err: #ffffff;
  --jush-str: #f573a0; --jush-num: #509bf5; --jush-id: #ffa42b;
  --shadow: none;
  color-scheme: dark;

  --radius: 8px; --radius-sm: 4px; --pill: 500px;
  --fs: 14px; --pad-y: 4px; --pad-x: 16px;
  --font: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Consolas, "DejaVu Sans Mono", Menlo, monospace;
  --h2-border: 0;
  --e-title: ""; --e-after: ""; --e-table: ""; --e-logo: ""; --e-ok: ""; --e-err: "";
  --banner: none;

  --th-bg: var(--panel); --th-text: var(--sub);
  --zebra: transparent; --row-hover: var(--hover);
  --lit: var(--hover); --dim: var(--raised);

  --bar: 64px;                                    /* barre du haut */
  --side: 296px;                                  /* bibliothèque : 280 px et ses marges */

  /* pictogrammes (masques, peints dans la couleur voulue) */
  --i-table: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M3 14.75h18M9.5 9.5V20'/%3E%3C/svg%3E");
  --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.6v14.8a.7.7 0 0 0 1.05.6l12.3-7.4a.7.7 0 0 0 0-1.2L8.05 4a.7.7 0 0 0-1.05.6z'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  --i-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 3v18M9.5 3v18M14.5 4.5l5.5 16'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E");
  --i-db: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='2.75'/%3E%3Cpath d='M4.5 5.5v13c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75v-13M4.5 12c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75'/%3E%3C/svg%3E");
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6h9L8 10.5z' fill='%23fff'/%3E%3C/svg%3E");
  /* logo : disque vert marqué d'une pile de base de données (pas celui de Spotify) */
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%231ed760'/%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cellipse cx='16' cy='10' rx='7' ry='2.75'/%3E%3Cpath d='M9 10v12c0 1.5 3.1 2.75 7 2.75s7-1.25 7-2.75V10M9 16c0 1.5 3.1 2.75 7 2.75s7-1.25 7-2.75'/%3E%3C/g%3E%3C/svg%3E");

  /* le logo, en haut à gauche, défile avec la page */
  --bg-pattern: var(--logo); --bg-size: 32px 32px; --bg-pos: 24px 16px;
  background-repeat: no-repeat; background-attachment: scroll;
}
:root[data-theme="spotify"][data-variant="rose"] { --hero: #c2185b; --hero-pale: #ff9ec2; }
:root[data-theme="spotify"][data-variant="sarcelle"] { --hero: #1f7a62; --hero-pale: #9fe3cb; }

:root[data-theme="spotify"], :root[data-theme="spotify"] * { scrollbar-color: color-mix(in srgb, rgb(255 255 255 / .3), var(--text) 10%) transparent; }   /* poignée à 3:1 sur les fonds (voir base.css) */
:root[data-theme="spotify"] :where(a, button, summary, input, select, textarea, [contenteditable]):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Page : texte blanc, gris pour le secondaire, liens gris qui blanchissent ---------- */
:root[data-theme="spotify"] body { font: 400 var(--fs)/1.45 var(--font); }
:root[data-theme="spotify"] a:is(:link, :visited) { color: var(--sub); font-weight: 400; }
:root[data-theme="spotify"] a:is(:link, :visited):is(:hover, :focus) { color: #fff; text-decoration: underline; }
:root[data-theme="spotify"] :is(h2, h3) { color: #fff; font-family: var(--font-heading); }
:root[data-theme="spotify"] h3 { margin: 32px 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
:root[data-theme="spotify"] code { padding: 2px 6px; border-radius: 4px; background: var(--hover); color: #fff; font-size: 13px; }
:root[data-theme="spotify"] pre.jush { padding: 12px 16px; border-radius: 8px; background: var(--card); }
:root[data-theme="spotify"] hr { border: 0; border-top: 1px solid var(--line); }
:root[data-theme="spotify"] mark { background: var(--green); color: #000; }
:root[data-theme="spotify"] .time { color: var(--sub); font-size: 12px; }
:root[data-theme="spotify"] p { margin: 12px 0; }

/* ---------- Barre du haut (écran large) : recherche, thème, bouton blanc, avatar ---------- */
@media not all and (max-width: 800px) {
  /* comme dans l'application : la barre du haut reste en place (la page défile dessous), la bibliothèque aussi, à la
     hauteur de l'écran, et seule sa liste de tables défile ; les deux panneaux côte à côte, en grille */
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) { scroll-padding-top: var(--bar); }
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) body { display: grid; grid-template-columns: var(--side) 1fr; }
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) body::before {
    content: ""; position: fixed; inset: 0 0 auto; z-index: 3; height: var(--bar);
    background: var(--logo) 24px 16px / 32px 32px no-repeat, var(--black);
  }
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) #foot {
    grid-area: 1 / 1; align-self: start; position: sticky; top: var(--bar); height: calc(100vh - var(--bar) - 8px);
    display: flex; flex-direction: column; margin: var(--bar) 8px 8px;
    z-index: 4;   /* collant, il forme son propre empilement : le bloc du compte (.logout, fixe) qu'il contient doit passer sur la barre */
  }
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) #menu { position: static; flex: 1; min-height: 0; width: auto; }
  /* la liste prend la hauteur restante ; elle défile par la base commune */
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) #tables { flex: 1 1 auto; min-height: 0; }
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) #content { grid-area: 1 / 2; margin: var(--bar) 8px 8px 0; }
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) thead { top: var(--bar); }   /* en-têtes collants : juste sous la barre */
  :root[data-theme="spotify"]:not(:has(input[name="auth[password]"])) #ajaxstatus.sticky { top: var(--bar); }
  :root[data-theme="spotify"] #breadcrumb {
    position: fixed; z-index: 4; left: max(var(--side), calc(50% - 240px)); width: min(480px, calc(100% - var(--side) - 412px));
  }
  :root[data-theme="spotify"] .logout {
    position: fixed; z-index: 4; top: 8px; right: 8px; height: 48px; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 8px; background: none; box-shadow: none;
  }
}
/* fil d'Ariane : la barre de recherche (loupe à gauche) */
:root[data-theme="spotify"] #breadcrumb {
  top: 8px; height: 48px; box-sizing: border-box; margin: 0; padding: 0 20px 0 48px; border-radius: 500px;
  background: var(--raised); color: #fff; font: 400 15px/48px var(--font); overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background-color .15s;
}
:root[data-theme="spotify"] #breadcrumb:hover { background: var(--hover); box-shadow: inset 0 0 0 1px #535353; }
:root[data-theme="spotify"] #breadcrumb::before {
  content: ""; position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; background-color: var(--sub); mask: var(--i-search) center / 24px no-repeat;
}
:root[data-theme="spotify"] #breadcrumb a:is(:link, :visited) { color: var(--sub); }
:root[data-theme="spotify"] #breadcrumb a:is(:link, :visited):hover { color: #fff; }
/* déconnexion : le bouton blanc ; avatar : initiale dans un disque, cerclé de gris */
:root[data-theme="spotify"] .logout #logout {
  order: 2; height: 32px; min-height: 0; padding: 0 16px; border: 0; background: #fff; color: #000; font-weight: 700;
}
:root[data-theme="spotify"] .logout #logout:hover { background: #f0f0f0; color: #000; }
:root[data-theme="spotify"] .logout span[title=Username] {
  order: 3; flex: none; width: 32px; height: 32px; margin: 0 8px; overflow: hidden; border-radius: 50%;
  background: #f573a0; color: #000; font: 700 0/32px var(--font); text-align: center; box-shadow: 0 0 0 8px var(--raised);
}
:root[data-theme="spotify"] .logout span[title=Username]::first-letter { font-size: 15px; text-transform: uppercase; }
/* sélecteur de thème : une pilule sombre, à la largeur du thème choisi (non du plus long), suivie de ses variantes ;
   l'anneau marque la variante active seule */
:root[data-theme="spotify"] #kawaii-switcher { gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-theme="spotify"] #kawaii-switcher.in-bar { top: auto; margin: 0; }
:root[data-theme="spotify"] #kawaii-switcher button.theme {
  height: 32px; padding: 0 12px; border: 0; border-radius: 500px; background-color: var(--raised); font-weight: 700;
}
:root[data-theme="spotify"] #kawaii-switcher button.theme:hover { background-color: var(--hover); }
:root[data-theme="spotify"] #kawaii-switcher button.sw:not([aria-pressed="true"]) { box-shadow: none; }

/* ---------- Bibliothèque (menu) : panneau, puces, pochettes ---------- */
:root[data-theme="spotify"] #menu {
  display: flex; flex-direction: column; box-sizing: border-box; margin: 0; padding: 8px 8px 16px;
  background: var(--panel); border: 0; border-radius: 8px; box-shadow: none;
}
:root[data-theme="spotify"] #menu > * { order: 4; flex-shrink: 0; }   /* (la liste des tables, en overflow: hidden, se laisserait écraser) */
:root[data-theme="spotify"] #menu > h1 { order: 0; }
:root[data-theme="spotify"] #menu > p.links { order: 1; }
:root[data-theme="spotify"] #menu > form:has(#dbs) { order: 2; }
:root[data-theme="spotify"] #menu > form:has(#lang) { order: 9; margin-top: auto; }
:root[data-theme="spotify"] #menu :is(p, #dbs, #logins, #tables) { margin: 0; border: 0; }
:root[data-theme="spotify"] #menu a:hover { background: none; }
/* en-tête : icône de bibliothèque, nom du logiciel, version */
:root[data-theme="spotify"] #menu h1 { display: flex; align-items: center; gap: 12px; height: 56px; margin: 0; padding: 0 8px; border: 0; }
:root[data-theme="spotify"] #menu h1::before { content: ""; flex: none; width: 24px; height: 24px; background-color: var(--sub); mask: var(--i-library) center / 24px no-repeat; }
:root[data-theme="spotify"] #h1 { color: var(--sub); font: 700 16px/1 var(--font); font-style: normal; }
:root[data-theme="spotify"] #menu #h1:hover { color: #fff; text-decoration: none; }
:root[data-theme="spotify"] #h1 img { display: none; }
:root[data-theme="spotify"] #menu .version { color: var(--sub); font: 400 12px/1 var(--font); }
/* actions du menu : puces (la page courante en blanc) */
:root[data-theme="spotify"] #menu p.links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px 12px; }
:root[data-theme="spotify"] :is(#menu p.links, #content .links) a {
  display: inline-block; height: 32px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 0; border-radius: 32px;
  background: rgb(255 255 255 / .07); color: #fff; font: 400 14px/32px var(--font); text-align: center; white-space: nowrap;
}
:root[data-theme="spotify"] :is(#menu p.links, #content .links) a:hover { background: rgb(255 255 255 / .1); color: #fff; text-decoration: none; }
:root[data-theme="spotify"] :is(#menu p.links, #content .links) a.active,
:root[data-theme="spotify"] :is(#menu p.links, #content .links) a.active:hover { background: #fff; color: #000; }
/* base de données : champ de recherche de la bibliothèque (« DB: » lu par les lecteurs d'écran) */
:root[data-theme="spotify"] #menu #dbs { padding: 0 8px 8px; }
:root[data-theme="spotify"] #menu #dbs label { display: block; font-size: 0; }
:root[data-theme="spotify"] #menu #dbs select { width: 100%; height: 36px; border: 0; border-radius: 4px; background-color: var(--raised); font-size: 14px; }
/* tables : pochette (lien des données), nom et type ; la table ouverte en vert, avec l'égaliseur */
:root[data-theme="spotify"] #tables { padding: 0; }
:root[data-theme="spotify"] #tables::before { content: none; }
:root[data-theme="spotify"] #tables li { gap: 12px; margin: 0; padding: 8px; border-radius: 6px; }
:root[data-theme="spotify"] #tables li:hover { background: rgb(255 255 255 / .07); }
:root[data-theme="spotify"] #tables li:has(a.active) { background: var(--hover); box-shadow: none; }
:root[data-theme="spotify"] #tables a.select {
  order: 0; position: relative; width: 48px; height: 48px; margin: 0; border-radius: 4px; opacity: 1;
  background: linear-gradient(135deg, var(--c1, #450af5), var(--c2, #c4efd9));
}
:root[data-theme="spotify"] #tables li:nth-child(5n+2) a.select { --c1: #c2185b; --c2: #ffb199; }
:root[data-theme="spotify"] #tables li:nth-child(5n+3) a.select { --c1: #1e3264; --c2: #509bf5; }
:root[data-theme="spotify"] #tables li:nth-child(5n+4) a.select { --c1: #1f7a62; --c2: #c4efd9; }
:root[data-theme="spotify"] #tables li:nth-child(5n+5) a.select { --c1: #ba5d07; --c2: #ffc864; }
:root[data-theme="spotify"] #tables a.select::before {
  content: ""; position: absolute; inset: 0; background-color: #fff; mask: var(--i-table) center / 22px no-repeat;
}
:root[data-theme="spotify"] #tables li:is(:hover, :focus-within) a.select { box-shadow: inset 0 0 0 48px rgb(0 0 0 / .5); }
:root[data-theme="spotify"] #tables li:is(:hover, :focus-within) a.select::before { mask-image: var(--i-play); mask-size: 24px; }
:root[data-theme="spotify"] #menu #tables a.select:hover { background-color: transparent; }
:root[data-theme="spotify"] #tables :is(a.structure, a.view) { order: 1; min-width: 0; padding: 0; color: #fff; font: 400 16px/1.3 var(--font); }
:root[data-theme="spotify"] #menu #tables :is(a.structure, a.view):hover { color: #fff; text-decoration: underline; }
:root[data-theme="spotify"] #tables a.structure::before { content: none; }
:root[data-theme="spotify"] #tables :is(a.structure, a.view)::after { content: "Table"; display: block; margin-top: 2px; color: var(--sub); font-size: 14px; font-style: normal; }
:root[data-theme="spotify"] #tables a.view::after { content: "View"; }
:root[data-theme="spotify"] #tables li:has(a.active) :is(a.structure, a.view) { color: var(--green); font-weight: 400; }
:root[data-theme="spotify"] #tables li:has(a.active)::after {
  content: ""; order: 3; flex: none; width: 14px; height: 14px; margin-right: 4px;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 3px 60% no-repeat,
              linear-gradient(var(--green), var(--green)) 5.5px 100% / 3px 100% no-repeat,
              linear-gradient(var(--green), var(--green)) 11px 100% / 3px 40% no-repeat;
  animation: spotify-eq 1.1s ease-in-out infinite alternate;
}
@keyframes spotify-eq {
  0% { background-size: 3px 60%, 3px 100%, 3px 40%; }
  33% { background-size: 3px 30%, 3px 55%, 3px 90%; }
  66% { background-size: 3px 95%, 3px 35%, 3px 65%; }
  100% { background-size: 3px 45%, 3px 80%, 3px 25%; }
}
:root[data-theme="spotify"] #menu .message { margin: 4px 8px; padding: 0; border: 0; background: none; color: var(--sub); box-shadow: none; }
/* langue : le bouton à globe du bas de la bibliothèque (« Language: » lu par les lecteurs d'écran) */
:root[data-theme="spotify"] #menu #lang { position: static; margin: 0; padding: 24px 8px 0; }
:root[data-theme="spotify"] #menu #lang label { font-size: 0; }
:root[data-theme="spotify"] #menu #lang select {
  height: 32px; min-height: 0; padding: 0 32px 0 36px; border: 1px solid var(--field-line); border-radius: 500px;
  background: var(--i-globe) 12px center / 16px no-repeat, var(--caret) right 10px center / 16px no-repeat, transparent;
  font-size: 14px; font-weight: 700;
}
:root[data-theme="spotify"] #menu #lang select:hover { border-color: #fff; }

/* ---------- Page : panneau, en-tête de playlist (pochette, grand titre) ---------- */
:root[data-theme="spotify"] #content {
  box-sizing: border-box; min-height: calc(100vh - var(--bar) - 8px); padding: 0 24px 24px; --content-end: 24px; border-radius: 8px;
  /* sous l'en-tête (qui porte sa propre couleur, quelle que soit sa hauteur), un reflet qui s'éteint */
  background: linear-gradient(color-mix(in srgb, var(--hero) 30%, var(--panel)), var(--panel) 560px) var(--panel);
}
:root[data-theme="spotify"] #content > h2 {
  display: flex; align-items: flex-end; gap: 24px; min-height: 192px; margin: 0 -24px 24px; padding: 64px 24px 24px; border-radius: 8px 8px 0 0;
  background: linear-gradient(var(--hero), color-mix(in srgb, var(--hero) 50%, var(--panel)));
  color: #fff; font: 900 clamp(28px, 3.8vw, 64px)/1.05 var(--font-heading); letter-spacing: -.04em; overflow-wrap: anywhere;
}
/* pochette : dégradé de la couleur de l'en-tête, pile de base de données */
:root[data-theme="spotify"] #content > h2::before {
  content: ""; flex: none; width: 192px; height: 192px; border-radius: 4px;
  background: linear-gradient(135deg, var(--hero), var(--hero-pale)); box-shadow: 0 4px 60px rgb(0 0 0 / .5);
  -webkit-mask: none; mask: none;
}
:root[data-theme="spotify"] #content > h2::after {
  content: ""; position: absolute; width: 192px; height: 192px; margin-left: 0;
  background-color: #fff; mask: var(--i-db) center / 88px no-repeat; opacity: .92;
}
:root[data-theme="spotify"] #content > h2 { position: relative; }
:root[data-theme="spotify"] #content > h2::after { left: 24px; bottom: 24px; }
:root[data-theme="spotify"] h2 .doc { margin-left: auto; align-self: flex-start; color: #fff; font-size: 20px; letter-spacing: 0; }
/* barre d'actions sous l'en-tête : les liens de la table en puces */
:root[data-theme="spotify"] #content .links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* ---------- Tableaux : liste de morceaux ---------- */
:root[data-theme="spotify"] table { --table-r: 0px; --table-bw: 0px; background: transparent; box-shadow: none; }
:root[data-theme="spotify"] :is(th, td) { padding: 0 12px; border: 0; height: 40px; line-height: 20px; }
:root[data-theme="spotify"] thead :is(th, td, td.hover) {
  height: 36px; background: var(--panel); color: var(--sub); font-weight: 400; white-space: nowrap; box-shadow: inset 0 -1px var(--line);
}
:root[data-theme="spotify"] thead th a:is(:link, :visited) { color: var(--sub); }
:root[data-theme="spotify"] thead th a:is(:link, :visited):hover { color: #fff; }
:root[data-theme="spotify"] thead :is(th, td) .doc { filter: grayscale(1); opacity: .6; }
/* 📖 de documentation : hors du flux, juste après l'intitulé (dans la marge droite s'il est aligné à droite),
   qui tient ainsi sur une ligne sans élargir la page */
:root[data-theme="spotify"] thead th:has(> .doc) { position: relative; padding-right: 20px; }
:root[data-theme="spotify"] thead th > .doc { position: absolute; top: 50%; translate: 0 -50%; margin-left: 2px; font-size: 11px; line-height: 1; }
:root[data-theme="spotify"] thead th > .doc:hover { opacity: 1; filter: none; text-decoration: none; }
/* première ligne espacée de l'en-tête, comme sous le filet des listes */
:root[data-theme="spotify"] tbody tr:first-child :is(td, th) { border-top: 8px solid transparent; background-clip: padding-box; }
:root[data-theme="spotify"] :is(tbody, tfoot) :is(td, th, td.hover) { background: transparent; color: var(--sub); }
:root[data-theme="spotify"] .odds tbody tr:nth-child(n) { background: transparent; }   /* le zèbre de default.css, posé sur les lignes */
:root[data-theme="spotify"] :is(tbody, tfoot) :is(th, th.hover) { color: #fff; font-weight: 400; }   /* (th.hover : la spécificité de la règle précédente) */
:root[data-theme="spotify"] :is(tbody, tfoot) th a:is(:link, :visited) { color: #fff; }
/* colonne principale (la première qui n'est ni un nombre ni la case) : en blanc, comme le titre d'un morceau */
:root[data-theme="spotify"] tbody td:nth-child(1 of :not(.number, .check, .hover, .datetime)) { color: #fff; }
/* survol : la ligne s'éclaire et passe en blanc ; cochée, plus claire encore */
:root[data-theme="spotify"] tbody tr:hover :is(td, th, td.hover) { background-color: var(--hover); color: #fff; }
:root[data-theme="spotify"].js .checkable .checked :is(td, th, td.hover) { background-color: #5a5a5a; color: #fff; }
:root[data-theme="spotify"].js .checkable .checked a:is(:link, :visited) { color: #fff; }
:root[data-theme="spotify"] tbody tr :is(td, th):first-child { border-radius: 4px 0 0 4px; }
:root[data-theme="spotify"] tbody tr :is(td, th):last-child { border-radius: 0 4px 4px 0; }
:root[data-theme="spotify"] tbody tr:first-child :is(td, th):first-child { border-radius: 0; }
:root[data-theme="spotify"] tbody tr:first-child :is(td, th):last-child { border-radius: 0; }
:root[data-theme="spotify"] tbody tr:hover :is(td, th) a:is(:link, :visited) { color: #fff; }
/* listes de lignes : toute la largeur */
:root[data-theme="spotify"] #content .scrollable > .checkable { width: 100%; }
/* colonne de la case : numéro de ligne, qui devient ▶ au survol (lien « edit » : ouvre la ligne) ; puis la case */
:root[data-theme="spotify"] .checkable tbody { counter-reset: piste; }
:root[data-theme="spotify"] .checkable tbody tr { counter-increment: piste; }
:root[data-theme="spotify"] :is(td, th).check { width: 1%; padding-inline: 12px 4px; text-align: start; white-space: nowrap; }
:root[data-theme="spotify"] td.check:has(a.edit)::before {
  content: counter(piste); display: inline-block; width: 24px; margin-right: 12px; color: var(--sub);
  font-variant-numeric: tabular-nums; text-align: right; vertical-align: middle;
}
:root[data-theme="spotify"] thead td.check::before { content: "#"; display: inline-block; width: 24px; margin-right: 12px; text-align: right; vertical-align: middle; }
:root[data-theme="spotify"] .checkable tr:is(:hover, :focus-within) td.check:has(a.edit)::before { visibility: hidden; }
:root[data-theme="spotify"] td.check a.edit {
  position: absolute; top: 50%; left: 12px; width: 24px; height: 24px; margin-top: -12px; font-size: 0; opacity: 0;
}
:root[data-theme="spotify"] td.check a.edit::before { content: ""; position: absolute; inset: 0; background-color: #fff; mask: var(--i-play) center / 18px no-repeat; }
:root[data-theme="spotify"] .checkable tr:is(:hover, :focus-within) td.check a.edit,
:root[data-theme="spotify"] td.check a.edit:focus-visible { opacity: 1; }
:root[data-theme="spotify"] .checkable tr.checked td.check:has(a.edit)::before { color: var(--green); }
/* menu de colonne (tri, recherche) : surcouche sombre */
:root[data-theme="spotify"] thead th .column { margin: -2px 0 0; padding: 4px; border: 0; border-radius: 4px; background: #282828; box-shadow: 0 16px 24px rgb(0 0 0 / .3), 0 6px 8px rgb(0 0 0 / .2); }
:root[data-theme="spotify"] thead th .column a.text:is(:link, :visited) { padding: 4px 8px; border-radius: 2px; color: #fff; font-weight: 400; }
:root[data-theme="spotify"] thead th .column a.text:is(:link, :visited):is(:hover, :focus-visible) { background: #3e3e3e; color: #fff; text-decoration: none; }

/* ---------- Filtres de la page « Sélectionner » : puces et champs ---------- */
:root[data-theme="spotify"] form#form:not([method]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
:root[data-theme="spotify"] form#form:not([method]) > fieldset { margin: 0; }
:root[data-theme="spotify"] form#form:not([method]) > fieldset:not(:has(> legend a)) { display: flex; align-items: center; gap: 8px; padding: 0 0 0 8px; background: none; }
:root[data-theme="spotify"] form#form:not([method]) > fieldset:not(:has(> legend a)) > legend { float: left; margin: 0; padding: 0; color: var(--sub); font-weight: 400; }
:root[data-theme="spotify"] form#form:not([method]) > fieldset:not(:has(> legend a)) input.size { width: 5.5em; min-width: 0; }
:root[data-theme="spotify"] form#form:not([method]) > fieldset:has(input[type=submit]) > legend {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Cartes ; repliées, des puces ---------- */
:root[data-theme="spotify"] fieldset { margin: 8px 8px 0 0; padding: 8px 16px 14px; border: 0; border-radius: 8px; background: var(--card); box-shadow: none; }
:root[data-theme="spotify"] legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; background: none; border-radius: 0; color: #fff; font-weight: 700; }
:root[data-theme="spotify"] fieldset > legend:not(:has(a)) { padding: 0; }
:root[data-theme="spotify"] legend + * { clear: left; }
:root[data-theme="spotify"] fieldset:has(> legend a):has(> div:not(.hidden)) > legend { padding: 0; background: none; }
:root[data-theme="spotify"] fieldset:has(> legend a):has(> div:not(.hidden)) > legend a,
:root[data-theme="spotify"] fieldset:has(> legend a):has(> div:not(.hidden)) > legend a:is(:link, :visited):hover { color: #fff; font-weight: 700; }
:root[data-theme="spotify"] fieldset:has(> legend a):has(> div:not(.hidden)) > legend a::before { content: none; }
:root[data-theme="spotify"] fieldset:has(> div.hidden):not(:has(> div:not(.hidden))) { margin: 0; padding: 0; background: none; }
:root[data-theme="spotify"] fieldset:has(> div.hidden):not(:has(> div:not(.hidden))) > legend {
  width: auto; margin: 0; border: 0; border-radius: 32px; background: rgb(255 255 255 / .07); box-shadow: none; transition: none;
}
:root[data-theme="spotify"] fieldset:has(> div.hidden):not(:has(> div:not(.hidden))) > legend a { padding: 0 12px; color: #fff; font-weight: 400; line-height: 32px; }
:root[data-theme="spotify"] fieldset:has(> div.hidden):not(:has(> div:not(.hidden))) > legend a::before { content: none; }
:root[data-theme="spotify"] fieldset:has(> div.hidden):not(:has(> div:not(.hidden))) > legend:hover { background: rgb(255 255 255 / .1); transform: none; }
:root[data-theme="spotify"] fieldset:has(> div.hidden):not(:has(> div:not(.hidden))) > legend:hover a,
:root[data-theme="spotify"] fieldset:has(> div.hidden):not(:has(> div:not(.hidden))) > legend:hover a::before { color: #fff; text-decoration: none; }

/* pied collant (actions, pagination) : la barre de lecture, noire, d'un bord à l'autre du panneau, boutons alignés sur les
   tableaux : elle suit ainsi un tableau qui déborde dans la marge (voir --content-end, base.css) */
:root[data-theme="spotify"] .footer { margin-inline: calc(-1 * var(--content-end)); }
:root[data-theme="spotify"] .footer, :root[data-theme="spotify"] .footer > div { background: transparent; }
:root[data-theme="spotify"] .footer > div {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px var(--content-end); background: var(--black);
}
:root[data-theme="spotify"] .footer fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; }
:root[data-theme="spotify"] .footer fieldset > legend { width: auto; margin: 0; color: var(--sub); font-weight: 400; }
:root[data-theme="spotify"] .footer fieldset > div:not(.hidden) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Champs ---------- */
:root[data-theme="spotify"] :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=color]), textarea),
:root[data-theme="spotify"] select {   /* hors du :is(), sinon sa spécificité écraserait la marge du chevron ci-dessous */
  min-height: 32px; padding: 4px 12px; border: 1px solid var(--field-line); border-radius: 4px; background-color: var(--raised);
  color: #fff; font: 400 14px/1.4 var(--font); box-shadow: none;
}
:root[data-theme="spotify"] textarea { font-family: var(--font-mono); }
:root[data-theme="spotify"] :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea, select):hover { border-color: #fff; }
:root[data-theme="spotify"] :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea, select):focus {
  border-color: #fff; box-shadow: inset 0 0 0 1px #fff; outline: none;
}
:root[data-theme="spotify"] :is(input, select, textarea):disabled { opacity: .5; }
:root[data-theme="spotify"] select:not([multiple]) { appearance: none; padding-right: 32px; background: var(--caret) right 10px center / 16px no-repeat, var(--raised); }
:root[data-theme="spotify"] select.jush-autocomplete { padding: 4px; border: 0; background: #282828; box-shadow: 0 16px 24px rgb(0 0 0 / .3); }
:root[data-theme="spotify"] input:is([type=checkbox], [type=radio]) {
  appearance: none; flex: none; width: 16px; height: 16px; box-sizing: border-box; margin: 0 8px 0 0; vertical-align: -3px;
  border: 1px solid #878787; border-radius: 3px; background: transparent; cursor: pointer;
}
:root[data-theme="spotify"] input[type=radio] { border-radius: 50%; }
:root[data-theme="spotify"] input:is([type=checkbox], [type=radio]):hover { border-color: #fff; }
:root[data-theme="spotify"] input[type=checkbox]:checked {
  border-color: var(--green); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.25 3 3L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat, var(--green);
}
:root[data-theme="spotify"] input[type=checkbox]:indeterminate { border-color: var(--green); background: linear-gradient(#000, #000) center / 8px 2px no-repeat, var(--green); }
:root[data-theme="spotify"] input[type=radio]:checked { border: 5px solid var(--green); background: #000; }
:root[data-theme="spotify"] label:has(> input:is([type=checkbox], [type=radio])) + label { margin-inline-start: 12px; }

/* ---------- Boutons : pilules à contour ; action principale verte, qui grossit au survol ---------- */
:root[data-theme="spotify"] :is(input[type=submit], input[type=button], button:not(.icon):not(.link), .button) {
  min-height: 32px; padding: 0 16px; border: 1px solid var(--field-line); border-radius: 500px; background: transparent; color: #fff;
  font: 700 14px/30px var(--font); box-shadow: none; transition: transform .05s;   /* (pas la couleur : elle s'animerait à la pose du thème) */
}
:root[data-theme="spotify"] :is(input[type=submit], input[type=button], button:not(.icon):not(.link)):hover { border-color: #fff; transform: scale(1.04); filter: none; }
:root[data-theme="spotify"] :is(input[type=submit], input[type=button], button:not(.icon):not(.link)):active { transform: scale(1); opacity: .7; box-shadow: none; }
/* (sélecteurs répétés : ils doivent l'emporter sur la règle générale des boutons, plus spécifique) */
:root[data-theme="spotify"] :is(input.default[type=submit], form#form:not([method]) input[type=submit]) {
  padding: 0 24px; border-color: var(--green); background: var(--green); color: #000;
}
:root[data-theme="spotify"] :is(input.default[type=submit], form#form:not([method]) input[type=submit]):hover { border-color: var(--green-hover); background: var(--green-hover); }
:root[data-theme="spotify"] input[type=submit]:is([name*=delete], [name=drop], [name=truncate]) { color: var(--danger-text); }
:root[data-theme="spotify"] input[type=submit]:is([name*=delete], [name=drop], [name=truncate]):hover { border-color: var(--danger-text); }
:root[data-theme="spotify"] :is(input[type=submit], input[type=button]):disabled,
:root[data-theme="spotify"] :is(input[type=submit], input[type=button]):disabled:hover { border-color: #535353; color: #9a9a9a; opacity: 1; transform: none; cursor: not-allowed; }
/* boutons-icônes d'Adminer (ajouter, déplacer, supprimer) : pictogramme gris, blanc au survol */
:root[data-theme="spotify"] button.icon { background-color: var(--sub); border-radius: 4px; }
:root[data-theme="spotify"] button.icon:hover { background-color: #fff; }

/* ---------- Messages : bandeau bleu (comme « Ajouté aux titres likés »), rouge pour les erreurs ---------- */
:root[data-theme="spotify"] :is(.message, .error) { margin: 16px 0; padding: 12px 16px; border: 0; border-radius: 8px; color: #fff; font-weight: 600; box-shadow: 0 16px 24px rgb(0 0 0 / .3); }
:root[data-theme="spotify"] .message { background: var(--toast); }
:root[data-theme="spotify"] .error { background: var(--danger); }
:root[data-theme="spotify"] :is(.message, .error) a:is(:link, :visited) { color: #fff; text-decoration: underline; }
:root[data-theme="spotify"] .error b { background: rgb(0 0 0 / .2); }

/* coloration SQL et bulle d'aide */
:root[data-theme="spotify"] .jush { --keyword-color: var(--green); --attribute-color: #509bf5; --value-color: #b49bc8; }
:root[data-theme="spotify"] [contenteditable].jush { border-radius: 4px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--field-line); }
:root[data-theme="spotify"] [contenteditable].jush:focus { box-shadow: inset 0 0 0 2px #fff; outline: none; }
:root[data-theme="spotify"] #help { padding: 8px 12px; border: 0; border-radius: 4px; background: #282828; color: #fff; box-shadow: 0 16px 24px rgb(0 0 0 / .3); }

/* ---------- Schéma : tables en cartes (interligne de 1,25 : celui dont Adminer tire ses flèches) ---------- */
:root[data-theme="spotify"] #schema { margin-bottom: 32px; }
:root[data-theme="spotify"] #schema .table { padding: 0 8px 4px; border: 0; border-radius: 6px; background: var(--hover); line-height: 1.25; }
:root[data-theme="spotify"] #schema .table > a:first-child { color: #fff; font-weight: 700; }
:root[data-theme="spotify"] #schema .table span:not([class]) { color: #fff; }

/* ---------- Connexion : une playlist dont chaque piste est un champ, « Login » sur le bouton vert ---------- */
:root[data-theme="spotify"]:has(input[name="auth[password]"]) body {
  display: grid; grid-template-columns: min(720px, 100%); justify-content: center; align-content: start;
  min-height: 100vh; box-sizing: border-box; margin: 0; padding: var(--bar) 16px 32px;
}
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content { grid-row: 1; margin: 0 !important; min-height: 0; }
/* en-tête plus court : le formulaire tient dans une fenêtre basse */
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content > h2 { min-height: 0; padding-top: 32px; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content > h2::before { width: 128px; height: 128px; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content > h2::after { width: 128px; height: 128px; mask-size: 60px; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout { width: 100%; margin: 8px 0 0; counter-reset: piste; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout tr { counter-increment: piste; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout :is(th, td) { height: 56px; border-top: 0; background-clip: border-box; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout th { width: 1%; padding: 0 24px 0 16px; color: #fff; font-size: 16px; white-space: nowrap; border-radius: 4px 0 0 4px; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout th::before {
  content: counter(piste); display: inline-block; width: 24px; margin-right: 16px; color: var(--sub); font-size: 14px; text-align: right;
}
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout tr:focus-within th { color: var(--green); }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout tr:focus-within th::before { color: var(--green); }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout tr:focus-within :is(th, td) { background-color: var(--hover); }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout td { padding: 0 16px 0 0; border-radius: 0 4px 4px 0; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout :is(input, select) { width: 100%; height: 40px; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content form > p { display: flex; align-items: center; gap: 24px; margin: 24px 0 0; }
/* bouton de lecture : disque vert, triangle noir, puis « Login » */
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content form > p input[type=submit] {
  height: 56px; padding: 0 32px 0 56px; border-color: var(--green); color: #000; font-size: 16px; line-height: 54px;   /* (Adminer n'y met .default qu'au focus d'un champ) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.6v14.8a.7.7 0 0 0 1.05.6l12.3-7.4a.7.7 0 0 0 0-1.2L8.05 4a.7.7 0 0 0-1.05.6z'/%3E%3C/svg%3E") 22px center / 22px no-repeat, var(--green);
}
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content form > p input[type=submit]:hover { background-color: var(--green-hover); }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #content form > p label { color: var(--sub); cursor: pointer; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #foot { grid-row: 2; position: static; display: block; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #menu { position: static; width: auto; min-width: 0; margin: 0; padding: 0; background: none; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #menu h1 { position: absolute; top: 4px; left: 64px; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #menu h1::before { content: none; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #menu #lang { padding: 24px 0 0; text-align: center; }
:root[data-theme="spotify"]:has(input[name="auth[password]"]) #menuopen { display: none; }

/* ---------- Mobile : barre (bouton du menu, recherche), bibliothèque en volet ---------- */
@media (max-width: 800px) {
  :root[data-theme="spotify"] { --bg-pattern: none; }
  :root[data-theme="spotify"] #content { margin: var(--bar) 8px 8px; margin-inline-start: 8px !important; padding: 0 16px 16px; --content-end: 16px; }
  :root[data-theme="spotify"] #content > h2 { flex-direction: column; align-items: flex-start; min-height: 0; margin: 0 -16px 16px; padding: 24px 16px 16px; gap: 16px; }
  :root[data-theme="spotify"] #content > h2::before { width: 128px; height: 128px; }
  :root[data-theme="spotify"] #content > h2::after { top: 24px; left: 16px; bottom: auto; width: 128px; height: 128px; mask-size: 60px; }
  :root[data-theme="spotify"] td.check:has(a.edit) { position: relative; }   /* Adminer n'y colle plus la case : le ▶ s'y repère */
  :root[data-theme="spotify"] #breadcrumb { left: 64px !important; right: 8px; }
  :root[data-theme="spotify"].js #menuopen { top: 8px; left: 8px; }
  :root[data-theme="spotify"] #menuopen button.icon {
    width: 48px; height: 48px; border-radius: 50%; background: var(--raised);
    -webkit-mask: none; mask: none;
  }
  :root[data-theme="spotify"] #menuopen button.icon::before { content: ""; display: block; width: 24px; height: 24px; margin: auto; background-color: #fff; mask: var(--i-library) center / 24px no-repeat; }
  :root[data-theme="spotify"] #menuopen button.icon:hover { background-color: var(--hover); }
  /* volet : la bibliothèque, sous la barre */
  :root[data-theme="spotify"].js #foot:not(.foot) {
    top: var(--bar); left: 8px; z-index: 5; width: min(320px, calc(100% - 40px));
    /* à la hauteur de l'écran : la liste des tables y défile seule (et le volet entier, s'il ne tient pas) */
    flex-direction: column; max-height: calc(100vh - var(--bar) - 16px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel); border-radius: 8px; box-shadow: 0 16px 24px rgb(0 0 0 / .5), 0 6px 8px rgb(0 0 0 / .3);
  }
  :root[data-theme="spotify"] #menu { position: static; min-width: 0; width: auto; margin: 0; border: 0; box-shadow: none; }
  /* le compte en haut du volet par l'ordre, pas par column-reverse : un volet inversé s'ouvrirait défilé jusqu'en bas */
  :root[data-theme="spotify"].js #foot:not(.foot) > form { order: -1; }
  :root[data-theme="spotify"].js #foot:not(.foot) #menu { flex: 1 1 auto; min-height: 0; }
  :root[data-theme="spotify"].js #foot:not(.foot) #tables { flex: 1 1 auto; min-height: 0; }
  :root[data-theme="spotify"].js #foot .logout {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 8px; padding: 12px 8px 4px; background: none; box-shadow: none;
  }
  :root[data-theme="spotify"]:has(input[name="auth[password]"]) body { padding: var(--bar) 8px 24px; }
  :root[data-theme="spotify"]:has(input[name="auth[password]"]) #foot { position: static; }
  :root[data-theme="spotify"]:has(input[name="auth[password]"]) #menu h1 { left: 16px; }
  :root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout th { padding-inline: 8px 12px; font-size: 14px; }
  :root[data-theme="spotify"]:has(input[name="auth[password]"]) table.layout th::before { width: 16px; margin-right: 8px; }
}