/* Bibliothèque 3D : grille de vignettes et fenêtre de l'objet (styles limités à .bibliotheque-3d ; la fenêtre reprend
   les styles de la vitrine, vitrine.css). Les vignettes ont le fond sombre du studio. */
.bibliotheque-3d {
  --b3-fond: #0c1f12;
  --b3-carte: #10261a;
  --b3-texte: #eef3ec;
  --b3-texte-2: #b9c6b6;
  --b3-trait: rgba(238, 243, 236, .14);
  --b3-laiton: #d6ad66;
  --b3-voile: rgba(5, 12, 7, .84);
  --b3-ombre: 0 24px 60px rgba(0, 0, 0, .45);
  color: var(--encre);
}
.bibliotheque-3d *, .bibliotheque-3d *::before, .bibliotheque-3d *::after { box-sizing: border-box; }
.bibliotheque-3d [hidden] { display: none !important; }

.bibliotheque-3d__tete { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.bibliotheque-3d__titre { margin: 0; display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; font: 600 var(--t-xs)/1.3 var(--f-cote); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.bibliotheque-3d__pastille { width: .5rem; height: .5rem; border-radius: 50%; background: var(--vert); flex: none; }
.bibliotheque-3d__filtres { display: flex; flex-wrap: wrap; gap: .45rem; }
.bibliotheque-3d__filtres button {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .85rem; border: 1.5px solid var(--trait-fort); border-radius: 999px;
  background: var(--carte); color: var(--encre-2); font: 600 var(--t-s)/1 var(--f-texte); cursor: pointer;
}
.bibliotheque-3d__filtres button:hover { border-color: var(--encre); color: var(--encre); }
.bibliotheque-3d__filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.bibliotheque-3d__nb { font: 500 var(--t-xs)/1 var(--f-cote); opacity: .7; }

.bibliotheque-3d__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.bibliotheque-3d__objet { margin: 0; min-width: 0; }
.bibliotheque-3d__carte {
  display: flex; flex-direction: column; height: 100%; border-radius: var(--rayon); overflow: hidden; text-decoration: none;
  background: var(--b3-carte); border: 1px solid var(--b3-trait); color: var(--b3-texte); transition: transform .18s ease, border-color .18s ease;
}
.bibliotheque-3d__carte:hover { transform: translateY(-2px); border-color: var(--b3-laiton); }
.bibliotheque-3d__carte:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }
.bibliotheque-3d__image { display: block; aspect-ratio: 4 / 3; background: var(--b3-fond); }
.bibliotheque-3d__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bibliotheque-3d__nom { display: block; padding: .6rem .75rem 0; font: 650 var(--t-s)/1.3 var(--f-texte); }
.bibliotheque-3d__famille { display: block; padding: .2rem .75rem .7rem; font: 500 var(--t-xs)/1.35 var(--f-cote); color: var(--b3-texte-2); }

/* fenêtre de l'objet */
.bibliotheque-3d__dialogue { width: min(1000px, 94vw); max-width: none; max-height: 96vh; padding: 0; border: 0; background: transparent; color: var(--b3-texte); overflow: visible; }
.bibliotheque-3d__dialogue::backdrop { background: var(--b3-voile); }
.bibliotheque-3d__visionneuse { box-shadow: var(--b3-ombre); }
.bibliotheque-3d__scene { aspect-ratio: 4 / 3; max-height: calc(96vh - 76px); }
.bibliotheque-3d__visionneuse .vitrine-3d__affiche { object-fit: contain; background: var(--b3-fond); }
.bibliotheque-3d__visionneuse.is-sans-3d .vitrine-3d__fleche { display: grid; }
.bibliotheque-3d__visionneuse .vitrine-3d__nom { margin: .15rem 0 0; }
.bibliotheque-3d__bas { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--b3-trait); }
.bibliotheque-3d__position { margin: 0; font: 600 var(--t-xs)/1 var(--f-cote); color: var(--b3-texte-2); }
.bibliotheque-3d__lien { margin-left: auto; font: 600 var(--t-s)/1.3 var(--f-texte); color: var(--b3-laiton); }
.bibliotheque-3d__fermer {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem .95rem; border: 1px solid var(--b3-trait); border-radius: 999px;
  background: transparent; color: var(--b3-texte); font: 600 var(--t-s)/1 var(--f-texte); cursor: pointer;
}
.bibliotheque-3d__fermer:hover { border-color: var(--b3-laiton); color: var(--b3-laiton); }

@media (max-width: 640px) {
  .bibliotheque-3d__filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .bibliotheque-3d__filtres::-webkit-scrollbar { display: none; }
  .bibliotheque-3d__filtres button { white-space: nowrap; }
  .bibliotheque-3d__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .bibliotheque-3d__nom { padding: .5rem .6rem 0; font-size: var(--t-xs); }
  .bibliotheque-3d__famille { padding: .15rem .6rem .55rem; font-size: .72rem; }
  .bibliotheque-3d__dialogue { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  .bibliotheque-3d__visionneuse { height: 100%; display: flex; flex-direction: column; border-radius: 0; }
  .bibliotheque-3d__scene { flex: 1; aspect-ratio: auto; max-height: none; }
  .bibliotheque-3d__lien { margin-left: 0; order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bibliotheque-3d__carte { transition: none; }
  .bibliotheque-3d__carte:hover { transform: none; }
}