.legal {
  padding: 0;
}

.legal--container {
  max-width: 880px;
  margin: auto;
  padding: 48px 24px 72px 24px;
}

@media screen and (min-width: 1024px) {
  .legal--container {
    padding: 48px 24px 86px 24px;
  }
}

.legal--container p strong {
  font-weight: bold;
}

.legal--container p em {
  font-style: italic;
}

.legal--container h1+p,
.legal--container h2+p,
.legal--container h3+p,
.legal--container p+p,
.legal--container ul+p,
.legal--container p+ul {
  margin-top: 16px;
}

@media screen and (min-width: 1024px) {

  .legal--container h1+p,
  .legal--container h2+p,
  .legal--container h3+p,
  .legal--container p+p,
  .legal--container ul+p,
  .legal--container p+ul {
    margin-top: 24px;
  }
}

.legal--container p+h2,
.legal--container p+h3,
.legal--container ul+h2,
.legal--container ul+h3 {
  margin-top: 24px;
}

@media screen and (min-width: 1024px) {

  .legal--container p+h2,
  .legal--container p+h3,
  .legal--container ul+h2,
  .legal--container ul+h3 {
    margin-top: 56px;
  }
}

.legal--container ul {
  list-style: square;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal--container ul li::marker {
  color: var(--bleu-ciel);
}

.legal--container .btn-link {
  display: inline-flex;
  gap: 8px;
  color: var(--bleu-nuit);
  text-decoration-line: underline;
  align-items: center;
  transition: color 0.4s ease;
}

@media (hover: hover) {
  .legal--container .btn-link:hover {
    color: var(--bleu-ciel);
  }
}