/* ==========================================================================
   .pm-newsletter — bandeau d'inscription à la lettre quotidienne
   Figma : « Frame 2 », pleine largeur, fond #1510DE.

   Bandeau refermable : la croix en haut à droite existe dans la maquette.
   ========================================================================== */

.pm-newsletter {
  position: relative;
  padding: var(--pm-space-xl) var(--pm-gutter);
  background-color: var(--pm-color-blue);
  color: var(--pm-color-on-dark);
}

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

.pm-newsletter__visual {
  flex: 0 0 auto;
  width: 353px;
  max-width: 100%;
  aspect-ratio: 1;

  /* La source fait 1995×4096 : c'est le mockup de téléphone entier, alors que
     la maquette n'en montre que le haut dans un carré. */
  object-fit: cover;
  object-position: top;
}

.pm-newsletter__body {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

.pm-newsletter__title {
  margin: 0;
}

.pm-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

/* Le champ reprend la géométrie d'un .pm-btn : même hauteur, même rayon, même
   marge intérieure. C'est ce que montre la maquette, où le champ est dessiné
   comme un bouton clair à contour. */
.pm-newsletter__field {
  flex: 1 1 auto;
  min-height: var(--pm-control-height);
  padding: var(--pm-space-xs) var(--pm-space-l);
  border: 0;
  border-radius: var(--pm-radius-m);
  background-color: var(--pm-color-surface-muted);
  box-shadow: var(--pm-stroke);
  color: var(--pm-color-ink);
  font-family: var(--pm-text-interface-family);
  font-size: var(--pm-text-interface-size);
  font-weight: var(--pm-text-interface-weight);
  letter-spacing: var(--pm-text-interface-spacing);
}

.pm-newsletter__field::placeholder {
  color: var(--pm-color-ink);
  opacity: 1;
}

/* Bouton de fermeture du bandeau, desktop uniquement : la maquette mobile l'a
   retiré (branche 3eyZTTodX4u6sRzspqsyRb). */
.pm-newsletter__close {
  display: none;
  position: absolute;
  top: var(--pm-space-l);
  right: var(--pm-gutter);
  color: var(--pm-color-on-dark);
}

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

  .pm-newsletter__form {
    flex-direction: row;
    align-items: center;
  }

  .pm-newsletter__close {
    display: block;
  }
}