/* ==========================================================================
   KILDE — pages légales
   Lisibilité avant tout : une colonne, du souffle, rien qui distraie.
   ========================================================================== */

.legal {
  padding: 11rem 0 var(--section);
  background: var(--creme);
}
.legal .cadre { max-width: 46rem; }

.legal h1 { margin: 1.2rem 0 2.4rem; }

.legal h2 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin: 3rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(43, 53, 48, .16);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal h3 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: 1.12rem;
  margin: 1.8rem 0 .5rem;
}

.legal p { margin-bottom: 1rem; color: var(--encre-2); }
.legal p strong { color: var(--encre); font-weight: 500; }

.legal .legal-chapo {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.6;
  color: var(--encre); margin-bottom: 2.4rem;
}

.legal ul {
  list-style: none; margin: 0 0 1.4rem;
  display: grid; gap: .6rem;
}
.legal li {
  position: relative; padding-left: 1.4rem; color: var(--encre-2);
}
.legal li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .38rem; height: 1px; background: var(--framboise-t);
}

.legal a { text-decoration: underline; text-underline-offset: .18em; }
.legal a:hover { color: var(--framboise-t); }

/* Les champs qui attendent une information réelle : impossibles à manquer,
   et impossibles à publier par inadvertance. */
.a-completer {
  background: #FFE9A8; color: #6B4A00;
  padding: .08em .5em; border-radius: 3px;
  font-family: var(--f-sans); font-size: .74em; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

.legal-retour {
  margin-top: 3.5rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(43, 53, 48, .16);
}
.legal-retour a {
  font-family: var(--f-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}

.pied .pied-bas a { text-decoration: underline; text-underline-offset: .18em; }
.pied .pied-bas a:hover { color: var(--framboise); }

@media (max-width: 760px) {
  .legal { padding-top: 8rem; }
}