/* ============================================================
   SpiLi — L'Inventaire
   Identité « Le Filet » · lot 3-4
   ------------------------------------------------------------
   La seconde porte de l'Atlas : le corpus entier, rangé, exposé
   d'emblée. Régime clair — c'est un écran qui se lit, et le noir
   sert à voir, pas à lire.

   Aucune couleur ne code un contenu. La trame du filet dit la
   précision de la position ; l'accent ne dit qu'un état.
   ============================================================ */

.inventaire {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 34px;
  align-items: start;
}
.inventaire > * { min-width: 0; }


/* ---------- Les blocs ---------- */

.inventaire-bloc { margin-bottom: 26px; }
.inventaire-bloc[hidden] { display: none; }

.inventaire-bloc h3 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--spili-trait);
  font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em;
}

.inventaire-titre { color: var(--spili-texte); text-decoration: none; }
.inventaire-titre:hover { color: var(--spili-accent); }
.inventaire-titre:focus-visible {
  outline: 2px solid var(--spili-accent); outline-offset: 3px;
}

.inventaire-compte {
  margin-left: auto;
  font-family: var(--spili-data); font-size: 11px;
  color: var(--spili-texte-faible);
}

/* ---------- Les tuiles ---------- */

/* Le filet de séparation vient d'une ombre portée d'un pixel sur chaque tuile,
   et non d'un fond de grille que les cellules laisseraient voir. La règle du
   système — `gap: 2px` sur fond de trait — suppose une grille pleine ; ici le
   nombre d'entrées par catégorie est quelconque, et les places vides de la
   dernière ligne devenaient de larges aplats gris. L'ombre ne prend aucune
   place, se superpose entre voisines, et ne dessine rien là où il n'y a rien. */
.inventaire-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 0;
}
.inventaire-liste li[hidden] { display: none; }

.inventaire-tuile {
  display: block; height: 100%;
  padding: 12px 14px 13px;
  background: var(--spili-fond-eleve);
  box-shadow: 0 0 0 1px var(--spili-trait);
  text-decoration: none; color: var(--spili-texte-doux);
  transition: background var(--spili-transition), color var(--spili-transition);
}
.inventaire-tuile:hover { background: var(--spili-accent-voile); color: var(--spili-texte); }
.inventaire-tuile:focus-visible {
  outline: 2px solid var(--spili-accent); outline-offset: -2px;
}

/* La notation de précision. Trois trames, jamais trois couleurs : l'information
   ne doit pas dépendre de la teinte (WCAG 1.4.1). */
.inventaire-filet {
  display: block; width: 30px; height: var(--spili-notation);
  margin-bottom: 9px; background: var(--spili-texte);
}
.inventaire-filet--probable {
  background: repeating-linear-gradient(90deg, var(--spili-texte) 0 6px, transparent 6px 11px);
}
.inventaire-filet--rapporte {
  background: repeating-linear-gradient(90deg, var(--spili-texte) 0 2px, transparent 2px 6px);
}

.inventaire-nom { display: block; font-size: 0.92rem; line-height: 1.38; }

.inventaire-vide,
.inventaire-aucun {
  margin: 0; font-size: 0.9rem; color: var(--spili-texte-faible);
}
.inventaire-aucun { padding: 22px 0; }
.inventaire-aucun[hidden] { display: none; }

/* ---------- Le cartouche ---------- */

.inventaire-cartouche {
  /* L'en-tête du site est collant lui aussi : sans cet écart, le cartouche se
     range derrière lui et perd ses premières lignes — mesuré à 65 px masqués,
     signalé à la relecture du 30 août. */
  position: sticky; top: calc(var(--spili-entete) + 22px);
  /* Et il ne dépasse jamais la hauteur restante : au-delà, son bas sortait de
     l'écran sans qu'on puisse l'atteindre. */
  max-height: calc(100vh - var(--spili-entete) - 44px);
  overflow-y: auto;
  border: 1px solid var(--spili-trait);
  background: var(--spili-fond-eleve);
  padding: 18px 20px 20px;
}

.inventaire-cartouche-accueil {
  margin: 0; font-size: 0.88rem; line-height: 1.55;
  color: var(--spili-texte-faible);
}

.inventaire-cartouche dl { margin: 0; }
.inventaire-cartouche dl > div {
  display: grid; grid-template-columns: 74px 1fr; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--spili-trait-faible);
}
.inventaire-cartouche dt {
  font-family: var(--spili-data); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.inventaire-cartouche dd { margin: 0; font-size: 0.88rem; line-height: 1.45; }

.inventaire-cartouche-nom {
  margin: 0 0 10px; font-size: 1.14rem; font-weight: 400;
  line-height: 1.24; letter-spacing: -0.02em;
}

.inventaire-cartouche-filet {
  display: block; width: 40px; height: var(--spili-notation);
  margin-bottom: 12px; background: var(--spili-texte);
}
.inventaire-cartouche-filet.est-probable {
  background: repeating-linear-gradient(90deg, var(--spili-texte) 0 6px, transparent 6px 11px);
}
.inventaire-cartouche-filet.est-rapporte {
  background: repeating-linear-gradient(90deg, var(--spili-texte) 0 2px, transparent 2px 6px);
}

.inventaire-cartouche-lien {
  display: inline-block; margin-top: 14px;
  font-size: 0.85rem; color: var(--spili-accent);
}

/* ---------- La porte de la visite ---------- */

/* Un lien parmi des boutons : il change de page, et il doit le montrer. */
.atlas-porte-lien {
  display: inline-flex; align-items: center;
  padding: 8px 15px; font-size: 0.92rem;
  color: var(--spili-accent); text-decoration: none;
  border-right: 1px solid var(--spili-texte);
}
.atlas-porte-lien:hover { background: var(--spili-accent-voile); }
.atlas-porte-lien:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: -3px; }

/* ---------- Ruptures ---------- */

@media (max-width: 1120px) {
  .inventaire { grid-template-columns: 1fr 260px; gap: 24px; }
}

/* Sous 860, le cartouche passe sous les tuiles : il suit toujours le focus,
   mais il cesse d'être un panneau latéral — sur un écran étroit, une colonne
   de 260 px prend la moitié de la page pour trois lignes. */
@media (max-width: 860px) {
  .inventaire { grid-template-columns: 1fr; }
  .inventaire-cartouche { position: static; order: 2; }
  .inventaire-liste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Le renvoi vers la constellation. Discret, mais présent : une fonction ne
   disparaît pas avant que son remplaçant existe. Il s'effacera avec elle. */
.atlas-provisoire {
  margin: 10px 0 0; flex-basis: 100%;
  font-family: var(--spili-data); font-size: 11px;
  letter-spacing: 0.04em; color: var(--spili-texte-faible);
}
.atlas-provisoire a { color: var(--spili-accent); }

/* ---------- La porte vers la recherche plein texte (lot 5) ---------- *
 * Une ligne, pas un bandeau : l'inventaire montre tout, et la recherche n'est
 * qu'une autre manière d'y entrer — pas l'entrée principale qu'un gros champ
 * en tête de page laisserait croire.                                         */

.inventaire-recherche {
  grid-column: 1 / -1;
  font-family: var(--spili-data);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0 0 22px;
  padding-left: 14px;
  border-left: var(--spili-notation) solid var(--spili-texte);
}
.inventaire-recherche a {
  color: var(--spili-accent);
}
.inventaire-recherche a:hover,
.inventaire-recherche a:focus-visible {
  color: var(--spili-accent-fort);
}
.inventaire-recherche span {
  color: var(--spili-texte-faible);
}

/* Le chemin motivé de la constellation retirée (R-3).
   Masqué par défaut : `atlas.js` marque le document quand une adresse demande
   encore `?vue=constellation`, et ce seul cas le fait apparaître. Une page qui
   annoncerait un retrait à tous les visiteurs parlerait d'elle-même au lieu de
   montrer le corpus. */
.atlas-retrait { display: none; }
body[data-constellation-retiree] .atlas-retrait {
  display: block;
  font-family: var(--spili-data);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--spili-texte-doux);
  border-left: var(--spili-notation) solid var(--spili-alerte);
  padding: 12px 16px;
  margin: 14px 0 0;
  max-width: 78ch;
  background: var(--spili-fond-carte);
}
body[data-constellation-retiree] .atlas-retrait strong { font-weight: 400; color: var(--spili-texte); }

/* ---------- La silhouette d'aire (lot V-3) ----------
   L'inventaire était cent-vingt tuiles de texte. Cinquante-quatre entrées
   portent un contour INAO réel, déjà dans le dépôt depuis C-2 : elles montrent
   désormais leur forme.

   Ce n'est pas une carte — ni échelle, ni côte, ni position — mais une
   empreinte, cadrée sur elle-même. Elle ne code aucune information que le
   texte ne porte, et c'est pourquoi elle est `aria-hidden` : elle donne une
   physionomie à une tuile, elle ne la documente pas. */

.inventaire-tuile.a-silhouette {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.inventaire-tuile.a-silhouette .inventaire-filet,
.inventaire-tuile.a-silhouette .inventaire-nom { grid-column: 2; }

.inventaire-silhouette {
  grid-row: 1 / span 2;
  width: 46px; height: 32px;
  display: block;
  align-self: center;
}
/* Un aplat discret, sans contour : à quarante-six pixels, un trait de un
   pixel autour d'une forme découpée la rend illisible. C'est la masse qu'on
   lit, pas le tracé. */
.inventaire-silhouette path {
  fill: var(--spili-texte-faible);
  stroke: none;
  transition: fill var(--spili-transition);
}
.inventaire-tuile:hover .inventaire-silhouette path,
.inventaire-tuile:focus-visible .inventaire-silhouette path { fill: var(--spili-accent); }

@media (max-width: 560px) {
  .inventaire-tuile.a-silhouette { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .inventaire-silhouette { width: 38px; height: 26px; }
}