/* Page /biblio : reprend site.css (banc d'essai). Graphe 3D des citations sur papier millimétré, recherche,
   filtres, panneau de l'article choisi (à droite, ou en bas sur téléphone), liste de secours. */

:root {
  --theme-ballottement: var(--eau);
  --theme-regulation: var(--c1);
  --theme-reseaux: var(--c4);
  /* simulation et autres : distincts des trois autres thèmes en vision normale, deutéranopie, protanopie et tritanopie
     (écart minimal ΔE76 ≈ 22, simulation de Machado 2009) ; « autres », la catégorie la moins utile, en gris clair */
  --theme-simulation: #bf55bf;
  --theme-autre: #9ca1a9;
  /* la rubrique « 01 Graphe », les outils et la scène tiennent sous le bandeau (hauteur mesurée par navigation.js)
     quand on arrive par le sommaire : 11.75rem = rubrique (≈ 3.35rem) + outils et marges (8.4rem) */
  --hauteur-vue: clamp(28rem, calc(100svh - 11.75rem - var(--hauteur-bandeau)), 50rem);
}
.theme--ballottement { --t: var(--theme-ballottement); }
.theme--regulation { --t: var(--theme-regulation); }
.theme--reseaux { --t: var(--theme-reseaux); }
.theme--simulation { --t: var(--theme-simulation); }
.theme--autre { --t: var(--theme-autre); }

.planche--biblio [hidden] { display: none !important; }

/* ----- Ouverture ----- */
.ouverture--biblio { min-height: 0; align-items: end; padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.ouverture--biblio { padding-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); }
.ouverture--biblio h1 { margin: 0; font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.75rem); }
.ouverture--biblio .chapo { max-width: 42rem; margin-bottom: 1.1rem; }
.ouverture--biblio .chapo b { font-weight: 650; font-variant-numeric: tabular-nums; }
.provenance {
  margin: 0; max-width: 42rem; padding-top: 0.8rem; border-top: 1.5px solid var(--encre);
  font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--encre-2); text-wrap: pretty;
}

/* ----- Planche ----- */
.biblio { max-width: 88rem; margin: 0 auto; padding: 0 var(--gouttiere); }
.planche--biblio {
  margin: 0;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
  grid-template-areas: "outils outils" "vue panneau" "legende legende" "texte texte";
  gap: 1.1rem 1.75rem;
}
.biblio__outils { grid-area: outils; display: flex; flex-wrap: wrap; align-items: end; gap: 0.9rem 1.25rem; font-family: var(--sans); }
.biblio__vue { grid-area: vue; min-width: 0; }
.panneau { grid-area: panneau; }
.legende { grid-area: legende; }
.planche--biblio > figcaption { grid-area: texte; }

/* ----- Recherche ----- */
.recherche { flex: 1 1 18rem; max-width: 34rem; min-width: 0; }
.recherche__champ { position: relative; }
.recherche input {
  appearance: none; -webkit-appearance: none; width: 100%; margin: 0; border-radius: 0;
  padding: 0.55rem 0.75rem; border: 1.5px solid var(--encre); background: var(--planche); color: var(--encre);
  font: 520 1rem/1.25 var(--sans); font-stretch: 94%;
}
.recherche input::placeholder { color: var(--encre-3); opacity: 1; }
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche input:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.suggestions {
  position: absolute; z-index: 9; left: 0; right: 0; top: calc(100% - 1.5px);
  margin: 0; padding: 0; list-style: none; max-height: min(26rem, 62svh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--planche); border: 1.5px solid var(--encre);
}
.suggestion {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: baseline;
  padding: 0.55rem 0.75rem 0.55rem 0.6rem; border-left: 3px solid transparent; border-top: 1px solid var(--filet); cursor: pointer;
}
.suggestion:first-child { border-top: 0; }
.suggestion:hover { background: color-mix(in srgb, var(--encre) 6%, transparent); }
.suggestion[aria-selected="true"] { background: color-mix(in srgb, var(--encre) 8%, transparent); border-left-color: var(--encre); }
.suggestion--vide { cursor: default; color: var(--encre-2); display: block; }
.suggestion .pastille { grid-row: 1 / span 2; align-self: start; margin-top: 0.3rem; }
.suggestion__titre { font-size: 0.9375rem; font-weight: 560; line-height: 1.3; overflow-wrap: anywhere; }
.suggestion__meta { grid-column: 2; font-size: 0.8125rem; line-height: 1.35; color: var(--encre-2); overflow-wrap: anywhere; }
mark { background: var(--selection); color: inherit; padding: 0; }

.pastille { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--t, var(--c0)); flex: none; }
.pastille--n0 { border: 2px solid var(--encre); }      /* notre biblio, cerclée d'encre comme dans la scène */

/* ----- Compte d'articles affichés ----- */
.biblio__visibles { margin: 0 0 0.6rem; font-size: 0.8125rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }

/* ----- Légende cliquable (filtres) ----- */
.choix--cases > label + label { margin-left: 0; }
.choix--cases { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.choix--cases legend { width: 100%; }
.choix--cases span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; font-size: 0.875rem; }
.choix--cases span.choix__texte { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; transition: none; }
.choix--cases small { font-size: 0.75rem; font-weight: 500; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.choix--cases input:checked + span { background: transparent; color: var(--encre); }
.choix--cases input:checked:hover + span { background: color-mix(in srgb, var(--encre) 7%, transparent); }
.choix--cases input:not(:checked) + span { border-style: dashed; border-color: var(--encre-3); color: var(--encre-3); }
.choix--cases input:not(:checked) + span .pastille,
.choix--cases input:not(:checked) + span .cle { background: transparent; box-shadow: inset 0 0 0 1.5px var(--t, var(--encre-3)); }
.choix--cases input:not(:checked) + span .cle--n0 { border-color: var(--encre-3); box-shadow: none; }
/* « Graphe 3D » sans WebGL : visiblement indisponible */
.choix input:disabled { cursor: not-allowed; }
.choix input:disabled + span { opacity: 0.45; border-style: dashed; }

/* ----- Scène 3D ----- */
.biblio__scene {
  position: relative; height: var(--hauteur-vue); overflow: hidden; border: 1px solid var(--filet);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--papier) 50%, transparent) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--papier) 50%, transparent) 0 1px, transparent 1px 12px),
    var(--planche);
}
.biblio__toile { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline-offset: -3px; }
.biblio__toile:active { cursor: grabbing; }
.biblio__toile.survol { cursor: pointer; }
.biblio__etat {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 560; color: var(--encre-2); text-align: center; pointer-events: none;
}
.biblio__etat--erreur { color: var(--c1); }
.biblio__boutons { position: absolute; top: 0.6rem; right: 0.6rem; display: flex; gap: 0.35rem; }
.biblio__boutons .bouton { background: var(--planche); min-width: 2.5rem; padding-inline: 0.7rem; }
.biblio__boutons .bouton:hover { background: color-mix(in srgb, var(--encre) 7%, var(--planche)); }
.biblio__etiquette {
  position: absolute; left: 0; top: 0; margin: 0; transform: translate(14px, -50%); pointer-events: none;
  padding: 0.12rem 0.4rem; background: var(--planche); border: 1px solid var(--encre);
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 650; font-stretch: 90%; white-space: nowrap;
}
.biblio__etiquette--gauche { transform: translate(calc(-100% - 14px), -50%); }
/* article montré depuis une liste du panneau (survol, clavier) : un viseur, visible même parmi des points sombres ou
   si l'article est caché derrière d'autres */
.biblio__repere {
  position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; transform: translate(-50%, -50%); pointer-events: none;
  border: 2px solid var(--encre); border-radius: 50%; outline: 2px solid var(--planche);
}
.biblio__repere::before, .biblio__repere::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.biblio__repere::before { width: 3.5rem; height: 2px; border-inline: 0.6rem solid var(--encre); }
.biblio__repere::after { width: 2px; height: 3.5rem; border-block: 0.6rem solid var(--encre); }
.infobulle {
  position: absolute; left: 0; top: 0; z-index: 2; max-width: min(21rem, 80%); pointer-events: none;
  padding: 0.5rem 0.65rem; background: var(--encre); color: var(--fond); font-family: var(--sans); font-size: 0.8125rem; line-height: 1.35;
}
.infobulle b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-weight: 600; font-size: 0.875rem; margin-bottom: 0.2rem;
}
.infobulle span { color: color-mix(in srgb, var(--fond) 72%, transparent); }
/* article d'une liste du panneau hors du cadre : l'infobulle seule, au bord de la scène, le dit */
.infobulle .infobulle__note {
  display: block; margin-top: 0.35rem; padding-top: 0.3rem; border-top: 1px solid color-mix(in srgb, var(--fond) 35%, transparent);
  color: var(--fond); font-weight: 560;
}
.biblio__scene .consigne { bottom: 0.8rem; max-width: calc(100% - 2rem); white-space: normal; text-align: center; }

/* ----- Liste (vue de secours) ----- */
.biblio__liste { height: var(--hauteur-vue); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--filet); padding: 0.9rem 1rem 1.25rem; font-family: var(--sans); background: var(--planche); }
.biblio__compte { margin: 0 0 0.6rem; font-size: 0.875rem; color: var(--encre-2); }
.note-liste { margin: 0 0 0.9rem; padding-left: 0.9rem; border-left: 1.5px solid var(--encre); font-size: 0.875rem; line-height: 1.45; }
.biblio__liste > .bouton { margin-top: 0.9rem; }

/* ----- Listes d'articles (panneau et vue liste) ----- */
.articles { list-style: none; margin: 0; padding: 0; font-family: var(--sans); }
.articles > li + li { border-top: 1px solid var(--filet); }
button.article {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: baseline;
  width: 100%; margin: 0; padding: 0.5rem 0.35rem 0.5rem 0.3rem; border: 0; border-left: 3px solid transparent; border-radius: 0;
  background: none; color: var(--encre); font: inherit; text-align: left; cursor: pointer;
}
button.article:hover { background: color-mix(in srgb, var(--encre) 6%, transparent); }
button.article:focus-visible { outline: 2px solid var(--c1); outline-offset: -2px; }
button.article[aria-current="true"] { border-left-color: var(--encre); background: color-mix(in srgb, var(--eau) 8%, transparent); }
button.article.article--montre { border-left-color: var(--encre-3); background: color-mix(in srgb, var(--encre) 6%, transparent); }
button.article .pastille { grid-row: 1 / span 3; align-self: start; margin-top: 0.3rem; }
.article__titre { font-size: 0.9375rem; font-weight: 560; line-height: 1.3; overflow-wrap: anywhere; }
.article__meta { grid-column: 2; font-size: 0.8125rem; line-height: 1.35; color: var(--encre-2); overflow-wrap: anywhere; }
.article__meta i { font-family: var(--serif); }
.article__meta--chiffres { color: var(--encre-3); }

/* ----- Panneau ----- */
.panneau {
  min-width: 0; max-height: var(--hauteur-vue); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0.25rem 1rem 1.5rem; border-left: 1px solid var(--filet); font-family: var(--sans);
}
.panneau__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panneau__surtitre {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  font-size: 0.75rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2);
}
.panneau__titre {
  margin: 0.45rem 0 0.6rem; font-family: var(--sans); font-weight: 720; font-stretch: 86%;
  font-size: 1.375rem; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere;
}
.panneau__titre:focus { outline: none; }
.panneau__titre:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.panneau__aide { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: var(--encre-2); }
.panneau__notice { margin: 0 0 0.45rem; font-family: var(--serif); font-size: 1rem; line-height: 1.45; }
.panneau__niveau { margin: 0 0 0.45rem; font-size: 0.875rem; color: var(--encre-2); }
.panneau__liens { margin: 0 0 0.9rem; font-size: 0.875rem; overflow-wrap: anywhere; }
.panneau__chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem 1rem; margin: 0 0 0.9rem; }
.panneau__chiffres dt { font-size: 0.6875rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2); }
.panneau__chiffres dd { margin: 0.1rem 0 0; font-size: 1rem; font-weight: 620; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.panneau__chiffres .large { grid-column: 1 / -1; }
.panneau__chiffres code { font-size: 0.875rem; font-weight: 500; }
.panneau__actions { margin: 0 0 0.5rem; }
.panneau__intertitre, .panneau__second > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.55rem; margin: 1.1rem 0 0.25rem; padding-top: 0.6rem; border-top: 1.5px solid var(--encre);
  font-family: var(--sans); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
}
.panneau__second > summary { list-style: none; cursor: pointer; border-top-width: 1px; border-top-color: var(--filet); }
.panneau__second > summary::-webkit-details-marker { display: none; }
.panneau__second > summary::after { content: "+"; margin-left: auto; font-size: 1rem; font-weight: 500; }
.panneau__second[open] > summary::after { content: "−"; }
.panneau__compte { font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--encre-2); font-size: 0.8125rem; }
.panneau__vide { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--encre-2); }
.panneau__note { margin: 0.5rem 0 0; padding-left: 0.7rem; border-left: 1.5px solid var(--filet); font-size: 0.8125rem; line-height: 1.45; color: var(--encre-2); }
.panneau .bouton--discret { margin-top: 0.4rem; }
.bouton--discret { border-color: var(--filet); font-size: 0.8125rem; padding: 0.35rem 0.65rem; }
.bouton--discret:hover { border-color: var(--encre); }

/* ----- Légende ----- */
.legende { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 1.25rem 2rem; align-items: start; font-family: var(--sans); font-size: 0.875rem; color: var(--encre-2); }
@media (max-width: 1100px) { .legende { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .legende > :first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .legende { grid-template-columns: minmax(0, 1fr); } }
.legende__titre { margin: 0 0 0.45rem; font-size: 0.75rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2); }
.legende__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.legende__liste li { display: flex; align-items: center; gap: 0.6rem; color: var(--encre); }
.legende__note { width: 100%; margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.45; }
.cle { display: inline-block; flex: none; border-radius: 50%; background: var(--encre-3); }
.cle--theme { width: 0.75rem; height: 0.75rem; margin-inline: 0.425rem; background: var(--t); }
.cle--n0 { width: 1rem; height: 1rem; margin-inline: 0.3rem; border: 2px solid var(--encre); }
.cle--n1 { width: 0.62rem; height: 0.62rem; margin-inline: 0.49rem; }
.cle--n2 { width: 0.38rem; height: 0.38rem; margin-inline: 0.61rem; }
.choix--cases .cle { margin-inline: 0; }
.cle--choisi { width: 0.8rem; height: 0.8rem; margin-inline: 0.4rem; background: var(--eau); box-shadow: 0 0 0 2px var(--planche), 0 0 0 3.5px var(--encre); }
.trait { display: inline-block; flex: none; width: 1.6rem; height: 0; border-top: 2px solid var(--encre); }
.trait--pale { border-top-color: color-mix(in srgb, var(--encre-3) 60%, transparent); }
.trait--tirets { border-top-style: dashed; }
.panneau__intertitre .trait, .panneau__second .trait { width: 1.1rem; }

/* ----- Tablette et téléphone : panneau en bas ----- */
@media (max-width: 979px) {
  :root { --hauteur-vue: clamp(20rem, calc(58svh + 3.6rem - var(--hauteur-bandeau)), 34rem); }
  .planche--biblio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "outils" "vue" "panneau" "legende" "texte"; }
  .panneau { max-height: none; overflow: visible; padding: 0; border-left: 0; }
  /* feuille du bas : assez basse pour laisser voir toute la scène remontée sous le bandeau (scroll-margin-top de
     .biblio__scene dans site.css, voir amenerScene()), entre 36 et 46 % de l'écran */
  :root { --hauteur-feuille: clamp(36svh, calc(100svh - var(--hauteur-vue) - var(--hauteur-bandeau) - 0.75rem), 46svh); }
  .panneau.ouvert {
    position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; max-height: var(--hauteur-feuille); overflow-y: auto;
    padding: 0.85rem var(--gouttiere) calc(1rem + env(safe-area-inset-bottom));
    background: var(--planche); border-top: 2px solid var(--encre);
  }
  body.feuille-ouverte { padding-bottom: var(--hauteur-feuille); }
  .panneau__titre { font-size: 1.2rem; }
}
@media (max-width: 600px) {
  .biblio__outils { gap: 0.75rem 0.75rem; }
  .recherche { flex-basis: 100%; max-width: none; }
  .biblio__outils .choix span, .biblio__outils .bouton { padding: 0.5rem 0.7rem; font-size: 0.875rem; }
  .biblio__visibles { flex-basis: 100%; margin: -0.35rem 0 0; }
  .biblio__boutons { top: 0.45rem; right: 0.45rem; }
  .biblio__boutons .bouton { min-width: 2.3rem; padding: 0.4rem 0.55rem; }
  .biblio__liste { padding: 0.75rem 0.6rem 1rem; }
  /* comme les commandes des figures (site.css) : la vue en deux segments égaux, le bouton sur le reste de la ligne */
  .biblio__outils > .choix { display: flex; flex-wrap: wrap; flex: 1 1 auto; }
  .biblio__outils > .choix > legend { width: 100%; }
  .biblio__outils > .choix > label { flex: 1 1 auto; }
  .biblio__outils > .choix > label > span { display: flex; justify-content: center; width: 100%; }
  .biblio__outils > .bouton { flex: 1 1 auto; }
}
/* écran tactile : boutons de la scène, articles des listes et suggestions à 44 px au moins */
@media (pointer: coarse) {
  .biblio__boutons { gap: 0.4rem; }
  .biblio__boutons .bouton { min-width: 2.75rem; }
  .bouton--discret { min-height: 2.75rem; }
  .recherche input { min-height: 2.75rem; }
  button.article { padding-block: 0.7rem; }
  .suggestion { padding-block: 0.75rem; }
  .choix--cases span { min-height: 2.75rem; }
  .panneau__second > summary { padding-block: 0.75rem; }
}
@media (hover: none) {
  .biblio__boutons .bouton:hover { background: var(--planche); }
  button.article:hover:not([aria-current="true"]):not(.article--montre), .suggestion:hover:not([aria-selected="true"]) { background: none; }
}

@media print {
  .biblio__outils, .biblio__boutons, .biblio__scene { display: none; }
  .panneau { max-height: none; overflow: visible; }
}