/* ==========================================================================
   Les pages de catégorie — étape 25.

   Servie par /tellys/<slug> et /en/tellys/<slug>, jamais par /tellys : la
   vitrine ne charge pas cette feuille.

   Les quatre variables --categorie-* viennent de categories.css, résolues par
   le `data-categorie` posé sur la section. Cette feuille n'en redéfinit
   aucune : elle les LIT.

   ⚠️ Aucune règle d'ici ne touche `.cta-page` ni `.nav-pill`. Le bouton
   d'install ne prend jamais la couleur de la catégorie, consigne de la
   propriétaire du 2026-09-13. Une garde de tools/check-polices-refs.mjs le
   vérifie sur la feuille servie, parce que c'est le genre de règle qu'une
   passe d'habillage rouvre sans y penser.
   ========================================================================== */

.cat-k {
  display: block;
  margin-bottom: 1rem;
  font: 500 .72rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--categorie-text);
}

/* Le h1 reste en Archivo ; SEUL le nom de la catégorie prend sa police et son
   encre. Maquette du 2026-09-14, variante B.

   Ce qui a tranché, et qui n'est pas une question de goût : Merriweather Sans,
   Quicksand et Roboto Slab sont des polices de TEXTE. En titre plein, ces trois
   pages-là ne lisaient pas « thématisées », elles lisaient « la police n'a pas
   chargé » ; et l'onciale du fantastique, sur une ligne entière, devenait
   pénible. Les sept encres, elles, passent le contraste sur le noir : 6,0:1 au
   pire (romance), 18,6:1 au mieux (bien-être). */
.cat-h1 {
  margin: 0 0 1.25rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--blanc);
}

.cat-h1 b {
  font-family: var(--categorie-font);
  font-weight: 700;
  color: var(--categorie-text);
  /* Le serrage d'Archivo ne vaut que pour Archivo : appliqué à une onciale ou
     à une anglaise, il colle les lettres. */
  letter-spacing: 0;
}

.cat-h2 {
  margin: 2.75rem 0 .75rem;
  font: 800 clamp(1.15rem, 2.4vw, 1.5rem)/1.15 "Archivo", system-ui, sans-serif;
  letter-spacing: -.03em;
  color: var(--blanc);
}

.cat-p {
  margin: 0 0 1rem;
  max-width: 58ch;
  color: var(--gris);
}

/* La grille d'une page de catégorie EST son filtre : pas de puces au-dessus.
   Elle ne s'étale pas non plus sur toute la largeur quand elle ne porte qu'une
   carte, sinon six pages sur sept afficheraient une affiche là où /tellys
   affiche une carte, pour le même telly. */
/* ⚠️ La grille d'une page de catégorie NE DÉBORDE PAS la colonne de texte,
   contrairement à celle de /tellys. Là-bas, huit cartes ont besoin de toute la
   page ; ici il y en a une ou deux, et les laisser déborder plaçait la carte au
   centre de la PAGE pendant que son titre restait calé sur la colonne. Le bloc
   se lisait en deux morceaux. On annule donc le débordement de `.vitrine`. */
.vitrine--categorie {
  margin-top: 1rem;
  width: 100%;
  margin-inline: 0;
}

/* ⚠️ `auto-fit` et une piste PLAFONNÉE, là où /tellys prend `auto-fill` et
   `1fr`. La différence se voit dès qu'il y a moins de cartes que de colonnes,
   ce qui est le cas de six catégories sur sept : `auto-fill` garde les pistes
   vides, la carte se cale tout à gauche, et elle flotte seule sous un titre
   centré. `auto-fit` replie les pistes vides, et `justify-content` centre ce
   qui reste. Le plafond de 300 px empêche l'unique carte de s'étaler en
   affiche : elle reste une carte, comme sur /tellys. */
.vitrine--categorie .vitrine__grille {
  max-width: 820px;
  margin-inline: auto;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 300px));
}

.cat-soeurs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Neutres au repos, l'encre de LEUR catégorie au survol. Six pastilles
   colorées d'emblée mettraient six accents en concurrence avec celui du h1,
   qui est le seul accent de la page. La règle est celle des puces de /tellys,
   écrite dans vitrine.css et validée à l'étape 18. */
.cat-soeurs a {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  font: 500 .9rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--subtle);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.cat-soeurs a:hover,
.cat-soeurs a:focus-visible {
  color: var(--categorie-text);
  border-color: var(--categorie-text);
}

/* Les catégories de l'application qui n'ont pas de page : NOMMÉES, jamais
   liées. Plus discrètes que le corps, pour qu'on ne les prenne pas pour des
   liens qui ne répondraient pas. Sans cette ligne, la liste au-dessus laisse
   croire que l'application propose sept catégories. */
.cat-autres {
  color: var(--subtle);
  font-size: .92rem;
  margin-top: 1rem;
}