/* ==========================================================================
   .pm-promo — bandeau d'abonnement jaune
   Figma : « Bac philo » / Frame 3, pleine largeur, fond #EDC65A.

   La maquette desktop le montre DEUX fois : une fois flottant au milieu du
   contenu (y=731, par-dessus l'illustration du chapeau), une fois dans le flux
   juste avant le pied de page. Le mobile ne le montre qu'une fois, dans le
   flux, avec une ombre portée vers le haut.

   Lecture retenue : c'est un bandeau du flux, et la copie flottante illustre
   un comportement collant. Une seule est intégrée — à confirmer.
   ========================================================================== */

.pm-promo {
  position: relative;
  padding: var(--pm-space-xl) var(--pm-gutter);
  background-color: var(--pm-color-yellow);
  color: var(--pm-color-ink);
}

.pm-promo__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xl);
  align-items: center;
  max-width: 1074px;
  margin-inline: auto;
}

.pm-promo__illustration {
  flex: 0 0 auto;
  width: 316px;
  max-width: 100%;
  height: auto;
}

.pm-promo__body {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
  justify-content: center;
}

.pm-promo__title {
  margin: 0;
}

/* Les trois arguments, chacun précédé de son pictogramme. */
.pm-promo__arguments {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-3xs);
}

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

.pm-promo__price {
  margin: 0;
}

/* Le bouton est clair sur le fond jaune : c'est la variante « Abo » inversée,
   fond #F7F5F3 sans contour. */
.pm-promo__cta {
  align-self: flex-start;
  background-color: var(--pm-color-surface-muted);
}

.pm-promo__close {
  position: absolute;
  top: var(--pm-space-l);
  right: var(--pm-gutter);
  color: var(--pm-color-ink);
}

@media (min-width: 1024px) {
  .pm-promo__inner {
    flex-direction: row;
    gap: var(--pm-space-xl);
  }
}