/* categorie.css — page de liste d'une categorie. Partagee par toutes les
   categories, pas propre a l'une d'elles : la mise en page est la meme, seule
   la couleur change, et elle vient deja de data-cat.

   Pas une grille de cartes egales : une liste. Une categorie qui demarre a un
   seul element ne doit pas afficher une carte solitaire au milieu du vide, et
   une categorie qui en aura quinze doit rester parcourable. */

.liste-elements {
  display: grid;
  gap: 2.5rem;
  margin-top: 2rem;
}

.element {
  display: grid;
  gap: 0.9rem;
}

.element img {
  width: 100%;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--surface);
}

.element h2 {
  margin-block: 0 0.3rem;
  color: var(--accent);
}

.element p {
  color: var(--texte-2);
  font-size: var(--t-s);
}

/* Le titre est le lien : une seule cible, assez grande, et rien a survoler
   qui ne mene nulle part. */
.element h2 a:hover { color: var(--accent-fonce); }

/* ------------------------------------------------------------- ≥ 40rem */

/* La vignette passe a gauche, le texte a droite. C'est la rupture du site,
   pas une de plus. */
@media (min-width: 40rem) {
  .element {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
  }
}