/* ==========================================================================
   Grilles de la page Bac philo
   ========================================================================== */

/* Trois colonnes de 512 avec 48 de gouttière = 1632. La dernière rangée de la
   maquette n'a que deux cartes, centrées : `justify-content: center` suffit,
   sans règle de position. */
.pm-topic-grid {
  display: grid;
  gap: var(--pm-space-xl);
  justify-content: center;
}

/* Les six philosophes : colonnes de 232. */
.pm-philosophers {
  display: grid;
  gap: var(--pm-space-xl);
}

/* La fiche empile portrait, nom et description avec 12px entre chacun.
   Sans ce conteneur flex, les trois blocs se touchaient : le reset met à zéro
   les marges de p et de h3, et rien ne les espaçait plus. */
.pm-philosopher {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xs);
}

.pm-philosopher__portrait {
  width: 100%;
  aspect-ratio: 232 / 301;
  object-fit: cover;
}

.pm-philosopher__name {
  margin: 0;
}

/* Les citations : quatre colonnes de texte serif. */
.pm-quotes {
  display: grid;
  gap: var(--pm-space-xl);
}

/* Bloc « Derniers conseils » : texte et illustration côte à côte. */
.pm-closing {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xl);
  align-items: center;
  max-width: 1201px;
}

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

@media (min-width: 1024px) {
  .pm-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 512px));
  }

  .pm-philosophers {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pm-quotes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pm-closing {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Empilements de la page

   La maquette pose trois rythmes distincts, repris tels quels :
     — 119px entre le chapeau et la grille de cartes ;
     — 72px entre les grands blocs de la page ;
     — 48px entre le titre d'une section et son contenu.
   -------------------------------------------------------------------------- */

.pm-stack {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.pm-intro {
  display: flex;
  flex-direction: column;
  gap: 119px;
  align-items: center;
}

.pm-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xl);
  align-items: flex-start;
}