/* ==========================================================================
   La vitrine des tellys (/tellys). Maquette validée le 2026-09-09.

   Les couleurs et les polices de catégorie viennent de categories.css,
   généré depuis tellyah-kotlin : rien n'est écrit en dur ici.
   ========================================================================== */

/* ---------- Liens de catégorie ------------------------------------------- */

/* Sept LIENS vers /tellys/<slug> depuis l'étape 25, plus un filtre révélé par
   du script : ils sont dans le HTML servi, donc crawlables, et ils marchent
   sans JavaScript. */
.vitrine__categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-4);
}
.vitrine__categories-t {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-right: 4px;
}

.chip-categorie {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--subtle);
  border: 1px solid var(--stroke);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease, border-color .15s ease;
}
/* L'encre de la catégorie ne sert QUE sur le survol et le focus : sept puces
   colorées au repos feraient sept accents concurrents, et la direction n'en
   veut qu'un. La règle valait pour l'état actif du filtre, elle vaut telle
   quelle maintenant que ce sont des liens. */
.chip-categorie:hover,
.chip-categorie:focus-visible {
  color: var(--categorie-text);
  border-color: var(--categorie-text);
}
.chip-categorie:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- La grille ---------------------------------------------------- */

/* La vitrine DÉBORDE le conteneur de texte. `.section-mince` plafonne à 680 px,
   ce qui est juste pour un paragraphe et faux pour une grille : mesuré, la
   grille n'y tenait que DEUX colonnes de 310 px, et huit cartes faisaient une
   page de quatre écrans. La largeur de lecture reste celle du texte, la grille
   prend celle de la page. */
.vitrine {
  width: min(1120px, 100vw - 40px);
  margin-inline: calc(50% - min(560px, 50vw - 20px));
}

.vitrine__grille {
  display: grid;
  gap: var(--sp-3);
  /* `min()` et non `minmax(230px, …)` seul : `auto-fill` ne réduit jamais une
     piste sous son minimum, et une carte de 230 px déborderait un écran de
     320. Le landmine est documenté dans ETAT_REFONTE.md. */
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

.tly-telly { min-width: 0; }
.tly-telly[hidden] { display: none; }

.tly-telly__lien {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tly-telly__lien:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 16px;
}

/* Carré imposé, décision du 2026-09-09. Le corpus a trois rapports d'image
   (six covers carrées, une en 3:4, une en 2:3) ; `object-fit: cover` recadre
   les deux autres pour que les titres et les chips restent alignés. */
.tly-telly__cover {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(var(--bleu), .5);
}
.tly-telly__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 92 % sous le titre, et le chiffre a une raison mesurée : à 85 % les encres
   les plus saturées plafonnent à 3,7:1 sur la cover et échouent ; à 92 % elles
   passent à 4,6:1. L'interdit qui reste : encre de catégorie sur une image
   SANS scrim. */
.tly-telly__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg,
    rgba(var(--bleu), 0) 0%,
    rgba(var(--bleu), .62) 42%,
    rgba(var(--bleu), .92) 100%);
}

.tly-telly__titre {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-family: var(--categorie-font);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  color: var(--categorie-text);
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.tly-telly__pied { display: block; padding: 12px 2px 0; }

.tly-telly__extrait {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.tly-telly__meta {
  display: flex;
  /* ⚠️ `center` et non `baseline` : la ligne mêle une pastille à fond, un
     glyphe et du mono. Sur une ligne de base commune, la pastille remonte et
     le glyphe descend. Mesuré sur la capture du 2026-09-14. */
  align-items: center;
  /* Le pas vertical est plus serré que l'horizontal : quand la ligne passe à
     deux lignes sur mobile, 10 px de gouttière verticale ouvraient un trou
     qu'on lisait comme une séparation de blocs. */
  gap: 4px 10px;
  flex-wrap: wrap;
}

/* Les compteurs passent à la ligne d'un BLOC, jamais en deux morceaux :
   « 23 bubbles · 1 choice » coupé après « 1 » se lit comme deux informations.
   Sur une carte de 265 px la rangée tient sur une ligne ; c'est sous 360 px
   qu'elle se replie, et c'est là que la coupure se voyait. */
.tly-telly__compteurs { white-space: nowrap; }

/* Le SYMBOLE DE TRADUCTION de l'application, sur une carte dont le telly n'est
   pas dans la langue de la page. Même tracé que `AppDrawables.IconTranslate`,
   et même convention : l'accent signale qu'on regarde une traduction.

   ⚠️ Cette règle vit ICI et non dans categorie.css. Elle y était, et
   categorie.css n'est chargée que par les pages de catégorie : sur /en/tellys
   le marqueur partait sans aucun style, à la taille du corps, et déséquilibrait
   toute la ligne. Une règle qui habille la CARTE appartient à la feuille de la
   carte, pas à celle d'une page. */
.tly-telly__traduit {
  display: inline-flex;
  align-items: center;
  color: var(--orange);
}
.tly-telly__traduit svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: currentColor;
}
.tly-telly__categorie {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  color: var(--categorie-text);
  background: color-mix(in srgb, var(--categorie-main) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--categorie-text) 28%, transparent);
}
.tly-telly__compteurs {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--subtle);
}

/* ---------- La phrase de transparence ------------------------------------ */

/* Elle dit qui écrit ces histoires. Sans elle la page laisserait croire que
   c'est le catalogue de la communauté, et la page existe précisément pour
   créer une croyance sur le catalogue. */
.vitrine__transparence {
  max-width: 62ch;
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-3);
  border-left: 2px solid rgba(212, 175, 55, .35);
  color: var(--subtle);
  font-size: 14.5px;
}

@media (prefers-reduced-motion: reduce) {
  .chip-categorie, .tly-telly__lien { transition: none; }
}