html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: repeating-conic-gradient(
    rgb(235, 243, 60),
    rgb(149, 112, 197),
    rgb(115, 252, 224),
    rgb(154,127,254),
    rgb(223, 46, 169),
    rgb(73, 80, 75),
    rgb(231, 248, 17) 0.05deg
  );
  color: #551A8B;
  font-size: 1.1rem;
  line-height: 1.1;
}

/* Wrapper: left + right columns */
.article-wrapper {
  display: flex;
  width: 80%;
  margin-left: 2%;
  gap: 5rem;
}

/* Left column: heading + article block */
.left-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Heading inline background */
.left-column .bg-inline {
  background: rgba(255, 255, 255, 0.8);
  padding: 0.2em 0.5em;
  display: inline-block;
}

/* Big block wrapping all paragraphs */
.bg-block {
  background: rgba(255, 255, 255, 0.8);
  padding: 1rem 1.5rem;
  display: block;
  letter-spacing: -0.3px; /* resserre légèrement les lettres */
  word-spacing: -0.1em;   /* resserre l’espace entre les mots */
}


/* Right column: links sidebar */
.links-column {
  flex: 0; /* width auto */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(255,255,255,0.8);
  padding: 0.8rem 1rem;           /* more padding inside the box */
  margin-top: 3rem;               /* space from the top */
  min-width: 120px;               /* wider box */
  align-self: flex-start;
}

.links-column a {
  color: #551A8B;
}


@media (max-width: 1000px) {
  .article-wrapper {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    gap: 0.6rem;
  }

  .left-column {
    flex: 3;
  }

  .links-column {
    flex: 0 0 90px; /* largeur fixe */
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .bg-block {
    padding: 1rem;
    font-size: 1.05rem;
    line-height: 1.3;
  }
}