/* ==========================================================================
   .pm-article — bloc du fil principal

   Anatomie, de haut en bas (identique aux deux breakpoints) :
     surtitre bleu → filet vertical → titre → filet vertical → signature
     → image → légende → chapo

   Les deux filets verticaux de 13px encadrent le titre : ce sont les LINE
   « Line 2 » et « Line 3 » de la maquette, pas une décoration inventée.
   ========================================================================== */

.pm-article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pm-space-xs);
  padding-bottom: var(--pm-space-l);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Le filet de séparation, en option

   La maquette n'en pose qu'UN dans tout le fil, entre les deux premiers
   articles. D'où un modificateur plutôt qu'une règle systématique — et côté
   Twig, une classe que Drupal pose là où il la veut.

   Il est le DERNIER ENFANT de l'article, pas un frère placé après : c'est ce
   que fait la maquette, et c'est ce qui donne les bons espacements sans les
   écrire. Le gap de 12px du conteneur le sépare du chapô (24 de padding + 12
   = 36 au-dessus), et le padding bas de l'article le sépare du suivant (48
   au-dessous). En frère, on obtenait 72 au-dessus et 0 au-dessous : le
   surtitre de l'article suivant venait se coller au trait.

   `align-self: stretch` lui donne la largeur du CONTENU (780 dans 876), et
   non celle de la colonne.
   -------------------------------------------------------------------------- */
.pm-article--separee::after,
.pm-article--separee-desktop::after {
  content: "";
  align-self: stretch;
  height: var(--pm-border-width);
  background-color: var(--pm-color-ink);
}

/* En mobile, les blocs latéraux s'intercalent dans le fil : un article suivi
   de « Notre sélection » ou de « En kiosque » ne doit PAS porter de filet, la
   maquette mobile n'en pose qu'un. En desktop ces blocs sont dans les colonnes
   voisines, le fil est continu, et chaque article est séparé du suivant.
   D'où deux modificateurs plutôt qu'un `:last-child` : le voisin visuel n'est
   pas le même selon le breakpoint, et Drupal saura poser la bonne classe. */
.pm-article--separee-desktop::after {
  content: none;
}

/* Le chapô de ces mêmes articles perd sa marge basse avec le filet. Cette marge
   n'existe que pour poser le trait à 36px sous le texte — 24 ici plus les 12 du
   gap de l'article. Sans trait elle ne sépare plus rien : elle s'ajoutait au
   padding de l'article et mettait 48px entre le dernier mot du chapô et le bloc
   blanc, au lieu des 24 du reste du fil. */
.pm-article--separee-desktop > .pm-article__lede {
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  /* Le filet reparaît, la marge du chapô avec lui. */
  .pm-article--separee-desktop::after {
    content: "";
  }

  .pm-article--separee-desktop > .pm-article__lede {
    padding-bottom: var(--pm-space-l);
  }
}

.pm-article__eyebrow {
  color: var(--pm-color-blue);
}

/* Filet vertical de 13px au-dessus et au-dessous du titre. */
.pm-article__tick {
  width: var(--pm-border-width);
  height: 13px;
  background-color: var(--pm-color-ink);
}

.pm-article__title {
  margin: 0;
}

/* Survol : soulignement du titre ET voile bleu sur l'image (voir tint.css).
   La maquette dessine les deux ensemble sur le même bloc, ce sont donc deux
   moitiés d'un seul état, déclenchées par un seul geste — d'où le survol porté
   par le bloc entier et non par le lien seul.

   Conséquence assumée : survoler le chapô souligne aussi le titre. C'est le
   comportement usuel d'une carte, et c'est ce que montre la maquette, qui met
   le bloc entier dans l'état sans distinguer ses parties. */
.pm-article:hover .pm-article__title a,
.pm-article:focus-within .pm-article__title a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La signature est en #170154 dans la maquette, pas en encre : c'est le seul
   endroit du projet qui utilise ce bleu nuit. */
.pm-article__byline {
  color: var(--pm-color-navy);
}

.pm-article__figure {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0 0;

  /* L'image est pleine largeur en mobile, jusqu'aux bords de l'écran, alors
     que les textes gardent la gouttière. D'où ce débordement contrôlé, annulé
     en desktop où l'image reste dans la colonne. */
  margin-inline: calc(var(--pm-gutter) * -1);
  width: calc(100% + 2 * var(--pm-gutter));
}

.pm-article__figure .field--type-image {
  width: 100%;
}

.pm-article__figure img {
  display: block;
  max-width: 100%;
  width: 100%;
  margin-bottom: 0; 
  height: auto;
}

.pm-article__image {
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 491;
  object-fit: cover;
}

.pm-article__caption {
  padding-inline: var(--pm-gutter);
  text-align: left;
}

.pm-article__lede {
  padding-bottom: var(--pm-space-l);
  text-align: left;
}

@media (min-width: 1024px) {
  .pm-article {
    /* La maquette imbrique trois largeurs : la colonne fait 936, l'article 876
       centré dedans, et son contenu 780 après 48px de marge intérieure. Sans
       le palier de 876, l'article occupe toute la colonne et son contenu sort
       à 840 — 60px de trop, visibles surtout sur le filet de séparation. */
    max-width: 876px;
    margin-inline: auto;
    padding-inline: var(--pm-space-xl);
    padding-bottom: var(--pm-space-xl);
  }

  /* Plus de pleine largeur : l'image reste dans la colonne. */
  .pm-article__figure {
    margin-inline: 0;
    width: 100%;
  }

  .pm-article__caption {
    padding-inline: 0;
  }
}