/* Le titre « En kiosque » et le bloc sont séparés de 48px (Figma « Frame 21 »,
   auto-layout vertical, gap 48). Cet écart vit ici et non sur le conteneur de
   la page : il venait du parent, présent sur la home et absent sur la page
   article, et le composant s'affichait donc collé à son titre selon l'endroit
   où on l'incluait. Une propriété du composant appartient au composant. */
.pm-kiosk-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

/* ==========================================================================
   .pm-kiosk — bloc « En kiosque »
   Figma : Col Droite / Frame 21.
   ========================================================================== */

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

.pm-kiosk__body {
  display: flex;
  gap: var(--pm-space-l);
}

.pm-kiosk__cover {
  flex: 0 0 auto;
  width: 109px;
  aspect-ratio: 109 / 146;
  object-fit: cover;

  /* Ombre portée douce de la maquette : noir, sans décalage, flou 4. */
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
}

.pm-kiosk__meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--pm-space-xs);
  min-width: 0;
}

.pm-kiosk__title {
  margin: 0;
}

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

.pm-kiosk__summary {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
.pm-kiosk__summary:hover {
  color: var(--pm-color-hover);
}
*/