/* Index : rail de filtres à gauche, planches à droite. En tête du rail, deux
   lignes disent ce qu'est le site et mènent à « À propos et citer » (06/11/2026). */
.rail .about { font-size: .9rem; line-height: 1.4; color: var(--soft); margin: 0 0 1.1rem; }
.rail .about a { color: var(--deep); }
body.index { display: grid; grid-template-columns: 19rem minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
body.index > .top { grid-column: 1 / -1; }

.rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 2px solid var(--ink);
  padding: 1.5rem 1.5rem 3rem; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
/* La recherche ouvre le rail, en grand : c'est la tâche première (09/11/2026, revue D5). */
.search input { width: 100%; font-size: 1.15rem; padding: .55rem 0; }
/* Luciole est large : le texte d'aide de la recherche tient dans la colonne. */
:root[data-theme="white"] .search input { font-size: .9rem; }
.filters summary { list-style: none; cursor: pointer; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
.filters[open] > summary::after, .facet[open] > summary::after { transform: translateY(.05em) rotate(-135deg); }
.filters > summary { font-family: var(--display); font-weight: var(--dw); font-size: 1.2rem; color: var(--deep); margin: 1.6rem 0 .2rem; }
/* Une facette : son titre la replie. */
.facet { margin-top: 1.25rem; }
.facet > summary { display: flex; align-items: baseline; gap: .4rem; color: var(--deep);
  padding-bottom: .3rem; border-bottom: 2px solid var(--ink); }
.facet > summary::after { margin-left: auto; width: .4em; height: .4em; border-width: 1.5px; }
.facet > summary:hover h2 { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.facet h2 { font-size: 1rem; color: var(--deep); }
.facet .nsel { font-size: .875rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.filters ul { list-style: none; margin: .45rem 0 0; padding: 0; }
.filters button.v { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; }
.filters button.v:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.toc button.v { display: flex; align-items: baseline; gap: .4rem; padding: .18rem 0; font-size: .95rem; }
.toc button.v::after { content: ""; order: 2; flex: 1; border-bottom: 1.5px dotted var(--lead); transform: translateY(-.25em); }
.toc .n { order: 3; font-variant-numeric: tabular-nums; color: var(--soft); font-size: .875rem; }
.v[aria-pressed="true"] { color: var(--deep); font-weight: 700; }
.toc .v[aria-pressed="true"] .l::before { content: "› "; }
.toc .v[aria-pressed="true"] .l { border-bottom: 2px solid var(--deep); }
.v[aria-disabled="true"] { color: var(--off); cursor: default; }
.v:hover:not([aria-disabled="true"]) .l { text-decoration: underline; }
.pics, .syms { display: grid; gap: .3rem .5rem; }
.pics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.syms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pics button.v, .syms button.v { display: flex; flex-direction: column; gap: .2rem; padding: .3rem .1rem .35rem;
  font-size: .875rem; line-height: 1.2; border-bottom: 2px solid transparent; }
.pics img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--plate); padding: calc(var(--plate-pad) / 2); }
.pics .nodraw { aspect-ratio: 1; border: 1.5px dashed var(--rule); }
.syms button.v { flex-direction: row; align-items: center; gap: .45rem; }
.syms img { width: 2.6rem; height: 1.45rem; object-fit: contain; flex: none; filter: var(--ink-filter, none); }
.pics .v[aria-pressed="true"], .syms .v[aria-pressed="true"] { border-bottom-color: var(--deep); }
.pics .v[aria-pressed="true"] .l::before, .syms .v[aria-pressed="true"] .l::before { content: "› "; }
.pics .v[aria-disabled="true"] img, .syms .v[aria-disabled="true"] img { opacity: .35; }
#ui-clear, .linklike { font: inherit; font-size: .95rem; background: none; border: 0; padding: 0; margin-top: 1.4rem;
  color: var(--deep); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* réglage des images : pas un filtre, il ne compte pas et ne se retire pas
   avec eux ; en bas du rail, après les filtres (09/11/2026, revue D5) */
.imgmode { margin: 1.8rem 0 0; border: 0; padding: 1rem 0 0; border-top: 2px solid var(--ink); min-width: 0; display: flex; flex-wrap: wrap; gap: .15rem 1rem; font-size: .9rem; }
.imgmode legend { float: left; font-family: var(--display); font-weight: var(--dw); font-size: 1.05rem; color: var(--deep); padding: 0; margin: 0 .2rem 0 0; }
.imgmode label { display: inline-flex; gap: .3rem; align-items: baseline; cursor: pointer; white-space: nowrap; }
.imgmode input { accent-color: var(--deep); margin: 0; transform: translateY(.1em); }
.imgmode input:checked + span { color: var(--deep); font-weight: 700; }
.imgmode .sw { display: inline-flex; margin-left: .3rem; vertical-align: -.05em; }
.imgmode .sw i { width: .6rem; height: .6rem; border: 1px solid var(--ink); margin-left: -1px; }

.result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; padding: 1rem 2.5rem .9rem;
  border-bottom: 2px solid var(--ink); }
#ui-count { margin: 0; font-family: var(--display); font-weight: var(--dw); font-size: 1.25rem; color: var(--deep); }
#ui-active { margin: 0; font-size: .95rem; color: var(--soft); }
#ui-active button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; }
.sort { margin-left: auto; font-size: .95rem; color: var(--soft); }
.sort select { font: inherit; color: var(--ink); background: none; border: 1px solid var(--ink);
  border-radius: 0; padding: .2rem .4rem; }

/* ---- planches ---- */
.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.plate { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 1.3rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; min-width: 0; scroll-margin-top: 1rem; }
.plate:hover { background: var(--hover); }
/* Nom de la planche, de la liste : fond prune au survol (14/10/2026) ; les dessins restent à nu. */
.plate:hover h3, .plate:focus-visible h3, .alpha a:hover .hw, .alpha a:focus-visible .hw {
  background: var(--prune); color: var(--on-prune); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.plate:target { outline: 2px solid var(--deep); outline-offset: -2px; }
.fig { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: .7rem; }
/* Sans image, pas de vignette : le nom monte en haut de la carte (29/10/2026). */
.fig.empty { display: none; }
.fig img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--plate); padding: var(--plate-pad); }
.fig.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Un schéma (img.drawing) n'a pas de feuille : en thème sombre il s'inverse,
   encre claire sur le fond (site.css). En couleur ou en charte, et pour les
   termes dont la couleur est le sujet, il garde sa feuille et ses couleurs. */
.fig img.drawing { background: none; padding: 0; }
/* gris par défaut, sauf les termes dont la couleur est le sujet */
body[data-img="gris"] .plate:not(.keep) .fig img, body[data-img="gris"] .pics img { filter: var(--ink-grey, grayscale(1)); }
body[data-img="gris"] .plate:not(.keep) .fig.photo img { filter: grayscale(1); }
body[data-img="gris"] .pics img { background: none; padding: 0; }
/* Planche dont le mot est en couleur : grisée par la page, le mot excepté. */
body[data-img="gris"] .plate:not(.keep) .fig img.hl.greyed { filter: var(--ink-filter, none); }
body:not([data-img="gris"]) .fig img.drawing, .plate.keep .fig img.drawing { filter: none; background: var(--plate); padding: var(--plate-pad); }
.plate h3 { align-self: flex-start; padding: 0 .2rem; margin-left: -.2rem; font-size: 1.3rem; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.plate .o { color: var(--teal); font-weight: 600; font-size: .95rem; }
.plate .d { margin: .3rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--body2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plate .m { margin: .45rem 0 0; font-size: .875rem; color: var(--soft); }
.plate .credit { font-size: .875rem; color: var(--soft); margin: -.5rem 0 .4rem; overflow-wrap: anywhere; }

/* mots imagés, surlignés quand on filtre par « le nom évoque » */
.imgw { border-radius: 2px; }
body[data-im~="nature"] .imgw[data-img="nature"], body[data-im~="construction"] .imgw[data-img="construction"],
body[data-im~="food"] .imgw[data-img="food"], body[data-im~="object"] .imgw[data-img="object"],
body[data-im~="eponym"] .imgw[data-img="eponym"] { background: var(--mark); box-shadow: 0 0 0 2px var(--mark); }

/* ---- liste ---- */
.alpha { list-style: none; margin: 0; padding: .6rem 2.5rem 3rem; max-width: 60rem; }
.alpha li { padding: .7rem 0; border-bottom: 1px solid var(--ink); }
.alpha a { text-decoration: none; }
.alpha .hw { font-family: var(--display); font-weight: var(--dw); font-size: 1.2rem; padding: 0 .2rem; margin-left: -.2rem; }
.alpha .o { color: var(--teal); font-weight: 600; font-size: .95rem; margin-left: .5rem; }
.alpha p { margin: .15rem 0 0; max-width: 70ch; }
.alpha .m { font-size: .875rem; color: var(--soft); }
#ui-empty { padding: 2rem 2.5rem; font-size: 1.05rem; }

@media (max-width: 760px) {
  body.index { display: block; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 2px solid var(--ink); padding: 1rem 1rem 1.2rem; }
  .filters:not([open]) > summary { margin-bottom: 0; }
  /* « Filtrer » replié emporte le réglage des images (revue D9). */
  .filters:not([open]) ~ .imgmode { display: none; }
  .pics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .result { padding: .8rem 1rem; }
  .sort { margin-left: 0; }
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate { padding: .9rem .8rem 1rem; }
  .plate .d { -webkit-line-clamp: 2; }
  .alpha { padding: .4rem 1rem 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .plate { transition: background-color .15s ease-out; }
}