/* ==========================================================================
   HUNGRY JAZZ — ACTUALITÉS : LA LISTE ET L'ARTICLE
   --------------------------------------------------------------------------
   Deux vues, une feuille : elles partagent la carte et le rythme.

   `.prose` — l'habillage du texte écrit dans l'éditeur — a déménagé dans
   `prose.css` : les pages légales en ont le même besoin, et il aurait fallu
   leur charger cartes et pagination pour obtenir un style de paragraphe.

   Rien de nouveau côté identité : uniquement des jetons de `tokens.css`.
   ========================================================================== */

/* ==========================================================================
   LA LISTE
   ========================================================================== */

/* `.news` est réglé pour l'aperçu de l'accueil : trois cartes sur une rangée,
   et `row-gap: 0` puisqu'il n'y en a qu'une. Une liste complète en empile
   plusieurs et doit les séparer.

   MAIS PAS AVEC `row-gap`, ET LA NUANCE COÛTE CHER. Les cartes sont en
   `subgrid` : elles partagent les rangées de la grille parente pour que visuel,
   date, titre et accroche s'alignent d'une carte à l'autre. Un `row-gap` posé
   sur le parent s'applique donc AUSSI entre ces quatre rangées, à l'intérieur de
   chaque carte — mesuré : plus de 100 px de vide entre le visuel et sa date.

   La séparation passe par une marge sur la carte. Une marge sur un élément de
   grille agrandit la dernière rangée qu'il occupe, sans rien changer aux
   autres. */
@media (min-width: 48em) {
  .news--liste .news__item { margin-block-end: var(--sp-xl); }
}

.news__vide {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  max-width: 28ch;
}

/* ---- Pagination ---------------------------------------------------------
   Absente de la maquette, qui n'avait pas d'articles. Même langue que le
   reste : capitales condensées, filets, aucune pastille arrondie. */
.pagination {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-m);
  border-top: var(--bd-rule) solid var(--c-ink);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px : la cible tactile du site, pas un chiffre isolé au milieu du vide. */
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  padding-inline: var(--sp-3xs);
  border: var(--bd-hair) solid transparent;
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible { border-color: var(--c-ink); }
.pagination .page-numbers.current {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}
.pagination .page-numbers.dots { min-inline-size: auto; }

/* ==========================================================================
   L'ARTICLE
   ========================================================================== */

/* Un titre d'article est une PHRASE, parfois longue. Au corps d'un titre de
   page — jusqu'à 7 rem — il deviendrait illisible passé quelques mots. On le
   ramène donc à l'échelle d'un titre de chapitre.

   SA MESURE EST LARGE, ET C'EST VOULU. Borné à 20 caractères, il n'occupait que
   le tiers gauche du hero et laissait un grand vide à droite — signalé par le
   client. Un titre n'est pas du texte courant : il supporte des lignes bien
   plus longues, et sur un site dont la langue est l'affiche, c'est LUI qui doit
   remplir la composition. À 34 caractères il tient deux lignes pleines au lieu
   de trois étroites. */
.article__h1 {
  font-size: clamp(1.875rem, 4.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: none;
  max-width: 34ch;
  text-wrap: balance;
}

/* L'IMAGE NE S'AGRANDIT JAMAIS AU-DELÀ DE SA TAILLE RÉELLE.
   Première version : pleine largeur, recadrée en 16/9. Une source de 640 px se
   retrouvait étirée à 1440 — 2,25 fois trop grande, donc floue. Le client l'a
   vu tout de suite, et le défaut n'était pas dans l'image mais dans la règle.

   `inline-size: auto` avec `max-inline-size: 100%` : une petite image s'affiche
   à sa taille, nette ; une grande image s'arrête à la largeur du conteneur. Le
   gabarit n'a plus à connaître la taille des images qu'on lui donnera.

   Le recadrage 16/9 disparaît avec : il massacrait toute image verticale. Les
   attributs `width` et `height` posés par WordPress suffisent à réserver la
   place et à empêcher la page de sauter au chargement. */
/* Respiration EN HAUT seulement : le chapitre qui suit apporte déjà la sienne,
   et les deux se cumulaient en un grand trou blanc sous l'image. */
.article__media {
  margin: 0;
  padding-block: var(--sp-l) 0;
}
.article__media .container { display: flex; justify-content: center; }

/* L'IMAGE APPARTIENT AU TEXTE, PAS AU HERO.
   `.chapter` pose la respiration des CHAPITRES du site — 137 px mesurés. C'est
   juste entre deux sections, et faux ici : l'image et le premier paragraphe
   sont le même bloc de contenu. Le résultat était à l'envers, l'image se
   retrouvant plus proche du hero (64 px) que de son propre texte.

   Même valeur au-dessus et en dessous : l'image respire de façon symétrique et
   se rattache visiblement à l'article. Signalé par le client le 30/09/2026. */
.article__media + .chapter { padding-top: var(--sp-l); }

/* L'IMAGE PREND TOUTE LA LARGEUR QU'ELLE PEUT SANS DEVENIR FLOUE.
   Les deux remarques du client se contredisaient en apparence — d'abord trop
   grande et floue, ensuite trop petite. Elles disent en fait la même chose : la
   bonne largeur dépend de l'image, et le gabarit ne peut pas la deviner.

   `--hj-img-max` est posé par `single.php` à la taille réelle du fichier, avec
   une tolérance de 10 % — un agrandissement de cet ordre ne se voit pas.
   Conséquence : une source de 640 px remplit la colonne de lecture et reste
   nette ; une vraie photo d'article s'étend sur toute la largeur du conteneur et
   fait le contraste éditorial qu'on attend d'une image large au-dessus d'un
   texte étroit. Sans indication, l'image se comporte comme avant. */
.article__media img {
  display: block;
  inline-size: min(100%, var(--hj-img-max, 100%));
  block-size: auto;
}

/* ---- Le corps du texte --------------------------------------------------
   LA MESURE N'EST PAS UN DÉTAIL. Un article se lit en entier, là où une page
   de cours se parcourt : au-delà de 75 caractères par ligne, l'œil perd le
   début de la suivante.

   ET LA COLONNE EST CENTRÉE. Elle était calée à gauche à l'intérieur d'un
   conteneur lui-même centré : le résultat n'était ni l'un ni l'autre, et le
   client l'a dit exactement comme ça — « le texte est à gauche mais pas
   vraiment ». Un alignement à gauche ne tient que si la marge droite sert à
   quelque chose : date, partage, articles liés. Il n'y a rien à y mettre, donc
   rien ne justifiait le déséquilibre.

   L'asymétrie reste où elle a du sens : dans le hero, dont le titre occupe
   toute la largeur. Le corps, lui, est une surface de LECTURE et non une
   affiche. */
.article__corps {
  max-width: 68ch;
  margin-inline: auto;
}

.article__pages {
  margin-top: var(--sp-l);
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---- Pour continuer -----------------------------------------------------
   Un article qui se termine sans issue renvoie le lecteur au bouton
   « précédent » du navigateur. */
.article__suite {
  padding-block: var(--sp-l);
  border-top: var(--bd-rule) solid var(--c-ink);
}

.article__suite-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-m);
}
@media (min-width: 48em) {
  .article__suite-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Le suivant se range à droite, comme la flèche qui l'annonce. */
  .article__suite-item--fin { text-align: right; grid-column: 2; }
}

.article__suite-label {
  display: block;
  margin-bottom: var(--sp-3xs);
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-paper-muted);
}

.article__suite-lien {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.15;
}
.article__suite-lien:hover,
.article__suite-lien:focus-visible { text-decoration: underline; text-underline-offset: .2em; }