/* Le site public. Une feuille a part, et volontairement courte.

   Elle ne charge pas base.css: cette page est vue par des inconnus, souvent
   depuis un telephone et une connexion de campagne, et le premier rendu est ce
   que le moteur mesure. Charger la feuille de l'application (jetons, blocs,
   composants d'un logiciel de gestion) pour afficher une liste d'annonces
   ferait payer a chaque visiteur une interface qu'il ne verra jamais.

   Les valeurs des jetons sont donc recopiees plutot qu'importees, mais
   seulement celles qui servent ici. Les deux surfaces doivent se ressembler:
   c'est le meme produit, et un acheteur qui devient eleveur ne doit pas avoir
   l'impression de changer de maison.

   La passe visuelle serieuse appartient au chantier /impeccable. Ceci est
   propre, lisible et sobre, pas encore dessine. */

@font-face {
  font-family: 'Plex Sans';
  src: url('/static/fonts/plex-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/static/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f9f7;
  --surface: #ffffff;
  --encre: #16201a;
  --encre-douce: #5b655e;
  --ligne: #dae0dc;
  --accent: #08633d;
  --chrome: #163d28;
  --chrome-encre: #eaf5ee;
  --police: 'Plex Sans', system-ui, sans-serif;
  --police-titre: 'Bricolage Grotesque', Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--police-titre); line-height: 1.2; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0 0 .35rem; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* Le bandeau est le seul aplat colore, comme dans l'application. */
.bandeau {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  background: var(--chrome);
  color: var(--chrome-encre);
}
.bandeau a { color: var(--chrome-encre); text-decoration: none; }
.marque-nom { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 700; }
.bandeau nav { display: flex; gap: 1.25rem; }
.bandeau nav a:hover { text-decoration: underline; }

main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.fil { font-size: .9rem; color: var(--encre-douce); margin-bottom: 1rem; }
.fil a, .fil span { color: inherit; }
.fil > *:not(:last-child)::after { content: " › "; color: var(--ligne); }

.chapeau { font-size: 1.05rem; color: var(--encre-douce); max-width: 46rem; }

.races, .departements {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 0;
}
.races li, .departements li {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .95rem;
}

/* Une grille qui n'a pas besoin de points de rupture: les cartes se rangent
   d'elles-memes, du telephone au grand ecran. */
.annonces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.annonce {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 1rem;
}
/* La photo touche les bords de la carte: une image encadree par une marge
   ressemble a une piece rapportee, la meme image a fleur de bordure fait
   partie de la carte. Le padding de l'article est donc annule en haut et
   rendu par la suite du contenu. */
.annonce-illustree { padding-top: 0; }
.vignette {
  display: block;
  margin: 0 -1rem .85rem;
}
.vignette img {
  display: block;
  width: 100%;
  /* Un rapport impose et un recadrage centre: les photos d'un eleveur sont
     tantot verticales tantot horizontales, et une grille de cartes dont chaque
     image a sa propre hauteur se lit comme un mur en desordre. Les attributs
     width et height du HTML restent ceux du fichier, ce qui laisse le
     navigateur reserver la place avant de charger. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  background: var(--bg);
}
.annonce h3 a { text-decoration: none; }
.annonce h3 a:hover { text-decoration: underline; }
.annonce p { margin: .25rem 0; }
.prix { font-size: 1.05rem; }
.quantites { color: var(--accent); font-weight: 600; }
.vendeur, .remise { color: var(--encre-douce); font-size: .93rem; }

/* Les photos d'une fiche annonce: une bande d'images de meme hauteur.

   La hauteur est fixe et la largeur suit: chaque photo garde ses proportions,
   sans recadrage, et une verticale a cote d'une horizontale ne fait pas boiter
   la ligne. Une premiere version donnait la pleine largeur a la premiere
   image, qui prenait alors la moitie d'un ecran de bureau et repoussait le
   prix et les quantites sous la ligne de flottaison: sur une annonce, ce sont
   ces deux la qu'on vient lire, la photo confirme.

   La bande defile plutot que de passer a la ligne: trois photos empilees
   feraient une page ou il faut descendre longtemps avant d'atteindre le
   bouton de contact. */
.photos {
  display: flex;
  gap: .5rem;
  margin: 1.25rem 0;
  overflow-x: auto;
  padding-bottom: .35rem;
}
.photos img {
  display: block;
  flex: 0 0 auto;
  height: 15rem;
  width: auto;
  max-width: 100%;
  /* Sans lui, une photo panoramique bornee par max-width verrait sa hauteur
     forcee et s'ecraserait. */
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface);
}
@media (max-width: 40rem) {
  .photos img { height: 11rem; }
}

.fiche { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 1rem 1.25rem; }
.fiche dt { font-weight: 600; color: var(--encre-douce); font-size: .9rem; margin-top: .75rem; }
.fiche dt:first-child { margin-top: 0; }
.fiche dd { margin: 0; }

.mention { color: var(--encre-douce); font-size: .93rem; border-left: 3px solid var(--ligne); padding-left: .85rem; }

/* Le seul appel a l'action du site: contacter le vendeur. Il n'y en a qu'un par
   page, et c'est ce qui lui permet d'etre le seul element plein. */
.contact { margin: 1.5rem 0; }
.bouton {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 10px;
}
.bouton:hover { background: var(--chrome); }
.vide { color: var(--encre-douce); font-style: italic; }

.filtres { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 1.25rem 0; }
.filtres label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--encre-douce); }
.filtres select, .filtres button {
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--surface);
}
.filtres button { background: var(--accent); color: #fff; border-color: var(--accent); cursor: pointer; }

.pied {
  border-top: 1px solid var(--ligne);
  padding: 1.5rem 1.25rem;
  color: var(--encre-douce);
  font-size: .9rem;
}
.pied p { max-width: 62rem; margin: 0 auto; }