/* ============================================================
   SpiLi — Le répertoire des ressources
   Identité « Le Filet » · lot L-1
   ------------------------------------------------------------
   Une page de liens sortants pose un risque de forme propre :
   elle ressemble vite à un annuaire, c'est-à-dire à une grille
   de vignettes équivalentes où l'œil ne lit plus que des noms.
   La mise en page l'évite en donnant le premier rang à la
   PHRASE — ce que la ressource documente — et le second au nom.
   On lit ce qu'on va trouver, puis chez qui.

   Aucune couleur ne code ici : l'état d'une adresse (protégée,
   sans réponse) est dit en toutes lettres et marqué par la
   trame du filet, jamais par une pastille rouge ou verte.
   ============================================================ */

.rep-reserve {
  border-left: var(--spili-notation) solid var(--spili-texte);
  padding-left: 18px;
  max-width: 76ch;
  font-size: 0.96rem; line-height: 1.62;
  color: var(--spili-texte-doux);
  margin-bottom: 40px;
}

/* Le sommaire. Deux colonnes de liens d'ancre : la page est longue, et une
   page longue sans plan se parcourt au pouce plutôt qu'à la lecture. */
.rep-sommaire {
  border: 1px solid var(--spili-trait);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 40px;
}

.rep-sommaire-titre {
  font-family: var(--spili-data);
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 10px;
}

.rep-sommaire ul { list-style: none; margin: 0 0 4px; padding: 0; }
.rep-sommaire li { margin-bottom: 4px; }

.rep-sommaire a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 3px 0;
  text-decoration: none;
  color: var(--spili-texte-doux);
  border-bottom: 1px solid var(--spili-trait-faible);
}

.rep-sommaire a:hover, .rep-sommaire a:focus-visible { color: var(--spili-accent-fort); }

.rep-compte {
  font-family: var(--spili-data);
  font-size: 0.78rem;
  color: var(--spili-texte-faible);
  font-variant-numeric: tabular-nums;
}

.rep-chapeau {
  max-width: 72ch;
  color: var(--spili-texte-doux);
  line-height: 1.62;
  margin-top: 12px;
}

.rep-famille { margin-top: 44px; scroll-margin-top: 90px; }

.rep-famille-titre {
  font-size: 0.82rem; letter-spacing: 0.10em; text-transform: uppercase;
  font-family: var(--spili-data);
  color: var(--spili-texte-faible);
  padding-bottom: 8px;
  border-bottom: var(--spili-filet) solid var(--spili-texte);
  margin-bottom: 0;
}

/* La liste. Un filet unique entre les entrées — pas de carte, pas d'ombre :
   une ressource n'est pas un produit dans une grille. */
.rep-liste { list-style: none; margin: 0; padding: 0; }

.rep-item {
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--spili-trait);
  max-width: 82ch;
}

.rep-nom { margin: 0 0 6px; }

.rep-nom a {
  font-family: var(--spili-titre);
  font-size: 1.12rem; font-weight: 600;
  color: var(--spili-texte);
  text-decoration: none;
  border-bottom: var(--spili-filet) solid var(--spili-accent-doux);
  padding-bottom: 1px;
  transition: border-color var(--spili-transition), color var(--spili-transition);
}

.rep-nom a:hover, .rep-nom a:focus-visible {
  color: var(--spili-accent-fort);
  border-bottom-color: var(--spili-accent-fort);
}

.rep-documente {
  margin: 0 0 10px;
  line-height: 1.62;
  color: var(--spili-texte-doux);
  max-width: 74ch;
}

.rep-liees { margin: 0 0 10px; font-size: 0.9rem; }
.rep-liees a { color: var(--spili-accent); }

.rep-etiquette {
  font-family: var(--spili-data);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-right: 8px;
}

/* L'appareil : domaine, pays, langues, date de relevé. En monospace et en
   petit — c'est de la donnée de citation, pas de la lecture courante. */
.rep-appareil {
  margin: 0;
  font-family: var(--spili-data);
  font-size: 0.74rem;
  color: var(--spili-texte-faible);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}

.rep-domaine { color: var(--spili-texte-doux); }

.rep-etat {
  padding-left: 12px;
  border-left: var(--spili-notation) solid var(--spili-texte);
  border-image: var(--spili-trame-rapporte) 1;
}

.rep-etat--mort { border-image: var(--spili-trame-probable) 1; }

/* Une entrée sans réponse reste lisible et reste à sa place : elle pâlit d'un
   cran, elle ne disparaît pas. Le retrait est une décision éditoriale, écrite
   dans le corpus — jamais un effet de style. */
.rep-item--injoignable .rep-nom a { color: var(--spili-texte-faible); }

.rep-etat-corpus {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--spili-trait);
  font-size: 0.9rem;
  color: var(--spili-texte-faible);
  max-width: 74ch;
}

@media (max-width: 640px) {
  .rep-sommaire { padding: 18px 20px; }
  .rep-item { padding: 18px 0 16px; }
}