/**
 * Section « Dernières newsletters ».
 *
 * Mesures relevées sur la production : trois disques de 200 px pour des
 * gouttières de 125,5, dans un bloc de 851 — soit 23,5 % et 14,75 %,
 * qui font exactement cent.
 *
 * La bulle est celle des Actions : même disque, même graphisme de fond
 * en masque, même « plus » de la charte. Les deux dessins sont déclarés
 * dans « motifs.css », où ils ne s'écrivent qu'une fois ; ne reste ici
 * que ce qui appartient à cette section — la disposition, les corps, et
 * la répartition dans le disque.
 */

.newsletters-recentes { margin-block: var(--e-section); }

/*
 * La liste est une ligne souple et centrée, comme les accès rapides :
 * avec deux numéros au lieu de trois, une grille laisserait le second
 * collé à gauche de sa rangée.
 *
 * La gouttière VERTICALE est une longueur et non un pourcentage — un
 * pourcentage d'écart entre lignes se mesure sur la hauteur du
 * conteneur, et une hauteur libre vaut zéro pour ce calcul.
 */
.newsletters-recentes__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 14.75%;
  row-gap: var(--e-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.newsletters-recentes__item { flex: 0 0 23.5%; }

/*
 * LA BULLE.
 *
 * AUCUNE RÉSERVE EN POURCENTAGE SUR L'ÉLÉMENT FLEXIBLE — c'est le même
 * piège que sur les accès rapides et l'organigramme : un pourcentage de
 * remplissage se calcule sur la largeur du BLOC CONTENEUR, qui pour un
 * élément flexible est la ligne entière. D'où la bulle posée DANS
 * l'élément plutôt que sur lui : elle n'est pas flexible, son bloc
 * conteneur est donc bien sa case, et les 12 % de réserve valent ce
 * qu'ils disent.
 *
 * « overflow: hidden » rogne le graphisme au cercle : le masque couvre
 * toute la boîte, et sans cela il déborderait aux quatre coins.
 */
.newsletters-recentes__pastille {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  width: 100%;
  aspect-ratio: 1;
  padding: 12%;
  overflow: hidden;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-bulle);
  color: var(--couleur-sur-bulle);
  text-align: center;
  text-decoration: none;
  transition: box-shadow var(--transition);
}

.newsletters-recentes__pastille:hover,
.newsletters-recentes__pastille:focus-visible {
  box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.12);
}

.newsletters-recentes__pastille:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-focus);
  outline-offset: var(--focus-decalage);
}

/*
 * Le texte passe au-dessus du graphisme, qui est un ::before en absolu.
 * Deux lignes suffisent : le lien n'est plus étendu par un
 * pseudo-élément, c'est la bulle entière qui est le lien, donc rien
 * n'est gêné par une position relative sur le contenu.
 */
.newsletters-recentes__nom,
.newsletters-recentes__annee {
  position: relative;
  font-size: var(--t-h3);
  font-weight: var(--graisse-normale);
  line-height: 1.2;
  color: inherit;
}

/* Le « plus » est un peu détaché du texte, comme sur la maquette. */
.newsletters-recentes__plus { margin-top: 0.5em; }

/*
 * Deux par ligne, puis un : les ruptures du site. Un disque seul ne
 * prend pas toute la largeur — un cercle de onze cents pixels de
 * diamètre n'est plus un ornement.
 */
@media (max-width: 84.999rem) {
  .newsletters-recentes__item { flex-basis: 42%; }
}

@media (max-width: 47.999rem) {
  .newsletters-recentes__item {
    flex-basis: 100%;
    max-width: 16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newsletters-recentes__pastille { transition: none; }
}