/* ==========================================================================
   REMIND — legal.css
   Pages légales (Politique de confidentialité, CGU). Réutilise base.css
   (tokens, header, menu mobile, footer). Colonne d'article lisible et sobre.
   ========================================================================== */

.legal{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 72px) 0 clamp(48px, 8vw, 104px);
}

.legal__eyebrow{
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: 13px; color: var(--terra);
}
.legal__title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08; letter-spacing: -.01em; color: var(--ink);
}
.legal__updated{ margin: 14px 0 0; font-size: 15px; color: var(--ink-50); }
.legal__intro{
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-72);
}

/* Encadré d'information (hébergement, contact clé…) */
.legal__note{
  margin: 22px 0 0; padding: 16px 18px;
  background: var(--cream-2);
  border-left: 3px solid var(--gold); border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px; line-height: 1.55; color: var(--ink-72);
}
.legal__note strong{ color: var(--ink); }

/* Sommaire */
.legal__toc{
  margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
}
.legal__toc a{ color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.5; }
.legal__toc a:hover{ color: var(--terra); }

/* Corps */
.legal section{ margin-top: clamp(30px, 4vw, 48px); }
.legal h2{
  margin: 0 0 12px;
  font-weight: 700; font-size: clamp(21px, 2vw, 26px); color: var(--ink);
  scroll-margin-top: 96px;
}
.legal h3{ margin: 22px 0 8px; font-weight: 700; font-size: 17px; color: var(--ink); }
.legal p{ margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--ink-72); }
.legal ul{ margin: 0 0 16px; padding-left: 22px; }
.legal li{ font-size: 16px; line-height: 1.6; color: var(--ink-72); margin: 0 0 7px; }
.legal a{ color: var(--terra); }
.legal strong{ color: var(--ink); font-weight: 700; }
.legal hr{ border: 0; border-top: 1px solid var(--line); margin: clamp(30px, 4vw, 44px) 0; }
.legal__back{
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--ink-72); text-decoration: none;
}
.legal__back:hover{ color: var(--terra); }
.legal__back svg{ width: 16px; height: 16px; }

@media (max-width: 620px){
  .legal__toc{ grid-template-columns: 1fr; }
}