body {
  margin: 0;
  /* l'image couvre tout l'écran */
  background: url('./img/Twinkling-stars.gif') repeat fixed;
  color: #e5e7eb;
  font-family: system-ui, sans-serif;
}

/* Aside fixe à gauche */
aside {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;           /* largeur du menu */
  height: 100vh;          /* plein écran vertical */
  background: #111;       /* tu peux garder la même couleur que tes posts pour l’harmonie */
  padding: 20px;
  box-sizing: border-box;
  z-index: 10;            /* au-dessus du feed */
}

/* Décaler le feed pour laisser de la place à l’aside */
.feed {
  margin-left: 220px; /* marge = largeur aside + petit padding */
  max-width: 420px;

}
.feed {
  max-width: 420px;
  margin: auto;
  padding: 12px 0;
}

.post {
  margin-bottom: 24px;
  background: #201f2e;
  border-radius: 12px; /* arrondi pour tout le bloc */
  overflow: hidden;     /* assure que l'image suit les coins */
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.post img {
  width: 100%;
  display: block;
  border-radius: 10px 10px 10px 10px; /* arrondi uniforme */
}

.meta {
  padding: 12px 14px;
}

.date {
  font-size: 13px;
  opacity: 0.6;
}

.meta p {
  margin: 5px 0 0;
  font-size: 18px;
}
/* Pour écrans plus petits (mobile) */
@media (max-width: 768px) {
  .feed {
    max-width: 100%;   /* plus de limite */
    margin: 0;         /* plus de centrage, touche les bords */
    padding: 12px;     /* ou padding minimal si tu veux un petit bord */
  }
}