/* La Criée — les photographies de commune.
   Jetons de assets/site.css uniquement : aucune couleur, aucune police nouvelle.

   LA DIRECTION. Ce ne sont pas des images décoratives : ce sont des preuves.
   Chacune montre un lieu nommé de la commune, et ses coordonnées tombent dans
   le contour cadastral, sinon elle n'est pas là. Elles viennent d'appareils
   différents, d'années différentes, de photographes différents — et elles
   doivent malgré tout se lire comme une seule page de journal.

   L'unité vient des invariants, pas de l'effacement du sujet : même étalonnage
   chaud (fabriqué par outils/images.mjs), même rapport de cadrage, même grain
   de papier par-dessus, mêmes filets, même légende. La couleur reste — les
   toits de tuile d'un village perché et la baie d'une ville de bord de mer
   n'ont pas à se ressembler, c'est l'information. Le vermillon, lui, ne teinte
   aucune photographie : il ne sert qu'à la signature du contrôle. */

/* ── le tirage : l'image, son filet, et le grain du papier ──────────────── */
.tirage-criee {
  position: relative;
  background: var(--paper-deep);
  overflow: hidden;
}
.tirage-criee img {
  display: block;
  width: 100%;
  height: auto;
}
/* Le grain est le même sur toutes les images du site : c'est lui, autant que
   l'étalonnage, qui les fait appartenir au même journal — et il casse au
   passage le moirage des ciels dans les images compressées. En « soft-light »,
   le gris moyen de la tuile ne déplace rien : seul son écart fait texture. */
.tirage-criee::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/grain.png");
  background-repeat: repeat;
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: .16;
  pointer-events: none;
}
@media (prefers-contrast: more) {
  .tirage-criee::after { opacity: 0; }
}

/* ── l'image de tête ────────────────────────────────────────────────────── */
.hero-criee { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 13px 0 11px; }
.hero-criee .tirage-criee { border-bottom: 1px solid var(--line); }
.hero-criee img { height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.hero-criee figcaption {
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 10px;
  max-width: 104ch;
}
.hero-criee figcaption b { font-family: var(--text); font-weight: 600; font-size: 14px; color: var(--ink); }

/* Une licence ne se coupe pas en deux lignes — « CC BY-SA » ici, « 4.0 » là.
   Le nom de la source non plus. */
.lic-criee, .src-criee { white-space: nowrap; }

/* Le sceau du contrôle : la seule couleur posée sur une légende, et elle ne
   dit qu'une chose — cette photographie a bien été prise dans la commune. */
.sceau-vue {
  display: inline-block;
  margin-left: 12px;
  white-space: nowrap;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wax);
}
.sceau-vue::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--wax);
  vertical-align: .3em;
  margin-right: 6px;
}

/* ── l'album : une planche de tirages ───────────────────────────────────────
   Le filet est tiré par chaque tirage et non par le fond de la grille : une
   dernière rangée incomplète ne laisse alors aucune case grise en plan.
   Trois colonnes fixes plutôt qu'une grille élastique : l'album compte six
   tirages, ils remplissent exactement deux rangées, et chaque photographie
   reste assez grande pour qu'on y voie quelque chose. */
.album-criee {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 1px;
}
@media (min-width: 620px) { .album-criee { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .album-criee { grid-template-columns: repeat(3, 1fr); } }
.album-criee figure {
  background: var(--paper-hi);
  outline: 1px solid var(--line);
  padding: 11px 11px 13px;
  display: flex;
  flex-direction: column;
}
.album-criee .tirage-criee { border: 1px solid var(--line-soft); }
.album-criee img { aspect-ratio: 4 / 3; object-fit: cover; }
.album-criee figcaption {
  margin-top: 9px;
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}
.album-criee figcaption b { font-weight: 600; display: block; text-wrap: balance; }
.album-criee .cr-criee {
  display: block;
  margin-top: 5px;
  font-family: var(--ui);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.album-criee a, .hero-criee a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.album-criee a:hover, .hero-criee a:hover { color: var(--wax); }

@media (max-width: 620px) {
  .hero-criee img { aspect-ratio: 3 / 2; }
}

/* Un tirage se lit aussi sur papier. */
@media print {
  .tirage-criee::after { display: none; }
  .album-criee { grid-template-columns: repeat(2, 1fr); }
}