/* Lire Debord — la bibliothèque (/oeuvres/). Le plan du corpus, puis cinq rayons.
   Le socle (page, fil, sec-*, badges, révélations, pied) est dans site.css. */

/* ---------- LE PLAN NAVIGABLE DU CORPUS ---------- */
/* Le cadre est vide tant que la scene n'a pas pris : sans WebGL, sans
   three.js, sous prefers-reduced-motion, l'index des cinq rayons EST la page —
   il n'y a rien a replier. */
.c3d-boite{margin:22px 0 4px}
.c3d{position:relative;height:clamp(300px,58vh,560px);border:1px solid var(--border);border-radius:14px;background:var(--blanc);overflow:hidden;display:none;touch-action:pan-y}
html.c3d-on .c3d{display:block}
.c3d canvas{display:block;width:100%;height:100%;cursor:grab}
.c3d canvas:focus-visible{outline:2px solid var(--fleche);outline-offset:-2px}
.c3d-etq{position:absolute;inset:0;pointer-events:none}
/* l'invite : la molette ne prend la main qu'apres un clic dans la scene, et
   ca se dit — une page dont le milieu avale le defilement est illisible */
.c3d-invite{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;background:var(--encre);color:var(--papier);font-size:.76rem;font-weight:500;padding:5px 12px;border-radius:20px;pointer-events:none;transition:opacity .2s}
.c3d-actif .c3d-invite{opacity:0}
/* une etiquette de rayon : posee par le script, sur la plaque */
.c3d-etq-r{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:var(--papier);border:1px solid var(--border);border-radius:20px;padding:4px 11px;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--trait);text-decoration:none;white-space:nowrap;box-shadow:0 1px 6px rgba(20,19,15,.08)}
.c3d-etq-r b{color:var(--fleche-text);font-family:var(--f-titre);font-size:.95rem;margin-right:3px}
.c3d-etq-r:hover,.c3d-etq-ici{border-color:var(--fleche);color:var(--encre)}
.c3d-bulle{position:absolute;transform:translate(-50%,calc(-100% - 14px));background:var(--encre);color:var(--papier);border-radius:8px;padding:6px 10px;font-size:.76rem;line-height:1.35;white-space:nowrap;pointer-events:none;display:grid;gap:1px;max-width:min(88vw,320px);overflow:hidden}
.c3d-bulle[hidden]{display:none}
.c3d-bulle b{font-weight:600}
.c3d-bulle span{color:rgba(243,240,232,.72)}
/* la barre : ou l'on est, et comment ressortir */
.c3d-barre{display:none;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;min-height:32px}
html.c3d-on .c3d-barre{display:flex}
.c3d-ou{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.c3d-sortir{font:inherit;font-size:.82rem;font-weight:500;color:var(--encre);background:var(--blanc);border:1px solid var(--border);border-radius:20px;padding:6px 14px;cursor:pointer;min-height:24px}
.c3d-sortir:hover{border-color:var(--fleche);color:var(--fleche-text)}
.c3d-sortir[hidden]{display:none}
/* LES CINQ BOUTONS SONT DE VRAIS LIENS vers les sections : sans script ils
   menent a l'index, avec script ils entrent dans le rayon. C'est l'equivalent
   accessible, et il marche dans les deux mondes. */
.c3d-bs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.c3d-b{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:.84rem;font-weight:500;color:var(--encre);background:var(--blanc);border:1px solid var(--border);border-radius:20px;padding:7px 14px;min-height:24px}
.c3d-b b{font-family:var(--f-titre);font-weight:800;color:var(--fleche-text);font-size:.95rem}
.c3d-b:hover{border-color:var(--fleche)}
.c3d-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:14px 0 0;font-size:.82rem;line-height:1.5;color:var(--trait)}
.c3d-leg b{font-weight:400;display:inline-flex;align-items:center;gap:7px}
.c3d-leg em{font-style:normal;color:var(--muted)}
.c3d-leg a{color:var(--fleche-text)}
.c3d-k{width:13px;height:13px;flex:none;display:inline-block}
.c3d-k-plein{background:var(--encre);border:1.5px solid var(--encre)}
.c3d-k-vide{background:var(--blanc);border:1.5px solid var(--encre)}
/* le rayon ou l'on se trouve, marque dans l'index */
.bib-rayon.bib-ici{background:var(--blanc);box-shadow:inset 3px 0 0 var(--fleche)}

/* ---------- les cinq rayons ---------- */
.bib .pg-tete{margin-bottom:0}
.bib-rayon{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.7fr);gap:clamp(18px,3vw,48px);padding:26px 0;border-top:1px solid var(--border);scroll-margin-top:96px}
.bib-h{font-family:var(--f-titre);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;margin:0 0 7px;display:flex;align-items:baseline;gap:12px}
.bib-h i{font-style:normal;color:var(--fleche-text);font-weight:400;font-size:.9em}
.bib-note{font-family:var(--f-lecture);color:var(--trait);line-height:1.5;margin:0 0 8px;font-size:1rem;max-width:34ch}
.bib-n{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bib-liste{list-style:none;margin:0;padding:0;display:grid}
.bib-liste li{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"an ti" "an ici";gap:2px 14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--border);scroll-margin-top:96px}
.bib-liste li:first-child{border-top:0;padding-top:0}
.bib-an{grid-area:an;font-family:var(--f-titre);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9rem}
/* 24 px de haut même sur une ligne : c'est une liste, pas un lien en ligne (WCAG 2.5.8) */
.bib-ti{grid-area:ti;font-weight:500;color:var(--encre);text-decoration:none;display:flex;flex-direction:column;justify-content:center;min-height:24px;font-size:1rem}
a.bib-ti:hover{color:var(--fleche-text)}
.bib-ti small{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:2px}
/* LES JETONS : ce que le site fait de CETTE oeuvre, en chiffres dérivés — et
   non plus la même phrase seize fois. */
.bib-ici{grid-area:ici;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:1px}
.bib-ici b{font-size:.78rem;font-weight:500;color:var(--trait);background:var(--blanc);border:1px solid var(--border);border-radius:20px;padding:2px 9px}
.pas-encore .bib-ti{color:var(--trait)}
/* la ligne visée depuis le plan : elle s'allume, elle ne saute pas */
.bib-liste li.bib-vu{background:var(--blanc);box-shadow:inset 3px 0 0 var(--fleche)}
.bib-liste li.bib-vu .bib-an{color:var(--fleche-text)}

@media(max-width:700px){
  .bib-rayon{grid-template-columns:1fr;gap:14px;padding:22px 0}
}