:root {
  --size: 8px;
  --dot-radius: 2px;
  --line-height: 4px; 
  --speed: 0.8s; 
}

.declaration {
  display: block;              /* s'assurer que ça occupe une ligne */
  padding-bottom: 3px;        /* espace pour le "trait" */
  background-image: radial-gradient(circle, var(--h1-border) var(--dot-radius), transparent calc(var(--dot-radius) + 0px));
  background-repeat: repeat-x;
  background-size: var(--size) var(--line-height);
  background-position: 0 calc(100% - var(--line-height)); /* aligner en bas */
  animation: moveDotsLeft var(--speed) linear infinite;
}



.declaration > * {
  max-width: var(--maxwidth);
  margin: 1.6rem auto;
}
.declaration blockquote p { 
  margin: 0 auto;
  --font-wght: 900;
}
.declaration p + p {
  text-indent: 2em;
}
.declaration footer {
  text-wrap: balance;
  margin-top: 1.6rem;
}

/* ------------------------------------------------------------ mise en page */


main {
  display: block;
  padding-bottom: 3px;
  background-image: radial-gradient(circle, var(--h1-border) var(--dot-radius), transparent calc(var(--dot-radius) + 0px));
  background-repeat: repeat-x;
  background-size: var(--size) var(--line-height);
  background-position: 0 calc(100% - var(--line-height));
  animation: moveDotsLeft var(--speed) linear infinite;
}
main > * {
  padding: 0 1rem;
}
h2,
.intro,
.content,
.outro,
.tags-link {
  max-width: var(--maxwidth);
  margin: 1.6em auto;
}