/**
 * Bloc « Liste de fiches ».
 *
 * Deux présentations, un seul balisage. La couleur vient de la rubrique.
 */

.fiches { margin-block: var(--e-l); }

/*
 * Le titre de la section : au corps du titre de page, à la couleur de
 * la rubrique, et sans filet. Le trait qu'il portait doublonnait avec
 * les pointillés des fiches et avec le séparateur qui suit souvent le
 * bloc ; la maquette n'en met pas.
 */
.fiches__titre {
  margin: 0 0 var(--e-m);
  font-size: var(--t-rubrique);
  font-weight: var(--graisse-extra);
  line-height: 1.2;
  color: var(--couleur-rubrique-texte);
}

.fiches__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * « Aucune offre actuellement… »
 *
 * Du texte courant, pas une alerte : l'absence d'offre est un état
 * normal de la page des annonces, pas un incident. Il ne prend donc ni
 * cadre ni couleur d'avertissement — seulement la mesure de lecture,
 * pour qu'il ne flotte pas seul au milieu d'une pleine largeur.
 */
.fiches__vide {
  max-width: var(--largeur-texte);
  margin: 0;
  color: var(--couleur-texte-doux);
  font-style: italic;
}

.fiche__titre {
  margin: 0 0 var(--e-3xs);
  font-size: var(--t-h4);
}

.fiche__precision {
  margin: 0 0 var(--e-2xs);
  font-family: var(--police-label);
  font-size: var(--t-petit);
  font-weight: var(--graisse-medium);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  color: var(--couleur-rubrique-texte);
}

.fiche__texte { max-width: var(--largeur-texte); }
.fiche__texte > :last-child { margin-bottom: 0; }

.fiche__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
 * Présentation en liste — une fiche par ligne, texte long
 * --------------------------------------------------------------- */

.fiches--liste .fiches__liste {
  display: flex;
  flex-direction: column;
  gap: var(--e-m);
}

.fiches--liste .fiche {
  display: grid;
  gap: var(--e-s);
  padding-bottom: var(--e-m);
  border-bottom: 1px solid var(--couleur-filet);
}

.fiches--liste .fiche:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (min-width: 700px) {
  /* L'image, quand il y en a une, occupe une colonne fixe : les fiches
     sans image ne creusent pas de trou dans l'alignement. */
  .fiches--liste .fiche:has(.fiche__media) {
    grid-template-columns: 14rem 1fr;
    align-items: start;
  }
}

/* ---------------------------------------------------------------
 * Présentation en grille — cartes côte à côte
 * --------------------------------------------------------------- */

.fiches--grille .fiches__liste {
  display: grid;
  gap: var(--colonnes-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.fiches--grille .fiche {
  display: flex;
  flex-direction: column;
  background-color: var(--couleur-fond);
  border: 1px solid var(--couleur-filet);
  /* Le filet de couleur en tête de carte rappelle la rubrique sans
     colorer le fond, où le texte deviendrait illisible sur le rouge. */
  border-top: 4px solid var(--couleur-rubrique);
}

.fiches--grille .fiche__media { aspect-ratio: 3 / 2; }

.fiches--grille .fiche__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--e-s);
}

.fiches--grille .boutons { margin-top: auto; padding-top: var(--e-s); }

/* ---------------------------------------------------------------
 * Présentation en colonnes — le montage en grille de la maquette
 *
 * Deux colonnes séparées par un pointillé à la couleur de la rubrique,
 * sans cadre ni fond. C'est le motif qu'on retrouve dans presque toutes
 * les rubriques ; il est écrit ici une fois pour les cinq sources de
 * fiches.
 *
 * Les filets ne sont pas des gouttières : la grille n'a aucun « gap »,
 * l'espace vient des réserves intérieures des cellules, et le trait est
 * une bordure de cellule. C'est ainsi que la médiane verticale descend
 * jusqu'au bas de la dernière rangée, même quand elle est incomplète.
 * --------------------------------------------------------------- */

:is(.fiches--colonnes, .fiches--empilees) {
  --fiches-reserve: 60px;
}

.fiches--colonnes .fiches__liste {
  display: grid;
  gap: 0;
}

:is(.fiches--colonnes, .fiches--empilees) .fiche {
  display: flex;
  flex-direction: column;
  padding-block: var(--fiches-reserve);
  border-bottom: 2px dotted var(--couleur-rubrique);
}

/*
 * La dernière rangée n'a pas de filet : il ferait doublon avec le
 * séparateur qui ferme la section, et deux pointillés à quelques pixels
 * l'un de l'autre se lisent comme une erreur.
 */
:is(.fiches--colonnes, .fiches--empilees) .fiche:last-child { border-bottom: 0; }

/* La première rangée ne prend pas de réserve haute : le bloc suit déjà
   ce qui le précède, et l'addition creuserait un trou. */
:is(.fiches--colonnes, .fiches--empilees) .fiche:first-child { padding-top: 0; }

@media (min-width: 62rem) {

  .fiches--colonnes .fiches__liste { grid-template-columns: 1fr 1fr; }

  .fiches--colonnes .fiche:nth-child(-n+2) { padding-top: 0; }

  /*
   * La colonne de gauche porte le trait vertical, et sa réserve va vers
   * lui ; la droite prend la sienne de l'autre côté. Les rangs impairs
   * sont à gauche : « 2n+1 » et non « odd », qui dirait la même chose
   * mais se lit moins bien à côté de son jumeau.
   */
  .fiches--colonnes .fiche:nth-child(2n+1) {
    padding-right: var(--fiches-reserve);
    border-right: 2px dotted var(--couleur-rubrique);
  }

  .fiches--colonnes .fiche:nth-child(2n) {
    padding-left: var(--fiches-reserve);
  }

  /*
   * Sur deux colonnes, la dernière rangée en compte souvent deux :
   * l'avant-dernière fiche y est aussi quand elle occupe un rang impair,
   * c'est-à-dire la colonne de gauche. Le sélecteur dit exactement
   * cela — « l'avant-dernière, et à un rang impair » — sans que le
   * gabarit ait à compter ses fiches.
   */
  .fiches--colonnes .fiche:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/*
 * L'en-tête : le triple chevron à gauche, le surtitre et le titre à
 * droite. Le texte, lui, reprend au bord de la cellule — la maquette ne
 * le décale pas sous le chevron, et c'est l'en-tête seul qui porte la
 * colonne.
 */
.fiche__entete {
  display: grid;
  grid-template-columns: var(--chevrons-largeur) minmax(0, 1fr);
  column-gap: var(--chevrons-ecart);
  margin-bottom: var(--e-2xs);
  font-size: var(--t-fiche-titre);
  line-height: 1.2;
}

:is(.fiches--colonnes, .fiches--empilees) .fiche__entete { --chevrons-largeur: 40px; }

:is(.fiches--colonnes, .fiches--empilees) .fiche__entete::before {
  grid-column: 1;
  grid-row: 1;
}

:is(.fiches--colonnes, .fiches--empilees) :is(.fiche__surtitre, .fiche__titre) { grid-column: 2; }

/*
 * Surtitre et titre partagent le corps et la graisse : ce sont les deux
 * moitiés d'un même bloc de titre, distinguées par la casse et par la
 * couleur. Le surtitre reste en marine — le repère n'est pas le sujet —
 * et c'est le titre qui porte la rubrique.
 */
:is(.fiches--colonnes, .fiches--empilees) :is(.fiche__surtitre, .fiche__titre) {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1em;
  font-weight: var(--graisse-forte);
  line-height: inherit;
  letter-spacing: normal;
}

:is(.fiches--colonnes, .fiches--empilees) .fiche__surtitre {
  text-transform: uppercase;
  color: var(--couleur-titre);
}

:is(.fiches--colonnes, .fiches--empilees) .fiche__titre {
  text-transform: none;
  color: var(--couleur-rubrique-texte);
}

/* Les autres présentations gardent leur surtitre discret. */
.fiches--liste .fiche__surtitre,
.fiches--grille .fiche__surtitre {
  margin: 0 0 var(--e-3xs);
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  font-weight: var(--graisse-extra);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--couleur-titre);
}

:is(.fiches--colonnes, .fiches--empilees) .fiche__texte { margin-top: var(--e-2xs); }

/* Le repli « Lire la suite », comme dans la présentation et la
   thématique. Le déclencheur lui-même vit dans boutons.css. */
.fiche__suite { margin-top: var(--e-s); }
.fiche__suite .fiche__texte { margin-top: var(--e-s); }

/*
 * Les boutons suivent le texte, ils ne sont pas plaqués au bas de la
 * cellule : la maquette ne les aligne pas d'une colonne à l'autre, et
 * une cellule courte se termine plus haut que sa voisine.
 */
:is(.fiches--colonnes, .fiches--empilees) .boutons { margin-top: var(--e-s); }

/* ---------------------------------------------------------------
 * Présentation en piles — une catégorie par colonne
 *
 * L'exception de la page des annonces : deux listes indépendantes côte à
 * côte, et non un montage en grille. Les rangées ne se répondent pas —
 * la colonne de droite fait trois fois la hauteur de celle de gauche.
 *
 * Le filet vertical est donc porté par la liste et non par ses fiches :
 * la grille étire les deux colonnes à la même hauteur, et le trait
 * descend jusqu'en bas, y compris le long du vide sous la colonne la
 * plus courte. Posé sur les fiches, il se serait arrêté à la dernière.
 * --------------------------------------------------------------- */

.fiches__colonnes {
  display: grid;
  gap: 0;
}

.fiches__colonnes .fiches__liste { margin: 0; padding: 0; list-style: none; }

@media (min-width: 62rem) {

  .fiches__colonnes { grid-template-columns: 1fr 1fr; }

  .fiches__colonnes .fiches__liste:first-child {
    padding-right: var(--fiches-reserve);
    border-right: 2px dotted var(--couleur-rubrique);
  }

  .fiches__colonnes .fiches__liste:last-child {
    padding-left: var(--fiches-reserve);
  }
}

/*
 * Sous la rupture, les deux piles se suivent. La première n'a plus de
 * filet vertical — c'est la bordure basse de sa dernière fiche qui
 * marque la séparation, comme partout ailleurs.
 */
@media (max-width: 61.999rem) {
  .fiches__colonnes .fiches__liste:last-child .fiche:first-child {
    padding-top: var(--fiches-reserve);
  }
}