/* ===========================================================================
   EXKAVE — BIBLIOTHÈQUE
   Même ADN que la landing Cave + Planche : graphite chaud, ivoire, laiton,
   grotesque pour la voix, monospace pour la donnée, matières discrètes,
   grandes pochettes, asymétrie tenue.

   MAIS le métier de cette page n'est pas celui de la landing. La landing donne
   envie ; ici on cherche, on compare, on tranche. La donnée physique prime sur
   la mise en scène : c'est elle qui distingue deux objets dont la pochette est
   la même.

   CE QUE CETTE FEUILLE FAIT
     — elle repose entièrement sur les jetons `--ex-*` de exkave-ui-global.css ;
     — elle défait l'emprise de `exkave-mobile-skin.css` sur CETTE page plutôt
       que d'ajouter une couche de spécificité par-dessus ;
     — elle ne touche à aucun identifiant, aucun crochet JS, aucun contrat.

   CE QU'ELLE NE FAIT PAS
     — aucune règle sur la landing ;
     — aucun `* !important` ;
     — aucun composant nouveau qui doublerait un composant existant.
   =========================================================================== */

/* ===========================================================================
   0 · DÉSARMER LA PEAU MOBILE SUR CETTE PAGE
   `exkave-mobile-skin.css` est injecté EN DERNIER par `exkave-shell.js` et
   repeint en `!important` tout `button`, `.action`, `.is-active`,
   `[aria-selected]`, `.card`, `.panel`… avec un dégradé doré et une pastille
   arrondie. Sur une page de comparaison, cela transforme quarante contrôles en
   quarante boutons d'appel à l'action.

   On ne la bat pas règle par règle : on lui retire sa raison d'agir, sous
   `body[data-ex-biblio]` uniquement. Les autres pages ne bougent pas.
   =========================================================================== */
body[data-ex-biblio] :is(.exv2-surface, .exv2-card, .step-card, .panel, .master) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-ex-biblio] :is(.result, .album-card) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ===========================================================================
   1 · LA PAGE
   =========================================================================== */
body[data-ex-biblio] {
  background: var(--ex-page, #0a0908);
  color: var(--ex-encre, #fffdf7);

  /* La Bibliothèque réutilise le contrat global. `!important` neutralise
     uniquement l'ancienne peau mobile qui arrive après cette feuille. */
  --ex-display: var(--font-display);
  --display: var(--font-display);
  font-family: var(--font-display) !important;
}

/* Titre de page : le grotesque de la Cave, sans caisson. */
body[data-ex-biblio] .library-hero,
body[data-ex-biblio] .page-hero {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(26px, 3.2vw, 52px) 0 clamp(18px, 2vw, 30px) !important;
}

/* Le compteur était une pastille dorée de tableau de bord. Il redevient une
   ligne de données : monospace, laiton, aligné sur la ligne de base du titre. */
body[data-ex-biblio] .library-counter,
body[data-ex-biblio] .exkpress-counter,
body[data-ex-biblio] [data-library-counter] {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--ex-laiton, #d8b765) !important;
  font-family: var(--font-mono) !important;
  font-size: .74rem !important;
  letter-spacing: .14em !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   2 · LA RECHERCHE
   Une seule ligne, un filet de laiton, un chevron monospace. Pas de caisson,
   pas de pastille « tape ici » : le champ est déjà l'objet le plus large de
   l'écran, il n'a pas besoin qu'on le désigne.
   =========================================================================== */
body[data-ex-biblio] #search-section {
  /* Le 2026-08-18, le rail de pochettes vient se poser juste dessous : c'est
     LUI qui porte la respiration (34 px). Cumuler la fermeture du panneau et
     la marge du rail donnait 71 px d'écart pour 32 à 40 demandés. */
  padding: 0 !important;
  margin: 0;
  border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13));
}

body[data-ex-biblio] .search-head { margin-bottom: clamp(14px, 1.6vw, 22px); }

body[data-ex-biblio] .search-kicker {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ex-laiton, #d8b765);
  margin-bottom: 8px;
}

body[data-ex-biblio] .search-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.04;
  color: var(--ex-encre, #fffdf7);
}

/* La marque « tape ici » de l'ancienne version : un autocollant sur un champ
   de recherche. Le champ se suffit. */
body[data-ex-biblio] .search-form::before,
body[data-ex-biblio] .search-hint-tag,
body[data-ex-biblio] [data-search-tag] { display: none !important; }

body[data-ex-biblio] .search-form {
  display: flex !important;
  align-items: center;
  gap: 14px;
  background: var(--ex-laque-2, #141210) !important;
  border: 1px solid var(--ex-filet, rgba(216,183,101,.30)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 6px 6px 18px !important;
}

body[data-ex-biblio] .search-form:focus-within {
  border-color: var(--ex-laiton, #d8b765) !important;
}

body[data-ex-biblio] .search-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-laiton, #d8b765);
  /* Plus de texte ici : le glyphe est devenu un tracé. On neutralise donc
     toute taille de police héritée, qui ferait varier la boîte. */
  font-size: 0;
  line-height: 0;
  opacity: .9;
}
/* LE SECOND CERCLE.
   `.search-glass::before` et `::after` existent avec `content: ""` — vides,
   mais dessinés : la peau leur donne un contour arrondi, ce qui produisait un
   anneau à côté du tracé. C'était ça, la « deuxième loupe » : pas un
   caractère en double, un pseudo-élément décoratif que le glyphe d'origine
   masquait à peu près et que le tracé, plus petit, a laissé apparaître. */
body[data-ex-biblio] .search-glass::before,
body[data-ex-biblio] .search-glass::after {
  content: none !important;
  display: none !important;
}

body[data-ex-biblio] .search-glass svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

body[data-ex-biblio] .search-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ex-encre, #fffdf7) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  font-weight: 400 !important;
  padding: 14px 0 !important;
}

body[data-ex-biblio] .search-input::placeholder {
  color: var(--ex-sur-laque-faible, rgba(255,253,247,.34)) !important;
  font-weight: 400;
}

body[data-ex-biblio] .search-submit {
  background-image: var(--ex-lustre), var(--ex-laiton-degrade) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #16120a !important;
  font-family: var(--font-display) !important;
  font-size: .84rem !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  padding: 14px 26px !important;
  box-shadow: none !important;
  cursor: pointer;
}

body[data-ex-biblio] .search-scan-separator {
  flex: 0 0 auto;
  color: var(--ex-laiton, #d8b765);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .02em;
  white-space: nowrap;
}

body[data-ex-biblio] :is(.search-scanner, .field-clear) {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ex-filet-doux, rgba(216,183,101,.15)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ex-sur-laque-doux, rgba(255,253,247,.64)) !important;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
body[data-ex-biblio] :is(.search-scanner, .field-clear):hover {
  border-color: var(--ex-laiton, #d8b765) !important;
  color: var(--ex-laiton, #d8b765) !important;
}
body[data-ex-biblio] .search-scanner svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5;
}
body[data-ex-biblio] #search-scanner.search-scanner {
  border-color: var(--ex-laiton, #d8b765) !important;
  color: var(--ex-laiton, #d8b765) !important;
  background: rgba(216,183,101,.08) !important;
}
body[data-ex-biblio] #search-scanner.search-scanner:hover {
  color: #16120a !important;
  background: var(--ex-laiton, #d8b765) !important;
}

/* Suggestions : une liste, pas un menu flottant arrondi. */
body[data-ex-biblio] .suggestions,
body[data-ex-biblio] .album-suggestions {
  background: var(--ex-laque, #0b0a09) !important;
  border: 1px solid var(--ex-filet, rgba(216,183,101,.30)) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.6) !important;
  padding: 0 !important;
}
body[data-ex-biblio] :is(.suggestions, .album-suggestions) > * {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13));
  padding: 12px 16px !important;
}
body[data-ex-biblio] :is(.suggestions, .album-suggestions) > *:last-child { border-bottom: 0; }

/* Exemples et guide : de la donnée, pas des boutons. */
body[data-ex-biblio] .examples {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ex-cendre, #8b8478);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
body[data-ex-biblio] .example {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ex-filet, rgba(216,183,101,.30)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ex-laiton, #d8b765) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  padding: 2px 0 !important;
  cursor: pointer;
}
body[data-ex-biblio] .example:hover { color: var(--ex-laiton-clair, #f4e6b8) !important; }

body[data-ex-biblio] .search-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 34px);
  margin-top: clamp(18px, 2vw, 28px);
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13));
}
body[data-ex-biblio] .guide-step {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block;
}
body[data-ex-biblio] .guide-step strong {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ex-laiton, #d8b765);
  font-weight: 400;
  margin-bottom: 7px;
}
body[data-ex-biblio] .guide-step span {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ex-encre-douce, rgba(255,253,247,.70));
}

/* ===========================================================================
   3 · LA SCÈNE ARTISTE
   Le décor était une photo de disquaire achetée sur banque d'images : elle ne
   dit rien du disque qu'on cherche et elle écrase le nom. On garde le nom, la
   route, et rien d'autre.
   =========================================================================== */
body[data-ex-biblio] #artist-stage:not([data-has-artist]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(18px, 2.4vw, 40px);
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(22px, 2.6vw, 38px) 0 clamp(16px, 1.8vw, 26px) !important;
  margin-bottom: clamp(22px, 2.6vw, 40px);
  min-height: 0 !important;
}
body[data-ex-biblio] #artist-stage::before,
body[data-ex-biblio] #artist-stage::after { display: none !important; }
body[data-ex-biblio] .artist-stage-visual { display: none !important; }

body[data-ex-biblio] .artist-stage-kicker {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ex-laiton, #d8b765);
  margin-bottom: 10px;
}
body[data-ex-biblio] #artist-stage-name {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 4.2rem) !important;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .96;
  margin: 0 0 10px;
  color: var(--ex-encre, #fffdf7);
}
body[data-ex-biblio] .artist-stage-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ex-cendre, #8b8478);
  margin: 0;
}

/* La découverte épouse sa rangée de pochettes : aucune réserve vide dessous. */
body[data-ex-biblio] #artist-stage:not([data-has-artist]) #artist-discovery {
  grid-column: 1 / -1;
  min-height: 0 !important;
  grid-template-rows: auto !important;
}

body[data-ex-biblio] .artist-discovery-editorial {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  min-height: clamp(300px, 31vw, 410px);
  margin-top: clamp(24px, 3vw, 44px);
  overflow: hidden;
  border: 1px solid var(--ex-trait, rgba(255,253,247,.13));
  border-radius: 22px;
  background: #0a0a09;
  box-shadow: 0 24px 56px rgba(0,0,0,.32);
}

body[data-ex-biblio] .artist-discovery-editorial-copy {
  align-self: center;
  padding: clamp(28px, 4.2vw, 64px);
}

body[data-ex-biblio] .artist-discovery-editorial-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--ex-laiton, #d8b765);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body[data-ex-biblio] .artist-discovery-editorial h3 {
  max-width: 13ch;
  margin: 0 0 18px;
  color: var(--ex-encre, #fffdf7);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 4rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}

body[data-ex-biblio] .artist-discovery-editorial p {
  max-width: 50ch;
  margin: 0;
  color: var(--ex-encre-douce, rgba(255,253,247,.70));
  font-size: clamp(.94rem, 1.25vw, 1.08rem);
  line-height: 1.62;
}

body[data-ex-biblio] .artist-discovery-editorial-visual {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body[data-ex-biblio] .artist-discovery-editorial-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0a0a09 0, rgba(10,10,9,.24) 28%, transparent 60%);
  pointer-events: none;
}

body[data-ex-biblio] .artist-discovery-editorial-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 31vw, 410px);
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(1.08) brightness(.82);
}

body[data-ex-biblio] #artist-stage[data-has-artist] .artist-discovery-editorial {
  display: none !important;
}

@media (max-width: 760px) {
  body[data-ex-biblio] .artist-discovery-editorial {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-ex-biblio] .artist-discovery-editorial-copy {
    padding: 26px 22px;
  }

  body[data-ex-biblio] .artist-discovery-editorial h3 {
    max-width: 15ch;
  }

  body[data-ex-biblio] .artist-discovery-editorial-visual,
  body[data-ex-biblio] .artist-discovery-editorial-visual img {
    min-height: 220px;
  }

  body[data-ex-biblio] .artist-discovery-editorial-visual::after {
    background: linear-gradient(180deg, #0a0a09 0, rgba(10,10,9,.15) 34%, transparent 68%);
  }
}

/* La route Artiste → Albums → Pressages : un fil, pas des pastilles. */
body[data-ex-biblio] .artist-stage-route {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
  white-space: nowrap;
}
body[data-ex-biblio] .artist-stage-route > * {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body[data-ex-biblio] .artist-stage-route b {
  font-weight: 400;
  color: var(--ex-laiton, #d8b765);
}

/* ===========================================================================
   4 · LES ALBUMS
   Grande pochette, titre, artiste. Le nombre de pressages documentés vient
   après, en monospace : c'est une donnée, pas un argument.
   =========================================================================== */
body[data-ex-biblio] .panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 0 12px !important;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13));
}
body[data-ex-biblio] .panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ex-encre, #fffdf7);
}
body[data-ex-biblio] .panel-meta {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ex-cendre, #8b8478);
  font-variant-numeric: tabular-nums;
}

body[data-ex-biblio] .album-controls { margin-bottom: clamp(14px, 1.6vw, 22px); }
body[data-ex-biblio] .panel-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  background: var(--ex-laque-2, #141210) !important;
  border: 1px solid var(--ex-filet-doux, rgba(216,183,101,.15)) !important;
  border-radius: 0 !important;
  padding: 4px 4px 4px 14px !important;
  box-shadow: none !important;
}
body[data-ex-biblio] .panel-filter input,
body[data-ex-biblio] .panel-filter select {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ex-encre, #fffdf7) !important;
  font-family: var(--font-mono) !important;
  font-size: .78rem !important;
  letter-spacing: .06em !important;
  padding: 11px 8px !important;
}
body[data-ex-biblio] .panel-filter input { flex: 1; min-width: 0; }
body[data-ex-biblio] .panel-filter select { border-left: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important; }

/* Le rail : grandes pochettes, rythme régulier, navigation discrète. */
body[data-ex-biblio] .album-rail-shell { position: relative; }
body[data-ex-biblio] #results.album-rail {
  display: grid !important;
  grid-auto-flow: column;
  /* LARGEUR FIXE, pas `1fr`.
     `minmax(184px, 1fr)` paraît raisonnable et ne l'est pas : dans un rail qui
     défile, le `1fr` se partage la largeur du CONTENEUR. Avec vingt albums les
     tuiles font 184 px ; avec UN SEUL, il prend les 1 400 px et la pochette
     s'étire en bandeau. Mesuré sur « Pink Floyd », un album : une image de
     1 400 x 180. Une piste fixe ne dépend pas du nombre d'éléments. */
  grid-auto-columns: clamp(190px, 13vw, 210px);
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px 0 clamp(10px, 1.2vw, 18px) !important;
  background: transparent !important;
}
body[data-ex-biblio] #results.album-rail::-webkit-scrollbar { display: none; }

body[data-ex-biblio] #results .result {
  scroll-snap-align: start;
  display: block !important;
  padding: 0 !important;
  text-align: left;
  cursor: pointer;
}
body[data-ex-biblio] #results .result :is(img, .album-cover, .result-cover) {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
body[data-ex-biblio] #results .result:hover :is(img, .album-cover, .result-cover) {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px rgba(0,0,0,.62);
}
body[data-ex-biblio] #results .result:focus-visible {
  outline: 2px solid var(--ex-laiton, #d8b765);
  outline-offset: 5px;
}

/* Les libellés sous la pochette : titre en grotesque, le reste en monospace. */
body[data-ex-biblio] #results .result :is(h3, h4, strong, .result-title) {
  display: block;
  margin: 12px 0 4px;
  padding-top: 9px;
  border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13));
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--ex-encre, #fffdf7);
}
body[data-ex-biblio] #results .result :is(small, .result-meta, .album-meta, span) {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ex-cendre, #8b8478);
  font-variant-numeric: tabular-nums;
}

body[data-ex-biblio] .rail-nav {
  background: var(--ex-laque, #0b0a09) !important;
  background-image: none !important;
  border: 1px solid var(--ex-filet, rgba(216,183,101,.30)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ex-laiton, #d8b765) !important;
  width: 34px; height: 46px;
}
body[data-ex-biblio] .rail-nav:hover:not(:disabled) {
  background: var(--ex-laiton, #d8b765) !important;
  color: #16120a !important;
}
body[data-ex-biblio] .album-rail-hint {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
  margin: 0 0 10px;
}

/* --- 1 bis · l'en-tête réel de la page -----------------------------------
   Relevé sur le rendu, pas deviné : `section.hero` porte le caisson arrondi de
   30 px, `.base-lockup > h1.base-title` le titre, et `.stats` la pastille
   dorée à 999 px qui contient les compteurs. Trois noms que je n'aurais pas
   trouvés en lisant la feuille — d'où la mesure d'abord. */
body[data-ex-biblio] .hero {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  /* Resserre le 2026-08-18 : le caisson d'entree faisait presque 300 px de
     noir pour un titre, un compteur et un champ. Le rail de pochettes prend
     la place que ce vide occupait. */
  padding: clamp(12px, 1.5vw, 20px) 0 clamp(12px, 1.4vw, 18px) !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
body[data-ex-biblio] .hero::before,
body[data-ex-biblio] .hero::after { display: none !important; }

body[data-ex-biblio] .base-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
  color: var(--ex-encre, #fffdf7);
}

/* Les compteurs : une ligne de données, pas une médaille. */
body[data-ex-biblio] .exb-stats {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2.4vw, 36px);
}
body[data-ex-biblio] .exb-stat {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
body[data-ex-biblio] .exb-stat strong {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ex-laiton, #d8b765);
  font-variant-numeric: tabular-nums;
}
body[data-ex-biblio] .exb-stat span {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ex-cendre, #8b8478);
}

/* Le bandeau du guide gardait un fond de caisson : il n'en a plus besoin. */
body[data-ex-biblio] .search-guide {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* La pastille numérotée « 1 » des `step-card` : un tutoriel collé sur une
   page qu'on consulte cent fois. Le kicker dit déjà où l'on est. */
body[data-ex-biblio] .step-card::before,
body[data-ex-biblio] .step-card::after { display: none !important; }

/* ===========================================================================
   5 · LA LISTE DES PRESSAGES
   C'est ici que la page gagne ou perd sa raison d'être.

   L'ancienne composition alignait des cartes de 300 px de pochette. Or six
   pressages d'un même album portent SIX FOIS LA MÊME POCHETTE : on répétait
   donc l'information non discriminante en grand, et on reléguait en petit la
   seule qui distingue les objets — pays, année, label, catalogue, code prix,
   gravure. On voyait trois cartes à l'écran, et rien à comparer.

   Ici la pochette redevient un repère d'identification à 140 px, la donnée
   physique occupe la largeur, et les lignes s'empilent : on compare enfin.
   La grande pochette reste entière ailleurs — sur l'album choisi et sur la
   fiche détaillée, où l'objet doit rester spectaculaire.
   =========================================================================== */
@media (min-width: 901px) {
  /* Le conteneur réel est `.pressing-grid` — quatre colonnes de 318 px —, pas
     `.pressing-rail-content` qui l'enveloppe. Mesuré avant d'écrire : la
     pochette y faisait 298 x 253 px.

     `.workspace` est ajouté au sélecteur pour une raison précise, pas par
     réflexe : `exkave-library-v21.css` porte
     `body.library-page .workspace[data-desktop-layout="catalog-flow"] .pressing`
     — quatre classes, une pseudo-classe. Sans `.workspace` on restait en
     dessous, et son `grid-template-columns: minmax(0,1fr)` gagnait : mes
     colonnes 2, 3 et 4 devenaient des colonnes IMPLICITES et la première,
     seule explicite en `1fr`, avalait 688 px. D'où la ligne poussée à droite.
     À spécificité égale, la feuille chargée en dernier tranche — sans
     `!important`. Les règles de carte de v21 deviennent mortes au-dessus de
     900 px : à retirer quand la refonte sera posée. */
  body[data-ex-biblio] .pressing-rail-content { display: block !important; overflow: visible !important; }
  body[data-ex-biblio] .workspace .pressing-grid {
    display: block;
    grid-template-columns: none;
    counter-reset: exb-pressage;
    overflow: visible;
    border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13));
  }
  /* Plus de rail horizontal à faire défiler : ses deux flèches ne commandent
     plus rien. Celles du rail d'albums restent, elles servent encore. */
  body[data-ex-biblio] .pressing-rail-nav { display: none !important; }
  body[data-ex-biblio] .pressing-rail-shell {
    display: block !important;
    padding: 0 !important;
  }

  body[data-ex-biblio] .workspace .pressing-grid > .pressing {
    counter-increment: exb-pressage;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    /* v21 laissait `grid-template-rows: auto minmax(0,1fr) auto` : la rangée
       du milieu absorbait la hauteur restante et ajoutait 70 px de vide sous
       les gravures. Deux rangées suffisent — la donnée, puis les fanions. */
    grid-template-rows: auto auto;
    align-items: start;
    /* Écart de COLONNES seulement : la seconde rangée est vide sur la plupart
       des pressages, et un `gap` symétrique lui réservait 26 px de haut. */
    column-gap: clamp(16px, 1.8vw, 30px);
    row-gap: 0;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: clamp(16px, 1.8vw, 26px) 4px;
    margin: 0;
    border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13));
    text-align: left;
    cursor: pointer;
    transition: background .25s;
  }
  body[data-ex-biblio] .workspace .pressing-grid > .pressing:hover,
  body[data-ex-biblio] .workspace .pressing-grid > .pressing.selected {
    background: rgba(216, 183, 101, .045);
  }
  body[data-ex-biblio] .workspace .pressing-grid > .pressing:focus-visible {
    outline: 2px solid var(--ex-laiton, #d8b765);
    outline-offset: -2px;
  }

  /* Le numéro d'ordre : un repère de comparaison, pas une décoration. Il vient
     d'un compteur CSS — aucun champ inventé, aucune donnée ajoutée. */
  body[data-ex-biblio] .workspace .pressing-grid > .pressing::before {
    content: counter(exb-pressage, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
    font-variant-numeric: tabular-nums;
    padding-top: 3px;
    grid-column: 1;
    grid-row: 1;
  }
  body[data-ex-biblio] .workspace .pressing-grid > .pressing:hover::before {
    color: var(--ex-laiton, #d8b765);
  }

  /* La pochette : 140 px, à plat, sans halo. Repère, pas affiche. */
  body[data-ex-biblio] .workspace .pressing-grid > .pressing .pressing-cover {
    display: none;
    grid-column: 2;
    grid-row: 1;
    width: 140px;
    max-width: 140px;
    height: 140px;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
    margin: 0 !important;
    overflow: hidden;
    position: relative;
  }
  body[data-ex-biblio] .workspace .pressing-grid > .pressing .pressing-cover img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important;
  }
  /* La mention « illustration de l'album, pas une photo de ce pressage » est
     une honnêteté du produit : elle rétrécit, elle ne disparaît pas. */
  body[data-ex-biblio] .workspace .pressing-grid > .pressing .pressing-cover-temp-badge {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(11, 10, 9, .86);
    border-radius: 0 !important;
    padding: 4px 6px !important;
    font-family: var(--font-mono);
    font-size: .46rem !important;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-sur-laque-doux, rgba(255,253,247,.64));
  }
  body[data-ex-biblio] .workspace .pressing-grid > .pressing .pressing-cover-temp-badge small { display: block; }

  /* La donnée prend la largeur. */
  body[data-ex-biblio] .pressing-card-data {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
    padding: 0;
  }

  body[data-ex-biblio] .pressing-facts-grid {
    display: grid !important;
    /* Deux paires et une ligne pleine : Pays | Année, Label, Catalogue | Code
       prix. Les colonnes sont FIXES pour que deux pressages voisins alignent
       leurs valeurs — c'est ce qui rend la comparaison lisible d'un coup
       d'œil. Bornées à 620 px : au-delà, l'œil ne relie plus l'intitulé à sa
       valeur. */
    grid-template-columns: minmax(0, 260px) minmax(0, 240px);
    max-width: 620px;
    gap: 6px clamp(14px, 1.6vw, 26px);
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
  }
  body[data-ex-biblio] .pressing-fact {
    display: block !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] .pressing-fact small {
    display: block;
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
    margin-bottom: 4px;
  }
  body[data-ex-biblio] .pressing-fact strong {
    display: block;
    font-family: var(--font-mono);
    font-size: .84rem;
    font-weight: 400;
    letter-spacing: .03em;
    color: var(--ex-encre, #fffdf7);
    font-variant-numeric: tabular-nums;
  }
  /* Pays et année sont les deux premières décisions d'un chineur : elles
     passent en laiton, le reste reste ivoire. */
  body[data-ex-biblio] .pressing-fact:nth-child(1) strong,
  body[data-ex-biblio] .pressing-fact:nth-child(2) strong {
    color: var(--ex-laiton, #d8b765);
    font-size: .92rem;
  }

  /* Les gravures : valeurs humaines exactes, en monospace, sur un filet de
     laiton. On les montre en entier — c'est la donnée la plus discriminante
     de la liste, et la seule que deux pressages ne partagent jamais. */
  body[data-ex-biblio] .pressing-runout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    max-width: 700px;
    gap: 4px clamp(16px, 2vw, 32px);
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--ex-filet-doux, rgba(216,183,101,.15)) !important;
    border-radius: 0 !important;
    padding: 12px 0 0 !important;
    margin: 0 !important;
  }
  body[data-ex-biblio] .pressing-runout-grid > span {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] .pressing-runout-grid small {
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
  }
  body[data-ex-biblio] .pressing-runout-grid strong {
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.5;
    color: var(--ex-encre-douce, rgba(255,253,247,.70));
    overflow-wrap: anywhere;
  }

  /* L'appel de la ligne. C'est bien la LIGNE qui est cliquable
     (`role="button"`, `tabindex="0"`) : ce libellé nomme son action, il n'en
     ajoute pas une seconde. D'où un pseudo-élément et non un bouton, qui
     doublerait la cible au clavier. */
  /* L'appel de la ligne, sous la donnée et aligné sur elle.
     Il était à l'extrême droite, gris à 34 % d'opacité, séparé de la donnée
     par 500 px de fond nu : il avait l'air désactivé. Il revient contre le
     texte qu'il concerne, en laiton, avec un filet — un petit appel, pas un
     gros bouton qui avalerait la ligne.

     Ce reste un pseudo-élément : c'est la LIGNE qui porte `role="button"` et
     `tabindex="0"`. En faire un vrai bouton ajouterait une seconde cible au
     clavier pour la même action. La cible tactile, elle, est la ligne entière
     — 1308 x 237 px, très au-dessus des 44 px recommandés. Et la tabulation
     se voit : au focus, l'appel se remplit. */
  body[data-ex-biblio] .workspace .pressing-grid > .pressing::after {
    content: attr(data-exb-action) " →";
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    margin-top: 16px;
    padding: 8px 16px;
    border: 1px solid var(--ex-filet, rgba(216,183,101,.30));
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ex-laiton, #d8b765);
    white-space: nowrap;
    transition: background .25s, color .25s, border-color .25s;
  }
  body[data-ex-biblio] .workspace .pressing-grid > .pressing:hover::after,
  body[data-ex-biblio] .workspace .pressing-grid > .pressing:focus-visible::after {
    background: var(--ex-laiton, #d8b765);
    border-color: var(--ex-laiton, #d8b765);
    color: #16120a;
  }

  body[data-ex-biblio] .pressing-card-flags {
    grid-column: 3;
    grid-row: 2;
    display: flex; gap: 8px; align-items: center;
    margin: 10px 0 0;
  }
}

/* ===========================================================================
   6 · LA FICHE D'UN PRESSAGE — COMPOSITION DE BUREAU
   Le DOM est celui du gabarit `mobile-pressing-sheet`, et il ne bouge pas :
   `useMobilePressingSheet` ne regarde pas la largeur, c'est le même balisage
   partout. Il portait déjà deux colonnes à 1440 (599 / 733) — ce n'était donc
   pas une feuille mobile étirée, contrairement à ce que j'avais dit trop vite.
   Le défaut était intérieur : douze tuiles arrondies pour douze faits, des
   caissons partout, et l'objet physique à 349 px quand il devrait dominer.

   Ici : la pochette prend 480 px, l'identité tient sans défiler, les preuves
   et les gravures passent en pleine largeur. Aucun champ retiré, aucune
   fonction masquée — seule la composition change.
   =========================================================================== */
@media (min-width: 1024px) {

  /* --- le cadre --------------------------------------------------------- */
  body[data-ex-biblio] .variant-overlay {
    padding: clamp(14px, 2vw, 28px) !important;
  }
  body[data-ex-biblio] .variant-backdrop {
    background: rgba(2, 2, 2, .82) !important;
    backdrop-filter: blur(12px) saturate(.68) !important;
  }
  body[data-ex-biblio] .variant-dialog {
    width: min(1440px, calc(100vw - clamp(28px, 4vw, 56px))) !important;
    max-width: none !important;
    max-height: calc(100dvh - clamp(28px, 4vw, 56px)) !important;
    border: 1px solid rgba(216, 183, 101, .46) !important;
    border-radius: 18px !important;
    box-shadow:
      0 34px 110px rgba(0, 0, 0, .86),
      0 0 0 1px rgba(255, 255, 255, .025) inset,
      0 0 54px rgba(216, 183, 101, .08) !important;
    background: var(--ex-page, #0a0908) !important;
  }
  /* La fermeture reste visible pendant tout le défilement de la fiche. */
  body[data-ex-biblio] .variant-close {
    position: sticky !important;
    float: right !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 100 !important;
    margin: 14px 14px -62px 0 !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(240, 213, 139, .76) !important;
    border-radius: 50% !important;
    color: #17120a !important;
    background: linear-gradient(145deg, #f2dc9a, #c99a37) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .62), 0 0 0 4px rgba(5, 5, 5, .48) !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }
  body[data-ex-biblio] .variant-close:hover {
    background: linear-gradient(145deg, #fff0bc, #d8ab4b) !important;
    transform: scale(1.04);
  }

  body[data-ex-biblio] .mobile-pressing-sheet {
    width: min(1680px, calc(100% - clamp(30px, 4vw, 72px))) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: clamp(26px, 3vw, 48px) 0 clamp(40px, 5vw, 80px) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Les pavés étaient des cartes empilées. Ils deviennent des bandes séparées
     par un filet — la même grammaire que la landing. */
  body[data-ex-biblio] :is(.mobile-pressing-overview-pave, .mobile-pressing-pave) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] .mobile-pressing-sections {
    display: block !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] .mobile-pressing-sections > .mobile-pressing-pave {
    box-sizing: border-box;
    padding: clamp(28px, 3.4vw, 56px) clamp(24px, 2.8vw, 44px) !important;
    border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
  }

  /* --- 6.1 · l'objet physique, à gauche, en grand ------------------------ */
  body[data-ex-biblio] .mobile-pressing-overview-pave {
    display: grid !important;
    grid-template-columns: 480px minmax(0, 1fr) !important;
    align-items: start;
    gap: clamp(32px, 4vw, 72px) !important;
    padding-bottom: clamp(28px, 3.4vw, 52px) !important;
  }
  body[data-ex-biblio] .mobile-pressing-hero {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  /* Le logo Exkave posé dans la fiche faisait doublon avec celui du menu. */
  body[data-ex-biblio] .mobile-pressing-logo { display: none !important; }

  body[data-ex-biblio] .mobile-pressing-physical {
    width: 480px !important;
    height: 480px !important;
    position: relative;
  }
  body[data-ex-biblio] .mobile-pressing-sleeve,
  body[data-ex-biblio] .mobile-pressing-vinyl {
    width: 480px !important;
    height: 480px !important;
    border-radius: 0 !important;
  }
  body[data-ex-biblio] .mobile-pressing-photo-caption {
    display: block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* --- 6.2 · l'identité, à droite, sans défilement ----------------------- */
  body[data-ex-biblio] .mobile-pressing-identity {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  body[data-ex-biblio] .mobile-pressing-kicker {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ex-laiton, #d8b765);
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 12px;
  }
  body[data-ex-biblio] .mobile-pressing-identity > h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.6vw, 3.4rem) !important;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .98;
    margin: 0 0 8px !important;
    color: var(--ex-encre, #fffdf7);
  }
  body[data-ex-biblio] .mobile-pressing-artist {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    color: var(--ex-encre-douce, rgba(255,253,247,.70)) !important;
    cursor: pointer;
  }
  body[data-ex-biblio] .variant-artist.mobile-pressing-artist:hover,
  body[data-ex-biblio] .variant-artist.mobile-pressing-artist:focus-visible,
  body[data-ex-biblio] .variant-artist.mobile-pressing-artist:active {
    color: var(--ex-laiton, #d8b765) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  /* Les quatre axes canoniques : une ligne de statut, pas quatre cartes. */
  body[data-ex-biblio] .mobile-pressing-status-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: clamp(20px, 2.2vw, 30px) 0 !important;
    border-top: 1px solid var(--ex-filet, rgba(216,183,101,.30));
    border-bottom: 1px solid var(--ex-filet, rgba(216,183,101,.30));
  }
  body[data-ex-biblio] .mobile-status-axis {
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    margin: 0 !important;
  }
  body[data-ex-biblio] .mobile-status-axis:first-child { border-left: 0 !important; padding-left: 0 !important; }

  /* --- 6.3 · les faits : une table typographique, pas douze tuiles -------
     Douze faits en douze pastilles arrondies, c'est un tableau de bord. Les
     mêmes douze en trois colonnes réglées par un filet, c'est une fiche
     d'objet. Aucun fait n'est retiré : les douze restent, y compris ceux qui
     disent « non renseigné » — un trou annoncé vaut mieux qu'un trou caché. */
  body[data-ex-biblio] .mobile-metadata-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 clamp(18px, 2vw, 26px) !important;
    background: none !important;
    border: 0 !important;
  }
  body[data-ex-biblio] .mobile-essential-fact {
    display: block !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 11px 20px 11px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  body[data-ex-biblio] .mobile-essential-fact > :first-child {
    display: block;
    font-family: var(--font-mono) !important;
    font-size: .56rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34)) !important;
    margin-bottom: 5px !important;
  }
  body[data-ex-biblio] .mobile-essential-fact > :last-child {
    display: block;
    font-family: var(--font-mono) !important;
    font-size: .84rem !important;
    font-weight: 400 !important;
    letter-spacing: .03em !important;
    line-height: 1.4;
    color: var(--ex-encre, #fffdf7) !important;
    font-variant-numeric: tabular-nums;
  }
  /* Le numéro Exkpress est l'identifiant du produit : il ne se range pas
     parmi les autres, il signe la fiche. */
  body[data-ex-biblio] .mobile-other-metadata {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--ex-laiton, #d8b765);
  }

  /* --- 6.4 · les actions ------------------------------------------------- */
  body[data-ex-biblio] .mobile-pressing-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px !important;
    margin: clamp(18px, 2vw, 26px) 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  /* Le bouton principal prenait toute la largeur de la colonne : une barre
     dorée de 830 px pour une action ordinaire. Il reprend sa taille. */
  body[data-ex-biblio] .variant-collection-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: center;
    background-image: var(--ex-lustre), var(--ex-laiton-degrade) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: #16120a !important;
    font-family: var(--font-display) !important;
    font-size: .88rem !important;
    font-weight: 400 !important;
    padding: 13px 26px !important;
  }
  body[data-ex-biblio] .mobile-secondary-actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    background: none !important; border: 0 !important; padding: 0 !important;
  }
  body[data-ex-biblio] .mobile-secondary-actions > * {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ex-filet, rgba(216,183,101,.30)) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: var(--ex-laiton, #d8b765) !important;
    font-family: var(--font-mono) !important;
    font-size: .64rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    padding: 12px 18px !important;
  }
  body[data-ex-biblio] .mobile-secondary-actions > *:hover {
    background: var(--ex-laiton, #d8b765) !important;
    color: #16120a !important;
  }

  body[data-ex-biblio] #variant-comment-form {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    grid-column: 1 / -1;
  }
  body[data-ex-biblio] .variant-community-body {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  /* --- 6.5 · titres de section ------------------------------------------ */
  body[data-ex-biblio] .mobile-section-kicker {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ex-laiton, #d8b765);
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 10px;
  }
  body[data-ex-biblio] .mobile-pressing-pave h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.9rem) !important;
    font-weight: 400;
    letter-spacing: -.025em;
    margin: 0 0 12px !important;
    color: var(--ex-encre, #fffdf7);
  }
  body[data-ex-biblio] .mobile-section-intro {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ex-encre-douce, rgba(255,253,247,.70));
    max-width: 62ch;
    margin: 0 0 20px !important;
  }

  /* --- 6.6 · les preuves, en pleine largeur ------------------------------ */
  body[data-ex-biblio] .mobile-proof-pave {
    display: grid !important;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr) !important;
    gap: clamp(30px, 4vw, 64px) !important;
    align-items: start;
  }
  body[data-ex-biblio] :is(.mobile-proof-explanation, .mobile-proof-gallery) {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] .mobile-proof-gallery {
    /* La galerie contient elle-même plusieurs grilles (photos disponibles,
       emplacements attendus, actions). En faire une grille parente enfermait
       chacune de ces sections dans une seule colonne de 150 px : les preuves
       manquantes formaient alors une tour verticale de plus de 2 000 px. */
    display: block !important;
    min-width: 0;
  }
  body[data-ex-biblio] .mobile-proof-gallery > :is(
    .variant-media.mobile-gallery-shell,
    .mobile-gallery-missing,
    .mobile-gallery-missing-actions,
    .mobile-data-message
  ) {
    width: 100%;
    min-width: 0;
  }
  body[data-ex-biblio] :is(.media-slot, .mobile-proof-tile) {
    background: var(--ex-laque-2, #141210) !important;
    border: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
  }
  body[data-ex-biblio] :is(.media-slot, .mobile-proof-tile) img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important;
  }
  body[data-ex-biblio] .media-empty {
    display: flex; align-items: center; justify-content: center;
    /* La géométrie est réglée à la source, dans la feuille de la page : plus
       rien à forcer ici. */
    height: 100%;
    /* Un emplacement attendu et vide se dit : hachure discrète, pas de couleur
       d'alerte. Ce n'est pas une erreur, c'est du travail qui reste. */
    background: repeating-linear-gradient(135deg,
      rgba(255,253,247,.028) 0 6px, transparent 6px 12px) !important;
    border: 0 !important;
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
  }
  body[data-ex-biblio] .media-slot-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(11,10,9,.86);
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: .52rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-sur-laque-doux, rgba(255,253,247,.64));
  }

  /* --- 6.7 · les gravures, en pleine largeur ---------------------------- */
  body[data-ex-biblio] .physical-identifiers-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) !important;
    gap: clamp(28px, 3.4vw, 60px) !important;
    align-items: start;
  }
  body[data-ex-biblio] :is(.physical-identifier-codes, .physical-runout-list) {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] .physical-runout-list { display: grid !important; gap: 0 !important; }
  body[data-ex-biblio] .physical-runout-row {
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--ex-filet, rgba(216,183,101,.30)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(16px, 1.8vw, 24px) 0 !important;
    margin: 0 !important;
  }
  /* La gravure est la pièce la plus précieuse de la fiche : elle se lit en
     grand, caractère par caractère, exactement comme elle a été relevée à la
     main. Rien n'y est normalisé, corrigé ni complété. */
  body[data-ex-biblio] .physical-runout-row :is(strong, .runout-value, code) {
    font-family: var(--font-mono) !important;
    font-size: clamp(1rem, 1.4vw, 1.32rem) !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    line-height: 1.45;
    color: var(--ex-encre, #fffdf7) !important;
    overflow-wrap: anywhere;
  }
  body[data-ex-biblio] .mobile-runout-note {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
    margin: 0 0 18px !important;
  }

  /* --- 6.8 · la communauté ---------------------------------------------- */
  body[data-ex-biblio] .mobile-community-actionbar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    background: none !important;
    border: 0 !important;
    padding: 0 0 clamp(18px, 2vw, 26px) !important;
    margin: 0 0 clamp(18px, 2vw, 26px) !important;
    border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
  }
  body[data-ex-biblio] .mobile-community-action {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ex-filet-doux, rgba(216,183,101,.15)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ex-sur-laque-doux, rgba(255,253,247,.64)) !important;
    font-family: var(--font-mono) !important;
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    padding: 11px 16px !important;
  }
  body[data-ex-biblio] .mobile-community-action:hover {
    border-color: var(--ex-laiton, #d8b765) !important;
    color: var(--ex-laiton, #d8b765) !important;
  }
  body[data-ex-biblio] .mobile-community-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(28px, 3.4vw, 56px) !important;
    align-items: start;
  }
  body[data-ex-biblio] :is(.mobile-owner-note, .mobile-community-panel) {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* --- 6.9 · les derniers caissons de la fiche ------------------------------
   Il restait des cartes arrondies à l'intérieur des sections : les indices de
   la démonstration, les messages d'état, les boutons « compte requis », les
   emplacements de photo des gravures et le fil de discussion. Même grammaire
   que le reste : un filet, pas une boîte. Aucun de ces éléments ne disparaît —
   ils cessent seulement d'être des pastilles. */
@media (min-width: 1024px) {
  body[data-ex-biblio] :is(.mobile-proof-list, .mobile-community-panel, .mobile-owner-note) {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] .mobile-proof-list > * {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 0 !important;
    margin: 0 !important;
  }
  body[data-ex-biblio] .mobile-data-message {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid var(--ex-laiton, #d8b765) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 10px 14px !important;
    margin: 16px 0 !important;
  }
  body[data-ex-biblio] :is(.mobile-proof-review-actions, .mobile-gallery-missing-actions) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    /* Sans `min-width: 0`, un enfant en `flex` refuse de descendre sous sa
       largeur de contenu : le bouton « Compléter la fiche » sortait de
       190 px dans une colonne de 172. */
    min-width: 0;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
  body[data-ex-biblio] :is(.mobile-proof-review-actions, .mobile-gallery-missing-actions) > * {
    min-width: 0;
    max-width: 100%;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ex-filet-doux, rgba(216,183,101,.15)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ex-sur-laque-doux, rgba(255,253,247,.64)) !important;
    font-family: var(--font-mono) !important;
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    padding: 11px 16px !important;
  }
  body[data-ex-biblio] .physical-identifier-codes > * {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    margin: 0 !important;
  }
  /* L'emplacement de photo d'une gravure : hachuré comme les autres preuves
     absentes, pour qu'un trou se lise partout de la même façon. */
  body[data-ex-biblio] .physical-runout-row :is(.runout-photo, .runout-photo-empty, figure) {
    background: repeating-linear-gradient(135deg,
      rgba(255,253,247,.028) 0 6px, transparent 6px 12px) !important;
    border: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body[data-ex-biblio] .mobile-community-panel > * {
    border-radius: 0 !important;
  }
  body[data-ex-biblio] .mobile-community-panel :is(.comment-card, .comment-thread, .empty-thread, article, form) {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* --- 6.10 · quatre corrections mesurées ----------------------------------
   Relevées au dévidoir, pas à l'œil : la pochette débordait de 13 px à
   gauche, l'emplacement de photo de gravure gardait 11 px de rayon, le fil de
   discussion son caisson, et mon propre sélecteur `strong` grossissait le
   MODE de gravure au lieu de sa valeur. */
@media (min-width: 1024px) {
  /* La pochette et le disque dépassaient du cadre : 512 et 500 px pour un
     conteneur de 480. On les borne depuis le conteneur, qui les recadre. */
  body[data-ex-biblio] .mobile-pressing-hero .mobile-pressing-physical {
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  body[data-ex-biblio] .mobile-pressing-hero .mobile-pressing-physical > :is(.mobile-pressing-vinyl, .mobile-pressing-sleeve) {
    grid-area: 1 / 1;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  body[data-ex-biblio] .mobile-pressing-hero .mobile-pressing-sleeve img {
    width: 100%; height: 100%; object-fit: cover;
  }

  /* L'emplacement de photo d'une gravure absente : hachuré comme toute preuve
     manquante ailleurs sur la fiche. Un trou se lit partout pareil. */
  body[data-ex-biblio] .physical-runout-photo {
    background: repeating-linear-gradient(135deg,
      rgba(255,253,247,.028) 0 6px, transparent 6px 12px) !important;
    border: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body[data-ex-biblio] .physical-runout-photo span {
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-sur-laque-faible, rgba(255,253,247,.34));
  }

  /* La VALEUR de la gravure domine ; le mode (gravé, estampé, non renseigné)
     reste une étiquette. Ma règle précédente visait `strong` sans distinguer
     les deux, et grossissait l'étiquette. */
  body[data-ex-biblio] .physical-runout-row .physical-runout-heading strong {
    font-family: var(--font-mono) !important;
    font-size: .68rem !important;
    font-weight: 400 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--ex-sur-laque-doux, rgba(255,253,247,.64)) !important;
  }
  body[data-ex-biblio] .physical-runout-row .physical-runout-heading span {
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ex-laiton, #d8b765);
  }
  body[data-ex-biblio] .physical-runout-row .physical-runout-value code {
    font-family: var(--font-mono) !important;
    font-size: clamp(1.05rem, 1.5vw, 1.4rem) !important;
    letter-spacing: .06em !important;
    color: var(--ex-encre, #fffdf7) !important;
    background: none !important;
    padding: 0 !important;
  }

  /* Le fil de discussion gardait son caisson laqué. */
  body[data-ex-biblio] .mobile-community-panel .variant-community-panel {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
}

/* --- 6.11 · les emplacements attendus et vides ---------------------------
   Ils n'apparaissent que pour un pressage NON prouvé : un pressage prouvé ne
   montre que ses rôles présents, c'est le contrat. Hachurés comme partout
   ailleurs, sans compteur ni pourcentage — le nombre d'emplacements attendus
   dépend de l'objet, aucun dénominateur n'est légitime. */
@media (min-width: 1024px) {
  body[data-ex-biblio] .mobile-gallery-missing {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
    margin-top: clamp(14px, 1.6vw, 22px);
    padding-top: clamp(14px, 1.6vw, 22px);
    border-top: 1px solid var(--ex-trait, rgba(255,253,247,.13));
  }
  body[data-ex-biblio] .media-slot.is-awaited {
    background: transparent !important;
    border: 1px dashed var(--ex-filet-doux, rgba(216,183,101,.15)) !important;
  }
  body[data-ex-biblio] .media-slot.is-awaited .media-empty {
    color: var(--ex-laiton, #d8b765) !important;
    opacity: .72;
  }
}

/* ===========================================================================
   7 · LA RECHERCHE EN ÉTROIT — LE CHAMP NE DISPARAÎT JAMAIS
   Mesuré de 1440 à 390 : sous 980 px le champ tombait à ZÉRO pixel de large
   et le bouton « Rechercher » gonflait à 581 px. Cause : une règle plus bas
   donne `width: 100%` au bouton en étroit ; avec `flex-basis: auto`, il
   réclamait toute la ligne, et `min-width: 0` autorisait le champ à se
   réduire à rien. Un champ de recherche invisible sur la page qui sert à
   chercher — c'est le pire défaut possible sur cette page.

   Deux garde-fous :
     1. le bouton ne s'étire plus et ne pousse plus ;
     2. le champ a un plancher, il ne peut plus être écrasé.
   Et sous 720 px on change de geste au lieu de comprimer : le champ prend
   toute la ligne, les commandes passent dessous.
   =========================================================================== */
body[data-ex-biblio] .search-form {
  flex-wrap: nowrap;
  width: min(100%, 720px);
}
body[data-ex-biblio] .search-submit {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
body[data-ex-biblio] :is(.search-scanner, .field-clear) {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
}
body[data-ex-biblio] .search-input {
  flex: 1 1 8ch !important;
  min-width: 8ch !important;
  width: auto !important;
}

@media (max-width: 720px) {
  body[data-ex-biblio] .search-form {
    display: grid !important;
    grid-template-columns: 1fr auto auto auto auto;
    grid-template-areas:
      "champ champ champ champ champ"
      ".     effacer chercher separateur scanner";
    gap: 10px;
    padding: 14px !important;
  }
  /* `!important` ici parce qu'une règle SANS media query, écrite plus bas
     dans cette même feuille pour aplatir la puce, la remettait en
     `inline-flex` à toutes les largeurs — elle réapparaissait donc en boîte
     isolée sur la seconde ligne du champ. */
  body[data-ex-biblio] .search-glass { display: none !important; }
  body[data-ex-biblio] .search-input {
    grid-area: champ;
    min-width: 0 !important;
    padding: 6px 0 12px !important;
    border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13)) !important;
  }
  body[data-ex-biblio] #search-clear { grid-area: effacer; }
  body[data-ex-biblio] .search-scan-separator { grid-area: separateur; align-self: center; }
  body[data-ex-biblio] .search-scanner { grid-area: scanner; }
  body[data-ex-biblio] .search-submit { grid-area: chercher; padding: 12px 22px !important; }
}

@media (max-width: 640px) {
  body[data-ex-biblio] .search-form {
    grid-template-columns: minmax(0, 1fr) 50px !important;
    grid-template-areas:
      "champ champ"
      "chercher scanner" !important;
    gap: 8px !important;
  }
  body[data-ex-biblio] .search-input {
    grid-area: champ;
    width: 100% !important;
    padding: 8px 44px 12px 0 !important;
  }
  body[data-ex-biblio] #search-clear {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
  }
  body[data-ex-biblio] .search-submit {
    grid-area: chercher;
    width: 100% !important;
  }
  body[data-ex-biblio] .search-scanner {
    grid-area: scanner;
    width: 50px !important;
    height: 43px !important;
  }
  body[data-ex-biblio] .search-scan-separator { display: none !important; }
}

/* --- 7 bis · deux vestiges ------------------------------------------------
   Le bouton d'effacement gardait un fond gris clair : `exkave-mobile-skin.css`
   le réclame par `#search-clear.field-clear` — un IDENTIFIANT, avec
   `!important`. Aucune classe ne peut passer devant. On reprend l'identifiant
   plutôt que d'empiler : une règle, pas une couche.

   Et la pastille numérotée « 1 » : un tutoriel collé sur une page qu'on
   consulte cent fois. Le kicker dit déjà où l'on est. */
body[data-ex-biblio] #search-clear.field-clear,
body[data-ex-biblio] #search-clear.field-clear:disabled {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ex-filet-doux, rgba(216,183,101,.15)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ex-sur-laque-doux, rgba(255,253,247,.64)) !important;
}
body[data-ex-biblio] #search-clear.field-clear:hover {
  border-color: var(--ex-laiton, #d8b765) !important;
  color: var(--ex-laiton, #d8b765) !important;
}
body[data-ex-biblio] #search-section::before,
body[data-ex-biblio] #search-section::after { content: none !important; display: none !important; }

/* --- 7 ter · la loupe et le panneau de suggestions ------------------------

   1. DEUX LOUPES DANS LA MÊME PUCE
   `.search-glass` ne portait pas seulement le glyphe « ⌕ » : la peau lui
   dessinait un cercle de 34 px — `border-radius: 50%`, filet ivoire et halo
   laiton. On lisait donc une pastille ET un symbole, deux fois le même signe.
   Le glyphe suffit : il redevient un caractère posé dans la barre.

   2. LE PANNEAU DE SUGGESTIONS FLOTTAIT 233 PX PLUS BAS
   Il était en `position: absolute` avec `top: 371.555px` — un décalage écrit
   en dur, calé sur la hauteur qu'avait le bloc de recherche AVANT la refonte.
   Toute modification de rythme le détachait du champ.

   Il repasse dans le flux, juste sous le champ dont il dépend. Contrepartie
   assumée : à l'ouverture il pousse le guide vers le bas au lieu de le
   recouvrir. C'est le bon compromis ici — un panneau qui suit toujours son
   champ vaut mieux qu'un panneau qui flotte au bon endroit tant que personne
   ne touche à la mise en page. */
body[data-ex-biblio] .search-glass {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
}

body[data-ex-biblio] #suggestions.suggestions {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  max-height: min(52vh, 460px);
  overflow-y: auto;
}

/* À partir de 901 px, `#search-section` est une grille de deux colonnes : le
   titre à gauche, le champ à droite. Le panneau, remis dans le flux, tombait
   donc dans la COLONNE DE GAUCHE — 389 px de large, décalé sous le titre.
   On le place explicitement sous le champ, dans la seconde colonne. */
@media (min-width: 901px) {
  body[data-ex-biblio] #suggestions.suggestions {
    grid-column: 2;
    justify-self: stretch;
  }
  /* L'écart entre les rangées de la grille séparait encore le panneau du champ
     de 28 px. On le ramène à 8, comme en étroit : le panneau doit toucher le
     champ à toutes les largeurs. `.examples` et `.search-guide` portent déjà
     leurs propres marges, ils ne se resserrent pas. */
  body[data-ex-biblio] #search-section { row-gap: 8px; }
}

/* --- 7 quater · une seule boîte, une seule croix -------------------------
   Il restait deux doublons dans la barre :

   — le champ portait SON PROPRE cadre à l'intérieur du cadre de la barre,
     d'où une boîte dans une boîte ;
   — `type="search"` fait dessiner à Chrome une croix d'effacement native, qui
     doublait le bouton « × » du produit. Deux croix côte à côte pour la même
     action : on garde celle du produit, qui est traduite et qui remet le
     focus dans le champ.

   La croix native est masquée, pas remplacée : le champ reste un
   `type="search"`, avec ce que cela apporte au clavier et aux lecteurs
   d'écran. */
body[data-ex-biblio] .search-input,
body[data-ex-biblio] .search-input:focus,
body[data-ex-biblio] .search-input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
body[data-ex-biblio] .search-input::-webkit-search-cancel-button,
body[data-ex-biblio] .search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* Le champ perd son propre contour : le focus doit donc se voir sur la barre
   entière, sinon la navigation au clavier n'a plus de repère. */
body[data-ex-biblio] .search-form:focus-within {
  outline: 2px solid var(--ex-laiton, #d8b765);
  outline-offset: 2px;
}

/* ===========================================================================
   8 · LA PLANCHE DE LA BIBLIOTHÈQUE — PELLICULE HORIZONTALE
   Même code graphique que le hero de la landing : une bande inclinée qui
   traverse la largeur, deux rangs de perforations, les vues en Tri-X, et le
   cercle au crayon qui suit la vue survolée.

   Ce qui la distingue de la landing : là-bas la pellicule est le spectacle et
   sort du cadre par la droite. Ici elle est POSÉE entre la recherche et le
   choix de l'artiste — une planche qu'on consulte avant de plonger, pas une
   affiche. Elle reste sous la recherche, jamais devant.

   Vraies pochettes, vrais liens. Rien d'inventé.
   =========================================================================== */
body[data-ex-biblio] .exb-planche {
  margin: clamp(24px, 3vw, 44px) 0 clamp(28px, 3.4vw, 52px);
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--ex-trait, rgba(255,253,247,.13));
}
body[data-ex-biblio] .exb-planche[hidden] { display: none !important; }

body[data-ex-biblio] .exb-bande-corps {
  position: relative;
  margin: 0;
  /* L'inclinaison de la landing, un peu redressée : la Bibliothèque est un
     outil, la bande ne doit pas devenir le sujet. */
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 26px 52px rgba(0, 0, 0, .58));
}

/* Les perforations, en haut et en bas — la pellicule, pas un cadre. */
body[data-ex-biblio] .exb-perfo {
  height: 13px;
  background: var(--ex-perfo, url('/brand/cave-perfo.svg')) repeat-x left center;
  background-size: auto 13px;
  opacity: .55;
}

body[data-ex-biblio] .exb-bande-vues {
  display: flex;
  gap: 5px;
  padding: 5px;
  background: linear-gradient(180deg, #16130e, #0a0908);
}

body[data-ex-biblio] .exb-vue {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  display: block;
  background: var(--ex-laque-2, #141210);
  /* La conversion Tri-X de la planche : gris, contrasté, hautes lumières
     lavées. La couleur revient sur la vue survolée, comme un tirage qu'on
     sort du bain. */
  filter: grayscale(1) contrast(1.3) brightness(.84);
  transition: filter .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
body[data-ex-biblio] .exb-vue img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
body[data-ex-biblio] .exb-vue::after {
  content: attr(data-vue);
  position: absolute;
  left: 6px; bottom: 5px;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  color: rgba(255, 220, 120, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  pointer-events: none;
}
body[data-ex-biblio] .exb-bande-corps:hover .exb-vue {
  filter: grayscale(1) contrast(1.18) brightness(.48);
}
body[data-ex-biblio] .exb-bande-corps .exb-vue:hover {
  filter: grayscale(.12) contrast(1.08) brightness(1.05) sepia(.14);
  transform: scale(1.04);
  z-index: 2;
}
body[data-ex-biblio] .exb-vue:focus-visible {
  outline: 2px solid var(--ex-laiton, #d8b765);
  outline-offset: 3px;
  z-index: 3;
}

/* Le cercle au crayon gras. Il n'entoure QU'UNE vue : celle que la planche
   retient, ou celle qu'on survole. */
body[data-ex-biblio] .exb-crayon {
  position: absolute;
  top: -7%;
  left: var(--crayon-x, 0%);
  width: 27%;
  height: 114%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75));
  transition: left .42s cubic-bezier(.2, .7, .2, 1);
}
body[data-ex-biblio] .exb-crayon[hidden] { display: none; }
body[data-ex-biblio] .exb-crayon path {
  fill: none;
  stroke: var(--ex-laiton, #d8b765);
  /* En unités du viewBox, pas en pixels : `non-scaling-stroke` entre en
     conflit avec `pathLength` et ne dessine qu'une moitié du tracé. */
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: exb-tracer 1.3s cubic-bezier(.5, .05, .25, 1) .5s forwards;
}
@keyframes exb-tracer { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  body[data-ex-biblio] .exb-crayon path { animation: none; stroke-dashoffset: 0; }
  body[data-ex-biblio] .exb-crayon { transition: none; }
}

body[data-ex-biblio] .exb-planche-note {
  margin: clamp(16px, 2vw, 26px) 0 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ex-sur-laque-faible, rgba(255, 253, 247, .34));
}

/* La grande vue n'appartient qu'au doigt. */
body[data-ex-biblio] .exb-planche-maitre { display: none; }

/* --- sous 1024 px : une grande pochette, puis un rail ---------------------
   La pellicule inclinée ne se transpose pas : six vignettes de 55 px sur un
   écran de 390 ne se lisent pas, et l'inclinaison mange la hauteur. On change
   de geste — une grande image, un rail au doigt, pas de cercle à survoler
   puisqu'il n'y a pas de survol. */
@media (max-width: 1023px) {
  body[data-ex-biblio] .exb-planche-maitre { display: block; }
  body[data-ex-biblio] .exb-vue--maitre {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    filter: none;
    transform: none;
  }
  body[data-ex-biblio] .exb-vue--maitre::after { content: none; }
  body[data-ex-biblio] .exb-bande-corps {
    transform: none;
    filter: none;
    margin-top: 10px;
  }
  body[data-ex-biblio] .exb-perfo { display: none; }
  body[data-ex-biblio] .exb-crayon { display: none !important; }
  body[data-ex-biblio] .exb-bande-vues {
    padding: 0;
    gap: 8px;
    background: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body[data-ex-biblio] .exb-bande-vues::-webkit-scrollbar { display: none; }
  body[data-ex-biblio] .exb-bande-vues .exb-vue {
    flex: 0 0 108px;
    width: 108px;
    filter: none;
    scroll-snap-align: start;
  }
  /* La première vue est déjà montrée en grand juste au-dessus : la répéter
     dans le rail ferait deux cibles pour la même pochette. */
  body[data-ex-biblio] .exb-bande-vues .exb-vue:first-child { display: none; }
  body[data-ex-biblio] .exb-bande-corps:hover .exb-vue { filter: none; }
}


/* ===========================================================================
   9 · LES PRESSAGES VERROUILLÉS DU PALIER GRATUIT
   Mesuré : `.locked-teaser` alignait deux tuiles de 554 px, chacune avec un
   disque de remplacement de 533 px. Six pressages masqués occupaient donc plus
   de place que les trois pressages RÉELS juste au-dessus — l'aperçu de ce qu'on
   ne peut pas voir écrasait ce qu'on peut voir.

   Ils reprennent la mesure de la liste comparative : une pochette de 140 px.
   Ce sont des amorces, pas du contenu. Le disque de remplacement reste : il
   n'y a pas de pochette à montrer, et en fabriquer une serait mentir.
   Réduction mesurée : 554 -> 152 px, soit 73 %.
   =========================================================================== */
body[data-ex-biblio] .locked-teaser {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  align-items: start;
}
body[data-ex-biblio] .locked-teaser > .pressing.locked {
  display: block !important;
  grid-template-columns: none !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body[data-ex-biblio] .locked-teaser .pressing-cover-placeholder {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1;
  border-radius: 0 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45) !important;
}
body[data-ex-biblio] .locked-teaser .pressing-title {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ex-trait, rgba(255, 253, 247, .13));
  font-family: var(--font-mono) !important;
  font-size: .62rem !important;
  font-weight: 400 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
  color: var(--ex-sur-laque-doux, rgba(255, 253, 247, .64)) !important;
}
body[data-ex-biblio] .locked-teaser .pressing-meta {
  font-family: var(--font-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .12em !important;
  color: var(--ex-sur-laque-faible, rgba(255, 253, 247, .34)) !important;
}

/* --- 10 · le filtre d'albums, même piège que la recherche ----------------
   Mesuré à 1100 px : le champ « Filtrer les albums » tombait à 16 px de large.
   Exactement la faute déjà corrigée sur la recherche — un voisin qui pousse et
   un `min-width: 0` qui autorise l'écrasement. On pose les mêmes garde-fous :
   le champ garde un plancher, le sélecteur ne pousse plus. */
body[data-ex-biblio] .panel-filter { flex-wrap: wrap; }
body[data-ex-biblio] .panel-filter input {
  flex: 1 1 14ch !important;
  min-width: 14ch !important;
  width: auto !important;
}
body[data-ex-biblio] .panel-filter select {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 46% !important;
}
body[data-ex-biblio] .panel-filter .field-clear { flex: 0 0 auto !important; }

@media (max-width: 768px) {
  body[data-ex-biblio] .panel-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le drapeau et le nom du pays débordaient de leur cellule à 390 px. */
body[data-ex-biblio] .country-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* --- 11 · deux pressages par ligne sur les grands écrans -----------------
   Mesuré à 1440 : la donnée d'un pressage tient dans 620 px, la ligne en fait
   1308. Il restait donc près de la moitié de la largeur en fond nu, et on ne
   voyait que trois pressages à l'écran. Deux colonnes doublent ce qu'on
   compare d'un coup d'œil sans rien réduire : mêmes 140 px de pochette, mêmes
   colonnes de données, mêmes gravures en entier.

   Seulement à partir de 1280 px : en dessous, deux colonnes couperaient les
   gravures, qui sont justement ce qu'on vient lire. */
@media (min-width: 1280px) {
  body[data-ex-biblio] .workspace .pressing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    align-items: start;
  }
  /* La colonne d'appel disparaît : « Ouvrir la fiche » est déjà sous la
     donnée depuis la correction précédente, et une quatrième piste ne ferait
     que rendre la moitié de largeur au vide qu'on vient de supprimer. */
  body[data-ex-biblio] .workspace .pressing-grid > .pressing {
    grid-template-columns: 54px minmax(0, 1fr) auto;
  }
  body[data-ex-biblio] .workspace .pressing-grid > .pressing::after { grid-column: 3; grid-row: 1; }
  body[data-ex-biblio] .workspace .pressing-card-flags { grid-column: 3; grid-row: 2; }
  body[data-ex-biblio] .workspace .pressing-facts-grid { max-width: none; }
  body[data-ex-biblio] .workspace .pressing-runout-grid { max-width: none; }
}

/* --- 12 · les amorces verrouillées remplissent la largeur ----------------
   `auto-fill` garde les pistes vides : six amorces dans un rang qui en tient
   sept laissaient un trou à droite. `auto-fit` replie les pistes vides et les
   six s'étirent pour occuper toute la largeur. */
body[data-ex-biblio] .locked-teaser {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

/* Zones tactiles : les deux actions de la barre de recherche mesuraient 43px
   de haut — un pixel sous le repere. Seule la hauteur bouge, sur telephone. */
@media (max-width: 767px) {
  body[data-ex-biblio] :is(#search-submit.search-submit, #search-scanner.search-scanner) {
    min-height: 44px !important;
  }
}

/* ===========================================================================
   MARQUEUR DE FIN DE FEUILLE — NE PAS DÉPLACER, NE PAS SUPPRIMER
   Cette règle doit rester la DERNIÈRE du fichier. `deploy/verifier-css.sh` la
   cherche ici, et l'audit navigateur la cherche dans `cssRules` : si elle
   manque d'un côté ou de l'autre, la feuille n'a pas été lue jusqu'au bout et
   des règles sont ignorées en silence. C'est exactement ce qui est arrivé à
   CETTE feuille le 2026-08-17 — une accolade orpheline, 41 règles perdues.
   =========================================================================== */
:root { --ex-fin-exkave-ui-library: 1; }