/* Thème etagere : registre et couvertures (/archives/, /tags/<tag>/), salle d'archives. Chargé après shelf.css. */

/* ---------------------------------------------------------------- Registre */
/* main defile : sa barre reste au bord de la fenetre, le contenu garde 123,2rem au plus. */
.lib { padding: 2.4rem max(2.4rem, (100% - 123.2rem) / 2) 4rem; }
html:not(.js) .tools { display: none; }

/* Filtres : chaque contrôle natif est posé sur une bande de papier Antemoro ancien (.slip, classe commune de base.css, frange courte).
   Le contrôle garde son rôle et son focus ; seul son fond devient transparent. */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin: 2rem 0 1.6rem; font: 1.35rem/1.2 'Courier Prime', 'Courier New', monospace; }
.slip { --fringe-top: 4px; --fringe-right: 6px; --fringe-bottom: 4px; --fringe-left: 6px;
  --ant-shadow: 0 1px 2px rgba(60, 40, 20, .3), 0 .5rem .8rem -.4rem rgba(60, 40, 20, .45);
  display: flex; align-items: center; flex: none; max-width: 100%; height: 3.6rem; padding: 0 .5rem; }
html.dark .tools .slip { --ant-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 .6rem 1rem -.4rem rgba(0, 0, 0, .7); }
.slip input, .slip select { width: 100%; height: 100%; padding: 0 .6rem; border: 0; border-radius: 0; color: inherit; background: transparent; font: inherit; }
.slip select { cursor: pointer; }
.slip.q { flex: 1 1 22rem; min-width: 0; }
.slip.q input { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.5rem; }
.slip input::placeholder { color: #7d6a50; }
/* Focus : encre rouge brun sur le papier (la couleur de focus du soir est trop claire pour le papier). */
.slip :focus-visible { outline: 2px solid #8c2f22; outline-offset: -2px; }
.views button:focus-visible { outline-offset: 2px; }
.views { gap: .4rem; margin-left: auto; padding: 0 1.2rem; }
.views > span { color: #9a8566; }
.views button { border: 0; background: none; padding: .4rem .2rem; font: inherit; color: #6e5c45; cursor: pointer; }
.views button:hover { color: #2b2118; }
.views button[aria-pressed="true"] { color: #2b2118; font-weight: 700; text-decoration: underline; text-underline-offset: .4rem; }

/* Liste a gauche, panneau de la fiche a droite (ecran large). */
.desk2 { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 2.4rem; align-items: start; }
.panel .card { position: relative; width: auto; }
.panel .arrow { display: none; }
html:not(.js) .panel { display: none; }
html:not(.js) .desk2 { grid-template-columns: minmax(0, 1fr); }

/* Feuille du registre : papier Antemoro ancien (.antemoro.aged, base.css). La feuille est le cadre ; .leaf, à l'intérieur, porte la liste.
   Lignes brunes très légères, pas de marge rouge : un registre, pas un cahier. */
.sheet { padding: 2.2rem 2rem 2.6rem; }
.reg { width: 100%; border-collapse: collapse; color: inherit; font-size: 1.5rem; line-height: 2rem; }
.reg[hidden] { display: none; }
.reg th, .reg td { padding: .6rem 1rem; text-align: left; vertical-align: baseline; border-bottom: 1px solid rgba(120, 84, 40, .13); }
.reg thead th { padding-top: 1.2rem; font: 700 1.2rem/2rem 'Courier Prime', 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; color: #5b4a36; border-bottom: 0; white-space: nowrap; }
/* Double filet d'encre sous les en-têtes, comme un registre imprimé. */
.reg thead th::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-top: 1px solid rgba(90, 58, 24, .35); border-bottom: 1px solid rgba(90, 58, 24, .6); }
.reg thead th:first-child { padding-left: 4.4rem; }
.reg thead button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.reg thead button:hover { color: var(--card-ink); text-decoration: underline; text-underline-offset: .3rem; }
.reg th[aria-sort] button { color: var(--card-ink); }
.reg th[aria-sort] button::after { content: ''; display: inline-block; margin-left: .5rem; border: .4rem solid transparent; border-top-color: currentColor; vertical-align: -.1rem; }
.reg th[aria-sort="ascending"] button::after { border-top-color: transparent; border-bottom-color: currentColor; vertical-align: .3rem; }
.reg .yr th { padding: 1.4rem 1rem .4rem 4.4rem; font: 700 1.6rem/2rem 'Source Serif 4', Georgia, serif; }
.reg .yr span { margin-left: .8rem; font: 400 1.2rem 'Courier Prime', 'Courier New', monospace; color: #5b4a36; }
.reg td.ti { position: relative; padding-left: 4.4rem; }
.reg td.ti .bit { position: absolute; left: 1.4rem; top: .7rem; }
.reg td.ti a { text-decoration: none; font-weight: 600; }
.reg td.ti a:hover { text-decoration: underline; text-underline-offset: .3rem; }
.reg .sh, .reg .se, .reg .da, .reg .le { font: 1.3rem/2rem 'Courier Prime', 'Courier New', monospace; color: #5b4a36; }
.reg .se, .reg .da, .reg .le { white-space: nowrap; }
/* Feuille etroite (panneau a cote) : la serie passe a la ligne, le registre garde la largeur de la feuille. */
@media (min-width: 1024px) and (max-width: 1279px) { .reg .se { white-space: normal; } }
.reg tbody tr:not(.yr, .slot) { cursor: default; }
.reg tr.on { background: rgba(140, 70, 30, .1); }
.reg tr.on td.ti a { color: #7d2a20; }
.reg tr.slot td { padding: .4rem 1rem 1.2rem; background: none; }
.reg tr.slot .card { position: relative; width: auto; transition: none; }

/* Couvertures de face, chacune dans la matiere de son rayon. Memes regles d'image que le pupitre (classes cpic). */
.covers { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.6rem, 1fr)); gap: 3rem 2.4rem; padding: 1.4rem 1.6rem 2rem .8rem; }
.covers[hidden] { display: none; }
.covers > li { min-width: 0; }
.covers > .slot { grid-column: 1 / -1; }
.covers > .slot .card { position: relative; width: auto; transition: none; }
.cov { position: relative; display: block; aspect-ratio: 8 / 11; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.cov .cover { gap: 1.4rem; padding: 1.4rem 1.2rem 1.8rem 1.8rem; }
.cov .ct { font-size: 1.7rem; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cov.m-kraft .ct { font-size: 1.6rem; }
/* Etiquette du cartonnage : bord en ombre portee, pour que la coupe du texte ne laisse pas de ligne a moitie visible. */
.cov.m-board .ct { padding: 0 .4rem; font-size: 1.4rem; -webkit-line-clamp: 4; box-shadow: 0 0 0 .3rem #ebe3cf, 0 0 0 calc(.3rem + .6px) rgba(70, 50, 30, .45), 0 0 0 .6rem #ebe3cf; }
.cov .cpic img { height: 6rem; }
.cov .cpic.photo img, .cov .cpic.tall img { height: 7.6rem; }
.cov .cpic.logo { padding: .8rem 1rem; }
/* Livre choisi : il se soulève (sans filtre : règle anti-défauts Chrome dans la zone qui défile). */
.cov.on .cover, .cov:hover .cover { transform: translateY(-.5rem); box-shadow: inset .5rem 0 .6rem -.3rem rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .15), calc(var(--sx) * .9rem) 1rem 1.6rem rgba(30, 18, 6, .55); }
.cov:focus-visible .cover { outline: 2px solid var(--focus); outline-offset: 3px; }

.none { padding: 3rem 1rem; font-style: italic; color: #6e5c45; }

/* Ecran large (>= 720 px) : seule la liste defile. Etiquette, barre d'outils, en-tetes du registre et fiche restent en place. */
@media (min-width: 720px) {
  html.p-archive body > main { position: relative; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding-bottom: 2.4rem; }
  .lib > .kraft { justify-self: start; }
  .desk2 { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .panel { align-self: start; }
  /* La feuille suit la longueur de la liste, jusqu'à la hauteur disponible ; ensuite seule .leaf défile, la feuille ne bouge pas. */
  .sheet { align-self: start; display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
  .leaf { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  /* En-têtes collants : ils cachent les lignes qui passent dessous avec le papier même de la feuille.
     Mêmes calques que .antemoro::before (base.css, section Papier Antemoro), attachés à la fenêtre des deux côtés :
     les fibres et les taches de l'en-tête tombent exactement sur celles de la feuille, sans couture.
     La fenêtre ne défile pas sur écran large (main en overflow: hidden), la feuille non plus : rien ne glisse. */
  .sheet::before { background-attachment: fixed; }
  .reg thead th { position: sticky; top: 0; z-index: 1; background:
      var(--ant-light, linear-gradient(transparent 0 0)),
      var(--ant-age, linear-gradient(transparent 0 0)),
      var(--ant-fib-a) calc(var(--ant-seed) * 53px) calc(var(--ant-seed) * 31px) / 420px,
      var(--ant-fib-b) calc(var(--ant-seed) * -29px) calc(var(--ant-seed) * 47px) / 260px,
      var(--ant-cloud) calc(var(--ant-seed) * 71px) calc(var(--ant-seed) * -43px) / 520px,
      var(--paper),
      var(--ant-pulp);
    background-attachment: fixed; }
  /* Selection au clavier : la ligne choisie reste visible sous les en-tetes collants. */
  .reg tbody tr { scroll-margin: 4.4rem 0 1rem; }
  .cov { scroll-margin: 1rem 0; }
}

/* ---------------------------------------------------------------- Salle d'archives (archives et tags) */
/* Mur de platre jauni : taches d'humidite, bords dans l'ombre, poussiere fine. Le soir : meme mur, plus sombre. */
html.p-archive { --wall: #dccdad;
  --dust: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='1' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .16 4 0 0 0 -3'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>"); }
html.p-archive.dark { --wall: #241b13; }
html.p-archive body { background:
    radial-gradient(ellipse 85% 80% at 50% 42%, transparent 40%, rgba(56, 34, 10, .28) 100%),
    radial-gradient(ellipse 30rem 20rem at 8% 84%, transparent 48%, rgba(110, 76, 30, .16) 62%, rgba(110, 76, 30, .05) 70%, transparent 75%),
    radial-gradient(ellipse 30rem 20rem at 8% 84%, rgba(120, 86, 38, .1), transparent 62%),
    radial-gradient(ellipse 40rem 26rem at 94% 26%, rgba(120, 86, 38, .13), transparent 70%),
    radial-gradient(ellipse 22rem 34rem at 62% 0%, rgba(110, 78, 34, .1), transparent 70%),
    var(--dust), var(--lime), var(--wall); }
html.p-archive.dark body { background:
    radial-gradient(ellipse 85% 80% at 50% 42%, transparent 35%, rgba(0, 0, 0, .5) 100%),
    radial-gradient(ellipse 30rem 20rem at 8% 84%, transparent 48%, rgba(0, 0, 0, .18) 62%, transparent 74%),
    radial-gradient(ellipse 40rem 26rem at 94% 26%, rgba(0, 0, 0, .16), transparent 70%),
    var(--wall); }

/* Toiles d'araignee : fils fins et transparents, dans un coin vide, derriere le texte. Ecran large seulement. */
.web { display: none; }
@media (min-width: 720px) {
  .web { display: block; position: absolute; z-index: 0; pointer-events: none; fill: none; stroke: rgba(80, 64, 44, .42); stroke-width: .7px; }
  html.dark .web { stroke: rgba(235, 220, 195, .2); }
  /* Coin du mur, au-dessus du plancher, a droite (derriere le panneau de la fiche). */
  .web.wall { right: 0; bottom: 0; width: 15rem; height: 15rem; transform: scale(-1, -1); }
  @media not all and (min-width: 1024px) { .web.wall { display: none; } } /* sans panneau, la feuille couvre le coin */
  /* Coin haut gauche de la feuille du registre, au-dessus des en-tetes collants. Fixe avec la feuille ; cachee en vue Covers. */
  .web.paper { left: .6rem; top: .6rem; z-index: 2; width: 4.6rem; height: 4.6rem; stroke: rgba(80, 64, 44, .36); }
  html.dark .web.paper { stroke: rgba(80, 64, 44, .3); }
  .sheet:has(.reg[hidden]) > .web { display: none; }
}

/* Ecran moyen : pas de panneau, la fiche s'ouvre sous l'element choisi. */
@media not all and (min-width: 1024px) {
  .desk2 { grid-template-columns: minmax(0, 1fr); }
  .panel { display: none; }
}

/* Mobile : le registre devient une liste ; les controles passent a la ligne. */
@media not all and (min-width: 720px) {
  .lib { width: auto; padding: 1.6rem 1.6rem 3rem; }
  .slip.q { flex-basis: 100%; }
  .slip { flex: 1 1 40%; min-width: 0; }
  .views { flex: none; margin-left: 0; }
  .sheet { padding: 1.6rem 1.2rem 2rem; }
  .reg thead { display: none; }
  .reg, .reg tbody, .reg tr, .reg td, .reg th { display: block; }
  .reg tr:not(.yr, .slot) { position: relative; display: flex; flex-wrap: wrap; gap: 0 1rem; padding: .8rem 1.2rem .8rem 3.9rem; border-bottom: 1px solid rgba(120, 84, 40, .13); }
  .reg td { padding: 0; border: 0; }
  .reg td.ti { display: contents; }
  .reg td.ti .bit { position: absolute; left: 1.2rem; top: 1.1rem; }
  .reg td.ti a { flex: 1 0 100%; }
  .reg .sh, .reg .se, .reg .da, .reg .le { font-size: 1.2rem; line-height: 1.8rem; }
  .reg .se:empty { display: none; }
  .reg .yr th { padding: 1.2rem 1.2rem .4rem; }
  .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.6rem; }
}