/* ==========================================================================
   .pm-hero — chapeau de page éditoriale
   Figma : « Bac philo » / Frame 42, 932px de large, centré.

   Le titre et le surtitre sont centrés, mais le chapô est aligné à gauche —
   c'est ce que dit `textAlignHorizontal` sur chaque nœud, pas le centrage du
   conteneur qui n'agit que sur les boîtes plus étroites que lui.
   ========================================================================== */

.pm-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;

  /* `width: 100%` n'est pas redondant avec `max-width`. En contexte de bloc il
     ne change rien, mais dès que le chapeau est enfant d'un conteneur flex en
     colonne — c'est le cas sur la page newsletter — les marges `auto` de l'axe
     transverse annulent l'étirement, et la boîte se réduit à son contenu :
     837px au lieu de 932, avec un chapô qui ne casse plus aux mêmes mots. */
  width: 100%;
  max-width: 932px;
  margin-inline: auto;
  text-align: center;
}

/* Le chapô est le seul élément du projet à changer de style nommé selon la
   largeur : « Texte_Large (citation) » 24/1.35 en desktop, « 📱Texte serif »
   20/1.45 en mobile. Ce n'est pas une variante d'un même style — les deux
   coexistent sur les mêmes écrans ailleurs dans le fichier — donc l'arbitrage
   ne peut pas vivre dans les tokens : il est propre à cet élément-ci.

   D'où la reprise en dur ici plutôt qu'une classe utilitaire dans le balisage,
   qui aurait exigé deux classes contradictoires sur la même balise. */
.pm-hero__lede {
  text-align: left;
  font-size: var(--pm-text-serif-s-size);
  line-height: var(--pm-text-serif-s-height);
}

@media (min-width: 1024px) {
  .pm-hero__lede {
    font-size: var(--pm-text-large-size);
    line-height: var(--pm-text-large-height);
  }
}

/* Le bouton du chapeau occupe toute la largeur en mobile (354px, soit le
   contenu entier) et reprend sa largeur naturelle en desktop (174px). C'est le
   comportement par défaut d'un bloc, d'où le `display: flex` seul en mobile et
   son retour à `inline-flex` au-delà. */
.pm-hero__cta {
  display: flex;
  width: 100%;
}

@media (min-width: 1024px) {
  .pm-hero__cta {
    display: inline-flex;
    width: auto;
  }
}

/* « Déjà abonné ? » et son bouton, sur une même ligne. */
.pm-hero__aside {
  display: flex;
  align-items: center;
  gap: 17px;
}

.pm-hero__illustration {
  width: 400px;
  max-width: 100%;
  height: auto;
}