/* Styles de la page /blog (src/pages/blog.astro), chargés seulement par elle (pas dans la feuille commune du site).
   Couleurs et mesures : jetons de src/styles/tokens.css. */

.entete-blog h1 {
  max-width: 20ch;
}

.entete-blog .chapeau {
  max-width: 44rem;
  margin: var(--espace-4) auto 0;
  font-size: var(--taille-lg);
  color: var(--texte-secondaire);
}

.sommaire {
  margin-top: var(--espace-6);
}

.sommaire h2 {
  margin: 0 auto var(--espace-3);
}

.sommaire ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cibles tactiles de 48 px au moins (cahier des charges SEO, 10) */
.sommaire a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  padding: var(--espace-2) var(--espace-4);
  border-radius: var(--rayon-controle);
  box-shadow: inset 0 0 0 1px var(--trait);
  color: var(--lien);
  font-size: var(--taille-sm);
  text-decoration: none;
}

.sommaire a:hover {
  background: var(--sable);
  color: var(--lien-survol);
}

/* L'en-tête fixe ne doit pas masquer le titre du thème atteint par le sommaire */
.theme {
  scroll-margin-top: var(--espace-8);
}

.theme .intro {
  max-width: 44rem;
  margin: var(--espace-3) auto 0;
}

.cartes {
  display: grid;
  gap: var(--espace-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: var(--espace-6) 0 0;
  padding: 0;
  list-style: none;
}

.carte {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--rayon-media);
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--trait);
}

.section-teintee .carte {
  background: var(--blanc);
}

.carte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.carte .texte {
  display: grid;
  align-content: start;
  gap: var(--espace-3);
  padding: var(--espace-5);
  text-align: left;
}

.carte h3 {
  margin: 0;
  font-size: var(--taille-lg);
  text-align: left;
}

.carte h3 a {
  color: var(--texte);
}

.carte h3 a:hover {
  color: var(--lien);
}

.carte p {
  margin: 0;
  text-align: left;
  text-align-last: left;
  hyphens: none;
}

.carte .date {
  font-size: var(--taille-sm);
  color: var(--texte-secondaire);
}

.a-paraitre {
  max-width: 44rem;
  margin: var(--espace-6) auto 0;
}

.a-paraitre ul {
  margin: var(--espace-2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--texte-secondaire);
  text-align: center;
}

.a-paraitre li + li {
  margin-top: var(--espace-1);
}

.guide p {
  text-align: center;
}