/* ==========================================================================
   .pm-subheader — bandeau de promotion du numéro, sous le bandeau principal
   Figma : composant « Sous header » (2399:2953), 1728×140, fond #F4E9CD

   Il ne figure sur aucune des pages déjà intégrées : c'est la page article qui
   l'emploie. Refermable, d'où la croix à droite.

   Le contenu est centré dans la page, pas dans la largeur utile : la maquette
   pose un bloc de 571px au milieu des 1728, et la croix se place indépendamment
   dans la gouttière. Un centrage entre les deux voisins déplacerait le bloc dès
   que le titre change de longueur — ce qui arrivera avec Drupal.
   ========================================================================== */

.pm-subheader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 140px de haut pour une couverture de 112 : il reste 14px de part et
     d'autre, ce qu'aucun de nos tokens d'espacement ne donne. La marge
     verticale est donc laissée à zéro et la hauteur imposée, le centrage du
     flex répartissant le reste. Poser --pm-space-l ici donnait 160. */
  min-height: 140px;
  padding: 0 calc(var(--pm-gutter) + var(--pm-icon-size) + var(--pm-space-l));
  background-color: var(--pm-color-sand);
}

.pm-subheader__inner {
  display: flex;
  align-items: center;
  gap: var(--pm-space-m);
}

/* 83×112 dans la maquette, soit le rapport d'une couverture de magazine. Fixé
   en hauteur plutôt qu'en largeur : c'est la hauteur qui doit tenir dans les
   140px du bandeau, la largeur suivant le rapport de l'image. */
.pm-subheader__cover {
  flex: 0 0 auto;
  width: 83px;
  height: 112px;
  object-fit: cover;
}

.pm-subheader__body {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-3xs);
}

.pm-subheader__title {
  margin: 0;
}

/* Bouton de 31px de haut, contre 43 partout ailleurs : valeur de la maquette,
   pas une déduction. Comme pour .pm-btn--compact, il faut `height` et non
   `min-height`, le contenu réclamant davantage. */
.pm-subheader__cta {
  height: 31px;
  min-height: 0;
  padding-block: 0;
}

/* La croix est calée dans la gouttière, verticalement centrée. Elle sort donc
   du flux : le bloc central reste centré sur la page quoi qu'il arrive. */
.pm-subheader__close {
  position: absolute;
  top: 50%;
  right: var(--pm-gutter);
  transform: translateY(-50%);
  display: flex;
  color: var(--pm-color-ink);
}

.pm-subheader__close:hover {
  color: var(--pm-color-hover);
}

/* En mobile la maquette ne montre pas ce bandeau. Plutôt que de l'inventer,
   il est masqué : le montrer supposerait d'en dessiner une version étroite. */
@media (max-width: 1023px) {
  .pm-subheader {
    display: none;
  }
}