/* Largeur de document, pas de section : au-delà, les filets des articles
   couraient 45 rem après la fin du texte et la charte cessait de se lire
   comme un texte de loi. */
.charter {
  list-style: none;
  padding: 0;
  counter-reset: art;
  border-top: 1px solid var(--hairline);
  max-width: 56rem;
}

.charter__art {
  counter-increment: art;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--hairline);
}

.charter__no {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35rem;
  position: relative;
}

.charter__no::before {
  content: 'Art. ' counter(art);
}

.charter__no::after {
  content: '';
  position: absolute;
  left: 0;
  top: -2.25rem;
  width: 22px;
  height: 2px;
  background: var(--sulfur);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-core);
}

.charter__art.is-in .charter__no::after {
  transform: none;
}

.charter__body h3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: 1.35rem;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.charter__body p {
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
}

.charter__body a {
  color: var(--olivine);
}

.charter__vote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  padding-top: 1.75rem;
  color: var(--ink-2);
}

.charter__vote b {
  color: var(--basalt);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .charter__art {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .charter__no {
    padding-top: 0;
  }

  .charter__no::after {
    top: -1.15rem;
  }
}